MetaQuestでRayインタラクション

0. 本記事の内容

今回はMeta Questでコントローラや手から出るポインタ(Ray)とのインタラクションについてです。具体的にはRayを用いたHover(ポインティング)や選択(クリック)の検出を実現する手順について紹介します。
GitHubで公開しているサンプルの05-RayInteractionまたは05-RayInteraction-ARシーンでも動作を確認できます。

*この動画はAR版ですがAR/VR両対応です。

なお本記事は下記で作成したVRまたはARのシーンで表示している立方体とのインタラクションを前提としています。立方体に特別なコンポーネントを追加せずQuestで眺めるだけの状態からのスタートとなりますので、他のプロジェクトでも同様の状況であれば本記事と続きの記事の内容を実践することでオブジェクト操作を実現できます。(OVRCameraRigではなくOVRCameraRigInteractionプレハブの使用を前提としています)

[VR版]

[AR版]

1. シーンを複製

前回の記事で作成したシーンを編集することも可能ですが、これを壊さずにオブジェクト操作を試すためシーンを複製します。不要な場合は読み飛ばしてください。

上記の記事で作成したVR版またはAR版のシーンを開く
File -> Save As... をクリックして現在のシーンを新しい名前で保存
*本記事ではRayInteractionとします
Hierarchyに表示されるシーン名がRayInteractionになっていることを確認

2. オブジェクトとRayの交差検知を有効化

Rayとの相互作用を実現するため、オブジェクトにRayとの相互作用を検出するスクリプトを追加します

Hierarchyで操作対象のオブジェクト(Cube)を選択
Inspectorで表示されるCubeの詳細情報にBoxColliderが適用されていることを確認
* Cube以外のオブジェクトの場合は、各オブジェクトに合わせたCollider
* 自作のモデルの場合は手作業でColliderを追加
Inspector下方のAdd Componentボタンをクリック
検索領域にInteractableと入力
表示された候補の中からRay Interactableを選択

追加されたRay Interactableを確認するとSurfaceの項目がNoneとなっています。この項目はRayとの交差を判定するための形状をRay Interactableを登録するので必須となります。

CubeのInspectorの下方のAdd Coponentをクリック
Colliderで検索し、Collider Surfaceを選択
Collider SurfaceにCubeをドラッグ&ドロップ
*Cubeのコライダーの形状を交差判定のための形状として使用
RayInteractableのSurfaceにCubeをドラッグ&ドロップ
*上記で作成した形状情報(Surface)をRayInteractableに登録

3. Rayとのインタラクションのイベント取得

上記の操作によりRayとのインタラクションを行う準備ができたので、Hover(ポインティング)や選択(クリック)をイベントとして受け取る機能を追加します。

HierarchyでCubeを選択
CubeのInspectorの下方のAdd CoponentからInteractableで検索
Interactable Unity Event Wrapperを選択
Interactable Unity Event WrapperのInteractable ViewにCubeをドラッグ&ドロップ
*Ray Interactableを登録し、HoverやSelectのイベントの発火につなげる

4. Rayインタラクションの動作確認

実際にイベントを受け取って動作を確認します。本記事ではHoverやSelectの状態をテキストで表示します。

Hierarchyの空白を右クリック
3D Object -> Text - TextMeshProをクリック
*TextMeshProが未インストールの場合はダイアログの案内に沿ってTextMeshProをインストール。(サンプルのインストールは不要)
Inspectorで下記のようにText(TMP)の設定を変更しCubeの上にテキストを表示

Inspector内のTextMeshPro-Textに注目
Alignmentで文字の位置を中央寄せに変更
CubeをクリックしてInspectorのInteractable Unity Event Wrapperに注目
WhenHover()の右下の + をクリック
Noneと書かれた領域にText(TMP)をドラッグ&ドロップ
NoFunction書かれたドロップダウンメニューを開く
TextMeshPro -> string textをクリック
ドロップダウンメニューの下に表示されるテキストエリアにHover開始時に表示したいテキストを入力(例: Hover)

上記の操作でHover(ポインティング)開始時にHoverと表示されるようになります。同じ要領で下記のイベントで表示するテキストを設定
When Unhover() : Un-Hover
When Select() : Select
When Unselect() : Un-Select