WebGL Libraries and Frameworks, Unity 3d Transpiles, and More

August 13, 2016

To date, much of the work with the emerging WebVR spec has been done using a single code library – the popular THREE.js, creation of Mr. Doob. The current webvr-polyfill implicitly assumes that THREE is being use, and in fact spits out a console message when THREE is not installed.

However, WebVR doesn’t require THREE.js. The basic WebVR examples created by Toji all use basic WebGL, without a library. And, there are other libraries that might be used to create VR worlds. And there are other implementations, all of which support the emerging WebVR spec to varying degrees.

Here is a short list of libraries and 3d JavaScript-based editors that support WebVR.

THREE.js

threejs-webvr

Babylon.js

  • game oriented, easier to learn, standard JavaScript dev environment, requires a bit less coding than THREE. WebVR added to versions of the Free Camera. Babylon also has a great online “playground” when developers post their work in a CodePen-style interface. However, there isn’t much about WebVR builds, despite a good set of WebVR and stereo camera objects you can use. More about this library in an upcoming post.

PlayCanvas

PlayCanvas new project screen showing WebVR support

Goo Engine

  • also has an online development environment. Developer WebVR support (Aug 2016) seems limited

VoxelJS

Voxeljs libraries showing webvr support

PrimroseVR

  • a new framework, focused specifically on developing WebVR experiences using native JavaScript. One neat featue is the ability to display text within the VR world – you can actually type in code while you are in VR, and watch the changes to the scene without taking off your headset! A very interesting Ux concept. An GUI editor is present
  • https://github.com/capnmidnight/Primrose/archive/master.zip

Primrose VR showing default screen and HTC Vive support

Primrose VR showing web editor

(image from https://www.sitepoint.com/build-virtual-reality-with-primrose-and-webvr/ )

A-Frame

A specialized framework for building VR experiences. It uses custom XML tags, embedded directly in your HTML markup, similar to the old VRML standard in the 1990s. Uses THREE.js as the underlying library. It might be a good choice for entry-level VR development, since web designers without a lot of JavaScript experiences should be able to put together VR scenes.

A-Frame example, showing 3D VR curved Ui

CopperJS

  • One of the first WebGL libraries, focused on 3D game development. No support for WebGL in current (Aug 2016) versions.

More detailed comparisons:

 

Transpiling from Non-JavaScript 3D Dev Environments

In addition, popular frameworks using C++ or C# can be “transpiled” to Asm.js, and will also run with WebGL:

Some comparisons between Unity transpiles and “native JavaScript” frameworks

I should also note that you can cross-compile the C++ generated by Unity to JavaScript, in particular the ASM.js standard, meaning that (in theory) one can export Unity/C++ to JavaScript and WebGL independent of direct support. In the near future we’ll have WebAssembly, which will make the platform directly competitive with C++ and C# compilers.

https://www.sitepoint.com/asm-js-and-webgl-for-unity-and-unreal-engine/

 

Why Not Go with The Big Players?

The BIG problem for Unreal and Unity (which might be the natural choice of game developers is size. Unity used to have a web “plugin” but like Adobe Flash, these don’t work anymore. Chrome killed plugin support in version 42, and Microsoft Edge jettisons ActiveX plugins in favor of web standards.

Also, the version of WebGL in browsers today, OpenGL ES, is more primitive than the 3D api used by Unity and Unreal, so some advanced techniques wouldn’t work.

On the other hand, Unity and Unreal (which I haven’t tried directly) have to go through the transpile step, resulting in massive code bloat. A program that could be implement in THREE.js in a few hundred lines will be a multi-megabyte download if transpiled from Unity. The resulting code is also highly browser-dependent, running slowly on some browsers and faster on others, ghough some reports say that the Unity transpiles have more constant framerates.

 

Which “JavaScript Native” Platform to Use?

The choice of a framework depends on your use context. If you’re coming from a web development world and are experience with JavaScript, you probably want to start with THREE.js or BabylonJS. These environments closely match what front-end developers are used to. You will need to learn “the 3D way”, so using an editor like Vizor or Clara.io would be useful for creating VR worlds beyond simple demonstrations.

If you’re already familiar with game development in a GUI, PlayCanvas might be the best choice. Unlike the transpiled versions of Unity and Unreal, you’ll get small, fast-running code optimized for the web. But PrimroseVR definitely deserves a look -unlike PlayCanvas it is being build specifically for Virtual Reality.

Finally, if you’re a diehard Unity fan or otherwise locked into Unity or Unreal frameworks, use the transpiler. The resulting code will be large, and you’ll have to pay attention to the limited support for OpenGL in current browsers. However, these editing environments have a large base of developers, and may be they way to bridge to WebVR.