Trail Rendererで作る軌跡の表示 実装方法
※コンテンツ部分はすべて無料で最後まで読めます。
想定読者
vrchatをプレイしている。
動きの都合上3点トラッキング以上を想定していますがデスクトップ勢にも有用かと思います。
unityでアバターを改変・アップロードできる。
TrailRendererについて興味がある。（検索で来た方）
不足している情報を適宜検索等で補うことができる。
この記事を読んでできるようになること
以下のような動きに追従するトレイル=軌跡をアバターに実装できるようになります。
やり方によっては例えば「アバターが持つ剣の動きに追従する剣戟エフェクト」みたいなこともできます。
※性質上あまり幅が広いものをつけると描画の違和感が高まります。細いトレイルを複数つけるなどで対策はできますが本格的にやるなら別手段やシェーダーまわりの知識が必要になってくると思います。この記事内では割愛します。
この記事の内容としては以下のサイトを参考にしています。合わせてご参照ください。
前提
以下の用語の意味と役割を知っている人は実装・ハンズオンの項目まで飛ばして問題ありません。
次の説明の項目でこれらの前提を簡単に説明するので知らない人は適宜調べてみてください。
Trail Renderer
Modular Avatar (MA)
MA Bone Proxy
AvatarMenuCreator for MA
Gesture Manager
説明
Trail Renderer
unityにビルトインされている軌跡の描画を司るコンポーネント。
今回はunity上で設定できる設定値（時間、幅、最小頂点距離など）と、Materialが設定できる。ということを把握しておけば十分。
より詳細な表現をしたい場合はシェーダーの範疇になってくるが、今回は基本デフォルトのもので済ませるため割愛。
Modular Avatar (MA)
ほとんどの人はMAを使っていると思っていますが一応前提として書きました。（最近はVRC Fury等もあるらしいので・・）
これについては導入や参考サイトは山程あるので分からない方は適宜調べてみてください。
ざっくり言うと元のアバター構造を非破壊で改変できるようになる画期的なモジュール群です。
MA Bone Proxy
MAコンポーネントの一つで、役割としてはトレイルを設定したオブジェクトを、実際にトレイルをつけたいArmature配下まで構造上移動させる役割を担います。
直接Armature配下にトレイルを設定しても動作上は問題ないと思いますが、非破壊性を高めるために使用します。
（結局はアバターのArmature構造に依存するので、これを用いても完全にモジュール化はできないと思いますが。）
ビルド時にヒエラルキー上で構造が移動するもの（追加衣装の一部など）にトレイルをつけたい場合は、未検証ですがMA Merge Armatureが使えると思います。
AvatarMenuCreator for MA
AvatarMenuCreator for Modular Avatar
MAベースでアバターのExMenu（デスクトップではRキー、VRではYボタン等で出てくる円形のメニュー）を簡単に作成できるようにする補助ツールです。
自分でAnimatorやParameterを設定してExMenuを実装できる方はそれでも問題ないです。
今回はトレイルのオンオフを実装するだけなので複雑なアニメーションは組みません。
ExMenuについては記事の趣旨とも外れてしまうのでこれ以上は割愛。
配布ページにある「インストール」の項目まで完了していること。
Gesture Manager
unityのプレイモード（画面上部の再生の三角形、またはCtrl+Pで起動）においてExMenuを操作できるスクリプト。
動作確認に使用します。
VCCから追加した後、ツールから追加するのを忘れずに。
それと必須ではないですが、この記事の冒頭の腕を振っている動作確認用のアニメーションも紹介しておきます。
実装・ハンズオン
目標
以下のような両手の位置に追従するトレイルを実装することを目標とします。
階層作成
アバターのヒエラルキー内に空のオブジェクトを作成する。
今回は名前を「HandTrail」とします。※指先の軌跡を実装するので命名としては本当はFingerTrailが正しいのは内緒「HandTrail」配下に軌跡をつけたい部位の数だけ、対応する空オブジェクトを作る。
今回は右手と左手に軌跡をつけるため「RightHand」と「LeftHand」を作成。
Bone Proxy設定
「RightHand」オブジェクトのインスペクターにて、コンポーネントを追加→MA Bone Proxyを選択。
インスペクター右上の鍵マークをクリックして「RightHand」オブジェクトのインスペクター表示を固定する。
ヒエラルキーからアバターのArmatureをたどり、軌跡をつけたい部位のボーンを特定する。
今回は右手の人差し指を基準とするため、Index Distal.Rを対象とします。
アバターのボーン構造によってこのあたりは変わるため適宜読み替えてください。MA Bone Proxyの対象ボーンに特定したボーンを設定する。
配置モードを「子として・ルートに配置」に変更→Transformに対象ボーンと同じ座標が代入される。
その後、配置モードを「子として・ワールド位置と向きを維持」に変更。
インスペクター右上の鍵マークをクリックして表示ロックを解除する。
以上を「LeftHand」についても同様に行う。対象ボーンのみ異なるはず。（Index Distal.L）
Trail Renderer設定
「RightHand」オブジェクトのインスペクターにて、コンポーネントを追加→Trail Rendererを選択。
幅、時間、最小頂点距離、色を設定する（以下参考値）
幅：(時間0.0で幅0.25)～(時間1.0で幅0) になるように設定
赤い線上で右クリックすることでキーを追加できる。
キーを右クリック→自動 とすることで直線でつながる。時間：1(秒)
最小頂点距離：0.01(m)
色：緑から白へのグラデーション。お好みで。
Material：（今は）Default-Particleを設定する。
※詳細な説明は後述、発展 を参照他は概ねデフォルトでOK
「LeftHand」ついても同様に行う。
「RightHand」オブジェクトのTrail Rendererコンポーネントを右クリック→「コンポーネントをコピー」
「LeftHand」オブジェクトのBone Proxyのタイトル部分の空白を右クリック→「新しいコンポーネントとして貼り付け」で同一の設定値で作成できる。
動作確認（軌跡の描画）
プレイモードに入る。
アバタールートのインスペクターからAnimatorのチェックを外す。
アバターのArmatureをたどり、肩回りのボーンを掴み、回転させる。
→軌跡が表示されれば正常。正常されない場合はBone Proxy設定を見直す。
プレイモードにおいて、軌跡をつけたい部位にTrail Rendererを設定したオブジェクト（「RightHand」「LeftHand」）が移動しているか確認する。
オンオフのExMenu作成
このままアップロードすると常に軌跡が出ます。
アバターごと変える運用ならそれでも問題ないですが、ExMenuでオンオフできると便利です。
（オン状態でアップロードしてしまうと、アバター切り替えの画面でも軌跡が見えるという弊害もある。）
「HandTrail」オブジェクト配下に空オブジェクトを追加。名前は「Trail On/Off」とする。
「Trail On/Off」にコンポーネントを追加からAvatar Toggle Menu Creatorコンポーネントを追加。
Avatar Toggle Menu Creatorコンポーネントを設定する。
オブジェクトを追加から「RightHand」と「LeftHand」を追加。
アイコンを設定する。（任意）
パラメーター初期値はチェックなし（表示しない設定）
下部の「RightHand」と「LeftHand」それぞれの設定にて「ON=表示」にチェックを入れる。
「Trail On/Off」にコンポーネントを追加からMenu Installerコンポーネントを追加。（↑の画像では追加忘れてました。）
ヒエラルキー上で「RightHand」と「LeftHand」のインスペクターから表示のチェックを外す。
動作確認（オンオフ）
プレイモードに入る。
アバタールートからAnimatorのチェックを外す。
アーマーチュアの肩回りのボーンを掴み、回転させる。
→デフォルトで軌跡は表示されない（オフ状態）。
アバタールートからAnimatorのチェックをつける。
ヒエラルキー上からGesture Managerを選択→追加した「Trail ON/OFF」がメニューにあることを確認。
「Trail ON/OFF」をクリックしてオン状態にする。
→ヒエラルキー上の「RightHand」と「LeftHand」が表示状態になる。
アバタールートからAnimatorのチェックを外す。
アーマーチュアの肩回りのボーンを掴み、回転させる。
→軌跡が表示される（オン状態）。
アップロード
基本的な実装はここまでとなります。
あとは通常の手順でVRC SDKよりアバターをアップロードしてvrchat内で動作確認を行って完了です。
お疲れさまでした。
発展：もっとくっきりとした軌跡にしたい
Trail Renderer設定のMaterialを変更することで描画のされ具合が変わります。
ハンズオンの中ではDefault-Particleを使いましたがこれは少々ぼんやりしています。
よってここではもっとくっきりしたMaterialを簡単に自作してみることにします。
（より豪華で複雑なものは既存製品を買うか、シェーダーの自作ということになるかと思います。）
「ハンズオンの軌跡と、この記事冒頭の動画の軌跡が違うじゃないか！」というのはこのMaterialが異なるためです。（詐欺回避）
Texture作成
まず適用させたいテクスチャを用意する必要があるので画像編集ソフトで作成します。
光らせたい部分は白、それ以外は透明。サイズは300*300程度。
名前は「TrailTexture」とします。（ファイル名はTrailPartical.png）
Material作成
unityの画面に戻り、Assets内でMaterialとTextureを置く場所を作成しておきます。
作成したTrailTextureファイルも配置しておいてください。
右クリックから作成→マテリアルから空のMaterialを作成。名前は「TrailPartical」とする。
シェーダーをMobile/Particles/Addictiveにする。
パーティクルテクスチャに作成した「TrailTexture」を指定する。
設定と動作確認
ハンズオン中のTrail Renderer設定についてマテリアルに設定した「Default-Particle」を、作成した「TrailPartical」に変更する。
その他の設定値も適宜調整して動作確認をする。
あとはアップロードすればvrc内のアバターに適用されます。
お疲れさまでした。
付録：使用アバターについて
私が普段使いしているアバター（のベース）はsep-neko-yaさんのシアンちゃんです。
サンプルにある衣装や髪型は以下になります。
シアンちゃんは真冬ちゃんと素体が同じなので真冬ちゃん対応の衣装やアクセサリーも比較的低コストで対応させることができます。
動作確認用のモーションは前提の部分でも掲載しましたが再掲しておきます。感謝。
（noteのgif動画の埋め込みの容量制限かなりきついですね・・・）
おわりに
ここまで読んでくださりありがとうございました。
VRChatは始めて半年ぐらいですが、謎解きワールドや雰囲気ワールドを主に巡っています。
アバター改変がとても楽しい。
今回の知見が誰かの役に立てば幸いです。
（有料部分にはコンテンツはありません。この記事を気に入っていただけたなら、ご支援いただければ幸いです。）
終
2024/09/14
written by shift
ここから先は
¥ 100
Amazonギフトカード5,000円分が当たる
この記事が気に入ったらチップで応援してみませんか？