VRMモデル作成についての手順

#はじめに
__この[公式ドキュメント](https://vrm.dev/univrm/univrm_workflow/)を読むことを強く推奨します。__
このスライドは、とりあえずVRMモデルをセットアップしたいという人向けに、纏めたものになっています。　__MToonの項目は所々省いているので注意。__
できるだけUnity初学者にも分かるように、書いているつもりです。
~~そもそも私が初学者~~
エグい長いので右のリンクを上手く使ってください。
※昔書いたサークル向けの記事を移植しています。　最新版は時間があるときに更新します。
#大まかな手順
1,　UniVRMのインポート
2,　Shaderの設定
3,　モデルデータの正規化
4,　ライセンス設定
5,　口パク表情設定
6,　揺れもの設定
7,　エクスポートで完成！！
#説明で使用する環境
Unity 2017.4.18
UniVRM 0.48
(0.50でも大幅な変更はありませんでしたので、同じ手順で可能です)
#使用できるモデル条件
- Humanoidモデル
- 各種Shapeキーが設定済みであること(表情・口パクを付ける場合)
- 揺らしたい物にボーンが入っている(揺れものがある場合)
- 瞳を動かすボーン、もしくは瞳に上下左右動かすShapeキーがある(視線移動したい場合)

#準備
###UnityとUniVRMの準備
まずはUnityで空のプロジェクトを作成します。
[リリースページ](https://github.com/vrm-c/UniVRM/releases)からUniVRMをダウンロードしてきます。基本的に最新版で構いません。
一番上のUniVRM-(バージョン).unitypackageをダウンロードしてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328760/066d44c5-06ec-5816-d5b8-8aedfc243e0e.png)
Assetウインドウで左クリックし、先程ダウンロードしたUniVRMのUnitypackageをインポートします。![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328760/4672a2b3-b1b4-bd29-bd22-a49ad02b17f0.png)
インポートするAssetの選択画面が出てくるのですべてチェックを入れimportを押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328760/d5a5436c-5f18-a053-8d21-809cbbfe18b5.png)
###モデル配置
FBXモデルをAssetウインドウにD&Dで読み込ませます。今回は量産型マスキャットのモデルを使用します。
モデルを読み込んだらInspectorウインドウで__Rig設定をHumanoidに切り替えてApply__を押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328760/3629418f-a9e1-e713-3e55-32b5d4120fe8.png)
AssetウインドウからHierarchyウインドウにD&Dでsceneに配置しましょう
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328760/e1989d4b-83dc-611a-42c3-b40f541f9350.png)

#Shaderについて
Shaderの設定をします
オブジェクトを選択し、InspectorウインドウからShaderを変更します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328760/df027a69-43f0-b45c-9196-1d6a94d7d1ae.png)
VRMではShaderを

- Standard
- VRM/UnlitTexture 
- VRM/UnlitCutout 
- VRM/UnlitTransparent
- VRM/UnlitTransparentZWrite
- VRM/MToon

の中から選ぶことが強く推奨されています。
今回はこの中からMToonとStandardを使用します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328760/9d8424af-927f-6729-ddd6-1f8728a2f6f3.png)
デフォルトの__ライトは色がついているので、色を白にしましょう。__そのままだと、ライトの色でルックが変わるので変えておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328760/6127707f-df1c-2ac6-cd93-973961d8f138.png)
今回はメカ部分をStandard、それ以外をMToonに設定します。
メカ部分は金属っぽさを出すためにStandardを選択しています。
もし、テクスチャに影が書かれている場合はUnlitTextureでも良いと思います。Unlitですのでライトの影響を受けません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328760/908cef34-8332-b5a0-f920-87dd42b81150.png)

#MToonの設定
今回はMToonのみ説明します。StandardやUnlit系のShaderはUnity標準と変わらないので。
##Rendering
###RenderingType
RenderingTypeは基本的にOpaqueでOKです。
テクスチャに透明部分があればCutoutやTransparentを使用しましょう。TransparentWithZWriteは奥行き情報のある半透明のオブジェクトに使用するといいでしょう
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328760/740148b6-179f-8a29-c38f-b9f274d40c34.png)
###CullMode
CullModeは描画の設定ができます
Off＝＝裏表描画
Front==表を描画しない
Back==裏を描画しない
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328760/384bafde-a62c-acd2-41c2-2e1f00516266.png)
左からOff、Front、Back
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328760/683b19de-0ce1-d944-4120-6032bde45091.png)
##color
Lit Color, Alphaはベースカラーになります。
基本的に白でOK
Shade Colorは影の色です。
自分で調整しながら馴染む色に設定しましょう。大体はピンクの入ったグレーで良いと思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328760/67fbe8ab-bc9f-0d5c-dff0-284a8a9d3954.png)
##Lighting
###Shading Shift
Shading Shiftは影をどこから付けるかの調整ができます。
-1は影なし　1はすべて影ありという感じです。
顔等は影が落ちすぎると暗い印象を与えてしまうため少し－値にするのがおすすめ。
左から-1 0 1
分かりやすいように影色を黒にしています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328760/1b07edea-1756-7fd7-368b-678912d3d936.png)
###ShadingToony
ShadingToonyは影の境界線の設定です。
値を上げればパリッとしたセル画調の影の付き方、下げればぼやけた感じになります。
値0(左)値1(右)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328760/65b6fbdd-2ad6-3cda-8b92-2933933c245f.png)
###Shadow Receive Multiplier
セルフシャドウの設定です。顔等の影があまり落ちてほしくない箇所は0それ以外は1でいいと思います。
###LightColor Attenuation
LightColor Attenuationはライトの色の影響度を設定できるパラメーターです。
0が影響を受けて1に設定すると影響を全く受けなくなります。基本的に0でOKです。
変に1にすると、場合によっては周りから浮きます。
###Emission&Normal Map
Emissionは特に設定しなくて大丈夫です。
簡単に説明すると光源に関係なく一色に塗りつぶす設定です。利用用途はマスクに使うんだと思います。しらんけど。
Normal Mapはその名の通り、あったらここで設定しましょう。
##Outline
Outlineは特に設定しなくても大丈夫です。その名の通り輪郭線を描写します。
この機能を使えば髪のテクスチャをベタ塗りでも良いかもしれませんね。

- None 輪郭線を描画しません(左)
- WorldCoordinates 世界に対して一定の幅の輪郭線を描画します(真ん中)
- ScreenCoordinates スクリーンに対して一定の幅の輪郭線を描画します(右)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328760/e86744a2-339a-402f-f1c4-a552520a33bf.png)

#モデルデータの正規化
Materialの設定が終わったら一旦VRMで書き出します。
Hierarchyでモデルを選択した状態で、ツールバーのUniVRM-(バージョン)からExport humanoidをクリック。
Authorに製作者の名前を入れExportをクリック。export先をAssetのフォルダに指定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328760/3ec0c097-747d-c2c6-5c84-5fe35d778ee3.png)
exportが終わると自動的にPrefabが生成されるので、元々Hierarchyにあったモデルを排除しPrefabをD＆Dで配置します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328760/0c716b2e-9070-6096-dbae-ac4ac6c7ffc6.png)

#VRM独自の設定を行う
ライセンス周りを設定していきます。__VRMの必要性に関わる大事な部分__なので、しっかり設定してください。
少なくとも、__タイトル・作者・ライセンス情報は埋めましょう。__
注意として、A person who can perform with this avatarの項目をOnly Authorにすると、VirtualCastでは配信しない状態で使えなくなります。
項目は読めばわかると思うので、四角く囲っている部分を埋めていきましょう。
Texture2D部分はサムネイルですので自由に決めてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328760/148e47b5-e583-c93b-f24a-392f97a36834.png)

#口パク・表情の設定
口パク・表情の設定に入ります。設定しなくても今の段階でVRMファイルとして出力できますが、表情がないです。
設置してあるPrefabを選択し、InspectorのVRM Blend Shape ProxyにあるBlend Shape Avatarをダブルクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328760/b4534237-ce2f-2dde-276c-06b86effc00b.png)
###表情の設定
表情を割り当てます。

|項目|表情|
|:-:|:-:|
|NEUTRAL|標準|
|A|あ|
|I|い|
|U|う|
|E|え|
|O|お|
|BLINK|目をつむる|
|JOY|喜|
|ANGRY|怒|
|SORROW|哀|
|FUN|楽|
|BLINK_L|左目を閉じる|
|BLINK_R|右目を閉じる|

～視線制御がShapeキーの場合に設定～

|項目|表情|
|:-:|:-:|
|LOOKUP|上を見る|
|LOOKDOWN|下を見る|
|LOOKLEFT|左を見る|
|LOOKRIGHT|右を見る|

プルダウンを開くと設定しておいたShapeキーの一覧が表示されます。
それぞれのShapeキーを混ぜて表情を作ることもできます。
Inspectorの下に表情のプレビューがありますので見ながら設定しましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328760/be8eda57-3a0b-a852-29db-429f94d1ef1e.png)

###表情の例
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328760/1a233e47-5554-8a26-9a55-58fea941297f.png)

###独自表情の追加
デフォルトの表情以外の表情を追加するにはAdd BlendShapeClipをクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328760/4119d188-d5b5-328c-b180-9b12b988d0d1.png)
今回は例でキス顔を追加していきます。
開かれたフォルダ場所で【表情の名前.asset】と名前を編集し保存します。
あとは追加された項目を選択し、表情を作るだけです。簡単。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328760/ffb1a67b-f6b2-8365-ad60-c94a592078cf.png)
~~めっちゃかわいいすき~~

#瞳の移動制御
VRMには瞳の追従機能が付いています。瞳が動きすぎないように設定しましょう。
瞳の設定を行うために瞳の追従先を生成します。
Hierarchyで3Dモデルを生成。なんでも良いですが今回はcubeにします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328760/cf6971a4-1a55-ac1a-6679-b2f953197424.png)
設置したら手頃な大きさにして顔の前に配置します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328760/d5e76753-dc2b-d2b3-b6af-a63830356ba4.png)
PrefabのInspectorにあるVRM Look At HeadのTargetに、先のcubeをD&Dします。HeadにHeadのボーンを設定します。
Headの位置は、Prefabのプルダウンを開いて、Armature\Hips\Spine\Chest\Neck\Headに大体あると思います。
ゲームを起動(▶を押す)しGameビューからSceneビューに切り替えします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328760/32623037-03f6-8755-6592-333c240a9312.png)

Targetに設定したオブジェクトを上下左右に動かし、瞳が動きすぎないかを確認。動きすぎたり、動きが少ない場合はVRM Look At Bone Applyerにあるスライダーで値を調整しましょう。
簡単にいうとXの値が動き方、Yの値が移動量です。
みゅみゅ教授曰く、Yは15～23ぐらいがいい。「大げさなぐらいが面白い」
__※目の動きの制御をブレンドシェイプで行ってる場合は、VRMLookAtBoneApplyerを排除しVRMLookAtBlendShapeApplyerを追加します。__
詳しくは[こちら](https://github.com/dwango/UniVRM/wiki/LookAt%E3%81%AE%E8%A8%AD%E5%AE%9A)を参照。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328760/3cfbe062-5b5b-6771-26f1-b82b43efef8d.png)

#揺れもの設定
HierarchyにあるPrefabの最下層にsecondaryがあります。こいつのInspectorにVRM Spring Boneがあります。
一つのVRM Spring Boneに複数のゆれものを設定できますが、重力設定等も共有されます。　同じで構わなければまとめて設定してしまいましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328760/b3ed4954-7a0f-69c8-4d51-6140e1ab7291.png)
今回は髪の揺れものを設定します。スカート等も同様の設定でいけます。
RootBonesのSizeに設定したい揺れものの数を入れます。今回は16です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328760/ec607ec2-c3ef-a0ee-d03c-2879eba79052.png)
Elementに揺らしたいボーンの__一番親のボーン__をD&Dで入れます。これで一応は揺れます。
今回は16個ありますが、揺れものが多いと重くなり、動作が不安定になる原因ですのでなるべく減らしましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328760/adbe4374-db7f-d26b-3a54-9690bd6a430e.png)
設定が違う揺れものを追加する場合は、AddComponentからScripts\VRM\VRM Spring Boneをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328760/13777f64-70d4-42ed-a2d2-1a8d91ff976f.png)
##VRMSpringBoneの設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328760/847e94e6-bc72-241f-1388-d135b7765ef9.png)

|項目|意味|
|:-:|:-:|
|Stiffness Force|やわらかさ|
|GravityPower|重力|
|GravityDir|重力方向|
|Drag Force|揺れの減衰|
##当たり判定
当たり判定を入れたいボーンのInspectorからAdd Componentをクリック。
Scripts\VRM\VRMSpringBoneColliderGroupをクリックして追加します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328760/9d3a3049-b864-ef47-6d14-0b21b91bffbd.png)
ワイヤーの球体が現れます　これが当たり判定です
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328760/131f3dcc-da6d-af5f-af2e-746d1f5d9c14.png)
sizeは当たり判定の数です。Elementのプルダウンを開くと座標や大きさが変更できるので、当たり判定を入れたい位置に入れていきましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328760/1699d556-cb50-6f78-6626-f8298653cb2e.png)
当たり判定の位置や大きさが決まったら、先程設定したVRM Spring Boneを開きます。
下部にあるCollider Groupsをプルダウンで開き、Elementの横にある⦿をクリック。設定した当たり判定を適用させます。
sizeを増やすことで、当たり判定群を追加していけます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328760/06ba7f26-47b4-7091-9276-219ae15393c0.png)

#VRMファイルのエクスポート
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328760/ed6118bf-5ebf-7430-b80e-36c93375f416.png)
VRMファイルをエクスポートします。正規化の時と同じようにPrefabを選択し、ツールバーのUniVRM-(バージョン)からExport humanoidをクリック。
正規化のときにAuthor設定等してあるため、そのままExportをクリック。
今回はUnityProject内にexportする必要はありませんので、任意の場所にexportしましょう。

#さいごに
お疲れ様でした。VRM化は終了です。
あとはVirtualCastやバーチャルモーションキャプチャーなどのVRM対応アプリでやりたいことをやりましょう。
ここまでの工程が頭に入っていれば、VRoid等のVRMモデル制作ツールで作ったモデルを、手直しすることも可能です。

#追記

ボーンの子にモデルを配置すればこんな事もできる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328760/3988dc81-0fcd-fe4c-d954-c39ce301b1cb.png)
このままVRMで出力できます。

#参考
[VRM](https://vrm.dev/) 
[バーチャルキャストで使えるVRM作成講座!-youtube]
(https://www.youtube.com/watch?v=toS2SiUxPtA&t=3046s)
[VRM 標準シェーダMToonの使い方](https://niconare.nicovideo.jp/watch/kn3485)