WebXRハンド

ジェスチャーコントロールを使えば、Meta Horizonホームや多くのネイティブアプリのUIで、ナビゲーションやインタラクション用コントローラーの代替入力法として、手を使用できます。Browserはすでに2Dウェブページのブラウジング中のジェスチャーコントロールをサポートしていますが、BrowserでのWebXRエクスペリエンスへの手の統合も公式にサポートされるようになりました。これにより、新しいレベルのプレゼンスとソーシャルエンゲージメントを実現する、コントローラーを必要としないより自然なインタラクションの無限の可能性が生まれます。

WebXRハンド解説⁠は、WebXRでの手の実装を開始するための優れた資料です。APIは、ユーザーの両手それぞれの25個の骨組みのジョイントを公開しており(下の図を参照)、ジェスチャー認識や手のモデルのレンダリングに使用できます。手はコントローラー付きのXRInputSource⁠として表示されます。注目すべきは、手のtargetRaySpace⁠に、Meta Horizonホームにある手のポインティングレイの動きと一致するエミュレートされたレイが入っていることです。これは、ユーザーの前方にUIがあることを想定しているので、ターゲットレイは常にその一般的な方向を指しています。

Bone points in WebXR Hands implementation

Meta QuestヘッドセットでのWebXRの手は、システムで使用するために両方の手のパームピンチのジェスチャーを予約しています。どちらかの手でパームピンチを行うには、手のひらを自分の目の高さに上げて見つめ、メニューアイコン(左手)またはMeta Questアイコン(右手)が表示されるまで親指と人差し指を接触させ、それから離します。左手でパームピンチを実行することは左コントローラーでメニューボタンを押すことに相当し、これを行うとWebXRセッションから離れます。パームピンチジェスチャーを通常のピンチジェスチャーと混同しないでください。通常のピンチジェスチャーは、ボタンを押す動作として、手のエミュレートされたゲームパッド属性に実装されています。ポイントアンドピンチ、ピンチアンドスクロールなどの、どこでも使える一般的な手のジェスチャーについては、こちら⁠でご確認ください。これらは、WebXRでの手のカスタムジェスチャーを実装する際に参照できます。手の使用に関するベストプラクティスについては、ベストプラクティスをご覧ください。

WebXRハンドのエクスペリエンスの実装は、次の3つの手順で行います。

手のモデルを読み込む: Metaは一連の手の標準モデルアセットを、公開されているWebXRインプットプロフィール⁠ライブラリに「generic-hand」というプロフィールIDで提供しています。このIDは、手のXRInputSourceオブジェクトのプロフィールIDの1つです。一方、WebXRハンドインプットモジュール仕様の骨組みジョイントセクション⁠に指定されているジョイント階層と配置に準拠してさえいれば、手のカスタムモデルも使用できます。

ジェスチャーコントロールデータを取得する: ジョイントポーズデータは、XRFrameインターフェース⁠で取得できます。現在、2つのAPIを使ってジョイントポーズを取得できます。getJointPoseを使うと、1回に1つのジョイントポーズを取得できるので、使用されている手のモデルにネストされたジョイント階層がある(つまり、ジョイントがそれぞれ異なる基本空間を持つ)場合におすすめです。fillPosesを使うと、1回で同じ基本空間を持つすべてのジョイントポーズを取得できるので、モデルでフラットなジョイント階層が使用されている場合(Browserが公開しているもの)におすすめです。3Dライブラリが使用されている場合、より高いレベルのAPIを使用すればジョイントポーズデータを利用できる可能性があります。THREE.jsでは、ジョイントデータは、WebXRController⁠クラスの「joints」フィールドで保持され、更新されます。Babylon.jsでは、デフォルトでは非表示の25個のジョイントメッシュが、WebXRHand⁠クラスの「trackedMeshes」フィールドに作成され、保存されます。

ジェスチャーコントロールデータを使って手のモデルのジョイントノードを更新する: いったん手のモデルを読み込んでジョイントのトラッキングデータにアクセスすれば、後は各ジョイントの位置と方向をジェスチャーコントロールデータからそれぞれの手のモデルにコピーするだけです。マッピングにインデックスを付けるジョイント名は、WebXRハンドインプットモジュール仕様の骨組みジョイントセクション⁠にあります。

以下は、WebXRハンドの例です。

基本的な手の例: 手を使った没入型VRセッション

THREE.jsを使った基本的な手の例

ハンドインプットの例⁠ - THREE.jsでの手の設定に関する基本的なデモ

ハンドキューブの例⁠ - 手を使用したキューブの作成

ハンドプロフィールの例⁠ - さまざまな手のモデルの切り替え

THREE.jsを使用した高度な手の例

ボタンを押す例⁠ - 接触検出を使って、ユーザーがボタンを押したときにイベントをトリガーする

ポイントアンドクリックの例⁠ - しずく状のターゲットレイを使って、シーン内でボタンをポイントしてクリックする

ポイントアンドドラッグの例⁠ - しずく状のターゲットレイを使って、シーン内でオブジェクトをドラッグ&ドロップする