W3cubDocs

/Web APIs

XRRenderState: baseLayer property

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The read-only baseLayer property of the XRRenderState interface returns the XRWebGLLayer instance that is the source of bitmap images and a description of how the image is to be rendered in the device.

This property is read-only; however, you can indirectly change its value using XRSession.updateRenderState.

Value

A XRWebGLLayer object which is used as the source of the world's contents when rendering each frame of the scene.

See the examples below to see how to use updateRenderState() to set the current XRWebGLLayer used for rendering the scene.

Examples

You can set the XRWebGLLayer used for rendering by calling updateRenderState(), like this:

js

let canvas = document.querySelector("canvas");
gl = canvas.getContext("webgl", { xrCompatible: true });
setNewWebGLLayer();

function setNewWebGLLayer(gl) {
  if (!gl) {
    /* WebGL not available */
    return;
  }

  xrSession.updateRenderState({
    baseLayer: new XRWebGLLayer(xrSession, gl),
  });
}

Here, the canvas obtained in the first line is the canvas into which WebGL is going to draw. That context is passed into new XRWebGLLayer() to create an XRWebGLLayer which uses the contents of the WebGL context gl as the source of the world's image during presentation.

Specifications

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
baseLayer 79 79 No No 66 No No 79 No 57 No 12.0

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/XRRenderState/baseLayer