dump 2020-12-10

12 files changed, 756 insertions, 20 deletions

diff --git a/files/ja/web/api/htmlelement/beforeinput_event/index.html b/files/ja/web/api/htmlelement/beforeinput_event/index.html
index 4939f3e9b8..060277ae97 100644
--- a/files/ja/web/api/htmlelement/beforeinput_event/index.html
+++ b/files/ja/web/api/htmlelement/beforeinput_event/index.html
@@ -2,19 +2,20 @@
 title: 'HTMLElement: beforeinput イベント'
 slug: Web/API/HTMLElement/beforeinput_event
 tags:
-  - DOM
+  - API
   - Event
-  - Experimental
+  - HTML DOM
+  - HTMLElement
   - InputEvent
   - Reference
   - beforeinput
 translation_of: Web/API/HTMLElement/beforeinput_event
 ---
-<div>{{APIRef}} {{SeeCompatTable}}</div>
+<div>{{APIRef}}</div>
 
-<p><span class="seoSummary">DOM の <strong><code>beforeinput</code></strong> イベントは、{{HTMLElement("input")}}、{{HTMLElement("select")}}、または {{HTMLElement("textarea")}} 要素の値が変更されようとしているときに発生します。 このイベントは、{{domxref("HTMLElement.contentEditable", "contenteditable")}} が有効になっている要素、および {{domxref("Document.designMode", "designMode")}} がオンになっている要素にも適用されます。</span></p>
+<p>DOM の <strong><code>beforeinput</code></strong> イベントは、{{HTMLElement("input")}}、{{HTMLElement("select")}}、{{HTMLElement("textarea")}} 要素の値が変更されようとしているときに発生します。 このイベントは、{{domxref("HTMLElement.contentEditable", "contenteditable")}} が有効になっている要素、および {{domxref("Document.designMode", "designMode")}} がオンになっている要素にも適用されます。</p>
 
-<p><code>contenteditable</code> や <code>designMode</code> の場合、イベントのターゲットは<em>編集ホスト</em>です。 これらのプロパティが複数の要素に適用された場合、編集ホストは、親が編集可能ではない直近の先祖要素になります。</p>
+<p><code>contenteditable</code> や <code>designMode</code> の場合、イベントのターゲットは<strong>編集ホスト</strong>です。 これらのプロパティが複数の要素に適用された場合、編集ホストは、親が編集可能ではない直近の先祖要素になります。</p>
 
 <table class="properties">
  <tbody>
@@ -43,7 +44,7 @@ translation_of: Web/API/HTMLElement/beforeinput_event
    <td>はい</td>
   </tr>
   <tr>
-   <th>デフォルトのアクション</th>
+   <th>既定のアクション</th>
    <td>DOM 要素の更新</td>
   </tr>
  </tbody>
@@ -51,16 +52,27 @@ translation_of: Web/API/HTMLElement/beforeinput_event
 
 <h2 id="Examples" name="Examples">例</h2>
 
-<p>この例では、{{HtmlElement("input")}} 要素の値を変更する直前に値を記録します。</p>
+<h3 id="機能の検出">機能の検出</h3>
 
-<h3 id="HTML" name="HTML">HTML</h3>
+<p>以下の関数は、 <code>beforeinput</code> に対応していれば true を返します。</p>
 
-<pre class="brush: html">&lt;input placeholder="テキストを入力" name="name"/&gt;
+<pre class="brush: js notranslate">function isBeforeInputEventAvailable() {
+  return typeof InputEvent.prototype.getTargetRanges === "function";
+}
+</pre>
+
+<h3 id="Simple_logger" name="Simple_logger">単純なロガー</h3>
+
+<p>この例では、 {{HtmlElement("input")}} 要素に適用された新しい値に置き換える直前に、要素の現在の値をログに記録しています。</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;input placeholder="テキストを入力" name="name"/&gt;
 &lt;p id="values"&gt;&lt;/p&gt;</pre>
 
-<h3 id="JavaScript" name="JavaScript">JavaScript</h3>
+<h4 id="JavaScript">JavaScript</h4>
 
-<pre class="brush: js">const input = document.querySelector('input');
+<pre class="brush: js notranslate">const input = document.querySelector('input');
 const log = document.getElementById('values');
 
 input.addEventListener('beforeinput', updateValue);
@@ -69,16 +81,16 @@ function updateValue(e) {
   log.textContent = e.target.value;
 }</pre>
 
-<h3 id="Result" name="Result">結果</h3>
+<h4 id="Result" name="Result">結果</h4>
 
-<p>{{EmbedLiveSample("Examples")}}</p>
+<p>{{EmbedLiveSample("Simple_logger")}}</p>
 
-<h2 id="Specifications" name="Specifications">仕様</h2>
+<h2 id="Specifications" name="Specifications">仕様書</h2>
 
 <table class="standard-table">
  <tbody>
   <tr>
-   <th scope="col">仕様</th>
+   <th scope="col">仕様書</th>
    <th scope="col">状態</th>
   </tr>
   <tr>
@@ -90,7 +102,7 @@ function updateValue(e) {
 
 <h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
 
-
+<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
 
 <p>{{Compat("api.HTMLElement.beforeinput_event")}}</p>
 
diff --git a/files/ja/web/api/xrinputsource/gripspace/index.html b/files/ja/web/api/xrinputsource/gripspace/index.html
index 45e0b9a0c9..87c326186c 100644
--- a/files/ja/web/api/xrinputsource/gripspace/index.html
+++ b/files/ja/web/api/xrinputsource/gripspace/index.html
@@ -18,7 +18,7 @@ translation_of: Web/API/XRInputSource/gripSpace
 ---
 <div>{{securecontext_header}}{{APIRef("WebXR")}}</div>
 
-<p class="summary"><span class="seoSummary">{{domxref("XRInputSource")}} の <strong><code>gripSpace</code></strong> 読み取り専用プロパティは、ネイティブの原点がユーザーの手（またはその一部）に保持しているように見える仮想オブジェクトのレンダリングに使用するポーズを追跡する {{domxref("XRSpace")}} を返します。</span> 例えば、ユーザーが仮想の真っ直ぐな棒を持っている場合、この <code>XRSpace</code> のネイティブの原点は、ユーザーの拳のおおよその重心にあります。</p>
+<p class="summary"><span class="seoSummary">{{domxref("XRInputSource")}} の <strong><code>gripSpace</code></strong> 読み取り専用プロパティは、ネイティブの原点がユーザーの手に保持している（またはユーザーの手の一部の）ように見える仮想オブジェクトのレンダリングに使用するポーズを追跡する {{domxref("XRSpace")}} を返します。</span> 例えば、ユーザーが仮想の真っ直ぐな棒を持っている場合、この <code>XRSpace</code> のネイティブの原点は、ユーザーの拳のおおよその重心にあります。</p>
 
 <h2 id="Syntax" name="Syntax">構文</h2>
 
diff --git a/files/ja/web/api/xrinputsource/targetraymode/index.html b/files/ja/web/api/xrinputsource/targetraymode/index.html
new file mode 100644
index 0000000000..f29a2b1f9d
--- /dev/null
+++ b/files/ja/web/api/xrinputsource/targetraymode/index.html
@@ -0,0 +1,77 @@
+---
+title: XRInputSource.targetRayMode
+slug: Web/API/XRInputSource/targetRayMode
+tags:
+  - API
+  - AR
+  - Pointing
+  - Property
+  - Ray
+  - Read-only
+  - Reference
+  - VR
+  - WebXR
+  - WebXR API
+  - WebXR Device API
+  - XR
+  - XRInputSource
+  - direction
+  - pointer
+  - target
+  - targetRayMode
+translation_of: Web/API/XRInputSource/targetRayMode
+---
+<p>{{APIRef("WebXR")}}{{securecontext_header}}</p>
+
+<p>{{domxref("XRInputSource")}} の <strong><code>targetRayMode</code></strong> 読み取り専用プロパティは、入力ソースのターゲット光線を生成する方法と、それをユーザーに提示する方法を示します。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate">let <em>rayMode</em> = <em>xrInputSource</em>.targetRayMode;</pre>
+
+<h3 id="Value" name="Value">値</h3>
+
+<p>{{domxref("XRTargetRayMode")}} 列挙型から取得した {{domxref("DOMString")}}。 ターゲット光線を生成してユーザーに提示するときに使用する方法を示します。 可能な値は次のとおりです。</p>
+
+<p>{{page("/ja/docs/Web/API/XRTargetRayMode", "Values")}}</p>
+
+<h2 id="Usage_notes" name="Usage_notes">使用上の注意</h2>
+
+<p>入力ソースの {{domxref("XRInputSource.targetRaySpace", "targetRaySpace")}} は、ターゲット光線の位置と向きを示し、光線をレンダリングする場所を決定するために使用できます。</p>
+
+<h2 id="Example" name="Example">例</h2>
+
+<p>{{page("/ja/docs/Web/API/XRTargetRayMode", "Examples")}}</p>
+
+<h2 id="Specifications" name="Specifications">仕様</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">仕様</th>
+   <th scope="col">状態</th>
+   <th scope="col">コメント</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebXR','#dom-xrinputsource-targetraymode','XRInputSource.handedness')}}</td>
+   <td>{{Spec2('WebXR')}}</td>
+   <td>初期定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<div class="hidden">
+<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.XRInputSource.handedness")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/API/WebXR_Device_API">WebXR Device API</a></li>
+ <li><a href="/ja/docs/Web/API/WebXR_Device_API/Inputs">入力と入力ソース</a></li>
+ <li><a href="/ja/docs/Web/WebXR%20Device%20API/Gamepads">WebXR アプリケーションでのゲームパッドの使用</a></li>
+</ul>
diff --git a/files/ja/web/api/xrreferencespaceevent/referencespace/index.html b/files/ja/web/api/xrreferencespaceevent/referencespace/index.html
index f9cb5f0c48..c2649cd291 100644
--- a/files/ja/web/api/xrreferencespaceevent/referencespace/index.html
+++ b/files/ja/web/api/xrreferencespaceevent/referencespace/index.html
@@ -31,7 +31,7 @@ translation_of: Web/API/XRReferenceSpaceEvent/referenceSpace
 
 <h3 id="Value" name="Value">値</h3>
 
-<p>An {{domxref("XRReferenceSpace")}} indicating the source of the event.</p>
+<p>イベントのソースを示す {{domxref("XRReferenceSpace")}}。</p>
 
 <h2 id="Examples" name="Examples">例</h2>
 
diff --git a/files/ja/web/api/xrreferencespacetype/index.html b/files/ja/web/api/xrreferencespacetype/index.html
index d59470e742..3f55c590b3 100644
--- a/files/ja/web/api/xrreferencespacetype/index.html
+++ b/files/ja/web/api/xrreferencespacetype/index.html
@@ -33,7 +33,7 @@ translation_of: Web/API/XRReferenceSpaceType
 
 <h3 id="Reference_space_descriptors" name="Reference_space_descriptors">参照空間記述子</h3>
 
-<p>参照空間のタイプを以下の表に示します。 それらの使用例と、それらを実装するために使用されるインターフェイスについての簡単な情報が含まれています。</p>
+<p>参照空間のタイプを以下の表に示します。 それらのユースケースと、それらを実装するために使用されるインターフェイスについての簡単な情報が含まれています。</p>
 
 <div id="foo">
 <table class="standard-table" id="value-list">
@@ -71,7 +71,7 @@ translation_of: Web/API/XRReferenceSpaceType
   </tr>
   <tr>
    <td><a id="viewer" name="viewer"><code>viewer</code></a></td>
-   <td>ネイティブの原点がビューアーの位置と方向を追跡する追跡空間。 これは、ユーザーが物理的に移動できる環境で使用し、没入型（immersive）とインライン（inline）の両方の {{domxref("XRSession")}} のすべてのインスタンスをサポートしますが、インラインセッションで最も役立ちます。 ビューアーと入力の間の距離を決定するとき、またはオフセット空間を操作するときに特に役立ちます。 そうでない場合、通常、他の参照空間タイプの1つがより頻繁に使用されます。</td>
+   <td>ネイティブの原点がビューアーの位置と向きを追跡する追跡空間。 これは、ユーザーが物理的に移動できる環境で使用し、没入型（immersive）とインライン（inline）の両方の {{domxref("XRSession")}} のすべてのインスタンスをサポートしますが、インラインセッションで最も役立ちます。 ビューアーと入力の間の距離を決定するとき、またはオフセット空間を操作するときに特に役立ちます。 そうでない場合、通常、他の参照空間タイプの1つがより頻繁に使用されます。</td>
    <td>{{domxref("XRReferenceSpace")}}</td>
   </tr>
  </tbody>
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>
diff --git a/files/ja/web/api/xrtargetraymode/index.html b/files/ja/web/api/xrtargetraymode/index.html
new file mode 100644
index 0000000000..37144393b8
--- /dev/null
+++ b/files/ja/web/api/xrtargetraymode/index.html
@@ -0,0 +1,106 @@
+---
+title: XRTargetRayMode
+slug: Web/API/XRTargetRayMode
+tags:
+  - 3D
+  - API
+  - AR
+  - Enum
+  - Enumerated Type
+  - Input
+  - Reality
+  - Reference
+  - Type
+  - VR
+  - Virtual
+  - WebXR
+  - WebXR API
+  - WebXR Device API
+  - XR
+  - XRTargetRayMode
+  - augmented
+  - source
+  - target
+translation_of: Web/API/XRTargetRayMode
+---
+<p>{{APIRef("WebXR")}}</p>
+
+<p><span class="seoSummary"><a href="/ja/docs/Web/API/WebXR_Device_API">WebXR Device API</a> の <strong><code>XRTargetRayMode</code></strong> 列挙型は、入力コントローラーのターゲティング光線を生成する方法を記述します。</span> ターゲティングは、視線追跡システムを使用してターゲットを見るか、ハンドコントローラー、グローブ、またはモーショントラッキングシステムを使用してターゲットを指すか、画面上で指やマウスを使用してターゲットをタップまたはクリックすることによって行うことができます。</p>
+
+<p>通常、<strong>ターゲット光線</strong>は、ターゲティングシステムのソースから、ユーザーが見ている方向または指している方向にターゲット光線に沿って描画されます。 光線の終点を示す方法と同様に、光線のスタイルは一般的にあなた次第です。 ターゲットとなる点またはオブジェクトは、図形を描画するか、ターゲットとなる表面またはオブジェクトを強調表示することによって示される場合があります。</p>
+
+<div style="width: 42em;">
+<figure style="background: #eee; padding: 0.5em; border: 1px solid #aaa; border-radius: 1em; max-width: 504px; padding: 1em; margin: 1em auto;">
+<figcaption><strong>ハンドコントローラーから放出されるターゲット光線。</strong></figcaption>
+<img alt="ハンドコントローラーから放出されるターゲット光線を示すスクリーンショット" src="https://mdn.mozillademos.org/files/17089/example-target-ray.gif" style="width: 100%;"></figure>
+</div>
+
+<p>ターゲット光線は、単純な線（理想的には距離とともにフェードする）から、上のスクリーンショットに示されているサイエンスフィクションの「フェイザー」スタイルなどのアニメーション効果まで、何でもかまいません。</p>
+
+<h2 id="Values" name="Values">値</h2>
+
+<dl>
+ <dt><code>gaze</code>（視線）</dt>
+ <dd>ユーザーは、ユーザーが見ている方向を検出する視線追跡システム（または<strong>視線入力</strong>）を使用しています。 ターゲット光線は、ビューアーの目を起点として描画され、ビューアーが見ている方向に追従します。</dd>
+ <dt><code>screen</code>（画面）</dt>
+ <dd>ターゲット光線の方向は、タッチスクリーン、マウス、またはその他の触覚入力デバイスをタップして示します。</dd>
+ <dt><code>tracked-pointer</code>（追跡ポインター）</dt>
+ <dd>ターゲティングは、ユーザーがターゲットの方向に向けるハンドヘルドデバイスまたはハンドトラッキングシステムを使用して行われます。 ターゲット光線は、手（または手の中のオブジェクト）からターゲット方向に伸びます。 方向はプラットフォーム固有のルールを使用して決定されますが、そのようなルールが存在しない場合は、ユーザーが人差し指を手からまっすぐに向けていると仮定して方向が選択されます。</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>このコードの断片は、フレームごとに1回呼び出される関数の一部を示しています。 <code>null</code> 以外の {{domxref("XRInputSource.targetRaySpace", "targetRaySpace")}} を持つ入力を探します。 このプロパティの値を持つ入力は、ターゲット光線をユーザーから外側に投影する入力を表します。</p>
+
+<p>このような入力ごとに、この例では、{{domxref("XRInputSource.targetRayMode", "targetRayMode")}} が <code>tracked-pointer</code> である入力を探します。 これは、入力が実際には、視線入力デバイス、画面タップ、またはマウスクリックではなく、ターゲティングデバイスを表すことを目的としていることを示しています。 追跡ポインターの場合、関数 <code>myRenderTargetRayAsBeam()</code> が呼び出され、入力コントローラーの仮想位置から、それが指している方向に外側にビームをレンダリングします。</p>
+
+<p>コードは、仮想空間でのユーザーの手の位置を表すコントローラーや任意のオブジェクトの描画、その他の入力関連のタスクなどを引き続き実行する必要があります。</p>
+
+<pre class="brush: js notranslate">function updateInputSources(session, frame, refSpace) {
+  for (let source of session.getInputSources()) {
+    let targetRayPose = frame.getPose(inputSource.targetRaySpace, refSpace);
+
+    if (targetRayPose) {
+      if (source.targetRayMode == "tracked-pointer") {
+        myRenderTargetRayAsBeam(targetRayPose);
+      }
+    }
+
+    /* ... */
+  }
+}
+</pre>
+
+<p>詳細とより完全な例については、<a href="/ja/docs/Web/API/WebXR_Device_API/Inputs">入力と入力ソース</a>の記事を参照してください。</p>
+
+<h2 id="Specifications" name="Specifications">仕様</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">仕様</th>
+   <th scope="col">状態</th>
+   <th scope="col">コメント</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebXR','#enumdef-xrtargetraymode','XRTargetRayMode')}}</td>
+   <td>{{Spec2('WebXR')}}</td>
+   <td>初期定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<div class="hidden">
+<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.XRTargetRayMode")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/API/WebXR_Device_API">WebXR Device API</a></li>
+ <li><a href="/ja/docs/Web/API/WebXR_Device_API/Inputs">入力と入力ソース</a></li>
+</ul>