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 傳遞過去，以便渲染器能夠正確放置和照亮物件。

規範

瀏覽器相容性