Top 5 WebXR Frameworks - Comparison
Want to start WebXR development? Here is a comparison of the top 5 frameworks to get you started.
On December 13th 2019, Chrome 79 is the first browser to release with WebXR 1.0 enabled by default. This means the first step to overcoming one of the biggest hurdles for WebXR is finally solved: stability. Previously it was really hard to maintain a WebXR / WebVR / WebAR project since the browser API it was based on was still in flux: WebVR 1.0 was quickly replaced by WebVR 1.1 which, despite only the minor version increasing, changed enough to break any application written in WebVR 1.0.
After WebVR 1.1 followed a series of unversioned intermediate versions of WebXR. It was hard to detect which version you were dealing with and had to deal with requesting Google Chrome Origin Trials tokens to get your app running for users, without having them switch on experimental flags.
With WebXR 1.0 in Chrome 79, this hassle is finally over and we can assume that our apps will continue working even in upcoming versions of Chrome. This also means you can finally get started with the project you always wanted to do! But which framework should you be using?
Here’s a list of what we think could be suitable:
Contents
5 - Unity 3D
Together with Unreal Engine the most popular 3D development platform out there, it supports HTML5 as a target platform and can therefore theoretically be used for WebXR development. It is not supported out of the box, though: you need a plugin like De-Panther’s WebXR Exporter.
This is indeed not optimal, but you would benefit from future native WebXR support in Unity 3D, in case they add it. Until then, though, you would have to deal with some other issues with the HTML5 export: performance, loading times and no support for mobile GPUs (like those in smartphones or Oculus Quest and other standalone headsets). You do benefit from Unity’s asset and plugin ecosystem and you can publish your app as native app as well!
4 - Babylon.js
With the “Playground”, this framework provides a fast way to prototype any 3D application. They already support WebXR and have a huge list of examples to render nearly anything. Its flexibility can be attributed to being a JavaScript library. It allows you to dive to very low level, but requires you to write your entire application in JavaScript. It is targeted at more experienced coders, so we recommend you chose this framework if you either have the experience and/or need to customize rendering a lot.
3 - Three.js
Probably the most popular Open Source JavaScript rendering library out there. Again, full flexibility is available on a very low level, as you can customize rendering to do anything you want. With great power comes great responsibility, though: you are solely responsible for keeping your application performant and run smoothly even on mobile VR devices.
Three.js already supports WebXR! Until there is wide-spread AR support in WebXR, you will want to look at AR.js or mind-ar-js for WebAR support. Both have integrations with Three.js.
The Three.js editor allows you to assemble scenes easily and from many different file formats. This will allow you to swiftly get your project started, but will still require you to code interactions in JavaScript later on. The editor doesn’t have a notion of project files and is therefore really only useful to generate the initial code for your project.
If you don’t have any coding experience, we recommend you look at A-Frame instead. It is built on top of Three.js and allows you to leverage a good subset of features in a way simpler manner.
2 - PlayCanvas
This development platform comes with a full visual editor, and comes with AR and VR support. Their 3D graphics rendering looks stunning if set up correctly. The loading times of the editor and exported games seem to be pretty okay as well.
The visual editor makes it very easy to assemble scenes, add components and deploy your project. Additionally, a built-in code editor allows you to write your own custom scripts. If you prefer your own code editor, Atom, Vim, Visual Studio Code or else, you might have a harder time editing the scripts. With their REST API, you might still be able to do so, though.
1 - A-Frame
For convenient WebVR and WebAR development, A-Frame has been the way to go in the past years. Building on top of Three.js, you can always go lower level in case you need customization with loads of existing components that you can reuse.
A-Frame allows you to set up your scene in HTML, which it generates a 3D scene hierarchy from. You can create custom JavaScript components to modify behaviour and interactions and the “A-Frame Inspector” lets you easily edit your scene and see what is generated from the HTML. Some bigger VR browser games have been developed on top of A-Frame: Barista Express and Moonrider.
Because it runs on top of Three.js, it also already supports WebXR. WebAR is again supported through AR.js. A-Frame leaves optimizing your assets for loading times up to you, though. For simple use cases, A-Frame is perfect and will get you pretty far.
For larger projects, though, you might reach the edge of the scope that A-Frame’s performance limits you to.
Summary | TL;DR
The choice of framework will depend on your use case. For simple scenes, we recommend A-Frame. If you need more performance, lift the hood and optimize directly on Three.js. If coding is not for you, maybe try PlayCanvas. It also seems to provide the easiest way to achieve very good looking graphics (but for VR on the web, please prefer performance to looks).
Wonderland Engine
Still didn’t find the right tool for the job? You might be interested in what we are building. Wonderland Engine is an offline tool that will produce an efficient binary scene file which is loaded with a WebAssembly based runtime.
While benefiting from the performance of our optimized rendering, you can implement interaction code with our JavaScript/TypeScript API. Many reusable components are written for you to handle VR, AR, audio, and more.
And, yes, we support WebXR, the engine was designed for it from the ground up.
Download Wonderland Engine from the Downloads page and register an account here.