望んだグラフィック表現に辿り着くために　拡張性の高い「URP」で作るハイクオリティな独自表現

Shader Graphの機能その2「Custom Post Effect」

大下岳志氏：続いては、「Custom Post Effect」を作成する方法です。

これは、Renderer Featureという機能と、Shader Graphを組み合わせて実現します。このRenderer Featureは何かというと、URPのレンダーパイプラインにオリジナルの描画パスを追加し、レンダリングの動作に変化を加えられるアセットです。

簡単に言うと、画面にポストエフェクトを加えたり、別のなにかを描画したりできる機能です。この機能も先ほどのCustom Functionのように、普通はコードによって制御するものですが、ひと手間加えることでShader Graphでも扱えるようになります。

今回の構成の紹介

Renderer Featureを設定する作業そのものは難しくないのですが、プロジェクトの中の各要素の関連がやや複雑なので、先にその構造をお伝えします。URPで描画パスを追加する時には、プロジェクト設定にあるスクリプタブルレンダーパイプライン設定で指定された、Render Pipeline Asset。さらに、そのRender Pipeline Assetのレンダラーリストに登録されているRenderer Dataというアセットに、具体的な処理が書かれたRender Featureというアセットを追加します。

そして今回は、このRender Featureに特定のマテリアルを参照するように記述して、そのマテリアルのシェーダーに、Shader Graphを使います。この構造を作ることで、Shader Graphによって画面の描画を変化させることができるようになります。

ポストエフェクトを作るための準備

それでは、実際にやってみましょう。前半は、先ほどの構造を作る部分なので、意図がわからなくても、ひとまず手順だけ覚えてもらえればと思います。

最初に、作成、レンダリング、ユニバーサルレンダーパイプライン、レンダラー機能から、新規のRender Featureアセットを作成します。名前は自由ですが、今回はSGRenderFeatureとしました。

続けて、現在のシーンで使われているレンダラーアセットのインスペクターを開きます。レンダラーアセットの場所がわからない場合、プロジェクト設定の、グラフィックス、スクリプタブルレンダーパイプライン設定、レンダラーリストを辿ると見つけられます。レンダラーのインスペクタータブには、Add Renderer Featureというボタンがあり、ここから新たなレンダー機能を追加できます。

こちらに、先ほど作ったSGRenderFeatureを追加しますが、Render Featureには、まだなんの機能も持たせていないので、レンダリングの結果には変化がありません。

次は、Render Featureアセットをテキストエディタで開き、このように内容を書き換え、保存します。この書き換えたあとのファイルも、こちらからダウンロードできるので、直接これを使っても問題ありません。今回は、レンダーパスの順序や、RenderTargetなどの複雑な要素は省略して、レンダリングの一番最後にエフェクトのパスを追加しています。

このファイルを保存後、Unityに戻ると、先ほどのRender Featureにマテリアルをアサインするスロットが追加されました。ここに、Shader Graphを使った任意のマテリアルをセットします。これでやっとポストエフェクトを作る準備ができました。

出力結果をアレンジできるようにする

ひとまず効果の確認のため、シンプルなシェーダーを1つ作ってみます。ポストエフェクトは通常、Unlit Graphで作成します。これは、インスペクターで指定したカラーをそのまま画面全体に出力するShader Graphです。シェーダーアセットのアイコンに、マウスカーソルが乗った状態で新規のマテリアルを作成すると、自動的にそのシェーダーを使ったマテリアルが作成されます。

これをRender Featureにセットすると、画面全体が指定した色に変わります。マテリアルのインスペクターで色を変えると、画面の色も変化することが確認できます。これで、Shader Graphによって、レンダリングの結果が変えられるようになりました。

引き続き、より実践的なポストエフェクトに挑戦してみましょう。そのために、Shader Graphで、この時点で表示されているシーンの映像を取得したいと思います。

まずは、先ほどのカラーを削除し、プロパティにTexture2Dを追加します。このテクスチャのセッティングをGraph inspectorで開き、Referenceに_CameraColorTextureと入力、Exposedをオフにします。

この_CameraColorTextureは、レンダーパイプラインの処理の中で一時的に保存されている「RenderTarget」という画像です。RenderTargetをReferenceに指定することで、Shader Graphの中でそれを扱えるようになります。

これを普通のテクスチャと同じように、Sampler Texture 2Dに接続して、Master StackのBaseColorにつなぎます。これで、シーンのカラーテクスチャを取得し、そのまま出力するという流れができました。

一見、元に戻っただけのようにも見えますが、レンダリングの結果を受け取り、出力しているので、この間にいろいろな処理を挟むことで、出力結果をアレンジできるようになっています。

例えば、このようにPosterizeノードを間に挟むと、画面全体の色を指定の数に減らせます。また、ノードの数は少し増えますが、取得した_CameraColorTextureのUVをわずかにずらしたものを作り、元のテクスチャとの色の差分を取り出すことで、輪郭を抽出することもできます。

もちろん、これに最初のカラーテクスチャを乗算して、アウトラインとして使うことも可能です。輪郭抽出にはいろいろ方法があるので、試し甲斐があると思います。

また、先ほど紹介したCustom Functionもポストエフェクトに使えるので、ブラーなど、標準機能にない効果を実装することもできます。

既存のノードを組み合わせて新しいノードを作る「Sub Graph」

最後に、Sub Graphの機能を紹介します。Sub Graphは、複数のノードで作られたネットワークを、1つのノードにまとめられる機能です。先ほどのCustom Functionがコードを用いてゼロから新しいノードを作る機能であるのに対し、既存のノードを組み合わせて新しいノードを作る機能と捉えてもよいかもしれません。

Sub Graphは、Shader Graphと同じように、作成メニューから作ることもできますが、編集中のShader GraphからSub Graphにしたい箇所だけ選択し、コンバートすることでも作成できます。いずれの方法でも、Sub Graphは独立したアセットになるので、別のShader Graphや違うプロジェクトへの持ち込みも簡単です。

Sub Graphは、プロパティで入力を、Output Nodeの項目で出力する値をそれぞれ設定することで、このように普通のノードと同じような感覚で使えます。

また、プロジェクトにあるSub Graphは、標準のノードと同じようにメニューから呼び出せるので、スムーズに作業を進められます。

最初に作ったCustom Functionも、毎回設定を作り直すのは面倒ですが、このようにSub Graphにしてしまうと、その手間が省けます。Sub Graph自体は、従来からあった機能ですが、古いバージョンでは少し使いにくいものでした。

現在のSub Graphは、さまざまな改善が行われ、このように非常に使いやすいものになっています。特に、同じ工程をいろいろな箇所で使う場合に非常に便利なので、ぜひご活用ください。

Custom Function、Renderer Feature、そしてSub Graphを活用すると、個々のマテリアルから画面全体のアレンジまで、今まで難しかった描画表現のほとんどをアーティスト自身で簡単にカスタマイズできるようになります。今回紹介した機能と、サンプルコードを使って、ぜひ、いろいろな表現に挑戦してもらえればと思います。

（次回へつづく）