The basic steps most WebXR applications will go through are:
Query to see if the desired XR mode is supported.
If support is available, advertise XR functionality to the user.
A user-activation event indicates that the user wishes to use XR.
Request an immersive session from the device
Use the session to run a render loop that produces graphical frames to be displayed on the XR device.
Continue producing frames until the user indicates that they wish to exit XR mode.
End the XR session.
Different browsers are implementing and WebXR APIs in different timeframes. Currently Chrome and new Edge browsers have WebXR APIs turned on as default and some of the features are under experimental flags.
You can check the current support status at CanIUse.com.
You can turn on experimental flags by navigating to chrome://flags/ or edge://flags/ and searching for the experimental flag you are looking to enable and choosing enable from the drop down menu.
XRReferenceSpaceType defines how much your user can move in you experience.
WebXR-compatible devices include fully-immersive 3D headsets(VR Headsets) with motion and orientation tracking, Augmented Reality glasses, like HoloLens and MagicLeap ,which overlay graphics atop the real world scene passing through the frames, and AR compatible(ARCore and ARKit supported) handheld mobile phones which augment reality by capturing the world with a camera and augment that scene with computer-generated imagery.
iOS devices such as iPhone and iPad currently does not support WebXR APIs in Safari or Chrome but WebXR Viewer App is available from the App Store: https://apps.apple.com/us/app/webxr-viewer/id1295998056
WebXR is a group of standards being implemented by the browsers, which are used together to support rendering 3D scenes to hardware designed for Mixed Reality. Mixed Reality devices are presenting virtual worlds (virtual reality, or VR), or for adding graphical imagery to the real world, (augmented reality, or AR).
The WebXR Device API implements the core of the WebXR feature set, managing the selection of output devices, render the 3D scene to the chosen device at the appropriate frame rate, and manage input, such as controllers and hand interactions.
WebXR Device APIs are replacing the deprecated WebVR API. WebVR API was designed with only VR devices in mind. With the addition of new AR headsets and AR capable handheld devices, the WebVR API is deprecated in favor of WebXR Device APIs, that include AR Modules.
Introduction
WebXR Device APIs:
Immersive Devices
VR Headsets for Mobile Devices.
Oculus Quest
Augmented Reality(AR) or Mixed Reality(MR) Headsets
WebXR with Mobile Devices
Pokemon Go
WebVR vs WebXR
Virtual Reality on the Web
Mozilla Hello WebXR Demo:
WebXR Features 11: 30 Gamepad API
Input Profiles Library
WebAR Module
Hit Test
How to Get Started Building WebXR Experiences
WebGL
WebXR Libraries
ThreeJS:
A-Frame:
BabylonJS:
React 360:
PlayCanvas:
More on A-Frame
A-Frame Hello World Code
Future of WebXR APIs
WebXR Accessibility and DOM Overlay API
Lighting Estimation Using Computer Vision
Anchors
Layers
Hand Interactions
WebXR Resources 30: 10 How to Get Involved with Immersive Web Working and Community Groups
XRReferenceSpaceType
Description
Interface
bounded-floor
Similar to the local
type, except the user is not expected to move outside a predetermined boundary, given by the boundsGeometry
in the returned object.
local
A tracking space whose native origin is located near the viewer's position at the time the session was created. The exact position depends on the underlying platform and implementation. The user isn't expected to move much if at all beyond their starting position, and tracking is optimized for this use case.
For devices with six degrees of freedom (6DoF) tracking, the local
reference space tries to keep the origin stable relative to the environment.
local-floor
Similar to the local
type, except the starting position is placed in a safe location for the viewer to stand, where the value of the y axis is 0 at floor level. If that floor level isn't known, the user agent will estimate the floor level. If the estimated floor level is non-zero, the browser is expected to round it such a way as to avoid fingerprinting (likely to the nearest centimeter).
unbounded
A tracking space which allows the user total freedom of movement, possibly over extremely long distances from their origin point. The viewer isn't tracked at all; tracking is optimized for stability around the user's current position, so the native origin may drift as needed to accommodate that need.
viewer
A tracking space whose native origin tracks the viewer's position and orientation. This is used for environments in which the user can physically move around, and is supported by all instances of XRSession
, both immersive and inline, though it's most useful for inline sessions. It's particularly useful when determining the distance between the viewer and an input, or when working with offset spaces. Otherwise, typically, one of the other reference space types will be used more often.