XRWebGLBinding: createQuadLayer() 方法

語法

createQuadLayer(options)

引數

options

一個用於配置 XRQuadLayer 的物件。它必須具有 space、viewPixelHeight 和 viewPixelWidth 屬性。init 具有以下屬性：

colorFormat 可選

一個 GLenum，用於定義顏色紋理資料的型別。可能的值：

• gl.RGB
• gl.RGBA 此外，對於啟用了 EXT_sRGB 擴充套件的上下文：
• ext.SRGB_EXT
• ext.SRGB_ALPHA_EXT 此外，對於 WebGL2RenderingContext 上下文：
• gl.RGBA8
• gl.RGB8
• gl.SRGB8
• gl.RGB8_ALPHA8 此外，對於啟用了 WEBGL_compressed_texture_etc 擴充套件的上下文：
• ext.COMPRESSED_RGB8_ETC2
• ext.COMPRESSED_RGB8_PUNCHTHROUGH_ALPHA1_ETC2
• ext.COMPRESSED_RGBA8_ETC2_EAC
• ext.COMPRESSED_SRGB8_ETC2
• ext.COMPRESSED_SRGB8_PUNCHTHROUGH_ALPHA1_ETC2
• ext.COMPRESSED_SRGB8_ALPHA8_ETC2_EAC 此外，對於啟用了 WEBGL_compressed_texture_astc 擴充套件的上下文：
• 擴充套件支援的所有格式。預設值為 gl.RGBA。

depthFormat 可選

一個 GLenum，用於定義深度紋理資料的型別，或者 0 表示圖層不提供深度紋理（在這種情況下，XRProjectionLayer.ignoreDepthValues 將為 true）。在啟用了 WEBGL_depth_texture 擴充套件的 WebGLRenderingContext 上下文，或者在 WebGL2RenderingContext 上下文中（無需擴充套件），可能的值包括：

• gl.DEPTH_COMPONENT
• gl.DEPTH_STENCIL 此外，對於 WebGL2RenderingContext 上下文：
• gl.DEPTH_COMPONENT24
• gl.DEPTH24_STENCIL24 預設值為 gl.DEPTH_COMPONENT。

height 可選

一個指定圖層高度（以米為單位）的數字。預設值為 1.0。

isStatic 可選

一個布林值，如果為 true，則表示您只能在該圖層的 needsRedraw 為 true 時進行繪製。預設值為 false。

layout 可選

一個字串，指示圖層的佈局。可能的值：

default

該圖層支援會話的所有檢視。

mono

分配一個 XRSubImage 物件，並將其呈現給雙眼。

stereo

使用者代理決定如何分配 XRSubImage（一個或兩個）以及佈局（上下或左右）。

stereo-left-right

分配一個 XRSubImage 物件。左眼使用紋理的左側區域，右眼使用右側區域。

stereo-top-bottom

分配一個 XRSubImage 物件。左眼使用紋理的上側區域，右眼使用下側區域。預設值為 mono。

mipLevels 可選

一個數字，指定所需的 mip 級別數量。預設值為 1。

space 必需

一個 XRSpace 物件，定義了圖層與使用者物理環境的空間關係。

textureType 可選

一個字串，定義了圖層的紋理型別。可能的值：

texture

XRWebGLSubImage 的紋理型別為 gl.TEXTURE_2D。

texture-array

XRQuadLayer 的紋理將是 gl.TEXTURE_2D_ARRAY 型別（僅限 WebGL 2 上下文）。預設值為 texture。

transform 可選

一個 XRRigidTransform 物件，定義了相對於 space 的偏移和方向。

viewPixelHeight 必需

一個數字，指定圖層檢視的畫素高度。

viewPixelWidth 必需

一個數字，指定圖層檢視的畫素寬度。

width 可選

一個指定圖層寬度（以米為單位）的數字。預設值為 1.0。

返回值

一個 XRQuadLayer 物件。

示例

建立 XRQuadLayer

在呼叫 createQuadLayer() 中使用上面列出的屬性配置四邊形圖層。要將圖層呈現給 XR 裝置，請使用 XRSession.updateRenderState() 將它們新增到 layers 渲染狀態中。

function onXRSessionStarted(xrSession) {
  const glCanvas = document.createElement("canvas");
  const gl = glCanvas.getContext("webgl2", { xrCompatible: true });
  const xrGlBinding = new XRWebGLBinding(xrSession, gl);
  const quadLayer = xrGlBinding.createQuadLayer({
    space: xrReferenceSpace,
    viewPixelHeight: 512,
    viewPixelWidth: 512,
    transform: new XRRigidTransform({ z: -2 }),
  });
  xrSession.updateRenderState({
    layers: [quadLayer],
  });
}

規範

瀏覽器相容性

另見

• XRQuadLayer
• WebGL 常量