MagicLeapToolKitを利用したハンドトラッキングの実装

# この記事でやること
- MagicLeapToolKitを利用したハンドトラッキングの実装
- トラッキングした手の視覚化

今回の記事では入力イベントの取り方とかは紹介しません( 単純にまだそこまで触ってないだけ )
表示するだけだったら一瞬で終わるのでよくあるCameraRig的なプレハブ構成を作成する手順をメモってます

# 開発環境
OS : Windows10
Unity : 2019.3.7f1
LuminSDK : 0.24.1
MagicLeapUnityPackage : 0.24.1
MagicLeapToolKit : [こちら](https://github.com/magicleap/Magic-Leap-Toolkit-Unity)から入手

MagicLeapToolKitはリンク先のGitHubリポジトリ内、packageフォルダの中に最新のUnity Packageが含まれているのでそこからDLしてください
まだReleaseでは特に出してないっぽい? でもpackageフォルダの更新は最近なので内部的には更新はされてるはず

# 出来上がるもの

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">MagicLeapToolKitを使ってハンドトラッキング実装してみた、表示するだけなら一瞬で終わるので良き <a href="https://t.co/AG028F33Xk">pic.twitter.com/AG028F33Xk</a></p>&mdash; 松本隆介 (@matsumotokaka11) <a href="https://twitter.com/matsumotokaka11/status/1290811271273619456?ref_src=twsrc%5Etfw">August 5, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


# 下準備

Edit > ProjectSettigs > MagicLeap にて```GestureConfig```と```LowLatencyLightwear```にチェックを入れる
私の環境ではLowLatencyLightearには自動でチェックが入っており編集はできませんでした

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/212999/2e157f8f-362e-3480-4e89-450422f475ff.png)


# シーンの構築
[ここ](https://qiita.com/matsumotokaka11/items/ca596998853c9f4bdd7a)で作成したCameraRigオブジェクトを流用します、今回は自前で作成したハンドトラッキングを利用しないのでGameObjectを非アクティブにしておきます

完成予定図
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/212999/b7e6f6df-771b-5014-bbd0-cd1a1a73f37f.png)

MagicLeap-Tools > Examples > HandInput > Scene からHandInputシーンをHierarchyにドラッグ&ドロップし、```[VISUALIZERS]```オブジェクトと```[INPUT]```オブジェクトを複製し、自分のシーンのCameraRigオブジェクトの子オブジェクトにします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/212999/135f6af2-e369-7904-50b6-06dc6b39338b.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/212999/e55338cf-e25f-e1dc-a890-f8157e93840b.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/212999/e7b2cbc0-3c91-1c84-450a-e41a35455c9e.png)

上に挙げた動画の状態にするだけであればここまでで大丈夫です、一応整理したほうが今後いろいろ改造しやすいと思うのでここから少しオブジェクトの構成をいじります

## ちょこっと改造

**HandInputの再構築**
[INPUT]オブジェクトの中にあるHandInputオブジェクトを一つ上の階層に持っていき不要となった[INPUT]オブジェクトを削除します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/212999/64753cc1-cdea-d976-77a0-5c4fd3b12bc6.png) -> ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/212999/6b1f97a1-876d-36cb-d145-5f400a824ac4.png)

**左右の手の描画オブジェクトを再構築**
[VISUALIZERS]オブジェクトの中にあるLeft Rightオブジェクトを取り出し、HandInputオブジェクトの子オブジェクトとして配置、お好みでLeftHand,RightHandに名称を変更します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/212999/2f096334-105a-5242-1b30-f105bb86ac48.png) -> ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/212999/f8de15b6-c762-d649-3ef7-0e4a822e8e9d.png)

このままだと各関節のKeyPointの描画オブジェクトが左右の手のGameObjectと離れていて直感的ではないので```KeyPointVisualizers```オブジェクトの中から```Left~``` & ```Right~```オブジェクトをそれぞれ対応するところに配置しなおします

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/212999/a44a79a0-eb74-78b9-61c3-54bb77cd8de8.png) -> ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/212999/8067e733-6261-6b76-7489-bc850a05c97e.png)

不要になった[VISUALIZERS]オブジェクトを削除します、今回はHandMeshは利用しないのでHandMeshごと削除します

後はお好みでLeftHand, RightHandオブジェクトにあるAxisVisualizerの長さを設定したりBoneの色を設定したりすればMagicLeapToolKitのハンドトラッキングの実装は完了します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/212999/ebe93fa7-7129-e797-1ac6-4936db6eb376.png)


**補足**
今回[VISUALIZERS]オブジェクトから引っ張ってきた各Left~, Right~オブジェクトのプレハブは MagicLeap-Tools > Prefabs > Input 内のKeyPointVisualizerプレハブを利用しています

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/212999/ca0ccf2c-0128-050f-5220-bf1885c76a3f.png) ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/212999/fdbf7d5e-b53d-2ad2-682c-f7c2195b243b.png)


Inspectorで描画するKeyPointの設定をカスタムすればいろいろいい感じにできそうですね