VRChat AvatarのVRM0への変換

# 本記事の内容
VRChat用のアバターを、[Craftopia](https://www.pocketpair.jp/craftopia)で使うためにVRM0に変換する手順のメモです。

Craftopiaは、[VRoid Hub](https://hub.vroid.com/)にアップロードされたVRM0アバターを読み込んでゲーム内のプレイヤーキャラクターとして使うことができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2842206/0d51312b-3451-171e-2bfc-16fc217480a4.png)

ModularAvatarでセットアップされたVRChat用アバターをCraftopiaで使えるVRM0に変換してVRoid Hubにアップロードした手順を備忘録として記録します。

VRMConverterForVRChatを使用します。

https://github.com/esperecyan/VRMConverterForVRChat

# 行う内容
VRChat用のアバターと[VRM0の仕様](https://github.com/vrm-c/vrm-specification/tree/master/specification/0.0)が異なるので、次の作業を行って変換する必要があります。

1. シェーダーの変更
   * VRM0では、Unlit TypeもしくはMToonにのみ対応しています。
   * lilToon等はMToonへの変換機能を持っていますが、完全互換ではないため、一部修正が必要な場合があります。
1. 揺れものの変更
   * VRM0では、揺れものはSpring Boneによって表現されます。
   * VRChatで現在使われているPhys Boneから、Spring Boneに変換する必要があります。
1. 非対応コンポーネントの削除
   * VRM0では、Position ConstraintやRotation Constraint等のConstraintに対応していません。
1. VRM0としてエクスポート
   * VRM0のメタデータ等を設定してエクスポートします。

# 環境
| 項目 | バージョン |
| --- | --- |
| Unity | 2019.4.31f1 |
| VRChat SDK | 3.2.1 |
| [VRMConverterForVRChat](https://pokemori.booth.pm/items/1025226) | v40.1.0 |
| UniVRMExtensions | 8.2.0 |
| VRM | 0.110.0 |
| [lilToon](https://lilxyzw.github.io/lilToon/#/) | 1.4.0 |
| [Modular Avatar](https://modular-avatar.nadena.dev/ja/) | 1.6.0 |
| Craftopia | 20230711.2120 |

# 変換手順
## VRMConverterForVRChatパッケージの追加
1. VCCを閉じた状態で、VRMConverterForVRChatのリポジトリ登録リンクをクリックしてリポジトリを登録
1. VRMConverterForVRChatをプロジェクトに追加

## マテリアルのMToonへの変換
1. 元マテリアルがlilToonの場合、マテリアルを選択した状態でinspectorの一番下にMToon(VRM)に変換ボタンがあるので、そちらで変換。
1. 変換されたマテリアルを使うようにfbxのマテリアル設定等を置き換え。
1. 見た目が整うように調整。

### 調整が必要なマテリアルの項目例
私が変換した際に確認した、調整が必要な項目です。
1. テクスチャでマスクされていた領域
   * MToonはテクスチャによるマスクに対応していないため、同じマテリアル内でMatcap等の効果範囲を絞ることができません。
   * マスクされたmatcap等は諦めました。
2. lilToonで透明度を置き換え等で調整していた部分
   * テクスチャを編集してアルファチャネルを設定する必要があります。
   * lilToonの詳細設定 > 最適化 > 焼き込み から焼き込める...?

## 衣装を着せたデータを用意
1. Hierarchyにアバターを配置し、ModularAvatarで着せる衣装もセットアップします。
2. アバターを選択した状態で、 `メニュー > Tools > Modular Avatar > Manual Bake Avatar`を実行し、衣装を結合したデータを用意します。

## PhysBoneのSpringBoneへの変換
私が実行した際、Root Transformを別のオブジェクトに指定したVRC Phys Bone Colliderについては、変換が上手くいきませんでした。コライダーを設定するオブジェクトにコンポーネントを付け替えた上で変換を実行します。

1. `メニュー > VRM0 > Open Swaying Objects Converter Wizard`を開く。
1. 変換元および変換先に配置したアバターを選択。
1. 変換を実行

secondaryオブジェクトが追加され、SpringBoneが設定されます。

## VRMが対応していないコンポーネントの削除
もしSwaying Objects ConverterでPhysBoneのコンポーネントが削除されない場合はここで一緒に削除します。

Hierarchyの検索欄に、次の表のように項目を入力して出てきたオブジェクトから対象コンポーネントを削除してください。

| 検索名 | 削除コンポーネント |
| --- | --- |
| VRCPhysBone | VRC Phys Bone |
| VRCPhysBoneCollider | VRC Phys Bone Collider |
| RotationConstraint | Rotation Constraint |
| PositionConstraint | Position Constraint |

## Spring Boneの調整
[Spring Boneの仕様](https://github.com/vrm-c/vrm-specification/tree/master/specification/0.0#vrm-extension-spring-bone-settings-jsonextensionsvrmsecondaryanimation)を把握して、コンポーネントの値を調整します。

私が変換した際は、再生するとSpringBoneが暴れていました。
次の内容を確認して調整してみてください。

### Drag Force
Drag Forceは0～1の範囲にあるはずですが、変換した結果が1を超えていました。1に収まるように調整します。

### Collider
* Root Transformを指定されたPhys Bone Colliderが、正しくそのオブジェクトに付かないようです。
* 元のコライダーの向きと変わってしまう場合があるようです。

### Gravity Power
複数の子が存在する(分岐している)オブジェクトにSpring Boneを設定した場合、挙動がPhysBoneと変わってくるようです。Gravity Powerを0以外に設定していると、変な向きに傾いたので0にしました。

## VRM0ファイルへ変換
アバターを選択した状態で、
`メニュー > Export VRM file from VRChat avatar`で変換ウィンドウを開く。

1. Expressionsに、表情アニメーションを設定。(Craftopiaは対応しているのか未確認)
2. Main Cameraの位置を調整して、スクリーンショットでアバター画像を撮影。
3. Title, Version, Authorを記入。
4. 暴力表現を許可に変更。(Craftopiaで使うには暴力表現を許可する必要があります。)
5. その他、設定を確認した上でExport VRM fileからエクスポート

## VRoid Hubへアップロード
生成したvrmファイルをVRoid Hubにアップロードします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2842206/508a1bea-50fb-c83f-b487-4292da391af8.png)

モデル登録者以外の利用はNGのままでCraftopiaで使えます。

影の設定が少し甘いですが、Craftopiaで読み込んだ際、クラフトピアシェーダーに置き換えたらまともな表示になりました。

## Craftopiaでのモデルの差し替え
1. Craftopiaのメニューで　シングル or マルチ を選択し、VRoid Hub 設定を開く。
1. モデルを差し替えたいキャラクターを選択。
1. 使用したいモデルデータを選択する。
1. モデルを差し替えたキャラクターの設定を開く。
1. 満足いくように調整
   ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2842206/865b8a14-7981-b4a9-689a-9acaa6d8c7c9.png)

以上、自分の好きなモデルで楽しみましょう♪