VFXGraphで爆発風エフェクトを作ってみた

# 前書き
一昔前のロボットたちが遠目でいっぱい爆発するときのエフェクトを作ってみました。
![](https://user-images.githubusercontent.com/10098082/128212844-aeedffcb-9b72-4747-83b9-a98b60f55279.png)


サンプルはGitHubに上げています。
https://github.com/eorfeorf/VFXGraphTest


# 環境
Unity 2020.3.14f1
High Definition RP 10.5.1


# 実装方法
## VFX Graphでパーティクルを生成
Projectビューを右クリック -> `Create` -> `Vidual Effects` -> `Visual Effect Graph` でグラフを生成できます。
最終的なVFX Graphの全体像です。(画像がデカいです)
![](https://cdn-ak.f.st-hatena.com/images/fotolife/E/EorF/20210821/20210821092130.png)

### Spawn
`ConstantSpawnRate`ブロックを使用し、生成量を外部から変えられるようにしています。
![](https://cdn-ak.f.st-hatena.com/images/fotolife/E/EorF/20210821/20210821092404.png)


### Initialize Particle
パーティクル数のキャパシティ、座標、生存時間、スケールを設定しています。
スケールはすべて同じ大きさだと味がなかったので0.5~1.0倍の割合でバラつかせるようにしてます。
![](https://cdn-ak.f.st-hatena.com/images/fotolife/E/EorF/20210821/20210821092701.png)


### Update Particle
`Set Color over Life`ブロックを使用し、生成から破棄までの色の変化を設定しています。
![](https://cdn-ak.f.st-hatena.com/images/fotolife/E/EorF/20210821/20210821093113.png)

`Set Color over Life`ブロックの中はHDRで、アルファをなくし、白→黄→赤に変化させています。
![](https://cdn-ak.f.st-hatena.com/images/fotolife/E/EorF/20210821/20210821094009.png)


### Output Particle Quad
`ShaderGraph`に`VFX Shader Graph`を設定することで独自のシェーダーを適用できます。

`BlendMode`は`Additive`に設定していますが、見栄えが良ければ何でも良いです。
`Tex0`は円形のテクスチャを設定しています。くり抜かれる前の円になります。
`Color`は`Get Attribute: color (Current)`ノードを使うことで、`VFXGraph`内で設定した色を`ShaderGraph`に渡すことができます。
`Threshold`は0~1の間でくり抜きを制御しています。1になるほどくり抜きが大きくなり、円→三日月→消滅のようになります。
`Center Adjust`はくり抜きを行う位置を設定します。X,Y方向をランダムにすることにより、三日月状で消えたりします。 [^1]
`Smooth Edge`はくり抜きの速度に使っているSmoothstepのEdge1のパラメータになります。
![](https://cdn-ak.f.st-hatena.com/images/fotolife/E/EorF/20210821/20210821100955.png)


## ShaderGraphで円をくり抜く
Projectビューを右クリック -> `Create `-> `Shader` -> `VFX Shader Graph`でグラフを生成できます。
最終的なVFX Shader Graphの全体像です。
![](https://cdn-ak.f.st-hatena.com/images/fotolife/E/EorF/20210821/20210821215148.png)

### くり抜く円を作る
`distance(uv, float2(0.5, 0.5))`でテクスチャの幅いっぱいの円が表現ができるので、それをShaderGraphで書きました。
`CenterAdjust`は円の中心をずらすパラメータです。
![](https://cdn-ak.f.st-hatena.com/images/fotolife/E/EorF/20210821/20210821224755.png)

`Step`ノードを使うことで円の大きさを変えることができます。
また、`Smoothstep`ノードを使い、円を大きくするスピードを制御しています。
![](https://cdn-ak.f.st-hatena.com/images/fotolife/E/EorF/20210821/20210821233723.png)


`Step`ノードの値は内側が1なので`One Minus`ノードを使用し、出力を反転することで`Alpha`値が`0`の円にします。
そして、円形のテクスチャをサンプルし、反転した値とかけることでくり抜きを行います。
![](https://cdn-ak.f.st-hatena.com/images/fotolife/E/EorF/20210822/20210822000021.png)

これで円がくり抜かれる、爆風のようなアニメーションが出来上がりました。
![](https://cdn-ak.f.st-hatena.com/images/fotolife/E/EorF/20210822/20210822014339.gif)


## 色味を変更する
出来上がったものを見ても少し味気ないように思います。爆発したらもう少し光ってほしいです。
そういうことで`PostProcessing`を使って加工します。

### ブルームを使う
Hierarchyビューを右クリック -> `Volume`-> `Global Volume`を選択するとオブジェクトが生成されます
生成されたオブジェクトに`Volume`コンポーネントがあり、`Profile`という項目に`NEW`と書かれたボタンがあるので押します。
すると`Add Override`と書かれたボタンが出現します。
![](https://cdn-ak.f.st-hatena.com/images/fotolife/E/EorF/20210822/20210822012929.png)

`Add Override`を押し、`Post-processing` -> `Bloom`を選択します。
`Bloom`の項目が出るので`Intensity`を`0.4`前後に設定します。
![](https://cdn-ak.f.st-hatena.com/images/fotolife/E/EorF/20210822/20210822013446.png)

すると、いい感じに光るようになりました。
![](https://cdn-ak.f.st-hatena.com/images/fotolife/E/EorF/20210822/20210822014857.gif)



# 最後に
`VFX Graph`と`VFX Shader Graph`を使うことで幅広い表現ができるパーティクルが作られました。


# 参考文献
https://nn-hokuson.hatenablog.com/entry/2018/05/24/195206#%E5%86%86%E3%82%92%E6%8F%8F%E3%81%8F


# スペシャルサンクス
UGDGの[かもそばさん](https://twitter.com/rn49rn49)にVFX Graphで現在の色を取得するノードを教えていただきました。
ありがとうございます！


[^1]: CenterAdjustがx:0.0,y:0.0になることもあるので必ず三日月形になるわけではないです