Unity 2019.4 で VFX Graph を使ってみる (HDRP)

# 概要
先日Unityステーションで高橋啓治郎さんが `VFX Graph (Visual Effect Graph)`使って色々と面白そうな事をやっていました。

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

そこで、自分でも試してみようと思ったのですが、そもそも `VFX Graph` をどうやってセットアップすればよいのかがわかりませんでした。

以下記事でtan-yさんが手順まとめてくださってたのですが、バージョンが上がって手続きが異なる部分があったので、今回は以下の記事を参考に先日 `LTS` として公開されたばかりの `Unity (2019.4)` で `VFX Graph` を表示させ、`Post-Effect` の `Bloom` を適用するまでを解説します。

**■ Visual Effect Graph 入門**
https://qiita.com/tan-y/items/cd6fc58674d6f0c54d0b

# 環境
OS：Windows 10
Unity：2019.4.0f1
## パッケージ
Visual Effect Graph：7.3.1
High Definition RP：7.3.1

# 全体の流れ
## （１）VFX Graphの表示
まずは、単に `VFX Graph` を表示するだけであれば、 `Render Pipeline` の設定が不要なので、まずはそこまでの説明です。

- 3Dの素の環境を作成
- VFXパッケージのインストール
- VFXのAsset及びGameObjectのセットアップ
- VFX Graph表示


## （２）Bloom効果を適用
次に、 `Bloom` の効果を適用させます。
この為には `HDRP (High Definition Render Pipeline)` パッケージをインストールする必要があります。

- HDRPパッケージのインストール
- HDRPのセットアップ
- Global Volumeの追加
- Bloomの適用

# （１）VFXGraphの表示
それでは、まずVFXGraphの表示までの手順を解説します。

## 3Dのプロジェクト作成
まずは、プロジェクトの新規作成を `3D` を選択して行ってください。 
`High Definition RP` を選択すると、既に必要なプラグインが適用済みとなりますが、サンプルオブジェクトなど必要ないファイルも大量にセットアップされて扱いづらいので、今回は `3D` からセットアップしていきます。
![001.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142886/f0350b36-2796-4a4f-8f1a-0cfcc24b24bf.png)

## パッケージのインストール
次に、パッケージをインストールしていきます。
パッケージは、パッケージマネージャーを使って導入できます。

- `Windowメニュー > Package Manager` を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142886/188b8683-a980-4ba5-63a2-484720880ab2.png)

パッケージマネージャーが開いたら、右上の検索ボックスに `visual` と入力してください。
そうすると、パッケージが絞り込まれるので、 `Visual Effect Graph` を選択して
右下の `Install` をクリックします。
これでパッケージがインストールされます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142886/31cf06b3-31d5-8c41-df11-b28cdd17821e.png)

## VFXのAsset追加

パッケージのインストールが完了したら、 `VFX` に関連する `Asset` 及び、 `GameObject` の作成ができるようになります。
まずは、Assetの作成から。

- `Assetメニュー > Create > Visual Effects > Visual Effect Graph` を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142886/49690165-4548-134b-b023-b67f069eb6e7.png)

そうすると、Assets配下に `New VFX` と `VFXDefaultResources` が追加されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142886/f031201f-e406-9871-6093-d5769a9cf1ff.png)

`VFX Graph` 自体は `New VFX` をダブルクリックすることで既に調整が可能な状態です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142886/c04b08aa-677b-3e04-ea4a-8e6c0116f3b6.png)

## VFXのGameObject追加
`VFX Graph` の編集は可能となりましたが、シーン 上に表示ができていない状態なので、 `VFX` を適用させるための`GameObject` を作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142886/53b31daf-4190-fcd8-6383-a1345a281a75.png)

これで、シーン上に `VFX` のオブジェクトが `Visual Effect` として作成されます。
このオブジェクトに先ほど作成した `VFX` の `Asset` を適用します。
`Asset Template` の横の丸をクリックしてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142886/c72983cc-ee24-fb56-5078-cea79091435f.png)

すると、VFXのAsset選択ウィンドウが開くので、先ほど作成した `New VFX` を選択しましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142886/5c224c48-053e-486c-7192-82c33e778aed.png)

これで、シーン上に `VFX` の表示がなされました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142886/b46a3f8e-1f4a-cb50-ec6c-50ab7337c16e.png)

`VFX Graph` の具体的な調整については、先に参照した [Visual Effect Graph 入門](https://qiita.com/tan-y/items/cd6fc58674d6f0c54d0b) に詳しいので、こちらを参照してみてください。
項目名称などが若干変わっていて一部読み替えが必要にはなりますが、迷う程の変化ではないかと思います。

# （２）Bloom効果を適用
次に `Bloom` 効果を適用します。
こちらは `VFX` ではなく、 `Post Effect` の領域となる為、別途 `HDRP` パッケージのインストールが必要となります。

## パッケージのインストール
パッケージマネージャーから `High` と検索し `High Definition RP` をインストールします。
ちなみに、パッケージの規模が大きいのか、インストールにはちょっと時間がかかりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142886/d3d2f351-496b-7a9b-be41-162a6efe6b64.png)

インストールが完了すると `HD Render Pipeline Wizard` が開きました。
色々と警告が出ているので、とりあえず `Fix All` しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142886/fd68a5d5-712e-fc93-8f94-db44354c7918.png)

更に、二回確認ダイアログが表示されました。
どちらも `Create One` で進めました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142886/155113a9-708b-0e18-3fdf-de9724ca3e1e.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142886/9fa3a112-640b-4578-fb7f-fb2a1d77a3d5.png)

以上の手続きで HDRP のチェック項目が `All Green` の状態となりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142886/632d5a30-c66c-b4ed-f3da-6cb4a6f49a40.png)

## Global Volume の作成
Unityのバージョン変遷に詳しくない為、正確な情報がわからないのですが、おそらく以前利用できていた `Scene Settings` と言うものの扱いが変わり、現バージョンでは作成ができなくなっていそうです。
以前は、その設定から追加していた `Bloom` が
`Global Volume` で追加できるようだったので、今回はこちらを利用してみます。

- `GameObjectメニュー > Volume > Global Volume`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142886/5e2f2ea5-da53-1dda-74bd-69b655c4127c.png)



## Global Volume Profile の作成
これで、 `Global Volume` が `Scene` に追加されました。
次に、 `Global Volume` の `Inspector` から `Volume Profile` を作成します。
`New` ボタンを押しましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142886/c894e9db-1874-d777-6455-329302cae744.png)

`Global Volume Profile` が作成されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142886/7d941b9e-86db-d723-2cac-23b843546d11.png)

## Bloomの追加
作成された `Global Volume Profile` をダブルクリックします。
そうすると、編集ができるので、 `Add Override` をクリックします。
追加項目の選択ができるので検索バーに `bloom` と入力。
`Bloom` が絞り込まれた状態となるので、選択して追加してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142886/1d156310-b816-93c4-28db-552c6ddb6c8d.png)

## Bloomの編集
Bloomが追加されたら `Intensity` を編集してみます。
変化がわかりやすいように `0.9` に設定してみました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142886/6987da54-9ab4-a88a-7c3a-057e917f5323.png)

- Bloom適用前
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142886/ff822a24-03e2-de79-7ff9-a4342dd5889c.png)

- Bloom適用後
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142886/6d61a428-f684-201f-a9bf-0d4e68f121a8.png)

# おわりに
以上 `Unity 2019.4` への `VFX Graph` と `HDRP` のセットアップでした。
ちなみに、　`URP (Universal Render Pipeline)` へのセットアップも試してみたのですが、`Bloom` を適用した際に、 `Sceneビュー` と `Gameビュー` で効果の差異が出てしまいその原因がわかりませんでした。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142886/a2e175ed-d89e-4c5d-132c-3284e60bff25.png)
(※ `Bloom` の `Intensity` は `5` に設定)

`URP` と `HDRP` は設定項目とかも結構異なる所があるようで、それぞれで技術を習得しないといけなそうなので、このあたりはなかなか大変そうですね。。

とりあえず、 `VFX Graph` の設定ができたので今度こそUnityステーションで紹介されていた内容を実際に試していこうと思います。

# 参考
**■ Unity 2019 LTS が公開されました**
https://blogs.unity3d.com/jp/2020/06/09/unity-2019-lts-is-now-available/

**■ Visual Effect Graph (v8.1) 公式ドキュメント(英語)**
https://docs.unity3d.com/Packages/com.unity.visualeffectgraph@8.1/manual/index.html

**■ 動画で紹介されていたVFXGraphのサンプル集**
https://github.com/keijiro/VfxGraphTestbed

**■ 【VFXGraph】Point Cacheを利用して形状に添わせたエフェクトを作成する**
https://qiita.com/beckyJPN/items/1dc986f1d1d88561795b


# VFX Graph 実装例
各画像から制作手続き詳細の記事へリンクしています。
[![output.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142886/a7535add-d882-5b6f-d852-61e3ba9e047c.gif)](https://qiita.com/beckyJPN/items/1dc986f1d1d88561795b)

[![output.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142886/6d134b82-ce66-3605-c1a9-8e69ed7b6b92.gif)](https://qiita.com/beckyJPN/items/9521ac0e1d9ac379a42a)

[![output.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142886/50cc2417-bb43-7d80-ed84-f755ba65ff53.gif)](https://note.com/rhythmcan/n/n6c4b3429a8b6)