XRSession: updateRenderState() 方法

state 可选

一个可选的对象，用于配置 XRRenderState。如果未提供，将使用默认配置。

• baseLayer 可选：一个 XRWebGLLayer 对象，WebXR 合成器将从中获取图像。默认值为 null。要指定其他（或多个）图层，请参阅 layers 选项。
• depthFar 可选：一个浮点值，指定从查看者到远裁剪平面的距离（以米为单位），该平面平行于显示表面，并且在此平面之外不会发生进一步的渲染。所有渲染都将在 depthNear 和 depthFar 指定的距离之间进行。默认值为 1000 米（1 公里）。
• depthNear 可选：一个浮点值，指示从查看者到平行于显示表面的平面的距离（以米为单位），该平面将作为近裁剪平面。不会渲染查看者侧此平面上的任何场景部分。默认值为 0.1 米（10 厘米）。
• inlineVerticalFieldOfView 可选: 一个浮点值，表示用于计算内联 XRSession 投影矩阵的默认视野（以弧度为单位）。投影矩阵计算还会考虑输出画布的纵横比。对于沉浸式会话，不得指定此属性，因此对于沉浸式会话，默认值为 null。否则，默认值为 π * 0.5（π 的一半）。
• layers 可选: 一个有序的 XRLayer 对象数组，指定应呈现给 XR 设备的图层。设置 layers 将覆盖 baseLayer（如果存在），baseLayer 将报告 null。给出的图层顺序为“从后到前”。有关图层的 Alpha 混合，请参阅 XRCompositionLayer.blendTextureSourceAlpha 属性。

无 (undefined)。

InvalidStateError DOMException

在以下任何情况下都会抛出

• XRSession 已经结束，因此您无法更改其渲染状态。
• baseLayer 由除调用 updateRenderState() 的 XRSession 之外的其他 XRSession 创建。
• 设置了 inlineVerticalFieldOfView 选项，但会话是沉浸式的，因此不允许使用此属性。

NotSupportedError DOMException

在以下任何情况下都会抛出

• 在没有 layers 特性的会话中使用了 layers 选项。
• 同时指定了 baseLayer 和 layers 选项。

TypeError

如果 layers 选项包含重复的实例，则抛出。

此示例创建与沉浸式 XR 设备兼容的 WebGL 上下文，然后使用它来创建 XRWebGLLayer。然后调用 updateRenderState() 方法来关联新的 XRWebGLLayer。

function onXRSessionStarted(xrSession) {
  let glCanvas = document.createElement("canvas");
  let gl = glCanvas.getContext("webgl", { xrCompatible: true });

  loadWebGLResources();

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

要使用 WebXR 图层，需要使用 layers 特性描述符创建 XR 会话（请参阅 XRSystem.requestSession()）。然后，您可以创建各种 WebXR 图层，例如

• XREquirectLayer
• XRCubeLayer
• XRCylinderLayer
• XRQuadLayer

还提供其他图层，例如 XRProjectionLayer 或 XRWebGLLayer。

图层将按照它们在 layers 数组中给出的顺序呈现，图层以“从后到前”的顺序给出。

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],
  });
}

• WebXR 设备 API
• XRRenderState
• XRSession.renderState