in3Dでリアルアバターを作成し、clusterにアップロードすーる

# はじめに
in3Dを使ってリアルアバターを作成し、clusterにアップロードしていくー

# 開発環境
- iPhone 12 Pro
- in3D
- Windows 10 PC
- Unity 2019.4.22f1
- UniVRM 0.96.2
- cluster
- 3脚（[DaiGoセット](https://youtu.be/9KuE6BS6Frk)）

|Ulanzi MT-24|Ulanzi VL49|koolehaoda|JOBY|こんな感じ|
|:--|:--|:--|:--|:--|
|<a href="https://www.amazon.co.jp/gp/product/B08TC7BJ8S?ie=UTF8&psc=1&linkCode=li1&tag=gachimoto05-22&linkId=ae13a05e998c2b4dcae784dc27a33444&language=ja_JP&ref_=as_li_ss_il" target="_blank"><img border="0" src="//ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&ASIN=B08TC7BJ8S&Format=_SL250_&ID=AsinImage&MarketPlace=JP&ServiceVersion=20070822&WS=1&tag=gachimoto05-22&language=ja_JP" ></a><img src="https://ir-jp.amazon-adsystem.com/e/ir?t=gachimoto05-22&language=ja_JP&l=li1&o=9&a=B08TC7BJ8S" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />|<a href="https://www.amazon.co.jp/gp/product/B08K2R27MN?ie=UTF8&psc=1&linkCode=li1&tag=gachimoto05-22&linkId=f25e4ffa6c72b080dee98568e8022904&language=ja_JP&ref_=as_li_ss_il" target="_blank"><img border="0" src="//ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&ASIN=B08K2R27MN&Format=_SL250_&ID=AsinImage&MarketPlace=JP&ServiceVersion=20070822&WS=1&tag=gachimoto05-22&language=ja_JP" ></a><img src="https://ir-jp.amazon-adsystem.com/e/ir?t=gachimoto05-22&language=ja_JP&l=li1&o=9&a=B08K2R27MN" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />|<a href="https://www.amazon.co.jp/gp/product/B01L94BK3Q?ie=UTF8&psc=1&linkCode=li2&tag=gachimoto05-22&linkId=23e5f308886a7572ca74463fd22fa321&language=ja_JP&ref_=as_li_ss_il" target="_blank"><img border="0" src="//ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&ASIN=B01L94BK3Q&Format=_SL160_&ID=AsinImage&MarketPlace=JP&ServiceVersion=20070822&WS=1&tag=gachimoto05-22&language=ja_JP" ></a><img src="https://ir-jp.amazon-adsystem.com/e/ir?t=gachimoto05-22&language=ja_JP&l=li2&o=9&a=B01L94BK3Q" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />|<a href="https://www.amazon.co.jp/gp/product/B01MSWAPEU?ie=UTF8&psc=1&linkCode=li1&tag=gachimoto05-22&linkId=c4a5a9528b3a2852e36966334c94b10a&language=ja_JP&ref_=as_li_ss_il" target="_blank"><img border="0" src="//ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&ASIN=B01MSWAPEU&Format=_SL250_&ID=AsinImage&MarketPlace=JP&ServiceVersion=20070822&WS=1&tag=gachimoto05-22&language=ja_JP" ></a><img src="https://ir-jp.amazon-adsystem.com/e/ir?t=gachimoto05-22&language=ja_JP&l=li1&o=9&a=B01MSWAPEU" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />|<img width="60%" height="60%" alt="275168328_378060833780382_314039047743258179_n.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/943b269d-0e49-8cc3-0914-40ec4dc6c5a7.jpeg">|


# 実装

1．in3Dを使って自分自身をスキャンしていきます。動画をご覧ください。

https://apps.apple.com/jp/app/in3d-avatar-creator-animator/id1467153183

<iframe width="560" height="315" src="https://www.youtube.com/embed/RM-xalK2SGg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

2．Unityを開き、FBXをVRMに変換するために、UniVRM-0.96.2_b978.unitypackageをインポートします

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

3．フォルダを作成し、エクスポートしたFBXファイルを置きます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/d4e87838-5477-a4b8-ec62-568b91dca2c1.png)

4．InspectorビューからRig->Animation TypeをHumanoidにしてApplyします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/f2264627-5e59-8bd1-4aa9-119a0453ba04.png)

5．Materials->Extract Texture, Extract Materialsをクリックします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/3961cb12-323d-52b3-d0c4-b4c933499fba.png)

6．生成されたテクスチャ（model_T.jpg及びmodel_T_heir.jpg）をペイント等でPNGにします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/da3cf6f1-9c79-ca08-aaa4-3543f028b03d.png)

7．modelをHierarchyビューにD&Dします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/ec3e065c-d986-5054-4142-4564c0ad68e5.png)

8．Hierarchyビューのmodel->model_Tを選択し、HairとBodyのMain Maps->AlbedoにそれぞれPNGのテクスチャを割り当てます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/5bc9ac5f-7cce-b97f-5b89-0a1a8090b7e8.png)

9．その後、シェーダーはVRM/MToonとしました
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/150a1ee9-5663-17e1-f25c-d4d27e210d9e.png)

10．modelを選択し、VRM0->Export to VRM 0.xを選択します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/4b3f2c70-193c-ec92-b19f-da9be3e68250.png)

11．titile, version, authorを入力し、Exportをクリック、vrmで保存します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/607fc29f-403d-b488-e9bc-1d653503cb08.png)

12．clusterにログインし、アバターのページへ移動します

https://cluster.mu/account/avatar

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/1019cfcd-cc4f-60e9-e5b9-278ecf5128d8.png)

13．できたvrmをアップロードします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/9c03eba2-7025-a497-b6f9-40d5fd6afd2a.png)

14．一覧に表示されていれば成功です！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/3ced5d3c-e061-d2b1-fb63-724e06bc6a8b.png)

15．わーい！
![c77533e8-1e26-45fd-b23b-ae6e9cdd4423.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/8109a1d0-a995-290d-53a4-5cce0fcf43a8.png)

よいリアルアバターライフを！


# エラーについて

テクスチャがJPEGのアバターをアップロードしたときのエラー
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/596d7149-a362-eb5c-6fc6-7fbb932dc59d.png)

使えないシェーダーを選んだ際のエラー
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/38d4f145-c2f9-e743-1b24-96ecb8b29acb.png)

アバターの制限についてはこちら

https://clusterhelp.zendesk.com/hc/ja/articles/360029465811

# 参考文献
https://styly.cc/ja/tips/unity-fbx2vrm/