XRWebGLBinding：createQuadLayer() 方法

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）。WebGLRenderingContext 上下文启用了 WEBGL_depth_texture 扩展，或 WebGL2RenderingContext 上下文（不需要扩展）内的可能取值

• gl.DEPTH_COMPONENT
• gl.DEPTH_STENCIL 此外，对于 WebGL2RenderingContext 上下文
• gl.DEPTH_COMPONENT24
• gl.DEPTH24_STENCIL24 默认值为 gl.DEPTH_COMPONENT。

height 可选

一个数字，以米为单位指定层的的高度。默认值为 1.0。

isStatic 可选

一个布尔值，如果为真，则表示只有在 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

XRWebGLSubImage 的纹理类型将为 gl.TEXTURE_2D_ARRAY（仅限 WebGL 2 上下文）。默认值为 texture。

transform 可选

一个 XRRigidTransform 对象，定义相对于 space 的偏移量和方向。

viewPixelHeight 必需

一个数字，指定层视图的像素高度。

viewPixelWidth 必需

一个指定图层视图像素宽度的数字。

width 可选

一个指定图层以米为单位的宽度的数字。默认值为 1.0。

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