XRReferenceSpaceType defines how much your user can move in you experience.
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 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 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 , 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.
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.
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.
00:00 Introduction
01:09 WebXR Device APIs: https://github.com/immersive-web/webx...
02:30 Immersive Devices
03:59 VR Headsets for Mobile Devices.
05:09 Oculus Quest
06:07 Augmented Reality(AR) or Mixed Reality(MR) Headsets
07:00 WebXR with Mobile Devices
07:36 Pokemon Go
08:18 WebVR vs WebXR
09:43 Virtual Reality on the Web
10:36 Mozilla Hello WebXR Demo: https://mixedreality.mozilla.org/hell...
11:12 WebXR Features 11: 30 Gamepad API
12:56 Input Profiles Library
14:51 WebAR Module
15:50 Hit Test
17:11 How to Get Started Building WebXR Experiences
17:25 WebGL
18:00 WebXR Libraries
18:08 ThreeJS: https://threejs.org/
18:17 A-Frame: https://aframe.io/
18:26 BabylonJS: https://www.babylonjs.com/
18:37 React 360: https://facebook.github.io/react-360/
18:53 PlayCanvas: https://playcanvas.com/
19:00 More on A-Frame
19:55 A-Frame Hello World Code
21:07 Future of WebXR APIs
21:29 WebXR Accessibility and DOM Overlay API
24:13 Lighting Estimation Using Computer Vision
25:05 Anchors
26:42 Layers
28:16 Hand Interactions
29:10 WebXR Resources 30: 10 How to Get Involved with Immersive Web Working and Community Groups
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.
