XRInputSource: targetRayMode プロパティ

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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

一般的には、ターゲティングシステムのソースから、ユーザーが見ている、または指している方向のターゲット光線に沿って、ターゲット光線が描かれます。光線のスタイルは一般的に自由で、光線の終点を示す方法も自由です。ターゲットとなるポイントやオブジェクトは、図形を描いたり、ターゲットとなる表面やオブジェクトをハイライトすることで示されるかもしれません。

ターゲット光線はハンドコントローラーが影響します。

ハンドコントローラからターゲット光線を照射している画面

ターゲット光線は、単純な線(理想的には距離に応じて消えていく)から、上のスクリーンショットにあるような SF の「フェイザー」スタイルのようなアニメーション効果まで、さまざまなものがあります。

ターゲット光線を生成してユーザーに提示する際に、どの方法を使用するかを示す文字列です。指定できる値は次の通りです。

gaze (視線)

ユーザーは、ユーザーが見ている方向を検出する視線追跡システム(または視線入力)を使用しています。 ターゲット光線は、ビューアーの目を起点として描画され、ビューアーが見ている方向に追従します。

screen (画面)

ターゲット光線の方向は、タッチスクリーン、マウス、またはその他の触覚入力機器をタップして示します。

tracked-pointer (追跡ポインター)

ターゲティングは、ユーザーがターゲットの方向に向けるハンドヘルド機器またはハンドトラッキングシステムを使用して行われます。 ターゲット光線は、手 (または手の中のオブジェクト) からターゲット方向に伸びます。方向はプラットフォーム固有のルールを使用して決定されますが、そのようなルールが存在しない場合は、ユーザーが人差し指を手からまっすぐに向けていると仮定して方向が選択されます。

使用上の注意

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

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

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

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

js
function updateInputSources(session, frame, refSpace) {
  for (const source of session.getInputSources()) {
    const targetRayPose = frame.getPose(inputSource.targetRaySpace, refSpace);

    if (targetRayPose) {
      if (source.targetRayMode === "tracked-pointer") {
        myRenderTargetRayAsBeam(targetRayPose);
      }
    }

    // …
  }
}

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

仕様書

Specification
WebXR Device API
# dom-xrinputsource-targetraymode

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
targetRayMode

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support

関連情報