XRView: transform 属性

值

一个 XRRigidTransform 对象，指定了 XRView 所表示的视点的位置和方向。

示例

对于构成呈现场景的每个视图，该视图的 transform 表示查看器或相机相对于参考空间原点的位置和方向。然后，您可以利用此矩阵的逆变换来变换场景中的对象，调整其位置和方向，以模拟查看器在空间中的移动。

在此示例中，我们看到了在渲染 XRFrame 时使用的代码片段的轮廓，该代码片段利用视图变换在渲染期间将对象放置在世界中。

const modelViewMatrix = mat4.create();
const normalMatrix = mat4.create();

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

  for (const obj of world.objects) {
    mat4.multiply(modelViewMatrix, view.transform.inverse.matrix, obj.matrix);
    mat4.invert(normalMatrix, modelViewMatrix);
    mat4.transpose(normalMatrix, normalMatrix);

    obj.render(modelViewMatrix, normalMatrix);
  }
}

两个矩阵在渲染循环外部创建；这避免了重复分配和释放矩阵，并通过重用每个渲染对象的相同矩阵来通常减少开销。

然后，我们遍历 XRViewerPose 的 views 列表中的每个 XRView。通常会有两个：一个用于左眼，一个用于右眼，但如果处于单眼模式，可能只有一个。目前，WebXR 不支持每个姿势超过两个视图，尽管为将来通过添加 API 的方式扩展该规范以支持这一点留下了空间。

对于每个视图，我们获取其视口，然后使用 gl.viewport() 将其传递给 WebGL。对于左眼，这将是画布的左半部分，而右眼将使用右半部分。

然后，我们遍历构成场景的每个对象。每个对象的模型视图矩阵是通过将其自身描述对象自身位置和方向的矩阵乘以匹配相机移动所需的附加位置和方向调整来计算的。为了将“以相机为中心”的变换矩阵转换为“以对象为中心”的变换，我们使用变换的逆，从而获取 view.transform.inverse.matrix 返回的矩阵。生成的模型视图矩阵将应用所有必要的变换，以根据对象和相机的相对位置来移动和旋转对象。这将模拟相机的移动，即使我们实际上是在移动对象。

然后，我们通过求模型视图矩阵的逆再转置来计算模型的法线。

最后，我们调用对象的 render() 例程，将 modelViewMatrix 和 normalMatrix 传递过去，以便渲染器能够正确放置和照亮对象。

规范

浏览器兼容性