XRRigidTransform.matrix

let matrix = xrRigidTransform.matrix;

position プロパティと orientation プロパティで記述される 4x4 変換行列を表す 16 個のエントリーを含む Float32Array (en-US)。

WebGL で使用されるすべての 4x4 変換行列は、16 要素の Float32Array (en-US) に格納されます。 値は、列優先の順序で配列に格納されます。 つまり、各列は上から下に向かって配列に書き込まれ、その後、1 つ右側の列に移動して、次の列が配列に書き込まれます。 したがって、配列 [a0, a1, a2, ..., a13, a14, 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 の単位行列を書き込むことから始まります。

$$\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 メンバーの値です。

$$\begin{bmatrix} 1 & 0 & 0 & x\ 0 & 1 & 0 & y\ 0 & 0 & 1 & z\ 0 & 0 & 0 & 1 \end{bmatrix}$$

次に、orientation で指定された単位クォータニオンから列ベクトル回転行列を計算することにより、回転行列を作成します。

$$\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 が返す最終的な変換行列を生成します。

$$\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 を使用して、指定された名前に一致するオブジェクトを指定された位置と向きに配置するために指定された変換行列を使用してレンダリングするライブラリー関数に渡します。

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);