【Unity】MRTK導入してQuest2のハンドトラッキングでボタンを押す

##MRTK-Quest

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">MRTK v2.5 で Oculus Quest がサポートされました！<br>自分が作って公開した Oculus Quest 拡張が大本なので、MRTK のライセンスをみると HoloLabInc の名前が入ってます<a href="https://t.co/5uSPkWzCzu">https://t.co/5uSPkWzCzu</a> <a href="https://t.co/RLA4ZwnXiI">pic.twitter.com/RLA4ZwnXiI</a></p>&mdash; たるこす (@tarukosu) <a href="https://twitter.com/tarukosu/status/1311818122173665280?ref_src=twsrc%5Etfw">October 1, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

というツイートを見ました。

Quest2が発売されたということもあるので
**MRTK×OculusQuest2×ハンドトラッキング**で
ボタンを押すところまでやってみようと思います。


##バージョン情報
Unity 2019.4.8f1
Oculus Integration Version 20.1
Microsoft Mixed Reality Toolkit v2.5.0
MRTK-Quest v1.1.0

##準備

まずは[Oculus Integration](https://assetstore.unity.com/packages/tools/integration/oculus-integration-82022#releases)をAssetStoreからインポートします。

次に`Microsoft Mixed Reality Toolkit`から必要なunitypackageを
ダウンロードしてプロジェクトにインポートします。

今回は、
`Microsoft.MixedReality.Toolkit.Unity.Foundation`
`Microsoft.MixedReality.Toolkit.Unity.Tools`
の2つを下記リンクからダウンロードします。

【リンク】：[MixedRealityToolkit-Unity](https://github.com/microsoft/MixedRealityToolkit-Unity/releases)

インポートしたら初期設定画面が出ると思うので
Applyを押します。いろいろ必要な設定をやってくれます。
![MRTKsetup.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244071/4cdc2079-e087-e683-5841-d2a318275e8c.png)

次にQuest対応のMRTK-Questを導入します。
下記から`MRTK-Quest_v110_Core.unitypackage`
をダウンロードしてインポートします。

【リンク】：[MRTK-Quest](https://github.com/provencher/MRTK-Quest/releases)

---
###Profileの設定

最初にいろいろな設定が利用可能となるProfileを使える状態にします。

下記画像のように
`Mixed Reality Toolkit` > `Add to Scene and Configure...` 
を選択すればOKです。

![MRTKAddConfig.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244071/9f848204-bfac-a881-c23d-e1e232d01ca8.png)

次にMRTK-QuestのProfileを使えるように下記画像のように設定します。

![MRTKProfileSet.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244071/7432974f-4177-8926-6578-8fc5ecc5172b.png)

---

稀にProfileの設定ができないことがあります。(インポートの順番とかバージョンの違いかも)

うまくいかなかったら
下記のサンプルプロジェクトをクローンして
Profileがまとめられたファイルをプロジェクトに丸ごとコピーすれば大丈夫でした。

【リンク】：[MRTK-Quest-Sample](https://github.com/provencher/MRTK-Quest-Sample)

Profileがまとめられたファイルのディレクトリは下記です。
`MRTK-Quest-Sample\Assets\MRTK.ThirdParty\MRTK-Quest\Profiles`

---

今回はやりませんが、ここまでいろいろダウンロードしたものは
`manifest.json`に自分で書き込めば勝手にインポートしてくれるらしいです。

【参考リンク】：[MRTK 2.5 を Unity Package Manager を使って取り込む](https://qiita.com/chomado/items/ff21e57aa563191f3be0)

【参考リンク】：[Oculus Quest 2でMRTK使って豆腐と戯れる最小手順](https://qiita.com/miyaura/items/7f6bb7ddcaab8bc6cb8e#%E5%BF%85%E8%A6%81%E3%81%AA%E3%83%91%E3%83%83%E3%82%B1%E3%83%BC%E3%82%B8%E3%81%AE%E8%BF%BD%E5%8A%A0%E3%81%A8mrtk%E3%81%AE%E5%B0%8E%E5%85%A5)

---

###ポインター、ゲイズ、テレポートを削除

下記はMRTK-Questのデモです。

![83885080-dcde6100-a713-11ea-88e2-46883402cfe8.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244071/6f59e02c-11de-62c6-b042-39c4e6118242.gif)

引用元：[MRTK-Quest](https://github.com/provencher/MRTK-Quest)

ただし、これは機能をてんこ盛りにしたバージョンのデモです。
今回は**人差し指でボタンを押せる機能だけ**に絞りたいと思います。

####ポインター削除
まずはポインターです。
`MixedRealityToolkit`の`Input`設定から
下記画像のように不要なポインター機能を削除して`PokePointer`だけの状態にします。

![MRTK-PokePointer.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244071/dfea94f1-e683-447e-c269-a60f21c21ef4.png)

####ゲイズ削除
手の入力を検知するまでゲイズ(HMDの向きに照射されるポインター)が出ます。
これ正直なところどうやって消せばいいかいまいちわかりませんでした。
なのでオブジェクトを非アクティブにするというパワープレイで非表示にしました。

![MRTK-CursorVisualOff.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244071/8a84a875-b05f-5931-3b7f-f3d1bb392967.png)


####テレポート削除
`MixedRealityToolkit`の`Teleport`設定からオフにできます。

![MRTK-teleport.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244071/48c8d754-e29e-1a50-2400-77345dc49454.png)


##ボタンを配置、常にカメラの前に表示する

ボタンは`Mixed Reality Toolkit` > `Toolbox`から
下記画像のように選択できます。
![MRTK-ToolBox.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244071/80be60cf-1be7-c783-74ad-4d153835dcf4.png)


Prefabを直接Hierarchyに置いてもOKです。

表示位置を調整してデバッグするのが面倒なので
常にカメラの前に表示します。下記にまとめたScriptを使用します。
【参考リンク】：[【Unity(C#)】Lerp、Slerpを使った減速表現](https://qiita.com/OKsaiyowa/items/3c234301e7d1f9438881#%E3%82%B3%E3%83%BC%E3%83%89)

![MRTK-Qiita1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244071/82bb6f49-1fa5-2683-510f-dbf3b8ba8c5e.gif)

##デバッグ

ここまででもう下記動画のようにボタンは押せるようになっているはずです。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">MRTK導入してQuest2のハンドトラッキングでボタンを押すだけの動画です😎<a href="https://twitter.com/hashtag/OculusQuest2?src=hash&amp;ref_src=twsrc%5Etfw">#OculusQuest2</a> <a href="https://twitter.com/hashtag/MRTK?src=hash&amp;ref_src=twsrc%5Etfw">#MRTK</a> <a href="https://t.co/246Oy32c42">pic.twitter.com/246Oy32c42</a></p>&mdash; KENTO⚽️XRエンジニア😎Zenn100記事マラソン挑戦中5/100 (@okprogramming) <a href="https://twitter.com/okprogramming/status/1317710471449882625?ref_src=twsrc%5Etfw">October 18, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Editor上でも確認できます。下記にまとめてます。
【参考リンク】：[【Unity】Oculus Link使ってEditor上でデバッグ](https://qiita.com/OKsaiyowa/items/0b1d505219c4b4bdc421)

実機での確認は(ビルドの設定は省いて)1つ設定しなければならない箇所があります。
下記画像の通り、`Hands Only`にする必要があります。

設定用Configのディレクトリは`Asset/oculus/OculusProjectConfig`です。

![MRTK-HandOnly.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244071/5dac0158-491e-37fe-4e13-b6c0ff20141c.png)

##ボタンに処理を追加する

ボタンを押すとキューブの表示が切り替わるデモです。

![MRTK-Qiita2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244071/bb9e38f8-5bcf-d2ce-55cd-e875037da9bc.gif)

###コード

```C#
using Microsoft.MixedReality.Toolkit.UI;
using UnityEngine;

/// <summary>
/// ボタン押下時のイベントを管理
/// 適当なオブジェクトにアタッチ
/// </summary>
public class ButtonEventManager : MonoBehaviour
{
    /// <summary>
    /// ボタン
    /// </summary>
    [SerializeField] private Interactable _interactableButton;

    [SerializeField] private GameObject _cube;
    
    void Start()
    {
        _interactableButton.OnClick.AddListener(() =>
        {
            //ボタン押下時行いたい処理
            _cube.SetActive(!_cube.activeInHierarchy);
        });
    }
}

```

MRTKのボタンに`Interactable`というコンポーネントがついているので
その中のリスナーにイベント登録しています。

##おわりに
VRで物理的なUIを一から自分で作るのは面倒なので
これからもお世話になろうと思います。

##参考リンク
[Oculus Quest 2でMRTK使って豆腐と戯れる最小手順](https://qiita.com/miyaura/items/7f6bb7ddcaab8bc6cb8e)
[手乗りちょまぎょアプリ開発で学ぶ MRTK 入門 (MRTK 2.5 対応)](https://qiita.com/chomado/items/d4ff1edae797dfbd3c45)