Jump to content

WebXR: Difference between revisions

No edit summary
 
(11 intermediate revisions by the same user not shown)
Line 1: Line 1:
{{Platform Infobox
{{Platform Infobox
|image=
|image=[[File:webxr logo1.png|350px]]
|Type=Virtual Reality and Augmented Reality
|Type=[[Virtual Reality]], [[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]]
|Developer=[[W3C]]
|Developer=[[W3C]]
|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+, [[Oculus Browser]], [[Safari]] (visionOS)
|Browser=[[Google Chrome]] 79+, [[Microsoft Edge]] 79+, [[Firefox]] (partial support), [[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)
|Release Date=5 February 2019 (First Public Working Draft)
|Price=Free Web Standard
|Price=Free Web Standard
|Website=https://www.w3.org/TR/webxr/
|Website=https://www.w3.org/TR/webxr/, https://immersiveweb.dev/, https://github.com/immersive-web/webxr/blob/master/explainer.md, https://developer.mozilla.org/en-US/docs/Web/API/WebXR_Device_API
}}
}}
'''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>
'''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>
Line 33: Line 33:
* Multiple mature native APIs to draw inspiration from
* 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.
On September 24, 2018, the Immersive Web Working Group became official, formalizing the development process for WebXR standards.<ref name="immersiveweb-community"></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 WebXR Device API advancing through the W3C standardization process as a Candidate Recommendation. The editors of the specification 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"></ref>


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.
In 2023, a significant milestone was reached when Apple announced WebXR support for its visionOS platform, which powers the Apple Vision Pro mixed reality headset. Initially, WebXR support in Safari for visionOS was available behind a feature flag while Apple collaborated with the W3C Immersive Web Working Group.<ref name="apple-visionos-webxr"></ref>
 
By early 2024, Apple expanded WebXR capabilities by adding support for the headset's natural input methods. In March 2024, visionOS 1.1 introduced support for gaze-and-pinch interactions in WebXR experiences, with Apple contributing a new "transient-pointer" input mode to the WebXR standard to accommodate these interactions.<ref name="webkit-webxr-blog"></ref>
 
With the announcement of visionOS 2 in mid-2024, Apple further committed to WebXR by making it enabled by default in Safari, eliminating the need for users to enable experimental feature flags. However, as of May 2025, WebXR on visionOS still only supports the immersive-vr session type, with the immersive-ar mode still in development.<ref name="immersiveweb"></ref>
 
Ongoing efforts in the standard focus on improving performance, enhancing device compatibility, refining input methods, and expanding AR capabilities across platforms.


==Technical Overview==
==Technical Overview==
Line 54: Line 60:
* '''local-floor''' - Like local, but with Y=0 at floor level
* '''local-floor''' - Like local, but with Y=0 at floor level
* '''bounded-floor''' - A floor-relative space with defined boundaries
* '''bounded-floor''' - A floor-relative space with defined boundaries
* '''unbounded''' - A space for world-scale AR experiences<ref name="w3c-webxr"/>
* '''unbounded''' - A space for world-scale AR experiences<ref name="w3c-webxr"></ref>


====Rendering Process====
====Rendering Process====
Line 62: Line 68:
#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>
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====
Line 69: Line 75:
* Hand tracking
* Hand tracking
* Gaze-based input methods
* Gaze-based input methods
* Natural input interactions (such as gaze-and-pinch on Apple Vision Pro)
* Session-specific events (select, squeeze, etc.)<ref name="webxr-gamepads"></ref>
* Session-specific events (select, squeeze, etc.)<ref name="webxr-gamepads"></ref>


Line 107: Line 114:


====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


====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
* '''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
* '''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
* '''WebXR DOM Overlay Module''' - Enables overlaying HTML content in immersive AR sessions
* '''WebXR Anchors Module''' - Provides spatial anchoring capabilities for persistent AR experiences


This modular approach allows the WebXR standard to evolve and expand while maintaining compatibility with existing implementations.
This modular approach allows the WebXR standard to evolve and expand while maintaining compatibility with existing implementations.
Line 149: Line 158:
| [[Oculus Browser]]
| [[Oculus Browser]]
|  
|  
| For Oculus devices
| For Meta Quest devices
|-
|-
| [[Safari]]
| [[Safari]]
Line 156: Line 165:
|}
|}


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>
Firefox provides partial WebXR support with ongoing development to expand capabilities. Safari on iOS does not support WebXR, but Safari on visionOS for Apple Vision Pro does support WebXR, with full immersive-vr mode support in visionOS 2 (enabled by default) and experimental work on immersive-ar mode in development.<ref name="caniuse-webxr"></ref>


===Hardware Compatibility===
===Hardware Compatibility===
Line 164: Line 173:
====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]], [[Apple Vision Pro]], etc.)
*[[Mobile VR]] solutions ([[Google Cardboard]], etc.)
*[[Mobile VR]] solutions ([[Google Cardboard]], etc.)<ref name="immersiveweb"></ref>


====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 [[passthrough]] devices<ref name="immersiveweb"></ref>
*Video [[passthrough]] devices
 
===Input Mechanisms===
WebXR supports various input methods based on device capabilities:
 
* **Physical Controllers**: Traditional VR motion controllers with buttons, triggers, and thumbsticks
* **Hand Tracking**: Natural hand movements and gestures
* **Gaze-Based**: Targeting objects by looking at them
* **Platform-Specific**: Such as Apple Vision Pro's gaze-and-pinch interaction system
* **Hybrid Approaches**: Combinations of the above methods
 
The "transient-pointer" input mode, introduced in 2024, enables more natural and privacy-preserving interaction methods that don't rely on persistent controller data.


===Feature Detection and Fallbacks===
===Feature Detection and Fallbacks===
Line 184: Line 204:
* WebXR applications must be served over HTTPS or from localhost
* WebXR applications must be served over HTTPS or from localhost
* Permission is required from the user before accessing XR devices
* 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"/>
* Additional user consent is required for features that access real-world information (like camera frames)<ref name="w3c-ar-module"></ref>


==Use Cases==
==Use Cases==
Line 192: Line 212:
*'''Virtual Tours''' - Museum exhibits, property showcases, and travel destinations
*'''Virtual Tours''' - Museum exhibits, property showcases, and travel destinations
*'''[[Social VR]]''' - Virtual meeting spaces, collaborative environments, and social platforms
*'''[[Social VR]]''' - Virtual meeting spaces, collaborative environments, and social platforms
*'''[[Therapeutic Application]]''' - Exposure therapy, pain management, and rehabilitation<ref name="browserstack"/>
*'''[[Therapeutic Application]]''' - Exposure therapy, pain management, and rehabilitation<ref name="caniuse-webxr"></ref>


===Augmented Reality Applications===
===Augmented Reality Applications===
Line 206: Line 226:
* Applications that adapt between VR and AR depending on available hardware
* Applications that adapt between VR and AR depending on available hardware
* Collaborative experiences where some users are in VR and others in AR
* 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"/>
* Progressive experiences that start in 2D and can transition to immersive modes<ref name="immersiveweb"></ref>


==Development Tools and Frameworks==
==Development Tools and Frameworks==
Line 223: Line 243:
* '''[[WebXR Polyfill]]''' - JavaScript implementation for browsers without native support
* '''[[WebXR Polyfill]]''' - JavaScript implementation for browsers without native support
* '''[[Mozilla WebXR Viewer]]''' - Experimental iOS app for testing WebXR content
* '''[[Mozilla WebXR Viewer]]''' - Experimental iOS app for testing WebXR content
* '''[[WebXR Input Profiles]]''' - Repository of controller models and binding information<ref name="mdn-fundamentals"/>
* '''[[WebXR Input Profiles]]''' - Repository of controller models and binding information<ref name="mdn-fundamentals"></ref>


==Advantages and Limitations==
==Advantages and Limitations==
Line 232: Line 252:
*'''Instant updates''' - Changes deployed immediately without app store approval
*'''Instant updates''' - Changes deployed immediately without app store approval
*'''Progressive enhancement''' - Can adapt to available hardware capabilities
*'''Progressive enhancement''' - Can adapt to available hardware capabilities
*'''Integration with web ecosystem''' - Works with existing web technologies and services<ref name="immersiveweb"/>
*'''Integration with web ecosystem''' - Works with existing web technologies and services


===Limitations===
===Limitations===
Line 276: Line 296:
|}
|}


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"/>
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.


==The Future of WebXR==
==The Future of WebXR==
Line 289: Line 309:
*'''[[Haptic feedback]]''' - More sophisticated tactile responses
*'''[[Haptic feedback]]''' - More sophisticated tactile responses
*'''Integration with other web APIs''' - Working with geolocation, WebAudio, etc.
*'''Integration with other web APIs''' - Working with geolocation, WebAudio, etc.
*'''Platform-specific interactions''' - Standardizing support for diverse input methods
*'''Spatial computing features''' - Supporting advanced room-scale experiences


===Adoption Trends===
===Adoption Trends===
Line 297: Line 319:
*'''Enterprise training''' solutions are utilizing WebXR for cost-effective simulations
*'''Enterprise training''' solutions are utilizing WebXR for cost-effective simulations
*'''Social platforms''' are exploring WebXR for shared experiences
*'''Social platforms''' are exploring WebXR for shared experiences
*'''Mixed reality headsets''' like Apple Vision Pro are embracing WebXR standards


===Challenges===
===Challenges===
Line 306: Line 329:
*'''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
*'''Platform-specific implementations''' - Differences in implementation across vendors


==References==
==References==
<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>
<ref name="w3c-webxr">World Wide Web Consortium. (2023). WebXR Device API. W3C. Retrieved May 6, 2025, from https://www.w3.org/TR/webxr/</ref>
<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>
<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>
<ref name="webxr-wiki">Wikipedia. (2025, April). WebXR. Retrieved May 6, 2025, from https://en.wikipedia.org/wiki/WebXR</ref>
<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-explained">Immersive Web Working Group. (2024). 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="immersiveweb-community">Immersive Web Community Group. (2024). About the Immersive Web Community Group. Retrieved May 6, 2025, from https://www.w3.org/community/immersive-web/</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="w3c-ar-module">World Wide Web Consortium. (2023). 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="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="webxr-gamepads">Immersive Web Working Group. (2023). 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="caniuse-webxr">Can I use. (2025, May). WebXR Device API. Retrieved May 6, 2025, from https://caniuse.com/webxr</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. (2025). Immersive Web Developer Home. Retrieved May 6, 2025, from https://immersiveweb.dev/</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. (2023). 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="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). WebXR | ARCore. Retrieved May 6, 2025, from https://developers.google.com/ar/develop/webxr</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>
<ref name="apple-visionos-webxr">Apple Developer. (2024, June). WebXR for visionOS. Retrieved May 6, 2025, from https://developer.apple.com/documentation/webkit/webxr_for_visionos</ref>
<ref name="webkit-webxr-blog">WebKit Blog. (2024, March). Natural Input for WebXR on visionOS. Retrieved May 6, 2025, from https://webkit.org/blog/14142/natural-input-for-webxr-on-visionos/</ref>
<ref name="w3c-webxr-history">World Wide Web Consortium. “WebXR Device API publication history.” W3C Standards. Retrieved May 6 2025, from https://www.w3.org/standards/history/webxr/</ref>
</references>
</references>