【VRChat×Unity】ShaderMotionでアバターの動きをモーションキャプチャーする

こんにちは、XR エンジニアのKentyです。

自分はXRとダンスが好きで、最近は友達とこんな↓アプリを作っていました。

このアプリでは、VRChatでモーションキャプチャーしたものをUnityに持ってきて、Quest3のパススルーやアンカー機能などを用いてVRChatのアバターが現実空間で踊っているように見せています。

今回はこのアプリの中で用いた「VRChat上の動きをUnityで使う方法」について説明していきます。VRChatでのダンスやモーションをUnityのAnimationとして書き出したい人の参考になれば嬉しいです。

この記事でわかること

• VRChat上の動きをモーションキャプチャーして録画する方法
• 録画した動画からUnityでアニメーション（AnimationClip）を作る方法
• そのために使うツールShaderMotionの導入から書き出しまでの流れ

動作環境・使うもの

この記事は以下の環境を前提に進めます。

• Windows 11
• Quest3
• VRChat
• OBS
• VCC（VRChat Creator Companion）
• Unity
• ShaderMotion

ShaderMotionとは？

VRChat上の動きをAnimationとして書き出すツールは様々あり、自分がパッと思いつくものだけでも4種類ほどあります。

• ShaderMotion
• MotionDecoder
• Json2Anim
• HUMR(HyakuashiUdonMotionRecorder)

今回はその中でも、ShaderMotionを使った方法について説明します。

ShaderMotionとは名前の通りShaderを用いたギミックで、SkinnedMeshやShaderを使ってモーションデータを取り出しています。そのためGPUによる高速処理がしやすく、LipSyncや表情のキャプチャも出来る¹点がポイントです。また、アバターに仕込むギミックであるため基本的にどんなワールドでもモーション収録出来る²という特徴があります。

全体の流れ

ShaderMotionでやることは、大きく分けて次の2ステップです。

1. ShaderMotionを起動した状態で、VRChatのウィンドウを録画する
2. 録画した動画をUnityで再生して、VRChatでの動きを再現する

これが出来れば、VRChatの動きをUnityに持ってくることが出来ます。

それではまず、VRChat側の操作を行います。

VRChatでアバターの動きを録画する

アバターにShaderMotionのギミックを仕込む

VCCでアバターのUnityプロジェクトを開きます。

BOOTHかGitLabのリリースからShaderMotion-v1.9.5.zipを解凍して、ShaderMotion-v1.9.5のフォルダをUnityのAssetsフォルダにドラッグ＆ドロップします。

Unityにドラッグ＆ドロップをした際に、以下のような警告が出る場合はNoを選択します。

以下のような階層構造になっていればOKです。

アバターのAnimatorの3点リーダーをクリックして、SetupAvatarを選択します。

出てきたウィンドウのSetup Motion Recorderと、Setup Animatorを選択します。

こんな感じの表示になったら、アバターアップロードします。

VRChatのウィンドウを録画する準備をする

SteamからVRChatの起動オプションを編集して、VRChatのウィンドウが16:9のサイズで起動されるようにします。

16:9のサイズであればどんなサイズでも大丈夫ですが、自分は以下のサイズで起動オプションを設定しています。

-screen-fullscreen 0 -screen-width 1280 -screen-height 720

アバターのモーションを録画する

ここまで出来たらVRゴーグルを付けて、VRChatを起動します。

VRChatを起動したらShaderMotionを仕込んだアバターに変更し、リングメニューから、ShaderMotionを選択します。

Calibrateを選択して、モーションの原点を設定します。Calibrateを選択している間だけ、アバターの下に赤色のマーカーが表示され、そのマーカーの位置がモーションの原点になります。

Calibrateが終わったら、ストリームカメラを起動して録画する際の画角を決めます。また、このタイミングでOBSを起動して録画の準備をします。

OBSを使ってVRChatを録画する方法についてはこちらのサイトにまとまっているので参考にして下さい。

ストリームカメラの画角が決まったら、ストリームカメラを閉じずにリングメニューからRecordを選択します。

Recordを選択すると、VRChatのウィンドウの左側にカラーバーが表示されます。

VRChatのウィンドウにカラーバーが表示されたら、OBSを使って録画をします。
録画をする際には、ウィンドウ上部の白いバーを含まずにVRChatの画面のみを録画するようにしましょう。

録画が終わったら録画した動画を確認して、アバターが動いた時にカラーバーがちゃんと反応しているか確認して下さい。

これで、VRChatでのモーションキャプチャーは完了です。

次に、Unity側の操作に移ります。

Unityでアニメーションとして扱う

録画動画をUnityで再生してアバターに反映する

先ほど使用したアバターのUnityプロジェクトを開きます。

プロジェクトを開いたら、録画した動画をUnityにドラッグ＆ドロップし、メインカメラの位置を調整して、アバター全体が見えるようにします。

録画した動画の動きをアバターに反映させるため、アバターにMotionPlayerのコンポーネントを付けます。MotionBufferにはMotionDecを、AnimatorにはアバターのAnimatorを、ShapeRendererにはアバターのBodyをアタッチします。

録画した動画を再生するために、空のオブジェクトにVideo Playerのコンポーネントをつけて、VideoClipに先ほどUnityにドラッグ＆ドロップした録画動画をアタッチします。
Render ModeをRender Textureにして、Target TextureにはMotionを選択します。その他の項目は下記画像を参考にして下さい。

録画した動画が画面上に表示されるように、UIのRawImageを追加します。

RawImageのTextureにMotionをアタッチして、その他の項目は画像のようにします。

この状態でUnityをPlayすると、アバターが録画した動画と同じ動きをするようになります。

動きをAnimationClipとして書き出す

VRChat上の動きをUnityで再現出来たので、次はこの動きをAnimationとして保存します。まずは保存用のAnimationを作成します。

Play時の動きを保存するために、アバターのAnimatorの3点リーダーをクリックしてAnimationRecorderを選択します。

AnimationRecorderのAnimatorにアバターのAnimatorを、Output clipに先ほど作成したAnimationを設定します。Frame rateは60、Keyframe reduction %は0がオススメです。

設定が出来たらUnityをPlayして、欲しいモーションのところでAnimationRecorderのStartを押し、終わったらStopを押します。

Stopを押すとGameビューが停止した状態になりますが、モーションをAnimationに書き込む処理は動いているので気長に待ちます

書き込み処理が終わったらPlayを止めて、モーションが書き込まれたAnimationを確認します。

これで、VRChatでモーションキャプチャーしたものをAnimationとしてUnityで使えるようになりました！

トラブルシューティング・Tips

書き込みが重い／不要なデータを消したいとき

Animationに書き込まれているSkinnedMeshRendererのデータが要らない場合や、Stopを押すと長時間Gameビューが停止してしまう場合は、AnimRecorder.csにあるvoid OnGUI() のforeachの部分をコメントアウトするのをオススメします。

AnimRecorder.cs

    // ~~ 省略 ~~
    
    void OnGUI() {
		animator = (Animator)EditorGUILayout.ObjectField("Animator", animator, typeof(Animator), true);
		clip = (AnimationClip)EditorGUILayout.ObjectField("Output clip", clip, typeof(AnimationClip), false);
        
        // ~~ 省略 ~~
        
		if(!recorder) {
			using(new EditorGUI.DisabledScope(!animator || !clip || !EditorApplication.isPlaying))
				if(GUILayout.Button("Start")) {
					recorder = new AnimRecorder(animator);
                    // ここの2行をコメントアウトする
					// foreach(var smr in animator.GetComponentsInChildren<SkinnedMeshRenderer>())
    				// recorder.BindComponent(smr);
				}
		} else if(!EditorApplication.isPlaying) {
			recorder.Dispose();
			recorder = null;
		} else {
        
        // ~~ 省略 ~~
        
		}
	}
    
    // ~~ 省略 ~~

Timelineで足の動きがおかしくなるとき

作成したAnimationをTimelineなどで使う場合、足の動きがおかしくなります。その場合はTimeline上のAnimationの設定からFootIKのチェックを外して下さい。

まとめ

今回は、ShaderMotionを使ってVRChat上の動きをUnityのAnimationClipとして扱う方法を紹介しました。

流れをおさらいすると、
・アバターにShaderMotionを仕込んでVRChatで動きを録画する
・録画動画をUnityで再生して、AnimationRecorderでAnimationClipとして書き出す
という2ステップでした。

最後に、このアプリを一緒に企画・開発し、試行錯誤を重ねたふぁゔくんにも改めて感謝します

1. https://phi16.hatenablog.com/entry/2024/07/28/214625 にLipSyncや表情のキャプチャについて書かれています。自分はまだやったことがないので、今回は割愛します。 ↩

2. https://booth.pm/ja/items/3438836 のようなカメラをつかったギミックが置いてあるワールドだと上手くいかなかったので注意です。 ↩