【VFX Graph】Point Cacheを利用して形状に添わせたエフェクトを作成する

# 概要
メッシュデータから `Point Chache（ポイントキャッシュ）` を作成し、頂点データから `VFXGraph` のエフェクトを作成するサンプルです。

最終的に球に沿ってパーティクルを発生させて以下のような爆破効果を作ります。

[![output.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142886/a7535add-d882-5b6f-d852-61e3ba9e047c.gif)](https://youtu.be/a8eXtCxAPhQ)

VFXGraphの初期配置に関しては、以下記事を参照してください。

**■ Unity 2019.4 で VFXGraph を使ってみる (HDRP)**
https://qiita.com/beckyJPN/items/31274d76059b373f2941

# 環境
OS：Windows 10
Unity：2019.4.0f1

# メッシュからPoint Chacheの作成
まずは `Point Chache` を作成します。
以前は別途ツールが必要だったらしいですが、現在は標準ツールとして組み込まれているようです。

- `Windowメニュー > Visual Effects > Utilities > Point Cache Bake Tool`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142886/649507ef-74cc-aa9e-7c23-923f609eaa6b.png)

上記を選択すると、 `Point Chache` を作成するツールが表示されます。
対象とするメッシュを選択したいので `Mesh` の丸い部分をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142886/8fe49982-1dcd-c53f-68d4-0898f75a04bd.png)

今回は、デフォルトで用意されている `Sphere` を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142886/b002b433-8e45-d0ab-4337-3b66157cfb97.png)

`Save to pCache file...` ボタンをクリックするとファイルを出力できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142886/7b33f65d-f8bf-d4d1-ecdb-74210cbc0cd6.png)

適当に名前を付けて保存してください。
今回の例では `Sphere.pcache` としました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142886/3645b603-e777-9870-c358-7afc517391b5.png)

保存を押すと、Assetにpcacheファイルが追加されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142886/1f9d4dcc-0733-351f-baa8-f004a50caa82.png)

# VFXGraphの設定
次はVFXGraphに出力したpcacheファイルを適用していきます。
まず、何もない部分で右クリックでメニューを表示し、 `Create Node` を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142886/04dc6ad5-0c8a-df17-3244-868a9cf5e986.png)

Nodeの追加ウィンドウが開くので、検索バーに `point` と入力。
Point Cache が絞り込まれると思うので選択して作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142886/6297d4cc-0c1f-853a-d85c-f85ba98dc5e4.png)

作成すると以下のようなノードが作成されます。
こちらに先ほど作成した `Point Chache` のアセットを適用するため、丸い部分をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142886/5d86208f-4860-76e2-80b9-52cc5868b0ff.png)

先程の `Sphere` を選択しましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142886/4d8d6a33-6fd5-906f-00e5-d8924eb8da47.png)

次に、Initialize部分にPointChacheをもとに位置情報を設定できる `Set Position from Map` を追加します。
`Initialize Particle` の下の方で右クリックメニューを表示。
`Create Block` を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142886/129f8bfc-8afc-2a65-d205-1aa225ac7a1a.png)

Block追加のメニューが表示されるので `setpositionfrom` と検索バーに入力し、 `Set Position from Map` を選択しましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142886/409ecf3f-b54c-4baa-ca12-8aa34a81d8c3.png)

Blockが追加されたら、先程作成した `Point Cache` の `AttributeMap：position` と `Set Position from Map` の `Attribute Map` を接続します。

これで、パーティクルの位置がメッシュに沿って発生するようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142886/1366f330-fd32-4be4-8de8-7d067e2ff0f5.png)

デフォルトの設定だと、 `Velocity` の効果により湯気のように上に登っていく状態となるので、 `Set Velocity Random` のチェックを外して無効化します。
ブロックごと削除してしまっても構いません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142886/0bf8b9d4-96a8-a77f-b5ca-3e9c9a30dda3.png)

この状態でシーンを見てみると、パーティクルが球に沿って発生している状態となっています。
ただし、デフォルトのテクスチャだと様子が分かりづらいので変更しましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142886/786f6328-2f4b-3602-6035-e03a75d3d15e.png)

`Output Particle Quad` の `Main Texture` を変更します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142886/a3e4e809-780a-05c0-a538-bc39fcbbdc39.png)

今回は `Default-Particle` を使用します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142886/f01b842e-fa16-21a7-5ef4-3823b0359f28.png)

もう一度シーンを見てみると、さっきよりはちょっと状況がわかりやすくなったかと思います。
ただ、数が少なすぎて球体感がよくわからないので、パーティクルの数を増やしましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142886/f3012c48-d76f-f949-f668-9002a5719cb2.png)

`Constant Spawn Rate` の `Rate` を `100` 、 `Initialize Particle` の `Capacity` を `1000` としました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142886/dac35300-9072-1649-9b24-ce296d464d9c.png)

これで、だいぶ球体感が出てきました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142886/963fc161-023d-6737-593c-e30d0cd494a9.png)

更に爆発感を出すためカラーのクリックします。
`Set Color over Life` の `Color` を調整しましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142886/c0b248df-9d89-f1cd-c92c-216f72cef5e3.png)

`HDR Gradient Editor` が表示されるので、まず左下の調節バーを選択して、 `HDR` と書かれた部分をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142886/9f30bfb5-ddc8-cd1e-38e6-281fb9264bea.png)

`HDR Color` 設定ウィンドウが表示されます。
以下のように設定しました。
`R:255 G:0 B:0` `Intensity:3`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142886/983b89c7-ae1a-b5bb-7b68-9312be09ee05.png)

次に、右下の調節バーを選択肢、同様に `HDR` をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142886/b60d093f-692b-8582-38aa-a70689708ee8.png)

こちらは以下のように設定しました。
`R:255 G:255 B:0` `Intensity:1`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142886/2ba67498-889e-4908-0696-aa49e4cc0ce1.png)

以上の設定で、爆破っぽいエフェクトが作成できました。
[![output.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142886/a7535add-d882-5b6f-d852-61e3ba9e047c.gif)](https://youtu.be/a8eXtCxAPhQ)


# おわりに
今回の記事は、[VFXGraphの設定記事](https://qiita.com/beckyJPN/items/31274d76059b373f2941)でも参照した、以下動画の最初の部分を参考に記事としたものです。
動画ではBlenderのモデルからPoint Cacheを作成されています。

以下動画も合わせて確認すると、VFXGraphの導入が捗るのではないかと思いますので、ぜひ一度視聴される事をおすすめします！

**■ VFX Graph でなんか作る（4月16日号） - Unityステーション**
https://youtu.be/6Ff7S4ocNGs?t=1340
[![VFX Graph でなんか作る（4月16日号） - Unityステーション](https://img.youtube.com/vi/6Ff7S4ocNGs/hqdefault.jpg)](https://youtu.be/6Ff7S4ocNGs?t=1340)