![C01.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F191635%2F8e488342-ebeb-b306-f363-a75e7a5f6c1f.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=c1ee5e0f9759d40429263a79bd6c8f3d)
公式からのご紹介、ありがとうございました。
その後、さらにわかりやすいよう、記事を修正していきました。
全身の3Dスキャンデータをアバターにする方法はこちらから。
前説(さいしょに記事を書いた当時のお話)
clusterでアバターをアップロードするのは、とにかく手間がかかると聞いていました。
実際に調べながらやってみましたが、「アップロードを目的」として、自分としてはかんたんなやり方をメモとして残しますね。
調べながらのトライアンドエラーで、オフ日に10時くらいから始めて、2時間はかかっています。
一度アップロードまでやりきれば、そうとう時間短縮できます。
※Blenderをはさんだのは、ボクセルのサイズ感だと、アバターのサイズが米粒になるからです。
※mixamoのリグ設定が一番時間かかった… ボクセルでデザインする際、mixamo側の「頭」の認識がブラックボックスすぎて困る
1.MagicaVoxel編
モデルを作成します。
- MagicaVoxelのインストール記事はこちらから(動画版もあります)。
- キャンバスは 10x10x10 で作成しています。
![a01.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F191635%2F34d98067-1077-60d7-84b6-525603c57fb6.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=fc5ec9d1b27e3e86b3867131c82b0aaf)
Toolボックス内の[2x]を選択して、全体を2倍の大きさにします。
- これで、後続のmixamoでリグが入りやすくなります。
![a02.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F191635%2F27ba4a2c-ebd7-4443-ec1b-455e9125aaec.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=ade3327d756b884486b69a31ab478759)
- 下図のように、キャンバス内のオブジェクトが2倍のボクセルになります。(合わせてキャンバスも拡大されます)
![a03.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F191635%2Fe60cb8cd-16ff-9c2f-ab58-aaf33a7218b7.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=281a7f02835d6e8461a941355fcece9a)
モデル作成後は、obj形式でエクスポートします。
- 画面右下のExportを選択して、[obj]を選択します。
![a04.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F191635%2F37674d5c-1ef3-f597-8aa0-6720c63233aa.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=2c80f85443a068a63e60a9b6ee1e06ac)
- 任意の名前をつけて、任意の場所へ保存します。
- あとから検索しやすいよう、専用のフォルダを作るか、マジカボクセル内でexportフォルダがあるので、そのまま使うなどしましょう。
![a05.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F191635%2F9fdab583-64c0-d730-e78c-f256e62b1583.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=398ae07b43095d7cbdbb599ba3f39d57)
2.Blender編
※Blenderは2.82を使用しています。
- Blender編の解説動画はこちらから御覧ください。
Blenderの初期準備
- Blenderを起動して、[A]キーを押して全選択状態になったら、[X]キーを押して、削除します。
![b01.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F191635%2F329c98a4-a050-4ded-9ad4-35fa413d6b49.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=5fcb738f7a6efaef2d2d3729552081e1)
![b02.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F191635%2F225a047d-5b21-44b1-55f9-5a85f3a7c852.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=fa7c85444194988837d5d1cd0564b640)
![b03.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F191635%2F5ffc14c2-2b3a-ce67-189c-19b632b4f4c1.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=3955cf56a8a4a25a027a6613275f15b8)
インポート
- MagicaVoxelからエクスポートしたものをインポートします。
- この記事では、前項で、obj形式でエクスポートしたので、obj形式でインポートしています。
- [ファイル]-[インポート]-[Wavefront(.obj)]を選択します。
![b04.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F191635%2F16d49a49-7f2c-073c-e22e-d52e63d77125.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=761bde7b117c1723c14979e7a8ebd7ce)
- 下図のように、インポートされました。
![b05.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F191635%2Fd1450de6-f62d-509b-7535-63653eaf4cd7.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=5ff39bb1758120a4a7f737e0ff477b51)
サイズ変更
- 100倍の大きさに拡大します。
- Blenderの画面右側にある、オレンジの四角を選択して、[トランスフォーム]内にある、[拡大縮小]でx,y,zともに"100"を入力します。
![b06.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F191635%2F6a1aa968-9937-9063-8474-e3b59b47e9ba.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=9ccf79b9c012c14321454ff05dfe087e)
エクスポート
- 拡大されたオブジェクトをエクスポートします。
- [ファイル]-[エクスポート]-[Wavefront(.obj)]を選択します。
- 任意の名前、そして、任意の保存場所を指定しましょう。
![b07.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F191635%2Fa54e6a81-547a-a8f6-afe5-85d3a2ef0bda.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=a488c85d15a4e191e3fbba89c03d3a16)
3.mixamo編
mixamoの解説動画は以下から御覧ください。
mixamoへアクセス
- mixamoで検索して、サイトにアクセスします。
![c01.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F191635%2F161e0be4-e6ab-577e-e7d6-b9d2bc4b100f.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=48946798f48adeecda1e37ea73c16701)
ログインまたはサインアップ
- アカウントを持っている人はLogin、まだアカウントを持っていない人はSignupを選択します。
![c02.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F191635%2Fb9c7615d-97ec-8be8-5cf5-1956f0e870dd.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=44f4f35cecde32d400e726beacac1183)
アップロード
- 最初の画面で、[UPLOAD CHARACTER]を選択します。
![c03.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F191635%2Fa8d329d0-c84e-80de-9536-f7d5d763c5ab.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=f737e672e2c27336ab520aa76b8ca63a)
- Blenderでエクスポートしたobj形式のファイルを選択、あるいはドラッグアンドドロップします。
![c04.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F191635%2F4811e66d-21ef-05e2-a0ff-fa643cf56eb2.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=c1ad8194f47ec2235ee692c00315930d)
- アップロードが成功すると、下図のような画面になります。[NEXT]を選択します。
![c05.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F191635%2F90706751-8b8d-cb9f-fca2-edcda6e34741.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=a7cdb48dde1fedd3af363e742470fbc8)
リグの設定
- mixamoは優秀なので、首・手首・肘・腰・膝を指定すれば、自動的にグリグリ動くようにしてくれます。(一般的に「リギング」と呼ばれています)
- ただし、平面上で判断されるので、頭が盛っているキャラクターや、FF7のクラウドのように、背中になにかを背負っているキャラクターの場合は、このオートリグは正常に終了しません。
![c06.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F191635%2Feb1c9bb1-cfc9-996d-c0d2-6c97d61c56f9.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=98753771eaef5d5a45c85ba3c90d3857)
- このように設定します。[Skeleton LOD]は[No Fingers]を選択します。(NoFingersでなくても良い)
![c07.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F191635%2F3ef634be-469f-36f7-1ef4-eda12e44446f.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=41b4ed4160eee5e6e6ea1d50d4140cce)
- だいたい2分くらい処理が行われます。コーヒーブレイク。
![C08.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F191635%2Ff0c9b054-d95b-a80c-3508-80bd1ff3126e.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=f336cacf6e1abb1586a959346d6fb05e)
- 成功すると、キャラクターがぶらぶらしている画面になります。[NEXT]を選択します。
- ここでエラーになる、あるいは、腕などがありえない動きをしている場合は、マジカボクセルで修正したり、そもそもパソコンの負荷が高くなりすぎてネットワークに影響が出ている可能性もあるので、再起動などしましょう。
![c09.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F191635%2F1979a23a-369e-bd5d-f210-dceaf4266031.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=8672ddfa7093d36595f1686da89612ac)
ダウンロード
- 通常、下図のような画面になったら、キャラクターに割り当てるモーションを選択しますが、今回は、このまま[DOWNLOAD]を選択します。
![c10.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F191635%2Fb2a0c8eb-4ba5-494b-4b80-ffe818f57d49.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=01b6fe0837b8b93e63c81e1399d6b07d)
- 下図のように設定したら、[DOWNLOAD]を選択します。
- fbx形式のファイルなので、任意の場所と、任意の名前で保存しましょう。
![c11.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F191635%2F2f9d7df8-8a1f-cb9d-2855-2e3c00a7bff4.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=cc9df5f93141461809080103eadba62e)
4.unity準備編
UniVRMのパッケージをダウンロードします。
- 下記リンクへアクセスします。
- 下図のようなページが開かれます。
- 下図のように、unityパッケージを選択して、ダウンロードします。
unityを起動して、インポートパッケージをします。
- 下図のように、unityの[Assets]-[Impor Package]-[Custom Package...]を選択します。
- 先ほどダウンロードした、Unityパッケージファイルを選択します。ファイル名などは、下図を参考にしましょう。
- 下図のように、すべて選択されていることが確認できたら、[Import]を選択します。
- 下図のように、[VRM]メニューなどが追加されます。
5.unity編
MagicaVoxelでエクスポートしたpng画像と、mixamoからダウンロードしたfbxファイルを格納します。
![e01.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F191635%2F003cb6e4-aa6a-442c-4471-28501cca56d1.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=35f7c29fdd53ed42789161191a26e6ba)
fbxファイルでリグの設定とボーンの確認をします。
- fbxファイルを選択して、インスペクターウィンドウで、[Rig]内の[Animation Type]を[Humanoid]に変更します。
- その後、右下にある[Apply]を選択します。
- もしここでエラーが出ているようであれば、mixamoでリグが失敗している可能性が高いので確認しましょう。
![e02.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F191635%2F9f764e0c-dcd6-552c-4769-0911465ddff1.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=a234746765e87faa3d842eb5f659ad9f)
- プロジェクトウィンドウ内にあるfbxファイルを展開します。
![e03.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F191635%2F0138f5d5-e7b3-1969-4d60-7676abf92617.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=164ab119c30937bf8b090b5108a1e587)
- 素体みたいなアイコンを選択します。
![e03のコピー.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F191635%2F2403e089-7f89-679e-59cc-dc2957b56f3c.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=959e59e555c144afc3814fb93aa245b3)
- インスペクターウィンドウで、オールグリーンを確認します。
![e04.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F191635%2Fabcc0323-3140-8d80-8ec7-c8ea52d2eb85.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=02986fc89029bde502cd7ac1a187674e)
- ちょっとスクロールして、右下にある[Done]を選択します。
![e05.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F191635%2Ff51c30aa-2aae-0ba8-e5b0-59ea176d2f34.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=5c59cc588e0f82e8e727f974dc053359)
マジカボクセルの画像ファイルを、fbxファイルに適用します。
- プロジェクトウィンドウ内で、空のマテリアルを作成して、マジカボクセルから持ってきた画像ファイルを適用します。
![e06.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F191635%2F0c977312-ed2e-c133-7887-f593784b30d1.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=80580e7713b53c2cf845adaf50f579ef)
- fbxファイルをsceneに出し、マテリアルを適用します。
- ポジションは0,0,0にします。
![e07.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F191635%2F2db397b8-bba1-2063-e41f-c013088e0268.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=3fe6af0f294248d1a4fbae18b7b24e19)
VRMファイルを生成します。
- unityの[VRM]-[UniVRM-0.55.0]-[Export humanoid]を選択します。
![e08.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F191635%2F72ce41ca-24dc-bb7e-a7ae-215c61a29d71.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=03fb10097bcf4cfe30f2c923eca58627)
- いろいろと情報を設定しますが、clusterのアバターであれば、[Author]に製作者の名前を記入するだけでよいです。(素材として提供したり、販売するのであれば、細かい情報の記入が必要となります)
![e09.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F191635%2F9af4b3fb-bc51-ca10-f6f8-e36215ca3ed2.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=542c3e25e6f520cfdcfa7fec5d9351f7)
- VRMファイルが保存されるので、適当な場所へ保存します。
6.cluster編
- アップロードしてサイズを確認して、米粒だったらがっかりしてBlenderからやりなおしましょう。
![x00.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F191635%2Fbd1e6fa0-9f77-d4a4-b987-5b67c0cd7289.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=75f85ecfb3a59390561ccf716406c292)
7.その他編
- 一連の流れで、様々なファイルが作られます。
objファイル
pngファイル
fbxファイル
vrmファイル
- いろいろ試す作業なので、それぞれ専用のフォルダを作るなどして、失敗したときや成功したときに、ログをたどれるようにしておくと、新たにアバターを作るときの作業がはかどります。