【Blender初心者向け】Cats Blender PluginをつかってVRoidモデルを軽量化する

#はじめに

VRoidモデルは重いらしいです。

![alt](https://i.gyazo.com/46add2c02b4b830c9b4f99849df7f00a.png)
(このVRMは自作したものです)

VRoidモデル数十体をOculus Quest上で動かす必要があったのでモデルを軽量化しようと試みましたが、CG系は無知な人間なので「simplygon」やblender上でメッシュを削減させる方法など、ことごとく上手くできませんでした…

そこでたどり着いたのが**Blenderのプラグイン「Cats Blender Plugin」**です。
3DモデルをVRChat向けに最適化するためのプラグインで、いろんな種類のファイルのインポート機能、ワンクリックモデル最適化などが備わっているらしいです。

ここでは、Cats Blender Pluginを使った軽量化方法を書きたいと思います。
Blenderの使い方の説明よりかは、Blenderがわからなくてもすぐにモデルを軽量化したい人向けに書いたので、かなり図が多めです。
(ちなみに自分はBlenderまったくわかりません笑)

# バージョン
* Blender 2.8
* Unity 2019.1.11f1

# インストール
## Blenderのインストール
Blenderをインストールします。[Blenderダウンロード](https://www.blender.org/download/)

今回は最新バージョンをダウンロードしました
![alt](https://i.gyazo.com/dc84d6ddb1c17edf2e7911764d3bd45c.png)

## Blenderの日本語化
ダウンロードが終わったら、まず初めに英語だとわかりにくいので日本語に設定します。

* blenderを起動、左上にある「Edit」タブを選択、「Preferences」を起動
* 左のメニューを「Interface」に変更し「Translation」にチェックをいれる
* 「Language」を日本語に設定
* 「Interface」にチェックをいれる
![alt](https://i.gyazo.com/7bb2d338ecf08e4aac2769b6c76c5dc2.png)

参考：[Blender 2.8 正式版のダウンロード方法](https://tomog.hatenablog.com/entry/Blender-Beginner-Download2-8officially#%E6%97%A5%E6%9C%AC%E8%AA%9E%E5%8C%96)

## VRM IMPORTERをインストール
Cats Blender Pluginをインストールするまえに、blender上でVRMファイルを読み込むことを可能にできる「VRM IMPORTER」をインストールします。

* [iCyP/VRM_IMPORTER_for_Blender2_8](https://github.com/iCyP/VRM_IMPORTER_for_Blender2_8)からZipファイルをインストール
 * Blenderのバージョンによってダウンロード先が異なる
 * Blender2.79用:[iCyP/VRM_IMPORTER_for_Blender2_79](https://github.com/iCyP/VRM_IMPORTER_for_Blender2_79)
* ダウンロードした VRM_IMPORTER_for_Blender2_8-master.zip を任意のフォルダに置く
* Blenderを起動「編集->プリファレンス」を選択

![alt](https://i.gyazo.com/972a61bef1d8435f67ca6668acccd47a.png)

* 「アドオン」タブを選択し、「テスト中」ボタンを選択した後に「Install」ボタンをクリックします。
*  ファイル選択画面が表示された後、先ほどダウンロードしたVRM_IMPORTER_for_Blender2_8-master.zipを選択
*  アドオン一覧に「VRM_IMPORTER」が表示される
*  チェックボックスにチェックを入れる
![alt](https://i.gyazo.com/3b1af0ce957fbc94b172d8e6a064a997.png)
* メニューからファイル->インポートを開き、「VRM(.vrm)」の項目が追加されていればインストール終了

参考:[BlenderでVROIDモデル(VRMファイル)を読み込む（VRM_IMPORTERアドオン Blender 2.8版）](http://bluebirdofoz.hatenablog.com/entry/2019/02/17/185706)

## Cats Blender Pluginをインストール
先ほどのVRM IMPORTERとほぼ同じやり方でインストールしていきます

* [michaeldegroot/cats-blender-plugin](https://github.com/michaeldegroot/cats-blender-plugin)からzipファイルをダウンロード
* blenderを起動し、「編集->プリファレンス」を選択
* 「アドオン」タブを選択し「インストール」ボタンをクリック
* ファイル選択画面がでてくるので、ダウンロードしたcats-blender-plugin-master.zipを選択
* プリファレンスの画面に戻った後に、「コミュニティ」ボタンをクリック
* 「3D View:Cats Blender Plugin」が表示されるので、チェックマークを付ける
![alt](https://i.gyazo.com/a1b05fad18cdd72ba45d42467052ef53.png)
* 初期段階では、右サイドにメニューバーが隠れているので、クリックしながら左に寄せると「CATS」のタブが表示される
![alt](https://i.gyazo.com/d29f1c86b4b2157b26bd4de0eab3faba.png)![alt](https://i.gyazo.com/419b19a8b37bfd10ec9a81a68c48e371.png)

参考文献:[Cats Blender Pluginのインストール【他の必要ツールも一気に準備】](https://shinrinmusic.com/cats-blender-plugin-install/)

# 軽量化
早速、Cats Blender Pluginを使って、軽量化していきたいと思います。
今回、軽量化するモデルはこちらのモデルを使います

![alt](https://i.gyazo.com/6ff37db2a53d42afd4e0bf4eea80eb3b.png)

服だけを変更した初期の男性モデルをつかっていきます。

![alt](https://i.gyazo.com/3974b6dc2304c9fbe3e62d0bdacbe1e5.png)

ちなみに、ファイルサイズは16MBあります。

## 初期画面の「Collection」「Camera」「Cube」「Light」を削除
VRMを軽量化するのに必要がないので削除します

* `Shift`キーを押しながらシーンコレクション内の「Camera」「Cube」「Light」を選択し、右クリック
![alt](https://i.gyazo.com/4a936d6ec12878e3c25e4dc2318cfd01.png)
* 「削除」を選択すると、シーン内のキューブが表示されなくなります
* そのあとに、「Collection」も不要なので削除します
![alt](https://i.gyazo.com/24a83098b4868147d1e1766df055da66.png)

この状態で、VRMファイルをインポートします

## VRMファイルをインポート

* 「Import Model」を右クリックします

![alt](https://i.gyazo.com/ee4ca9094ff38989055c90aa143d3e0f.png)

* ファイル選択画面がでるので、インポートしたいVRMファイルを選択します。
* 選択後に、3Dビュー上にモデルが表示されます。

![alt](https://i.gyazo.com/579a0d42783aa868878061fcfcfbc096.png)

### 視点移動の仕方
モデルが表示されたので、視点移動の仕方について触れておきます。

**視点回転**

* `マウスのスクロールボタン`を押しながらマウスを動かすと、視点を回転できる

![alt](https://i.gyazo.com/f42d0689ae19e188a2e61a7343caf6b8.gif)

**視点平行移動**

* `Shift`を押しながら、`マウスのスクロールボタン`を押して、マウスを動かす

![alt](https://i.gyazo.com/8c3169f162d4d30ffd303b1a40683384.gif)

くわしくはこちら:[【Blender】3Dビュー上での視点の移動･ズーム･回転](https://blender-cg.net/mausu-sitenn/)

### 用語
また、ここで用語についても触れておきます。

* Blenderにはさまざまなモードがあり、基本的には「オブジェクトモード」「編集モード」をつかう
 * オブジェクトの選択は、「オブジェクトモード」で行う
 * 「オブジェクトモード」⇔「編集モード」の切り替えは`Tabキー`でできる　

![alt](https://i.gyazo.com/69d559a320c5ed181842ea69da11ff70.png)

くわしくはこちら:[Blender 2.8を始める④ ～基本の操作方法！これだけは最初に覚えよう～](https://tohawork.com/b28-operation)
※自分もよくわかっていないので、詳しい人がいれば書き直してほしいです。

##  最適化
* 「Fix Model」ボタンを押すと、VRChat用に最適化してくれます。
 * 5秒ぐらいで最適化されます。

![alt](https://i.gyazo.com/d94fb8ea98c2b1d920211cceffaf2ce2.png)
最適化された後の様子です↓
![alt](https://i.gyazo.com/2159f1d69fb94b6dbf48fe753bc1248d.png)

## 余分なポリゴンを削除する
これからは、マテリアルごとにオブジェクトを分解し、ポリゴンの下に隠れているポリゴンを削除するという作業をします。
例えば、服の下に隠れている体の部分を削除します。

* シーンコレクション内でbodyを選択

![alt](https://i.gyazo.com/fcfd9ae14ceddd7225666d5b603d9937.png)

* `Tabキー`を押して、編集モードにする
 * (`Aキー`で全選択)

![alt](https://i.gyazo.com/94fd80564b1239cdf631be74c9e81b2c.png)

* `Pキー`を押すと、分離設定がでてくるので「マテリアルで」を選択する

![alt](https://i.gyazo.com/9890cc1753f778833bb3b88a0244737b.png)

* マテリアルごとに、オブジェクトが分割される

![alt](https://i.gyazo.com/aff9f8fc3f9e991c5483723b0cced403.png)

* `Tabキー`で「オブジェクトモード」に変更してから、Body××のオブジェクトを一つずつ選択し、ポリゴンの中に隠れているポリゴンを探していきます。
 * 表情のモーフがあるので、なるべく顔はいじらないほうがいいです。

![alt](https://i.gyazo.com/0cc380eab8037c8360a84f44d4e5b96f.png)

* 発見したら、「トランスフォーム」の「位置」を操作し、本体からずらす

![alt](https://i.gyazo.com/31f20d3a9f2ae64fad60d6ff78a7f0e4.png)

ここからポリゴンの削除作業に入ります。

* 3Dビューをクリックした後、`Tabキー`で「編集モード」に変更
* 「透過表示」を選択

![alt](https://i.gyazo.com/ab6ca2881da3d6566c63bb5645d42812.png)

* 他のポリゴンと重なっている部分を選択
 * 裏側も選択されているか確認する

![alt](https://i.gyazo.com/9377a61e580c0b2d0686d777928fce08.png)
![alt](https://i.gyazo.com/c61c0812b5caa2fefa378ceb8ae8a2b3.png)

* `Deleteキー`を押し、「頂点を溶解」を選択

![alt](https://i.gyazo.com/b4c08b2f1f105936a174cf3636563e45.png)

* 中が空洞になるまで、この作業を繰り返す。
 * 中が空洞ではないと、モデルが動いたときにいびつなポリゴンが体からでてしまうことがある。

![alt](https://i.gyazo.com/8f5c710bb38e6baa83763cc6e52c2e2d.png)

* 削除が完了したら、元の位置に戻す。

![alt](https://i.gyazo.com/5f4b9d6b40e774ec7f1d83498d7f09c6.png)

* 分離したオブジェクトを統合するために、「Model Options -> Joint Meshes -> すべて」を選択

![alt](https://i.gyazo.com/a37ca819db336912f64840dd5d037d76.png)

* 元通りに！

![alt](https://i.gyazo.com/784c0f6f9ad8444a7819565d01493472.png)

## 自動でポリゴン数を削除
次は全体的にポリゴン数を減らしていきます。
Cats Blender Plugin自体、自動でポリゴン数を減らしてくれる機能があるのでそれを使います。

* ポリゴン数が1万ほどあるので、8000ぐらいにしようと思います

![alt](https://i.gyazo.com/10e76ca9b385c856013ebd40a1e850e5.png)

* 「Decimation」の「Tris」に希望するポリゴン数を入力します。

![alt](https://i.gyazo.com/7c6b8b9b35072e1236e9f0e464531465.png)

* 「Quick Decimation」を押せば、ポリゴン数を減らすことができます。

![alt](https://i.gyazo.com/db47277f8da2594a6a2f94df07887b3f.png)

## マテリアルの統合
マテリアルの多さもモデルの容量に比例していくらしいので、今度はポリゴン数の削減だけではなく、マテリアルをいくつか統合していこうと思います。

* 「最適化」の「Generate Material List」を選択

![alt](https://i.gyazo.com/23e674f6d5d06ce5ec84625aef92b60a.png)

* モデルに含まれるマテリアルが表示されます。

![alt](https://i.gyazo.com/5c920a7de5a5fba4155a15eaf7eaf9c7.png)

* 「Hair」「HairBack」「FaceBrow」「FaceEyelash」「FaceEyeline」「Eyeextra」のチェックを外します。（今回はHairがありません…）
 * Unityで動かす際に、髪の毛の色や眉毛の色などを変更しやすくするため
 * 髪の毛など統合すると真っ白に表示されるため
  * VRoidは初期状態で白色ベースの髪のテクスチャに色を重ねて表現しているかららしいです。
  * 参考:[VroidモデルをCLIP STUDIOにインポートする方法【VRM/FBX】](https://shinrinmusic.com/vroid-clipstudio-import/)
* チェックを外した後に、下の「Save Atlas to..」を選択
* ファイル選択画面がでてくるので、任意の場所にAtlasを保存する
    * 最後にモデルをエクスポートする場所と同じにしてください

いくつかのマテリアルが統合されました
![alt](https://i.gyazo.com/53337b8da6ed798e82894ba532321688.png)

* 眉毛の色とまつげの色が同じなので、「FaceBrow」「FaceEyelash」「FaceEyeline」「EyeExtra」にチェックをいれ、先ほどと同じ要領で「Save Atlas to..」を選択し、任意の場所でAtlasを保存、マテリアルを統合する

マテリアルが３つになりました
![alt](https://i.gyazo.com/204bb4360336633d399fd041fa8446db.png)

##  エクスポート
最後に「Model」の「Export Model」を押し、Atlasを保存した場所にエクスポートすれば完了です。

![alt](https://i.gyazo.com/c9427bab2a7304b579c65a042132c217.png)

軽量化したモデルは**655KB**になりました！

![alt](https://i.gyazo.com/149668604d5f202b8511f80e4b24453a.png)

# 軽量化したモデルをUnityに表示する
今度は軽量化したモデルをUnityに表示したいと思います。

* UniVRMをインストール
 * [vrm-c/UniVRM](https://github.com/vrm-c/UniVRM)からUniVRMのパッケージをダウンロードし、Unityにインポートします。
 * VRM独自のMToonを使うためにUniVRMをインストールします

![alt](https://i.gyazo.com/028851e927ba3392addcd16a68f69c8a.png)

* UniVRMをインポートしたら、次にBlenderで軽量化したモデルをドラック＆ドロップでインポートします

![alt](https://i.gyazo.com/cb99931449321163f08569e2c67eb453.png)

* 「Inspector->Materials」を開いて、「Location」を「Use External Materials(Legacy)」に変更し「Apply」をクリックします。

![alt](https://i.gyazo.com/a7a3f2c7bcedadfdf326a1f0f1cabc43.png)

* 「Materials」フォルダが作成されるので、そのフォルダに移動

![alt](https://i.gyazo.com/1b4654f581df69d12d4f583544d3cb2f.png)

* Atlas画像と統合しなかったHairの画像をドラック＆ドロップでインポートします。
 * インポートする画像は統合のしかたにより変わります。
 * 今回はHairの画像を統合しなかったので、BlenderにVRMをインポートしたときに作成された画像をインポートします。

![alt](https://i.gyazo.com/bd9d1f25c9fea8ccab68f6f72fcb2500.png)
![alt](https://i.gyazo.com/0e0ec497946f04d221007af1f3f518f6.png)

* Materialを以下のように設定しなおします。
 * 「Shader」を「VRM/MToon」に変更
 * 「Rendering Type」を「Cutout」に変更
 * インポートした画像を以下のようにドラック&ドロップ

![alt](https://i.gyazo.com/8f3ddf28c70b5864ee221a6f60a54240.png)

* 髪の毛や眉毛は白く表示されてしまうので、Unity側で色を指定し直します。

![alt](https://i.gyazo.com/c57653eab4a81e323c7305b78e56d958.png)
![alt](https://i.gyazo.com/16ec0bf0f51a44de8ba2626768167e70.png)

これでUnityに元のVRoidで作成したものとほぼ同様に表示することができた。

![alt](https://i.gyazo.com/01a63dea183cfb6e8c19643871bbb3c9.png)

オリジナルのモデルと同様、表情モーフなどもあるので口パクやアニメーションをつけることができます。

# 最後に

一人称表示の仕方も残しておきたいのですが、疲れたのでここで一旦終了します。
画像サイズとかはちゃめちゃなので後で直します。

Blenderの使い方がわからない＆急いでいる方に見ていただければ幸いです。

# 参考文献
**Cats Blender Plugin関連**

* [Cats Blender Pluginの使い方【１ボタンで最適化・詳細設定も可能】](https://shinrinmusic.com/cats-blender-plugin-how-to-use/)
* [アバターのポリゴン数をパーツごとに減らす方法【Blender】](https://noshilog.com/blender-avatar-polygon-decimate)

**その他**

* [VRM→Blender→Unity→VRChat](https://qiita.com/Schwl_Freiheit/items/ecbfabe1a9fd8f5e83e0)
* [Vroidで作ったVRMをblenderでQuestのVRChatに対応させる。（ポリゴン編）](https://qiita.com/VR51054377/items/157304fc3b0f104e6a69)
* [VRChatで5000ポリゴン以内アバター持ちが超雑にOculus Quest対応する方法（素人）](https://narazaka.hatenablog.jp/entry/2019/04/12/VRChat%E3%81%A75000%E3%83%9D%E3%83%AA%E3%82%B4%E3%83%B3%E4%BB%A5%E5%86%85%E3%82%A2%E3%83%90%E3%82%BF%E3%83%BC%E6%8C%81%E3%81%A1%E3%81%8C%E8%B6%85%E9%9B%91%E3%81%ABOculus_Quest%E5%AF%BE%E5%BF%9C)
* [[Unity]GPU負荷 備忘録](https://qiita.com/flankids/items/823f9bc19c669912237b)
* [VRoidをローポリ化するSimplygonの使い方を徹底解説【簡単５分】](https://shinrinmusic.com/vroid-simplygon-lowpoly/)
* [【使用感】Unity等で使えるポリゴン削減ツール「Simplygon」](https://qiita.com/soh1106/items/b5eb0e7941ad57576ddc)
 * Simplygonうまく使えなかったものです…
* [Unity: Mesh Baker を使ってみる](http://uuupa.hatenablog.com/entry/2018/03/31/164145)
* [VRoidのアバターをVReducerでcluster用にコンバートしてみた](http://mitchie-m.com/blog/vr/vreducer-vroid-cluster/)
* [kanno2inf/VReducer](https://github.com/kanno2inf/VReducer)
 * Pythonをつかって一発で軽量化できるらしいです…環境構築がめんどくさかったのであきらめました。