レッサーモクリをVRMアバターにする

やあ (　　´・ω・`　　)
ようこそ、[モクリの世界](https://mokuri.world/)へ。
この記事は初心者向けだから安心して欲しい。

今回は[レッサーモクリ](https://www.store.vket.com/ec/items/2157/detail/)を[Cluster](https://cluster.mu/)で使えるようにしてみるよ。
でも特殊なことはしないから、他のプラットフォームにも連れていけるよ。

モクリを見たとき、君は、きっと言葉では言い表せない
「ときめき」みたいなものを感じたと思う。
聞き慣れない言葉がでてきても、そういう気持ちを忘れないで欲しい。
そう思って、この記事を立てたんだ。

じゃあ、やっていこうか。

## 必要なもの
* パソコン
* Unity Hub 最新版
* Unity 2019.4 LTS
* UniVRM v0.61.1
* レッサーモクリ本体

## 準備
1. [MOKURI PROJECT](https://mokuri.world/)からレッサーモクリをダウンロード
2. [Unity Hub](https://unity3d.com/jp/get-unity/download)をダウンロード＆インストール
3. Unity 2019.4 LTSをUnity Hubでインストール
4. [UniVRM v0.61.1](https://github.com/vrm-c/UniVRM/releases/tag/v0.61.1)をダウンロード

## 作業内容
Clusterで使えるアバターはVRMという形式です。
モクリプロジェクトで配布されているレッサーモクリはVRM形式になっていません。
なのでまずはVRM形式に変換し、それから揺れ物や表情を設定していきます。
1. 環境構築
2. VRMに変換
3. 視点を調整
4. 揺れ物を設定（髪や尻尾など）
5. 表情を設定
6. 完成

## 環境構築

Unity Hubを開き、まずはUnityをインストールします。
「Installs」をクリックします。
![UnityHub_10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393774/fabaea5a-e870-852a-34bc-9276b7006a22.png)

「Install Editor」をクリックします。
![UnityHub_20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393774/3ca4fb46-28f5-0c17-1432-ab67730bf862.png)

バージョン2019.4の最新版をインストールします。
![UnityHub_30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393774/ed963f1e-8fe7-e7af-71d1-f72c8cade706.png)

Build Supportを選択します。
（今回だけで言えば必要ないかもですが、一応入れておきます）
![UnityHub_32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393774/4e24a079-3bbd-a817-e6f4-1bd48691fa54.png)

### Windowsの場合
* Android Build Support
* iOS Build Support
* Mac Build Support (Mono)

### macOSの場合
* Android Build Support
* iOS Build Support
* Windows Build Support (Mono)

---

インストールされたらプロジェクトを作成します。
プロジェクト名をつけて「Create Project」します。
![UnityHub_40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393774/f40bfb68-35c3-1443-b0f0-7a02ebcea617.png)

Unityが開いたらUniVRMをプロジェクトにインポートします。
先ほどダウンロードした「UniVRM-0.61.1_7c03.unitypackage」をダブルクリックすると以下のようなインポートウィンドウが表示されます。
![Unity_10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393774/9cd84586-1e48-48e6-aea5-6d7dd9bd19b7.png)

## VRMに変換

レッサーモクリもプロジェクトにインポートします。
先ほどダウンロードしたLesser_Mokuriの中の「Lesser_Mokuri.unitypackage」をダブルクリックすると以下のようになります。
![Unity_30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393774/b538a921-8560-b0c9-05fc-c6f6e246301e.png)

レッサーモクリをHierarchyにドラッグ＆ドロップします。
![Unity_50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393774/bb6d774b-ae59-4bc7-3017-a74affe2ea23.png)

標準ではＡポーズになっているので、Ｔポーズにします。
「Freeze T-Pose」をクリックします。
![Unity_60.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393774/9bd6aac3-863f-1a8d-7ff1-8b5edc6d899e.png)

一旦VRMとしてエクスポートします。
「Export Humanoid」をクリックします。
![Unity_80.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393774/6f969dff-1d8c-6109-6cdd-d679c49811cc.png)

VRMの情報を入力する欄がでてきます。
上から
* アバターの名前
* アバターのバージョン
* 作者の名前

を入力します。
今回は自分専用として使うので、MyMokuriという名前にします。
![Unity_90.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393774/2c589e1f-133d-3e4d-e55b-1a7e189d6fdb.png)

これで最低限、アバターとして使用できるVRMが書き出せました。
ただ、このままでは髪や尻尾は揺れず表情も無いので、それらをこれからつけていきます。

まずは今エクスポートしたVRMを読み込みます。
現在表示しているアバターはもう使わないので無効化しておきます。
![Unity_100.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393774/bf2e00b3-da61-67ae-f712-02afe99e5b33.png)

VRMを読み込むための新しいフォルダを作成します。
![Unity_120.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393774/77d11090-6ac7-a1ce-d7f8-5ee4d73211a4.png)

フォルダの名前はなんでもOKですが、ここではVRMファイルの名前にします。
![Unity_130.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393774/f41f2482-2f79-8228-67fa-dda771c18b62.png)

新しく作った空っぽのフォルダに、VRMファイルをドラッグ＆ドロップします。
![Unity_140.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393774/5fc628cb-35ad-37f1-f025-c03dfacec78a.png)

読み込まれたVRMをHierarchyにドラッグ＆ドロップします。
![Unity_150.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393774/caaaac5d-a38a-f644-177a-1733d1951f75.png)

## 視点を調整

VRMを選択すると画面右側に設定一覧が表示されます。
まずは視点の位置を調整しますので、少し下にスクロールします。
![Unity_160.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393774/d968d833-263c-7f5e-c495-1638a4cc1804.png)

視点は最初、以下のように首のあたりにあります。
これをアバターの目線の位置に移動させます。
![Unity_162.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393774/032f9f7c-23c9-d7bb-1a28-1a57c3ec1a04.png)

アバターの一人称視点「VRM First Person」の設定を変更します。
今回はパッと見でいい感じの位置にします。値は以下です。
* X：0
* Y：0.07
* Z：0.08
![Unity_170.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393774/7e5ea80e-9cce-6ce5-a13b-ec8b057f550b.png)

## 表情を設定

次に表情を設定します。最初はすべて真顔になっています。
アバターの設定の中にある「BlendShape」をクリックします。
![Unity_190.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393774/8c368889-31c1-1ff5-fff5-e3b9dfdfa23b.png)

BlendShape系のファイル一覧が表示されるので、大元の「BlendShape」をクリックします。
![Unity_200.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393774/4f527aae-348d-f316-abd3-a768aaebf2a2.png)

BlendShapeの設定で各表情の値をお好みで変更できます。
「A」「I」「U」「E」「O」は、通話時の音声の母音によって動きます。
![Unity_270.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393774/c73744e8-50bb-25e5-8690-cd2df3ca0c00.png)

## 揺れ物を設定（髪や尻尾など）

「secondary」を選択します。
そうすると画面右側に揺れ物の設定が表示されます。
![Unity_280.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393774/02d0dcf2-0b26-b832-af84-c71601e3d97c.png)

RootBonesの数値を「13」にします。
（レッサーモクリの後ろ髪はだいたい13房だからです）
画面左側のアバターの中身を、HairBack_A00が見えるまで開きます。
![Unity_290.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393774/d6481c8b-3025-db54-d099-b826ef41d5bf.png)

RootBonesのElement0〜12に、HairBack_A〜Nの00をドラッグ＆ドロップします。
（J01はたぶん不要です）
数値の設定は揺れ方や重力の加減を変えられます。
詳しくは[【解説】VRアバター(VRM)の揺れ物の設定方法](https://youtu.be/5XButp8XmSU)を参照ください。
![Unity_300.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393774/40627650-7eac-722c-7eff-d3040c9999dd.png)
次に、尻尾用のコンポーネントを追加するので、「Add Component」をクリックします。

コンポーネント検索の入力欄に「vrm sp」と入力すると出てくる「VRM Spring Bone」をクリックします。
![Unity_310.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393774/d41f2cbc-f174-5a22-0184-ea19c5f87868.png)

尻尾は一本なので、RootBonesのSizeに「1」と入れます。
Element0にはTail00をドラッグ＆ドロップします。
（付け根を設定すれば先端まで揺れます）
![Unity_320.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393774/7ff44a0a-62a0-c5ca-cf09-d67e37b863e5.png)

お耳やその他も揺らしたい場合は尻尾と同じようにAdd Componentしてください。

## 完成

これで設定は完了です！
最後に完成形のVRMをエクスポートします。
アバターを選択してUniVRMの「Export humanoid」をクリックします。
![Unity_330.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393774/7bd49291-5ceb-59e4-e878-da9bd8896604.png)

完成形なので、使わない要素は消して軽量化します。
Export Settingsの中の「Reduce BlendShape」にチェックを入れます。
（こうすると使っていない表情を出力から除外できます）
ExportをクリックしてVRMファイルが保存できたら完了です。
![Unity_340.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393774/1cf859a4-4290-7463-35d8-c3b3912b6a9f.png)

おつかれさまでした！
では完成したVRMを[Cluster](https://cluster.mu/)にアップロードして、アバターとして使ってみます。

![Cluster_10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393774/f8ea4cdf-8347-b361-8632-4310b2cc28b7.png)
![Cluster_20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393774/30d32b56-c3da-5e9a-8188-2495c27b8de3.png)

良いモクリライフを！
![Cluster_30.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393774/58c5f3d1-73cf-c981-c21e-cba247d61d46.jpeg)