WebXR

The read-only xr property provided by the Navigator interface returns an XRSystem object which can be used to access the WebXR Device API.

The WebGLRenderingContext method makeXRCompatible() ensures that the rendering context described by the WebGLRenderingContext is ready to render the scene for the immersive WebXR device on which it will be displayed. If necessary, the WebGL layer may reconfigure the context to be ready to render to a different device than it originally was.

The WebGLRenderingContext method makeXRCompatible() ensures that the rendering context described by the WebGLRenderingContext is ready to render the scene for the immersive WebXR device on which it will be displayed. If necessary, the WebGL layer may reconfigure the context to be ready to render to a different device than it originally was.

The read-only XRBoundedReferenceSpace property boundsGeometry is an array of DOMPointReadOnly objects which specifies the points making up a polygon inside which the viewer is allowed to move. Each point is treated as a two-dimensional point, and must be located at ground level (that is, its y coordinate must be 0).

A WebXR Device API XRFrame object is passed into the XRSession.requestAnimationFrame callback function and provides access to the information needed in order to render a single frame of animation for an XRSession describing a VR or AR scene. Events which communicate the tracking state of objects also provide an XRFrame reference as part of their structure.

The XRFrame method getPose() returns the relative position and orientation—the pose—of one XRSpace to that of another space. With this, you can observe the motion of objects relative to each other and to fixed locations throughout the scene.

The getViewerPose() method, a member of the XRFrame interface, returns a XRViewerPose object which describes the viewer's pose (position and orientation) relative to the specified reference space.

An XRFrame object's read-only session property returns the XRSession object that generated the frame.

The WebXR Device API's XRInputSource interface describes a single source of control input which is part of the user's WebXR-compatible virtual or augmented reality system. The device is specific to the platform being used, but provides the direction in which it is being aimed and optionally may generate events if the user triggers performs actions using the…

The read-only XRInputSource property gripSpace returns an XRSpace whose native origin tracks the pose used to render virtual objects so they appear to be held in (or part of) the user's hand. For example, if a user were holding a virtual straight rod, the native origin of this XRSpace would be located at the approximate center of mass of the user's fist.

The read-only XRInputSource property handedness indicates which of the user's hands the WebXR input source is associated with, or if it's not associated with a hand at all.

The read-only XRInputSource property profiles returns an array of strings, each describing a configuration profile for the input source. The profile strings are listed in order of specificity, with the most specific profile listed first.

The read-only XRInputSource property targetRayMode indicates the method by which the target ray for the input source should be generated and how it should be presented to the user.

The read-only XRInputSource property targetRaySpace returns an XRSpace (typically an XRReferenceSpace) representing the position and orientation of the target ray in the virtual space. Its native origin tracks the position of the origin point of the target ray, and its orientation indicates the orientation of the controller device itself. These values,…

The interface XRInputSourceArray represents a live list of WebXR input sources, and is used as the return value of the XRSession property XRSession.inputSources. Each entry is an XRInputSource representing one input device connected to the WebXR system.

[Symbol.iterator]

The XRInputSourceArray interface's entries() method returns a JavaScript iterator which can then be used to iterate over the key/value pairs in the input source array. Each item in the array is an XRInputSource object.

The XRInputSourceArray method forEach() executes the specified callback once for each input source in the array, starting at index 0 and progressing until the end of the list.

The keys() method in the XRInputSourceArray interface returns a JavaScript iterator which can then be used to iterate over the keys used to reference each item in the array of input sources.

The read-only length property returns an integer value indicating the number of items in the input source list represented by the XRInputSourceArray object.

The XRInputSourceArray method values() returns a JavaScript iterator that can walk over the list of XRInputSource objects contained in the array, from first to last.

The WebXR Device API's XRInputSourceEvent interface describes an event which has occurred on a WebXR user input device such as a hand controller, gaze tracking system, or motion tracking system. More specifically, they represent a change in the state of an XRInputSource.

The read-only XRInputSourceEvent property frame specifies an XRFrame object representing the event frame during which a WebXR user input occurred. This may thus be an event which occurred in the past rather than a current or impending event.

The XRInputSourceEvent interface's read-only inputSource property specifies the XRInputSource which generated the input event. This information lets you handle the event appropriately given the particulars of the user input device being manipulated.

The XRInputSourceEvent() constructor creates and returns a new XRInputSourceEvent object describing an event (state change) which has occurred on a WebXR user input device represented by an XRInputSource.

The WebXR Device API interface XRInputSourcesChangeEvent is used to represent the XRSession.inputsourceschange_event event sent to an XRSession when the set of available WebXR input controllers changes.

The read-only XRInputSourcesChangeEvent property added is a list of zero or more input sources, each identified using an XRInputSource object, which have been newly made available for use.

The read-only XRInputSourcesChangeEvent property removed is an array of zero or more XRInputSource objects representing the input sources that have been removed from the XRSession.

The XRInputSourcesChangeEvent property session specifies the XRSession to which the input source list change event applies.

The XRInputSourcesChangeEvent() constructor creates and returns a new XRInputSourcesChangeEvent object, representing an update to the list of available WebXR input devices. You won't typically call this constructor yourself, as these events are created and sent to you by the WebXR system.

The XRLayer interface of the WebXR Device API is the base class for WebXR layer types. It inherits methods from EventTarget.

XRPose is a WebXR API interface representing a position and orientation in the 3D space, relative to the XRSpace within which it resides. The XRSpace—which is either an XRReferenceSpace or an XRBoundedReferenceSpace—defines the coordinate system used for the pose and, in the case of an XRViewerPose, its underlying views.

The angularVelocity read-only property of the XRPose interface is a DOMPointReadOnly describing the angular velocity in radians per second relative to the base XRSpace.

The emulatedPosition read-only attribute of the XRPose interface is a Boolean value indicating whether or not both the XRRigidTransform.position component of the pose's XRPose.transform is directly taken from the XR device, or it's simulated or computed based on other sources.

The linearVelocity read-only property of the XRPose interface is a DOMPointReadOnly describing the linear velocity in meters per second relative to the base XRSpace.

The transform read-only attribute of the XRPose interface is a XRRigidTransform object providing the position and orientation of the pose relative to the base XRSpace as specified when the pose was obtained by calling XRFrame.getPose().

The WebXR Device API's XRReferenceSpace interface describes the coordinate system for a specific tracked entity or object within the virtual world using a specified tracking behavior. The tracking behavior is defined by the selected reference space type. It expands upon the base class, XRSpace, by adding support for several different tracking behaviors as…

The XRReferenceSpace interface's getOffsetReferenceSpace() method returns a new reference space object which describes the relative difference in position between the object on which the method is called and a given point in 3D space. The object returned by getOffsetReferenceSpace() is an XRReferenceSpace if called on an XRReferenceSpace, or an…

The reset event is sent to an XRReferenceSpace object when a discontinuity is detected in either the native origin or the effective origin, causing a jump in the position or orientation of objects oriented using the reference space. This is common when the user calibrates or recalibrates an XR device, or if the device automatically changes its origin after…

The WebXR Device API interface XRReferenceSpaceEvent represents an event sent to an XRReferenceSpace. Currently, the only event that uses this type is the XRReferenceSpace.reset_event event.

The read-only XRReferenceSpaceEvent property referenceSpace specifies the reference space which is the originator of the event.

The read-only XRReferenceSpaceEvent property transform indicates the position and orientation of the affected XRReferenceSpaceEvent.referenceSpace's native origin after the changes the event represents are applied. The transform is defined using the old coordinate system, which allows it to be used to convert coordinates from the pre-event coordinate system…

The XRReferenceSpaceEvent() constructor is used to create a new XRReferenceSpaceEvent object, which represents an event regarding the state of a WebXR reference space object, XRReferenceSpace.

The XRRenderState interface of the WebXR Device API contains configurable values which affect how the imagery generated by an XRSession gets composited. These properties include the range of distances from the viewer within which content should be rendered, the vertical field of view (for inline presentations), and a reference to the XRWebGLLayer being used…

The read-only baseLayer property of the XRRenderState interface returns the XRWebGLLayer instance that is the source of bitmap images and a description of how the image is to be rendered in the device.

The depthFar read-only property of the XRRenderState interface returns the distance in meters of the far clip plane from the viewer.

The depthNear read-only property of the XRRenderState interface returns the distance in meters of the near clip plane from the viewer.

The read-only inlineVerticalFieldOfView property of the XRRenderState interface returns the default vertical field of view for "inline" sessions and null for all immersive sessions.

The XRRigidTransform is a WebXR API interface that represents the 3D geometric transform described by a position and orientation.

The read-only inverse property of the XRRigidTransform interface returns another XRRigidTransform object which is the inverse of its owning transform. That is, you can always get the inverse of any XRRigidTransform using its inverse property, instead of having to explicitly generate it.

The read-only XRRigidTransform property matrix returns the transform matrix represented by the object. The returned matrix can then be premultiplied with a column vector to rotate the vector by the 3D rotation specified by the XRRigidTransform.orientation, then translate it by the XRRigidTransform.position.

The read-only XRRigidTransform property orientation is a DOMPointReadOnly containing a normalized quaternion (also called a unit quaternion or versor) specifying the rotational component of the transform represented by the object. If you specify a quaternion whose length is not exactly 1.0 meters, it will be normalized for you.

The read-only XRRigidTransform property position is a DOMPointReadOnly object which provides the 3D point, specified in meters, describing the translation component of the transform.

The XRRigidTransform() constructor creates a new XRRigidTransform object, representing the position and orientation of a point or object. Among other things, XRRigidTransform is used when providing a transform to translate between coordinate systems across spaces.

The XRSession interface of the WebXR Device API represents an ongoing XR session, providing methods and properties used to interact with and control the session. To open a WebXR session, use the XRSystem interface's XRSystem.requestSession method.

The cancelAnimationFrame() method of the XRSession interface cancels an animation frame which was previously requested by calling XRSession.requestAnimationFrame.

The XRSession interface's read-only enabledFeatures property returns an array of features enabled (granted) for an XRSession. This contains all requiredFeatures and a subset of optionalFeatures that have been requested with XRSystem.requestSession().

The end() method shuts down the XRSession on which it's called, returning a promise which resolves once the session has fully shut down.

An end event is fired at an XRSession object when the WebXR session has ended, either because the web application has chosen to stop the session, or because the user agent terminated the session.

The read-only inputSources property of the XRSession interface returns an XRInputSourceArray object which lists all controllers and input devices which are expressly associated with the XR device and are currently available. These controllers may include handheld controllers, XR-equipped gloves, optically tracked hands, and gaze-based input methods.…

The inputsourceschange event is sent to an XRSession when the set of available WebXR input devices changes.

The read-only renderState property of an XRSession object indicates the returns a XRRenderState object describing how the user's environment which should be rendered. The information provided covers the minimum and maximum distance at which to render objects, the vertical field of view to use when rendering the in the inline session mode, and the…

The XRSession method requestAnimationFrame(), much like the Window method of the same name, schedules a callback to be executed the next time the browser is ready to paint the session's virtual environment to the XR display. The specified callback is executed once before the next repaint; if you wish for it to be executed for the following repaint, you must…

The requestReferenceSpace() method of the XRSession interface returns a promise that resolves with an instance of either XRReferenceSpace or XRBoundedReferenceSpace as appropriate given the type of reference space requested.

The WebXR select event is sent to an XRSession when one of the session's input sources has completed a primary action.

The WebXR event selectend is sent to an XRSession when one of its input sources ends its primary action or when an input source that's in the process of handling an ongoing primary action is disconnected without successfully completing the action.

The WebXR selectstart event is sent to an XRSession when the user begins a primary action on one of its input sources.

The WebXR squeeze event is sent to an XRSession when one of the session's input sources has completed a primary squeeze action. Examples of common kinds of primary action are users pressing triggers or buttons, tapping a touchpad, speaking a command, or performing a recognizable gesture when using a video tracking system or handheld controller with an…

The WebXR event squeezeend is sent to an XRSession when one of its input sources ends its primary action or when an input source that's in the process of handling an ongoing primary action is disconnected without successfully completing the action.

The WebXR event squeezestart is sent to an XRSession when the user begins a primary squeeze action on one of its input sources.

The updateRenderState() method of the XRSession interface of the WebXR API schedules changes to be applied to the active render state (XRRenderState) prior to rendering of the next frame.

The visibilitychange event is sent to an XRSession to inform it when it becomes visible or hidden, or when it becomes visible but not currently focused. Upon receiving the event, you can check the value of the session's XRSession.visibilityState property to determine the new visibility state.

The read-only visibilityState property of the XRSession interface is a string indicating whether the WebXR content is currently visible to the user, and if it is, whether it's the primary focus.

The WebXR Device API's XRSessionEvent interface describes an event which indicates the change of the state of an XRSession. These events occur, for example, when the session ends or the visibility of its context changes.

The read-only XRSessionEvent interface's session property indicates which XRSession the event is about.

The WebXR Device API's XRSessionEvent() constructor creates and returns a new XRSessionEvent object. These objects represent events announcing state changes in an XRSession representing an augmented or virtual reality session.

The XRSpace interface of the WebXR Device API is an abstract interface providing a common basis for every class which represents a virtual coordinate system within the virtual world, in which its origin corresponds to a physical location. Spatial data in WebXR is always expressed relative to an object based upon one of the descendant interfaces of XRSpace,…

The WebXR Device API interface XRSystem provides methods which let you get access to an XRSession object representing a WebXR session. With that XRSession in hand, you can use it to interact with the Augmented Reality (AR) or Virtual Reality (VR) device.

A devicechange event is fired on an XRSystem object whenever the availability of immersive XR devices has changed; for example, a VR headset or AR goggles have been connected or disconnected. It's a generic Event with no added properties.

The XRSystem method isSessionSupported() returns a promise which resolves to true if the specified WebXR session mode is supported by the user's WebXR device. Otherwise, the promise resolves with false.

The XRSystem interface's requestSession() method returns a promise which resolves to an XRSession object through which you can manage the requested type of WebXR session.

The WebXR Device API's XRView interface describes a single view into the XR scene for a specific frame, providing orientation and position information for the viewpoint. You can think of it as a description of a specific eye or camera and how it views the world. A 3D frame will involve two views, one for each eye, separated by an appropriate distance which…

The XRView interface's read-only eye property is a string indicating which eye's viewpoint the XRView represents: left or right. For views which represent neither eye, such as monoscopic views, this property's value is none.

The XRView interface's read-only projectionMatrix property specifies the projection matrix to apply to the underlying view. This should be used to integrate perspective to everything in the scene, in order to ensure the result is consistent with what the eye expects to see.

The read-only recommendedViewportScale property of the XRView interface is the recommended viewport scale value that you can use for XRView.requestViewportScale() if the user agent has such a recommendation; null otherwise.

The requestViewportScale() method of the XRView interface requests that the user agent sets the requested viewport scale for this viewport to the given value. This is used for dynamic viewport scaling which allows rendering to a subset of the WebXR viewport using a scale factor that can be changed every animation frame.

The read-only transform property of the XRView interface is an XRRigidTransform object which provides the position and orientation of the viewpoint relative to the XRReferenceSpace specified when the XRFrame.getViewerPose() method was called to obtain the view object.

The WebXR Device API interface XRViewerPose represents the pose (the position and orientation) of a viewer's point of view on the scene. Each XRViewerPose can have multiple views to represent, for example, the slight separation between the left and right eye.

The read-only XRViewerPose property views returns an array which contains every XRView which must be rendered in order to fully represent the scene from the viewpoint defined by the viewer pose. For monoscopic devices, this array contains a single view.

The WebXR Device API's XRViewport interface provides properties used to describe the size and position of the current viewport within the XRWebGLLayer being used to render the 3D scene.

The read-only XRViewport property height specifies the height, in pixels, of the viewport onto the drawing surface within which the WebXR view is to be rendered. Along with XRViewport.width and the origin point given by XRViewport.x and XRViewport.y, this defines the area within which rendered content will be drawn.

The read-only XRViewport property width specifies the width of the viewport, in pixels, onto the drawing surface the 3D scene is to be rendered into. This is defined using this property along with the viewport's XRViewport.height and its origin given by its properties XRViewport.x and XRViewport.y.

The read-only XRViewport interface's x property indicates the offset from the left edge of the destination surface (typically a XRWebGLLayer) to the left edge of the viewport within the surface into which WebXR content is to be rendered. The viewport's XRViewport.y property identifies the y component of the origin, and its is given by the XRViewPort.width…

The read-only XRViewport interface's y property indicates the offset from the bottom edge of the destination surface (typically a XRWebGLLayer) to the bottom edge of the viewport within the surface into which WebXR content is to be rendered. The viewport's XRViewport.x property identifies the x component of the origin, and its is given by the…

The XRWebGLLayer interface of the WebXR Device API provides a linkage between the WebXR device (or simulated XR device, in the case of an inline session) and a WebGL context used to render the scene for display on the device. In particular, it provides access to the WebGL framebuffer and viewport to ease access to the context.

The read-only XRWebGLLayer property antialias is a Boolean value which is true if the rendering layer's frame buffer supports anti-aliasing. Otherwise, this property's value is false. The specific anti-aliasing technique used is left to the user agent discretion and cannot be specified by the website or web app.

The fixedFoveation property of the XRWebGLLayer interface is a number indicating the amount of foveation used by the XR compositor. Fixed Foveated Rendering (FFR) renders the edges of the eye textures at a lower resolution than the center and reduces the GPU load.

The read-only XRWebGLLayer property framebuffer is an opaque WebGLFramebuffer which is used to buffer the rendered image if the XR compositor is being used. Otherwise, this property's value is null. The opaque framebuffer is functionally nearly the same as a standard WebGL framebuffer, except for the differences covered in the section How opaque…

The read-only XRWebGLLayer property framebufferHeight indicates the height of the framebuffer, in pixels.

The read-only XRWebGLLayer property framebufferWidth specifies the width of the framebuffer, in pixels.

The static method XRWebGLLayer.getNativeFramebufferScaleFactor() returns a floating-point scaling factor by which one can multiply the specified XRSession's resolution to get the native resolution of the WebXR device's frame buffer.

The XRWebGLLayer interface's getViewport() method returns the XRViewport that should be used to render the specified XRView into the WebGL layer. For WebXR devices which use a single framebuffer for both the left and right eyes, the returned viewport represents the region of the framebuffer into which the scene should be rendered for the eye represented by…

The read-only XRWebGLLayer property ignoreDepthValues is a Boolean value which is true if the session has been configured to ignore the values in the depth buffer while rendering the scene. If the depth buffer is being used to determine the position of vertices, this property is false.

The WebXR Device API XRWebGLLayer() constructor creates and returns a new XRWebGLLayer object, providing the linkage between the WebXR device and the WebGL graphics layer used to render the 3D scene.

The HTTP Permissions-Policy header xr-spatial-tracking directive controls whether the current document is allowed to use the WebXR Device API.