XRViewerPose

可用性有限

此特性不是基线特性，因为它在一些最广泛使用的浏览器中不起作用。

安全上下文： 此功能仅在安全上下文（HTTPS）中可用，且支持此功能的浏览器数量有限。

WebXR 设备 API 接口 XRViewerPose 表示查看器在场景中的视点（位置和方向）。每个 XRViewerPose 可以有多个视图，例如，用于表示左右眼之间的轻微分离。

此视图可以表示从用户的 XR 头戴式显示器的视点，到在屏幕上呈现的、使用鼠标和键盘代表的玩家头像移动的视点，再到一个捕捉场景供旁观者观看的虚拟摄像机。

实例属性

除了继承自 XRPose 的属性外，XRViewerPose 还包含以下内容：

views 只读: 一个 XRView 对象数组，每个对象代表一个视点，用于向用户呈现场景。一个典型的头戴式显示器会提供一个查看器姿势，其中包含两个视图，它们的 eye 属性为 left 或 right，表示该视图代表的是哪只眼睛。合在一起，这些视图可以在 XR 设备上显示时重现 3D 效果。

XRViewerPose 对象用于描述 WebXR 场景中查看器的状态，该状态由用户的 XR 硬件跟踪。查看器可以是用户在虚拟世界中的表示，也可以代表另一个设备或接口，该设备或接口可以作为构成场景视图的位置和方向的来源。例如，MMORPG 中的每个玩家可能都有一个 XRViewerPose 实例，用于计算他们可以看到的内容；如果游戏提供了一种机制来告知玩家另一个玩家是否看到他们，或者他们是否看到另一个玩家，则此信息变得至关重要。

XRViewerPose 始终是相对于现有的 XRReferenceSpace 获取和引用的。这确保了位置和方向会使用预期的相对坐标系统进行报告。

要使用代表用户头部姿势的 XRViewerPose 来渲染场景，可以遍历 views 数组中的视图，依次进行渲染。通过在 WebGL 上下文上调用 viewport()，并将 XRView 作为输入，您可以获取用于渲染的视口，以便将该眼睛的帧绘制到绘图表面的正确部分。

此外，在为旁观者或多人游戏中的其他玩家渲染场景时，XRViewerPose 的 transform 可用于确定其他玩家在游戏中的位置和朝向，以便他们可以以正确的姿势正确地绘制出来。

可以通过调用帧的 getViewerPose() 方法来获取由 XRFrame 表示的动画帧的查看器姿势，并指定原点位置应在哪种参考空间中计算。返回的 XRViewerPose 会告知您在帧发生时查看器的位置以及他们的朝向。

示例

在此示例中——这是渲染 XRFrame 的部分代码，调用了 getViewerPose() 以使用代码作为其基础参考空间的相同参考空间获取 XRViewerPose。如果返回了有效的姿势，则通过清除后缓冲区并渲染姿势中的每个视图来渲染帧；这些很可能是左右眼视图。

const pose = frame.getViewerPose(xrReferenceSpace);

if (pose) {
  const glLayer = xrSession.renderState.baseLayer;

  gl.bindFrameBuffer(gl.FRAMEBUFFER, glLayer.framebuffer);
  gl.clearColor(0, 0, 0, 1);
  gl.clearDepth(1);
  gl.clear(gl.COLOR_BUFFER_BIT, gl.DEPTH_BUFFER_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 for the eye view.eye */
  }
}

将每个 view 传递给 getViewport() 会返回 WebGL 视口，通过应用该视口可以使渲染的输出在帧缓冲区中正确放置，以便在输出设备上为相应的眼睛进行渲染。

此代码源自我们 WebXR 示例“运动与动作”中的绘制帧。您可以在该页面上看到更多上下文和更多内容。