爆速でボクセルアバターを作ってVRChatで動かす方法

#まえがき
この記事は[VRChat Advent Calendar 2018](https://qiita.com/advent-calendar/2018/vrchat)の11日目の記事です。
昨日の記事は@nyakome306さんによる、[VRC PanoramaをGoogle Apps Scriptで活用する](https://qiita.com/nyakome306/items/bab82e741dd66053b374)でした。

はじめまして！ﾄﾘﾌﾟﾙｱｯﾄ([@himadesuganani](https://twitter.com/himadesuganani))です。
今回はアドベントカレンダーに空きが出来ていたので気まぐれで参加しました。
VRChatではよく見かけるボクセルアバターですが、作るのは面倒だと思う方も少なくないのではないかと思います。
本当は楽に作れるんだよと教えたかったので本記事を作成しました。


#前提条件

Unity5系、Windows10での実装を想定しています。
UnityはUnity2017でも動作は同じだと思いますが、今回は5系で動作確認をしました。
(Unity2017については公式アップデート後、追記予定)
記事閲覧者はUnity初心者を想定してます。

#作業の流れ
1. ボクセルを作る
2. リギング(リグを入れる作業)をする
3. Unityをインストールする
4. Unityにてアバターアップロード
5. VRChatで動作確認

という感じでやっていきます！
使うのは3つのツール・サービス！

- MagicaVoxel
- Mixamo
- Unity

Blenderは使いません！
ちなみに実測値では1時間32分でアップロードして確認までできました！
ボクセルアバターがうまく認識されずリギングできなかったため
時間がかかりましたが、素早い人なら30分でアップロードまで出来ると思います。

#1. ボクセルを作る
まずボクセルを作るためのツールをインストールします。
↓サイトにアクセス！
[MagicaVoxel @ ephtracy (Win/Mac) ](https://ephtracy.github.io/)

OSのbitに応じて該当zipをインストール！(bitの調べ方はOS bit 調べ方でググると調べ方はすぐわかります)
私はwindows10 64bitなのでwin64 0.99.2と書いてあるのをクリックしました。
クリックするとzipがダウンロードされます！
![image.png](https://qiita-image-store.s3.amazonaws.com/0/173560/1bf8b1c5-922b-f590-ca3c-e7e59038165b.png)

使い方はこちらを参考にするといいとおもいます。
[MagicaVoxelの使い方(2) ](https://github.dev7.jp/b/2015/10/17/magicavoxel2/)

カットアンドペーストは
左の項目の四角のマーク押すと範囲選択できますので、範囲選択後に右側の項目のSelect内にあるCutまたはCopyを押して、Pasteすればできるそうです。
範囲選択はShift押しながらすると、続けて行なえます。

今回はイチから作るのは大変なのでchr_rainという名前のアバターを改変して利用したいと思います。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/173560/5e4b00e8-3b70-3ddb-decd-8314015078d0.png)

こんな感じにしました。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/173560/e7042e90-b108-e7da-fb66-14faef0b2fd6.png)

モデルができたらツールの右下のエクスポートをクリックします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/173560/c3e50f7b-5626-3691-7d18-af41d7899cec.png)

objを選択して出力します(voxでも一旦保存しておくのがオススメ)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/173560/595e775d-5aa2-d4c1-6dea-12db2ea96268.png)

出力できたら完了です！


##注意点

###VRChatはTスタンス
モデルを作る上で注意したいのはVRChatのアニメーションは**Tスタンス**で作られているということです。
**スタンス**とは3Dキャラクターを作る上でのデフォルトのポーズです。
代表的なものとして**Aスタンス**と**Tスタンス**と言うものがあります。
腕をTの時に伸ばしたものを**Tスタンス**、Aの字のように腕を下げたものを**Aスタンス**と呼びます。

ちなみにVRChatは手のひらが下を向くようにして作らなければいけないようです。
しっかり合わせていないと、フルトラッキングの際に腕のメッシュがメッチャクチャになったりします。

なので、モデルの腕はTの字になるようにボクセルを作りましょう。

###VRChatのポリゴン制限は2万
VRChatにはポリゴンの制限があります。
アニメーション機能を利用して2万ポリゴン以上のモデルを持ち込めるとも聞いたこともありますが、2万です。
ボクセルでは案外あっさり2万ポリゴンを超えてしまうのでポリゴン数削減処理をする予定の無い方は、ポリゴン数が2万を超えないように気をつけましょう。

###オートリグを使うので人型で
人型以外のモデルを作ってしまうとオートリグがうまく動いてくれないため、変な髪形や人の形状から逸脱したキャラは作れません。
今回もツインテールが問題で人型として認識されませんでした。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/173560/025919d0-2d2e-260c-b5c2-990606e0d18a.png)


#2. リギング(リグを入れる作業)をする

モデルができたら**リギング**作業です。
**リギング**とは**リグ**を入れることをいいます。
**リグ**とは3Dキャラクターにアニメーションを付ける際の仕組みやコントローラーのことを言います。
ボーンを入れたり、ウェイト付けを普通ならしなくては、いけないのですが、今回は簡単に出来るMixamoをご紹介します。

**Mixamo**とは2015年6月にAdobeに買収された　3Dキャラクターに特化したツールらしいです。
利用にはAdobeへの登録が必要になりますが、現在は無料で利用可能です。

では実際にアクセスして作業を進めましょう。
[Mixamo](https://www.mixamo.com/)
BROWSE ANIMATIONSをクリックします!
![image.png](https://qiita-image-store.s3.amazonaws.com/0/173560/c5c04d2d-3acf-0be1-1e13-acfb658dd310.png)

UPLOAD CHARACTERを選択！
![image.png](https://qiita-image-store.s3.amazonaws.com/0/173560/0daff7b1-2533-fcb9-42a0-a51fff2e3698.png)

ここに先程出力したobjファイルをドラック！
![image.png](https://qiita-image-store.s3.amazonaws.com/0/173560/8f99b29f-4e28-c3f6-8510-c4e626eb3876.png)

nextで次へ

体の位置を右の画像に習って指定します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/173560/6bf00a85-c8ab-afee-27b7-0535812c8885.png)

するとリギングが始まります。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/173560/bcbdd58e-5195-fc07-2c9c-386cd989d288.png)

2分程待たされるので先に一旦次項のUnityインストールを終わらせておくのをおすすめします。

キャラが動き始めます。
うまくリギングできたならこのまま進みましょう。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/173560/529407d4-b5cd-aeb5-af6c-2d60fc32a1c6.png)
上の画像はウェイトがへんな所についてしまっています。
この後にツインテールがめちゃくちゃになっていたのでボクセル(vox)を再度読み込み編集しました。

できたら、他のアニメーションを読み込んでみて動きが悪く無さそうかチェックします！
![image.png](https://qiita-image-store.s3.amazonaws.com/0/173560/22e3b86a-d2e2-48fb-6508-3696803de414.png)

一通り動作確認ができたらPrayingの右のバツでアニメーションを削除します。
(アニメーションは必要ないため)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/173560/a1f59217-6a26-3208-e19f-d370eaa6aa74.png)


Downloadボタンでリギングされたキャラのダウンロードを行います。
FBX for UnityとT-poseを選択
![image.png](https://qiita-image-store.s3.amazonaws.com/0/173560/0ee1971f-7748-1e75-86ea-3e67626fa36a.png)

すると、キャラクターがダウンロードされます！


#3. Unityをインストールする
https://www.vrchat.net/home/download にアクセス！
VRChatのID・パスワードでログイン！

Download SDK、DownLoad Unityの順番でクリック！ 
![image.png](https://qiita-image-store.s3.amazonaws.com/0/173560/6f7e61df-62c1-ca2a-3a0d-307514ae53f2.png)

ダウンロード（Win）でUnityのインストール！
Unityの登録をしてない人は今登録しておきましょう！
![image.png](https://qiita-image-store.s3.amazonaws.com/0/173560/0209b7dc-55e4-f032-4f16-a401b2021224.png)

↓登録の仕方とか、最初に選ばされる選択肢とか、全くわからない人はこの講座がオススメです！
[ユニティちゃんが教える！初心者向けUnity講座](https://www.udemy.com/unity-chan-tutorial-01/?src=sac&kw=%E3%83%A6%E3%83%8B%E3%83%86%E3%82%A3%E3%81%A1%E3%82%83%E3%82%93%E3%81%8C%E6%95%99%E3%81%88%E3%82%8B)

今回はAndroidもiOSも使わないのでチェックが付いていたら外しておきましょう。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/173560/1ee6c573-16d1-d26a-7e2e-4515484fdc36.png)

適当な名前でプロジェクトを作ります。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/173560/db44576c-db99-a08e-c4c4-9df01432b61d.png)

許可します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/173560/28a6aa5f-ec7d-925e-8540-f8cfe7324478.png)

Assets>Import Package>Custom Packageで先程ダウンロードしたVRChatのSDKを選択、インポートしましょう。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/173560/0db3c991-3384-659d-81e6-a8cba7a4b6e7.png)

インポート。(私の環境は(1)とついているがコレは二度目のため、ついているだけです)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/173560/07164148-6dca-963d-ebdc-315616b23fdf.png)

インポートしたらVRChatSDKというメニューが追加されているはずなので、Settingsを選択
![image.png](https://qiita-image-store.s3.amazonaws.com/0/173560/c50bdd1e-cc7b-e53c-427a-edea6a884451.png)

VRChatのIDとパスワードを入力してログイン！
![image.png](https://qiita-image-store.s3.amazonaws.com/0/173560/0045cfae-a4f6-09e1-a57d-034452a08b9b.png)


インストールはコレで完了です。

#4. Unityにてアバターアップロード
アップロード用のシーンを作成します。

プロジェクトウィンドウ内で右クリック、Create>Scene
![image.png](https://qiita-image-store.s3.amazonaws.com/0/173560/c0ee9a4d-d90c-64c6-53dd-15be7312ddbd.png)

適当な名前をつけてそのシーンをダブルクリックして該当のシーンに移動！
![image.png](https://qiita-image-store.s3.amazonaws.com/0/173560/36c13f97-e89d-7c92-d735-ecd523ac2dda.png)

Assets>Import New Asset…を選択して先程ダウンロードしたFBXを選択。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/173560/d08702d2-194d-ec77-3b4b-0181c5fdb0bc.png)

インポートしたモデルを選択する（Inspectorが開く）
![image.png](https://qiita-image-store.s3.amazonaws.com/0/173560/ba2d882d-a590-420b-5ef4-fca64730a19d.png)

インスペクターのAnimationTypeはヒューマノイドを選択。
このままじゃ動かないのでConfigure…ボタンをクリック。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/173560/e1805078-af93-25b7-9950-4a3579fc989f.png)

↓ような感じで出てきます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/173560/4deede26-c1b9-b27c-a9d7-3f2843df6de8.png)


設定についてのPDFが配布されているのでコレを参考に値を入れ直していきます。
[mixamoでHumanoidボーンを入れよう](https://booth.pm/ja/items/876097)

(設定したらこんな感じになります)
設定ができたらApplyをクリック、Done。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/173560/f6579bbf-ddbd-1127-af45-b0de4d99a72c.png)

最初にOBJファイルを作った際に出力したフォルダにpngファイルが出力されているので、それを現在のプロジェクトのAssetsフォルダに取り込みましょう。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/173560/ba7b62d5-fa54-744c-ba9a-96622fcb3c8d.png)

Hierarchyにプロジェクトのモデルをドラックしてモデルを追加します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/173560/3b616c11-ad57-173e-90cc-dbf754feb9e4.png)

Hierarchyのモデルファイルを選択して、Projectのpngファイルをキャラクターにドラック。
するとMaterialに画像が設定されます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/173560/e5c4d6b6-c015-260f-be5d-fa52de21d25f.png)


キャラクターの一番上の階層(ココではtest)を選択し、インスペクターの値を変更していきます。
TransformのScaleの値を6，6，6に(キャラクターが小さすぎるため)
そしてAdd ComponentからVRC_Avatar Descriptorを選択して追加。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/173560/7476644e-d7e5-7527-74ba-d9219361285f.png)

こんな感じで値を設定。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/173560/7484ab57-b44e-c855-df45-d7e28e6a5da0.png)


目線の高さ(球体の位置)などは、こちらの記事を参考にしてみてください。
[VRChatに３Dモデル(自作アバター)をアップロードして使用する方法まとめ](https://vtuber-love.com/vrchat-avatar-upload/)

設定ができたら、VRChat SDK > Show Build Control Panelを選択。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/173560/0bcc3a66-8ea7-c76f-851e-10f9e05f4bbc.png)

このような画面が出てくるのでBuild ＆ Publish エラーが無ければこのまま行くはずです。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/173560/59036d07-b9b3-2825-b20e-bdf87125071c.png)

そうすると名前などの入力項目が出てくるので入力してUpload
![image.png](https://qiita-image-store.s3.amazonaws.com/0/173560/399d85ff-6f4c-0f95-caf0-51729e5df04c.png)


入力項目は私のをパクればだいたい大丈夫ですが、気になる方はこちらを参考にしたらいいと思います。
[全くの3DCG初心者が1日でVRChatアバターをBlenderで作ってログインする話-3-](http://vr-san-o.hatenablog.com/entry/2018/01/25/055756)

完了。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/173560/843fdcaf-7bb6-3172-cdc8-d9d9dede2981.png)


#5. VRChatで動作確認

VRChatを起動します。
アバターを選択
![image.png](https://qiita-image-store.s3.amazonaws.com/0/173560/9d86a318-05f9-ca4f-5e5b-9df30e612291.png)


アバターのパーソナルに追加されているはずです。
こちらの表示は、よくおかしくなるので実際にアバターを装着してみてちゃんと動くか試したほうが良いです。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/173560/7f392094-6fc3-3134-239c-18e2dfe53165.png)

動いた！
![image.png](https://qiita-image-store.s3.amazonaws.com/0/173560/64960ebd-c82b-c428-8d2c-81a3d5dcb7c5.png)

#まとめ
以上が爆速でボクセルアバターを作ってVRChatで動かす方法になります。
ボクセルをリギング出来るMixamoはとてもいいツールです。
VRChatにとどまらずゲーム制作などにも利用するのもいいのではないかと思います。
もっとボクセルが流行って色んな人が楽しんでくれたらなと思います。
以上です！

明日のVRChat Advent Calendarは@phi16_さんです。
おたのしみに