Intro to WebXR: Add a New Dimension to Your Web Skills
- Date
Variant Staff
In this article we’ll give an introductory overview of their WebXR API, what it can do, common terms, and why you might want to use it. This article will be light on code and more based on understanding the capabilities of the API, but later articles will explore specific implementations in popular 3D engines with code examples.
We will focus mostly on the mobile AR functionality of WebXR.
WebXR
WebXR is a powerful web browser API that brings both augmented reality (AR) and virtual reality (VR) capabilities to the web, allowing developers to craft XR experiences using just Javascript. The API covers tracking the position of devices and headsets, and rendering content to their screen(s).
WebXR’s true strength lies in its open, universal, and permissionless nature::
- Your audience does not need to download an app, and you don’t need to submit to an opaque app store review process.
- You don’t need to worry about minor hardware differences - the API makes guarantees that are kept by the hardware + browser interface.
- You write standard, portable javascript without being locked into a particular company’s WebAR SDK. Your code will likely run years or even decades into the future.
We here at Variant believe that if something that can be called a ‘metaverse’ comes along, it will be based on web technologies like WebXR, not proprietary apps.
Hardware & Browser Support
WebXR works across a spectrum of hardware, from specialized headsets to ubiquitous mobile devices. While headsets, like Meta Quest or Valve Index, offer a full-fledged immersive experience, mobile devices provide low-friction and access to billions of devices without the need to download an app.
WebXR is supported natively on Android via Chrome, and on desktop by most of the leading browsers. However the lack of support on Safari Mobile on iOS has meant developers need to use non-standards-compliant WebAR SDKs to guarantee their experiences can run on both Android and iOS.
With Variant Launch, you can now write WebXR experiences that run on both Android and iOS. Should apple decide to support WebXR fully, you will be able to remove the Variant SDK and your experiences will continue to work!
immersive-ar sessions
While WebXR supports both AR and VR, our spotlight is on AR, particularly the “immersive-ar” sessions. In these sessions, the real-world view from the device’s camera is used as a background, with 2D and 3D content layered on top.
This enables experiences in your real world environment, from simple puzzle games, to previewing new furniture in the place it will actually be, to streaming a volumetric hologram of a person into your room.
The degree to which your digital and physical worlds interact can be expanded by using optional WebXR features.
Key WebXR Features
Additional functionality for WebXR is available as feature ‘modules’. You can enable these when creating your ‘immersive-ar’ session. Support for these features varies - many browsers will put early versions behind ‘flags’ you must enable for access, and adoption can be patchy, but critical functionality like hit-testing usually has universal support.
You’ll likely end up adding the below features to every experience you make:
hit-testing
Allows you to send out a raycast (a line from one point to another that reports all the things it hit along the way). In an immersive-ar session this is a floor, wall or other surface. A common use for hit-testing is when an experience first starts, and the user is choosing to place an object - you hit-test from the center of the screen to where the user is pointing, and show a preview of the object using the position and rotation from the surface.
anchors
Anchors allow objects to maintain a consistent position in the world even while the user moves large distances.
dom-overlay
Since an immersive-ar session is a totally separate rendering mode for the browser, you can’t draw HTML to the screen (in fact in VR this would be pretty headache inducing!). Dom-overlay allows you to choose an HTML element on your page that will be taken into the immersive session and presented appropriately for the device (on-screen as normal for mobile devices, or floating in space for VR)
Privacy restrictions
WebXR is designed with user privacy at its core: By default, developers cannot access the camera’s texture. Also, on Android devices, user input is required to initiate an AR session, just like restrictions with playing video with audio.
However, with Launch on iOS, AR experiences can be launched without user input (We consider the ‘Open’ button on the appclip card to be an intent to start an AR experience)
Upcoming WebXR Features
There are a large number of WebXR features in the pipeline at any one time. These upcoming features are the most impactful for your immersive-ar experiences:
Marker-tracking: This will allow digital content to be anchored to specific real-world images (markers). This feature is currently supported on iOS via Launch, and behind a feature flag on Chrome, suggesting an imminent release.
Camera Texture Access: Users will have the option of opting into allowing access to video of their environment. This enables features like distortion/refraction and far richer special effects, alongside AI models to detect things like whether the user is in an office or home, or what the object is they are pointing at.
Depth Sensing & Plane Detection: These features will provide further informations on the user’s real-world environment, allowing more complex experiences and visual effects like occlusion (when a virtual object realistically disappears behind a real-world one).
Its also worth highlighting that, because you are just in a regular browser, you also have access to all the other libraries available on the web for things like face-tracking , hand-tracking, segmentation etc.
As you’ve seen, WebXR is an exciting, evolving space thats growing alongside the spread of immersive computing, while maintaining the open, accessible, universal, standards-based ethos of the web its built on. Follow us @Variant3d to follow along with our Introduction to WebXR series, where we’ll be exploring how to use WebXR in popular 3D engines like Three.js, PlayCanvas and Babylon.js.