アバターの横に、浮遊するサポートロボット(アバター)を浮かべる手順(VRChat忘備録)

二足歩行ホビーロボットビルダーの みっちー です。
最近、ホビーロボットビルダーの仲間内で「VRホビーロボット集会」という名のVRChatのイベントが開催され始め、自分もQuest2の発売をきっかけに、しばらく離れていたVRの世界に戻ってきました。
さらに、そのままVRChat沼にハマってしまいました。(笑)

ロボットの製作にはモデリングソフトではなく、3D CADソフトを使うのが一般的ですが、3D CADのデータをblenderで編集可能な形式にコンバートして、ロボットのモデルをアバター化するのが、そのコミュニティの中で流行りはじめています。

ただ、VRChat内でコミュニケーションしていると、中途半端に作った自作アバターでは使いづらいと思うこともあり・・・
今回、"人間アバターだけど自作ロボットアバターも自慢できる"、そんなアバターを作りたい！っと思って、いろいろ探し回った結果、たどり着いたアバターの作成方法と、見つけた技術(アセット)を紹介したいと思います。

# 目標

人型アバターの横に、サポートキャラクターみたいな小さなアバター(ロボット)を浮かべて、かつ自分のアバターと同期して動かしたいと思います。

完成形はこんな感じです。↓↓↓
![ezgif-2-118616936d73.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/231185/1b761de3-d503-51fd-4c3d-791d6c9e9973.gif)

ちなみに、主人公にくっついてるサポートキャラって良いですよね。

- カード〇ャプターさくらの「ケロちゃん」
- 姫ちゃんの〇ボンの「ポコ太」
- 幽遊〇書の「プー助」

・・・とか、みたいな感じですね。（年齢がバレるｗ）
普段作っているロボット自体も、そんなサポートキャラクター的位置づけのキャラクターとして製作しています。
(私、ぬいぐるみロボットとか作ってます。)

# 必要なもの

作業しながら集めても良いのですが、まず初めに必要なものを列挙しておきます。

1. 単体のアバターのアップロードの知識<br>
※ 自分はまず、zenさんの[ワニでもできる！モデリングforVRChat](https://www.youtube.com/watch?v=Xg4AXYuzEqA)のかぼちゃアバターで練習しました。
2. メインにしたいアバターのモデル<br>
※今回は、boothで無料のアバターの中から、[拾い部屋さんのシヴィーちゃん](https://booth.pm/ja/items/1663470)を使わせていただきます。
3. 空中に浮かべたいアバターのモデル<br>
今回は、自作の[KO-LINK3](https://hub.vroid.com/characters/1628013619158667335/models/2993510929127692020)というキャラクターを使います。<br>
※3D CADのロボットのデータをアバターにする方法は、[@Ninagawa_Izumiさんの記事「Unity/VRChatにロボット系3Dモデルをインポートして動かす全行程」](https://qiita.com/Ninagawa_Izumi/items/974c047fdd6327621b3a)をご覧ください。
4. [Dynamic bone (Unityアセット)](https://assetstore.unity.com/packages/tools/animation/dynamic-bone-16743?locale=ja-JP) 約2,000円くらい（時々セールやってます）
5. [VRCHAT SDK2](https://vrchat.com/home/download) (3.0でも可)
6. [ユニティちゃんトゥーンシェーダー2.0](https://unity-chan.com/download/releaseNote.php?id=UTS2_0)
7. [Drone Movement with Dynamic Bone](https://booth.pm/ja/items/2026750) (無料)

![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3233313138352f66616436336562312d653163392d626461352d633266382d6232323365396434383435612e706e67.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/231185/00a2195d-3618-91f3-2ffb-a5953757588e.png)
拾い部屋さんのシヴィーちゃん (Boothで無料!!)
https://booth.pm/ja/items/1663470

# プロジェクトの作成

適当な名前で、まずは新しいプロジェクトを作ります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/231185/0af024ed-a434-a67f-2483-3fde52608062.png)

# 下準備(必要なアセットのインポート)

キャラクターをインポートする前に、必要なものをUnityにどんどんインポートしていきます。
事前に、[VRCHAT SDK2](https://vrchat.com/home/download)をダウンロードしておき、Unityの上部メニュー [Assets]->[Import Package]->[Custom Package] から、「VRCSDK2-2020.12.09.04.45_Public.unitypackage」を読み込ませます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/231185/c4b7e52b-49e3-2730-6060-dfc9a91cec1f.png)

次にDynamic Boneをインポートします。こちらは、Unityのアセットストアで有料販売されているアセットのため、webページで事前に購入しておく必要があります。
購入済みの状態であれば、[Asset Store]のタブを開いてUnity内に表示されるwebページから、Unityにログインすると、[My Asset]の中に購入済みのアセットが並びますので、そこからImportします。
（ちなみに、シヴィーちゃんはDynamic Boneを使っていないようですが、これは後々インポートするDrone Movement with Dynamic Boneのための下準備です。)

![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3233313138352f39653561316532302d303735652d333832392d636337382d3231356663613861383232622e706e67.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/231185/a4b3edaa-0ce1-249d-b61a-dbd0adce7d05.png)

CustomPackageと同じで、インポートするファイルの確認画面が出ますので、そのままインポートします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/231185/aa83ed1f-2b9e-e160-b45d-30f7de2773d4.png)

続いて、シェーダーをインポートします。
シヴィーちゃんは、[ユニティちゃんトゥーンシェーダー2.0](https://unity-chan.com/download/releaseNote.php?id=UTS2_0)を使っているようなので、ダウンロードしたzipを解凍し、そのなかから「UTS2_ShaderOnly_v2.0.7_Release.unitypackage」を選んで、インポートします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/231185/b7481ffe-f6c2-15d1-f585-0ea340707ed2.png)

# 3Dモデルのインポート

下準備が終わったので、続いて3Dモデルをインポートします。
[拾い部屋さんのシヴィーちゃん](https://booth.pm/ja/items/1663470)をダウンロードし、zip解凍した上で、Import Packageから、シヴィーちゃんのフォルダの中にある「2A7VVVVproto_191123.unitypackage」をインポートします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/231185/de629d04-3561-a5f8-ee05-eb7a05f06477.png)

Assetsにシヴィーちゃんがインポートされたので、インポートしたシヴィーちゃんのfbxファイル(2A7_VVVVproto_191107VRC)をHierarchyの直下に放り込みます。
この時、もし下準備でシェーダーのインポートをしていないと、キャラクターのマテリアルが未設定の状態になり、単色で表示されます。インポートする順番を間違えないようにしましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/231185/4b835cc6-37fb-88f3-7f57-2a5ede822013.png)

続いて、アバターにVRChatで使うための設定を行います。
Hierarchyの2A7_VVVVproto_191107VRCを選択し、[Add Component]から[VRC_Avater Descriptor]を選んで追加します。
この選択肢が出てこない場合は、VRC SDKのインポートに失敗しています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/231185/3f24524e-f81f-94e9-1de2-a791f10caf1d.png)

VRC_Avater DescriptorからViewer Pointの設定と、Defoault Animationの設定を行います。
とりあえず、Viewer Pointは、X=0,Y=1.15,Z=0.08にしてみました。
SceneをWireFrame表示にすると視点の位置が表示されます。
Defoault Animationは、女の子アバターなので、Famaleです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/231185/74894ba6-b3bc-f1d2-0b14-0a89cd248e37.png)

ここまで出来れば、とりあえず、シヴィーちゃん単体でのアップロードが可能な状態になっています。

# 浮遊するアバター(Drone)を設置する

ここからサポートキャラのアバターを設置したいと思います。
まずは、[Drone Movement with Dynamic Bone](https://booth.pm/ja/items/2026750)をダウンロードして、zipを解凍し、「DroneMovementWithDynamicBone0.2.0.unitypackage」をAssetsにインポートします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/231185/faeeb996-49d8-4917-e97b-0018df9ff351.png)

続いて、インポートしたDroneMovementWithDBの中からRuntime->Prefabs->DroneCosDelayMovementを選択し、Hierarchyのアバター(2A7_VVVVproto_191107VRC)の中にドラッグ＆ドロップします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/231185/224946f6-6626-5284-1e36-d3e150b161ab.png)

続いて、浮遊させたいロボット(アバター)のFBXとメッシュの入ったフォルダをまるごとAssetsの中にドラッグ＆ドロップします。
(既にアバターを作っていて、unitypackageがある場合は、インポートしても構いませんが、浮遊するアバターにVRC SDKの設定(VRC_Avater Descriptor)が入っている場合は、VRC_Avater Descriptorが2つになって衝突しますので、removeしておいてください。)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/231185/9056f8c3-6162-139d-52bd-ae33c3fdcf42.png)

浮遊するロボット(アバター)のFBXを選択して、RigをアニメーションタイプをHumanoidにして、Applyしてください。Configueの設定はしなくても良いようです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/231185/73612ce5-c7dc-dc9c-1512-779126813f9d.png)

FBXを、Hierarchy内の、DroneCosDelayMovement->DlayMovement->Targetの中にドラッグ＆ドロップします。
すると、足元(原点)にアバターが出現します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/231185/8b7ed4e8-5533-51c8-ebf9-1868da7aa21b.png)

浮かべたい位置に調整します。
DelayMovementをクリックし、Sceneに出現した三軸の矢印を操作して、デフォルト位置を設定します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/231185/d4d4588a-e023-5eed-1b15-5e7e1e37f8ca.png)

次に、このアバターが、メインのアバターのどの座標に追従するか設定しますHierarchyのDroneCosDelayMovementを選択し、Add ComponentからPosition Constraintを選択、追加します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/231185/ac949091-090a-faf1-2926-2a21680590e2.png)

Position ConstraintのSouceのところの「＋」ボタンを押し、そこに、メインアバターのArmatureから「Chest」をドラッグ＆ドロップします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/231185/10f7f0e0-746d-43fa-0c95-4fdfce6ba4d7.png)

Activateをクリックし、ドローンの追従が設定できました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/231185/9038cae3-16c5-476a-0142-dce254cfa93e.png)

ドローンの設定は、ここまでです。
ただ、このままアップロードすると、サポートキャラクターのアバターは常にTポーズのまま浮遊しています。
動かないオブジェクトならこれでもOKです。

# メインアバターに連動して、浮遊アバターを動かす

主アバターの動きを空中浮遊するアバターに追従させます。
ちなみに、こちらの設定は、Nazellさんの[VRChat　初心者向けUnity備忘録Ver.1.0.1](https://booth.pm/ja/items/2203578)を参考にさせていただきました。

まず方針として、空中で足をバタバタさせるのも変なので、上半身だけを主アバターと子アバターで同期させたいと思います。
関節の同期には、[Rotation constraint]という設定を行います。

ここからはすごく地道な作業です。
まずは、メインアバターの[Neck]と浮遊アバターの[Neck]を同期します。

浮遊するアバターのArmatureからNeckを選び、Add Componentから、[Rotation constraint]を追加します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/231185/0ae6912c-5e83-77eb-66a6-5a4459633ce4.png)

[IsActive]にチェックを入れ、sourceの「+」をクリックし、メインアバターの[Neck]をドラッグ＆ドロップします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/231185/3914df45-34fb-5830-d607-4e0f48b30f84.png)

これで、[Neck]は完了です。
続いて[Head]、[Left Shoulder]…という具合に同期させたい関節を、同じ要領すべて設定します。
ちなみに、このロボットアバターには指がないため[hand]まで設定したら、指は設定しません。
5本指があるアバターであれば、全部設定して下さい。本当に大変な単純作業です(^^;A
ちなみに、controlキーを押しながら関節をまとめて選んで、一括して[Rotation constraint]を追加するとちょっとだけ作業は楽になります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/231185/bb9b7905-82c6-e47a-7e69-a25e552688ad.png)

全部設定し終えたら、完成です！
あとは、いつも通りアップロードしましょう。

おそらくこんな感じに動くはずです。

![ezgif-2-118616936d73.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/231185/1b761de3-d503-51fd-4c3d-791d6c9e9973.gif)

さて、ホビロボVRC勢なみなさん、これでVRC内で自作ロボットアバターを連れて歩きませんか！？

…しかし、VRChat奥が深いというか、まだまだ出来ることのほんの一部しか触れていないようです。
VRChatはじめたばかりの自分の忘備録として、こちらの記事を書きましたが、もっと効率的な方法とか、面白いギミックとかあったら教えてむしろ欲しいです。

ゆくゆくは、ロボットの変形もやりたいですし、あ、そういえばパーティクルに関してはまだ全然触っていません(^^;A
また、面白いものを見つけたら記事にしたいと思います。

**そして、VRChat内でいろいろ教えてくれた皆さん、ありがとうございます。**

# Quest対応について

~~ちなみにQuest対応についてですが、Dynamic Boneを使っているのでPCと同じように浮遊させることは出来ませんが、Rotation constraintを使って、定位置で空中で同期動作させることだけは出来そうです。~~

Quest対応に関して、Dynamic Boneはもちろんですが、Rotation constraintもQuest非対応でした。
とりあえず、固定で浮かべておこうか…。
(2021/01/11 訂正)
![175.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/231185/b39937b5-b067-b0a6-e15b-29ca67da6a49.jpeg)


# 参考にさせていただいたサイトや動画

- ワニでもできる！モデリングforVRChat<br>
https://www.youtube.com/watch?v=Xg4AXYuzEqA
- VRChat　初心者向けUnity備忘録Ver.1.0.1<br>
https://booth.pm/ja/items/2203578
- Drone Movement with Dynamic Bone<br>
https://booth.pm/ja/items/2026750
- Unity/VRChatにロボット系3Dモデルをインポートして動かす全行程<br>
https://qiita.com/Ninagawa_Izumi/items/974c047fdd6327621b3a