一覧へ Tag

VRoidで作ったVRMモデルをUnityで動かそう！【アドカレ2021 5日目】

前置き


こんにちは、16期PG班の鈴木智仁です.

2021年10月31日にVRoidStudioの正式版がリリースされましたね．

このVRoidStudioは非常に使いやすいツールで、簡単に人型モデルを作成することが出来ます！ (しかもなんとこれ・・・無料で使えるんですよ)
では、自作のVRMモデルを作ったら次に何をしたいかというと、 動かしてみたいですよね！

なので今日はUnityでVRMモデル動かすということをやっていきたいと思います．

完成イメージはこんな感じ

https://youtu.be/dGM8OGqjsVQ

準備(インストール)

ではまず、必要なソフトウェアのインストールを行っていきましょう！

VroidStudio

VRoid Studio のダウンロード

Unity Hub

Download - Unity (unity3d.com)

Unity HubからUnityのダウンロード

Unity Hub を起動し、Unity　2019.4.～ (LTS)のインストール

unityhub_plot1.png ※2021版はUniVRMがうまく動かない場合があるので2019版のUnityのインストールをお勧めします unityhub_plot2.png

※インストールには結構時間かかります．気長に待ちましょう．

UniVRM

Releases · vrm-c/UniVRM (github.com) ※UnityでVRMをインポートする為のアセットです

UnityChan

ユニティちゃん 3Dモデルデータ - ダウンロード - UNITY-CHAN! OFFICIAL WEBSITE

※今回はユニティちゃんのアニメーションのみを使います

Vroid StudioからVRMをエクスポート

1.VroidStudioを起動します． 　新規作成、または既存のVRMを選択してください
2.起動したら、いい感じに人型モデルをデザインしましょう！

vroid_1_min.png

こんな感じ（製作期間7分半)

3.VRMをエクスポートする

vrm_plot1.png vrm_plot2.png

↑の「エクスポート」のボタンを押してください。

Unityでの作業(VRMのインポート)

それでは、Unityで作業を行っていきます

1.まず、プロジェクトを作成します　(3D)で作成

unity_projectMake.png

2.次に、ダウンロードしてきたUniVRMをUnityにドラッグ＆ドロップ

unity_work_1.png

すると次の画面が出てきます．そのままimportを押してください

unity_work_2.png


3.VRoidで作成したVRMファイルをインポートします．(そのままドラッグ＆ドロップすれば大丈夫です)


4.シーンのhierarchyウィンドウに、置いてみて表示できるか確かめましょう

unity_work_3.png

こんな感じになれば大丈夫です．

Unityでの作業(VRMを動かす！)

さて、UnityにVRMをimportするところまでは完了しました．

次は、モデルにアニメーションを当てていきましょう．

1.ユニティちゃんのアセットをインポート (ドラッグ＆ドロップでOK)

（直接ユニティちゃんを使うわけではなく、同梱されているアニメーションを使います）


注意:ユニティちゃんパッケージを入れると、パッケージ内のC#コードでエラーが起きる箇所があります unity_work_4.png

以上のようにコメントアウトをすれば直ります


2.AnimatorControllerの作成

右クリック→Create→Animator Controller

で作成できます


3.AnimatorControllerの編集

AnimatorControllerを開くと以下のような画面が出てくると思います．

ここからは書くと長くなるので、動画でささっと説明します.

AnimatorControllerの設定 - YouTube

※動画では、動画では全てのトランザクションのHasExitTimeのチェックをつけたままですが、

HasExitTimeチェックを外した方がより自然なモーションの切り替えになります．(推奨)


4.モデルに、作成したAnimatorControllerを適用 アバターのAnimatorコンポーネントのControllerに、作成したAnimConをアタッチ

unity_work_6.png
5.以下のスクリプトをアタッチ

※アニメーションを制御と、VRMを動かす処理を書いたコードを配布します．(改変＆再配布OK) https://drive.google.com/file/d/1CZDG182NvpgxbLevw8Fh_wn9LbZ71onw/view?usp=sharing

今回はこれをダウンロードしてUnityにアタッチして下さい！

unity_work_7.png

完成！

今回、筆者が作成したUnityプロジェクトファイルはここからダウンロードできます． (改変自由)

https://drive.google.com/file/d/1QA8MJPObHYkrFOpURdfkmF0sduGz0Q5S/view?usp=sharing

終わりに

やっぱりVRMを動かすのは楽しいですね！

もし「モデルが動かない！」 「errorが出て再生できない」等のトラブルがございましたら、お気軽に鈴木までSlackでDM下さい．

追記 12/05:気付いたら12/5開始から+12時間経ってましたね・・・。

今後はちゃんと〆切守ります…m(__)m


さて！、明日(12/6)のアドカレ担当は土川君です！
BlazorWebAssembl入門（チャットアプリを作ろう・環境構築編） これで君もC#でWebページが作れるようになるかも?！ 乞うご期待！