From 65cc6eabd71b1bceccf6fd3d3d4970c2955f3784 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Thu, 10 Dec 2020 08:37:18 -0500 Subject: dump 2020-12-10 --- .../api/htmlelement/beforeinput_event/index.html | 44 +++++---- .../ja/web/api/xrinputsource/gripspace/index.html | 2 +- .../web/api/xrinputsource/targetraymode/index.html | 77 +++++++++++++++ .../referencespace/index.html | 2 +- files/ja/web/api/xrreferencespacetype/index.html | 4 +- files/ja/web/api/xrrigidtransform/index.html | 98 +++++++++++++++++++ .../ja/web/api/xrrigidtransform/inverse/index.html | 80 ++++++++++++++++ .../ja/web/api/xrrigidtransform/matrix/index.html | 96 +++++++++++++++++++ .../api/xrrigidtransform/orientation/index.html | 75 +++++++++++++++ .../web/api/xrrigidtransform/position/index.html | 102 ++++++++++++++++++++ .../xrrigidtransform/xrrigidtransform/index.html | 90 +++++++++++++++++ files/ja/web/api/xrtargetraymode/index.html | 106 +++++++++++++++++++++ 12 files changed, 756 insertions(+), 20 deletions(-) create mode 100644 files/ja/web/api/xrinputsource/targetraymode/index.html create mode 100644 files/ja/web/api/xrrigidtransform/index.html create mode 100644 files/ja/web/api/xrrigidtransform/inverse/index.html create mode 100644 files/ja/web/api/xrrigidtransform/matrix/index.html create mode 100644 files/ja/web/api/xrrigidtransform/orientation/index.html create mode 100644 files/ja/web/api/xrrigidtransform/position/index.html create mode 100644 files/ja/web/api/xrrigidtransform/xrrigidtransform/index.html create mode 100644 files/ja/web/api/xrtargetraymode/index.html (limited to 'files/ja/web/api') 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 --- -
{{APIRef}} {{SeeCompatTable}}
+
{{APIRef}}
-

DOM の beforeinput イベントは、{{HTMLElement("input")}}、{{HTMLElement("select")}}、または {{HTMLElement("textarea")}} 要素の値が変更されようとしているときに発生します。 このイベントは、{{domxref("HTMLElement.contentEditable", "contenteditable")}} が有効になっている要素、および {{domxref("Document.designMode", "designMode")}} がオンになっている要素にも適用されます。

+

DOM の beforeinput イベントは、{{HTMLElement("input")}}、{{HTMLElement("select")}}、{{HTMLElement("textarea")}} 要素の値が変更されようとしているときに発生します。 このイベントは、{{domxref("HTMLElement.contentEditable", "contenteditable")}} が有効になっている要素、および {{domxref("Document.designMode", "designMode")}} がオンになっている要素にも適用されます。

-

contenteditable や designMode の場合、イベントのターゲットは編集ホストです。 これらのプロパティが複数の要素に適用された場合、編集ホストは、親が編集可能ではない直近の先祖要素になります。

+

contenteditable や designMode の場合、イベントのターゲットは編集ホストです。 これらのプロパティが複数の要素に適用された場合、編集ホストは、親が編集可能ではない直近の先祖要素になります。

@@ -43,7 +44,7 @@ translation_of: Web/API/HTMLElement/beforeinput_event - + @@ -51,16 +52,27 @@ translation_of: Web/API/HTMLElement/beforeinput_event

例

-

この例では、{{HtmlElement("input")}} 要素の値を変更する直前に値を記録します。

+

機能の検出

-

HTML

+

以下の関数は、 beforeinput に対応していれば true を返します。

-
<input placeholder="テキストを入力" name="name"/>
+
function isBeforeInputEventAvailable() {
+  return typeof InputEvent.prototype.getTargetRanges === "function";
+}
+

+
+
単純なロガー

+
+
この例では、 {{HtmlElement("input")}} 要素に適用された新しい値に置き換える直前に、要素の現在の値をログに記録しています。

+
+
HTML

+
+
<input placeholder="テキストを入力" name="name"/>
 <p id="values"></p>

 
-
JavaScript

+
JavaScript

 
-
const input = document.querySelector('input');
+
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;
 }

 
-
結果

+
結果

 
-
{{EmbedLiveSample("Examples")}}

+
{{EmbedLiveSample("Simple_logger")}}

 
-
仕様

+
仕様書
はい
デフォルトのアクション既定のアクション DOM 要素の更新
- + @@ -90,7 +102,7 @@ function updateValue(e) {

ブラウザーの互換性

- +

{{Compat("api.HTMLElement.beforeinput_event")}}

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 ---
{{securecontext_header}}{{APIRef("WebXR")}}
-

{{domxref("XRInputSource")}} の gripSpace 読み取り専用プロパティは、ネイティブの原点がユーザーの手（またはその一部）に保持しているように見える仮想オブジェクトのレンダリングに使用するポーズを追跡する {{domxref("XRSpace")}} を返します。 例えば、ユーザーが仮想の真っ直ぐな棒を持っている場合、この XRSpace のネイティブの原点は、ユーザーの拳のおおよその重心にあります。

+

{{domxref("XRInputSource")}} の gripSpace 読み取り専用プロパティは、ネイティブの原点がユーザーの手に保持している（またはユーザーの手の一部の）ように見える仮想オブジェクトのレンダリングに使用するポーズを追跡する {{domxref("XRSpace")}} を返します。 例えば、ユーザーが仮想の真っ直ぐな棒を持っている場合、この XRSpace のネイティブの原点は、ユーザーの拳のおおよその重心にあります。

構文

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 +--- +

{{APIRef("WebXR")}}{{securecontext_header}}

+ +

{{domxref("XRInputSource")}} の targetRayMode 読み取り専用プロパティは、入力ソースのターゲット光線を生成する方法と、それをユーザーに提示する方法を示します。

+ +

構文

+ +
let rayMode = xrInputSource.targetRayMode;
+ +

値

+ +

{{domxref("XRTargetRayMode")}} 列挙型から取得した {{domxref("DOMString")}}。 ターゲット光線を生成してユーザーに提示するときに使用する方法を示します。 可能な値は次のとおりです。

+ +

{{page("/ja/docs/Web/API/XRTargetRayMode", "Values")}}

+ +

使用上の注意

+ +

入力ソースの {{domxref("XRInputSource.targetRaySpace", "targetRaySpace")}} は、ターゲット光線の位置と向きを示し、光線をレンダリングする場所を決定するために使用できます。

+ +

例

+ +

{{page("/ja/docs/Web/API/XRTargetRayMode", "Examples")}}

+ +

仕様

+ +
仕様仕様書 状態
+ + + + + + + + + + + + +
仕様状態コメント
{{SpecName('WebXR','#dom-xrinputsource-targetraymode','XRInputSource.handedness')}}{{Spec2('WebXR')}}初期定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.XRInputSource.handedness")}}

+ +

関連情報

+ + 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

値

-

An {{domxref("XRReferenceSpace")}} indicating the source of the event.

+

イベントのソースを示す {{domxref("XRReferenceSpace")}}。

例

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

参照空間記述子

-

参照空間のタイプを以下の表に示します。 それらの使用例と、それらを実装するために使用されるインターフェイスについての簡単な情報が含まれています。

+

参照空間のタイプを以下の表に示します。 それらのユースケースと、それらを実装するために使用されるインターフェイスについての簡単な情報が含まれています。

@@ -71,7 +71,7 @@ translation_of: Web/API/XRReferenceSpaceType - + 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 +--- +

{{APIRef("WebXR Device API")}}

+ +

XRRigidTransform は、位置と向きによって記述される 3D 幾何学的変換を表す WebXR API のインターフェイスです。

+ +

XRRigidTransform は、以下を含む WebXR API 全体で変換を指定するために使用されます。

+ + + +

行列データを提供する裸の配列ではなく、これらの場所で XRRigidTransform を使用する利点は、XRRigidTransform が変換の逆の計算などを自動的に実行することです。 さらに良いことに、一度計算したらキャッシュされるため、後続の要求は大幅に高速化されます。

+ +

コンストラクター

+ +
+
{{domxref("XRRigidTransform.XRRigidTransform", "new XRRigidTransform()")}}
+
指定された位置や向きを適用する変換を表す新しい XRRigidTransform オブジェクトを作成します。
+
+ +

プロパティ

+ +
+
{{DOMxRef("XRRigidTransform.position")}} {{readonlyInline}} {{experimental_inline}}
+
変換の平行移動成分を記述する、メートルで表される3次元の点を指定する {{DOMxRef("DOMPointReadOnly")}}。 {{DOMxRef("DOMPointReadonly.w", "w")}} プロパティは常に 1.0 です。
+
{{DOMxRef("XRRigidTransform.orientation")}} {{readonlyInline}} {{experimental_inline}}
+
変換の回転成分を記述する単位クォータニオンを含む {{DOMxRef("DOMPointReadOnly")}}。 単位クォータニオンとして、その長さは常に 1.0 に正規化されます。
+
{{DOMxRef("XRRigidTransform.matrix")}} {{readonlyInline}} {{experimental_inline}}
+
16 メンバーの {{DOMxRef("Float32Array")}} の形式で変換行列を返します。 配列を使用して行列を表す方法については、行列のフォーマットのセクションを参照してください。
+
+ +
+
{{DOMxRef("XRRigidTransform.inverse")}} {{readonlyInline}} {{experimental_inline}}
+
この変換の逆である XRRigidTransform を返します。 つまり、元の変換によって以前に変換されたオブジェクトに適用された場合、変換が元に戻され、元のオブジェクトが返されます。
+
+ +

使用上の注意

+ +

XRRigidTransform が解釈されると、位置が適用される前に、影響を受けるオブジェクトに常に向きが適用されます。

+ +

例

+ +

このコードスニペットは、XRRigidTransform を作成して、新しい参照空間を作成するときに使用する現在の参照空間に対するオフセットと向きを指定します。 次に、セッションの {{domxref("XRSession.requestAnimationFrame", "requestAnimationFrame()")}} メソッドを呼び出して、最初のアニメーションフレームコールバックを要求します。

+ +
xrSession.requestReferenceSpace(refSpaceType)
+.then((refSpace) => {
+  xrReferenceSpace = refSpace;
+  xrReferenceSpace = xrReferenceSpace.getOffsetReferenceSpace(
+        new XRRigidTransform(viewerStartPosition, cubeOrientation));
+  animationFrameRequestID = xrSession.requestAnimationFrame(drawFrame);
+ +

仕様

+ +
viewerネイティブの原点がビューアーの位置と方向を追跡する追跡空間。 これは、ユーザーが物理的に移動できる環境で使用し、没入型（immersive）とインライン（inline）の両方の {{domxref("XRSession")}} のすべてのインスタンスをサポートしますが、インラインセッションで最も役立ちます。 ビューアーと入力の間の距離を決定するとき、またはオフセット空間を操作するときに特に役立ちます。 そうでない場合、通常、他の参照空間タイプの1つがより頻繁に使用されます。ネイティブの原点がビューアーの位置と向きを追跡する追跡空間。 これは、ユーザーが物理的に移動できる環境で使用し、没入型（immersive）とインライン（inline）の両方の {{domxref("XRSession")}} のすべてのインスタンスをサポートしますが、インラインセッションで最も役立ちます。 ビューアーと入力の間の距離を決定するとき、またはオフセット空間を操作するときに特に役立ちます。 そうでない場合、通常、他の参照空間タイプの1つがより頻繁に使用されます。 {{domxref("XRReferenceSpace")}}
+ + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName("WebXR","#xrrigidtransform-interface","XRRigidTransform")}}{{Spec2("WebXR")}}初期定義
+ +

ブラウザーの互換性

+ +
{{Compat("api.XRRigidTransform")}}
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 +--- +

{{APIRef("WebXR Device API")}}

+ +

{{domxref("XRRigidTransform")}} インターフェイスの inverse 読み取り専用プロパティは、それ自体の変換の逆である別の {{domxref("XRRigidTransform")}} オブジェクトを返します。 つまり、逆を明示的に生成する代わりに、inverse プロパティを使用して、XRRigidTransform の逆をいつでも取得できます。

+ +

構文

+ +
let transformInverse = xrRigidTransform.inverse;
+ +

値

+ +

アクセスした XRRigidTransform の逆を含む {{domxref("XRRigidTransform")}}。

+ +

親 XRRigidTransform によって以前に変換されたオブジェクトに変換の逆を適用すると、常に変換が元に戻され、結果としてオブジェクトは前のポーズに戻ります。 つまり、その位置と向きの両方が以前の構成に戻ります。

+ +

例

+ +

この例では、オブジェクトのモデルビュー行列は、ビュー行列を取得し、それをオブジェクトのポーズ行列で乗算することによって計算されます。

+ +
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);
+
+  /* ... */
+}
+
+ +

このレンダラーのコアコードのあらましは、ビューアーの位置と向きに基づいてオブジェクトを変換するために使用するモデルビュー行列として、その変換の逆の行列をを取ることによって、ポーズのビューがどのように表されるかを示しています。 逆の行列にオブジェクトの行列を掛けてモデルビュー行列を取得し、その情報を含むようにユニフォームを設定することで、シェーダープログラムに渡します。

+ +

仕様

+ + + + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName("WebXR","#dom-xrrigidtransform-inverse","XRRigidTransform.inverse")}}{{Spec2("WebXR")}}初期定義
+ +

ブラウザーの互換性

+ +
{{Compat("api.XRRigidTransform.inverse")}}
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 +--- +

{{APIRef("WebXR Device API")}}

+ +

{{domxref("XRRigidTransform")}} の matrix 読み取り専用プロパティは、オブジェクトによって表される変換行列を返します。 そして、返された行列に列ベクトルを前乗算して、{{domxref("XRRigidTransform.orientation", "orientation")}} で指定された 3D 回転でベクトルを回転させ、{{domxref("XRRigidTransform.position", "position")}} で平行移動させることができます。

+ +

構文

+ +
let matrix = xrRigidTransform.matrix;
+ +

値

+ +

{{domxref("XRRigidTransform.position", "position")}} プロパティと {{domxref("XRRigidTransform.orientation", "orientation")}} プロパティで記述される 4x4 変換行列を表す 16 個のエントリーを含む {{domxref("Float32Array")}}。

+ +

使用上の注意

+ +

行列のフォーマット

+ +

WebGL で使用されるすべての 4x4 変換行列は、16 要素の {{domxref("Float32Array")}} に格納されます。 値は、列優先の順序で配列に格納されます。 つまり、各列は上から下に向かって配列に書き込まれ、その後、1つ右側の列に移動して、次の列が配列に書き込まれます。 したがって、配列 [a0, a1, a2, ..., a13, a14, a15] の場合、行列は次のようになります。

+ +

[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]]\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 の単位行列を書き込むことから始まります。

+ +

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

+ +

これは、適用した点、ベクトル、またはオブジェクトの向きや位置を変更しない変換です。

+ +

次に、このように position を右側の列に配置して、回転を変更せずに、各次元で指定した距離だけ座標系を変換する平行移動行列を作成します。 ここで、px、py、pz は、{{domxref("DOMPointReadOnly")}} の position の x、y、z メンバーの値です。

+ +

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

+ +

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

+ +

[1-2(qy2+qz2)2(qxqy-qzqw)2(qxqz+qyqw)02(qxqy+qzqw)1-2(qx2+qz2)2(qyqz-qxqw)02(qxqz-qyqw)2(qyqz+qxqw)1-2(qx2+qy2)00001]\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(qy2+qz2)2(qxqy-qzqw)2(qxqz+qyqw)px2(qxqy+qzqw)1-2(qx2+qz2)2(qyqz-qxqw)py2(qxqz-qyqw)2(qyqz+qxqw)1-2(qx2+qy2)pz0001]\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);
+
+ +

仕様

+ + + + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName("WebXR","#dom-xrrigidtransform-matrix","XRRigidTransform.matrix")}}{{Spec2("WebXR")}}初期定義
+ +

ブラウザーの互換性

+ +
{{Compat("api.XRRigidTransform.matrix")}}
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 +--- +

{{APIRef("WebXR Device API")}}

+ +

{{domxref("XRRigidTransform")}} の orientation 読み取り専用プロパティは、オブジェクトによって表される変換の回転成分を指定する正規化された{{Glossary("quaternion","クォータニオン")}}（単位クォータニオンまたはベルソルとも呼ばれます）を含む {{DOMxRef("DOMPointReadOnly")}} です。 長さが正確に 1.0 メートルではないクォータニオンを指定すると、正規化されます。

+ +

構文

+ +
let orientation = xrRigidTransform.orientation;
+ +

Value

+ +

変換の向き成分を提供する単位クォータニオンを含む {{domxref("DOMPointReadOnly")}} オブジェクト。 単位クォータニオンとして、返されるクォータニオンの長さは常に 1.0 メートルです。

+ +

例

+ +

地面から 2 メートル離れた位置に、真上を向くように配置された参照空間を作成するには、次のようにします。

+ +
xrReferenceSpace = refSpace.getOffsetReferenceSpace(
+  new XRRigidTransform({y: -2}, {x: 0.0, y: 1.0, z: 0.0, w: 1.0});
+);
+
+ +

ここで指定されている単位クォータニオンは [0.0, 1.0, 0.0, 1.0] であり、オブジェクトが y 軸に沿って直接向いている必要があることを示します。

+ +

仕様

+ + + + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName("WebXR","#dom-xrrigidtransform-orientation","XRRigidTransform.orientation")}}{{Spec2("WebXR")}}初期定義
+ +

ブラウザーの互換性

+ +
{{Compat("api.XRRigidTransform.orientation")}}
+ +

関連情報

+ + 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 +--- +

{{APIRef("WebXR Device API")}}

+ +

{{domxref("XRRigidTransform")}} の position 読み取り専用プロパティは、変換の平行移動成分を記述する、メートルで指定された 3D 点を提供する {{domxref("DOMPointReadOnly")}} オブジェクトです。

+ +

構文

+ +
let pos = xrRigidTransform.position;
+ +

値

+ +

変換行列の 3D 位置成分を示す読み取り専用の {{domxref("DOMPointReadOnly")}}。 単位はメートルです。

+ +
+

注: 点の w 成分は常に 1.0 です。

+
+ +

例

+ +

オブジェクトを目の高さに配置するために使用できる参照空間を作成するには、次のようにします（目の高さが 1.5 メートルであると想定）。

+ +
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) => {
+      refSpaceCreated(refSpace);
+    }).catch(() => {
+      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);
+}
+
+ +

WebXR で使用するグラフィックスコンテキストを設定した後、これは変数 immersiveSession が true であるかどうかを確認することから始まります。 その場合、最初に bounded-floor 参照空間を要求します。 それが失敗した場合（おそらく bounded-floor がサポートされていないため）、local-floor 参照空間を要求しようとします。

+ +

没入型セッションでない場合は、代わりに viewer 参照空間を要求します。

+ +

いずれの場合も、空間が取得されたら、refSpaceCreated() 関数に渡します。 没入型空間の場合、指定された空間は将来の使用のために単に保存します。 ただし、インラインセッションの場合、床レベルが自動的に調整されない空間にいることがわかっているので、オフセット参照空間を要求して、ビューアーの高さを推定床レベルの 0 メートルより 1.5 メートル上にシフトします。 その新しい参照空間は、最初に受け取ったものの代わりに使用します。

+ +

最後に、アニメーションフレームの要求が送信されます。

+ +

仕様

+ + + + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName("WebXR","#dom-xrrigidtransform-position","XRRigidTransform.position")}}{{Spec2("WebXR")}}初期定義
+ +

ブラウザーの互換性

+ +
{{Compat("api.XRRigidTransform.position")}}
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 +--- +
{{APIRef("WebXR Device API")}}
+ +

XRRigidTransform() コンストラクターは、点またはオブジェクトの位置と向きを表す新しい {{domxref("XRRigidTransform")}} オブジェクトを作成して返します。 特に、XRRigidTransform は、空間を横断する座標系間で平行移動するための変換を提供するときに使用されます。

+ +

構文

+ +
let xrRigidTransform = new XRRigidTransform(position, orientation);
+ +

パラメーター

+ +
+
position {{optional_inline}}
+
点またはオブジェクトが配置される座標を指定する {{domxref("DOMPointInit")}} に準拠するオブジェクト。 これらの寸法はメートルで指定します。 このパラメーターが省略されているか、DOMPointInit と互換性がない場合、使用される位置は {x: 0, y: 0, z: 0, w: 1} であると見なされます。 w は常に 1 でなければなりません。
+
orientation {{optional_inline}}
+
オブジェクトが向いている方向を指定する {{domxref("DOMPointInit")}} に準拠するオブジェクト。 向きのデフォルト値は {x: 0, y: 0, z: 0, w: 1} です。 指定された向きは、まだ正規化されていない場合は正規化されます。
+
+ +

戻り値

+ +

オブジェクトの位置と向きを原点から指定された position に調整し、orientation によって示される方向を向く変換行列を表すように初期化された新しい {{domxref("XRRigidTransform")}} オブジェクト。

+ +

例外

+ +
+
TypeError
+
指定された position の w 座標の値が 1.0 ではありません。
+
+ +

例

+ +

この例では、シーンのアニメーションの開始が示されています。 特定のタイプの参照空間の要求から始まり、最初のアニメーションフレームを要求する前に、変換に基づいて座標系をシフトします。

+ +
let animationFrameRequestID = 0;
+
+xrSession.requestReferenceSpace("local-floor")
+.then((refSpace) => {
+  xrReferenceSpace = refSpace.getOffsetReferenceSpace(
+        new XRRigidTransform(viewerPosition, viewerOrientation));
+  animationFrameRequestID = xrSession.requestAnimationFrame(drawFrame);
+});
+ +

local-floor タイプの参照空間を要求した後、返された promise は最終的に解決され、その時点で新しい参照空間オブジェクト refSpace を受け取ります。 ビューアーの初期位置と向きから XRRigidTransform を作成した後、新しい変換を {{domxref("XRReferenceSpace.getOffsetReferenceSpace", "getOffsetReferenceSpace()")}} に渡して別の参照空間を作成します。 オフセットして、その原点が viewerPosition によって指定された座標と同じ空間内の場所に配置されるようにします。 向きも同様に修正されます。

+ +

次に、{{domxref("XRSession.requestAnimationFrame", "requestAnimationFrame()")}} が呼び出され、描画する新しいアニメーションフレームを要求します。 drawFrame() コールバックは、システムが次のフレームを描画する準備ができたときに実行されます。

+ +

移動、向き、モーションには、さらに多くの例があります。

+ +

仕様

+ + + + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName("WebXR","#dom-xrrigidtransform-xrrigidtransform","XRRigidTransform()")}}{{Spec2("WebXR")}}初期定義
+ +

ブラウザーの互換性

+ +
{{Compat("api.XRRigidTransform.XRRigidTransform")}}
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 +--- +

{{APIRef("WebXR")}}

+ +

WebXR Device API の XRTargetRayMode 列挙型は、入力コントローラーのターゲティング光線を生成する方法を記述します。 ターゲティングは、視線追跡システムを使用してターゲットを見るか、ハンドコントローラー、グローブ、またはモーショントラッキングシステムを使用してターゲットを指すか、画面上で指やマウスを使用してターゲットをタップまたはクリックすることによって行うことができます。

+ +

通常、ターゲット光線は、ターゲティングシステムのソースから、ユーザーが見ている方向または指している方向にターゲット光線に沿って描画されます。 光線の終点を示す方法と同様に、光線のスタイルは一般的にあなた次第です。 ターゲットとなる点またはオブジェクトは、図形を描画するか、ターゲットとなる表面またはオブジェクトを強調表示することによって示される場合があります。

+ +
+
+
ハンドコントローラーから放出されるターゲット光線。
+ハンドコントローラーから放出されるターゲット光線を示すスクリーンショット
+
+ +

ターゲット光線は、単純な線（理想的には距離とともにフェードする）から、上のスクリーンショットに示されているサイエンスフィクションの「フェイザー」スタイルなどのアニメーション効果まで、何でもかまいません。

+ +

値

+ +
+
gaze（視線）
+
ユーザーは、ユーザーが見ている方向を検出する視線追跡システム（または視線入力）を使用しています。 ターゲット光線は、ビューアーの目を起点として描画され、ビューアーが見ている方向に追従します。
+
screen（画面）
+
ターゲット光線の方向は、タッチスクリーン、マウス、またはその他の触覚入力デバイスをタップして示します。
+
tracked-pointer（追跡ポインター）
+
ターゲティングは、ユーザーがターゲットの方向に向けるハンドヘルドデバイスまたはハンドトラッキングシステムを使用して行われます。 ターゲット光線は、手（または手の中のオブジェクト）からターゲット方向に伸びます。 方向はプラットフォーム固有のルールを使用して決定されますが、そのようなルールが存在しない場合は、ユーザーが人差し指を手からまっすぐに向けていると仮定して方向が選択されます。
+
+ +

例

+ +

このコードの断片は、フレームごとに1回呼び出される関数の一部を示しています。 null 以外の {{domxref("XRInputSource.targetRaySpace", "targetRaySpace")}} を持つ入力を探します。 このプロパティの値を持つ入力は、ターゲット光線をユーザーから外側に投影する入力を表します。

+ +

このような入力ごとに、この例では、{{domxref("XRInputSource.targetRayMode", "targetRayMode")}} が tracked-pointer である入力を探します。 これは、入力が実際には、視線入力デバイス、画面タップ、またはマウスクリックではなく、ターゲティングデバイスを表すことを目的としていることを示しています。 追跡ポインターの場合、関数 myRenderTargetRayAsBeam() が呼び出され、入力コントローラーの仮想位置から、それが指している方向に外側にビームをレンダリングします。

+ +

コードは、仮想空間でのユーザーの手の位置を表すコントローラーや任意のオブジェクトの描画、その他の入力関連のタスクなどを引き続き実行する必要があります。

+ +
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);
+      }
+    }
+
+    /* ... */
+  }
+}
+
+ +

詳細とより完全な例については、入力と入力ソースの記事を参照してください。

+ +

仕様

+ + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('WebXR','#enumdef-xrtargetraymode','XRTargetRayMode')}}{{Spec2('WebXR')}}初期定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.XRTargetRayMode")}}

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf