XRQuadLayer

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The XRQuadLayer interface of the WebXR Device API is a layer that takes up a flat rectangular space in the virtual environment. An XRQuadLayer has no thickness. It is a two-dimensional object positioned and oriented in 3D space. The position of a quad refers to the center of the quad. Only the front of the layer is visible.

XRQuadLayer requires the layers feature to be enabled for the XRSession. You can request it in XRSystem.requestSession().

To create a new XRQuadLayer, call either:

To present layers to the XR device, add them to the layers render state using XRSession.updateRenderState().

EventTarget XRLayer XRCompositionLayer XRQuadLayer

Instance properties

Inherits properties from its parent, XRCompositionLayer.

XRQuadLayer.height Experimental

Represents the height of the layer in meters.

XRQuadLayer.space Experimental

An XRSpace representing the layer's spatial relationship with the user's physical environment.

XRQuadLayer.transform Experimental

An XRRigidTransform representing the offset and orientation relative to space.

XRQuadLayer.width Experimental

Represents the width of the layer in meters.

Instance methods

Inherits methods from its parents, XRCompositionLayer and EventTarget.

Events

redraw Experimental

Sent to the XRQuadLayer object when the underlying resources of the layer are lost or when the XR Compositor can no longer reproject the layer. If this event is sent, authors should redraw the content of the layer in the next XR animation frame.

Specifications

Specification
WebXR Layers API Level 1
# xrquadlayertype

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
XRQuadLayer
Experimental
height
Experimental
redraw event
Experimental
space
Experimental
transform
Experimental
width
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.

See also