hubsにVRoidで作ったアバターを投入する

# アバターは可愛くないと！
そうアバターは美少女にしたい。
あるいはリアルアバターで仮想空間を駆け回りたい。
とか、結構夢が膨らむものだ。

でもHubsにはデフォルトでは目ん玉がキョロキョロ動くロボットばっかりで、
他にも人間も何パターンかあるがとにかくバリエーションが少なく寂しい。

そこで今回はVRoidで作った美少女をhubsに投入する手順をここに明記する

# 手順
1. VRoidで小さめのアバターを作ってvrmにエクスポート
2. Unityでvrmファイルをglbファイルに変換
3. hubsにglbファイルを読み込む

# ではレッツゴー
### VRoidで小さめアバターを作る
まず、持っていない人は[VRoid Studio](https://vroid.com/studio)をダウンロードして下さい。
zipファイルが落ちるので解凍すると中身以下の様な感じなので、VroidStudio.exeを叩きます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504562/c57cd422-e292-64cf-e59a-21332d0bb5fe.png)

このツールで簡単にVRMの人型アバターが作成出来ます。

最初の画面で以下の様にサンプルモデルが出てきます。
こだわりがなくてJKが嫌いではない僕はショートヘアのJKを選択します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504562/be9a9c50-ca5b-c3c0-3463-a45512b6c678.png)

下記画面を見て頂くと分かるように、とにかくいろんなパラメーターがあるので好きに改造できますが、
僕はデフォルトで十分可愛いと思うので基本的にはこのままいきます。

ただ、身長だけは低くする必要があります。
これは僕の好みの問題ではなく、デフォルトのままだとhubsに持っていったときに身長が高すぎてカメラに頭がでかでかと映ってしまい前が見えなくなるのです。
で、低くする方法ですが、まずボタン「体系編集」を押下し
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504562/d9d08a3a-305d-ba1f-a9ca-320156f50aff.png)

画面右側にあるスクロールバーを一番下迄引っ張ります。すると「身長を低く」という項目が見つかります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504562/e97b60a9-fa34-2c55-6353-4882b08f9ae1.png)

この項目を0.35迄上げてやります（ざっくりですがこれで結果的にはうまくいきます）
するとJKがみるみる小さくなります↓↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504562/78e49d32-b58f-7ae3-5b01-92a0f195f998.png)


これでアバターは用意出来たのでエクスポートしましょう。
画面右上の「撮影・エクスポート」をクリック↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504562/6a042100-2fd0-0585-5376-fdd5ab83d223.png)


エクスポート画面押下↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504562/b476eb6e-d529-a56b-2cfd-f727ffaab572.png)


ボタン「エクスポート」押下↓↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504562/ba176515-9faf-cddc-6db8-63cc0e77033c.png)

あとはタイトルやライセンスなど適当に入力してボタン「OK」を押下↓↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504562/bd3a5200-334b-14fc-0f5f-2b7b0901a331.png)

これで指定先にvrmが出力されます。

### Unityでvrmファイルをglbファイルに変換
まずUnityで3Dの新規プロジェクトを開きます。
次にUniVrmというパッケージをインストールします。
[GitHubのUniVrmページ](https://github.com/vrm-c/UniVRM/releases)からunitypackageを落として、
作成したUnityProjectからimportしてやりましょう
Asset > Import Package > Custom Package　でファイルダイヤログ開くので、それで上記でダウンロードしたvrmを指せばいけます。

このUniVRMのおかげで、UnityでVRMを扱えるようになりました。

それでは先ほど作成したvrmファイルをUnityのプロジェクトビューのAssets配下にドラッグ＆ドロップしましょう↓↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504562/058a190f-04d8-e38c-e5ea-0090e6523ba5.png)
するとVRMを扱える様に何やら処理してくれて少し待つと、先ほど作成したVRMが出現します。
今度はそれを掴んでヒエラルキービューにドラッグ＆ドロップしてあげましょう。

すると下記の様にJKが現れます↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504562/018c7c81-8ee2-528e-3697-b03e143a4909.png)

後はボタンそのVRMを選択した状態で、Unity画面上部のボタンVRMからエクスポートします。
VRM > UniGLTF 1.28 > Export

開いたファイルダイヤログからglb形式で保存します。
これでglbファイルが出来ました。


### hubsでglbファイルを読み込む
では作成したファイルをhubsで読み込みましょう。
弊社で作成した日本語版サイト [digi-rooms](https://digi-rooms.com)よりアバター選択画面へ遷移します。

ボタン「アバター検索」ボタンをクリックします↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504562/3cb4886c-38fd-5eb6-3add-7dacfa3a9780.png)

すると下記の様な画面が出てくるので「アバターを作成」を押下します↓↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504562/6325caed-cedd-d4f3-1aa3-5873abea97cd.png)

すると下記画面が出てくるので、ちょっと見づらいですが「Custom GLB」を押下します↓↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504562/56aec05e-1259-6273-378d-efa45618bcbc.png)

すると下記の様にファイルダイヤログが開くので、先ほど作成したglbファイルを選択してください↓↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504562/9a50c857-c803-9507-7b5e-6f7905b3debf.png)

これでglbファイルが読み込めてアバターが下記の様に表示されるので、ボタン「Save」を押下して下さい↓↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504562/92469cd1-5479-35c2-09b9-d3b911ffc8d0.png)

すると下記の様にアバター一覧画面に戻ります。
作成したアバターが確認出来ますね↓↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504562/697b1522-1b2f-c5b9-0436-641b7c398f3f.png)

あとはこのアバターを選択して部屋に入ってみましょう！
hubs内のカメラ（画面上部から選択可能）からセルフィーを撮ってみました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504562/a058841a-9744-fff8-42d6-44273398e86f.png)

いや～～、いい感じで手が横に広がってますね～～
ってこれは直したいですねw

見ての通り、現状手を横に広げたままで、移動するときもモーションがなくそのまま平行移動する感じです。
このままではホラーなのでデフォルトのTポーズを修正してIポーズにしましょう。

先ほどのUnityプロジェクトでヒエラルキーのアバターを編集して、Iポーズにしていきます↓
今回は下記の赤枠の項目を編集しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504562/5a354c14-e504-c95a-4729-bde22780b053.png)

各項目は下記の様に設定しています↓↓
J_Bip_L_shoulder: Rotation.zを0⇒10に変更
J_Bip_L_UpperArm: Rotation.zを0⇒50に変更
J_Bip_L_LowerArm: Rotation.zを0⇒10に変更
J_Bip_R_Shoulder: Rotation.zを0⇒-10に変更
J_Bip_R_UpperArm: Rotation.zを0⇒-50に変更
J_Bip_R_LowerArm: Rotation.zを0⇒-10に変更

するといい感じのIポーズになりました↓↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504562/a0effe29-3211-6427-f843-3443582e33fb.png)

これを先程やったのと同様にエクスポートしてhubsからインポートすると、いい感じになりました↓↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504562/7256d870-ca0b-5dac-1da9-a42c3c1d8910.png)
これでだいぶ可愛くて癒される。

でも移動するときにモーションが無いのは寂しい。
次回は歩くモーションをつけたいと思います。
では今回はこのあたりで、どどん。