VSingerを目指すおじさん〜iPhoneとPCだけでフルトラッキング編〜

## これを書こう思ったきっかけ
VSinger(歌うVTuber)のMVをいつか自分1人で作ってみたい！
そして、VSingerになりたいと思い、
その周辺技術の調査とメモのためのモチベーションとして、本記事を書いてみました！

## 今回の記事の内容
1. スマホだけで自分の動きをフルトラッキング
2. PCにモーションデータを持っていき編集
3. Unity上のVRMに動きを反映

ここまでの流れを作成していきます。

## 手順

**実行環境**
- PC(自分の場合はMacBook Pro)
- スマホ(自分の場合はiPhoneSE2)

- Unity(自分の場合はUnity 2018.4.36f1)
- Blender(自分の場合はVersion 2.93.1)
- TDPT(自分の場合はバージョン1.0.2)

### 1. モーションの撮影
まず、スマホに[TDPT](https://digital-standard.com/tdpt_lp/)というアプリをインストールします。
このアプリは、単眼カメラだけでかなり高精度で姿勢推定を行ってくれます。
凄すぎる...
無課金でも使えるのですが、今回は課金をして、PCにデータを送りたいと思います。

やり方は以下の通り

1. `TDPT`を開きます。
2. 下の部分の星マークを押します
3. ここからの作業は課金が必要です。
4. `Premium menu`＞`Exporting motion data`＞`BVH` を押すとモーションの録画が開始します。
5. 全身が映るような場所に移動しモーションを撮りましょう
6. 撮り終わったら`Stop`を押します。
7. モーション(bvhファイル)は `ファイル(アプリ)`＞`このiPhone内`＞`TDPT`＞`motion` の中に生成されています。
8. このbvhファイルをなんらかの方法(おすすめはAirDrop)でPCに送ります。

<iframe width="560" height="315" src="https://www.youtube.com/embed/7K4Wx2y9jDs" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

### 2. Unityの準備
1. Unityで3Dのプロジェクトを作成します。  
![スクリーンショット 2021-07-10 1.22.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492613/203e7728-00b4-516f-cfec-a3e5741530b8.png)
2. [このあたり](https://vrm.dev/docs/univrm/install/univrm_install/)を参照してUniVRMをインストールします(今回使ったバージョンは0.66.0)  
![スクリーンショット 2021-07-10 1.27.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492613/0080b7cc-f800-a466-c2e8-4501d7e973b4.png)
3. [VRoidHub](https://hub.vroid.com/)などから好きなVRMファイルをダウンロードしてUnityのAssetsに追加します。  
![スクリーンショット 2021-07-10 1.32.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492613/27778e2d-9f7a-e3aa-0a16-aff5cbcee04a.png)
4. `Prefab Asset`(キャラクターの書いてあるやつ)をシーンに追加します。
![スクリーンショット 2021-07-10 1.34.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492613/5cf17da3-9042-8c4f-8167-e4b40a329956.png)
5. カメラとかを良い感じにします。
![スクリーンショット 2021-07-10 1.36.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492613/406a8ddb-9be7-d131-c1c3-8c620c7efc70.png)

### 3. モーションの準備
1. Blenderを起動する  
![スクリーンショット 2021-07-10 2.41.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492613/afa457d7-51f3-61a3-19a8-8d8e447c4008.png)
2. シーンコレクションの中のいらないものを削除
![スクリーンショット 2021-07-10 2.43.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492613/d75264ca-45e0-e76f-a449-8121befbccc9.png)
3. 先ほど送ったbvhファイルをインポート
![スクリーンショット 2021-07-10 2.44.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492613/e0f77ca9-20c1-085b-98f1-19c098b1cd85.png)
4. blendファイルに保存(普通に保存)  
![スクリーンショット 2021-07-10 2.45.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492613/ec5bc305-94a5-393b-b0fd-04909e29fd32.png)

### 4. VRMにモーションに反映する
1. blendファイルをUnityのAssetsに追加する。
2. 上記を開き`Rig`＞`Animation Type`をHumanoidに変更、Optimize Game Objectsにチェックを入れ、Apply
![スクリーンショット 2021-07-10 2.52.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492613/c301b18a-e2b0-40d6-1c6c-02a1ea768b90.png)
3. `Create`＞`Animator Controller`で作成
![スクリーンショット 2021-07-10 2.54.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492613/906e5209-e60e-8d96-60fd-0a01838a677a.png)
4. 名前を変更して開き、 `Create State`＞`Empty`で作成
![スクリーンショット 2021-07-10 2.56.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492613/78c7402b-b69c-33db-2ffc-53f497f5ce05.png)
5. 名前を変更し`Motion`をblendファイルの中のものに指定する。
![スクリーンショット 2021-07-10 2.57.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492613/a0550cbe-1063-9593-aedb-9b1cd684af59.png)
6. VRMモデルの`Animator`＞`Controller`を先ほど作成したモーションに変更
![スクリーンショット 2021-07-10 2.59.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492613/56f1a49a-adac-ae17-5db4-06089b2f7bfd.png)
7. 完成
![スクリーンショット 2021-07-10 3.01.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492613/59bc8b6c-86d2-e9bb-cc82-11347482b473.png)

## 完成動画
<iframe width="560" height="315" src="https://www.youtube.com/embed/WqProa87Mgw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

## 参考にしたサイト
> [UnityでPerfumeを踊らせる](https://nn-hokuson.hatenablog.com/entry/2016/07/21/212313)

## 感想
スマホとPCだけでここまでできると思いませんでした。
かがくのちからってすげー！