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.
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.
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!
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.
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.
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.
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.
The following table shows a list of frameworks and engines:
- For WebXR Device API support please contact us.
A cloud-based engine with VR and AR support. Graphically very impressive and the visual editor makes it very easy to assemble assets.
Website: Wonderland Engine
As this engine is not optimized for the web, you will end up with pretty large game sizes, which causes longer download times.
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.
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.
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!
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.
If you are working with A-Frame, check out A-Frame’s optimization guide
Improve and compress glTF scenes.
Website: GitHub repository
More optimization stages for this tool can be found in the gltf-pipeline-stages GitHub repository.