How to build 3D web apps. Part 5. Making 3D web apps with game engines

Unity game engine

Unity is probably the hottest game engine right now, powering many commercial games and hobby projects. Unity is fully featured, relatively easy to get started with and most importantly free for personal and even small commercial projects. But it’s not just games that it is used for. The powerful 3D display capabilities inherent in a game engine are perfect for productivity scenarios too, which is why a lot of companies use Unity to create apps that operate industrial CAD and 3D data for collaborative design reviews, personnel training, product showcases and other visualization scenarios — often in the form of VR and AR apps.

Considerations for Unity productivity apps

Being a game engine first, Unity has a specific workflow. It has a single event loop that runs both the project business logic and rendering. This means that event-handling code has to be quick to not freeze the entire application. If there are any computationally heavy operations, they must be offloaded to a separate thread and run asynchronously. Another point is that out-of-the-box Unity is not capable of loading previously unseen models in runtime. This is because games normally use a fixed set of assets which are all available when building the app. Loading 3D data at runtime requires running code in the aforementioned event loop.

Web apps with Unity

Unity supports a number of target platforms: desktop and mobile OSes, game consoles — and also WebGL. To create a WebGL application, one must choose the WebGL as the target platform in Build Settings. Then running the build process produces a set of files, which can be served as a static content with a web server (or a CDN). Provided there are no additional requirements that have to be implemented outside of Unity, a functional web app can be created by Unity developers without extensive experience with web development.

Fig. 1. Build Settings window in Unity, where the WebGL target can be selected.
Fig. 1. Build Settings window in Unity, where the WebGL target can be selected.
Fig. 2. Summary of the Unity WebGL build process. The project components are packaged in an appropriate way for execution in the browser.
Fig. 2. Summary of the Unity WebGL build process. The project components are packaged in an appropriate way for execution in the browser.

Limitations of Unity web apps

All things considered, the browser appears to be a very functional platform for Unity app execution. The majority of Unity’s features are available for WebGL builds. Here are the most important limitations:

Memory

Upon the loading of Unity runtime in the browser, a large block of contiguous memory is allocated for the entirety of your app. This block can grow (though not larger than 2 GB), but an attempt to do that can fail if the browser doesn’t have enough memory. All the app’s objects and assets, including objects you need to load models at runtime, will have to reside there. All of these factors mean that there is a soft limit on the complexity of your app and the complexity of 3D data you’ll be able to work with.

Browser support

Unity claims to support all major desktop browsers, but mobile browsers aren’t officially supported. Furthermore, due to the varying level of API implementation in the browsers, some of them might not permit the use of certain features or might perform worse than others. Most notably, Apple’s Safari does not support WebGL 2.0, so Unity is forced to fall back to WebGL 1.0 when running in it.

Multi-threading

WebAssembly currently doesn’t have support for multi-threaded computations in stable browsers, so both the Unity runtime and the client C# code can’t utilize threads for computations.

PlayCanvas game engine

PlayCanvas is another game engine, and it’s also possible to use to create 3D productivity apps. Unlike Unity, it was created from the ground up for the purpose of creating 3D games for the web. It has all the features one would normally expect from a game engine — support for rendering, audio playback, input handling, management of scenes and assets, scripting and others. There’s an editor allowing one to quickly create scenes. But naturally, it uses JavaScript as its scripting language and the runtime of the engine is itself implemented as a JavaScript library.

Fig. 3. PlayCanvas editor sports all the necessary attributes of a game editor: 3D view, scene graph and asset panels, object properties and attached components list.

Summary

This time we took a brief look at two tools capable of producing 3D web apps in a different manner, focusing more on the 3D app development than the web app development. If the app requires centralized features like user accounts and sharing, these tools will by themselves only take care of the client-side and server-side development should look as it does for the usual client-server web app built with common web technologies. Otherwise, these tools can prove useful for teams that don’t have much experience with web development, but have a background in 3D app development.

--

--

CAD Exchanger is a technology that enables data exchange in the multi-CAD world.

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
CAD Exchanger

CAD Exchanger

CAD Exchanger is a technology that enables data exchange in the multi-CAD world.