XRRenderState: layers property

{{APIRef("WebXR Device API")}}{{SeeCompatTable}}{{SecureContext_Header}}

The read-only layers property of the {{domxref("XRRenderState")}} interface is an ordered array containing {{domxref("XRLayer")}} objects that are displayed by the XR compositor.

Value

An ordered array containing {{domxref("XRLayer")}} objects. The order of the layers is "back-to-front".

Examples

Getting render state layers

To read the WebXR layers array, use the layers property on {{domxref("XRRenderState")}}. Layers can be set using the {{domxref("XRSession.updateRenderState()")}} method.

const xrSession = navigator.xr.requestSession("immersive-ar", {
  optionalFeatures: ["layers"],
});

function onXRSessionStarted(xrSession) {
  const glCanvas = document.createElement("canvas");
  const gl = glCanvas.getContext("webgl", { xrCompatible: true });
  const xrGlBinding = new XRWebGLBinding(xrSession, gl);
  const projectionLayer = new XRWebGLLayer(xrSession, gl);
  const quadLayer = xrGlBinding.createQuadLayer({
    pixelWidth: 1024,
    pixelHeight: 1024,
  });

  xrSession.updateRenderState({
    layers: [projectionLayer, quadLayer],
  });

  xrSession.renderState.layers; // [projectionLayer, quadLayer]
}

Specifications

{{Specifications}}

Browser compatibility

{{Compat}}

See also

• {{domxref("XRSession.updateRenderState()")}}