[Unity]VisualEffectGraphを使ってひこうき雲をつくる(追記)

## はじめに
ジェットエンジンから尾を引く雲を作りたい
はじめはVFXgraphのStrip機能を使えばすぐできるだろうと考えたがちょっとコツがいることがわかった

## ひこうき雲とはどんなもの？
* ジェットエンジンから吹き出している
    * 座標Pに追随するエミッタを持つトレイル
    * エミッタから放出されるトレイルはマイナスベクトルのVelocityで移動する
* 飛行機の軌跡を描く
    * トレイルを構成するパーティクルはワールド座標に追従する

## まずはStripのテンプレートを使ってみる
<img width="256" alt="node" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152366/431bd17b-8940-84b5-f434-8ed069981126.png"><img width="256" alt="fx" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152366/3c697b63-027b-11fe-94e6-c76344cfec70.png">

テンプレートをそのまま使うとこんな感じ↑
それをひこうき雲風に調整するとこうなる↓
<img width="256" alt="fx" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152366/7b2eea65-312d-8aa8-de1c-bf7ca62c4c05.png"><img width="256" alt="fx" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152366/9d2df882-de88-5043-2efc-00b175452c3b.png">

見た目はそれっぽくなった
ポイントは...
* Set Velocity でZ方向にトレイルを伸ばす
* Set Size over Life でライフタイムに合わせてスケールするアトリビュートを作り、Strip側のパーティクルにInherit Source Size で継承する

早速動かしてみると↓
![202206_HDRP---20220623_VFXtest---Windows,-Mac,-Linux---Unity-2021.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152366/ad46486d-2b55-9f91-c9eb-54202abacd28.gif)
飛行機のローカル座標に追従してしまった
ワールド座標に追従するようにしなくてはいけない
ここをクリックするとローカル座標とワールド座標を切り替えることができる
<img width="400" alt="fx" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152366/4f707aec-a403-4f74-c563-c1cfc99f5db4.png">

切り替えてから動かしてみると...
![202206_HDRP---20220623_VFXtest---Windows,-Mac,-Linux---Unity-2021.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152366/e9dd66a7-b5db-4ef0-df26-b3962c79007b.gif)
ワールドにはなったけれどコレジャナイ感
Stripのテンプレートをそのままカスタマイズすると、普通にSpawnされたパーティクルからさらにパーティクルを飛ばしてトレイルするのでうまくいかない。
坂野サーカス的なミサイル演出を作るにはこれでいいかもしれないが、今回やりたいのはゲームオブジェクトの移動に追従させたいのでStripのテンプレートをもとにくんでいくのは向いていないようだ。



## Spawnから直接Stripのシステムにつなげる
SpawnしたパーティクルをもとにEventを発生させStripを生成する方法はどうやらひと手間多そうだということがわかった。
であればSpawnしたものを直接Stripのシステムに流し込んでトレイルさせればうまくいくはずだ。

このようにSpawnに直接つなぐシンプルなシステムに組み変えてみた↓

<img width="400" alt="fx" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152366/ab3d7923-a8b4-1d1b-6745-5aaf933b8047.png">



![202206_HDRP---20220623_VFXtest---Windows,-Mac,-Linux---Unity-2021.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152366/b95b2480-1f8a-1498-a777-bea9ab2f26e5.gif)

うまくいった！

## おわりに
結局とてもシンプルな方法でできた。
移動する物体にトレイルさせることはよくある表現だ。
でも意外とVFXgraphでのやりかたが見つからず苦労した。

## (追記)　別のやり方
VFXgraphのStripテンプレートをベースにして同じことができることがわかった。
組み方は以下↓
<img width="400" alt="fx" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152366/60396e2f-3149-6b91-d769-85259f5a3765.png">
* "Spawn"ブロックのSingle Burstを初期ポジションにする
* LifeTimeを設定せず寿命を無限にする
* Initialize ParticleとUpdate ParticleのSpaceをWorldに設定する
* Intialize Particle\Capacity\BoundsのSpaceをLocalに設定する
* UpdateParticle\SetPositionのSpaceをLocalに設定する

![001.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152366/ba35312f-50af-f9cd-e946-ff033f837c66.gif)
直接Particle Stripにつなぐ方法と同じ結果になった

しかもこちらのほうがVFXgraphの本来のやり方に基づいており、より拡張性が高い
例えば以下のような組み方をしてみる↓

<img width="400" alt="fx" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152366/b634a6b7-1a72-ee7d-0904-bf82d42bbf63.png">

先程のシステムに少し手を加えた
* Single BurstのCountを20にする
* UpdateのSet Positionにランダムな値を入れる

![testing.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152366/148eb4d4-af35-2137-6f97-7fb2bfb00857.gif)

同時に複数のトレイルが同じポジションを起点に発生している
起点のポジションをパーティクルで指定しているから可能な表現だ
前述の方法ではこのような表現が難しい

このVFXを使って道路を走る自動車のラインのような表現を試した
<blockquote class="twitter-tweet"><p lang="qme" dir="ltr"><a href="https://twitter.com/hashtag/unity?src=hash&amp;ref_src=twsrc%5Etfw">#unity</a> <a href="https://twitter.com/hashtag/urp?src=hash&amp;ref_src=twsrc%5Etfw">#urp</a> <a href="https://twitter.com/hashtag/vfxgraph?src=hash&amp;ref_src=twsrc%5Etfw">#vfxgraph</a> <a href="https://t.co/IwjedXIUy1">pic.twitter.com/IwjedXIUy1</a></p>&mdash; ツミキルーム\Takashi Kawamura (@tsumiki_room) <a href="https://twitter.com/tsumiki_room/status/1561217775116615681?ref_src=twsrc%5Etfw">August 21, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## おわりに(再)
前述した組み方も間違えではないが、ストレートではないし拡張性に乏しい
オリジナルでより良く的確な表現を効率的に探るためにも後述した方法をおすすめしたい