XRWebGLLayer

构造函数

XRWebGLLayer() 实验性

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

实例属性

antialias 只读 实验性

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

fixedFoveation 实验性

一个数字，表示 XR 合成器使用的注视点渲染（foveation）的量。固定注视点渲染（FFR）以比中心更低的精度渲染眼部纹理的边缘，从而降低 GPU 负载。

framebuffer 只读 实验性

返回一个 WebGLFramebuffer 对象，适用于传递给 bindFrameBuffer() 方法。

framebufferWidth 只读 实验性

返回 XRWebGLLayer 帧缓冲区的宽度。

framebufferHeight 只读 实验性

返回此层帧缓冲区的高度。

ignoreDepthValues 只读 实验性

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

静态方法

getNativeFramebufferScaleFactor() 实验性

返回一个缩放因子，该因子可用于将推荐的 WebGL 帧缓冲区分辨率缩放到渲染设备的本机分辨率。

实例方法

getViewport() 实验性

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

示例

将层绑定到 WebGL 上下文

此代码片段摘自我们 WebXR 示例“运动与动作”中的绘制帧，展示了如何从 XRSession 对象的渲染状态中获取 XRWebGLLayer，然后通过调用 WebGL 的 bindFrameBuffer() 函数将其绑定为当前渲染的 WebGL 帧缓冲区。

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

渲染帧中的每个视图

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

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

let pose = xrFrame.getViewerPose(xrReferenceSpace);

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

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

    /* Render the view */
  }
}

规范

浏览器兼容性

另见

• WebXR Device API
• WebGL 入门
• WebGLRenderingContext 和 WebGL2RenderingContext
• 我们 WebXR 示例“运动与动作”中的绘制帧