XRMediaBinding: createCylinderLayer() method

Limited availability

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

Experimental:This is anexperimental technology
Check theBrowser compatibility table carefully before using this in production.

ThecreateCylinderLayer() method of theXRMediaBinding interface returns anXRCylinderLayer object which is a layer that takes up a curved rectangular space in the virtual environment.

Syntax

createCylinderLayer(video, options)

Parameters

video

AnHTMLVideoElement to display.

options

An object to configure theXRCylinderLayer. The object can have the following properties andspace is required:

aspectRatioOptional

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.

centralAngleOptional

A number indicating the angle in radians of the visible section of the cylinder. Default value:0.78539 (π / 4).

invertStereoOptional

A boolean specifying if the natural location of each view in the video should be inverted. By defaultfalse.

layoutOptional

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).The default value ismono.

radiusOptional

A number indicating the radius of the cylinder. Default value2.0.

spaceRequired

AnXRSpace object defining the layer's spatial relationship with the user's physical environment.

transformOptional

AnXRRigidTransform object defining the offset and orientation relative tospace.

Create anXRMediaBinding and use anHTMLVideoElement that is passed intocreateCylinderLayer(). Configure the quad layer using the options listed above and present the layer to the XR device by adding it to thelayers render state inXRSession.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],  });}