clusterでボクセルアバターをアップロードしたいとき【随時解説動画を追加してます】

<img width="581" alt="C01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/8e488342-ebeb-b306-f363-a75e7a5f6c1f.png">

公式からのご紹介、ありがとうございました。

その後、さらにわかりやすいよう、記事を修正していきました。

---

# 全身の3Dスキャンデータをアバターにする方法はこちらから。

https://qiita.com/sanpeita/items/ec63ba7d5cab6c66ea3a

---

# 前説(さいしょに記事を書いた当時のお話)
clusterでアバターをアップロードするのは、とにかく手間がかかると聞いていました。
実際に調べながらやってみましたが、「アップロードを目的」として、自分としてはかんたんなやり方をメモとして残しますね。
調べながらのトライアンドエラーで、オフ日に10時くらいから始めて、2時間はかかっています。
一度アップロードまでやりきれば、そうとう時間短縮できます。

※Blenderをはさんだのは、ボクセルのサイズ感だと、アバターのサイズが米粒になるからです。
※mixamoのリグ設定が一番時間かかった…　ボクセルでデザインする際、mixamo側の「頭」の認識がブラックボックスすぎて困る

# 1.MagicaVoxel編
## モデルを作成します。

- MagicaVoxelのインストール記事はこちらから(動画版もあります)。

https://qiita.com/sanpeita/items/197ab8bf62bb8e220691

- キャンバスは 10x10x10 で作成しています。

<img width="1036" alt="a01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/34d98067-1077-60d7-84b6-525603c57fb6.png">

## Toolボックス内の[2x]を選択して、全体を2倍の大きさにします。

- これで、後続のmixamoでリグが入りやすくなります。

<img width="1041" alt="a02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/27ba4a2c-ebd7-4443-ec1b-455e9125aaec.png">

- 下図のように、キャンバス内のオブジェクトが2倍のボクセルになります。(合わせてキャンバスも拡大されます)

<img width="383" alt="a03.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/e60cb8cd-16ff-9c2f-ab58-aaf33a7218b7.png">

## モデル作成後は、obj形式でエクスポートします。

- 画面右下のExportを選択して、[obj]を選択します。

<img width="167" alt="a04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/37674d5c-1ef3-f597-8aa0-6720c63233aa.png">

- 任意の名前をつけて、任意の場所へ保存します。
- あとから検索しやすいよう、専用のフォルダを作るか、マジカボクセル内でexportフォルダがあるので、そのまま使うなどしましょう。

<img width="352" alt="a05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/9fdab583-64c0-d730-e78c-f256e62b1583.png">

# 2.Blender編
※Blenderは2.82を使用しています。

- Blender編の解説動画はこちらから御覧ください。

https://youtu.be/wSBDLQ5nRh8

## Blenderの初期準備

- Blenderを起動して、[A]キーを押して全選択状態になったら、[X]キーを押して、削除します。

<img width="1433" alt="b01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/329c98a4-a050-4ded-9ad4-35fa413d6b49.png">

<img width="574" alt="b02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/225a047d-5b21-44b1-55f9-5a85f3a7c852.png">

<img width="1430" alt="b03.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/5ffc14c2-2b3a-ce67-189c-19b632b4f4c1.png">

## インポート

- MagicaVoxelからエクスポートしたものをインポートします。
- この記事では、前項で、obj形式でエクスポートしたので、obj形式でインポートしています。
- [ファイル]-[インポート]-[Wavefront(.obj)]を選択します。

<img width="603" alt="b04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/16d49a49-7f2c-073c-e22e-d52e63d77125.png">

- 下図のように、インポートされました。

<img width="296" alt="b05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/d1450de6-f62d-509b-7535-63653eaf4cd7.png">

## サイズ変更

- 100倍の大きさに拡大します。
- Blenderの画面右側にある、オレンジの四角を選択して、[トランスフォーム]内にある、[拡大縮小]でx,y,zともに"100"を入力します。

<img width="262" alt="b06.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/6a1aa968-9937-9063-8474-e3b59b47e9ba.png">

## エクスポート

- 拡大されたオブジェクトをエクスポートします。
- [ファイル]-[エクスポート]-[Wavefront(.obj)]を選択します。
- 任意の名前、そして、任意の保存場所を指定しましょう。

<img width="692" alt="b07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/a54e6a81-547a-a8f6-afe5-85d3a2ef0bda.png">

# 3.mixamo編

mixamoの解説動画は以下から御覧ください。

https://youtu.be/4O-aYG3g8O4

https://youtu.be/srx7ZjthQwk

## mixamoへアクセス

- mixamoで検索して、サイトにアクセスします。

<img width="630" alt="c01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/161e0be4-e6ab-577e-e7d6-b9d2bc4b100f.png">

## ログインまたはサインアップ

- アカウントを持っている人はLogin、まだアカウントを持っていない人はSignupを選択します。

<img width="1398" alt="c02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/b9c7615d-97ec-8be8-5cf5-1956f0e870dd.png">

## アップロード

- 最初の画面で、[UPLOAD CHARACTER]を選択します。

<img width="1425" alt="c03.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/a8d329d0-c84e-80de-9536-f7d5d763c5ab.png">

- Blenderでエクスポートしたobj形式のファイルを選択、あるいはドラッグアンドドロップします。

<img width="934" alt="c04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/4811e66d-21ef-05e2-a0ff-fa643cf56eb2.png">

- アップロードが成功すると、下図のような画面になります。[NEXT]を選択します。

<img width="931" alt="c05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/90706751-8b8d-cb9f-fca2-edcda6e34741.png">

## リグの設定

- mixamoは優秀なので、首・手首・肘・腰・膝を指定すれば、自動的にグリグリ動くようにしてくれます。(一般的に「リギング」と呼ばれています)
- ただし、平面上で判断されるので、頭が盛っているキャラクターや、FF7のクラウドのように、背中になにかを背負っているキャラクターの場合は、このオートリグは正常に終了しません。

<img width="931" alt="c06.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/eb1c9bb1-cfc9-996d-c0d2-6c97d61c56f9.png">

- このように設定します。[Skeleton LOD]は[No Fingers]を選択します。(NoFingersでなくても良い)

<img width="930" alt="c07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/3ef634be-469f-36f7-1ef4-eda12e44446f.png">

- だいたい2分くらい処理が行われます。コーヒーブレイク。

<img width="933" alt="C08.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/f0c9b054-d95b-a80c-3508-80bd1ff3126e.png">

- 成功すると、キャラクターがぶらぶらしている画面になります。[NEXT]を選択します。
- ここでエラーになる、あるいは、腕などがありえない動きをしている場合は、マジカボクセルで修正したり、そもそもパソコンの負荷が高くなりすぎてネットワークに影響が出ている可能性もあるので、再起動などしましょう。

<img width="933" alt="c09.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/1979a23a-369e-bd5d-f210-dceaf4266031.png">

## ダウンロード

- 通常、下図のような画面になったら、キャラクターに割り当てるモーションを選択しますが、今回は、このまま[DOWNLOAD]を選択します。

<img width="1415" alt="c10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/b2a0c8eb-4ba5-494b-4b80-ffe818f57d49.png">

- 下図のように設定したら、[DOWNLOAD]を選択します。
- fbx形式のファイルなので、任意の場所と、任意の名前で保存しましょう。

<img width="727" alt="c11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/2f9d7df8-8a1f-cb9d-2855-2e3c00a7bff4.png">

# 4.unity準備編

## UniVRMのパッケージをダウンロードします。

- 下記リンクへアクセスします。

https://github.com/vrm-c/UniVRM/releases

- 下図のようなページが開かれます。

![20220504a02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/51c49dc4-b2a6-139a-9239-72953a2d6f83.png)

- 下図のように、unityパッケージを選択して、ダウンロードします。

![20220504a03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/0b95b459-bf1c-15e3-dda0-2f68d45eeaaf.png)

## unityを起動して、インポートパッケージをします。

- 下図のように、unityの[Assets]-[Impor Package]-[Custom Package...]を選択します。

![20220504a04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/4704f357-f5d2-3d58-a3c5-db5ddec71196.png)

- 先ほどダウンロードした、Unityパッケージファイルを選択します。ファイル名などは、下図を参考にしましょう。

![20220504a05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/3d981ddb-2deb-1a85-a6aa-282d121eebb4.png)

- 下図のように、すべて選択されていることが確認できたら、[Import]を選択します。

![20220504a06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/d3889114-6a17-7d3f-ca0a-a4b2947717f5.png)

- 下図のように、[VRM]メニューなどが追加されます。

![20220504a07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/dffc3049-0c44-85c2-d361-c7be1b044302.png)

# 5.unity編

## MagicaVoxelでエクスポートしたpng画像と、mixamoからダウンロードしたfbxファイルを格納します。

<img width="456" alt="e01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/003cb6e4-aa6a-442c-4471-28501cca56d1.png">

## fbxファイルでリグの設定とボーンの確認をします。

- fbxファイルを選択して、インスペクターウィンドウで、[Rig]内の[Animation Type]を[Humanoid]に変更します。
- その後、右下にある[Apply]を選択します。
- もしここでエラーが出ているようであれば、mixamoでリグが失敗している可能性が高いので確認しましょう。

<img width="296" alt="e02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/9f764e0c-dcd6-552c-4769-0911465ddff1.png">

- プロジェクトウィンドウ内にあるfbxファイルを展開します。

<img width="548" alt="e03.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/0138f5d5-e7b3-1969-4d60-7676abf92617.png">

- 素体みたいなアイコンを選択します。

<img width="548" alt="e03のコピー.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/2403e089-7f89-679e-59cc-dc2957b56f3c.png">

- インスペクターウィンドウで、オールグリーンを確認します。

<img width="287" alt="e04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/abcc0323-3140-8d80-8ec7-c8ea52d2eb85.png">

- ちょっとスクロールして、右下にある[Done]を選択します。

<img width="284" alt="e05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/f51c30aa-2aae-0ba8-e5b0-59ea176d2f34.png">

## マジカボクセルの画像ファイルを、fbxファイルに適用します。

- プロジェクトウィンドウ内で、空のマテリアルを作成して、マジカボクセルから持ってきた画像ファイルを適用します。

<img width="159" alt="e06.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/0c977312-ed2e-c133-7887-f593784b30d1.png">

- fbxファイルをsceneに出し、マテリアルを適用します。
- ポジションは0,0,0にします。

<img width="774" alt="e07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/2db397b8-bba1-2063-e41f-c013088e0268.png">

## VRMファイルを生成します。

- unityの[VRM]-[UniVRM-0.55.0]-[Export humanoid]を選択します。

<img width="418" alt="e08.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/72ce41ca-24dc-bb7e-a7ae-215c61a29d71.png">

- いろいろと情報を設定しますが、clusterのアバターであれば、[Author]に製作者の名前を記入するだけでよいです。(素材として提供したり、販売するのであれば、細かい情報の記入が必要となります)

<img width="329" alt="e09.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/9af4b3fb-bc51-ca10-f6f8-e36215ca3ed2.png">

- VRMファイルが保存されるので、適当な場所へ保存します。

# 6.cluster編

- アップロードしてサイズを確認して、米粒だったらがっかりしてBlenderからやりなおしましょう。

<img width="448" alt="x00.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/bd1e6fa0-9f77-d4a4-b987-5b67c0cd7289.png">

# 7.その他編

- 一連の流れで、様々なファイルが作られます。

objファイル
pngファイル
fbxファイル
vrmファイル

- いろいろ試す作業なので、それぞれ専用のフォルダを作るなどして、失敗したときや成功したときに、ログをたどれるようにしておくと、新たにアバターを作るときの作業がはかどります。