[ WEBXR · VR · AR ]

The birth of WebXR: VR and AR in the browser

WebXR is the browser API for building virtual and augmented reality that runs from a URL — no app store, no install. Here is where it came from and how it works.

Watch the lecture, then read Max's deep-dive below.

▸ In this video you'll see

How WebVR began at Mozilla and grew into the WebXR standard
The jump from VR-only to mixed reality (AR + VR) on the open web
What the WebXR Device API gives you — sessions, reference spaces, input
Why the browser is a natural home for immersive experiences
Live demos of immersive content running right inside a web page

WebXR is the standard that lets a website enter virtual or augmented reality. Put on a headset, open a URL, and you are inside the experience — the same way you would open any web page. The "XR" is an umbrella: VR (fully immersive), AR (digital content overlaid on the real world), and everything between.

From WebVR to WebXR

The story starts around 2016 with WebVR, an experimental browser API for pushing frames to early headsets like the Oculus DK2. WebVR proved the idea but was VR-only and hard to evolve. The W3C Immersive Web Working Group replaced it with the WebXR Device API, which shipped in browsers around 2019–2020. WebXR generalized the design to cover AR as well, cleaned up the input model, and became the standard we build on today.

The core concepts

Session — you request an immersive-vr or immersive-ar session with navigator.xr.requestSession(). This must be triggered by a user gesture, and it is what takes over the display.
Reference space — the coordinate system your content lives in. local-floor puts the origin on the ground so a 1.7 m avatar stands correctly; bounded-floor adds room-scale guardian bounds.
Frame loop — instead of requestAnimationFrame, you use session.requestAnimationFrame, which hands you an XRFrame each tick with the current head pose for each eye.
Input sources — controllers and hands arrive as XRInputSource objects with their own poses and button/axis state.

You rarely call these APIs by hand. Three.js has first-class WebXR support (renderer.xr.enabled = true plus a VRButton), and A-Frame lets you author scenes in HTML. WebXR is the engine; these are the steering wheels.

Why "from a URL" is the whole point

Native VR apps mean an app store, a review process, downloads, and updates. WebXR collapses all of that into a link you can text to a friend. It is instant, cross-platform (standalone headsets, mobile AR, desktop with a headset), and updatable the moment you deploy. The trade-off is a performance ceiling below hand-tuned native engines — but for the vast space of viewers, configurators, training, and social experiences, "click a link and you are there" wins.

A minimal AR example

Augmented reality on a supported phone or headset is a few lines away:

const session = await navigator.xr.requestSession('immersive-ar', {
  requiredFeatures: ['hit-test']   // let content stick to real surfaces
});

With a hit-test source you can place a virtual object on a real table, and WebXR keeps it anchored as the user moves. That single capability — digital things that respect physical space, delivered over the open web — is why WebXR matters.

Keep going

immersiveweb.dev — the Immersive Web community hub and samples
MDN: WebXR Device API — the definitive reference for every interface

WebXR VR AR Immersive Web