VRoidモデルの表情調整と表情データの再利用方法

##VRoidの標準の表情が強すぎる
VRoidの標準で設定されている表情がこちらなのですが……
![Vroid_表情一覧.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529171/ac3671cc-aaf1-f182-d5d9-a82dc96e72af.png)
なんというか、こう、**強 い 。**
全体的にもう少しナチュラルな表情にするためにUnityを起動して調整していきます。
また、VRMファイルはVRoid Studioで再読み込みすることはできないため、着替えなどを行った際に今回作った表情を再利用する方法についても説明していきます。

##準備
* 新規プロジェクトの作成
Unityを起動して3Dの新規プロジェクトを作成します。
<img width="859" alt="スクリーンショット 2020-02-18 16.19.51.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529171/73447d82-ec52-8e75-35cb-aa23bf144f6c.png">

* UniVRMのインポート
[こちら](https://github.com/vrm-c/UniVRM/releases)から **UniVRM-x.xx.x_ce1c.unitypackage**というファイルを選択してダウンロードします。
x.xx.xの部分はバージョン番号です。基本的に最新版で問題ないかと思います。
ダウンロードが完了したらファイルをダブルクリックすると下記のような画面が出るのでImportボタンを押します。
![スクリーンショット 2020-02-18 16.28.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529171/c31be4a3-03f0-a6ba-05bf-1cfb2cae6800.png)

* VRMファイルの読み込み
UniVRMのインポートが完了したら、UnityのAssetsフォルダへVRMファイルをドラッグ＆ドロップして読み込みます。読み込みには数秒〜数分かかりますのでファイルが生成されるまで少しだけ待ちましょう。
![スクリーンショット 2020-02-18 16.31.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529171/dd861767-c61d-87d4-2dda-99060eab516d.png)

##表情の調整
* BlendShapesの表示
Assetsに生成された[モデル名].BlendShapesを選択し、中にある**BlendShape.asset**を選択してください。
Inspectorに表示された**Select BlendShapeClip**下のボタンを押すとその下に表示された画面がボタンに対応した表情に切り替わります。
![スクリーンショット 2020-02-18 16.46.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529171/b32d266d-4df6-334d-89f6-fb050cc41fb0.png)

* 表情の調整
Select BlendShapeClipから編集したい表情を選択します。今回は怒った顔を変更するのでAngryを選択しています。
下の方にある**Face**という文字をクリックすると表情パラメータのリストが見えるようになるので、このパラメータを修正していきます。
Angryの初期値はFace.M_F00_000_00_Fcl_ALL_Angryが100になっています。
![スクリーンショット 2020-02-18 17.13.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529171/1918d6f2-bafb-c76a-e774-c2e05086f64c.png)

今回は下記のようにFace.M_F00_000_00_Fcl_ALL_Angryを0にして眉、目、口のパラメータをそれぞれ下記画像のように変更しました。
<img width="667" alt="スクリーンショット 2020-02-18 17.12.59.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529171/917ff311-032a-aacf-aa63-c435d9c4b99a.png">

調整した結果は下記のようになります。
![スクリーンショット 2020-02-18 17.10.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529171/d671c68a-9de9-1734-1a8a-ed7264e3d8f8.png)

この調整を変更したい表情全てに対して行っていきます。
Select BlendShapeClipの**AddBlendShapeClip**を選択することで独自の表情を設定することも可能です。
LOOKUP/LOOKDOWN/LOOKLEFT/LOOKRIGHTについては調整の方法があるそうなのですが、ボクもまだ試せていないので実際にやってみたらまた記事を書きます。

##VRMファイルの書き出し
調整が完了したらVRMとして書き出します。
Assets下の[モデル名].prefabをHierarchyにドラッグアンドドロップします。
![スクリーンショット 2020-02-18 17.29.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529171/e92acdc8-7b4f-4b25-86c2-7213a18b2bfe.png)

Hierarchyのモデルを選択した状態でメニューから**VRM**→**UniVRM-x.xx.x**→Export humanoidを選択します。

<img width="821" alt="スクリーンショット 2020-02-18 17.31.09.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529171/77ff8cf1-43a5-e9ad-1851-e2129a636da4.png">

VRM Exporterという画面が出てくるため、変更が必要な項目があれば書き換え、Exportボタンを押すと保存フォルダを選択する画面が出てくるので、保存場所を選んで保存します。（数秒〜数分ほどかかります）
<img width="320" alt="スクリーンショット 2020-02-18 17.32.09.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529171/f02b41c1-f6b1-3efc-cb82-fee78d651a92.png">

書き出されたVRMファイルと3teneで表示したり、Vroid hubにアップロードしてみると表情が変更されていることを確認できます。

##表情データの再利用
今回書き出したVRMファイルはVRoid Studioで読み込むことはできません。
そのため着替えなどをした際には再度表情の調整をする必要があります。
しかしパラメータの調整をもう一度するのは面倒……ということで、先ほど編集した表情のデータをエクスポートして再利用してみたいと思います。
この時表情データを書き出したVRMファイルとそれを適用したいVRMファイルの名称が同じだと正常に動作しないので同一のものにならないよう注意してください。

* 表情データの書き出し
Assetsフォルダ等で右クリックをし、出てきたメニューの中から**Export Package**を選択します。
<img width="860" alt="スクリーンショット 2020-02-18 17.44.53.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529171/5602f54a-8ecc-ba62-5715-153355292bc7.png">

**Exporting pakage**という画面が出てくるので、一度**None**ボタンを押して全てのチェックを外し、[モデル名].BlendShapesにチェックを付け直し**Export**ボタンを押します。
保存するフォルダの選択とファイル名を入力する画面が出てくるので分かりやすい名前をつけて保存してください。[記入したファイル名].unitypackageというファイルが保存されます。
![スクリーンショット 2020-02-18 17.45.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529171/e6f4bd7f-6418-5afc-af84-dcfd280d77cf.png)


* 表情データの適用
まず適用したいモデルを[準備](#準備)（プロジェクトの作成、UniVRMのインポート、VRMのインポート）をしてください。
完了したら先ほど保存したBlendShapesのunitypackageファイルをダブルクリックもしくはAssetsフォルダへドラッグアンドドロップして出てきた画面でImportボタンを押します。

<img width="350" alt="スクリーンショット 2020-02-18 17.59.46.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529171/3362f92d-8bf7-eb1a-67f9-8be3c8027c38.png">

次にAssetsフォルダから該当モデルのprefabを選択し、Inspectorから**VRM Blend Shape Proxy**の**Blend Shape Avatar**の右にあるボタンを選択します。
![スクリーンショット 2020-02-18 18.06.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529171/3e2ad9ab-63e2-bdc5-be4a-abdcda48c71a.png)

BlendShapesのunitypackageが正常にインポートできていた場合、Select BlendShapes画面に２つのBlendShapeというファイルが表示されていると思いますので、最初に選択されていたのとは別のBlendShapeファイルを選択することで表情データが適用されます。
<img width="197" alt="スクリーンショット 2020-02-18 18.05.26.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529171/0159b3bf-dda8-ce18-4eba-8da1959c721c.png">

##最後に
今回はVRoidモデルの表情変更についてまとめてみました。
こちらの方法で書き出したVRMファイルを3teneで動かした際には表情が変わることが確認できましたが、VRoid mobileでは特に変化が見られませんでした。
利用するアプリケーションによって差異があると思われますのでご注意ください。

最後までご覧いただきありがとうございました！
次回はVRoidモデルにアクセサリーを付ける記事も書いてみようかな……！