XRWebGLBinding: createEquirectLayer() 方法

options

用于配置 XREquirectLayer 的对象。 它必须具有 space、viewPixelHeight 和 viewPixelWidth 属性。 init 具有以下属性

centralHorizontalAngle 可选

一个数字，表示球体的中心水平角（以弧度为单位）。 默认值：6.28318 (2π)。

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 扩展的上下文
• All 扩展支持的所有格式。 默认值为 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 可选

一个布尔值，如果为真，表示您只能在 needsRedraw 为 true 时绘制到该层。 默认值为 false。

layout 可选

一个字符串，表示层的布局。 可能的值

default

该层适应会话的所有视图。

mono

分配一个单一的 XRSubImage 并将其呈现给两只眼睛。

stereo

用户代理决定如何分配 XRSubImage（一个或两个）以及布局（顶部/底部或左侧/右侧）。

stereo-left-right

分配一个单一的 XRSubImage。 左眼获得纹理的左侧区域，右眼获得右侧区域。

stereo-top-bottom

分配一个单一的 XRSubImage。 左眼获得纹理的顶部区域，右眼获得底部区域。 默认值为 mono。

lowerVerticalAngle 可选

一个数字，表示球体的下部垂直角（以弧度为单位）。 默认值：-1.570795 (-π/2)。

mipLevels 可选

一个数字，指定所需的 mip 层级数量。 默认值为 1。

radius 可选

一个数字，表示球体的半径。 默认值：0（无限球体）。

space 必需

一个 XRSpace 对象，用于定义层在用户物理环境中的空间关系。

textureType 可选

一个字符串，定义层将具有的纹理类型。 可能的值

纹理

XRWebGLSubImage 的纹理类型为 gl.TEXTURE_2D。

纹理数组

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

transform 可选

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

upperVerticalAngle 可选

一个数字，表示球体的上垂直角（以弧度为单位）。默认值为 1.570795（π/2）。

viewPixelHeight 必需

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

viewPixelWidth 必需

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

一个 XREquirectLayer 对象。

使用上面列出的属性在调用 createEquirect() 时配置等距图层。要将图层呈现到 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 equirectLayer = xrGlBinding.createEquirectLayer({
    space: xrReferenceSpace,
    viewPixelWidth: 1200,
    viewPixelHeight: 600,
    centralHorizontalAngle: 2 * Math.PI,
    upperVerticalAngle: Math.PI / 2.0,
    lowerVerticalAngle: -Math.PI / 2.0,
    radius: 0,
  });

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

• XREquirectLayer
• WebGL 常量