PPSv2でUIにBloomをかける
本エントリはUnity Advent Calender 2019 その2 12日目のものです。
Bloomっていいよね
Bloom、良いですよね。結構好きな人は多いのではないかと思います。
わたしはゲーム内空間にそういうのがかかっているだけで若干テンションが上がってしまいます。ちょろすぎる。
UIにBloomをかける？
3D空間もいいけど、UIとして表示されている文字とか2D絵だってボヤっと光ったら綺麗だよね、と思いながら生活していた所、
2017年、Unityアンバサダー青木ととさん(@lycoris102)より以下の記事が投稿されていました。
[Unity] Post Processing Stackを使ってUI要素にもBloomを適用する
qiita.com
良い（しみじみ
ただこちら、PPSv1を用いた解説となっています。
PPSv2もBeta取れたしv2でやっていこう、と思って色々調べていたのですが、
PPSv2でのピンポイントな解説記事は見つけられなかったのでせっかくだからと自分で書いてみました。
といっても、わたし自身PPSv2自体に造詣が深いわけではないので…
あくまでこうやったら一応出来るよー、くらいにとどまります。ご了承ください。
むしろ応用編は教えてほしい気持ち。
PPSv2をインストールする
PPS（Post Processing Stack）についての細かい説明は省略します。
現在、PPSv2は Unity の Package Manager で公開されているのでそっちから入れます。
Unityメニューバー -> Package Manager を選んでPackagesウィンドウを開きます。
2.2.2（記事執筆時最新バージョン）を選択し、Installをクリックします。
インストールが終わるまでしばらく待ちます。
Bloomをかける前のUIを準備
今回はこちらを光らせていきます。
PPSの各種イメージエフェクトは Post-process Layer をアタッチしたカメラに対して作用します。
そのため、カメラを経由しない描画方式だとイメージエフェクトをかけられない ので、
Canvasの設定ではScreenSpace - Overlay 以外のRenderModeを使用します。
今回はScreen Space - Camera にし、UIを映す対象のカメラを設定しておきます。
PostProcessカメラ準備
UIを映す対象となるカメラに、 Post-process Layer をアタッチします。
PostProcess用Layerの定義
Post Process Layer の Layer に指定するためのLayerを一つ定義しておきます。
定義を済ませたら、シーン内のCameraを選択して Post Process Layer の Layer に定義したLayerを設定します。
これは後述の Post Process Volume のアタッチされたオブジェクトを処理対象に含める為に使用されます。
Post-process Volume を作成する
実際に画面にイメージエフェクトをかけるための設定ファイル（Profile）と紐づき、イメージエフェクトの設定を行うためのオブジェクト Post Process Volume を作成します。
Hierarchyビューで右クリックし、 3D Object -> Post-process Volume を選んでクリックします。
Post Process Volume がアタッチされたGameObjectが作成されました。
次に、作成したPost Process Volume の IsGlobal 設定を true にしておきます。
この設定が false である場合
「一緒に付いているBox Collider範囲内に Post Process Layer の付いた Camera が入ってきたらイメージエフェクトを有効化する」という挙動になるのですが、今回は範囲は関係なく常にかけたいためです。
先程定義したLayer「PostProcess」を割り当てます。
Post-process Volume Profile を作成する
実際にどのようなエフェクトをどのようなパラメータでかけるかを決めるための Post-process Volume Profile を作成し、
先程配置した Post Process Volume と紐付けます。
Profile の New ボタンをクリックし、 Post-process Volume Profile を作成します。
クリック後、Profileには作成されたPost-process Volume Profileが設定されます。
これはプロジェクトフォルダにアセットとして作成されます。
Bloomエフェクトを Profile に追加する
作成した Post-process Volume Profile に Bloom のエフェクトを追加します。
Projectビューのアセット経由でも出来ますが、今回はSceneビュー経由で行います。
Add effect... をクリックし、メニューを辿って Bloom を選択します。
Post-process Volume に Bloom エフェクトが追加されます。
Post-process Volume で表示されているProfileはProjectビューにあるものを参照しているため、 Projectビュー側のProfileを見てみると同じくBloomが追加されている状態になります。
Bloom のパラメータを調整して発光を目立たせる
さて、ここまでの設定の時点で実は既にUIにBloomがかかっているのですが、ぱっと見よくわかりません。
Bloomエフェクトのパラメータを調整してもうちょっと目立たせてみます。
各設定項目、色が薄く一見操作できないように見えますが、項目左のチェックボックスを有効化することで操作できるようになります。
パラメータは色々ありますが、とりあえず今回は Intensity をいじれば変化がわかるのでそこだけいじるようにします。
Intensity を適当に 10 くらいに設定してみましょう。
結果、元のエフェクトをかける前の画面と比較するとこんな感じになります。
カメラのBackgroundカラーを黒寄りにするともっとわかりやすいかも。
これでUI全体にBloom効果がかけられるようになりました。その他のパラメータはよしなに調整してください。
イメージエフェクト自体はBloom以外にも色々とあるので、組み合わせてみると面白いUI表現につながるかもしれません。
