UEでVtuberになろう　～VRM4UとVMCを使用したモーションキャプチャーを使って～

# はじめに
https://ruyo.github.io/VRM4U/

この記事ははるべえ様（[@ruyo_h](https://x.com/ruyo_h)）が公開しているVRM4Uプラグインを使用してモーションキャプチャーをUE内で使用する記事です。
[モーションキャプチャー VMC Protocolを受け取る](https://ruyo.github.io/VRM4U/08_vmc/)の記事をやってみた内容になります。
ちょっとまえまでいろんなプラグインを入れたりUnityを経由しないといけなかったVMCを使用したモーションキャプチャーがめちゃめちゃ簡単になりました。みんなやろうず
またXR Animatorのちょっとした使い方解説になります。

いつもありがとうございます。VRM4Uフォーエバーラブ

環境
・UE5.3
・VRM4U_5_3_20240617
・XR-Animator_v0.18.0_windows

こういうことができるのの導入方法です

https://x.com/Gisu_Love/status/1808472423353979175

# VRM4Uを導入する

[VRM4UのGit](https://github.com/ruyo/VRM4U)ページを開き、Releasesから2024年5月6日以降のものを使用するUeのバージョンに合わせてダウンロードしてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2257391/27e1f629-e9a5-c0e6-a8f4-f2338baeb5a3.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2257391/09b1cbdb-2c93-c853-0c1e-e258746eb245.png)

VRM4Uを導入したいプロジェクトのフォルダをエクスプローラーで開きます。
Uprjectが格納されているのとおなじフォルダにPluginという名前のフォルダを開き、解凍したVRM4Uを入れてください。
↓Fly_Gameという名前のプロジェクトに格納するとき
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2257391/779563c4-4462-c73a-86f8-a01fdf2d6433.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2257391/df7f479a-8a95-6aa9-8580-fc30de2f246d.png)

プロジェクトを開くとプラグインにVRM4Uが追加されているはずです
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2257391/01ef7eea-b169-d403-6667-d5c45271ada3.png)

# VRMモデルを追加する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2257391/0863ff31-f3f2-3808-c0bc-f9fc40af2651.png)
VRMをインポートするとこのようなポップアップが出るので、好みに合わせて設定しインポートします。

# AnimationBPを作成する
インポートしたVRMモデルにアニメーションBPを作成し、次のようなノードをつなげます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2257391/0880e340-dfbe-981d-60aa-5352f663007b.png)

UE側の準備はこれで完了です。

# XR Animatorを使う
XR AnimatorはWebカメラや動画からの画像認識でモーションキャプチャーを行い、VMCプロトコルでモーションを送信できるアプリです。同じような事ができるアプリは他にTDPTなどがあります。
[XR Animator]
(https://booth.pm/ja/items/4513654)はBoothからダウンロードできます。
<iframe width="560" height="315" src="https://www.youtube.com/embed/hp7yVZszBhw?si=3QoK3_5H1J4ymVFv" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
ダウンロードしたら、XR Animator - electron-v26.4.3-win32-x64_SA内のelectronを開きます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2257391/a7728c9a-95d6-8175-9770-1d111dcfc01b.png)

開くとバックが透明なアプリが開きます。
もしUnityちゃんではなくオリジナルのVRMを使用したい場合、このページでVRMをアプリに直接ドラッグ＆ドロップしてください。
Startを押すと、こんな感じの画面が開きます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2257391/7b8c27c5-6b2b-81fd-f28d-ff5839986f8a.png)

### Motion Captureを設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2257391/f893c86b-38a8-dc27-9543-2c99a27fa613.png)
Theモーションキャプチャーといった感じのイラストを押して開きます。
どこをキャプチャするか選ぶことができます。

1.顔のみ
2.体のみ
3.体と手
4.顔と体
5.全身（顔＋手＋体）最新版
6.全身（顔＋手＋体）レガシー
7.オプション（LegIK)など
8.キャンセル

1～5のどれかを選んでおけばひとまず動くので用途に合ったものを選んでください。

### メディアソースを設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2257391/9fca81f3-2e4f-9507-2935-3cbe66014622.png)
メディアソースを選びます。

1.Yes　（ソースを使う）
2.Yes　（ソースを反転して使う）
3.No　（キャンセル）
4.オプション（ソースの画質のリミッターなどの設定）

1か2のどちらかを選んでください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2257391/c2cec3eb-1e06-b072-c5f2-7fa96989bc77.png)

Yesを選ぶとソース選択に進みます。
・自分のつなげているウェブカメラ
・ローカルメディア（動画）を使用
・キャンセル

もし動画をメディアソースとして使用したい場合、動画を直接ドラッグ＆ドロップしてください。
左上に表示が出たらインポートできているので、Local Media Fileから動画をソースに選ぶことができます。

![スクリーンショット 2024-07-06 230231.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2257391/c9e33c17-d287-37e2-cae0-5d8d61759d89.png)

ここまで選ぶとモーションキャプチャーが開始されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2257391/9ca1b883-5dea-9e39-1137-158d4f99b4d5.png)

### Poseを選ぶ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2257391/81cfbcd0-c776-4552-d75b-187b6eb29660.png)
全身をトラッキングする場合設定しなくても問題ありませんが、上半身だけ使用するときなどは変更する必要があります。

1.立ちモーション（全身）
2.立ちモーション（上半身のみ）
3.スタンバイ（足を開く？）（上半身のみ）
4.ハッピーアイドル（リズム取ってるような動きをする）（上半身のみ）
5.I字バランス（手と上半身の一部のみ）
6.足組み座り（上半身のみ）
7.体育座り（上半身のみ）
8.片膝立て座り（上半身のみ）
9.足組み座り2（上半身のみ）

用途に応じて選んでください。

### VMCを動かす
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2257391/f7716c08-122f-19f5-8fb0-60d50a884fcf.png)

VMCと書かれたボタンを選択します。
portは特に理由がなければ設定せず問題ありません。
ポートはアニメーションBPのPortの数字と一致している必要があります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2257391/d4902889-964c-1a4a-acc1-29927bce8103.png)

1.VMC-ProtocolをクリックしてONにするとVMCの送信が開始されます。

UEに戻るとキャラクターが連動して動いているはずです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2257391/51ecb605-837b-65f5-b486-aece9ebf9c40.png)
これであなたもUEでVtuber！

# アニメーションを保存する
TakeRecorderを使用することで大抵の動きは録画することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2257391/f7d16b4d-56e5-8acb-18cd-3c26d09df897.png)
ウィンドウ→シネマスティックからTake Recorderを選びます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2257391/f1c56bcf-41ed-9940-0527-a3ab6738e9f4.png)
タブが開くので今回はAnimationBPを再生しているSkeletalMeshをソースに追加します。
![スクリーンショット 2024-07-06 234550.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2257391/bd4522ff-4585-364c-d8ea-e4ad887c54f2.png)
シミュレートなどを行った状態で左上の赤い録画ボタンを押すと、３秒後から撮影が始まります。
いい感じに撮影して停止すると、Cinematics→Take→日付の中に撮影したデータがシーケンサー形式で保存されています。
SkeletalMeshでアニメーションを行った場合、Animation形式で保存されます。
![Skel Andalucia Scene 1 01 2024-07-06 23-49-23.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2257391/20931d08-474e-15f3-b6eb-3d2f41fb3de0.gif)

UE内でモーションキャプチャーからアニメーションが撮影できました！
グリーンバックとかで撮影すればOBSなんかで合成もできます。やったね

# おまけ
モーキャプで遊んでた動画はこうやって無理矢理リターゲッターしてます。なんてやつだ…
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2257391/fc80ccd6-84a9-9b2a-1876-7d4fbec2d305.png)