The createQuadLayer()
method of the XRWebGLBinding
interface returns an XRQuadLayer
object which is a layer that takes up a flat rectangular space in the virtual environment.
Configure the quad layer using the properties listed above in a call to createQuadLayer()
. To present layers to the XR device, add them to the layers
render state using XRSession.updateRenderState()
.
function onXRSessionStarted(xrSession) {
const glCanvas = document.createElement("canvas");
const gl = glCanvas.getContext("webgl2", { xrCompatible: true });
const xrGlBinding = new XRWebGLBinding(xrSession, gl);
const quadLayer = xrGlBinding.createQuadLayer({
space: xrReferenceSpace,
viewPixelHeight: 512,
viewPixelWidth: 512,
transform: new XRRigidTransform({ z: -2 }),
});
xrSession.updateRenderState({
layers: [quadLayer],
});
}