XRMediaBinding: createQuadLayer() method
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The createQuadLayer()
method of the XRMediaBinding
interface returns an XRQuadLayer
object which is a layer that takes up a flat rectangular space in the virtual environment.
Syntax
createQuadLayer(video, options)
Parameters
video
-
An
HTMLVideoElement
to display. options
-
An object to configure the
XRQuadLayer
. The object can have the following properties andspace
is required:height
Optional-
A number specifying the height of the layer.
invertStereo
Optional-
A boolean specifying if the natural location of each view in the video should be inverted. By default
false
. layout
Optional-
A string indicating the layout of the video. Possible values:
default
-
The layer accommodates all views of the session.
mono
-
A single
XRSubImage
is allocated and presented to both eyes. stereo
-
The user agent decides how it allocates the
XRSubImage
(one or two) and the layout (top/bottom or left/right). It is recommended to use thetexture-array
texture type forstereo
layouts. stereo-left-right
-
A single
XRSubImage
is allocated. Left eye gets the left area of the texture, right eye the right. This layout is designed to minimize draw calls for content that is already in stereo (for example stereo videos or images). stereo-top-bottom
-
A single
XRSubImage
is allocated. Left eye gets the top area of the texture, right eye the bottom. This layout is designed to minimize draw calls for content that is already in stereo (for example stereo videos or images). The default value ismono
.
space
Required-
An
XRSpace
object defining the layer's spatial relationship with the user's physical environment. transform
Optional-
An
XRRigidTransform
object defining the offset and orientation relative tospace
. width
Optional-
A number specifying the width of the layer.
Return value
An XRQuadLayer
object.
Examples
Creating an XRQuadLayer
to display a video
Create an XRMediaBinding
and use an HTMLVideoElement
that is passed into createQuadLayer()
. Configure the quad layer using the options listed above and present the layer to the XR device by adding it to the layers
render state in XRSession.updateRenderState()
.
function onXRSessionStarted(xrSession) {
const xrMediaBinding = new XRMediaBinding(xrSession);
const video = document.createElement("video");
video.src = "just-fascination.mp4";
const videoLayer = xrMediaBinding.createQuadLayer(video, {
space: xrReferenceSpace,
});
xrSession.updateRenderState({
layers: [videoLayer],
});
}
Specifications
Specification |
---|
WebXR Layers API Level 1 # dom-xrmediabinding-createquadlayer |
Browser compatibility
BCD tables only load in the browser