XRRigidTransform: matrix 属性

安全上下文：此功能仅在安全上下文（HTTPS）中可用，在部分或全部支持浏览器中可用。

只读 XRRigidTransform 属性 matrix 返回对象表示的变换矩阵。 然后可以使用返回的矩阵预乘列向量，以按 orientation 指定的 3D 旋转旋转向量，然后按 position 平移它。

值

包含 16 个条目的 Float32Array，它表示由 position 和 orientation 属性描述的 4x4 变换矩阵。

使用说明

矩阵格式

WebGL 中使用的所有 4x4 变换矩阵都存储在 16 元素 Float32Array 中。 值以列优先顺序存储在数组中； 也就是说，在移到右边的下一列并将其写入数组之前，每列都从上到下写入数组。 因此，对于数组 [a0, a1, a2, …, a13, a14, a15]，矩阵如下所示

[ a0 a4 a8 a12 a1 a5 a9 a13 a2 a6 a10 a14 a3 a7 a11 a15 ] \begin{bmatrix} a[0] & a[4] & a[8] & a[12]\\ a[1] & a[5] & a[9] & a[13]\\ a[2] & a[6] & a[10] & a[14]\\ a[3] & a[7] & a[11] & a[15]\\ \end{bmatrix}

在首次请求时，matrix 将被计算。 之后，出于性能原因，它应该被缓存。

创建矩阵

在本节中，针对更高级的读者，我们将介绍 API 如何计算指定变换的矩阵。 它首先分配一个新矩阵，并将 4x4 单位矩阵写入其中

[ 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 ] \begin{bmatrix} 1 & 0 & 0 & 0\\ 0 & 1 & 0 & 0\\ 0 & 0 & 1 & 0\\ 0 & 0 & 0 & 1 \end{bmatrix}

这是一个不会改变任何应用于其的点、向量或对象的方位或位置的变换。

接下来，position 被放置到右手列中，如下所示，从而得到一个平移矩阵，该矩阵将坐标系在每个维度上变换指定距离，而不会发生旋转变化。 这里，px、py 和 pz 是 DOMPointReadOnly position 的 x、y 和 z 成员的值。

[ 1 0 0 p x 0 1 0 p y 0 0 1 p z 0 0 0 1 ] \begin{bmatrix} 1 & 0 & 0 & x\\ 0 & 1 & 0 & y\\ 0 & 0 & 1 & z\\ 0 & 0 & 0 & 1 \end{bmatrix}

然后通过从 orientation 指定的单位四元数计算列向量旋转矩阵来创建一个旋转矩阵

[ 1 - 2 ( q y 2 + q z 2 ) 2 ( q x q y - q z q w ) 2 ( q x q z + q y q w ) 0 2 ( q x q y + q z q w ) 1 - 2 ( q x 2 + q z 2 ) 2 ( q y q z - q x q w ) 0 2 ( q x q z - q y q w ) 2 ( q y q z + q x q w ) 1 - 2 ( q x 2 + q y 2 ) 0 0 0 0 1 ] \begin{bmatrix} 1 - 2(q_y^2 + q_z^2) & 2(q_xq_y - q_zq_w) & 2(q_xq_z + q_yq_w) & p_x\\ 2(q_xq_y + q_zq_w) & 1 - 2(q_x^2 + q_z^2) & 2(q_yq_z - q_xq_w) & p_y\\ 2(q_xq_z - q_yq_w) & 2(q_yq_z + q_xq_w) & 1 - 2(q_x^2 + q_y^2) & p_z\\ 0 & 0 & 0 & 1 \end{bmatrix}

最终变换 matrix 是通过按 (translation * rotation) 的顺序将平移矩阵乘以旋转矩阵来计算的。 这将得到 matrix 返回的最终变换矩阵

[ 1 - 2 ( q y 2 + q z 2 ) 2 ( q x q y - q z q w ) 2 ( q x q z + q y q w ) p x 2 ( q x q y + q z q w ) 1 - 2 ( q x 2 + q z 2 ) 2 ( q y q z - q x q w ) p y 2 ( q x q z - q y q w ) 2 ( q y q z + q x q w ) 1 - 2 ( q x 2 + q y 2 ) p z 0 0 0 1 ] \begin{bmatrix} 1 - 2(q_y^2 + q_z^2) & 2(q_xq_y - q_zq_w) & 2(q_xq_z + q_yq_w) & p_x\\ 2(q_xq_y + q_zq_w) & 1 - 2(q_x^2 + q_z^2) & 2(q_yq_z - q_xq_w) & p_y\\ 2(q_xq_z - q_yq_w) & 2(q_yq_z + q_xq_w) & 1 - 2(q_x^2 + q_y^2) & p_z\\ 0 & 0 & 0 & 1 \end{bmatrix}

示例

在此示例中，将创建一个变换来创建一个矩阵，该矩阵可以在 WebGL 对象的渲染过程中用作变换，以放置对象以匹配给定的偏移量和方位。 然后将 matrix 传递到一个库函数中，该函数使用 WebGL 渲染与给定名称匹配的对象，并使用指定的变换矩阵来定位和调整其方向。

js
let transform = new XRRigidTransform(
  { x: 0, y: 0.5, z: 0.5 },
  { x: 0, y: -0.5, z: -0.5, w: 1 },
);
drawGLObject("magic-lamp", transform.matrix);

规范

规范
WebXR 设备 API
# dom-xrrigidtransform-matrix

浏览器兼容性

BCD 表格仅在浏览器中加载