XRRenderState: baseLayer property
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
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:
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 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
Specification |
---|
WebXR Device API # dom-xrrenderstate-baselayer |
Browser compatibility
BCD tables only load in the browser