XRWebGLBinding: createCylinderLayer() 方法

語法

createCylinderLayer(init)

引數

init

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

aspectRatio 可選

一個數字，表示可見圓柱體部分的比例。它是可見圓柱體部分寬度除以其高度的比例。寬度透過將 radius 乘以 centralAngle 來計算。預設值為 2.0。

centralAngle 可選

一個數字，表示圓柱體可見部分的弧度。預設值：0.78539 (π / 4)。

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。

isStatic 可選

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

layout 可選

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

default

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

mono

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

stereo

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

stereo-left-right

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

stereo-top-bottom

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

mipLevels 可選

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

radius 可選

一個數字，表示圓柱體的半徑。預設值：2.0。

space 必需

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

textureType 可選

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

• texture：XRWebGLSubImage 的紋理型別為 gl.TEXTURE_2D。
• texture-array：XRWebGLSubImage 的紋理型別為 gl.TEXTURE_2D_ARRAY（僅限 WebGL 2 上下文）。預設值為 texture。

transform 可選

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

viewPixelHeight 必需

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

viewPixelWidth 必需

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

返回值

一個 XRCylinderLayer 物件。

示例

建立 XRCylinderLayer

使用上面列出的屬性配置圓柱體圖層，並在呼叫 createCylinderLayer() 時傳入。要將圖層呈現給 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 cylinderLayer = xrGlBinding.createCylinderLayer({
    space: xrReferenceSpace,
    viewPixelWidth: 1200,
    viewPixelHeight: 600,
    centralAngle: (60 * Math.PI) / 180,
    aspectRatio: 2,
    radius: 2,
    transform: new XRRigidTransform(/* … */),
  });

  xrSession.updateRenderState({
    layers: [cylinderLayer],
  });
}

規範

瀏覽器相容性

另見

• XRCylinderLayer
• WebGL 常量