From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../getoffsetreferencespace/index.html | 150 +++++++++++++++++++++ files/ja/web/api/xrreferencespace/index.html | 120 +++++++++++++++++ .../api/xrreferencespace/reset_event/index.html | 122 +++++++++++++++++ 3 files changed, 392 insertions(+) create mode 100644 files/ja/web/api/xrreferencespace/getoffsetreferencespace/index.html create mode 100644 files/ja/web/api/xrreferencespace/index.html create mode 100644 files/ja/web/api/xrreferencespace/reset_event/index.html (limited to 'files/ja/web/api/xrreferencespace') diff --git a/files/ja/web/api/xrreferencespace/getoffsetreferencespace/index.html b/files/ja/web/api/xrreferencespace/getoffsetreferencespace/index.html new file mode 100644 index 0000000000..e5344a79db --- /dev/null +++ b/files/ja/web/api/xrreferencespace/getoffsetreferencespace/index.html @@ -0,0 +1,150 @@ +--- +title: XRReferenceSpace.getOffsetReferenceSpace() +slug: Web/API/XRReferenceSpace/getOffsetReferenceSpace +tags: + - API + - AR + - Mixed + - Orientation + - Position + - Reality + - Reference + - Rotate + - VR + - Virtual + - WebXR + - WebXR API + - WebXR Device API + - XR + - XRReferenceSpace + - augmented + - getOffsetReferenceSpace + - move + - movement +translation_of: Web/API/XRReferenceSpace/getOffsetReferenceSpace +--- +

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

+ +

{{domxref("XRReferenceSpace")}} インターフェイスの getOffsetReferenceSpace() メソッドは、メソッドが呼び出されたオブジェクトと 3D 空間内の特定の点との間の位置の相対的な違いを表す新しい参照空間オブジェクトを返します。 getOffsetReferenceSpace() によって返されるオブジェクトは、{{domxref("XRReferenceSpace")}} で呼び出された場合は XRReferenceSpace であり、{{domxref("XRBoundedReferenceSpace")}} で呼び出された場合は XRBoundedReferenceSpace です。

+ +

つまり、3D 空間にオブジェクトがあり、それに対して別のオブジェクトを相対的に配置する必要がある場合は、getOffsetReferenceSpace() を呼び出して、getOffsetReferenceSpace() を呼び出すオブジェクトの位置と向きを基準にして、2番目のオブジェクトに持たせる位置と向きを渡します。

+ +

次に、シーンを描画するときに、オフセット参照空間を使用して、オブジェクトを相互に相対的に配置するだけでなく、必要な変換を適用して、ビューアーの位置に基づいてオブジェクトを適切にレンダリングできます。 これは、{{anch("Implementing rotation based on non-XR inputs", "非 XR 入力に基づく回転の実装")}}の例で示されています。 この例では、この方法を使用して、ユーザーがマウスを使用して視野角をピッチおよびヨーできるようにする方法を示しています。

+ +

構文

+ +
offsetReferenceSpace = xrReferenceSpace.getOffsetReferenceSpace(originOffset);
+ +

パラメーター

+ +
+
originOffset
+
新しい参照空間の原点へのオフセットを指定する {{domxref("XRRigidTransform")}}。 これらの値は、現在の参照空間の位置と向きに追加され、その結果は、新しく作成された {{domxref("XRReferenceSpace")}} の位置と向きとして使用されます。
+
+ +

返り値

+ +

メソッドが呼び出された参照空間と同じネイティブの原点を持つが、オブジェクトから originOffset で指定された点までの隔たりを示す原点オフセットを持つ参照空間を記述する新しい {{domxref("XRReferenceSpace")}} オブジェクト。

+ +

このメソッドを呼び出すオブジェクトが {{domxref("XRBoundedReferenceSpace")}} の場合、返されるオブジェクトも XRBoundedReferenceSpace です。 新しい参照空間の {{domxref("XRBoundedReferenceSpace.boundsGeometry", "boundsGeometry")}} には、元のオブジェクトの boundsGeometry が設定され、それぞれの点に originOffset の逆行列（inverse）が乗算されます。

+ +

例

+ +

以下は、getOffsetReferenceSpace() の使用方法を示すいくつかの例です。

+ +

ビューアーのテレポートまたは位置の設定

+ +

シーンを最初に作成するときに、3D 世界内でのユーザーの位置を設定する必要がある場合があります。 getOffsetReferenceSpace() を使用してこれを行うことができます。

+ +
xrSession.requestReferenceSpace("local")
+.then((refSpace) => {
+  xrReferenceSpace = refSpace;
+  xrReferenceSpace = xrReferenceSpace.getOffsetReferenceSpace(
+        new XRRigidTransform(startPosition, {x:0, y:0, z:1.0, w: 1.0}));
+  xrSession.requestAnimationFrame(drawFrame);
+});
+ +

このコードでは、ローカル参照空間を取得し、getOffsetReferenceSpace() を使用して、原点を startPosition で指定された位置に調整し、向きが Z 軸に直に沿った新しい空間を作成します。 次に、{{domxref("XRSession")}} の {{domxref("XRSession.requestAnimationFrame", "requestAnimationFrame()")}} を使用して最初のアニメーションフレームを要求します。

+ +

非 XR 入力に基づく回転の実装

+ +

WebXR が直接サポートしている入力コントロールは、すべて専用の VR または AR の入力デバイスです。 マウス、キーボード、またはその他の入力デバイスを使用して 3D 空間内のオブジェクトを移動または変換したり、ユーザーが空間内を移動できるようにするには、入力を読み取って移動するためのコードを記述する必要があります。

+ +

これは、getOffsetReferenceSpace() のもう1つの良いユースケースです。 この例では、ユーザーがマウスを右クリックしながら動かすことで、視野角の変更により周囲を見回せるコードを示します。

+ +

まず、{{domxref("Element.mousemove_event", "mousemove")}} イベントのイベントハンドラーを追加します。 これは、マウスの右ボタンが押されている場合に回転を実行するコードを呼び出します。 {{domxref("Element.oncontextmenu", "oncontextmenu")}} イベントで {{domxref("Event.preventDefault", "preventDefault()")}} を呼び出すことにより、このイベントが無視されるように設定していることにも注意してください。 これにより、右クリックによってコンテキストメニューがブラウザーに表示されなくなります。

+ +
canvas.oncontextmenu = (event) => { event.preventDefault(); };
+canvas.addEventListener("mousemove", (event) => {
+  if (event.buttons & 2) {
+    rotateViewBy(event.movementX, event.movementY);
+  }
+});
+
+ +

次に、rotateViewBy() 関数は、mousemove イベントからのマウスデルタ値に基づいて、マウスルック（mouse look）方向のヨーとピッチを更新します。 ピッチを制限しているため、真上と真下を超えて見ることはできません。 これが呼び出されるたびに、新しいオフセットを使用して、mousePitch と mouseYaw の現在の値が更新されます。

+ +
let mouseYaw = 0.0;
+let mousePitch = 0.0;
+const inverseOrientation = quat.create();
+const MOUSE_SPEED = 0.003;
+
+function rotateViewBy(dx, dy) {
+  mouseYaw += dx * MOUSE_SPEED;
+  mousePitch += dy * MOUSE_SPEED;
+
+  if (mousePitch < -Math.PI * 0.5) {
+    mousePitch = -Math.PI * 0.5;
+  } else if (mousePitch > Math.PI * 0.5) {
+    mousePitch = Math.PI * 0.5;
+  }
+}
+ +

最後に、計算したヨーとピッチをビューアーの向きに実際に適用するコードが必要です。 この関数 applyMouseMovement() は、次のことを処理します。

+ +
function applyMouseMovement(refSpace) {
+  if (!mouseYaw && !mousePitch) {
+    return refSpace;
+  }
+
+  quat.identity(inverseOrientation);
+  quat.rotateX(inverseOrientation, inverseOrientation, -mousePitch);
+  quat.rotateY(inverseOrientation, inverseOrientation, -mouseYaw);
+
+  let newTransform = new XRRigidTransform({x: 0, y:  0, z: 0},
+                         {x: inverseOrientation[0], y: inverseOrientation[1],
+                          z: inverseOrientation[2], w: inverseOrientation[3]});
+
+  return refSpace.getOffsetReferenceSpace(newTransform);
+}
+ +

この関数は、現在のピッチ値とヨー値からビューアーの向きを決めるために使用する逆向き行列を作成し、{{domxref("XRRigidTransform.XRRigidTransform", "new XRRigidTransform()")}} を呼び出すときにその行列を向きのソースとして使用します。 次に、新しい {{domxref("XRRigidTransform")}} の参照空間がフェッチされ、呼び出し元に返されます。

+ +

この新しい参照空間は、ビューアーの位置は変更しませんが、蓄積されたマウス入力から生成されたピッチとヨーの値に基づいて向きを変更します。 applyMouseMovement() は、フレームを描画するときに、{{domxref("XRFrame.getViewerPose", "getViewerPose()")}} を使用してビューアーのポーズをフェッチする直前に呼び出す必要があり、レンダリングはこの参照空間で実行する必要があります。

+ +

これに似たコードが、移動、向き、モーションという WebXR チュートリアルの幅広い記事で使用されているのを見ることができます。 特に、WebXR セッションの開始というセクションを確認してください。

+ +

仕様

+ + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('WebXR','#dom-xrreferencespace-getoffsetreferencespace','getOffsetReferenceSpace()')}}{{Spec2('WebXR')}}初期定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.XRReferenceSpace.getOffsetReferenceSpace")}}

diff --git a/files/ja/web/api/xrreferencespace/index.html b/files/ja/web/api/xrreferencespace/index.html new file mode 100644 index 0000000000..12222a3ab7 --- /dev/null +++ b/files/ja/web/api/xrreferencespace/index.html @@ -0,0 +1,120 @@ +--- +title: XRReferenceSpace +slug: Web/API/XRReferenceSpace +tags: + - API + - AR + - Augmented Reality + - Distances + - Interface + - Mixed Reality + - Offsets + - Reference + - Spaces + - VR + - Virtual Reality + - WebXR + - WebXR API + - WebXR Device API + - XR + - XRReferenceSpace + - matrix + - transform +translation_of: Web/API/XRReferenceSpace +--- +

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

+ +

WebXR Device API の XRReferenceSpace インターフェイスは、指定された追跡の振る舞いを使用して、仮想世界内の特定の追跡対象のエンティティまたはオブジェクトの座標系を記述します。 追跡の振る舞いは、選択した参照空間タイプによって定義されます。 いくつかの異なる追跡の振る舞いのサポートを追加し、追跡対象オブジェクトと世界の別の場所との間のオフセット変換を記述する新しい参照空間を要求することにより、基本クラス {{domxref("XRSpace")}} を拡張します。

+ +

すべての参照空間（制限付き参照空間を除く）は、XRReferenceSpace タイプを使用して記述されます。 制限付き空間は、{{domxref("XRBoundedReferenceSpace")}} オブジェクトとして実装されます。 これは、ビューアーが移動するのに「安全」な境界を確立できる特別な空間です。 実世界のカメラで移動を追跡するシステムなど、ユーザーが物理的に動き回ることができる XR システムの場合、この境界は、物理的な障害によるものか、XR ハードウェアの制限によるものかにかかわらず、ユーザーが動き回ることができる領域の縁を確立します。 ユーザーが物理的および仮想的な障害物と衝突しないようにするための境界の使用の詳細については、制限付き参照空間を使用したビューアーの保護の記事を参照してください。

+ +

プロパティ

+ +

{{domxref("XRSpace")}} から継承されたプロパティ（現時点では、ない）に加えて、XRReferenceSpace は {{domxref("EventTarget")}} のプロパティも継承します。 XRReferenceSpace は、追加のプロパティを定義しません。

+ +

メソッド

+ +

親インターフェイスである {{domxref("XRSpace")}} から継承されたメソッド（現時点では、ない）に加えて、XRReferenceSpace は {{domxref("EventTarget")}} からメソッドを継承します。 XRReferenceSpace は、次のメソッドも提供します。

+ +
+
{{domxref("XRReferenceSpace.getOffsetReferenceSpace", "getOffsetReferenceSpace()")}} 
+
メソッドを呼び出したものと同じ型（つまり、XRReferenceSpace または {{domxref("XRBoundedReferenceSpace")}}）の新しい参照空間オブジェクトを作成して返します。 新しい参照空間を使用して、メソッドが呼び出されたオブジェクトの参照空間から別の座標空間に座標を変換できます。 これは、レンダリング中にオブジェクトを配置したり、3D 空間でビューアーの位置や向きを変更するときに必要な変換を実行したりするのに役立ちます。
+
+ +

イベント

+ +

{{domxref("XRSpace")}} または {{domxref("EventTarget")}} オブジェクトに送信される可能性のある他のイベントに加えて、以下も XRReferenceSpace オブジェクトに適用されます。

+ +
+
{{domxref("XRReferenceSpace.reset_event", "reset")}}
+
+

reset イベントは、ユーザーの環境または場所を基準にして追跡対象オブジェクトの原点で不連続性が発生したことをブラウザーが検出すると、{{domxref("XRReferenceSpace")}} オブジェクトに送信されます。 これは、例えば、ユーザーが XR デバイスを再調整した後や、追跡を失って回復した後にデバイスが原点を自動的に調整した場合に発生する可能性があります。

+ +

{{domxref("EventTarget.addEventListener", "addEventListener()")}} の使用に加えて、{{domxref("XRReferenceSpace.onreset", "onreset")}} イベントハンドラープロパティを設定することにより、reset イベントハンドラーを確立できます。

+
+
+ +

参照空間タイプ

+ +

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

+ +

使用上の注意

+ +

XRReferenceSpace の作成

+ +

XRReferenceSpace を取得する必要がある状況は2つあります。 1つ目は、シーンを設定し、{{domxref("XRSession")}} の期間中、世界に対するユーザーの視点を表す参照空間を取得する必要がある場合です。 これを行うには、{{domxref("XRSession")}} のメソッド {{domxref("XRSession.requestReferenceSpace", "requestReferenceSpace()")}} を呼び出して、取得する参照空間タイプを指定します。

+ +
xrSession.requestReferenceSpace("local").then((refSpace) => {
+  xrReferenceSpace = refSpace;
+  /* ... */
+});
+ +

新しい参照空間を取得する必要があるもう1つの状況は、原点を新しい位置に移動する必要がある場合です。 これは通常、例えば、あなたのプロジェクトで、ユーザーが XR デバイスを介して接続されていないキーボード、マウス、タッチパッド、ゲームコントローラーなどの入力デバイスを使用して環境内を移動できる場合に行われます。 原点は通常、空間内のユーザーの位置であるため、原点を変更して、ユーザーの移動と方向の変更を反映する必要があります。

+ +

ユーザーの世界のビューを移動または回転するには、その視点を表すために使用される XRReferenceSpace を変更する必要があります。 ただし、XRReferenceSpace は不変であるため、代わりに、変更された視点を表す新しい参照空間を作成する必要があります。 これは、{{domxref("XRReferenceSpace.getOffsetReferenceSpace", "getOffsetReferenceSpace()")}} メソッドを使用して簡単に実行できます。

+ +
let offsetTransform = new XRRigidTransform({x: 2, y: 0, z: 1},
+                                           {x: 0, y: 1, z: 0, w: 1});
+xrReferenceSpace = xrReferenceSpace.getOffsetReferenceSpace(offsetTransform);
+ +

これにより、XRReferenceSpace を新しいものに置き換えます。 その原点と向きは、新しい原点を現在の原点に対して (2, 0, 1) に配置するように調整し、前の世界の向きに対してビューアーを真上に向けるように空間を向ける単位{{Glossary("quaternion","クォータニオン")}}を指定して回転します。

+ +

ジオメトリー

+ +

XRReferenceSpace のネイティブ原点は、+X が右側、+Y が上向き、+Z が「後方」またはユーザーに向かっていると見なされるように常に構成されています。

+ +

仕様

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

ブラウザーの互換性

+ + + +

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

+ +

関連情報

+ + diff --git a/files/ja/web/api/xrreferencespace/reset_event/index.html b/files/ja/web/api/xrreferencespace/reset_event/index.html new file mode 100644 index 0000000000..e50f8ee75f --- /dev/null +++ b/files/ja/web/api/xrreferencespace/reset_event/index.html @@ -0,0 +1,122 @@ +--- +title: 'XRReferenceSpace: reset イベント' +slug: Web/API/XRReferenceSpace/reset_event +tags: + - API + - AR + - Event + - Graphics + - Reality + - Reference + - VR + - Virtual + - WebXR + - WebXR API + - WebXR Device API + - XR + - XRReferenceSpace + - augmented + - reset +translation_of: Web/API/XRReferenceSpace/reset_event +--- +

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

+ +

ネイティブの原点または実際の原点のいずれかで不連続が検出されると、reset イベントが {{domxref("XRReferenceSpace")}} オブジェクトに送信され、参照空間を使用して方向付けられたオブジェクトの位置または方向がジャンプします。 これは、ユーザーが XR デバイスを較正または再較正する場合、またはデバイスがユーザーの追跡を失った後に原点を自動的に変更してから再び取得する場合によく見られます。

+ +

{{domxref("XRBoundedReferenceSpace")}} オブジェクトの場合、{{domxref("XRBoundedReferenceSpace.boundsGeometry", "boundsGeometry")}} が変更されたときに reset イベントを発生させることもできます。

+ +

いずれの場合も、イベントは、新しい原点を利用する WebXR アニメーションフレームが実行される前に送信されます。

+ + + + + + + + + + + + + + + + + + + + +
バブリングあり
キャンセル不可
インターフェイス{{domxref("XRReferenceSpaceEvent")}}
イベントハンドラープロパティ{{domxref("XRReferenceSpace/onreset", "onreset")}}
+ +

使用上の注意

+ +

reset イベントは、参照空間の原点を変更し、イベントの {{domxref("XRReferenceSpaceEvent.transform", "transform")}} プロパティで示されるように移動および回転することにより、座標系がリセットまたは再構成されたことを示します。 イベントは、アニメーションフレームのコールバックが実行されて保留中のフレームがレンダリングされる前に送信され、これらのコールバックで更新された座標系が使用可能であることを確認します。

+ +

リセットが発生する理由はいくつかあります。 それらの間で最も一般的なものは次のとおりです。

+ + + +
+

注: 参照空間が以前の原点の追跡を取り戻すことができる場合、reset イベントは発生しません。 これは、原点が強制的に再配置されていないことを意味します。 このイベントは、追跡喪失から回復するために原点を再配置する必要がある場合にのみ発生します。

+
+ +

手動リセット

+ +

VR ヘッドセットを使用したことがある人なら、起動したときに正面を向いているのに、ヘッドセットは空や床を見ていると勘違いしたり、ハンドコントローラーをまっすぐ前に向けているのに、どこか上や右に向けていると勘違いしたりしたことがあるでしょう。このような場合、通常はどこかのボタンを押し続けると、世界がデバイスの現在の向きに再同期されます。 これは、ヘッドセットの向きに基づいた1つまたは複数の参照空間に `reset` イベントを送信することで機能します。

+ +

不連続性の処理

+ +

ビューアーの位置のジャンプは、{{domxref("XRPose")}} の Boolean プロパティ {{domxref("XRPose.emulatedPosition", "emulatedPosition")}} を監視することで処理できます。 ビューアーの位置のジャンプが、emulatedPosition が true から false に切り替わるのと同時に起こった場合、ビューアーは追跡を回復し、新しい位置は以前にエミュレートされた値からの補正を表します。 これは、サイトまたはアプリが、（XR デバイスが移動を導入するために使用するユーザーの物理的な移動ではなく）ビューアーの位置や向きを明示的に変更することによる空間内のモーションをシミュレートしない場合に一般的に望ましい振る舞いです。

+ +

ただし、そのような「テレポート」が使用されている場合は、追跡を回復した後に、追加の潜在的に不快なジャンプが発生する可能性があり、実際にはユーザーの位置をジャンプしないようにする必要があります。 これを許可する代わりに、{{domxref("XRReferenceSpace.getOffsetReferenceSpace", "getOffsetReferenceSpace()")}} を呼び出す前に計算されたテレポーテーションオフセットに emulatedPosition を統合して、更新された実際の原点が前のフレームからビューアーの位置がジャンプした隔たりによって調整された新しい参照空間を作成できます。 このようにして、ユーザーの位置を2回ではなく1回だけ変更します。

+ +

不連続の大きさの効果

+ +

不連続が十分に小さく、デバイスが同じ追跡領域内で追跡を取り戻せる場合、reset イベントは発生しません。 また、ユーザーの近くで空間の安定性を維持するために、時間の経過とともにネイティブの原点に小さな調整を加えるため、unbounded 参照空間で発生することもありません。 大きな不連続のみがリセットをトリガーします。

+ +

例

+ +

reset イベントのハンドラーを追加するには、2つの方法のいずれかを使用できます。 まず、次のように {{domxref("EventTarget.addEventListener", "addEventListener()")}} メソッドを使用できます。

+ +
viewerRefSpace.addEventListener("reset", (event) => {
+  /* perform reset related tasks */
+});
+
+ +

2番目のオプションは、次のように XRReferenceSpace オブジェクトの {{domxref("XRReferenceSpace.onreset", "onreset")}} イベントハンドラープロパティを設定することです。

+ +
viewerRefSpace.onreset = (event) => {
+  /* perform reset related tasks */
+};
+
+ +

仕様

+ + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('WebXR','#eventdef-xrreferencespace-reset','reset event')}}{{Spec2('WebXR')}}初期定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.XRReferenceSpace.onreset")}}

-- cgit v1.2.3-54-g00ecf