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:

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
BabylonJS Logo
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
A-Frame
Three.js

Three.js is a popular 3D library for creating immersive experiences. Learn more about three.js and explore examples.
Three.js
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.
WebGL

See Also

Next steps--Tutorials