WebXR — Virtual and Augmented Reality for the Web
The concepts of virtual reality (VR) and augmented reality (AR) aren't new, but the technology is more accessible than ever. We can also use a JavaScript API to make use of it in web applications. This article introduces WebXR from the perspective of its use in games.
Note: You may see references to the non-standard WebVR API. WebVR was never ratified as a standard, was implemented and enabled by default in very few browsers, and supported only a few devices. The WebVR API is replaced by the WebXR Device API.
VR devices
With the popularity of existing VR headsets such as Meta Quest, Valve Index, and PlayStation VR, the future looks bright — we already have sufficient technology to create meaningful VR gaming experiences.
Development of WebVR
The WebVR spec is being replaced by the WebXR Device API. WebVR may still be available in some browsers while WebXR is finalized. For more info, see the WebVR.info website.
The WebXR API
The core of any WebXR experience is built on top of two foundational concepts:
- The application must receive real-time data about your headset's position and your controllers' positions in three-dimensional space
- The application must render a real-time, stereoscopic view to the headset's display(s) according to that positional data
The WebXR API is the central API for capturing information about XR devices connected to a computer. The API can capture headset and controller position, orientation, velocity, acceleration, and other information that you can use in your games.
There are other APIs useful for creating games such as the Gamepad API for non-XR controller inputs and the Device Orientation API for handling display orientation.
Using the WebXR API
The best place to start with the WebXR API is with our Fundamentals of WebXR guide. After that, see Starting up and shutting down a WebXR session.
Tools and techniques
A-Frame is a web framework that offers simple building blocks for WebXR, so you can rapidly build and experiment with VR websites and games. You can read MDN's Building up a basic demo with A-Frame tutorial for more details.
Separately, Three.js is one of the most popular 3D engines for the web, and it can be used for WebXR games. Check out Three.js' How to create VR content documentation to help you make WebXR games with Three.js.
Immersion takes priority over gameplay and graphics - you must feel part of the experience. It's not easy to achieve, but it doesn't require realistic images. On the contrary, even basic shapes soaring past at high frame rates can be thrilling if the experience is immersive. Remember: experimenting is key - feel free to go with what works well for your project.
The future of WebXR
Consumer devices are available on the market, and we have JavaScript APIs to support them on the web. As hardware becomes more affordable and the ecosystem matures, developers can focus on building experiences through good UX and UI. It's the perfect time to dive in and experiment with WebXR.