XRWebGLBinding: createCylinderLayer() 方法

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 对象。

使用上面列出的属性在 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 常量