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 常量