mixed-reality
WebXR development with JavaScript
JavaScript is one of the most popular programming languages in the world! It’s simple, lightweight, and widely used on the Web. Leverage the power of your JavaScript and Web skills to create more engaging Mixed Reality experiences.
Mixed Reality applications on the web
Mixed Reality features are available on the Web through WebXR. You can see virtual reality (VR) and augmented reality (AR) content in a compatible WebXR-enabled browser without installing any additional software or plugins. You can use that same browser with a physical device like the HoloLens 2.
The WebXR Device API is for accessing virtual reality (VR) and augmented reality (AR) devices, including sensors and head-mounted displays, on the Web. The WebXR Device API is available on Microsoft Edge and Chrome version 79, and later versions support WebXR as a default. You can check the latest browser support status for WebXR at caniuse.com.
[!NOTE] WebVR is deprecated and is not available in current browsers, so it should not be used for any new development. You’ll need to migrate any existing WebVR implementations forward to WebXR.
| WebXR feature | Availability |
|---|---|
| WebXR Device API (w3.org) | Edge 81 on Windows Desktop Edge 91 on Hololens 2 |
| WebXR Augmented Reality Module - Level 1 (w3.org) | Edge 91. Hololens 2 only |
| WebXR Hand Input Module - Level 1 (w3.org) | Edge 93. Hololens 2 only |
| WebXR Anchors Module (immersive-web.github.io) | Edge 93. Hololens 2 only |
| WebXR Hit Test Module (immersive-web.github.io) | Edge 93. Hololens 2 only |
Viewing WebXR
You can view WebXR experiences in Windows Mixed Reality with the new Microsoft Edge and Firefox Reality browsers. To test if your browser supports WebXR, you can navigate to WebXR Samples in your browser.
What can I use to develop immersive Web experiences?
The following list shows the JavaScript frameworks and APIs for building immersive experiences that currently dominate the market and are widely accepted and adopted by mixed reality JavaScript developers:
| Framework | Example |
|---|---|
| Babylon.js Babylon is a JavaScript 3D engine that makes developing 3D content and immersive applications easy. Before getting started with immersive applications, we recommend that you learn the basics of Babylon.js development. - Learn how to build 3D applications with Babylon.js: Getting started - Play with 3D examples and their source code using Babylon.js: Playground - Dive deeper into WebXR - Learn how to get started with our tutorials: Create your first “Hello World!” app |
 |
| A-Frame A-frame is a declarative JavaScript framework that you can use to get started with Virtual Reality on the Web. To learn more, check out the A-Frame documentation |
 |
| Three.js Three.js is a popular 3D library for creating immersive experiences. Learn more about three.js and explore examples. |
 |
| WebGL You can access the WebXR Device APIs directly by using WebGL APIs. WebGL (Web Graphics Library) is a JavaScript API for rendering high-performance interactive 3D and 2D graphics within any compatible Web browser without the use of plug-ins. |
 |
See Also
- WebXR Device API specification
- WebXR Device API documentation
- WebXR Samples
- Immersiveweb.dev
- Using Babylon.js to create WebXR experiences
- WebGL API
- Gamepad API and Gamepad Extensions
- Windows Mixed Reality and the new Microsoft Edge
- Handling Lost Context in WebGL
- Pointerlock
- glTF
- Immersive web community group
- Immersive Web W3C Github
Next steps–Tutorials
[!div class=”nextstepaction”] Create your first WebXR application using Babylon.js
[!div class=”nextstepaction”] Build a piano in WebXR using Babylon.js