Learn WebXR Development
Get started with VR browser game 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. But don’t worry, 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 is available in the latest versions of Chrome, Edge, Opera and Oculus Browser. This API also allows using AR, while the previous only provided VR.
Because VR in the browser is still experimental, not all browsers support it yet. We recommend using Google Chrome with Oculus Rift or on mobile, Metachromium for SteamVR and Oculus Browser or Firefox Reality for Oculus Quest (1&2) and Oculus GO.
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 react renderer for threejs. Build your scene declaratively with re-usable, self-contained components that react to state, are readily interactive and can tap into React’s ecosystem. Supports WebXR via react-xr.
A rendering engine written specifically for the web. Learn how to set up WebXR here.
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 WebXR example.
A cloud-based development platform for creating WebXR applications. There is a lot of emphasis on simplicity, so that even non-developers can create 3D content.
Disclaimer: We have no own experience with MetaVRse yet!
A cloud-based engine with VR and AR support. Graphically very impressive and the visual editor makes it very easy to assemble assets.
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 many WebXR examples.
As this engine is not optimized for the web, you will end up with pretty large game sizes, which causes longer download times.
Website: Wonderland Engine
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.
In case you do not want to worry about manually optimizing your app/game yourself, Wonderland Engine implements various web specific optimizations that allow you to focus on your project instead of performance.