【VRoid】VRoidのアバターにblender経由でアクセサリーをつけてVRMファイルにする方法

2021/03/03
- タイトル変えました。

2021/02/21
-UniVRMのダウンロードについて、VRMファイルについて解説しているサイトを追記しました。

2020/11/07
- UniVRMがデッドリンクになっていたので、Google検索の利用をおすすめする文言に変更しました。

2020/07/14
- UniVRMが0.56.3にバージョンアップしたので、その旨を追記しました。
- また、unity上で行うボーンの反映については、無視しても動画配信のアバターとしては問題なく使えているので、「対応しなくても大丈夫です」的な文言を追記しました。

2020/06/24
- 細かく記事を追記しております。



---

# 全体のフロー

![スライド1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/80e18eb3-b7eb-d053-26ca-f96f60cd24bd.png)
![スライド2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/37e33987-e604-d030-9399-f0b61e221577.png)
※上記の[ボーンの反映]については、現状対応しなくても、配信用アバターなどで使うことが可能です。
![スライド3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/63866b88-24fc-77d4-8101-54eb7c23f070.png)

---

# アクセサリーを作ろう
## 1. アクセサリーをfbx形式でエクスポート
- サイズに注意

# blender編
下図は作業イメージ
<img width="1429" alt="スクリーンショット 2020-06-22 22.22.34.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/ce941b29-9bfd-914c-e3fc-af9eb20b87f3.png">

---

## 1. 環境設定
- Blender2.83出たからインストール環境に注意(当記事ではBlender2.83を使用しています)
- VRMファイルを使えるようにしておく(アドオン追加)
- アドオンはBlenderのバージョンによってファイルが異なるから注意

アドオン…VRM IMPORTER for Blender2.80
(https://github.com/iCyP/VRM_IMPORTER_for_Blender2_8)

---

## 2. インポートする
- VRoidからエクスポートしたVRMファイル
- fbx形式のアクセサリー

---

## 3. モデルとアクセサリーを親子関係にする
- Blender2.82以降だとUI変わっているから、参考サイトによってはやり方がわからなくなる可能性がある
- 親子関係にすると、アクセサリーの位置がすんげー変わるから、左右対称に設置する必要があるようなアクセサリーの場合(たとえば独立した耳あてとか)、あらかじめ左右で結合しておくと楽ということが痛いほどわかった

下図は、親子関係にしているところ
<img width="456" alt="スクリーンショット 2020-06-23 17.00.46.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/d7db7dca-8b34-84ce-b9c8-2814123f2cce.png">

2021/02/26追加スクショと追記(blender2.83です)
オブジェクトを選択した状態で、「オブジェクトプロパティ」のアイコンから、
「Parent」(何と親子関係にするか)
「Parent Type」(属性は何か)
「Parent Bone」(具体的にはどこの部分か)　の3つを設定します。
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/591577ec-5f75-10a8-57ba-bf464f5cd39d.png)


---

## 4. fbxでエクスポートする
下図は、エクスポート時の設定だが、正しいかどうかあやしいので、メモ程度で読み飛ばしてください。
<img width="349" alt="スクリーンショット 2020-06-23 16.02.00.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/fbc64419-fb4d-ecba-b7bd-9dddd4ff5dc1.png">
<img width="351" alt="スクリーンショット 2020-06-23 16.02.16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/26363044-bf04-be19-efe4-99581ade6c7f.png">

---

# unity編

ここで結局何をやるかというと、blenderで抜け落ちた様々なデータ(※)を、元のVRMファイルから抽出して、fbxファイルをちゃんとしたVRMファイルに戻そうぜということです。

※抜け落ちたデータとは
- マテリアル
- BlendShape(要は表情)
- ボーン(ここは、本当に必要かは要調査が必要)

下図は作業イメージ
<img width="1426" alt="スクリーンショット 2020-06-22 22.22.27.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/cd0fd4f6-75c1-fa0d-990b-d671fd18fa1b.png">

---

## 1. 環境構築
- 使用unityバージョン...unity2019.4.1f1(LTS)
(2020/06時点で使用したパッケージデータ)
- UniVRM ~~-0.55.0_ce1c.unitypackage　※7/14時点で、0.56.3がリリースされています。~~
- ~~↑UniVRMは、google検索して最新版等の解説があるところを経由してダウンロードしましょう。packageデータなので、packageインポートで導入することができます。(2020/11/07記載)~~
- VRMファイルについての解説サイト([https://vrm.dev/](https://vrm.dev/))で、オープンソースとしてUniVRMをダウンロードすることができます。(2021/02/26追記)
- Dynamic Bone(https://assetstore.unity.com/packages/tools/animation/dynamic-bone-16743?locale=ja-JP)
- ReflectBoneSetting.unitypackage(https://github.com/MrSlip777/LoadVRM/releases/tag/V1.0)
(前提として、アセットストアでDynamicBoneのインポート)

---

## 2. Blenderからのfbxファイルに、VRoidからのvrmファイルを使用して、マテリアルを反映させる
1. Blenderからのfbxファイルをアセットに入れる…(A)
2. VRoidからのVRMファイルをアセットに入れる...(B)
3. (A)に、(B)のマテリアル情報を設定する

下図は、反映イメージ
<img width="1440" alt="スクリーンショット 2020-06-23 16.09.26.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/0adf9deb-c8b5-c37e-e79d-c1a8d8b77033.png">

下図は、マテリアル反映前のfbxファイル
<img width="317" alt="スクリーンショット 2020-06-23 14.47.17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/1e0f58ed-2258-ab8c-ce9a-026d85bfef2b.png">
下図は、マテリアル反映後のfbxファイル
<img width="304" alt="スクリーンショット 2020-06-23 14.56.10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/e6bfe8c9-e207-9381-d47b-c1f85fdfae79.png">

---

## 3. vrmファイルからスプリングボーンのデータをエクスポートする
1.　先の項目で使用したfbxファイルを非表示にする。
2.　vrmファイルを設置する。

※ここの過程は飛ばしても大丈夫そうです。
　5.から再開してください。(マテリアルが反映されたfbxファイルを、vrmファイルにエクスポートして、unityにインポートしよう)

下図は、先の項目のfbxファイルを非表示にして、vrmファイルを設置したところ
<img width="306" alt="スクリーンショット 2020-06-23 14.58.42.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/0eb566d8-572a-c795-f038-da05b3a8a244.png">

---

3.　vrmファイルから、スプリングボーンのデータをエクスポートする。

やらなくていいところです。(2020/07/14追記)

~~下図は、スプリングボーンをエクポートしたところ~~
<img width="400" alt="スクリーンショット 2020-06-23 15.02.14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/accf856b-d486-2ef9-b861-3d71743116da.png">

---


4.　fbxファイルに、スプリングボーンのデータをインポートする。

やらなくていいところです。(2020/07/14追記)

~~※この記事を執筆時点(2020/06/23)では、このインポートがエラーを起こして機能せず、
スプリングボーンのインポートは行っていないまま、最終的には3teneでのアクション確認・表情確認・フェイストラッキング・リップシンクが動くことを確認できています。
※ひょっとしたら、スプリングボーンに関してはノータッチでもいいのかもしれない…~~

---

5.　fbxファイルを、いったんVRMファイルにエクスポートする。

---

6.　5.でエクスポートしたVRMファイルを再度アセットで読み込み、元のVRMファイルからBlendShapeを反映させる。

下図は、BlendShapeを反映させるところ。
<img width="1437" alt="blendshapeの反映.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/75ce8c05-3119-7065-2d29-72b803715193.png">

- なお、下図は、よりやりやすい方法となります。(2020/07/14追記)
- 変更したいBlendShapeを選択して、bake箇所を展開する。
<img width="651" alt="スクリーンショット 2020-07-14 11.19.52.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/2fed5e59-05a5-18a7-7eb9-b6dc04104542.png">

- 展開された中から、BlendShapeの項目に該当するものをスライダーで数値を大きくします。(100%である必要はなく、また複数の組み合わせも可能)
<img width="649" alt="スクリーンショット 2020-07-14 11.21.53.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/eac3fa30-8e78-4f99-07c9-0a15db838a11.png">

- VRoidのデータにあって、fbxから変換したデータにない場合、新しくBlendShapeを追加します。
<img width="1265" alt="スクリーンショット 2020-07-14 11.28.03.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/03a0c39e-647e-c58c-7ff3-e094ceafaca9.png">


---

7.　設定したVRMファイルを、再度VRMファイルとしてエクスポートする。【完了】

---

下図はさらに3teneで取り込んでポーズしたところ。
さて、あなたはカスタマイズしたキャラクターでどんなことをしたいですか？

![C71CED6B-FD53-491C-A3AE-CEC03EE14ECC.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/146e96d1-ee5c-2dd1-31e7-4ac482fc783d.jpeg)

![33659627-02DA-4FEA-A15C-F51FF2115B42.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/5f87ca78-3662-0811-f8d8-18591baa8839.jpeg)

![vita2.2photo0714.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/d07be574-52c1-dd70-234f-5df2955fe218.png)