XRMediaBinding.createCylinderLayer()
The createCylinderLayer()
method of the XRMediaBinding
interface returns an XRCylinderLayer
object which is a layer that takes up a curved rectangular space in the virtual environment.
Syntax
createCylinderLayer(video, options)
Parameters
video
-
An
HTMLVideoElement
to display. options
-
An object to configure the
XRCylinderLayer
. The object can have the following properties andspace
is required:aspectRatio
: Optional. A number indicating the ratio of the visible cylinder section. It is the ratio of the width of the visible section of the cylinder divided by its height. The width is calculated by multiplying theradius
with thecentralAngle
.centralAngle
: Optional. A number indicating the angle in radians of the visible section of the cylinder. Default value:0.78539
(π / 4).invertStereo
: Optional. A boolean specifying if the natural location of each view in the video should be inverted. By defaultfalse
.layout
: Optional. A string indicating the layout of the video. Possible values:default
: The layer accommodates all views of the session.mono
: A singleXRSubImage
is allocated and presented to both eyes.stereo
: The user agent decides how it allocates theXRSubImage
(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 singleXRSubImage
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 singleXRSubImage
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).
mono
.radius
: Optional. A number indicating the radius of the cylinder. Default value2.0
.space
: Required. AnXRSpace
object defining the layer's spatial relationship with the user's physical environment.transform
: Optional. AnXRRigidTransform
object defining the offset and orientation relative tospace
.
Return value
An XRCylinderLayer
object.
Examples
Creating an XRCylinderLayer
to display a video
Create an XRMediaBinding
and use an HTMLVideoElement
that is passed into createCylinderLayer()
. 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.createCylinderLayer(video, {
space: xrReferenceSpace
});
xrSession.updateRenderState({
layers: [videoLayer]
});
}
Specifications
No specification found
No specification data found for api.XRMediaBinding.createCylinderLayer
.
Check for problems with this page or contribute a missing spec_url
to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.
Browser compatibility
No compatibility data found for api.XRMediaBinding.createCylinderLayer
.
Check for problems with this page or contribute missing data to mdn/browser-compat-data.