WebXR: Difference between revisions - VR & AR Wiki - Virtual Reality & Augmented Reality Wiki

Line 14:

|Website=https://www.w3.org/TR/webxr/

}}

'''WebXR Device API''' (commonly known as '''WebXR''') is a [[Web API]] developed by the [[World Wide Web Consortium]] (W3C) that provides interfaces for accessing [[virtual reality]] (VR) and [[augmented reality]] (AR) devices on the web. WebXR enables developers to create immersive experiences that work across a wide range of hardware platforms, including head-mounted ~~displays~~, mobile AR devices, and desktop environments with appropriate peripherals.<ref name="w3c-webxr"></ref>

'''WebXR Device API''' (commonly known as '''WebXR''') is a [[Web API]] developed by the [[World Wide Web Consortium]] (W3C) that provides interfaces for accessing [[virtual reality]] (VR) and [[augmented reality]] (AR) devices on the web. WebXR enables developers to create immersive experiences that work across a wide range of [[hardware]] [[platforms]], including [[head-mounted display]]s, [[mobile AR devices]], and [[desktop environments]] with appropriate [[peripherals]].<ref name="w3c-webxr"></ref>

The API allows web applications to detect compatible VR/AR devices, query their capabilities, render 3D scenes to the devices at the appropriate frame rate, and respond to input from associated controllers. WebXR represents an evolution from the earlier [[WebVR API]], expanding the scope to include augmented reality and other immersive technologies under the "XR" (Extended Reality) umbrella.<ref name="mdn-webxr"></ref>

The API allows web applications to detect compatible [[VR/AR devices]], query their capabilities, render 3D scenes to the devices at the appropriate [[frame rate]], and respond to [[input]] from associated controllers. WebXR represents an evolution from the earlier [[WebVR API]], expanding the scope to include augmented reality and other immersive technologies under the "[[XR]]" (Extended Reality) umbrella.<ref name="mdn-webxr"></ref>

== History ==

==History==

===WebVR: The Predecessor===

=== WebVR: The Predecessor ===

The development of WebXR began with its predecessor, [[WebVR]]. The WebVR API was first conceived in spring 2014 by Vladimir Vukićević from Mozilla. Key contributors to the early API included Brandon Jones from Google, Boris Smus, and other members of the Mozilla team.<ref name="webxr-wiki"></ref>

The development of WebXR began with its predecessor, WebVR. The WebVR API was first conceived in spring 2014 by Vladimir Vukićević from Mozilla. Key contributors to the early API included Brandon Jones from Google, Boris Smus, and other members of the Mozilla team.<ref name="webxr-wiki"></ref>

On March 1, 2016, the Mozilla VR team and the Google Chrome team announced the WebVR 1.0 release. This early version of the API was implemented in Firefox and Chromium-based browsers, providing basic virtual reality functionality to web applications.

=== Transition to WebXR ===

===Transition to WebXR===

As the technology evolved, developers recognized the need for a more scalable and ergonomic API that would break backward compatibility with WebVR. Initially referred to as "WebVR 2.0," the new API was officially renamed WebXR to acknowledge its expanded scope that would include both VR and AR content.<ref name="webxr-explained"></ref>

Line 31:

Line 30:

* Experience gained from the WebVR implementation

* A more mature landscape of immersive computing devices

* The emergence of both mobile and headset AR technologies

* The emergence of both mobile and [[headset]] [[AR Glasses|AR technologies]]

* Multiple mature native APIs to draw inspiration from

On September 24, 2018, the Immersive Web Working Group became official, formalizing the development process for WebXR standards.<ref name="webxr-duhoc"></ref> WebXR was designed to completely replace WebVR, with all browsers that initially shipped WebVR committing to adopt WebXR once the API design was finalized.

=== Recent Developments ===

===Recent Developments===

The WebXR standard continues to evolve, with the latest WebXR Device API Working Draft published in February 2022. The editors of the specification currently come from major technology companies including Google and Meta, with additional input from Mozilla, Microsoft, Samsung Electronics, Apple, as well as various startups and invited experts.<ref name="webxr-wiki"/>

The WebXR standard continues to evolve, with the latest WebXR Device API Working Draft published in February 2022. The editors of the specification currently come from major technology companies including [[Google]] and [[Meta]], with additional input from [[Mozilla]], [[Microsoft]], [[Samsung]] Electronics, [[Apple]], as well as various startups and invited experts.<ref name="webxr-wiki"/>

Notable updates to the specification have included enhanced AR capabilities, improved performance, and broader device support. The ongoing efforts focus on standardizing and advancing the WebXR API, providing developers with the necessary tools and resources to create immersive web experiences.

== Technical Overview ==

==Technical Overview==

===Core Concepts===

=== Core Concepts ===

====XR Session Modes====

==== XR Session Modes ====

WebXR supports different modes of operation:

* '''inline''' - Renders XR content within an HTML element on a web page

* '''immersive-vr''' - Provides an exclusive, fully immersive VR experience

* '''immersive-vr''' - Provides an exclusive, fully [[immersive VR]] experience

* '''immersive-ar''' - Blends virtual content with the real world environment<ref name="w3c-ar-module"></ref>

==== Reference Spaces ====

====Reference Spaces====

WebXR uses reference spaces to define coordinate systems:

* '''viewer''' - Coordinates relative to the user's head/device

Line 59:

Line 56:

* '''unbounded''' - A space for world-scale AR experiences<ref name="w3c-webxr"/>

==== Rendering Process ====

====Rendering Process====

At its most basic level, WebXR rendering works by:

1. Computing the perspective for each eye's viewpoint

#Computing the perspective for each eye's viewpoint

2. Rendering the scene from each eye's position

#Rendering the scene from each eye's position

3. Delivering the combined framebuffer to the XR device for display

#Delivering the combined framebuffer to the XR device for display

The API handles the complex timing and scheduling required for comfortable XR experiences, but does not directly manage 3D assets or perform rendering—that responsibility falls to WebGL or other graphics libraries.<ref name="mdn-fundamentals"></ref>

==== Input Handling ====

====Input Handling====

WebXR supports various input mechanisms:

* Motion controllers (through the WebXR Gamepads Module)

Line 74:

Line 71:

* Session-specific events (select, squeeze, etc.)<ref name="webxr-gamepads"></ref>

=== API Architecture ===

===API Architecture===

The WebXR Device API is organized into several key interfaces:

Line 82:

Line 78:

! Description

|-

| XRSystem

| [[XRSystem]]

| Main entry point for the WebXR API, accessed via `navigator.xr`

|-

| XRSession

| [[XRSession]]

| Represents an active XR session, managing the presentation loop

|-

| XRFrame

| [[XRFrame]]

| Provides information about a single frame to be rendered

|-

| XRView

| [[XRView]]

| Represents a single view to be rendered (typically one per eye)

|-

| XRViewport

| [[XRViewport]]

| Defines the rectangular area of the output canvas

|-

| XRReferenceSpace

| [[XRReferenceSpace]]

| Defines spatial relationship to the user's environment

|-

| XRPose

| [[XRPose]]

| Contains position and orientation information

|-

| XRInputSource

| [[XRInputSource]]

| Represents input devices like controllers or hands

|}

=== Modular Structure ===

===Modular Structure ===

The WebXR specification is designed to be modular, with the core WebXR Device API providing fundamental functionality and additional modules extending its capabilities:

==== Core Module ====

====Core Module====

* **WebXR Device API** - Provides basic session management, device detection, and rendering capabilities<ref name="w3c-webxr"/>

* '''[[WebXR Device API]]''' - Provides basic session management, device detection, and rendering capabilities<ref name="w3c-webxr"/>

==== Extension Modules ====

====Extension Modules====

* **WebXR AR Module** - Adds augmented reality support through the "immersive-ar" session mode<ref name="w3c-ar-module"/>

* '''WebXR AR Module''' - Adds augmented reality support through the "immersive-ar" session mode<ref name="w3c-ar-module"/>

* **WebXR Gamepads Module** - Provides interfaces for button, trigger, thumbstick, and touchpad input<ref name="webxr-gamepads"/>

* '''WebXR Gamepads Module''' - Provides interfaces for button, trigger, thumbstick, and touchpad input<ref name="webxr-gamepads"/>

* **WebXR Hand Input Module** - Enables hand tracking functionality

* '''WebXR Hand Input Module''' - Enables hand tracking functionality

* **WebXR Layers Module** - Supports rendering to multiple composited layers

* '''WebXR Layers Module''' - Supports rendering to multiple composited layers

* **WebXR Lighting Estimation Module** - Allows AR applications to match virtual lighting with real-world conditions<ref name="w3c-lighting"></ref>

* '''WebXR Lighting Estimation Module''' - Allows AR applications to match virtual lighting with real-world conditions<ref name="w3c-lighting"></ref>

This modular approach allows the WebXR standard to evolve and expand while maintaining compatibility with existing implementations.

== Implementation and Support ==

==Implementation and Support==

===Browser Support===

=== Browser Support ===

WebXR is currently supported in several major browsers:

Line 134:

Line 127:

! Notes

|-

| Google Chrome

| [[Google Chrome]]

| 79+

| Desktop and Android

|-

| Microsoft Edge

| [[Microsoft Edge]]

| 79+

| Based on Chromium

|-

| Firefox

| [[Firefox]]

|

| Partial support

|-

| Opera

| [[Opera]]

| 66+

| Desktop and mobile

|-

| Samsung Internet

| [[Samsung Internet]]

| 12+

| Mobile

|-

| Oculus Browser

| [[Oculus Browser]]

|

| For Oculus devices

|-

| Safari

| [[Safari]]

|

| Supported in visionOS for Apple Vision Pro

Line 165:

Line 158:

Safari on iOS has historically not supported WebXR, though the API is available in Safari for visionOS on the Apple Vision Pro mixed reality headset.<ref name="browserstack"></ref>

=== Hardware Compatibility ===

===Hardware Compatibility===

WebXR is designed to work with a wide range of hardware:

==== VR Devices ====

====VR Devices====

* Tethered headsets (HTC Vive, Oculus Rift, etc.)

*[[Tethered headsets]] ([[HTC Vive]], [[Oculus Rift]], etc.)

* Standalone headsets (Meta Quest, HTC Vive Focus, etc.)

*[[Standalone headsets]] ([[Meta Quest]], [[HTC Vive Focus]], etc.)

* Mobile VR solutions (Google Cardboard, etc.)

*[[Mobile VR]] solutions ([[Google Cardboard]], etc.)

==== AR Devices ====

====AR Devices====

* AR headsets (Microsoft HoloLens, Magic Leap, Apple Vision Pro)

*[[AR headsets]] ([[Microsoft HoloLens]], [[Magic Leap]], [[Apple Vision Pro]])

* Mobile AR (ARCore on Android, ARKit on iOS)

*[[Mobile AR]] ([[ARCore]] on [[Android]], [[ARKit]] on [[iOS]])

* Video ~~pass-through~~ devices<ref name="immersiveweb"></ref>

*Video [[passthrough]] devices<ref name="immersiveweb"></ref>

~~=== Feature Detection and Fallbacks ===~~

===Feature Detection and Fallbacks===

For backwards compatibility and progressive enhancement, developers can use:

Line 187:

Line 179:

* The WebXR API Emulator, a browser extension that simulates XR hardware for development and testing<ref name="mdn-startup"></ref>

=== Security Requirements ===

===Security Requirements===

Due to the sensitive nature of XR experiences, WebXR has specific security requirements:

Line 195:

Line 186:

* Additional user consent is required for features that access real-world information (like camera frames)<ref name="w3c-ar-module"/>

== Use Cases ==

==Use Cases==

=== Virtual Reality Applications ===

Line 323:

Line 313:

* **Social platforms** are exploring WebXR for shared experiences

=== Challenges ===

===Challenges===

Despite its progress, WebXR faces several challenges:

* **Fragmented mobile support** - Particularly on iOS devices

*'''Fragmented mobile support''' - Particularly on iOS devices

* **Hardware limitations** - Especially for mobile AR applications

*'''Hardware limitations''' - Especially for mobile AR applications

* **Performance expectations** - Compared to native applications

*'''Performance expectations''' - Compared to native applications

* **Development complexity** - For sophisticated experiences

*'''Development complexity''' - For sophisticated experiences

* **User awareness** - Many users are unfamiliar with web-based XR

*'''User awareness''' - Many users are unfamiliar with web-based XR

~~== Conclusion ==~~

WebXR represents a significant advancement in making immersive technologies accessible through the web. By providing a standardized API for both virtual and augmented reality experiences, it enables developers to create cross-platform XR content that runs directly in web browsers without requiring specialized applications.

While it faces challenges in terms of performance and feature parity compared to native applications, WebXR's advantages in terms of accessibility, discoverability, and integration with the broader web ecosystem make it an increasingly important technology for the future of immersive computing.

As hardware capabilities continue to improve and browser support expands, WebXR is positioned to play a central role in democratizing access to virtual and augmented reality experiences, making them as ubiquitous and accessible as websites are today.

== References ==

==References==

<ref name="w3c-webxr">World Wide Web Consortium. (2022). WebXR Device API. W3C. Retrieved May 6, 2025, from https://www.w3.org/TR/webxr/</ref>