【袴でバーチャル卒業式】VR初心者がclusterにVRoid自作アバターをアップロードするまで

コロナの影響により縮小開催のリアル卒業式
そんな中バーチャル安田講堂の前で[バーチャル卒業式](https://sites.google.com/view/ut-vrlt2020)があると聞いて
![バーチャル卒業式_edited.001.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/164897/f9b30392-8819-4751-aa1f-fbb7d3a40a26.jpeg)


というわけでVR初心者が袴アバターの作り方を紹介します


# Step1  :  VRoidで袴のアバター作り
## VRoid Studioのインストール
- アバターはこのソフトで作ります
- VRoid Studioを[公式サイト](https://vroid.com/studio/)からインストールします
- このソフトは直感的に使いやすいし、デフォルトが可愛いのである程度いじっても可愛いアバターになります

![20180629-001-991ebe0213010d4619551a8c60221bb2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/164897/deb86a34-cf45-a5b8-305b-8b08cec0356c.png)

## ワンピースのテクスチャを加工して袴にする
- Clothing Editorタブから服装をワンピースに変更します
- さらにテクスチャタブを開くとワンピースを展開した画像が出てきます
    - これがテクスチャ
- このテクスチャを貼り付けているだけなのでお絵描きすれば袴になります
- 私はDefault ImageをダウンロードしてiPadのお絵描きアプリから袴の画像に加工しました

<img width="1424" alt="スクリーンショット 2020-03-25 15.12.39.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/164897/b10ae659-ee54-c89f-d743-1b0c3c68e9af.png">

- 袴姿に！

<img width="1424" alt="スクリーンショット 2020-03-25 15.13.15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/164897/b84f11af-3ebf-cc6b-204a-99e65c992c70.png">

- 髪の毛はいい感じに生やします
- 3層以上に分けると立体感が出るのでおすすめ
    - ただしポリゴン数を少なくするために20本ぐらいにおさえましょう

<img width="1424" alt="スクリーンショット 2020-03-25 14.47.09.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/164897/a2bb53c7-34d8-32d9-30ea-0eb4a573ed76.png">

<img width="1424" alt="スクリーンショット 2020-03-25 14.47.29.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/164897/36ed223c-32d4-0ac8-1943-ab3ca1cc4073.png">

![バーチャル卒業式けまこ.015.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/164897/cfff347c-153d-6052-882e-055b559a834d.jpeg)

- アバターができたらExporterのタブからアバターをVRMファイルで出力します
    - 「髪の毛メッシュを結合する」にチェック入れるの忘れずに！


しかしここで問題発生、、、！
![バーチャル卒業式けまこ.016.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/164897/ce2be77e-1137-bdd8-07ec-932a69e2edbf.jpeg)

clusterでアップロード可能なアバターには色々と制限があるのです
（https://clustervr.gitbook.io/sdk/guide/avatar_customization/avatar_limit）

そこで

- モデルの軽量化
- マテリアルの統合
- テクスチャの貼り付け

を順に行なっていきます

# Step2 : Blenderでモデルの軽量化
## Blenderのインストール
- [公式サイト](https://www.blender.org/)からインストールします

## プラグインを入れる
- 今回の作業で必要なプラグインは
    - VRM IMPORTER
        - https://github.com/iCyP/VRM_IMPORTER_for_Blender2_8
        - blender上でVRMファイルを読み込むためのもの
    - Cats Blender Plugin
        - https://github.com/michaeldegroot/cats-blender-plugin
        - 軽量化の作業に使うもの

- プラグインの入れ方は下の通り
    - まずは上のGithubのリンクから2つともzipでダウンロードしておきます
    - blenderを立ち上げてEdit > Preferences でウィンドウを開いたら
    - Add-ons > Install でダウンロードしたzipファイルを選択
    - 表示されたらチェックボックスを選択しておく

- もし詰まってしまったら次の記事を見てみてください
    - https://qiita.com/nyu___nS/items/abfd8c8edcb866b4c2d9#cats-blender-plugin%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB


## BlenderでVRMファイルを読み込む
- まずは右上の部分でCamera, Cube, Lightを消しましょう
- Collectionも消しましょう
  <img width="235" alt="スクリーンショット 2020-03-22 21.57.55.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/164897/78592fb6-018e-d83b-19d3-6ece63653439.png">

- CATS > Model > Import Model でVRoidから出力したVRMファイルを選択します
  <img width="564" alt="スクリーンショット 2020-03-22 21.58.29.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/164897/2aa94a3d-c955-b6f7-25e1-4a3dcc8337e9.png">

## Blenderでモデルの軽量化
- CATS > Model > Fix Model を押すだけ！簡単！
<img width="564" alt="スクリーンショット 2020-03-22 21.58.59.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/164897/84c2b74a-d5c2-ad8f-43c1-26f9f51db377.png">

## Blenderでマテリアルの統合
- CATS > Optimization > Atlas を開くと下のような画像の状態になって欲しいところですが
    - なってたら次の章は飛ばしてください！
<img width="564" alt="スクリーンショット 2020-03-22 22.00.06.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/164897/f06bbd3e-f086-dc56-5531-2b937f1c6888.png">

### Generate Material List できるようにする
- Macだとデフォルトでできませんでした
- [ここ](https://vrcat.club/threads/material-combiner-blender-addon-2-1-1-5.2255/page-3#post-9712)に書いてある通り落ち着いて順番にやっていきましょう
    - 以下ではwgetだけcurlにしてあります
    - `/Applications/Blender.app/Contents/Resources/x.xx`の`x.xx`のバージョン部分は自分の環境に合わせてください

```
$ cd /Applications/Blender.app/Contents/Resources/2.79/python
$ curl -L https://bootstrap.pypa.io/get-pip.py > get-pip.py
$ ./bin/python3.5m ./get-pip.py --prefix
$ /Applications/Blender.app/Contents/Resources/2.79/python
$ ./bin/python3.5m bin/pip3 install Pillow
```

- ここまでやればGenerate Material Listのボタンが出てるはず！
    - もしなかったらBlender再起動

## Blenderでマテリアルを統合
- CATS > Optimization > Atlas > Generate Material Listを押すと現在のマテリアル一覧を見ることができます

<img width="403" alt="スクリーンショット 2020-03-22 22.02.35.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/164897/6b057b3f-16e5-f84b-27c4-f8a977344612.png">

- いっぱいありますね、、、！
- clusterではマテリアルの数を8以下にする必要があるのでどんどん統合していきましょう
- チェックボックスから統合したいマテリアルを選択してSave Atlas toをクリックすると統合できます
    - マテリアルを統合するときにそれぞれのテクスチャも統合するということ？なのかな
    - ちなみにclusterにアップロードするときの制限として1つのテクスチャは2048 * 2048以下である必要があるので服のテクスチャは他のと統合できないと思います
- 注意すべきはVRoidのテクスチャが白黒だったもの
    - 髪、眉、まつげ、アイライン、靴あたりかな？
    - ここら辺は色の設定をしているので合わせるべきかしっかり考えましょう（失敗してみるとわかる）
- 私の場合は以下の7つにまとめました（あとで髪飾りをつけるために1つ余裕を持たせた）
    - 髪関係
    - 目関係（まつげとアイライン以外）
    - まつげとアイライン
    - 眉
    - 服
    - 靴
    - 顔の肌と体の肌

- このとき髪やまつげやアイラインが白くなりますが大丈夫、あとで復活します

## Blenderでモデルのエクスポート
- CATS > Model > Export Modelからfbx形式で出力します

# Step3 : Unityでテクスチャを貼り付け
- 最後にUnityで先ほど統合したマテリアルのテクスチャを貼り付けていきます

## Unityのインストール
- [公式サイト](https://unity3d.com/jp/get-unity/download)からUnityをインストールします

## UnityにUniVRMをインポート
- [UniVRMのGithub](https://github.com/vrm-c/UniVRM/releases)から最新バージョン`UniVRM-0.xx.unitypackage`をダウンロードします
- Unityを立ち上げたらAssetsを選択した状態で真ん中下のスペース（Assetsタブ）にダウンロードしたUniVRMをドラッグ＆ドロップ
<img width="1430" alt="スクリーンショット 2020-03-28 22.54.09.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/164897/083adbe4-4908-62ae-7e4d-f4106f620eb2.png">
- Importを押します

  <img width="349" alt="スクリーンショット 2020-03-22 22.09.01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/164897/24b4024b-a774-8f4f-5015-72fbfd98c4c4.png">

- これでVRMファイルを扱えるようになりました

## UnityでVRMファイルを読み込み初期設定
- Blenderで出力したfbxファイルをAssetsタブにドラッグ＆ドロップ
- 右のInspectorタブから Rig > Animation Type を Humanoid に設定
<img width="349" alt="スクリーンショット 2020-03-22 22.10.38.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/164897/8e0bde5b-adfb-bf50-df46-fc9976fb6ef1.png">

- 同じくInspectorタブから Materials > Location を Use External Materials に設定

<img width="349" alt="スクリーンショット 2020-03-22 22.10.41.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/164897/39356df7-5d04-dae1-8196-0876929877c2.png">

## Unityでテクスチャの貼り付け
- 最後の仕上げ！
- Assets > Materials で以下のようになると思います
<img width="1080" alt="スクリーンショット 2020-03-22 22.10.59.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/164897/672ff7b7-2b53-6997-4c70-a8fc08a270e6.png">
- マテリアルを一つずつ設定していきます
- 下にある白い丸みたいなのをクリックします
<img width="1200" alt="スクリーンショット 2020-03-22 22.11.17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/164897/b76a7a4a-1235-6357-31fc-29b500e2815c.png">
- 右側に設定画面が出てくるのでShaderをVRM/MToon
- Rendering TypeをCutoutにします
- そしてマテリアルの名前に対応するテクスチャをBlenderのフォルダとかから見つけてきてLit ColorとShade Colorの横の四角にドラッグ＆ドロップ
- 髪の毛、眉、まつげ、アイライン、靴などは白くなってしまいますがLit ColorとShade Colorを右の四角から設定すると正しく色をつけられます
<img width="1200" alt="スクリーンショット 2020-03-22 22.11.59.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/164897/9b153748-73d6-17ac-0a88-c0e72586c4ef.png">
- 全部のマテリアルに対してこの作業を行うと完成！可愛い！
<img width="1078" alt="スクリーンショット 2020-03-29 9.44.57.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/164897/39f847a7-46b2-65a2-8133-1788de9b0e02.png">
- 最後に自分のアバターを選択した状態でVRM > UniVRM-0.55.0 > Export humanoidでVRM形式のアバターを出力します
<img width="1078" alt="スクリーンショット 2020-03-29 9.47.40.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/164897/e9ce62c9-bced-d7ae-29ec-7db1ac9ef0c9.png">


# Step4 : clusterへのアップロード
- [clusterのサイト](https://cluster.mu/) > アイコン > アバター
- VRMファイルをアップロードというところからUnityで出力したVRM形式のアバターを選択すれば終了
<img width="931" alt="スクリーンショット 2020-03-25 17.19.26.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/164897/f20002f6-65c5-b727-3a8f-906b53249ffd.png">

- お疲れ様でした！自作アバターでclusterを走り回りましょう！
![20200325081659+09:00.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/164897/08bae557-f360-06a3-b266-423336317009.png)

# 物足りなくなった人へ
- もともとCAD使ってる人だと髪飾りとかつけたくなっちゃいますよね
- Fusion 360のフォーム機能でダリア風の髪飾りとか作っちゃいますよね
    - 白のダリアの花言葉は「感謝」だそうです
<img width="500" alt="スクリーンショット 2020-03-22 20.55.11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/164897/d222d3f2-aa60-e3a7-b696-8c44dfd631c2.png">

- このままだとポリゴン数が多すぎるのでBlenderで減らします
- 髪飾りをBlenderで開きます
- 右下のところで設定みたいなマークを押して
- Add ModifierからDecimateを選択
- Ratioを操作してポリゴン数を減らします
- 画面の一番下の右のほうにポリゴン数が表示されてるのでそれを見ながらいい感じのところまでモデルを軽くしましょう
<img width="246" alt="スクリーンショット 2020-03-29 10.26.37.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/164897/5840dbb7-8586-bbec-4cc4-3dadb813edb2.png">
- 軽量化できたらfbx形式でエクスポート
- アバターがいるUnityのAssetsタブにドラッグ＆ドロップ
- サイズとか位置とか調整します
![ETuBNOkUcAA_rSx.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/164897/d2a7f4da-d760-acf4-5596-400d7a1e566c.jpeg)
- 頭にくっついて動いてくれないと困るので左のタブから髪飾りをHeadの下に移動させます
<img width="297" alt="スクリーンショット 2020-03-22 22.23.32.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/164897/8432192e-6aa5-7ad7-1af9-8c977b9e072e.png">
- これで完成
- アバターの時と同じようにExport humanoidします
- 満足！！！
![ETuBNNkUEAA7tgy.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/164897/8f1cef94-b3be-8161-4e1a-c6ad1b8a8f74.jpeg)



# 参考
- [【初心者向け解説】 VRoid Studio製アバターをclusterで使えるようにする方法](https://note.com/omoi0kane/n/n1eb906e3b2ae)
- https://vrcat.club/threads/material-combiner-blender-addon-2-1-1-5.2255/page-3#post-9712
- [【Blender初心者向け】Cats Blender PluginをつかってVRoidモデルを軽量化する](https://qiita.com/nyu___nS/items/abfd8c8edcb866b4c2d9)