Top 5 WebXR Frameworks - Comparison

November 14, 2019

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:

5 - Unity 3D

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!

Unity 3D Website

4 - Babylon.js

With the "Playground", the rendering engine provides a fast way to prototype any 3D application. They already support WebXR and have a huge list of examples to render nearly anything. It's flexibility can be attributed to being a JavaScript library, which while allows you to dive in very low level, 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.

Babylon.js Website

3 - Three.js

Probably the most poular 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 AR support in WebXR, you will want to look at AR.js for WebAR support. It has an integration 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.



Three.js Website

2 - PlayCanvas

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.

PlayCanvas Website

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 scnee in HTML, which it generates a 3D scene hirarchy from. You can create custom JavaScript components to modify behaviour and interactions and the "A-Frame Inspector" let's you easily edit your scene and see what is generated from the HTML.

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.

A-Frame Website

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. The Wonderland Engine is an offline tool that will produce an efficient binary scene format which is loaded with a WebAssembly based runtime.

While benefiting from the performance of our optimized rendering, your interaction code can flexibily implemented using our JavaScript component API with many components written for your to handle VR, AR library integrations, audio and more.

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.

Start building your WebXR app soon.
Whether game developer, designer, artist or visionary.
Start Now
Thank you for subscribing!
Oops! Something went wrong while submitting the form.