【VRC】ゼロから始めるパーティクル　アバター用アクセサリーを作る

この記事は[VRChat Advent Calender 2019](https://adventar.org/calendars/3950)11日目の記事です。
昨日はれにうむさんの[VRChatで肘トラッキングに挑戦した話](https://note.com/rhenium/n/n40e2d3b144d1)でした

# 目的
パーティクルを触ったことがない人向けに、パラメータをひとつずつ触りながら画像多めで説明をしていきます。
最終ゴールはアバターのアクセサリーを作ること。
一発ネタ的なパーティクルの使い方ではなく、普段使いとして現実ではできない動いて光るアクセサリーを作ります。

Quest対応方法も記載。

最終目標はこんな感じ
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">画質テスト<br>こんな感じかなぁ <a href="https://t.co/ThXFzOIuFw">pic.twitter.com/ThXFzOIuFw</a></p>&mdash; なまのなまこ@Vket4技術チーム (@Iiron_Lung) <a href="https://twitter.com/Iiron_Lung/status/1190881784809918464?ref_src=twsrc%5Etfw">November 3, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

今回は6ステップでこの状態までもっていきます。
[1. Particle Systemを作る](#1-particle-systemを作る)
[2. 射出方向を変える](#2-射出方向を変える)
[3. サイズの調整](#3-サイズの調整)
[4. 出ている範囲の設定](#4-出ている範囲の設定)
[5. パーティクルの数の設定](#5-パーティクルの数の設定)
[6. 色を変える](#6-色を変える)


# ParticleSystemとは？
粒子を描写するエフェクトです。

非常にパラメーターが多く、できることも多いですがとっつきにくい原因ですね。
Unityではこんな設定画面になります。
![1パーティクル設定欄.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/495102/08aa8690-3a9e-c733-193b-025a3f053dd7.png)

見ただけでちょっと抵抗感があるかもしれないですが実は必要なものは少なく、関係ないところは触らず気になったものだけ調べれば十分です。
全部わかる人はなかなかいないはず、、

# 準備
今回はクロイちゃんQを使って説明をします。
https://kuroibaseband.booth.pm/items/1349106

VRCSDKをいれて、prefabフォルダのkQ_2(VR)をシーンに投入したところからスタート

見やすくするために
GismosのSelectOutLineを切る
　　→パーティクルに表示される枠が消えます
HierarcyのDirecrional Lightをオフ
　　→明るいところだとパーティクルが見えにくいので 
にしておきます。

![02初期画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/495102/d26f969f-2ba5-cb9b-4931-155e93ce6109.png)

Unityの画面はこんな感じ。

# 導入
実際にパーティクルを触って目標へ近づけていきます。
完成時のパラメータは下に画像を載せているので、どこかが違うとなったら[こちら](#完成図)を確認してみてください。

#### 1. Particle Systemを作る
まずはParticleを作りましょう。

キューブなどを作る要領でパーティクルをシーンに置きます。
今回は頭につけたいのでArmatureを開いて行ってHeadのところで右クリック。
Effectsの中からParticleSystemを選びます。
![03パーティクルを作る.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/495102/73dbae19-c5a2-29a5-916f-0dd3399c6f19.png)

クリックするとこんな感じになるはず。
シーンに白いぼわぼわが飛び始めて、右下にボックスが出てきました。
ボックスではポーズ、リスタート、ストップなどパーティクルの操作ができます。
![04パーティクルができた.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/495102/7565409a-2a29-c812-69c3-5773a2c61e09.png)

完成図とはかなり遠いものが出てきましたが、ここから少しずつ近づけていきます。
迫力のあるパーティクルライブも幻想的なワールド演出もみんなここから始まるのです。多分。


とりあえず場所を調整します。
オブジェクトの位置は首になっているはずなので、これを耳飾りの少し上へ移動。
パーティクルを下に向けるために、RotationのXを90にしておきます。
ScaleはいったんXYZすべて0.1を入れます。

![05スケール調整.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/495102/51042917-f4cc-ef17-3ce2-4b7beaef3f26.png)


※パーティクルはHierarchyで選択されているときだけ動きます。
止まってしまったり出なくなった場合、Hierarchyでクリックすると動き出します。

#### 2. 射出方向を変える
拡散するように出ているので、まっすぐ飛ぶようにします。

まずはパーティクルのステータスから「Shape」と書いてある部分をクリックしてタブを開きましょう。
設定項目が増えてSceneには青い線の表示が出ます。これがパーティクルの飛ぶ方向です。
![06Shapeをクリック.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/495102/92b8f56f-96e4-a812-2758-86ac920541a7.png)

ShapeからSphereやCubeなど選ぶとパーティクルの射出され方が変わります。Meshと名前についたものはちょっと特殊なので使うなら調べたほうがいいかもしれません。
今回はこの項目はConeのまま使います。

パラメーターは2か所

- Angle
コーンの広がり角度を調整します。
今回は真下に出したいので0に設定。

- Radius
底面の半径を調整します。
耳飾りに合わせて0.5に設定。

![07shapeを変更.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/495102/1b822685-86b8-1920-9c90-3c2e9569832c.png)

真下にめっちゃ出ててどどどどって感じですね

#### 3. サイズの調整
粒子の大きさを変えるために2か所変更します。

- RendererタブのMax ParticleSize
まずは一番下のタブを開いてこの項目を変えます
。
今は近づいたときに粒子が小さく表示されてしうので100に設定。これでどの距離で見てもいい感じに見えるようになります。
[→解説](#max-particlesize)

- StartSize
粒子の大きさを変更します。
とりあえず0.5とかに。

![08sizeを変える.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/495102/3fde9cf2-7017-bb73-acf4-ed2c652455b8.png)

ここまでで半分です。
無造作にばらまいていた最初から少しアクセサリーらしくなりました。

#### 4. 出ている範囲の設定
パーティクルが足元まで伸びている状態から脱却
パーティクルの範囲をここからここまでと決めるのではなく、動く「速さ」と消えるまでの「時間」を設定することでパーティクルの出ている区間を決めます。時間×速さ=距離ですね。

- Start Speed
まずは速さを決めます。少し遅いぐらいのほうが見やすい気がするので0.5に。パーティクルが詰まってめっちゃ白くなっちゃいますがあとで調整します。

- Start Lifetime 
パーティクルの寿命を設定します。イヤリングの下部分より少し下ぐらいで消えるように2.5に設定。これでパーティクルの表示される範囲が決定しました。

![09範囲を決める.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/495102/c0d9fcd7-fd44-72c7-f4b5-c77cf4b8cbe8.png)

クロイチャンかわいいですね

#### 5. パーティクルの数の設定
4.の時に速度を変えた影響で密度が上がってしまいました。パーティクルが生成される量を変えることでもうちょっとおとなしくします。

- EmissionタブのRateOverTime  
1秒に何個パーティクルが生成されるかを決めます。
初期設定は10個/秒なのでこれを減らして好きな密度にしましょう。私は3に設定。

![10数を変える.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/495102/8c1ed137-11bd-1207-acfc-f65aefce7888.png)

もうあとちょっと

#### 6. 色を変える
最後にパーティクルの色を変えます。

- StartColor  
好きな色に設定しましょう。
クリックするとカラーパレットが開きます。
クロイチャンの目の色に近い青にしてみました。

![11色を付ける.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/495102/9ae3fe8e-a538-8b54-c5d2-9f808ff171ee.png)


# Quest対応
仕上げにQuestのアバター対応をさせます。
必要ないよーっていう方は[こちら](#完成)
Questでアバターにパーティクルを入れる際に気を付けるのは2点

- シェーダー
- 最大描写数

です。

- シェーダー  

アバターなのでQuest対応シェーダーを使わないとアップロードできません。

適当なフォルダにマテリアルを作成。シェーダーを「VRChat/Mobile/Particle/Additive」に設定します。Quest対応シェーダーで透過表現ができるのはこの階層に入っている二つだけのはず。
Additiveが加算。Multiplyが乗算らしいんですがあんまりわかっていない。。私は明るくなるのと暗くなるので覚えています。
![12シェーダーを変える.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/495102/42910ce4-3981-2da5-32b7-7cb6ed4edfd0.png)


マテリアルを変えたらテクスチャを選びます。たぶんDefaultParticleが最初から入っているはずなのでこれを選べば元と同じ見た目になります。
自分の好きなテクスチャを当てはめることもできます。Additiveのシェーダーを選んだ場合には黒色に近いほど透明で表示されます。
![13テクスチャを選ぶ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/495102/d15f7aad-2f44-21fe-a109-0c835121bb1d.png)


RenderタブのMaterialに先ほど作ったマテリアルをドラッグドロップします。

![14マテリアル切り替え.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/495102/2df6ffdc-ece0-cc65-10df-86f5a0ea5342.png)



- 最大描写数  

MaxParticlesの欄が画面に表示される最大描写数です。アバター内の合計で200以下であることがQuestでVerryPoorにならない条件です。  
基本的には
寿命(StartLifetime)×発生数(RateOverTime)

が画面に表示されている個数になると思います。今回ならそんなにたくさんは出していないので余裕のはず。  
2.5秒×3個/秒で7.5ですね。余裕をもって10ぐらいに設定しておきます。

![15maxParticlesを変える.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/495102/8a0897e6-2bfc-4e3b-1b8c-c7c5ba0f3379.png)


ちなみにアバターランクについてですが
パーティクルを入れた時点でPoor
パーティクルを3つ以上入れる、もしくはMaxParticlesの合計が200を超える場合VerryPoor
となります。

# 完成
以上で目標に上げていたような設定は完了です。
パラメーターにして10個ほど触りました。多かったでしょうか？とりあえずたくさんある中のいくつかを触るだけでも作れるよ、ということを伝えられていればいいなと思います。

パーティクルをもっと触りたいなと思ったら、BoothやUnityのアセットストアで他の人が作ったものを見てパラメーターを読むのがいいと思います。
かっこいいパーティクルを触って、どこのパラメーターがかっこいい要素を作り出しているか読み解いていくと自分でも作れるようになるはず。

フリーアセットで私のおすすめを置いておきます。
そのまま使うだけでもいい感じです。
・[Cartoon FX Free](https://assetstore.unity.com/packages/vfx/particles/cartoon-fx-free-109565)
かわいいパーティクル　テクスチャもたくさん入っているので入れておくといろいろな表現ができます
・[Fantasy Effect](https://assetstore.unity.com/packages/vfx/particles/fantasy-effect-50310)
魔法のテンプレートがたくさん
・[Particle Ribbon](https://assetstore.unity.com/packages/vfx/particles/spells/particle-ribbon-42866)
粒子だけじゃなくてリボンのような表現もできます。中身はちょっと難しいかもしれない。



# 応用(おまけ)
3つほど応用として、おすすめ設定を紹介します。

##### 1.ランダム設定  

パラメータはほとんどがランダム設定できるようになっています。
右側の▼印をクリックしてRondom Betoween Two Constantsを選択するとボックスが二つに増えます。
![18ランダム設定.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/495102/01233cea-e24a-5662-d732-b22dffd5e9f3.png)

例えばStartSizeを0.8から0.05の間のランダムにするとこんな感じになります。  
![19ランダム結果.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/495102/2c382257-313a-4ac2-463d-f8494e353761.png)  
これはエモい。  
単調さがなくなると印象が大きく変わるので他のパラメータも触ってみてください。

##### 2.ライフタイム設定
タブに~over LifeTimeとついたものがあります。
これはパーティクルが発生してから消えるまでの間に値を変化させられるパラメータです。
Size over LifeTimeを開いてみると赤い線が出てきます。
画面下のほうにグラフが表示されるはず。なかったら引っ張り出したら出てくるかも。
![20ライフタイム.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/495102/b6b0e3d2-5e24-649c-1c2c-7617a8b555e6.png)

この状態では出てきてから消えるまでサイズがだんだん大きくなるようになっています。

右クリックからAdd Keyしたりしてこんな風にしてやるとふわっと消えてくれるようになります。
儚げとても良いです。
![21ライフタイム設定.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/495102/c451b441-ec32-29d4-c9cb-17d6369d60a7.png)


##### 3. ワールド基準に変更
いまのパーティクルは射出点が動くとついてきます。
粒子をふわっと残しながら歩きたいとか、銃をパーティクルで撃ちたいとかの場合これでは違和感が出てしまうので、パーティクルをワールド基準で出すように変更しましょう。

変えるところは一か所だけ
Simulation SpaceをLocalからWorldに変えます。
この状態でParticleのオブジェクトを動かすとついてこなくなっています。

![22ワールドスペース.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/495102/e781935b-ce97-ba6d-059e-c8eb914f0036.png)

【2023/5/4修正】
VRCのアップデートでVRC_IK Followerが不要になったので以下の手順は削除しました。
試したところ、ConstraintもいらないようだったのでSimulation Spaceの変更だけで大丈夫なようです。もし足元から出てしまうようなことがあれば記事を修正するので教えてください
~~Unity上ではこれでいいんですが、VRCに持っていくと変なところから出るようになってしまうので、もうひと手順必要です。~~
~~Particleのあった場所にGameObjectを作り、VRC_IK Followerを付けたあとに今まで触っていたパーティクルをそのObjectの子に移動させます。~~
~~これでVRCでもきちんと表示されるようになりました。~~

![23IKFollower.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/495102/6c43257d-0c0b-4401-c93b-83feb13f72a7.png)

~~これについては[ケーキさんの記事](https://keiki002.com/vr/vrchat-wparticle/)が丁寧に解説されているので、分からなければ読んでみてください。~~

~~なんでVRC_IK Followerをつけると直るのかは永遠の謎です。~~

# 解説
### Max ParticleSize
パーティクルは大量の粒子を動かし、炎や煙、水のような流体をシミュレーションするのにも使います。その場合、近づいたときに粒が見えてしまわないようにこの値を小さく設定しておきます。
今回は粒をアクセサリーとして見るので小さくなってしまわないように設定しました。

# 完成図
![16完成図1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/495102/1b096ffa-d6f0-71a9-dbac-f6e1f151ad98.png)
![17完成図2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/495102/a6a68881-7f2c-8766-aa48-5e485ab15162.png)