VRChat開発メモ（アバター編、Unity 2018.4.20f1、VRCSDK2）

# はじめに
Udon機能が楽しそうなので再開。メモしながらやっていきます。

# [SDKについて](https://docs.vrchat.com/docs/choosing-your-sdk)

SDKはVRCSDK2とVRCSDK3の二種類あり、最新のVRCSDK3はUdon機能が追加されていますが、アバターはまだ対応していないみたいです。アバターを作成するならVRCSDK2を使えとのこと。また2つのSDKは混ぜるな危険。Unityのバージョンは[2018.4.20f1](https://unity3d.com/jp/get-unity/download/archive)を使います。

# VRCSDK2でアバターを作成

1．VRCSDK2は[ここ](https://vrchat.com/home/download)からダウンロードします

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/ba5f974d-d7e1-9b80-2d75-ba1a49da819c.png)

2．UnityHubからUnity 2018.4.20f1を起動します

3．VRCSDK2をimportします

4．VRCSDK->Example2->Scenes->Example-Avatarを開きます

5．上のメニューからVRChat SDK->Show Control Panelを開きます

6．VRChatのアカウントでログインしてください
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/b8b9bf81-c623-610d-0ed6-fdad1e82401b.png)

7．Control PanelのBuilderタブをクリックし、Build&Publishします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/06add2d1-c750-337d-a85b-9b85a023ab0b.png)

8．エラーがでました

~~~ 
Error: Failed to optimize file for upload. Couldn't read file
~~~ 

Future Proofを外すと良いようです

- https://steamcommunity.com/app/438100/discussions/1/1621726179578771300/
- https://steamcommunity.com/app/438100/discussions/5/2595630410180617539/

Control PanelのSettingsからFuture Proof Publishのチェックを外しました
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/694e81bf-260a-96a9-d21c-1ed051794496.png)

9．再度Build&Publishをすると、アップロードが完了しました
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/38ed3c92-6716-befb-138f-ad9c4276b6cd.png)

10．ブラウザのVRChatのログイン後の画面からAvatarsをチェックすると、BLUEMAN（VRChatのサンプルアバター）が見えているのでアップロード成功です
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/7411f2ee-b473-6bfd-e1fa-566f29eff38d.png)

11．SteamでVRChatを起動し、実際に見てみましょう

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/3ccbfdf2-17cd-8134-0f7c-8af2fbb31b72.png)

12．アバターのPrefabはこのような設定になっています

- Animator
- VRC_Avatar Descripter 
- Pipeline Manager

この３つがAdd Componentされていることが重要です

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/16006372-13b5-d8d6-ade0-f2b72a785d6c.png)

# VRMのモデルをVRChatで使う

1．VRMは[春之レイラ](https://booth.pm/ja/items/1903635)ちゃんを用います

2．VRMからVRCへコンバートします

下記の記事が参考になります。
https://qiita.com/100/items/7315fe3a7eb75732ae43

VRMからVRC用にコンバートするために、[VRM Converter for VRChat](https://pokemori.booth.pm/items/1025226)を用います。

VRM Converter for VRChat-20.0.0 + UniVRM-0.55.0.unitypackageをインポートすると、.vrmファイルをProjectビューにドラッグ＆ドロップするだけで読み込んでくれます。

3．読み込んだら、haruiroreira(unitcut) PrefabをHierarchyビューにD&Dし、inspectorビューから、VRC_Avatar DescriptorとPipeline ManagerをAdd Componentします

（セシル変身モデルは変換後に視点位置がずれる（首の位置）ため、VRChat用に変換する前に調整しておく必要があるらしい?）

VRC_Avatar DescriptorのView Positionを設定します（※後述の手順でVRChat用に変換してからが良い）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/54d151c5-6b5e-c7c0-55ee-6de210039915.png)

4．Control PanelのBuilderを見てみるとエラーが出ています（※後述の手順でVRC用に変換するの忘れていたｗ）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/920a4901-213f-dc7c-767f-3829768f46b2.png)

AutoFixをクリックして、Build＆Publishで、ガチのレイラちゃん完成ｗ （※後述の手順でVRC用に変換しましょう）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/33e34792-e17b-d2ba-77ac-1dc19a889041.png)

5．VRChatから見れました
![00000001.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/269b0365-d304-7c53-f63b-a12c27c2cf56.png)

![00000002.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/2bc560eb-9229-dd23-777d-761a5a6cb7e7.png)

※VRMからVRChat用に変換していなかったので... PrefabをHierarchyに持ってきたところから説明します。（3～5は無視）
6．上のメニューからVRM->Duplicate and Convert for VRChatを選択、複製して変換を実行します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/44597027-d561-f5ab-cf93-ee847f5f5249.png)

7．複製されたPrefabのInspectorビューを見ると、VRC_Avatar DescriptorやPipeline Managerがすでに設定されています。視点位置だけ首の位置になっているため、調整してください。Sceneを見ながら、小さな球体が目の位置の前に来るようにしてください
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/6220bbdc-7c3f-95b0-539f-b0185d3a0df0.png)

8．この状態でControl Panelを開くと、エラーがなく、AutoFixする必要もなくなっています。Build&Publishしてアップロードします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/138b5e49-98f7-6542-b454-f4a3b9c81b4f.png)

9．同じようにSteamからVRChatを起動し、きちんと動作することを確かめましょう

Convertしたほうが若干ガニ股？
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/31174a42-18c6-b829-d902-00b466a7ffbd.png)

座り方が女の子になってる！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/8089fe84-d57e-d152-30b1-9ad5d0cc2eb9.png)


# Vroid HubからVRMのモデルをダウンロードしてアバター作成

1．Vroid HubからダウンロードもしくはVroid Studioで作成したVRMアバターを用います

ヴィクトリア・ルービンちゃん
https://hub.vroid.com/characters/2792872861023597723/models/5013769147837660446

2．上と同様にできます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/4f751bba-c38d-9248-e4fb-3c5170a1fc75.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/8c393f04-467c-116a-cca3-4cd4b4391aac.png)

3．VRChatで確認

＜画像＞

# FBX（リグ入れ済み）のモデルをVRChatで使う
1．VRChatのサンプルアバター（BLUEMAN）をダウンロード、Projectビューにいれます
https://docs.google.com/document/d/1W5KFa_aszCMrJaFD8mb9a-GHYO4X4S9M63GjM4UwuEw/pub

2．HierarchyビューにD&Dします。InspectorビューのRigからHumanoid設定にしてApplyします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/71f8db87-7d1e-b6ac-f5fd-846c4e64a05b.png)

3．configureは正常です
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/e07caa71-ae2b-4281-f80c-085b093085fa.png)

4．Pipeline ManagerとVRC_Avatar DescriptorをAdd Componentし、View Position（視点位置）を調整します

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/abb40591-4ba1-a706-1767-02fc91cca4dd.png)

5．Control PanelのBuilderを見るとエラーもないようです。Build＆Publishをクリックします

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/d29255c2-5afa-ab54-b5ba-4041f7d640eb.png)

6．アップロードします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/338d8876-9009-7995-fb25-a40a1a3de9b5.png)

7．VRChatで確認

＜画像＞

# FBXのモデルにリグ入れ

1．itseez3dからスキャンしたリアルアバターをダウンロードします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/dd8a94a6-9fab-6688-555c-28e111e32c04.png)

2．blender 2.82aをインストールします
https://www.blender.org/download/

VRChatのサンプルアバター（BLUEMAN）のリグを移植します
https://docs.google.com/document/d/1W5KFa_aszCMrJaFD8mb9a-GHYO4X4S9M63GjM4UwuEw/pub

つづきはこれ見て…
[cluster/VRChat用のカワウソアバターをつくーる](https://youtu.be/7F9l5UA8vq4)



# （おまけ）Blenderの設定

日本語訳の表示設定（Edit->Preferences->Interface->Translation->日本語
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/e3d45bf5-0ec1-ccef-ce90-a68b05ae801d.png)

起動時にCubeとLightとCameraを消して、Defaultにする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/55aa733a-97db-b17b-e87e-89c322f0c5d0.png)


# （おまけ）FBXのモデルをVRMに変換する
下記を参考にします
https://styly.cc/ja/tips/unity-fbx2vrm/

cluster用に32000ポリゴンにDecimateします

マテリアルの変更

エクスポート
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/46076137-f8a4-1ac0-4757-88b69f323d30.png)

できたvrmを[ここから](https://cluster.mu/account/avatar)アップロード

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/a351e68b-0a68-c14c-27d0-30b6a51f6cc3.png)

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">.⁦⁦<a href="https://twitter.com/makoragi?ref_src=twsrc%5Etfw">@makoragi</a>⁩ さんをclusterにアップロード完了<a href="https://t.co/AaTXkBbpOG">https://t.co/AaTXkBbpOG</a><a href="https://twitter.com/hashtag/clusterVR?src=hash&amp;ref_src=twsrc%5Etfw">#clusterVR</a> <a href="https://twitter.com/hashtag/3D%E3%83%A2%E3%83%87%E3%83%AB?src=hash&amp;ref_src=twsrc%5Etfw">#3Dモデル</a> <a href="https://twitter.com/hashtag/VRM?src=hash&amp;ref_src=twsrc%5Etfw">#VRM</a> <a href="https://t.co/ucvo2VJdZQ">pic.twitter.com/ucvo2VJdZQ</a></p>&mdash; 藤本賢志(ガチ本)@pixivFANBOXはじめました (@sotongshi) <a href="https://twitter.com/sotongshi/status/1248546389774094336?ref_src=twsrc%5Etfw">April 10, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

# STYLYで3Dスキャンしたモデルを使う
https://qiita.com/KSxRDevelop/items/4afcc42a0fcb8938fe46

# Mixamoによるリグ入れ
1．itseez3dからダウンロードした.objファイルをblenderで読み込み、位置など修正。.fbxで書き出し、model_texture.jpgと一緒にzipファイルにまとめる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/023f31c3-bce4-38a6-33ed-ce319eb66550.png)

2．[mixamo](https://www.mixamo.com/)にログイン

3．