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 as the Browser API it was based on was still in flux: WebVR 1.0 was quickly replaced by WebVR 1.1 which. even though only the minor version went up, 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 Origin Trials tokens to get your app running for users without them having to switch on any 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 the next version 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:
With Unreal engine the most popular 3d development platform out there supports HTML5 as a target platform and can therefore theoretically be used for WebVR development. That is not a typo, Unity can support only WebVR (as of 14. Novemeber 2019) and through use of Mozilla's Unity WebVR export plugin. But you want to develop WebXR? You can use Exokit's XR iframe to create a compatibility layer to WebXR 1.0.
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.
It definitely gives faster development experience than the other frameworks listed in this comparison, and you can publish your app as native app aswell!
Three.js already supports WebXR! Until there is AR support in WebXR, you will want to look at AR.js for WebAR support. It has an integration with Three.js.
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.
This development platform comes with a full visual editor, AR and VR support. Their graphics rendering is optimized for mobile and looks absolutely stunning if set up correctly. The loading times of the editor and exported games seem to be pretty okay aswell.
The visual editor makes it very easy to assemble scenes, add components and generate 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.
While they currently only support WebVR 1.1 officially, WebXR 1.0 support will likely be on their roadmap.
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.
Some of the currently biggest VR browser games have been developed on top of A-Frame: Barista Express and Moonrider. Because it runs on Three.js, it also already supports WebXR. WebAR is again supported through AR.js.
Size is up to you, A-Frame leaves optimizing your assets for loading times up to you. For simple use cases, A-Frame is perfect and the runtime-optimizations it does for you 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.
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).
Still didn't find the right tool for the job? You might be interested in what we are building. The Wonderland Engine is an offline tool that will produce an efficient binary scene format which is loaded with a WebAssembly based runtime.
And, yes, we already support WebXR.
Wonderland Engine is coming soon, make sure to subscribe to our newsletter. If you have a question regarding whether our tool would fit your use case, please contact us through the Contact Form.