XRWebGLLayer - 提供了 WebXR 设备与用于渲染场景以在设备上显示的 WebGL 上下文之间的链接

XRWebGLLayer 是 WebXR 设备 API 的接口，提供了 WebXR 设备（或内联会话的情况下为模拟 XR 设备）与用于渲染场景以在设备上显示的 WebGL 上下文之间的链接。特别是，它提供对 WebGL 帧缓冲区和视口的访问，以简化对上下文的访问。

尽管 XRWebGLLayer 目前是 WebGL 支持的唯一帧缓冲层类型，但将来对 WebXR 规范的更新完全有可能允许其他层类型和相应的图像源。

构造函数

new XRWebGLLayer()

使用特定的 WebGLRenderingContext 或 WebGL2RenderingContext 作为目标上下文，创建并返回一个供指定 XRSession 使用的新 XRWebGLLayer 对象。

属性

antialias 只读

一个布尔值，指示 WebGL 上下文的帧缓冲区是否支持抗锯齿。抗锯齿的具体类型由用户代理决定。

framebuffer 只读

返回适合传递给 bindFrameBuffer() 方法的 WebGLFramebuffer。

framebufferWidth 只读

返回 XRWebGLLayer 的帧缓冲区的宽度。

framebufferHeight 只读

返回 XRWebGLLayer 的帧缓冲区的高度。

ignoreDepthValues 只读

一个布尔值，指示 WebXR 合成器在合成场景时是否应使用图层深度缓冲区的内容。

方法

getViewport()

返回一个新的 XRViewport 实例，表示 WebGL 上下文的视口必须设置为包含指定视图内容的帧缓冲区区域的绘图的位置、宽度和高度。以这种方式，例如，将左眼的视点和右眼的视点的渲染分别放置在帧缓冲区的正确部分中。

静态方法

getNativeFramebufferScaleFactor()

返回可用于将建议的 WebGL 帧缓冲区分辨率的分辨率缩放到呈现设备的本机分辨率的缩放因子。

实例

将图层绑定到 WebGL 上下文

此代码段展示了如何从 XRSession 对象的呈现状态获取 XRWebGLLayer，然后通过调用 WebGL bindFrameBuffer() 函数将其绑定为当前呈现的 WebGL 帧缓冲区。

let glLayer = xrSession.renderState.baseLayer;
gl.bindFrameBuffer(gl.FRAMEBUFFER, glLayer.framebuffer);

渲染框架中的每个视图

每次 GPU 准备将场景渲染到 XR 设备时，XR 运行时都会调用您在调用 XRSession 的 requestAnimationFrame() 方法时要求指定的函数来渲染帧。

该函数接收 XRFrame 作为输入，该 XRFrame 封装了渲染帧所需的数据。此信息包括描述场景中查看者的位置和朝向的姿势（XRViewerPose 对象），以及一系列 XRView 对象，每个对象代表场景中的一个透视图。在当前的 WebXR 实现中，此列表中的条目永远不会超过两个：一个描述左眼的位置和视角，另一个描述右眼的位置和视角。

let pose = xrFrame.getViewerPose(xrReferenceSpace);

if (pose) {
  let glLayer = xrSession.renderState.baseLayer;
  gl.bindFrameBuffer(gl.FRAMEBUFFER, glLayer.Framebffer);

  for (let view of pose.views) {
    let viewport = glLayer.getViewport(view);
    gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height);

    /* 渲染视图 */
  }
}

规范

规范	状态	备注
WebXR Device API XRWebGLLayer 的定义	工作草案	初始定义。

桌面浏览器兼容性

移动浏览器兼容性

相关链接

• WebXR 设备 API
• WebGL 入门
• WebGLRenderingContext 和 WebGL2RenderingContext