BACK

2018-05-01

- By Nicolas Lagoutte

Choosing a Technology Stack for 3D Applications

This is a follow-up to my previous article, Design Considerations For 3D Applications. If you haven't read it yet, and you want to build a 3D application for your business, I strongly encourage you to start there.

The Current Landscape

Let us begin by taking a broad look at some of the serious contenders today. Obviously, this list is not exhaustive and there are many other technologies capable of producing 3D content, but I have selected a healthy variety of heavy-duty game engines, web-based 3D visualisers, and lightweight 3D JavaScript libraries so that you can get a good idea of the sort of tools you can choose from. Without further ado...

Development Deployment
Technology Stack Type Programming Languages Price Open-Source? Desktop Binary Mobile WebGL XR Support Ecosystem
Unity3D Full-featured 3D engine & development tools C# Pro: $125/seat/month
Plus: $35/seat/month
No, it is proprietary software with source code access & restrictions. Some components of the engine have been open-sourced under the MIT license. Yes Yes Experimental support on desktop browsers. Yes, all major VR and AR hardware vendors have plugins. Asset store where users can buy high-end 3D models, animations, scripts, frameworks, tools, plugins, etc.
Unreal Engine Full-featured 3D engine & development tools C++
Blueprint Visual Scripting
Free to use but 5% royalty on gross product revenue after the first $3,000 per game per calendar quarter from commercial products. No, it is proprietary software with source code access & restrictions. Yes Yes Experimental support. Yes, all major VR and AR hardware vendors have plugins. Marketplace where users can buy high-end 3D models, animations, scripts, frameworks, tools, plugins, etc.
PlayCanvas JavaScript library targeting the WebGL API & in-browser development tools JavaScript Organisation: $50/seat/month
Personal: $15/seat/month
Open-source under MIT license. Indirectly* Indirectly* Yes Yes, support for WebVR 1.1 -
ThreeJS JavaScript graphics library capable of rendering WebGL, SVG, CSS3D JavaScript Free Open-source under MIT license. Indirectly* Indirectly* Yes Yes, with some external libraries -

*Keep in mind that you are introducing further dependencies on external tools and increasing your risk factors by relying on indirect deployment support. Tools that deploy natively to desktop/mobile may be better suited for your use-case. Using web technologies for desktop or mobile applications means you will need a conversion step in your deployment pipeline. NW.js and Cocoon are two examples of frameworks you can use to convert a web application to a native desktop or mobile one, respectively.

Picking the Right Tool for the Job

So, there it is. If you've been thinking about your requirements as I advised in my previous article, in particular your deployment needs, you may find the choice already made for you, as the technologies broadly divide into two categories:

  1. Native desktop/mobile technologies, e.g. Unity3D, Unreal Engine
  2. Web-first technologies, e.g. PlayCanvas, ThreeJS, and many others

Still, there is more to think about. Some of these technology stacks, such as Unity3D, are massive monoliths that can run all layers of your stack in its engine - they are meant to be used on their own. Unity3D runs multiple events every year across the globe and has its own professional certification programme for developers. It is a developer career path in its own right - worth taking into account when thinking about your vision for your team and the skills you want to nurture.

Are you sure such an all-encompassing tool is what you need for your application? On the other end of this spectrum, technologies like ThreeJS are simply lightweight JavaScript libraries. This allows you complete freedom (but more work) to choose the rest of your back and front-end technologies instead of having to do things, say, "the Unity way".

If you want to build a 3D web application and are wondering how all of the above technologies measure up, read on.

What is WebGL?

WebGL is an API that allows your browser to directly communicate with graphics hardware, like its parent OpenGL. WebGL 1.0 was released in 2011 with wide support from all the modern browsers, paving the way for desktop-grade, high-end 3D graphics rendered within a browser.

You can absolutely write 3D applications directly using WebGL if you want to. However, it is a very low-level library, and your developers will find themselves writing very detailed and intricate code, manipulating vertex data directly (much like in OpenGL). This is where abstractions are helpful - why re-invent the wheel if someone has already done it? Just as game engines such as Unity3D or the Unreal Engine try to save you from writing basic rendering routines manually in OpenGL, libraries like ThreeJS help you by abstracting the low-level details away (and PlayCanvas even more so).

Technical Deep Dive: Unity, Unreal, and WebGL

You will notice from the table that Unity3D and the Unreal Engine both have experimental support for WebGL, meaning that they can, to some extent, be used to create web applications. How do they do this? How do they target a JavaScript API, when their application code is in C# or C++? Enter the following tools:

  • IL2CPP: a Unity-developed build tool that can convert .NET bytecode (your C#) and compiles it to C++ source.
  • emscripten: an open-source LLVM-to-JavaScript compiler. C++ source can be converted to LLVM bitcode, which emscripten can then convert to JavaScript targets like asm.js or WebAssembly.
  • asm.js: a strongly optimisable subset of JavaScript. Can be targeted by transpilers like emscripten.

Unity3D and Unreal Engine use these tools in the build pipeline as follows:

While this build pipeline allows these engines to produce web applications, unfortunately it comes at a heavy performance cost. Both Unity3D and the Unreal Engine have very large runtimes which cannot be separated into modules. This means that even if you write a small application using only a few of the engine features, your builds will be compiled using the entire engine. This results in:

  • Larger builds (which often crash low-memory devices)
  • Slower loading times
  • Lower frame rates
  • Higher resource usage
Unless Unity and Unreal significantly overhaul their engine architecture to be more modular, which would pave the road to solving these issues, I must strongly recommend using build-for-purpose WebGL technologies such as PlayCanvas or ThreeJS if you wish to deploy your 3D application for the web.

I hope this is a helpful starting guide on things to consider when selecting technology stacks for 3D development. If you would like more specific advice and help with building your 3D application, feel free to reach out to us.

0 comments

Please be aware that we will be processing your input data in accordance with our privacy policy.