バーチャルキャストでアイリスちゃんを使ってみる

# バーチャルキャストでアイリスちゃんを使ってみる

[バーチャルキャスト](https://virtualcast.jp/)なるものを作りました
たぶん面白い生放送が出来る配信ツールです
（バーチャルユーチューバーになってコラボ放送して面白い生放送やろうぜ！　って感じです）
詳しくは[こちら](http://blog.nicovideo.jp/niconews/70674.html)をご覧ください

このツール、モデルデータのインポータに[VRMフォーマット](https://dwango.github.io/vrm)を使っており動的にモデルデータを読み込むことが可能な仕様となっており、[ニコニ立体](http://3d.nicovideo.jp/)と連携してモデルデータを呼び出すことが可能です。

詳しいやり方は[こちらのブログ](https://www.infiniteloop.co.jp/blog/2018/04/virtualcast-matsui/)に書いてありますが、実際にモデルの作成から呼び出しまで行っていきたいと思います。

※Unity 2017.4.1f1 で説明しています
※UniVRMのバージョンによって微妙に説明が異なる場合もありますが多めに見てください。
※個人的に書いていますので会社・団体とは一切関係ありません。

## 0.VRM作成の流れ

FBXからVRMの変換は以下の流れになります

UnityにFBXをインポート
　　↓
正規化のため、1回目のVRMデータ作成
　　↓
作成したVRMデータを使って以下の設定を行います
　　・マテリアルの設定
　　・表情の設定
　　・揺れものの設定
　　・メタデータ設定
　　↓
設定後、設定したデータを加味した2度目のVRMファイルを作成します
　　↓
作成したVRMファイルをインポート

※ざっくり説明なので
https://dwango.github.io/vrm/univrm/univrm_workflow/
こちらをちゃんと読んでください

## 1.UniVRMをインポート
何はともあれ、VRM作成関連のパッケージをインポートします

以下のURLでUniVRMをダウンロードします
https://github.com/dwango/UniVRM/releases

ダウンロードしたパッケージ（UniVRM-0.xx.unitypackage）をUnityプロジェクトにインポートします

![image.png](https://qiita-image-store.s3.amazonaws.com/0/79067/fc42421d-7f5e-bad5-3a60-d08188dbc923.png)

## 2.モデルのインポート

今回は[Imagine Girls](http://imaginegirls.com/)のアイリスちゃんで配信してみたいと思いますので、[Imagine Girls公式ホームページ](http://imaginegirls.com/) からアイリスちゃんをダウンロードします
（今回は Unityパッケージ版のアイリスちゃんをダウンロードです）

![image.png](https://qiita-image-store.s3.amazonaws.com/0/79067/be2ae5ce-f8a2-f12f-54c3-de1dee1a2ba2.png)

ダウンロードしたモデルをインポートします
インポート後アイリスちゃんモデルのRigは【None】になっていますので【Humanoid】に変更します
![image.png](https://qiita-image-store.s3.amazonaws.com/0/79067/9b86af21-4f6b-08e1-f70f-afe68353db46.png)

## 3.VRMを使ってモデルの正規化

アイリスちゃんのモデルをSceneに置きます。
その際、デフォルトのアイリスちゃんはかなり小さいのでスケールを変更しておきます
（ｘｙｚ＝８ぐらいがちょうどよい？）
![image.png](https://qiita-image-store.s3.amazonaws.com/0/79067/bd14dc5e-52f8-df9f-7ffe-b0006c149c55.png)

次ににVRMを使ってモデルの正規化を行います
モデルを選択した状態でメニューの
【VRM】→【Export Humanoid】を選択します

![image.png](https://qiita-image-store.s3.amazonaws.com/0/79067/f573e491-afdb-eb8d-88ca-ed8deebd9fd0.png)

ExportオプションのWindowが開きますのでそのままで【Export】ボタンを押します

![image.png](https://qiita-image-store.s3.amazonaws.com/0/79067/968b40e1-b987-7ee2-8a56-d8b9f4bfbed8.png)

どこのフォルダーにExportするか指定するのでとりあえずAssets直下にExportします。

Exportが終了すると指定したフォルダー（今回はAssets直下）にMaterials、Testures、オブジェクトが生成されます
![image.png](https://qiita-image-store.s3.amazonaws.com/0/79067/40f3ce3f-6e43-5a39-2298-553261f913a7.png)

生成されたオブジェクトをSceneに置いて細かい編集を行います。

## 4.マテリアルの設定

Materialsフォルダーを開いて、めんどくさいので全部 VRM/MToon シェーダに変更します
![image.png](https://qiita-image-store.s3.amazonaws.com/0/79067/38d5c575-6a5a-2f12-826c-6fc404428720.png)

個々のマテリアル、すべてShadeがピンクかかってるのでめんどくいさいので白にします
![image.png](https://qiita-image-store.s3.amazonaws.com/0/79067/7a6d1df2-045e-81bb-38fe-68b155af3ac3.png)

半透明が必要なとこ（目など）透明にします
マテリアルの名前的に tex_eyes、tex_eye2bが半透明必要な感じなのでその二つのシェーダをVRM/UnlitTransparentに変更します
![image.png](https://qiita-image-store.s3.amazonaws.com/0/79067/8a94b240-bdbf-d7c0-31ff-e7a1df2ff9de.png)

## 5.表情の設定
Hierachyのオブジェクトのrootに色々なコンポーネントが入っていると思いますが、その中で【VRM Blend Shape Proxy】で表情の設定を行います
![image.png](https://qiita-image-store.s3.amazonaws.com/0/79067/476df1e6-5088-65dc-6cca-a25eef42317b.png)

BlendShapeをダブルクリックして設定画面を出します
![image.png](https://qiita-image-store.s3.amazonaws.com/0/79067/e3ba75ea-6f02-ba21-af16-667b412bd332.png)

それぞれ、あいうえお　まばたき　喜怒哀楽などBlendShape値を設定してApplyボタンを押して1個づつ設定を行います

## 6.揺れものの設定

揺れものはsecondaryのオブジェクト内にすべて設定します
使用するコンポーネントは【VRM Spring Bone】です
使用感はSpringBoneと似た感じです

※スカートのサンプル・・・RootBoneに揺れもののRootBoneを入れていきます
![image.png](https://qiita-image-store.s3.amazonaws.com/0/79067/353bd2e4-7596-f05a-2337-4b61c5bccd59.png)

接触判定を行う対象に、【Spring Bone Collider　Group】を入れます
![image.png](https://qiita-image-store.s3.amazonaws.com/0/79067/5b371cd5-6ee9-03ab-4a0c-2ea0cf6ce92e.png)

Spring BoneのCollider Groupsに接触判定を行うColliderを入れます
![image.png](https://qiita-image-store.s3.amazonaws.com/0/79067/7278e60e-2534-f6c7-400e-d7c71c4d60ce.png)

## 7.モデルの情報を設定
【VRM Meta】にモデルの情報（メタ情報）を入れます
テクスチャイメージは2048x2048のサイズイメージが必要になります
![image.png](https://qiita-image-store.s3.amazonaws.com/0/79067/ed0b34e6-590d-9d23-5de1-fac771d88940.png)

また、ライセンス情報も正しく入力します。
今回は配布は行わず、自分のみで遊ぶため
アバターに人格を与えることの許諾範囲(A person who can perform with this avatar)
　→　アバターを操作することはアバター作者にのみ許される(Only Author)
こちらに設定しました。

## 8.最終系のVRMとして出力
すべての設定が終わったら、最終系のVRMとしてExportを行います
先ほどと同じように
モデルを選択した状態でメニューの
【VRM】→【Export Humanoid】を選択します
![image.png](https://qiita-image-store.s3.amazonaws.com/0/79067/5830916a-1784-f72a-0435-5345564b51c6.png)

出力先はUnityProjectである必要はありません。　
出力されたVRMファイルをニコニ立体にアップロードすることで作成したモデルを使用することができます。

## 8.作成したVRMファイルをニコニ立体にアップロード

作成したVRMファイルをニコニ立体にアップロードします。
今回は二次利用作品なので二次利用作品でファイルを選択して投稿します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/79067/c33566d7-4411-9491-d61f-d905151465a8.png)

タイトル・説明・タグなどを設定して外部アプリ許諾で【バーチャルキャスト】にチェックを入れます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/79067/4da43759-3a0a-c2b2-72c8-063c1b8f2087.png)

その後、公開/非公開でもどちらでもよいので保存を行うと tdから始まるニコニ立体IDができます・（URLの一番最後）

こちらのニコニ立体IDをバーチャルキャストの設定ファイルに入れます。

## 9.バーチャルキャストを設定する

バーチャルキャストのexeが置いてある位置に【config.json】を作成して、モデルの取り込み設定を入れます

![image.png](https://qiita-image-store.s3.amazonaws.com/0/79067/2dd52632-8bef-6eb6-11f0-f9bf394c03f1.png)

具体的には以下のようなconfig.jsonを作成します

```json:config.json
{
  "niconico": {
    "character_models": [
        (tdからはじまるモデル番号)
    ]
  }
}
```

※tdからはじまるモデル番号は*tdを抜いた数字のみ*を記載します
【例】

```json:config.json
{
  "niconico": {
    "character_models": [
        12345,
        67890
    ]
  }
}
```
config.jsonの書式を間違えると読み込みが行われませんのでカンマやカッコ等確認してください。


これで起動するとモデルチェンジの中にアイリスちゃんが追加されます
もちろんその状態で凸もOKです。　他人の放送に乱入しましょう！

![image.png](https://qiita-image-store.s3.amazonaws.com/0/79067/b4a1f9ae-3ccb-8575-9c50-3a0c380d082b.png)

---
最後に素敵なモデルを配布しているImagineGirlsさんに感謝です
もしこの記事に問題がありましたらご指摘ください
[![image.png](https://qiita-image-store.s3.amazonaws.com/0/79067/f3638da9-87a1-1613-d603-6279d90b560a.png)]
(http://imaginegirls.com/imaginegirls_user_license_jp/)