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