VRCSDK3 でバーチャル早着替え with VRoid

**2021-08-29追記** Unity 2019 環境になってからも同様の方法で利用可能です。ただし、Entry 直後の State (今回でいえば `White` )でも切り替え対象のマテリアルを設定しないとうまく動作しない場合があるようです。その場合は、記録の際に一度別のマテリアルを選択した後、本来のマテリアルを再度選択することでアニメーションを作成できます。

**2022-04-14追記** VRoid 正式版 (v1.x～) でも同様のテクニックで早着替えが可能です。本文を参照し、ベータ版と同様にテスクチャのレイヤーを切り替えたマテリアルを用意してください。ただし、`透明メッシュを削除する` オプションがデフォルトでオンになっている点に注意して下さい。早着替えの仕組み上、メッシュが各 VRM で一致している必要がありますので、オフにしてください。

![vroid-henshin-21.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463374/daf89793-fbec-6d69-c3d4-2c4bd0e7d8a6.jpeg)

---

みなさん、VRChat 楽しんでいますか？　私はとても楽しんでいます。

さて、先日 VRCSDK3-AVATAR がリリースされました。その特徴は、なんといってもカスタマイズ性の高さです。もとよりプレイヤー自身がアバターやワールドを制作することが VRChat の醍醐味ではありますが、 その長所がより突き詰められた形です。

本記事では、従前のマテリアルアニメーションと**アクションメニューのカスタマイズ**を組み合わせることで、アバターを切り替えることなく衣装をチェンジする**バーチャル早着替え**を実装します。

## STEP0: VRM 素材の準備

VRoid で普通にアバターを作成します。

![vroid-henshin-2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463374/fc91eade-b20a-f588-df6e-9357626d4faf.jpeg)

次に、着替える衣装を用意します。着替える前の服と後の服はモデルの切り替えではなく、テスクチャのレイヤー切り替えで表現してください。今回はマテリアル（＝テクスチャ+シェーダ）を差し替えることで早着替えを行うためです。[^1]

[^1]: Blender等を利用しVRoid製モデルを素体+衣装で分割する場合は、マテリアル切り替えではなくオブジェクトの表示・非表示を利用した着替えが可能ですが、本記事の範囲外とします。

![vroid-henshin-1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463374/b6bbe1f1-55fa-00fc-909d-61ea34b447d4.jpeg)

衣装が定まったら、着替え前・後で2つの VRM ファイルを出力してください。VRoid での作業は終了です。

## STEP1: Unity プロジェクトへのインポート

Unity プロジェクトに [VRCSDK3-AVATAR](https://vrchat.com/home/download) と [VRM Converter for VRChat](https://pokemori.booth.pm/items/1025226) をインポートします。

![vroid-henshin-3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463374/545c13e9-d3d6-2fbb-4575-82c33ca23acd.jpeg)

2つの VRM ファイルをインポートします。続いて、VRM Converter 所定の手順に従い、**着替え前のモデルだけ** VRChat 用に変換します。

![vroid-henshin-4.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463374/d8c9c4a4-0242-b12d-175e-0919c9bf5acd.jpeg)

シーン中にある VRChat 用モデルを複製します。[^2]

[^2]: この後アニメーションを作成する際地面に埋まってしまうと直すのが面倒なので、複製しておくことがおすすめです。

![vroid-henshin-5.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463374/652ed123-c7fc-d72f-14f0-650e897714b7.jpeg)

## STEP3: アニメーションの作成

Animationウィンドウ（タブ）で[Create]をクリックし、新しいアニメーションクリップを作成します。名前は何でもよいですが、ここでは `kigae` としました。

![vroid-henshin-6.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463374/70f395b0-e571-087f-cfe1-163d9286bea2.jpeg)

Animationウィンドウ（タブ）の左上にある記録ボタン（赤丸）を押し、アニメーションの記録を開始します。

![vroid-henshin-7.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463374/be5c3643-91dd-dea0-2b4a-29b1b7c44424.jpeg)

足元に複製したモデルが埋まっているので、ヒエラルキーから[Body]を選択しインスペクタを開きます。[Skined Mesh Renderer]-[Materials]で任意のマテリアルを着替え後のマテリアルに差し替えます。ワンピースの場合はトップスのみなので、`F00_002_01_Tops_01_CLOTH` を変更すれば OK です。

![vroid-henshin-8.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463374/a3d4d9df-e934-1fe8-5ee4-1ecbed6fa092.jpeg)

変更ができたら、再度記録ボタンを押してアニメーションの作成を終了します。複製したモデルは削除しておきましょう。

## STEP4: FX の変更

FX はモデルの状態遷移図のようなものです。VRM Converter で変換したモデルでは、あらかじめカスタマイズされた FX が作成されています。

モデルのインスペクタで[VRC Avatar Descriptor]-[Playable Layers]-[FX]に設定されている FX をダブルクリックで開きましょう。

![vroid-henshin-9.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463374/a6c21357-af87-55d2-f2d7-3743da6d0c1d.jpeg)

[Parameters]に int 型変数 `Kigae` を追加します。この変数はアクションメニューとの連携に利用します。アクションメニューでの操作が変数に反映されるので、FX では `Kigae` の変化で服装が変化するようにしましょう。

![vroid-henshin-10.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463374/8110b724-3478-ecf5-a7db-9e0ce5bcf53e.jpeg)

FX は複数の状態遷移図をレイヤーで重ねたような構造になっています。[Layers]タブで `Kigae` レイヤーを追加し、**オプションで Weight を 1 に変更します**。デフォルトでは Weight が 0 ですが、そのままではモデルにアニメーションが反映されません。

![vroid-henshin-11.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463374/0db90960-c9e2-24b3-3cd3-da653b878e3a.jpeg)

状態遷移を作図していきます。右クリックで[Create State]-[Empty]から新たな状態を、状態を右クリックし[Make Transition]から新たな遷移を作成できます。下図のように「着替え前の状態」と「着替え後の状態」を作り、「Entry」から「Exit」がつながるようにしてください。

そして、「着替え後の状態」の[Motion]に先ほど作成したアニメーションを設定します。

![vroid-henshin-12.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463374/26571a4d-a763-e701-dfa4-bd1e811d33f7.jpeg)

Transition を選択し、遷移の条件を設定します。[Conditions]で `Kigae equals 0` で「着替え前の状態」に、`Kigae equals 1` で「着替え後の状態」へ遷移するようにします。

![vroid-henshin-13.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463374/2dd2a2c9-95c8-cd92-14f0-5f75e97c2fd3.jpeg)

![vroid-henshin-14.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463374/e452ca35-d6d0-6742-1c31-228063e8cd38.jpeg)

これで FX の設定は完了です。

## STEP4: アクションメニュー の変更

最後に、設定したアニメーションをアクションメニューから呼び出せるようにしましょう。インスペクタで[VRC Avatar Descriptor]-[Expressions]-[VRCExpressionParameters]を開きます。

![vroid-henshin-15.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463374/56fdbc3b-b5e6-bd72-6901-f5136be46508.jpeg)

ここで、先ほど設定した変数 `Kigae` との紐付けを行います。変数名と型を設定します。

![vroid-henshin-16.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463374/8202e343-8108-8ffe-21f8-63127c809f6a.jpeg)

[VRC Avatar Descriptor]-[Expressions]-[VRCExpressionsMenu]を開きます。

![vroid-henshin-17.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463374/bccb949c-6623-a6d8-562e-b1f87f82003b.jpeg)

[Add Components]からアクションメニューの項目を追加します。

[Parameter]で `Kigae, Int` を選択し、[Value]を `1` にします。

[Type]で `toggle` を指定すると、次にボタンを押すまで着替えっぱなしになります。

![vroid-henshin-18.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463374/9a324dc3-9486-734c-7682-17d0330d6d50.jpeg)

ビルド＆テストしてみましょう。

![vroid-henshin-19.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463374/3ed2f18c-5ec0-0b69-54f4-dcb19d59b74b.jpeg)

![vroid-henshin-20.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463374/50243d65-1eed-59eb-9f2b-e625989c8a98.jpeg)

アクションメニューに項目が追加され、早着替えを行うことができました！