XRWebGLLayer: getNativeFramebufferScaleFactor() 静态方法

session

要返回其本机帧缓冲区缩放因子的 XRSession。

一个浮点值，当它乘以 XRSession 的推荐帧缓冲区尺寸时，会得到 XR 设备的本机帧缓冲区分辨率。如果会话已结束，则此函数返回 0.0。

如果 XR 设备的本机分辨率和 XR 设备的分辨率匹配，则此函数返回的缩放因子将为 1.0。在任何情况下，将 XRSession 识别的推荐分辨率乘以此值都会得到 XR 硬件的实际本机分辨率。

推荐的 WebGL 帧缓冲区分辨率是包含设备所需的所有 XRView 的分辨率的最佳估计值，同时为典型应用程序提供图像质量和性能之间的可接受平衡。

例如，考虑一个使用 2560x1440 像素帧缓冲区的设备（用于渲染两个视图，分别对应于左右眼睛，并在 1280x1440 像素的分辨率下并排放置）。考虑一个全尺寸的帧缓冲区，如下所示

如果在此设备上，确定由于 GPU 限制，浏览器需要降低图像质量才能将性能提高到可接受的水平，那么它可能会选择将分辨率降低一半。在这种情况下，XRWebGLLayer.getNativeFramebufferScaleFactor() 返回的值将为 2.0。此方法将帧缓冲区在视图之间分割，如下图所示。

现在帧缓冲区的宽度和高度是之前的一半，导致总帧缓冲区大小为 1280x720 像素，每个眼睛的缓冲区一半为 640x720 像素。现在我们可以看到表示这两个视图的每个视口的坐标

由于每只眼睛获得帧缓冲区的一半，因此结果是左眼获得 640x720 部分的缓冲区，视口的 x 和 y 设置为 0，宽度设置为 640，高度设置为 720。右眼获得帧缓冲区的另一半，其视口的 x 设置为 639。

在 为该场景渲染帧 时，我们获取视图的视口并将其应用于 WebGL，然后渲染场景。这确保我们渲染的场景不仅匹配我们需要表达的视点（由姿态中的位置和方向数据定义），而且渲染的输出将被限制在为我们绘制的眼睛的帧缓冲区的正确部分内，无论执行任何缩放。

在此示例中，我们请求以设备的本机分辨率进行帧缓冲区，而不考虑任何性能问题

function requestNativeScaleWebGLLayer(gl, xrSession) {
  return gl.makeXRCompatible().then(() => {
    let scaleFactor = XRWebGLLayer.getNativeFramebufferScaleFactor(xrSession);
    let glLayer = new XRWebGLLayer(xrSession, gl, {
      framebufferScaleFactor: scaleFactor,
    });
    xrSession.updateRenderState({ baseLayer: glLayer });
  });
}

这首先调用 WebGL 渲染上下文 函数 makeXRCompatible()。当返回的 promise 解析时，我们继续调用 XRWebGLLayer 的 getNativeFramebufferScaleFactor() 静态函数以获取达到原生分辨率所需的比例因子，然后将其传递给 WebGLLayer() 构造函数，作为其 layerInit 配置对象中 framebufferScaleFactor 属性的值。

这为我们提供了一个新的 XRWebGLLayer 对象，它表示一个渲染表面，我们可以用于 XRSession; 我们通过调用其 updateRenderState() 方法将其设置为 xrSession 的渲染表面，使用 XRRenderState 字典的 XRRenderState.baseLayer 属性传递新的 glLayer。结果是一个渲染上下文，看起来像下面的图

每次对 XRViewerPose 的 views 进行渲染循环迭代时，渲染循环都会获取一个 XRView，用于左眼，其左上角位于 (0, 0)，宽度和高度分别为 1280x1440 像素。它获取的右眼其左上角位于 1280, 0，具有相同的宽度和高度：1280x1440。

• WebXR 设备 API
• WebXR 性能指南