XRSession: updateRenderState() 方法

語法

updateRenderState()
updateRenderState(state)

引數

state 可選

一個可選物件，用於配置 XRRenderState。如果未提供，將使用預設配置。

• baseLayer 可選：一個 XRWebGLLayer 物件，WebXR 合成器將從中獲取影像。預設情況下此值為 null。要指定其他（或多個）圖層，請參閱 layers 選項。
• depthFar 可選：一個浮點值，指定從檢視者到遠裁剪面的距離（以米為單位），遠裁剪面是與顯示錶面平行的平面，超出此平面將不再進行渲染。所有渲染將在 depthNear 和 depthFar 指定的距離之間進行。預設值為 1000 米（1 公里）。
• depthNear 可選：一個浮點值，表示從檢視者到與顯示錶面平行的平面的距離（以米為單位），該平面被視為近裁剪面。此平面靠檢視者一側的場景將不會被渲染。預設值為 0.1 米（10 釐米）。
• inlineVerticalFieldOfView 可選：一個浮點值，表示為 inline XRSession 計算投影矩陣時使用的預設視場（以弧度為單位）。投影矩陣的計算還會考慮輸出畫布的 縱橫比。此屬性不得為沉浸式會話指定，因此對於沉浸式會話，預設值為 null。否則，預設值為 π * 0.5（π 值的一半）。
• layers 可選：一個有序的 XRLayer 物件陣列，指定應呈現給 XR 裝置的圖層。設定 layers 會覆蓋 baseLayer（如果存在），此時 baseLayer 的值為 null。圖層的順序是從“後到前”。有關圖層的 alpha 混合，請參閱 XRCompositionLayer.blendTextureSourceAlpha 屬性。

返回值

無（undefined）。

異常

InvalidStateError DOMException

在以下任何情況下丟擲：

• XRSession 已結束，因此您無法更改其渲染狀態。
• baseLayer 是由一個不同於呼叫 updateRenderState() 的 XRSession 建立的。
• 設定了 inlineVerticalFieldOfView 選項，但會話是沉浸式的，因此不允許使用此屬性。

NotSupportedError DOMException

在以下任何情況下丟擲：

• layers 選項在一個未建立 layers 功能的會話中使用。
• 同時指定了 baseLayer 和 layers 選項。

TypeError

如果 layers 選項包含重複的例項，則會丟擲此異常。

示例

新增 baseLayer

此示例建立一個與沉浸式 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),
  });
}

設定 layers 陣列

要使用 WebXR 圖層，XR 會話需要使用 layers 功能描述符建立（請參閱 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 Device API
• XRRenderState
• XRSession.renderState