Learn WebXR Development
Get started with WebVR/WebXR Device API development.
Building WebXR applications is not hard, but very rewarding. Especially (but not only) if you already know a programming language. This guide will help you find resources and avoid the most common pitfalls.
While this site focuses on VR browser games development, this guide should be applicable to any other application aswell.
Introduction
This guide will give you a head start on how to build your own VR browser games (or any WebXR app for that matter). As we don’t know your level of experience, feel free to skip what you already know.
Let’s start off with the very basics.
Web Development
Building a VR or AR application or game for the browser is very similar to building any 3D application for the browser. With the right tools, it can be like building a website, though!
The basic technologies to build a website are HTML, CSS and often JavaScript. With 3D content on the web we need the flexiblity of JavaScript, but frameworks like A-Frame will get you a long way with just HTML.
Graphics on the Web
Displaying 3D graphics in a browser is possible with WebGL (“Web Graphics Library”). It allows the use of the GPU from within the browser. You do not have to become a WebGL expert. Instead you will likely use a framework which uses WebGL without you having to use it directly.
VR on the Web
Efforts to bring VR into the browser originally started with the WebVR API. Since then, WebVR has been replaced by the WebXR Device API, which will be enabled in Chrome 79 (December 13th 2019) by default. Other browsers will follow. This API also allows using AR, while the previous only provided VR.
When chosing how to make your VR browser game, look out for WebXR support rather than WebVR support, as your app may stop working eventually, if it only supports WebVR!
Because VR in the browser is still experimental, not all browsers support it yet. We recommend using Mozilla Firefox with Oculus Rift or Steam VR, Google Chrome on Android for Daydream and Oculus Browser for Samsung GearVR, Oculus GO and Oculus Quest.
Find out more about browser support on webvr.info and caniuse.com. As well as WebXR also on caniuse.com.
What are Frameworks?
“Frameworks”, “engines” or “development platforms” help you build WebXR apps easier and faster. Frameworks contain a lot of JavaScript code that is needed often for easy reuse.
Engines on top of that offer toolsets that may not even require you to write a single line of code, but may be less flexible and less tailored to your specific WebXR app. They _can_ make the resulting app bigger (because it contains stuff you are not using), which means your game will take longer to load.
Alternatives
It is possible to build your game in an engine without using web technologies to finally export them to the web. Underneath, these engines often utilize compilation to WebAssembly (e.g. via Emscripten), which you can also use directly to build your VR browser game.
Frameworks and Engines
The following table shows a list of frameworks and engines:
Framework/Engine | Programming Languages | WebXR | Difficulty | Website |
---|---|---|---|---|
A-Frame | HTML/JavaScript | ✓ | Easy | aframe.io |
Unity | (JavaScript/C#) | Easy | unity3d.com | |
PlayCanvas | (JavaScript) | ✓ | Easy | playcanvas.com |
WonderlandEngine | (JavaScript) | ✓ | Easy | wonderlandengine.com |
Three.js | JavaScript | ✓ | Interm. | threejs.org |
Magnum | C++ | ✓ 1 | Advanced | magnum.graphics |
Babylon.js | JavaScript | ✓ | ? | babylonjs.com |
- 1
- For WebXR Device API support please contact us.
A-Frame
One of our favorites, since it makes setting up a scene very easy. Only little javascript is required, most of the game is defined in HTML.
Supports WebXR.
Website: aframe.io
PlayCanvas
A cloud-based engine with VR and AR support. Graphically very impressive and the visual editor makes it very easy to assemble assets.
Website: PlayCanvas
Wonderland Engine
An offline visual editor that exports an optimized binary format and WebAssembly runtime with a JavaScript API for full flexiblity. Currently in development and not available to the public.
Website: Wonderland Engine
Unity
The Unity 3D engine is very popular and supports WebVR thanks to Mozilla’s unity-webvr-export plugin. There are tons of learning resources.
As this engine is not optimized for the web, you will end up with pretty large game sizes, which causes longer download times.
Website: unity3d.com
three.js
A framework that wraps WebGL and is super flexible, but a little lower level than frameworks like A-Frame (which is based on three.js).
They have quite a few WebVR examples.
Website: threejs.org
Magnum
A framework for C++ that supports cross compilation to WebAssembly via Emscripten. Very low level but can yield higher performance and smaller game-sizes if done correctly. It is fully documented and well tested, making it highly reliable.
Check out their WebVR example.
Website: magnum.graphics
babylon.js
A full engine written specifically for the web. Learn how to set up WebXR here.
Disclaimer: We have no own experience with babylon.js yet!
Website: babylonjs.com
Optimization
VR browser games need to target a wide range of devices: desktop, standalone VR headeset and smartphones. It is essential to optimize properly for the lowest performing devices you plan to support.
A-Frame Best Practices
If you are working with A-Frame, check out A-Frame’s optimization guide
gltf-pipeline
Improve and compress glTF scenes.
Website: GitHub repository
More optimization stages for this tool can be found in the gltf-pipeline-stages GitHub repository.