【XR Kaigi 2023解説用】MRTK3 を使ったコンテンツ（空間操作/ハンドメニュー）を作成する（共通）

クロスプラットフォームライブラリ「Mixed Reality Toolkit 3」を使ってみよう

この記事は、XR Kaigi 2023で登壇した「Mixed Reality Toolkit 3 で始めるクロスプラットフォーム開発」の中で解説した実装に関する記事です。

2023年9月にリリースされた「Mixed Reailty Tookit 3」の環境構築とUX部品を使ってみたいと思った人向けに作成しました。MRTK3の概要については XR Kaigi内のセッションでも紹介していますが、関連ドキュメントなど詳細は以前記事にしたものがあるので合わせて参考にしてください。

本記事に関連する記事は複数あります。

上記記事は本記事で作成した基本的なMRTK3を各デバイス向けの機能を利用して拡張し、各デバイス向けにビルドをする手順を整理したものになります。
まずは、この手順を参考にMRTK3での開発についての基本的な理解を進めた後に各デバイス毎の機能や設定を行うことでMRTK3をうまく活用することによる開発の効率化などを体験してもらうことが可能だと思います。

開発環境について

開発環境として必要なものは最低限Unityとなります。また、MRTK3を導入するために利用できるMixed Reality Feature Toolと呼ばれるパッケージ導入用のツールも利用します。

Unityのバージョンについてはデバイスによってはサポートバージョンが異なる場合があります。
本記事では以下の通り使い分けを行っています。

• Meta Quest 3向け　→　Unity 2022.3.7f1
• HoloLens 2, ThinkReality A3, VRX向け　→　Unity2021.3f22

今回の手順ではMeta Quest 3の機能を利用するために「Meta XR SDK(V59)」を利用しています。最新のバージョンはUnity 2021では動作しないためQuest 3のみバージョンを変えています。

本記事で利用する環境として撮っているスクリーンショットは以下のバージョンですが、Unity 2021.3系でも操作方法に大きな違いはありません。デプロイしたいデバイスに合わせて選択してください。

• ツール
  • Unity 2022.3.7f1
  • Mixed Reality Feature Tool
• 導入するライブラリ（インポート時に自動導入される依存ライブラリは未記載）
  • MRTK Input 3.0.0
  • MRTK Spatial Manipulation 3.0.0
  • MRTK Standard Assets 3.0.0
  • MRTK UX Components 3.1.0
  • MRTK UX Core Scripts 3.1.0
  • MRTK Graphics Tools 0.5.12
  • MRTK Core Definitions 3.0.0
  • Mixed Reality OpenXR Plugin 1.9.0

作成するアプリについて

今回はMRTK3の基本的な利用方法を紹介することを目的に最小限の機能とUX部品利用しています。機能としては以下のものになります。

• 基本機能
  MRTK3で提供されているカメラやコントローラなどの基本的設定
• Unity Play Modeでのハンドトラッキングシミュレータ
  Unity Editor上で動作確認する際に便利なキーボード操作でハンドトラッキングを行うための機能
• 3Dオブジェクトの空間操作(つかむ、移動/回転/サイズ変更)
  空間に存在する3Dオブジェクトを直感的に操作するための機能
• ハンドメニュー
  手元表示可能なメニューUI.ハンドトラッキングを利用できるデバイスでは手のひらを返すことで表示する事できます。（後述のSolverシステムを利用）
• Solverシステム
  ハンドトラッキングや頭の動きなどを監視し「頭の向きに合わせて物体を追従」、「常に中央に固定」、「手のひらを返すとアクションが発生」といったあらかじめ定義された制約や機能に連携することができる仕組み

実装手順

本記事ではMRTK3の基本的な環境設定とサンプルとして動作するUI部品までの実装を行います。最後にUnity上で動作確認をするまでを実施します。各デバイスへのデプロイについては上記に上げている各デバイス向けの記事を参照してください。

1. Unityで空プロジェクトを作成
2. Mixed Reality Feature ToolでMRTK3を導入
3. MRTK3の設定(Project Settings
4. MRTK3のためのシーン設定
5. 3Dオブジェクト空間操作の設定
6. メニューの作成
7. Unity上で動作確認

1. Unityで空プロジェクトを作成

まずはUnityの空プロジェクトを作成します。Unity Hubを導入している場合は使用するUnityバージョンを指定し[3D]プロジェクトを作成してください。
次の工程に進む際に一度Unityを終了してください。次の手順ではMRTK3を導入するのですがパッケージの再読み込みのためにUnityの再起動する必要になります。

2. Mixed Reality Feature ToolでMRTK3を導入

次にMixed Reality Feature Toolをダウンロードし展開、実行してください。
タイトルから次へ進むと以下のようにプロジェクトのパスを求められるので設定し[次へ]を押します。

するとUnityに導入可能なパッケージが表示されます。Mixed Reality Feature ToolはMRTK3以外にも様々なMixed Reality関連のパッケージを導入することが可能です。

今回は以下の項目にチェックを行い[次へ]を押してください

• MRTK3
  • MRTK Input 3.0.0
  • MRTK Spatial Manipulation 3.0.0
  • MRTK Standard Assets 3.0.0
  • MRTK UX Components 3.1.0
  • MRTK UX Core Scripts 3.1.0
  • MRTK Graphics Tools 0.5.12
  • MRTK Core Definitions 3.0.0
• Platform Support
  • Mixed Reality OpenXR Plugin 1.9.0

Import Featuresでは選択したパッケージの依存関係を確認し不足しているパッケージを確認することができます。基本的には依存関係にあるパッケージが導入が必要ですのですべてがチェックされていることを確認して[次へ]を押します。
Review and ApproveではUnityのPackage.manifestの変更後の状態と、ローカルにダウンロードされるパッケージファイルのリストが表示されます。[Approve]を押して適用してください。なお、この時に古いManifestファイルはバックアップされます。何か問題があった場合はファイルを書き戻すことができます。

以上で、Unityの空プロジェクトにMRTK3関連のパッケージ導入が完了しました。次にUnity上でMRTK3の基本的な設定を行います。

3. MRTK3の設定(Project Settings)

Unityを起動するとすでにMRTK3が導入された状態になっているはずです。まずはMRTK3の設定から行います。本記事では最後にUnity上で動作確認をするのですがそのために必要なMRTK3の設定があります。
Unityの上部メニューから[Edit]-[Project Settings]を選択します。表示された[Project Settings]の項目から[MRTK3]を選択すると以下のような設定画面が表示されます。この設定はMRTK3で提供されるいくつかの機能を利用するためのプロファイル設定になっています。すべての機能を有効化した状態で利用します

。今回はUnity Editor上で動作確認するため一番左の「Windows,mac,Linux settings」タブを選択し、[Assign MRTK Default]を押すことでプロファイルが設定されます。警告が表示されるかもしれませんが、今回は無視しても問題ありません。

次にMRTK3を使用するためのシーン設定を行います。

4. MRTK3のためのシーン設定

Unityを起動すると最初にSmapleSceneが開いていると思うのでこれを使って作りましょう。

最初に[MRTK XR Rig]を導入します。このPrefabにはカメラやモーションコントローラ等の入力系の機能部品など含まれています。これをシーンに導入することでMRTK3の入力系の機能を利用することが可能になります。
[Project]パネルを選択し[MRTK XR Rig]を対象[In Packages]検索します。Prefabが表示されるので[Hierarchy]に追加してください。 最後にHierarchy上位に入っている[Main Camera]を削除します。

次にUnity Editor上で動作確認するために必要な部品も導入します。これを導入するとPlay modeでキーボードによるハンドトラッキングのエミュレーションが可能になります。
先ほどと同じ要領で今度は[MRTK InputSimulator]を検索し見つかったPre
fabをhierarchyに追加します。

この状態でUnity EditorでPlay Modeを実行し、Shift or Spaceを押すと空間に手のゴーストが表示されハンドトラッキング動作を実施することが可能です。
シミュレーションのチートシートはこちらのサイトに記載があるので参考にしてください。

5. 3Dオブジェクト空間操作の設定

次に空間に操作可能なオブジェクトを作成し、各デバイスで操作できることを確認してみましょう。
今回は最初に2つの物体を表示し両方とも操作（移動/回転/サイズ変更）可能とします。また、片方は操作後に重力落下するように実装します。これは各デバイスで空間認識などの機能を利用した際に空間との干渉を確認できるようにするためです。

まずは任意の物体を2つ作成します。作成する物体は何でもいいのですが今回は球体と立方体を作成しています。
それぞれ以下の通り空間に作成しています。

1. 球体
   • position (0.3,0.0,1.0)
   • rotation (0,0,0)
   • scale (0.2,0.2,0.2)
   • コンポーネント（追加）
     • Rigidbod
       • Use Gravityのチェックを外す
     • Object Manipulator
2. 立方体
   • position (-0.3,0.0,1.0)
   • rotation (0,0,0)
   • scale (0.2,0.2,0.2)
   • コンポーネント（追加）
     • Rigidbod
       • Use Gravityのチェックを外す
     • Object Manipulator
       • Maniputation Startedイベントに自身のRigidbody.UseGravityをオンにする設定を追加
         

Object ManipulatorというのがMRTK3で提供されているSpatial Manipulationの部品の１つです。この部品をColiderがついている3Dオブジェクトに追加すると、ハンドトラッキングでつかんだり、レイによる操作が可能になります。

よく使うものとしては以下のパラメータになります。

• Allowed Manipulations
  オブジェクトに対して許可する操作。移動/回転/サイズ変更等を組合わせて設定可能

• Allowed Interaction Type
  オブジェクトに対して許可する操作手段。ハンドトラッキングのみ操作できる等を設定可能
  

• Manipulation Started
  オブジェクトの空間操作が開始される際に発生するイベント

• Manipulation Ended
  オブジェクトの空間操作が完了する際に発生するイベント

また、例えば水平回転のみ許可したいような場合に操作時に制約を加えることも可能です。

この時点でPlay Mode上で物体の操作が可能です。ぜひ操作してみてください。

6. メニューの作成

つぎにハンドメニューを導入しましょう。ハンドメニューは文字通り手元で利用可能なメニューを作成する際に便利なUX部品です。デフォルトではハンドトラッキングように作成されており、手のひらを返すと手に追従するメニューとして簡単に導入することが可能です。
今回はハンドメニューとして、「オブジェクトの位置をもとに戻す処理」、「アプリケーションの終了」を追加したいと思います。なお、関連記事では各デバイス固有機能をこのハンドメニューに追加しています。
[Project]パネル内の検索に「Menu Base」を入力して検索すると表示される[HandMenuBase]をHierarchyに追加します。

追加するとTextMeshProのリソースのインポートをするようにダイアログが表示される場合があります。これが表示された場合は[Import TMP Essentials]だけ押して設定を行ってください。

[Hierarchy]に追加後、HandMenuBaseのPrefabをUnpackして、メニューの変更を行います。

次に、HandMenuBaseを展開し、[Button-GridLayout]にある4つのボタンを2つに減らします。2つに減らすと自動的にそのサイズにあった調整がされるようになっています。これはUGUIの機能として提供されているものです。MRTK3ではこういった既存の機能をうまく利用してUIの構築などの労力を低減しています。

次にボタンの外観(アイコン)を変更します。アイコンの変更はAction Buttonの中にある部品で変更します。
先ほど展開した[Button-GridLayout]のアクションボタンに対して次の階層まで移動してください

• [Action Button]-[Frontplate]-[AnimationContent]-[Icon]-[UIButtonFontIcon]

このオブジェクトの[Inspector]パネルから[Front Icon Selector]コンポーネントを探します。このコンポーネント内で好みのアイコンを選択していきます。今回は以下の設定をしました。

• Icon 3 → オブジェクトの位置リセット
• Icon 124 → アプリケーションの終了

このメニューで動作するロジックを作成します。Assets内の任意の場所にC#スクリプトを以下のように実装してください。

MenuScripts.cs

// Copyright (c) 2023 Takahiro Miyaura
// Released under the MIT license
// http://opensource.org/licenses/mit-license.php

using UnityEngine;

public class MenuScripts : MonoBehaviour
{
    public Rigidbody[] ResetObjects;

    private Vector3[] _initialPositions;

    // Start is called before the first frame update
    private void Start() {
        _initialPositions = new Vector3[ResetObjects.Length];
        for (int i = 0; i < ResetObjects.Length; i++) {
            _initialPositions[i] = ResetObjects[i].position;
        }
    }

    public void Reset() {
        for (int i = 0; i < ResetObjects.Length; i++) {
            ResetObjects[i].useGravity = false;
            ResetObjects[i].velocity = Vector3.zero;
            ResetObjects[i].position
                = Camera.main.transform.position + Camera.main.transform.rotation*_initialPositions[i];
        }
    }

    public void ApplicationExit() {
        Application.Quit();
    }
}

実装したコンポーネントはHandMenuBaseに追加します。合わせてコンポーネントを以下のように設定してください。操作するオブジェクトの位置をリセットするために、MenuScriptsのパラメータにこのオブジェクトを渡しておきます。

最後に、HandMenuBaseのなかにあるAction ButtonのonClickイベントにMenuScriptsのResetメソッドと、ApplicationExitメソッドを割り当てて完了です。

7. Unity上で動作確認

この状態でアプリをUnity Editorで実行すると以下のことが確認できます。

• ハンドレイ、または直接つかむことでオブジェクトの移動/回転/サイズ変更が可能
• 立方体は操作後に自由落下
• 手のひらを返す動作によりハンドメニューが表示
• Resetボタンを押すことで3Dオブジェクトは初期位置に戻る

以上で共通の実装は終わりです。このようにUIやUXに関連する部分をMRTK3で構築することが可能です。他にも作るのが面倒なUX部品や処理といったものがプリセットで部品化されておりコンテンツ開発の効率化を実現することができます。このプロジェクトをベースに各デバイスの機能を組合わせて実機にデプロイする部分に関しては以下を参照してください。

• 【XR Kaigi 2023解説用】MRTK3と空間マッピング を使ったコンテンツ作成（HoloLens 2向け）
• 【XR Kaigi 2023解説用】MRTK3と空間マッピング, Dual Render Fusionを使ったコンテンツ作成（ Lenovo ThinkReality A3向け）
• 【XR Kaigi 2023解説用】MRTK3とpassthrough, 空間マッピングを使ったコンテンツ作成（ Lenovo VRX向け）
• 【XR Kaigi 2023解説用】 MRTK3とpassthrough, scene を使ったコンテンツ作成（Meta Quest 3向け）