Learn VR Browser Game Development
You want to know how to start with WebVR/WebXR Device API development?
Building VR browser games is not hard, but very rewarding. Especially (but not only) if you already know a programming language. Follow this guide to get an idea of where to find resources and avoid the most common pitfalls.
This page is meant to give you a head start in understanding how to build your own VR browser games. As we don’t know your level of experience, feel free to skip chapters which are already clear to you. Let’s start off with the very basics.
Building a VR game for the browser is very similar to building any 3D game for the browser. With the right tools, it can be like building a website, though!
Efficiently displaying 3D graphics in a browser is done via WebGL (“Web Graphics Library”). It does that by allowing the use of the GPU from within the browser. You probably do not have to worry about it or how to use it, though. Instead you will likely use a framework which will use WebGL without you having to.
When chosing how to make your VR browser game, look out for WebXR support rather than WebVR support, as your game may not be playable in the near future, 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 and Oculus GO.
Engines on top of that offer toolsets that may not even require you to write a single line of code, but are a little less flexible and less tailored to your specific game. That can make the resulting game bigger (because it contains unnecessary stuff), which means your game will take longer to load.
It is possible to build your game in an engine without using web technologies and finally export them to the web. Underneath, these engines often utilize compilation to WebAssembly via Emscripten for example, which—if you’re super hard-core and know C or C++—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.
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.
There are a couple of tools that will help you do so:
Improve and compress glTF scenes.
Website: GitHub repository
More optimization stages for this tool can be found in the gltf-pipeline-stages GitHub repository.