XRWebGLBinding: createCubeLayer() 方法

实验性： 这是一个 实验性技术
在生产环境中使用之前，请仔细查看 浏览器兼容性表格。

createCubeLayer() 是 XRWebGLBinding 接口的方法，它返回一个 XRCubeLayer 对象，该对象是一个直接从 立方体贴图 渲染的图层，并将其投影到立方体的内表面上。

语法

js
createCubeLayer(init)

参数

init

一个用于配置 XRCubeLayer 的对象。它必须具有 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 扩展的上下文
  • 扩展支持的所有 格式。
depthFormat 可选

一个 GLenum，定义深度纹理数据的类型，或 0 表示图层不应提供深度纹理。（在这种情况下，XRProjectionLayer.ignoreDepthValues 将为 true。）对于启用了 WEBGL_depth_texture 扩展的 WebGLRenderingContext 上下文，或 WebGL2RenderingContext 上下文（不需要扩展）可能的值

  • gl.DEPTH_COMPONENT（默认）
  • gl.DEPTH_STENCIL 此外，对于 WebGL2RenderingContext 上下文
  • gl.DEPTH_COMPONENT24
  • gl.DEPTH24_STENCIL24
isStatic 可选

一个布尔值，如果为真，则表示只有当 needsRedraw 为 true 时才能绘制到此图层。默认值为 false。

layout

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

  • default：图层适应会话的所有视图。
  • mono：分配单个 XRSubImage 并呈现到双眼。
  • stereo：用户代理决定如何分配 XRSubImage（一个或两个）以及布局（顶部/底部或左侧/右侧）。
  • stereo-left-right：分配单个 XRSubImage。左眼获取纹理的左侧区域，右眼获取右侧区域。
  • stereo-top-bottom：分配单个 XRSubImage。左眼获取纹理的顶部区域，右眼获取底部区域。默认值为 mono。
mipLevels 可选

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

orientation 可选

一个 DOMPointReadOnly，指定相对于 space 属性的方向。

space 必需

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

viewPixelHeight 必需

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

viewPixelWidth 必需

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

返回值

一个 XRCubeLayer 对象。

示例

创建 XRCubeLayer

使用上面列出的属性在 createCubeLayer() 调用中配置立方体图层。要将图层呈现到 XR 设备，请使用 XRSession.updateRenderState() 将它们添加到 layers 渲染状态。

js
function onXRSessionStarted(xrSession) {
  const glCanvas = document.createElement("canvas");
  const gl = glCanvas.getContext("webgl2", { xrCompatible: true });
  const xrGlBinding = new XRWebGLBinding(xrSession, gl);
  const cubeLayer = xrGlBinding.createCubeLayer({
    space: xrReferenceSpace,
    viewPixelHeight: 512,
    viewPixelWidth: 512,
  });
  xrSession.updateRenderState({
    layers: [cubeLayer],
  });
}

规范

规范
WebXR 图层 API 级别 1
# dom-xrwebglbinding-createcubelayer

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅