dump 2020-12-10

6 files changed, 541 insertions, 0 deletions

diff --git a/files/ja/web/api/xrrigidtransform/index.html b/files/ja/web/api/xrrigidtransform/index.html
new file mode 100644
index 0000000000..6558e44e64
--- /dev/null
+++ b/files/ja/web/api/xrrigidtransform/index.html
@@ -0,0 +1,98 @@
+---
+title: XRRigidTransform
+slug: Web/API/XRRigidTransform
+tags:
+  - API
+  - AR
+  - Interface
+  - Reality
+  - Reference
+  - Reference Space
+  - VR
+  - Virtual
+  - WebXR
+  - WebXR API
+  - WebXR Device API
+  - XR
+  - XRReferenceSpace
+  - XRRigidTransform
+  - augmented
+  - space
+  - transform
+translation_of: Web/API/XRRigidTransform
+---
+<p>{{APIRef("WebXR Device API")}}</p>
+
+<p><span class="seoSummary"><strong><code>XRRigidTransform</code></strong> は、位置と向きによって記述される 3D 幾何学的変換を表す <a href="/ja/docs/Web/API/WebXR_API">WebXR API</a> のインターフェイスです。</span></p>
+
+<p><code>XRRigidTransform</code> は、以下を含む WebXR API 全体で変換を指定するために使用されます。</p>
+
+<ul>
+ <li>{{domxref("XRReferenceSpace.getOffsetReferenceSpace", "getOffsetReferenceSpace()")}} を使用して新しい参照空間を作成するときに使用する、親参照空間を基準にしたオフセットと向き。</li>
+ <li>{{domxref("XRView")}} の {{domxref("XRView.transform", "transform")}}。</li>
+ <li>{{domxref("XRPose")}} の {{domxref("XRPose.transform", "transform")}}。</li>
+ <li>{{domxref("XRReferenceSpace")}} が受信した {{domxref("XRReferenceSpace.reset_event", "reset")}} イベントにある {{domxref("XRReferenceSpaceEvent")}} イベントの {{domxref("XRReferenceSpaceEvent.transform", "transform")}} プロパティ。</li>
+</ul>
+
+<p>行列データを提供する裸の配列ではなく、これらの場所で <code>XRRigidTransform</code> を使用する利点は、<code>XRRigidTransform</code> が変換の逆の計算などを自動的に実行することです。 さらに良いことに、一度計算したらキャッシュされるため、後続の要求は大幅に高速化されます。</p>
+
+<h2 id="Constructor" name="Constructor">コンストラクター</h2>
+
+<dl>
+ <dt>{{domxref("XRRigidTransform.XRRigidTransform", "new XRRigidTransform()")}}</dt>
+ <dd>指定された位置や向きを適用する変換を表す新しい <code>XRRigidTransform</code> オブジェクトを作成します。</dd>
+</dl>
+
+<h2 id="Properties" name="Properties">プロパティ</h2>
+
+<dl>
+ <dt>{{DOMxRef("XRRigidTransform.position")}} {{readonlyInline}} {{experimental_inline}}</dt>
+ <dd>変換の平行移動成分を記述する、メートルで表される3次元の点を指定する {{DOMxRef("DOMPointReadOnly")}}。 {{DOMxRef("DOMPointReadonly.w", "w")}} プロパティは常に <code>1.0</code> です。</dd>
+ <dt>{{DOMxRef("XRRigidTransform.orientation")}} {{readonlyInline}} {{experimental_inline}}</dt>
+ <dd>変換の回転成分を記述する単位クォータニオンを含む {{DOMxRef("DOMPointReadOnly")}}。 単位クォータニオンとして、その長さは常に <code>1.0</code> に正規化されます。</dd>
+ <dt>{{DOMxRef("XRRigidTransform.matrix")}} {{readonlyInline}} {{experimental_inline}}</dt>
+ <dd>16 メンバーの {{DOMxRef("Float32Array")}} の形式で変換行列を返します。 配列を使用して行列を表す方法については、<a href="/ja/docs/Web/API/XRRigidTransform/matrix#Matrix_format">行列のフォーマット</a>のセクションを参照してください。</dd>
+</dl>
+
+<dl>
+ <dt>{{DOMxRef("XRRigidTransform.inverse")}} {{readonlyInline}} {{experimental_inline}}</dt>
+ <dd>この変換の逆である <code>XRRigidTransform</code> を返します。 つまり、元の変換によって以前に変換されたオブジェクトに適用された場合、変換が元に戻され、元のオブジェクトが返されます。</dd>
+</dl>
+
+<h2 id="Usage_notes" name="Usage_notes">使用上の注意</h2>
+
+<p><code>XRRigidTransform</code> が解釈されると、位置が適用される前に、影響を受けるオブジェクトに常に向きが適用されます。</p>
+
+<h2 id="Example" name="Example">例</h2>
+
+<p>このコードスニペットは、<code>XRRigidTransform</code> を作成して、新しい参照空間を作成するときに使用する現在の参照空間に対するオフセットと向きを指定します。 次に、セッションの {{domxref("XRSession.requestAnimationFrame", "requestAnimationFrame()")}} メソッドを呼び出して、最初のアニメーションフレームコールバックを要求します。</p>
+
+<pre class="brush: js notranslate">xrSession.requestReferenceSpace(refSpaceType)
+.then((refSpace) =&gt; {
+  xrReferenceSpace = refSpace;
+  xrReferenceSpace = xrReferenceSpace.getOffsetReferenceSpace(
+        new XRRigidTransform(viewerStartPosition, cubeOrientation));
+  animationFrameRequestID = xrSession.requestAnimationFrame(drawFrame);</pre>
+
+<h2 id="Specifications" name="Specifications">仕様</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">仕様</th>
+   <th scope="col">状態</th>
+   <th scope="col">コメント</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("WebXR","#xrrigidtransform-interface","XRRigidTransform")}}</td>
+   <td>{{Spec2("WebXR")}}</td>
+   <td>初期定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<div>{{Compat("api.XRRigidTransform")}}</div>
diff --git a/files/ja/web/api/xrrigidtransform/inverse/index.html b/files/ja/web/api/xrrigidtransform/inverse/index.html
new file mode 100644
index 0000000000..164428f197
--- /dev/null
+++ b/files/ja/web/api/xrrigidtransform/inverse/index.html
@@ -0,0 +1,80 @@
+---
+title: XRRigidTransform.inverse
+slug: Web/API/XRRigidTransform/inverse
+tags:
+  - API
+  - AR
+  - Property
+  - Read-only
+  - Reality
+  - Reference
+  - VR
+  - Virtual
+  - WebXR
+  - WebXR API
+  - WebXR Device API
+  - XR
+  - XRRigidTransform
+  - augmented
+  - inverse
+  - transform
+translation_of: Web/API/XRRigidTransform/inverse
+---
+<p>{{APIRef("WebXR Device API")}}</p>
+
+<p><span class="seoSummary">{{domxref("XRRigidTransform")}} インターフェイスの <code><strong>inverse</strong></code> 読み取り専用プロパティは、それ自体の変換の逆である別の {{domxref("XRRigidTransform")}} オブジェクトを返します。</span> つまり、逆を明示的に生成する代わりに、<code>inverse</code> プロパティを使用して、<code>XRRigidTransform</code> の逆をいつでも取得できます。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate">let <em>transformInverse</em> = <em>xrRigidTransform</em>.inverse;</pre>
+
+<h3 id="Value" name="Value">値</h3>
+
+<p>アクセスした <code>XRRigidTransform</code> の逆を含む {{domxref("XRRigidTransform")}}。</p>
+
+<p>親 <code>XRRigidTransform</code> によって以前に変換されたオブジェクトに変換の逆を適用すると、常に変換が元に戻され、結果としてオブジェクトは前のポーズに戻ります。 つまり、その位置と向きの両方が以前の構成に戻ります。</p>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>この例では、オブジェクトのモデルビュー行列は、ビュー行列を取得し、それをオブジェクトのポーズ行列で乗算することによって計算されます。</p>
+
+<pre class="brush: js notranslate">let modelViewMatrix = mat4.create();
+
+for (let view of pose.view) {
+  let viewport = glLayer.getViewport(view);
+  gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height);
+
+  /* ... */
+
+  mat4.multiply(modelViewMatrix, view.transform.inverse.matrix, objectMatrix);
+  gl.uniformMatrix4fv(programInfo.uniformLocations.modelViewMatrix,
+                      false, modelViewMatrix);
+
+  /* ... */
+}
+</pre>
+
+<p>このレンダラーのコアコードのあらましは、ビューアーの位置と向きに基づいてオブジェクトを変換するために使用するモデルビュー行列として、その変換の逆の行列をを取ることによって、ポーズのビューがどのように表されるかを示しています。 逆の行列にオブジェクトの行列を掛けてモデルビュー行列を取得し、その情報を含むようにユニフォームを設定することで、シェーダープログラムに渡します。</p>
+
+<h2 id="Specifications" name="Specifications">仕様</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">仕様</th>
+   <th scope="col">状態</th>
+   <th scope="col">コメント</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("WebXR","#dom-xrrigidtransform-inverse","XRRigidTransform.inverse")}}</td>
+   <td>{{Spec2("WebXR")}}</td>
+   <td>初期定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<div>{{Compat("api.XRRigidTransform.inverse")}}</div>
diff --git a/files/ja/web/api/xrrigidtransform/matrix/index.html b/files/ja/web/api/xrrigidtransform/matrix/index.html
new file mode 100644
index 0000000000..9f4e81806f
--- /dev/null
+++ b/files/ja/web/api/xrrigidtransform/matrix/index.html
@@ -0,0 +1,96 @@
+---
+title: XRRigidTransform.matrix
+slug: Web/API/XRRigidTransform/matrix
+tags:
+  - API
+  - AR
+  - Property
+  - Read-only
+  - Reality
+  - Reference
+  - VR
+  - Virtual
+  - WebXR
+  - WebXR API
+  - WebXR Device API
+  - XR
+  - XRRigidTransform
+  - augmented
+  - matrix
+  - transform
+translation_of: Web/API/XRRigidTransform/matrix
+---
+<p>{{APIRef("WebXR Device API")}}</p>
+
+<p>{{domxref("XRRigidTransform")}} の <strong><code>matrix</code></strong> 読み取り専用プロパティは、オブジェクトによって表される変換行列を返します。 そして、返された行列に列ベクトルを前乗算して、{{domxref("XRRigidTransform.orientation", "orientation")}} で指定された 3D 回転でベクトルを回転させ、{{domxref("XRRigidTransform.position", "position")}} で平行移動させることができます。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate">let <em>matrix</em> = <em>xrRigidTransform</em>.matrix;</pre>
+
+<h3 id="Value" name="Value">値</h3>
+
+<p>{{domxref("XRRigidTransform.position", "position")}} プロパティと {{domxref("XRRigidTransform.orientation", "orientation")}} プロパティで記述される 4x4 変換行列を表す 16 個のエントリーを含む {{domxref("Float32Array")}}。</p>
+
+<h2 id="Usage_notes" name="Usage_notes">使用上の注意</h2>
+
+<h3 id="Matrix_format" name="Matrix_format">行列のフォーマット</h3>
+
+<p>WebGL で使用されるすべての 4x4 変換行列は、16 要素の {{domxref("Float32Array")}} に格納されます。 値は、列優先の順序で配列に格納されます。 つまり、各列は上から下に向かって配列に書き込まれ、その後、1つ右側の列に移動して、次の列が配列に書き込まれます。 したがって、配列 [a0, a1, a2, ..., a13, a14, a15] の場合、行列は次のようになります。</p>
+
+<p><math display="block"><semantics><mrow><mo>[</mo><mtable rowspacing="0.5ex"><mtr><mtd><mi>a</mi><mo stretchy="false">[</mo><mn>0</mn><mo stretchy="false">]</mo></mtd><mtd><mi>a</mi><mo stretchy="false">[</mo><mn>4</mn><mo stretchy="false">]</mo></mtd><mtd><mi>a</mi><mo stretchy="false">[</mo><mn>8</mn><mo stretchy="false">]</mo></mtd><mtd><mi>a</mi><mo stretchy="false">[</mo><mn>12</mn><mo stretchy="false">]</mo></mtd></mtr><mtr><mtd><mi>a</mi><mo stretchy="false">[</mo><mn>1</mn><mo stretchy="false">]</mo></mtd><mtd><mi>a</mi><mo stretchy="false">[</mo><mn>5</mn><mo stretchy="false">]</mo></mtd><mtd><mi>a</mi><mo stretchy="false">[</mo><mn>9</mn><mo stretchy="false">]</mo></mtd><mtd><mi>a</mi><mo stretchy="false">[</mo><mn>13</mn><mo stretchy="false">]</mo></mtd></mtr><mtr><mtd><mi>a</mi><mo stretchy="false">[</mo><mn>2</mn><mo stretchy="false">]</mo></mtd><mtd><mi>a</mi><mo stretchy="false">[</mo><mn>6</mn><mo stretchy="false">]</mo></mtd><mtd><mi>a</mi><mo stretchy="false">[</mo><mn>10</mn><mo stretchy="false">]</mo></mtd><mtd><mi>a</mi><mo stretchy="false">[</mo><mn>14</mn><mo stretchy="false">]</mo></mtd></mtr><mtr><mtd><mi>a</mi><mo stretchy="false">[</mo><mn>3</mn><mo stretchy="false">]</mo></mtd><mtd><mi>a</mi><mo stretchy="false">[</mo><mn>7</mn><mo stretchy="false">]</mo></mtd><mtd><mi>a</mi><mo stretchy="false">[</mo><mn>11</mn><mo stretchy="false">]</mo></mtd><mtd><mi>a</mi><mo stretchy="false">[</mo><mn>15</mn><mo stretchy="false">]</mo></mtd></mtr><mtr><mtd></mtd></mtr></mtable><mo>]</mo></mrow><annotation encoding="TeX">\begin{bmatrix} a[0] &amp; a[4] &amp; a[8] &amp; a[12]\\ a[1] &amp; a[5] &amp; a[9] &amp; a[13]\\ a[2] &amp; a[6] &amp; a[10] &amp; a[14]\\ a[3] &amp; a[7] &amp; a[11] &amp; a[15]\\ \end{bmatrix}</annotation></semantics></math></p>
+
+<p><code>matrix</code> は最初に要求されたときに計算します。 その後は、必要になるたびに計算して速度が低下しないように、キャッシュされます。</p>
+
+<h3 id="Creating_the_matrix" name="Creating_the_matrix">行列の作成</h3>
+
+<p>このセクションでは、より高度な読者を対象として、API が指定された変換の行列を計算する方法について説明します。 それは、新しい行列を割り当て、それに 4x4 の単位行列を書き込むことから始まります。</p>
+
+<p><math display="block"><semantics><mrow><mo>[</mo><mtable rowspacing="0.5ex"><mtr><mtd><mn>1</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd><mtd><mn>0</mn></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>]</mo></mrow><annotation encoding="TeX">\begin{bmatrix} 1 &amp; 0 &amp; 0 &amp; 0\\ 0 &amp; 1 &amp; 0 &amp; 0\\ 0 &amp; 0 &amp; 1 &amp; 0\\ 0 &amp; 0 &amp; 0 &amp; 1 \end{bmatrix}</annotation></semantics></math></p>
+
+<p>これは、適用した点、ベクトル、またはオブジェクトの向きや位置を変更しない変換です。</p>
+
+<p>次に、このように <code>position</code> を右側の列に配置して、回転を変更せずに、各次元で指定した距離だけ座標系を変換する平行移動行列を作成します。 ここで、<code>p<sub>x</sub></code>、<code>p<sub>y</sub></code>、<code>p<sub>z</sub></code> は、{{domxref("DOMPointReadOnly")}} の <code>position</code> の <code>x</code>、<code>y</code>、<code>z</code> メンバーの値です。</p>
+
+<p><math display="block"><semantics><mrow><mo>[</mo><mtable rowspacing="0.5ex"><mtr><mtd><mn>1</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mi>p<sub>x</sub></mi></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd><mtd><mn>0</mn></mtd><mtd><mi>p<sub>y</sub></mi></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd><mtd><mi>p<sub>z</sub></mi></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>]</mo></mrow><annotation encoding="TeX">\begin{bmatrix} 1 &amp; 0 &amp; 0 &amp; x\\ 0 &amp; 1 &amp; 0 &amp; y\\ 0 &amp; 0 &amp; 1 &amp; z\\ 0 &amp; 0 &amp; 0 &amp; 1 \end{bmatrix}</annotation></semantics></math></p>
+
+<p>次に、<code>orientation</code> で指定された単位クォータニオンから列ベクトル回転行列を計算することにより、回転行列を作成します。</p>
+
+<p><math display="block"><semantics><mrow><mo>[</mo><mtable rowspacing="0.5ex"><mtr><mtd><mn>1</mn><mo>-</mo><mn>2</mn><mo stretchy="false">(</mo><msubsup><mi>q</mi><mi>y</mi><mn>2</mn></msubsup><mo>+</mo><msubsup><mi>q</mi><mi>z</mi><mn>2</mn></msubsup><mo stretchy="false">)</mo></mtd><mtd><mn>2</mn><mo stretchy="false">(</mo><msub><mi>q</mi><mi>x</mi></msub><msub><mi>q</mi><mi>y</mi></msub><mo>-</mo><msub><mi>q</mi><mi>z</mi></msub><msub><mi>q</mi><mi>w</mi></msub><mo stretchy="false">)</mo></mtd><mtd><mn>2</mn><mo stretchy="false">(</mo><msub><mi>q</mi><mi>x</mi></msub><msub><mi>q</mi><mi>z</mi></msub><mo>+</mo><msub><mi>q</mi><mi>y</mi></msub><msub><mi>q</mi><mi>w</mi></msub><mo stretchy="false">)</mo></mtd><mtd><mn>0</mn></mtd></mtr><mtr><mtd><mn>2</mn><mo stretchy="false">(</mo><msub><mi>q</mi><mi>x</mi></msub><msub><mi>q</mi><mi>y</mi></msub><mo>+</mo><msub><mi>q</mi><mi>z</mi></msub><msub><mi>q</mi><mi>w</mi></msub><mo stretchy="false">)</mo></mtd><mtd><mn>1</mn><mo>-</mo><mn>2</mn><mo stretchy="false">(</mo><msubsup><mi>q</mi><mi>x</mi><mn>2</mn></msubsup><mo>+</mo><msubsup><mi>q</mi><mi>z</mi><mn>2</mn></msubsup><mo stretchy="false">)</mo></mtd><mtd><mn>2</mn><mo stretchy="false">(</mo><msub><mi>q</mi><mi>y</mi></msub><msub><mi>q</mi><mi>z</mi></msub><mo>-</mo><msub><mi>q</mi><mi>x</mi></msub><msub><mi>q</mi><mi>w</mi></msub><mo stretchy="false">)</mo></mtd><mtd><mn>0</mn></mtd></mtr><mtr><mtd><mn>2</mn><mo stretchy="false">(</mo><msub><mi>q</mi><mi>x</mi></msub><msub><mi>q</mi><mi>z</mi></msub><mo>-</mo><msub><mi>q</mi><mi>y</mi></msub><msub><mi>q</mi><mi>w</mi></msub><mo stretchy="false">)</mo></mtd><mtd><mn>2</mn><mo stretchy="false">(</mo><msub><mi>q</mi><mi>y</mi></msub><msub><mi>q</mi><mi>z</mi></msub><mo>+</mo><msub><mi>q</mi><mi>x</mi></msub><msub><mi>q</mi><mi>w</mi></msub><mo stretchy="false">)</mo></mtd><mtd><mn>1</mn><mo>-</mo><mn>2</mn><mo stretchy="false">(</mo><msubsup><mi>q</mi><mi>x</mi><mn>2</mn></msubsup><mo>+</mo><msubsup><mi>q</mi><mi>y</mi><mn>2</mn></msubsup><mo stretchy="false">)</mo></mtd><mtd><mn>0</mn></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>]</mo></mrow><annotation encoding="TeX">\begin{bmatrix} 1 - 2(q_y^2 + q_z^2) &amp; 2(q_xq_y - q_zq_w) &amp; 2(q_xq_z + q_yq_w) &amp; p_x\\ 2(q_xq_y + q_zq_w) &amp; 1 - 2(q_x^2 + q_z^2) &amp; 2(q_yq_z - q_xq_w) &amp; p_y\\ 2(q_xq_z - q_yq_w) &amp; 2(q_yq_z + q_xq_w) &amp; 1 - 2(q_x^2 + q_y^2) &amp; p_z\\ 0 &amp; 0 &amp; 0 &amp; 1 \end{bmatrix}</annotation></semantics></math></p>
+
+<p>最終的な変換 <code>matrix</code> は、平行移動行列に回転行列を <code>(translation * rotation)</code> の順序で乗算することで計算します。 これにより、<code>matrix</code> が返す最終的な変換行列を生成します。</p>
+
+<p><math display="block"><semantics><mrow><mo>[</mo><mtable rowspacing="0.5ex"><mtr><mtd><mn>1</mn><mo>-</mo><mn>2</mn><mo stretchy="false">(</mo><msubsup><mi>q</mi><mi>y</mi><mn>2</mn></msubsup><mo>+</mo><msubsup><mi>q</mi><mi>z</mi><mn>2</mn></msubsup><mo stretchy="false">)</mo></mtd><mtd><mn>2</mn><mo stretchy="false">(</mo><msub><mi>q</mi><mi>x</mi></msub><msub><mi>q</mi><mi>y</mi></msub><mo>-</mo><msub><mi>q</mi><mi>z</mi></msub><msub><mi>q</mi><mi>w</mi></msub><mo stretchy="false">)</mo></mtd><mtd><mn>2</mn><mo stretchy="false">(</mo><msub><mi>q</mi><mi>x</mi></msub><msub><mi>q</mi><mi>z</mi></msub><mo>+</mo><msub><mi>q</mi><mi>y</mi></msub><msub><mi>q</mi><mi>w</mi></msub><mo stretchy="false">)</mo></mtd><mtd><mi>p<sub>x</sub></mi></mtd></mtr><mtr><mtd><mn>2</mn><mo stretchy="false">(</mo><msub><mi>q</mi><mi>x</mi></msub><msub><mi>q</mi><mi>y</mi></msub><mo>+</mo><msub><mi>q</mi><mi>z</mi></msub><msub><mi>q</mi><mi>w</mi></msub><mo stretchy="false">)</mo></mtd><mtd><mn>1</mn><mo>-</mo><mn>2</mn><mo stretchy="false">(</mo><msubsup><mi>q</mi><mi>x</mi><mn>2</mn></msubsup><mo>+</mo><msubsup><mi>q</mi><mi>z</mi><mn>2</mn></msubsup><mo stretchy="false">)</mo></mtd><mtd><mn>2</mn><mo stretchy="false">(</mo><msub><mi>q</mi><mi>y</mi></msub><msub><mi>q</mi><mi>z</mi></msub><mo>-</mo><msub><mi>q</mi><mi>x</mi></msub><msub><mi>q</mi><mi>w</mi></msub><mo stretchy="false">)</mo></mtd><mtd><mi>p<sub>y</sub></mi></mtd></mtr><mtr><mtd><mn>2</mn><mo stretchy="false">(</mo><msub><mi>q</mi><mi>x</mi></msub><msub><mi>q</mi><mi>z</mi></msub><mo>-</mo><msub><mi>q</mi><mi>y</mi></msub><msub><mi>q</mi><mi>w</mi></msub><mo stretchy="false">)</mo></mtd><mtd><mn>2</mn><mo stretchy="false">(</mo><msub><mi>q</mi><mi>y</mi></msub><msub><mi>q</mi><mi>z</mi></msub><mo>+</mo><msub><mi>q</mi><mi>x</mi></msub><msub><mi>q</mi><mi>w</mi></msub><mo stretchy="false">)</mo></mtd><mtd><mn>1</mn><mo>-</mo><mn>2</mn><mo stretchy="false">(</mo><msubsup><mi>q</mi><mi>x</mi><mn>2</mn></msubsup><mo>+</mo><msubsup><mi>q</mi><mi>y</mi><mn>2</mn></msubsup><mo stretchy="false">)</mo></mtd><mtd><mi>p<sub>z</sub></mi></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>]</mo></mrow><mrow></mrow><annotation encoding="TeX">\begin{bmatrix} 1 - 2(q_y^2 + q_z^2) &amp; 2(q_xq_y - q_zq_w) &amp; 2(q_xq_z + q_yq_w) &amp; p_x\\ 2(q_xq_y + q_zq_w) &amp; 1 - 2(q_x^2 + q_z^2) &amp; 2(q_yq_z - q_xq_w) &amp; p_y\\ 2(q_xq_z - q_yq_w) &amp; 2(q_yq_z + q_xq_w) &amp; 1 - 2(q_x^2 + q_y^2) &amp; p_z\\ 0 &amp; 0 &amp; 0 &amp; 1 \end{bmatrix}</annotation></semantics></math></p>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>この例では、特定のオフセットと向きに一致するようにオブジェクトを配置するために、WebGL オブジェクトのレンダリング中に変換として使用できる行列を作成するための変換が作成されます。 次に、<code>matrix</code> を、WebGL を使用して、指定された名前に一致するオブジェクトを指定された位置と向きに配置するために指定された変換行列を使用してレンダリングするライブラリー関数に渡します。</p>
+
+<pre class="brush: js notranslate">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);
+</pre>
+
+<h2 id="Specifications" name="Specifications">仕様</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">仕様</th>
+   <th scope="col">状態</th>
+   <th scope="col">コメント</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("WebXR","#dom-xrrigidtransform-matrix","XRRigidTransform.matrix")}}</td>
+   <td>{{Spec2("WebXR")}}</td>
+   <td>初期定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<div>{{Compat("api.XRRigidTransform.matrix")}}</div>
diff --git a/files/ja/web/api/xrrigidtransform/orientation/index.html b/files/ja/web/api/xrrigidtransform/orientation/index.html
new file mode 100644
index 0000000000..951c25fff1
--- /dev/null
+++ b/files/ja/web/api/xrrigidtransform/orientation/index.html
@@ -0,0 +1,75 @@
+---
+title: XRRigidTransform.orientation
+slug: Web/API/XRRigidTransform/orientation
+tags:
+  - API
+  - AR
+  - Orientation
+  - Property
+  - Read-only
+  - Reality
+  - Reference
+  - VR
+  - Virtual
+  - WebXR
+  - WebXR API
+  - WebXR Device API
+  - XR
+  - XRRigidTransform
+  - augmented
+  - rotation
+translation_of: Web/API/XRRigidTransform/orientation
+---
+<p>{{APIRef("WebXR Device API")}}</p>
+
+<p><span class="seoSummary">{{domxref("XRRigidTransform")}} の <strong><code>orientation</code></strong> 読み取り専用プロパティは、オブジェクトによって表される変換の回転成分を指定する正規化された{{Glossary("quaternion","クォータニオン")}}（<strong><a href="https://ja.wikipedia.org/wiki/%E5%9B%9B%E5%85%83%E6%95%B0#%E5%8D%98%E4%BD%8D%E5%9B%9B%E5%85%83%E6%95%B0">単位クォータニオン</a></strong>または<strong>ベルソル</strong>とも呼ばれます）を含む {{DOMxRef("DOMPointReadOnly")}} です。</span> 長さが正確に 1.0 メートルではないクォータニオンを指定すると、正規化されます。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate">let <em>orientation</em> = <em>xrRigidTransform</em>.orientation;</pre>
+
+<h3 id="Value" name="Value">Value</h3>
+
+<p>変換の向き成分を提供する単位クォータニオンを含む {{domxref("DOMPointReadOnly")}} オブジェクト。 単位クォータニオンとして、返されるクォータニオンの長さは常に 1.0 メートルです。</p>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>地面から 2 メートル離れた位置に、真上を向くように配置された参照空間を作成するには、次のようにします。</p>
+
+<pre class="brush: js notranslate">xrReferenceSpace = refSpace.getOffsetReferenceSpace(
+  new XRRigidTransform({y: -2}, {x: 0.0, y: 1.0, z: 0.0, w: 1.0});
+);
+</pre>
+
+<p>ここで指定されている単位クォータニオンは [0.0, 1.0, 0.0, 1.0] であり、オブジェクトが y 軸に沿って直接向いている必要があることを示します。</p>
+
+<h2 id="Specifications" name="Specifications">仕様</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">仕様</th>
+   <th scope="col">状態</th>
+   <th scope="col">コメント</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("WebXR","#dom-xrrigidtransform-orientation","XRRigidTransform.orientation")}}</td>
+   <td>{{Spec2("WebXR")}}</td>
+   <td>初期定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<div>{{Compat("api.XRRigidTransform.orientation")}}</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/API/WebXR_Device_API/Movement_and_motion">移動、向き、モーション</a></li>
+ <li><a href="https://ja.wikipedia.org/wiki/%E5%9B%9B%E5%85%83%E6%95%B0#%E5%8D%98%E4%BD%8D%E5%9B%9B%E5%85%83%E6%95%B0">単位クォータニオン</a></li>
+ <li><a href="https://en.wikipedia.org/wiki/Quaternions_and_spatial_rotation">クォータニオンと空間回転</a>（英語）</li>
+</ul>
diff --git a/files/ja/web/api/xrrigidtransform/position/index.html b/files/ja/web/api/xrrigidtransform/position/index.html
new file mode 100644
index 0000000000..fa15870672
--- /dev/null
+++ b/files/ja/web/api/xrrigidtransform/position/index.html
@@ -0,0 +1,102 @@
+---
+title: XRRigidTransform.position
+slug: Web/API/XRRigidTransform/position
+tags:
+  - 3D
+  - API
+  - AR
+  - Coordinates
+  - Location
+  - Point
+  - Position
+  - Property
+  - Reference
+  - VR
+  - WebXR
+  - WebXR API
+  - XR
+  - XRRigidTransform
+  - transform
+translation_of: Web/API/XRRigidTransform/position
+---
+<p>{{APIRef("WebXR Device API")}}</p>
+
+<p>{{domxref("XRRigidTransform")}} の <strong><code>position</code></strong> 読み取り専用プロパティは、変換の平行移動成分を記述する、メートルで指定された 3D 点を提供する {{domxref("DOMPointReadOnly")}} オブジェクトです。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate">let <em>pos</em> = <em>xrRigidTransform</em>.position;</pre>
+
+<h3 id="Value" name="Value">値</h3>
+
+<p>変換行列の 3D 位置成分を示す読み取り専用の {{domxref("DOMPointReadOnly")}}。 単位はメートルです。</p>
+
+<div class="blockIndicator note">
+<p><strong>注</strong>: 点の <code>w</code> 成分は常に 1.0 です。</p>
+</div>
+
+<h2 id="Example" name="Example">例</h2>
+
+<p>オブジェクトを目の高さに配置するために使用できる参照空間を作成するには、次のようにします（目の高さが 1.5 メートルであると想定）。</p>
+
+<pre class="brush: js notranslate">function onSessionStarted(xrSession) {
+  xrSession.addEventListener("end", onSessionEnded);
+
+  gl = initGraphics(xrSession);
+
+  let glLayer = new XRWebGLLayer(xrSession, gl);
+  xrSession.updateRenderState({ baseLayer: glLayer });
+
+  if (immersiveSession) {
+    xrSession.requestReferenceSpace("bounded-floor").then((refSpace) =&gt; {
+      refSpaceCreated(refSpace);
+    }).catch(() =&gt; {
+      session.requestReferenceSpace("local-floor").then(refSpaceCreated);
+    });
+  } else {
+    session.requestReferenceSpace("viewer").then(refSpaceCreated);
+  }
+}
+
+function refSpaceCreated(refSpace) {
+  if (immersiveSession) {
+    xrReferenceSpace = refSpace;
+  } else {
+    xrReferenceSpace = refSpace.getOffsetReferenceSpace(
+      new XRRigidTransform({y: -1.5});
+    );
+  }
+  xrSession.requestAnimationFrame(onFrame);
+}
+</pre>
+
+<p>WebXR で使用するグラフィックスコンテキストを設定した後、これは変数 <code>immersiveSession</code> が <code>true</code> であるかどうかを確認することから始まります。 その場合、最初に <code>bounded-floor</code> 参照空間を要求します。 それが失敗した場合（おそらく <code>bounded-floor</code> がサポートされていないため）、<code>local-floor</code> 参照空間を要求しようとします。</p>
+
+<p>没入型セッションでない場合は、代わりに <code>viewer</code> 参照空間を要求します。</p>
+
+<p>いずれの場合も、空間が取得されたら、<code>refSpaceCreated()</code> 関数に渡します。 没入型空間の場合、指定された空間は将来の使用のために単に保存します。 ただし、インラインセッションの場合、床レベルが自動的に調整されない空間にいることがわかっているので、オフセット参照空間を要求して、ビューアーの高さを推定床レベルの 0 メートルより 1.5 メートル上にシフトします。 その新しい参照空間は、最初に受け取ったものの代わりに使用します。</p>
+
+<p>最後に、アニメーションフレームの要求が送信されます。</p>
+
+<h2 id="Specifications" name="Specifications">仕様</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">仕様</th>
+   <th scope="col">状態</th>
+   <th scope="col">コメント</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("WebXR","#dom-xrrigidtransform-position","XRRigidTransform.position")}}</td>
+   <td>{{Spec2("WebXR")}}</td>
+   <td>初期定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<div>{{Compat("api.XRRigidTransform.position")}}</div>
diff --git a/files/ja/web/api/xrrigidtransform/xrrigidtransform/index.html b/files/ja/web/api/xrrigidtransform/xrrigidtransform/index.html
new file mode 100644
index 0000000000..b268c41da9
--- /dev/null
+++ b/files/ja/web/api/xrrigidtransform/xrrigidtransform/index.html
@@ -0,0 +1,90 @@
+---
+title: XRRigidTransform()
+slug: Web/API/XRRigidTransform/XRRigidTransform
+tags:
+  - API
+  - AR
+  - Constructor
+  - Mixed Reality
+  - Orientation
+  - Position
+  - Reality
+  - Reference
+  - VR
+  - Virtual
+  - WebXR
+  - XR
+  - XRRigidTransform
+  - augmented
+  - transform
+translation_of: Web/API/XRRigidTransform/XRRigidTransform
+---
+<div>{{APIRef("WebXR Device API")}}</div>
+
+<p><span class="seoSummary"><strong><code>XRRigidTransform()</code></strong> コンストラクターは、点またはオブジェクトの位置と向きを表す新しい {{domxref("XRRigidTransform")}} オブジェクトを作成して返します。</span> 特に、<code>XRRigidTransform</code> は、空間を横断する座標系間で平行移動するための変換を提供するときに使用されます。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate">let <em>xrRigidTransform</em> = new XRRigidTransform(<em>position</em>, <em>orientation</em>);</pre>
+
+<h3 id="Parameters" name="Parameters">パラメーター</h3>
+
+<dl>
+ <dt><code>position</code> {{optional_inline}}</dt>
+ <dd>点またはオブジェクトが配置される座標を指定する {{domxref("DOMPointInit")}} に準拠するオブジェクト。 これらの寸法はメートルで指定します。 このパラメーターが省略されているか、<code>DOMPointInit</code> と互換性がない場合、使用される位置は <code>{x: 0, y: 0, z: 0, w: 1}</code> であると見なされます。 <code>w</code> は<em>常に</em> 1 でなければなりません。</dd>
+ <dt><code>orientation</code> {{optional_inline}}</dt>
+ <dd>オブジェクトが向いている方向を指定する {{domxref("DOMPointInit")}} に準拠するオブジェクト。 向きのデフォルト値は <code>{x: 0, y: 0, z: 0, w: 1}</code> です。 指定された向きは、まだ正規化されていない場合は正規化されます。</dd>
+</dl>
+
+<h3 id="Return_value" name="Return_value">戻り値</h3>
+
+<p>オブジェクトの位置と向きを原点から指定された <code>position</code> に調整し、<code>orientation</code> によって示される方向を向く変換行列を表すように初期化された新しい {{domxref("XRRigidTransform")}} オブジェクト。</p>
+
+<h3 id="Exceptions" name="Exceptions">例外</h3>
+
+<dl>
+ <dt><code>TypeError</code></dt>
+ <dd>指定された <code>position</code> の <code>w</code> 座標の値が 1.0 ではありません。</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>この例では、シーンのアニメーションの開始が示されています。 特定のタイプの参照空間の要求から始まり、最初のアニメーションフレームを要求する前に、変換に基づいて座標系をシフトします。</p>
+
+<pre class="brush: js notranslate">let animationFrameRequestID = 0;
+
+xrSession.requestReferenceSpace("local-floor")
+.then((refSpace) =&gt; {
+  xrReferenceSpace = refSpace.getOffsetReferenceSpace(
+        new XRRigidTransform(viewerPosition, viewerOrientation));
+  animationFrameRequestID = xrSession.requestAnimationFrame(drawFrame);
+});</pre>
+
+<p><code>local-floor</code> タイプの参照空間を要求した後、返された promise は最終的に解決され、その時点で新しい参照空間オブジェクト <code>refSpace</code> を受け取ります。 ビューアーの初期位置と向きから <code>XRRigidTransform</code> を作成した後、新しい変換を {{domxref("XRReferenceSpace.getOffsetReferenceSpace", "getOffsetReferenceSpace()")}} に渡して<em>別</em>の参照空間を作成します。 オフセットして、その原点が <code>viewerPosition</code> によって指定された座標と同じ空間内の場所に配置されるようにします。 向きも同様に修正されます。</p>
+
+<p>次に、{{domxref("XRSession.requestAnimationFrame", "requestAnimationFrame()")}} が呼び出され、描画する新しいアニメーションフレームを要求します。 <code>drawFrame()</code> コールバックは、システムが次のフレームを描画する準備ができたときに実行されます。</p>
+
+<p><a href="/ja/docs/Web/API/WebXR_Device_API/Movement_and_motion">移動、向き、モーション</a>には、さらに多くの例があります。</p>
+
+<h2 id="Specifications" name="Specifications">仕様</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">仕様</th>
+   <th scope="col">状態</th>
+   <th scope="col">コメント</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("WebXR","#dom-xrrigidtransform-xrrigidtransform","XRRigidTransform()")}}</td>
+   <td>{{Spec2("WebXR")}}</td>
+   <td>初期定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<div>{{Compat("api.XRRigidTransform.XRRigidTransform")}}</div>