The updateRenderState()
method of the XRSession
interface of the WebXR API schedules changes to be applied to the active render state (XRRenderState
) prior to rendering of the next frame.
updateRenderState()
updateRenderState(state)
This example creates a WebGL context that is compatible with an immersive XR device and then uses it to create an XRWebGLLayer
. The method updateRenderState()
is then called to associate the new XRWebGLLayer
.
function onXRSessionStarted(xrSession) {
let glCanvas = document.createElement("canvas");
let gl = glCanvas.getContext("webgl", { xrCompatible: true });
loadWebGLResources();
xrSession.updateRenderState({
baseLayer: new XRWebGLLayer(xrSession, gl),
});
}
To use WebXR layers, the XR session needs to be created with the layers
feature descriptor (see XRSystem.requestSession()
). You can then create various WebXR layers such as
Other layers, such as XRProjectionLayer
or XRWebGLLayer
are also available.
Layers will be presented in the order they are given in the layers
array, with layers being given in "back-to-front" order.
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],
});
}