【Unity】モーションキャプチャーを使ったオリジナルアニメーション作成

STYLYにVRoid等で作成したアバターをアップロードする場合、Mixamoなどで公開されているアニメーションにイメージ通りのものがなければ、自分でオリジナルのポーズ・アニメーションを作る必要があります。

しかし、アニメーションをゼロから作るのは非常に難しく、諦めてしまうケースも多いのではないでしょうか。

今回のテーマは、Unity上でHMDを被った自分の動き・モーションをアニメーションとして書き出し、そのアニメーションを編集する方法です。

具体的には、SteamVRとFinalIKでモーションキャプチャーをして、EntumのEasyMotionRecorderでアニメーションファイルを出力、VeryAnimationを用いてアニメーションのキーフレームリダクションと表情付け等の編集をします。

 

中の人間はおりませんので、これはあくまでイメージ図です。

中の人間はおりませんので、これはあくまでイメージ図です。

 

このようなアニメーションをモーションキャプチャーから作ります。

完成イメージ

完成イメージ

 

 

モーションキャプチャー

第一段階として、トラッカーの動きをアバターに反映するべく、SteamVRとFinalIkを用いたモーションキャプチャーをします。

この説で触れるUnity上での簡易的なモーションキャプチャーについては、こちらの記事で丁寧にまとめられています。

必要となるプラグイン

必要となるのは、以下の3つです。

  1. SteamVR Plugin
  2. Final IK
  3. UniVRM

(今回はVRoidで作成したアバターを用いるので、.vrmアバターをUnityで扱うためにUniVRMをインポートします。)

 

SteamVR Plugin 2.3.2

Asset Storeより無料でダウンロードできます。

https://assetstore.unity.com/packages/tools/integration/steamvr-plugin-32647

Unityの新規プロジェクトにインポートすると、次のようなウィンドウが現れます。

SteamVR Pluginのインポート

SteamVR Pluginのインポート

SteamVRのためのプロジェクトの設定が提案されています。”Accept All”を選択すれば、自動的に設定されます。

ただし、上記のようにしても、Splashscreenの設定ポップアップが何度も現れることがあります(参考記事)。

StemaVR SplashScreen設定

StemaVR SplashScreen設定

フリー版のUnityではアプリケーション起動時にUnityロゴを表示するようになっている、スプラッシュスクリーンの設定をSteamVRがオーバーライドできないようになっています。

もちろん、ポップアップが現れるたびにAcceptを選択する、またはIgnoreを選択するので問題ありませんが、Assets\SteamVR\Editor\SteamVR_UnitySettingsWindow.csを開き、下画像のように”recommended_ShowUnitySplashScreen”をtrueにすることで回避できます。

SteamVR SplashScreen設定

SteamVR SplashScreen設定

 

Final IK 1.8

Asset Storeで販売されています(通常価格$90)。

https://assetstore.unity.com/packages/tools/animation/final-ik-14290

通常のアセットと同様にUnityにインポートできます。

 

UniVRM 0.53.0

UniVRMのリリースページよりunitypackageをダウンロードできます。

https://github.com/vrm-c/UniVRM/releases

これを同じプロジェクトにインポートします。

 

アバターの準備

今回はVRoidで作成した、こちらのアバターを用います。

誰でもダウンロード可能なので、ご自由にお使いください。

VRoidHub_Maya

VRoidHub_Maya

https://hub.vroid.com/characters/6044318751927586117/models/4348730068391180235

 

SteamVRの[CameraRig]を配置

Assets/SteamVR/Prefabs/[CameraRig]をシーンに配置します。

 

CameraRigの配置

CameraRigの配置

 

ここで一度シーンを再生すると、SteamVR Inputの設定ウィンドウが開くと思います。

Save and generateを選択し、Assets下に”SteamVR_Input”フォルダが生成されていることをProjectウィンドウで確認できれば準備完了です。

改めてシーンを再生すれば、HMDからシーンの風景を確認できるようになっています。

 

SteamVR Inputの設定

SteamVR Inputの設定

 

Final IKの設定

それでは、実際にアバターを動かしてみましょう。

まずは、IKのターゲットとなるオブジェクトを[CameraRig]に作ります。

各々”Create Empty”から、下画像のように”LeftHand”, “RightHand”, “Head”と名付けたゲームオブジェクトを作りました。シーン再生中にHMDを被ってコントローラーを動かすと、それに合わせてこれらオブジェクトが移動します。

 

[CameraRig]にターゲットを作る

[CameraRig]にターゲットを作る

次は使いたいアバターをシーンに配置します。

UniVRMがインポートできていれば、vrmファイルをプロジェクトに取り込めるようになっているはずです。

Projectウィンドウからドラッグ&ドロップでシーンに使いたいアバターを配置しました。

 

モデルの配置

モデルの配置

 

さて、先ほど作成した”LeftHand”, “RightHand”, “Head”に合わせて、アバターの両手や頭が動くようFinal IKの設定をします。

Hierarchyウィンドウでアバターを選択し、InspectorウィンドウからVRIKコンポーネントを追加します。

 

VRIKコンポーネントの追加

VRIKコンポーネントの追加

 

VRIKコンポーネントの”Solver”を開き、

  • “Spine>Head Target”に、作成した”Head”を
  • “Left Arm>Target”に、作成した”LeftHand”を
  • “Right Arm>Target”に、作成した”RightHand”を設定します。

 

FinalIKの設定

FinalIKの設定

 

この段階でシーンを再生すると、アバターの両手と頭が動いているのが確認できると思います。

しかし、自分の手や頭の動きに合わせて動いているというには、まだまだ問題が多い状態です。次は、自然な動きとなるようパラメーターの細かい設定をします。

 

諸問題の修正

顔の裏が写ってしまう

先ほどの設定のままだと、再生したときにアバターの顔の裏が描画されてしまい身体が確認できない状態になっていると思います。

VRMFirstPersonというスクリプトを使って解決する方法もあるのですが(参考記事)、ここでは簡便に、CameraからClipping Plane(near)を少し遠ざけてみることで解決を図りました。

Hierarchyウィンドウから”[CameraRig]>Camera”を選択し、Inspectorウィンドウで”Clipping Planes>near”の値を0.15に設定しました。シーンを再生すると、目の前に顔の裏側が描画されるということがなくなりました。

 

Clipping Planeをカメラから遠ざける([CameraRig]>Camera)

Clipping Planeをカメラから遠ざける([CameraRig]>Camera)

 

アバターの動きを確認できるモニターを用意する

アバターの動きを調整する前に、VR内でアバターの動きを確認できるようなモニターを用意しておくと調整が楽です。

アバターの全身が入るようにカメラを配置し、Render Textureに映像を出力、見える範囲に配置することで簡易的なモニターとしたいと思います。

Render Textureは、Projectウィンドウから以下のように作成できます。

 

Render Textureの作成

Render Textureの作成

シーン上に新たにCameraを配置し、Target Textureに作成したRender Textureを設定します。

 

Cameraの設定

Cameraの設定

 

カメラの映像をテクスチャに反映できるようになりました。次はマテリアルを作成します。

Projectウィンドウ上で右クリック”Create>Material”を選択し、名前を”Mirror”とします。

Shaderを”Unlit/Texture”に設定し、先ほど作成したテクスチャを適用します。

Shaderの設定

Shaderの設定

レンダーテクスチャの適用

レンダーテクスチャの適用

Hierarchyウィンドウで右クリック”3D Object>Quad”から作成した板に適用すれば簡易的なモニターの完成です。

身長差・手の位置・がに股

あとは、身長差・手の位置・がに股といった問題をパラメーターを調整しながら直していきます(参考記事)。

まず、身長差を感じる場合は[CameraRig]のScaleを変更することで調整できます。シーンを再生しながら、値を変更して調整します。今回は以下のような設定にしました(身長170cm)。

[CameraRig]の設定

[CameraRig]の設定

手の位置のずれはFinal IKのVRIKが手首の位置を設定するものであるのに対し、SteamVRのコントローラーは、コントローラーの先端位置を示していることによるものなので、以下の画像のようにオフセットを設定することで解決できます。

"[CameraRig]/Controller(left)/Lefthand"の設定

“[CameraRig]/Controller(left)/Lefthand”の設定

"[CameraRig]/Controller(right)/Righthand"の設定

“[CameraRig]/Controller(right)/Righthand”の設定

がに股になってしまうという点は、まずアバターにつけたVRIKコンポーネントから両足のSwivel Offsetを15に設定し、膝の向きを調整します。

膝の向きの調整

膝の向きの調整

次に、同じくVRIKコンポーネントの”Locomotion”から次のパラメーターを調整します。歩幅に関するパラメーターですので、好みで調整します。

歩幅の調整

歩幅の調整

納得できる動きになるまで、先ほど作成したモニターを観ながら調整してみてください。

アニメーションファイルの書き出し

Easy Motion Recorderのインポート

Easy Motion Recorderとは、Unityエディタ上でVRIKなどのモーションキャプチャをしたHumanoidキャラクターのモーションを記録, 再生をするスクリプトであり、以下のリンク先で公開されています。

Easy Motion Recorder

Easy Motion Recorder

Easy Motion Recorder

 

リリースページから”EasyMotionRecorder.unitypackage”をダウンロードしてプロジェクトにインポートします。

 

モーションの記録

まず、シーン上に”Assets/EasyMotionRecorder/Prefabs/EasyMotionRecorder.prefab”を配置します。

EasyMotionRecorder.prefabの配置

EasyMotionRecorder.prefabの配置

 

Hierarchy上に配置したEasyMotionRecorderを選択し、以下のように”Motion Data Player”コンポーネントと”Motion Data Recorder”コンポーネントのAnimatorにモーションキャプチャ対象のキャラクターをアタッチします。

 

Easy Motion Recorderのセットアップ

Easy Motion Recorderのセットアップ

 

これで準備は完了です。

シーンを再生します。アバターを動かせていることを確認した後、キーボードのRキーを押下したタイミングから録画が始まり、Xキーを押下したタイミングで録画が終わりファイルの書き出しが始まります。

これらキーの割り当ては、”Motion Data Recorder”コンポーネントの”Play Start Key”, “Play Stop Key”から変更可能です(設定次第ですがJoyStick Buttonよりコントローラーからの入力も指定できます)。

 

アニメーションファイルの書き出し

モーションの記録が成功していれば、”Assets/Resources”に”RecordMotion_yyyy_mm~”ファイルが生成されています。

Projectウィンドウからモーションを録画した目的のファイルを選択し、Inspectorウィンドウより以下の画像のように”Export as Humanoid animation clips”を選択すれば、”Assets/Resources”にアニメーションファイルが作成されているのが確認できます。

 

アニメーションファイルの書き出し

アニメーションファイルの書き出し

 

問題点

自分のモーションをもとにアニメーションファイルを作ることには成功しましたが、簡易的なモーションキャプチャーであるため、このままでは荒が目立ってしまうと思われます。

そこで、目的の動きを切り出し、表情や指の動きを付け、かつごみを取ってうまく動くよう編集しようとした際、このフレームの多さが問題になります(下画像)。

キーフレームリダクションの必要性

キーフレームリダクションの必要性

次の節では、VeryAnimationを利用してキーフレームリダクションをして、そのうえでアバターが思い通りの動きをするよう編集するまでの方法を確認します。

アニメーションのリダクションと編集

VeryAnimationのインポート

今回はHumanoid Animationのキーフレームリダクション・編集にVery Animationを用います。

Very Animation

Very Animation

Very Animation

 

こちらのページから購入・ダウンロードの後、プロジェクトにインポートします。

Very Animationの使用準備

アニメーションの編集用に新しいシーンを用意しました。ここには、動かしたいアバターを配置し、先ほど作成したアニメーションファイルをあてます。

 

アニメーション編集用シーン作成

アニメーション編集用シーン作成

 

また、Very Animationで編集するため、目的のアニメーションファイルをProjectウィンドウで選択し、Inspectorから以下のように設定します(Bake into Poseにチェックを入れ、Based Upon “Original”に設定します)。

 

Root Transformの設定

Root Transformの設定

 

それでは、Very Animationを使用するため、まずはタスクバーの”Window>Very Animation>Main”から、Very AnimationのMainウィンドウを表示します。

 

VeryAnimationウィンドウの表示

VeryAnimationウィンドウの表示

 

次に、Hierarchyウィンドウでアバターを選択した状態でVeryAnimationのMainウィンドウを開き、”Edit Animation”からVery Animationの編集画面を開きます。

 

編集画面の表示

編集画面の表示

 

下画像のような状態になれば準備完了です。

 

Very Animationの準備

Very Animationの準備

 

キーフレームリダクション

Very AnimationのMainウィンドウのタブから”Tools”を選択し、プルダウンメニューから”Keyframe Reduction”を選択します。

 

Keyframe Reductionの準備

Keyframe Reductionの準備

 

ここで”Reduction”を選択すると、キーフレームリダクションが実行されます。

 

キーフレームリダクション

キーフレームリダクション

 

“Rotation Error”, “Position Error”, “Scale and other Error”といったパラメーターはリダクションする際に元のアニメーションとの誤差をどれだけ認めるかを設定するものです。値を大きくすればするほど、キーの数は少なくなりますが、元のアニメーションとの差は大きなものとなります(今回はすべて10に設定してキーフレームリダクションをしました)。

実行すると、以下のようにキーが減り、編集しやすい状態になりました。

 

キーフレームリダクションの結果

キーフレームリダクションの結果

 

実際に中身を確認してみます。試しに、右肩の動きをみてみましょう。

画面右下のVA Controlウィンドウから右肩を選択し、画面左上のAnimationウィンドウからCurvesを選択することで、以下の画像のように動きが確認しやすくなります。

 

キーフレームリダクション後のアニメーションの確認

キーフレームリダクション後のアニメーションの確認

 

Animationウィンドウ上でバーを動かすと、キーの位置とキャラクターの動きの関係が視覚的にわかりやすくなっているのが確認できます。次は、これをもとに実際のアニメーションの編集に移ります。

 

Keyframe Reductionの結果確認

Keyframe Reductionの結果確認

 

アニメーションの編集

モーションキャプチャを利用したアニメーションは、細やかで自然な動きに魅力があるとはいうものの、そのままアバターに適用してしまうと、「動きすぎ」な印象を与えることがあります特に今回のような簡易的なモーションキャプチャーの場合は不必要な振動も多く、調整が必要です。もちろん、キーフレームリダクションによって比較的滑らかにはなってはいますが、機械的な調整だけでは残るべき自然さまで取り払われてしまうこともあるため、今回は残りの気になる部分を手動で調整しました。

 

目的となる動きの切り出し

まずは、目的となる動きを全体から切り取ります。

先ほど確認したように、特定の部位(右肩など)に焦点を当てておおよその場所を確認してから、目的の場所の前後を削除します。ひとまず、おおよその位置で切り出し、細かい調整は後で行います。

 

目的の動きの切り出し

目的の動きの切り出し

 

指の動きの追加

次に指の動きを追加します。モーションキャプチャの記録から書き出したアニメーションファイルには指の動きが入っていないため、必要であれば、後から追加しなければなりません。

今回は、手が目の位置にくるタイミングでピースのポーズをとるようアニメーションを作成しました。

Very Animationを利用する場合、VA Editorから動かしたい関節を指定して編集できます。

今回は”Finger Open Close>Right Finger”と”Finger In Out>Right Finger”を選択し、AnimationウィンドウのCurvesを編集することでピースを作成しました。

 

指のアニメーション作成

指のアニメーション作成

 

表情付け

VRMアバターの場合、Hierarchyウィンドウから”(アバター名)/face”を選択し、Skinned Mesh Rendererコンポーネント内のBlend Shapeから表情を指定できます。

 

VRMアバターの表情

VRMアバターの表情

 

Animationウィンドウからレコーディングモードを起動し、上のBlendShapesに欲しい値を入力することでキーを打つことができます。今回は、ピースをするタイミングで片眼を閉じ、口を大きく開くように表情を付けました。大まかなキーを打った後に、Curvesを使った遷移の調整もできます。

 

表情付け

表情付け

 

これで表情を付けることができました!

 

完成イメージ

細かい調整を済ませ、以下のようなアニメーションを作ることができました!

手を振っているアニメーションも同様に作成し、アニメーターで遷移させています。

完成イメージ

完成イメージ

 

長い記事となってしまいましたが、オリジナルのアニメーションを作ってみたいという方の参考になれば幸いです。

修正すべき点やコメント、質問等あれば、ぜひYtomi(@kanmichun)までご連絡ください。