XRViewport - 提供了用于描述 XRWebGLLayer 中用于渲染 3D 场景的当前视口的大小和位置的属性

XRViewport 是 WebXR 设备 API 的接口，提供了用于描述 XRWebGLLayer 中用于渲染 3D 场景的当前视口的大小和位置的属性。

属性

height 只读

视口的高度（以像素为单位）。

width 只读

视口的宽度（以像素为单位）。

x 只读

从目标图形表面的原点（通常是 XRWebGLLayer）到视口左边缘的偏移量（以像素为单位）。

y 只读

从视口原点到视口底部边缘的偏移量；WebGL 的坐标系将 (0, 0) 放置在曲面的左下角。

使用注意

当前，唯一可用的表面类型是 XRWebGLLayer。坐标系的精确方向可能会随其他曲面类型而变化，但是在 WebGL 中，原点 (0, 0) 位于曲面的左下角。因此，在 XRViewport 中指定的值定义了一个矩形，该矩形的左下角为 (x, y)，并且向左扩展了 width 像素，向上方扩展了 height 像素。

这些值可以直接传递到 WebGLRenderingContext.viewport() 方法中：

let xrViewport = xrWebGLLayer.getViewport(xrView);
gl.viewport(xrViewport.x, xrViewport.y, xrViewport.width, xrViewport.height);

实例

本实例使用 requestAnimationFrame() 设置动画帧回调。初始设置后，它将在查看者的姿势内迭代每个视图，并按照 XRWebGLLayer 的指示配置视口。

xrSession.requestAnimationFrame((time, xrFrame) => {
  let viewerPose = xrFrame.getViewerPose(xrReferenceSpace);

  gl.bindFramebuffer(xrWebGLLayer.framebuffer);

  for (xrView of viewerPose.views) {
    let xrViewport = xrWebGLLayer.getViewport(xrView);
    gl.viewport(xrViewport.x, xrViewport.y, xrViewport.width, xrViewport.height);

   // 现在，我们可以使用 WebGL 绘制符合观看者需求的视口
  }
});

规范

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

桌面浏览器兼容性

移动浏览器兼容性