XRWebGLLayer

建構函式

XRWebGLLayer() 實驗性

建立並返回一個新的 XRWebGLLayer 物件，供指定的 XRSession 使用，並使用特定的 WebGLRenderingContext 或 WebGL2RenderingContext 作為目標上下文。

例項屬性

antialias 只讀 實驗性

一個布林值，指示 WebGL 上下文的幀緩衝區是否支援抗鋸齒。具體的抗鋸齒型別由 使用者代理 決定。

fixedFoveation 實驗性

一個數字，表示 XR 合成器使用的注視點渲染（foveation）的量。固定注視點渲染（FFR）以比中心更低的精度渲染眼部紋理的邊緣，從而降低 GPU 負載。

framebuffer 只讀 實驗性

返回一個 WebGLFramebuffer 物件，適用於傳遞給 bindFrameBuffer() 方法。

framebufferWidth 只讀 實驗性

返回 XRWebGLLayer 幀緩衝區的寬度。

framebufferHeight 只讀 實驗性

返回此層幀緩衝區的高度。

ignoreDepthValues 只讀 實驗性

一個布林值，指示 WebXR 合成器在合成場景時是否應使用該層的深度緩衝區內容。

靜態方法

getNativeFramebufferScaleFactor() 實驗性

返回一個縮放因子，該因子可用於將推薦的 WebGL 幀緩衝區解析度縮放到渲染裝置的本機解析度。

例項方法

getViewport() 實驗性

返回一個新的 XRViewport 例項，該例項表示 WebGL 上下文的視口必須設定的位置、寬度和高度，以便將繪圖包含在為指定檢視內容預留的幀緩衝區區域內。透過這種方式，例如，左眼視角和右眼視角的渲染會被分別放置到幀緩衝區的正確區域。

示例

將層繫結到 WebGL 上下文

此程式碼片段摘自我們 WebXR 示例“運動與動作”中的繪製幀，展示瞭如何從 XRSession 物件的渲染狀態中獲取 XRWebGLLayer，然後透過呼叫 WebGL 的 bindFrameBuffer() 函式將其繫結為當前渲染的 WebGL 幀緩衝區。

let glLayer = xrSession.renderState.baseLayer;
gl.bindFrameBuffer(gl.FRAMEBUFFER, glLayer.framebuffer);

渲染幀中的每個檢視

每次 GPU 準備好將場景渲染到 XR 裝置時，XR 執行時都會呼叫您在呼叫 XRSession 方法 requestAnimationFrame() 時指定的函式，請求渲染該幀。

該函式將一個 XRFrame 作為輸入，該幀封裝了渲染該幀所需的資料。這些資訊包括姿勢（一個 XRViewerPose 物件），該姿勢描述了檢視器在場景中的位置和朝向，以及一個 XRView 物件列表，每個物件代表場景的一個視角。在當前的 WebXR 實現中，此列表永遠不會超過兩個條目：一個描述左眼的視角和觀察角度，另一個描述右眼。

let pose = xrFrame.getViewerPose(xrReferenceSpace);

if (pose) {
  const glLayer = xrSession.renderState.baseLayer;
  gl.bindFrameBuffer(gl.FRAMEBUFFER, glLayer.framebuffer);

  for (const view of pose.views) {
    const viewport = glLayer.getViewport(view);
    gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height);

    /* Render the view */
  }
}

規範

瀏覽器相容性

另見

• WebXR Device API
• WebGL 入門
• WebGLRenderingContext 和 WebGL2RenderingContext
• 我們 WebXR 示例“運動與動作”中的繪製幀