VRoid Studio v0.5.0とUnityでcluster用アバターを作ったときのまとめ

この記事は[UT-virtual Advent Calendar 2018](https://qiita.com/advent-calendar/2018/ut-virtual) 3日目の代打記事です．

# はじめに
2018年の暮れ，pixivによる[VRoidHub](https://hub.vroid.com/)のリリースや，バーチャルキャストによる[THE SEED ONLINE](https://www.moguravr.com/the-seed-online/)の発表により，3Dアバターのフォーマットである[**VRM**](https://dwango.github.io/vrm/)がますます注目されています．近い将来，誰しもが電脳空間に自分のアバターを持つ，サマーウォーズのOZのような世界が来るのでしょうか．SNSで自己を発信することが瞬く間に普通になった昨今を見るに，何か1つ爆発的に流行するサービスさえ生まれてしまえば，そのような全国民アバター所持時代も実現してしまう気がします．

さて，よく[cluster](https://cluster.mu/)上で会議をする筆者も，「まだデフォルトのロボットアバターで没個性してるの？」と後ろ指を指されている気がしたので，このタイミングでcluster上で使う自分のアバターを作ろうと思い立ちました．ただ残念なことに**筆者には絵心が全くない**ので，今回はあらかじめ用意されたアバターを編集することで簡単にVRMモデルを作れる，[**VRoid Studio**](https://studio.vroid.com/)を使うことにしました．

そのときの作業内容をこの記事では共有します．以下の順序でclusterに自作アバターをアップロードしました．

1. VRoid StudioでVRM規格のアバターを作成する．
2. Unityにアバターをインポートして，clusterのアップロード制限に引っかからないように修正を加える．
3. 修正したアバターをエクスポートして，clusterにアップロードする．

なおこの作業は，htomineさんの[バーチャル受肉で一足お先に身体から魂を解放しよう:VRoidで魂の器を作り、受肉したアバターでclusterの大地に立つ](http://htomine.hateblo.jp/entry/2018/12/17/033951)とKaikiさんの[Vroidのモデルをclusterで使用する(ごり押し)](http://colaiiiyahhou.hatenablog.com/entry/2018/10/28/175939)を参考にして行いました．これら2つの記事を読めば基本的には問題ないのですが，この記事では筆者が作業した際に気にした，これらの記事との差分にフォーカスしようと思います．

![cluster.png](https://qiita-image-store.s3.amazonaws.com/0/212951/c2035a17-744d-cd71-7cb4-c83e9d0f00a6.png)


# 環境
* macOS Mojave 10.14.2  
* VRoid Studio v0.5.0  
* Unity 2018.2.0f2  
    * UniVRM v0.45を使用

# VRoid側の設定
[VRoid Studio](https://studio.vroid.com/)を開き，`新規作成`をクリックします．編集画面で，顔や髪型，体型，衣装等を編集していきます．

<img width="1392" alt="edit.png" src="https://qiita-image-store.s3.amazonaws.com/0/212951/d85afa6a-6812-0155-8628-e039ddaf6337.png">

今回は衣装編集タブで`ワンピース`を選びました．デフォルトのワンピースではない衣装を使おうと思ったのですが，**筆者には絵心がない**ので，今回はdeltastarさんの[《VRoid》メイド風ワンピース](https://booth.pm/ja/items/1142154)を使わせていただきました．同様の理由で，目のテクスチャにShin Itagakiさんの[【VRoid】瞳テクスチャセットVol.2](https://booth.pm/ja/items/1142137)を使っています．[BOOTH](https://booth.pm/ja/search/vroid)でVRoid関連の素材を販売・配布している作家さんには頭が上がらないです…

テクスチャをダウンロードしたら，該当するパーツの`デフォルト画像`を右クリック→非表示にしたあと，レイヤー右の`「+」ボタン`をクリック，新しくできた`レイヤー`を右クリック→`インポート`で，ダウンロードしたテクスチャを選択します．

<img width="303" alt="texture.png" src="https://qiita-image-store.s3.amazonaws.com/0/212951/37b4ebc7-986d-2aff-088a-6e1399a09720.png">

アバター編集中の注意ですが，clusterの定める[アバターの制限](https://clustervr.gitbook.io/sdk/avatar_customization/avatar_limit)に引っかからないようにするため，後でUnity上でマテリアルの数を減らす作業をします．したがって，この段階で多くの色やテクスチャを使うようなことをしても後で泣く泣く消すことになります．出来るだけ同じような色・テクスチャを使いまわすことを意識して編集しましょう．また，ポリゴン数の制限に引っかからないように，髪の毛も10本程度に収まるように工夫しましょう．

出来上がったら，撮影・エクスポートタブの`エクスポート`からVRMモデルをエクスポートします．`髪の毛メッシュを結合する`にはチェックを入れておきましょう．

# Unity側の設定
ここまで済んだら，次はUnity上で[clusterのアバター制限](https://clustervr.gitbook.io/sdk/avatar_customization/avatar_limit)に適合するように，VRMモデルを修正していきます．

まずGitHubから[UniVRM](https://github.com/dwango/UniVRM)パッケージをダウンロードし，Unityにインポートします．

次に，作成したVRMモデルを`Project`にドラッグ&ドロップしてインポートします．こうしてできたPrefabを`Hierarchy`に移すとこんな感じになります．

<img width="1549" alt="スクリーンショット 2018-12-28 14.27.33.png" src="https://qiita-image-store.s3.amazonaws.com/0/212951/98d12512-f2e6-1d8c-74f1-728df7fc646e.png">

[clusterのアバター制限](https://clustervr.gitbook.io/sdk/avatar_customization/avatar_limit)によると，アバターに使えるマテリアルの数は最大で8です．これに引っかからないように，`Skinned Mesh Renderer`の`Materials`でアバターに使われているマテリアルを合計8つまで減らしていきます．筆者は次の画像のように`Face`・`Body`・`Hair001`のマテリアルを修正しました．

<img width="1549" alt="Face.png" src="https://qiita-image-store.s3.amazonaws.com/0/212951/02df47f3-ecaf-03e0-2e4f-7222ab68b902.png">

<img width="1549" alt="Body.png" src="https://qiita-image-store.s3.amazonaws.com/0/212951/6accaf7c-e3fc-f283-702b-bbe8e40a4619.png">

<img width="1549" alt="Hair001.png" src="https://qiita-image-store.s3.amazonaws.com/0/212951/ab797dcc-f931-39eb-c317-77803fe5d70b.png">


マテリアルの名前を見てもナンバリングがされているだけで，それが表す内容がわからずしんどいですが，サムネイルを表示した状態で作業すると多少はわかりやすくなります．

また，各マテリアルの`MatCap`を削除しておくと，clusterで見たときにアバターがテカらず，綺麗に見えます．

ここまで出来たら，`Hierarchy`に置いているPrefabのrootを選択した状態で，Unity画面の上の方の`UniVRM-0.45`→`Export humanoid`を選び，VRMモデルを出力します．

# cluster側の設定
[cluster](https://cluster.mu/)にログインし，右上のアカウントのアイコンから`アバター`画面に飛び，`VRMファイルをアップロード`から編集済みVRMモデルをアップロードします．

<img width="576" alt="upload.png" src="https://qiita-image-store.s3.amazonaws.com/0/212951/7cee70cf-203a-8405-5dfb-401966ec806e.png">

プレビューだと何故か顔が黒いが気にしない…

エラーが出なければアップロード成功です！エラーが出た場合はアバター制限に引っかかっている可能性が高いので，髪の毛を編集し直したり，マテリアル数を確認したりしましょう．

アップロード出来たら，clusterのルームで動作確認しましょう．VRモードで入ると，コントローラ位置に合わせて表情が変化します．

![otome.png](https://qiita-image-store.s3.amazonaws.com/0/212951/5e80cca9-4163-a063-f5de-f294bd4f0a8d.png)

（かわいい）

# まとめ
ここまで述べてきた作業ですが，長めに見積もっても数時間あれば全て終わらせることが可能だと思います．みんな2018年のうちに自分のVRMアバターを持っておいて，来たるVRMの爆発的普及に備えよう——