XRWebGLLayer: getViewport() 方法

实验性: 这是一个实验性技术
在生产环境中使用此功能之前，请仔细查看浏览器兼容性表。

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

The XRWebGLLayer 接口的 getViewport() 方法返回 XRViewport，该方法应用于将指定的 XRView 渲染到 WebGL 层。对于使用单个帧缓冲区来渲染左右眼的 WebXR 设备，返回的视口表示帧缓冲区中应为表示视口的眼睛渲染场景的区域。

语法

getViewport(view)

参数

view: 一个 XRView 对象，指示要返回视口的视口。

返回值

一个 XRViewport 对象，表示将限制绘制到与指定的 view 对应的层部分的视口。

异常

InvalidStateError DOMException: 如果指定的 view 不在活动的 XRFrame 中，或者 XRFrame 和 XRWebGLLayer 不属于同一个 WebXR 会话，则会抛出此异常。

示例

此示例部分演示了 requestAnimationFrame() 函数的回调可能是什么样子，使用 getViewport() 获取视口，以便可以将绘制限制为为当前正在渲染的视点的眼睛分配的区域。

这是因为 XRViewerPose 返回的视口集分别表示场景中每只眼睛的透视。由于帧缓冲区被分成两半，一半用于每只眼睛，因此将 WebGL 视口设置为与 WebXR 层的视口匹配将确保在为当前眼睛的姿势渲染场景时，它被渲染到帧缓冲区的正确一半。

<<<--- 添加指向相机和视点文章中适当部分的链接 --->>>

function drawFrame(time, frame) {
  const session = frame.session;

  const pose = frame.getViewerPose(mainReferenceSpace);

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

    gl.clearColor(0, 0, 0, 1.0);
    gl.clearDepth(1.0);
    gl.clear(gl.COLOR_BUFFER_BIT, gl.DEPTH_COLOR_BIT);

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

      /* Render the scene now */
    }
  }
}

规范

规范
WebXR 设备 API # dom-xrwebgllayer-getviewport

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅

WebXR 设备 API