Jump to content

WebXR: Difference between revisions

← Older editNewer edit →
VisualWikitext
No edit summary
Tag: Reverted
Undo revision 35285 by Xinreality (talk)
Tag: Undo
Line 1: Line 1:
{{Platform Infobox
{{Platform Infobox
|image= [[File:WebXR_logo.svg|250px]]
|image=
|Type=[[Virtual Reality]] and [[Augmented Reality]]
|Type=Virtual Reality and Augmented Reality
|Subtype=Web API
|Subtype=Web API
|Creator=[[Immersive Web Working Group]] and [[Immersive Web Community Group]]
|Creator=[[Immersive Web Working Group]] and [[Immersive Web Community Group]]
Line 7: Line 7:
|Manufacturer=N/A
|Manufacturer=N/A
|Operating System=Cross-platform
|Operating System=Cross-platform
|Browser=[[Google Chrome]] 79+, [[Microsoft Edge]] 79+, [[Firefox]], [[Opera]] 66+, [[Samsung Internet]] 12+, [[Meta Quest Browser]], [[Safari]] (visionOS)
|Browser=[[Google Chrome]] 79+, [[Microsoft Edge]] 79+, [[Firefox]], [[Opera]] 66+, [[Samsung Internet]] 12+, [[Oculus Browser]], [[Safari]] (visionOS)
|Devices=[[VR headsets]], [[AR headsets]], [[AR-enabled smartphones]]
|Devices=[[VR headsets]], [[AR headsets]], [[AR-enabled smartphones]]
|Accessories=[[Motion controllers]], [[Gamepads]], [[Hand tracking devices]]
|Accessories=[[Motion controllers]], [[Gamepads]], [[Hand tracking devices]]
|Release Date=2018 (initial specification), Latest CR Draft April 17, 2025
|Release Date=2018 (initial specification)
|Price=Free Web Standard
|Price=Free Web Standard
|Website=https://immersiveweb.dev/
|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, all without requiring plugins or specialized applications.<ref name="w3c-webxr">World Wide Web Consortium. "WebXR Device API." W3C. https://www.w3.org/TR/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 displays, mobile AR devices, and desktop environments with appropriate peripherals.<ref name="w3c-webxr">World Wide Web Consortium. "WebXR Device API." W3C. https://www.w3.org/TR/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">Mozilla Developer Network. "WebXR Device API." MDN Web Docs. https://developer.mozilla.org/en-US/docs/Web/API/WebXR_Device_API</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">Mozilla Developer Network. "WebXR Device API." MDN Web Docs. https://developer.mozilla.org/en-US/docs/Web/API/WebXR_Device_API</ref>
Line 38: Line 38:


=== Recent Developments ===
=== Recent Developments ===
The WebXR standard continues to evolve, with key milestones including:
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"/>
* '''5 Feb 2019''' – First Public Working Draft published.<ref name="W3C-CR">World Wide Web Consortium. "WebXR Device API" Candidate Recommendation Draft history, 17 April 2025.</ref>
* '''31 Oct 2019''' – [[Google Chrome]] 79 Beta ships WebXR for VR by default.<ref name="Chrome79">Chromium Blog. "Chrome 79 Beta: Virtual Reality Comes to the Web," 31 Oct 2019.</ref>
* '''Mar 2020''' – Chrome 81 adds first stable AR session and [[WebXR Hit Test Module]].<ref name="Chrome81">Chromium Blog. "Chrome 81: Near Field Communications, Augmented Reality, and more," Feb 2020.</ref>
* '''31 Mar 2022''' – Candidate Recommendation snapshot; continuous CR drafts through 2025.<ref name="W3C-CR"/>
* '''Dec 2019 – 2024''' – Adoption in [[Meta Quest Browser]] 7.0, Chromium‑based [[Microsoft Edge]], and eventually [[Safari]] for visionOS.<ref name="QuestBrowser">Meta Quest. "Meta Quest Browser – Version history," 2024.</ref>


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.
 
== Purpose and Goals ==
 
The primary goal of WebXR is to enable developers to create and distribute compelling, comfortable, and safe immersive experiences directly via the web.<ref name="immersiveweb">Immersive Web. "Immersive Web Developer Home." https://immersiveweb.dev/</ref> Key advantages include:
 
* '''Accessibility:''' Users can access XR content through a URL click or QR code scan in their browser, removing the need to download and install separate applications from app stores. This significantly lowers the barrier to entry.
* '''Cross-Platform Compatibility:''' A single WebXR application can potentially run on a wide variety of hardware, including high-end VR headsets, AR glasses, smartphones, and even standard desktop browsers (for non-immersive "inline" viewing).
* '''Ease of Development:''' Leverages existing web technologies ([[HTML]], [[CSS]], [[JavaScript]], [[WebGL]]), making it accessible to millions of web developers.
* '''Instant Updates:''' Developers can update experiences seamlessly, just like updating any website, without requiring users to update installed apps.
* '''Integration with web ecosystem:''' Works with existing web technologies and services.
* '''Future-Proofing:''' Experiences built on the standard should continue to work on new hardware as it emerges, without needing major code rewrites.


== Technical Overview ==
== Technical Overview ==
Line 132: Line 116:


==== Extension Modules ====
==== Extension Modules ====
* **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 Hand Input Module** - Enables hand tracking functionality
* **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">World Wide Web Consortium. "WebXR Lighting Estimation API Level 1." W3C. https://www.w3.org/standards/history/webxr-lighting-estimation-1/</ref>
This modular approach allows the WebXR standard to evolve and expand while maintaining compatibility with existing implementations.
== Implementation and Support ==
=== Browser Support ===
WebXR is currently supported in several major browsers:
{| class="wikitable"
{| class="wikitable"
! Module !! Purpose !! Latest status
! Browser
! Version
! Notes
|-
| Google Chrome
| 79+
| Desktop and Android
|-
| Microsoft Edge
| 79+
| Based on Chromium
|-
|-
| WebXR Device API || Core sessions, rendering, input || Candidate Recommendation (17 Apr 2025)<ref name="W3C-CR"/>
| Firefox
|  
| Partial support
|-
|-
| WebXR AR Module || Adds augmented reality support through the "immersive-ar" session mode || Candidate Recommendation (25 Apr 2025)<ref name="w3c-ar-module"/>
| Opera
| 66+
| Desktop and mobile
|-
|-
| WebXR Gamepads Module || Provides interfaces for button, trigger, thumbstick, and touchpad input || Working Draft<ref name="webxr-gamepads"/>
| Samsung Internet
| 12+
| Mobile
|-
| Oculus Browser
|
| For Oculus devices
|-
| Safari
|  
| Supported in visionOS for Apple Vision Pro
|}
 
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">BrowserStack. "WebXR - Compatible Browsers & Implementation." https://www.browserstack.com/guide/webxr-and-compatible-browsers</ref>
 
=== Hardware Compatibility ===
 
WebXR is designed to work with a wide range of hardware:
 
==== VR Devices ====
* Tethered headsets (HTC Vive, Oculus Rift, etc.)
* Standalone headsets (Meta Quest, HTC Vive Focus, etc.)
* Mobile VR solutions (Google Cardboard, etc.)
 
==== AR Devices ====
* AR headsets (Microsoft HoloLens, Magic Leap, Apple Vision Pro)
* Mobile AR (ARCore on Android, ARKit on iOS)
* Video pass-through devices<ref name="immersiveweb">Immersive Web. "Immersive Web Developer Home." https://immersiveweb.dev/</ref>
 
=== Feature Detection and Fallbacks ===
 
For backwards compatibility and progressive enhancement, developers can use:
 
* Feature detection to check if WebXR is supported in the current browser
* The WebXR Polyfill that provides a fallback implementation for browsers without native support
* The WebXR API Emulator, a browser extension that simulates XR hardware for development and testing<ref name="mdn-startup">Mozilla Developer Network. "Starting up and shutting down a WebXR session." MDN Web Docs. https://developer.mozilla.org/en-US/docs/Web/API/WebXR_Device_API/Startup_and_shutdown</ref>
 
=== Security Requirements ===
 
Due to the sensitive nature of XR experiences, WebXR has specific security requirements:
 
* WebXR applications must be served over HTTPS or from localhost
* Permission is required from the user before accessing XR devices
* Additional user consent is required for features that access real-world information (like camera frames)<ref name="w3c-ar-module"/>
 
== Use Cases ==
 
=== Virtual Reality Applications ===
 
* **Gaming and Entertainment** - Immersive gaming experiences, virtual theaters, and interactive storytelling
* **Education and Training** - Virtual classrooms, simulation-based training, and interactive educational experiences
* **Virtual Tours** - Museum exhibits, property showcases, and travel destinations
* **Social VR** - Virtual meeting spaces, collaborative environments, and social platforms
* **Therapeutic Applications** - Exposure therapy, pain management, and rehabilitation<ref name="browserstack"/>
 
=== Augmented Reality Applications ===
 
* **E-Commerce** - Virtual product try-ons, furniture placement, and interactive catalogs
* **Industrial Applications** - Assembly instructions, maintenance guides, and remote assistance
* **Navigation** - Enhanced wayfinding, points of interest, and information overlays
* **Art and Culture** - Interactive exhibits, enhanced performances, and public installations
* **Education** - Interactive learning materials, visualizations, and simulations<ref name="google-webxr">Google Developers. "WebXR | ARCore." https://developers.google.com/ar/develop/webxr</ref>
 
=== Cross-Reality Experiences ===
 
WebXR's unified approach enables developers to create experiences that work across different reality modes:
 
* Applications that adapt between VR and AR depending on available hardware
* Collaborative experiences where some users are in VR and others in AR
* Progressive experiences that start in 2D and can transition to immersive modes<ref name="immersiveweb"/>
 
== Development Tools and Frameworks ==
 
=== Graphics Libraries ===
 
* **WebGL** - Low-level 3D graphics API that forms the foundation for WebXR rendering
* **Three.js** - Popular JavaScript 3D library with WebXR support
* **Babylon.js** - Comprehensive JavaScript framework for 3D experiences
 
=== WebXR-specific Frameworks ===
 
* **A-Frame** - Declarative framework for building VR experiences with HTML-like syntax
* **React XR** - React components for building WebXR applications
* **Wonderland Engine** - Engine optimized for WebXR performance
 
=== Development Tools ===
 
* **WebXR API Emulator** - Browser extension for testing without physical XR hardware
* **WebXR Polyfill** - JavaScript implementation for browsers without native support
* **Mozilla WebXR Viewer** - Experimental iOS app for testing WebXR content
* **WebXR Input Profiles** - Repository of controller models and binding information<ref name="mdn-fundamentals"/>
 
== Advantages and Limitations ==
 
=== Advantages ===
 
* **Cross-platform compatibility** - Works across different devices and operating systems
* **No installation required** - Experiences run directly in the browser
* **Discoverability** - Content can be linked and shared like any web page
* **Instant updates** - Changes deployed immediately without app store approval
* **Progressive enhancement** - Can adapt to available hardware capabilities
* **Integration with web ecosystem** - Works with existing web technologies and services<ref name="immersiveweb"/>
 
=== Limitations ===
 
* **Performance overhead** - Generally lower performance than native applications
* **Browser compatibility issues** - Inconsistent implementation across browsers
* **Hardware access restrictions** - Limited access to device capabilities compared to native apps
* **Battery consumption** - Can drain mobile device batteries quickly
* **Feature gaps** - Some advanced AR/VR features only available to native applications
 
== Comparison with Native XR Development ==
 
{| class="wikitable"
! Feature
! WebXR
! Native XR (OpenXR, ARCore, ARKit)
|-
|-
| WebXR Hand Input Module || Enables hand tracking functionality || Working Draft (5 Jun 2024)<ref name="HandInput">W3C. "WebXR Hand Input Module." Working Draft, 5 Jun 2024.</ref>
| Installation
| No installation required
| App installation necessary
|-
|-
| WebXR Layers API || Multi-layer composition for performance and UI || Working Draft (4 Apr 2025)<ref name="Layers">W3C. "WebXR Layers API Level 1" Working Draft, 4 Apr 2025.</ref>
| Performance
| Generally lower
| Higher performance
|-
|-
| WebXR Hit Test Module || Ray-casting for real-world surface detection (AR) || Working Draft (11 Jun 2024)<ref name="HitTest">W3C. "WebXR Hit Test Module Level 1" Working Draft, 11 Jun 2024.</ref>
| Access to hardware
| Limited by browser security
| Full hardware access
|-
|-
| WebXR Lighting Estimation Module || Allows AR applications to match virtual lighting with real-world conditions || Working Draft<ref name="w3c-lighting">World Wide Web Consortium. "WebXR Lighting Estimation API Level 1." W3C. https://www.w3.org/standards/history/webxr-lighting-estimation-1/</ref>
| Development complexity
| Lower barrier to entry
| Steeper learning curve
|-
|-
| WebXR Anchors Module || Creating anchors to attach virtual objects to specific points in the real world || Working Draft<ref name="Anchors">W3C. "WebXR Anchors Module." Working Draft, 2024.</ref>
| Distribution
| Web links
| App stores
|-
|-
| WebXR Depth Sensing Module || Accessing depth information about the real-world environment for occlusion and interaction || Working Draft<ref name="Depth">W3C. "WebXR Depth Sensing Module." Working Draft, 2024.</ref>
| Updates
| Instant deployment
| Requires app updates
|-
|-
| WebXR DOM Overlays Module || Displaying standard HTML content overlaid on the immersive view || Working Draft<ref name="DOM">W3C. "WebXR DOM Overlays Module." Working Draft, 2024.</ref>
| Cross-platform
| Works across devices
| Platform-specific development
|}
|}


This modular approach allows the WebXR standard to evolve and expand while maintaining compatibility with existing implementations.
While WebXR has similarities to native APIs like OpenXR, ARCore, and ARKit, it provides a more accessible cross-platform alternative with some performance and feature tradeoffs.<ref name="webxr-wiki"/>
 
== The Future of WebXR ==
 
=== Ongoing Development ===
 
The WebXR specification continues to evolve with several areas of active development:
 
* **Enhanced AR capabilities** - Improved real-world integration and occlusion
* **Hand tracking** - More advanced hand gesture recognition and interaction
* **Multi-user experiences** - Better support for shared virtual spaces
* **Performance optimization** - Reducing overhead for smoother experiences
* **Advanced rendering techniques** - Support for features like ray tracing
* **Haptic feedback** - More sophisticated tactile responses
* **Integration with other web APIs** - Working with geolocation, WebAudio, etc.
 
=== Adoption Trends ===
 
WebXR adoption is growing across multiple sectors:
 
* **E-commerce platforms** are integrating WebXR for product visualization
* **Educational institutions** are developing WebXR learning materials
* **Cultural organizations** are creating accessible virtual exhibits
* **Enterprise training** solutions are utilizing WebXR for cost-effective simulations
* **Social platforms** are exploring WebXR for shared experiences
 
=== Challenges ===
 
Despite its progress, WebXR faces several challenges:
 
* **Fragmented mobile support** - Particularly on iOS devices
* **Hardware limitations** - Especially for mobile AR applications
* **Performance expectations** - Compared to native applications
* **Development complexity** - For sophisticated experiences
* **User awareness** - Many users are unfamiliar with web-based XR
 
== Conclusion ==


== How it Works ==
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.


The WebXR Device API acts as a bridge between the web browser and the XR hardware.<ref name="mdn-fundamentals"/> A typical WebXR application follows these steps:
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.


1. **Device Detection:** The application uses `navigator.xr.isSessionSupported()` to check if the desired mode (e.g., `immersive-vr`, `immersive-ar`, `inline`) is supported by the available hardware.
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.
2. **Session Request:** If supported, the application requests an `XRSession` using `navigator.xr.requestSession()`, specifying required or optional features. This often requires user permission, especially for immersive modes that access sensors and cameras.
3. **Reference Spaces:** Once a session starts, the application defines Reference Spaces to establish coordinate systems for tracking.
4. **Render Loop:** The application uses `session.requestAnimationFrame()` to create a render loop. In each frame callback, it receives an `XRFrame` object containing the current time and an `XRViewerPose`.
5. **Pose and Views:** The `XRViewerPose` provides the position and orientation of the viewer (headset) and contains multiple `XRView` objects (usually one per eye in VR). Each `XRView` has projection and view matrices needed to render the scene correctly from that eye's perspective.
6. **Rendering:** The application uses [[WebGL]] (often via a library) to draw the 3D scene for each `XRView` into an `XRWebGLLayer` associated with the session.
7. **Input Handling:** The API provides information about connected input devices (`XRInputSource`) like controllers, including their pose and button/trigger states.
8. **AR Compositing:** In AR mode, the browser/runtime typically handles compositing the WebGL-rendered content with the live camera feed; the web application usually doesn't get direct access to the camera image for privacy reasons.


A basic VR setup might look like this:
== References ==
```javascript
<references>
if ('xr' in navigator) {
<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>
  navigator.xr.requestSession('immersive-vr').then(session => {
<ref name="mdn-webxr">Mozilla Developer Network. (2025, April 4). WebXR Device API. MDN Web Docs. Retrieved May 6, 2025, from https://developer.mozilla.org/en-US/docs/Web/API/WebXR_Device_API</ref>
    // Set up WebGL and rendering loop
<ref name="webxr-wiki">Wikipedia. (2025, April). WebXR. Retrieved May 6, 2025, from https://en.wikipedia.org/wiki/WebXR</ref>
    // ...
<ref name="webxr-explained">Immersive Web Working Group. (n.d.). WebXR Device API Explained. Retrieved May 6, 2025, from https://immersive-web.github.io/webxr/explainer.html</ref>
  });
<ref name="webxr-duhoc">DuHoc. (2024, February 27). Webxr: History, Design, Support. Retrieved May 6, 2025, from https://www.duhoctrungquoc.vn/wiki/en/WebXR</ref>
}
<ref name="w3c-ar-module">World Wide Web Consortium. (n.d.). WebXR Augmented Reality Module - Level 1. W3C. Retrieved May 6, 2025, from https://www.w3.org/TR/webxr-ar-module-1/</ref>
<ref name="mdn-fundamentals">Mozilla Developer Network. (2023, February 19). Fundamentals of WebXR. MDN Web Docs. Retrieved May 6, 2025, from https://developer.mozilla.org/en-US/docs/Web/API/WebXR_Device_API/Fundamentals</ref>
<ref name="webxr-gamepads">Immersive Web Working Group. (n.d.). WebXR Gamepads Module - Level 1. Retrieved May 6, 2025, from https://immersive-web.github.io/webxr-gamepads-module/</ref>
<ref name="w3c-lighting">World Wide Web Consortium. (n.d.). WebXR Lighting Estimation API Level 1. W3C. Retrieved May 6, 2025, from https://www.w3.org/standards/history/webxr-lighting-estimation-1/</ref>
<ref name="browserstack">BrowserStack. (2024, December 3). WebXR - Compatible Browsers & Implementation. Retrieved May 6, 2025, from https://www.browserstack.com/guide/webxr-and-compatible-browsers</ref>
<ref name="immersiveweb">Immersive Web. (n.d.). Immersive Web Developer Home. Retrieved May 6, 2025, from https://immersiveweb.dev/</ref>
<ref name="mdn-startup">Mozilla Developer Network. (n.d.). Starting up and shutting down a WebXR session. MDN Web Docs. Retrieved May 6, 2025, from https://developer.mozilla.org/en-US/docs/Web/API/WebXR_Device_API/Startup_and_shutdown</ref>
<ref name="google-webxr">Google Developers. (2024, December 18). WebXR | ARCore. Retrieved May 6, 2025, from https://developers.google.com/ar/develop/webxr</ref>
</references>
Retrieved from "https://vrarwiki.com/wiki/WebXR"