XRViewport

安全上下文：此功能仅在安全上下文（HTTPS）中可用，在某些或所有支持的浏览器中。

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

实例属性

height 只读: 视口的高度（以像素为单位）。
width 只读: 视口的宽度（以像素为单位）。
x 只读: 从目标图形表面（通常为XRWebGLLayer）的原点到视口左边缘的偏移量（以像素为单位）。
y 只读: 从视口的原点到视口底边缘的偏移量；WebGL 的坐标系将 (0, 0) 放在表面的左下角。

使用说明

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

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

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

示例

此示例使用requestAnimationFrame()设置动画帧回调。在初始设置后，它会迭代查看器姿势中的每个视图，并根据XRWebGLLayer配置视口。

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

  gl.bindFramebuffer(xrWebGLLayer.framebuffer);

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

    // Now we can use WebGL to draw into a viewport matching
    // the viewer's needs
  }
});

规范

规范
WebXR 设备 API # xrviewport-interface

浏览器兼容性

BCD 表格仅在浏览器中加载