こんにちは。
今回は下図のような背景を歪ませるシェーダーの作成方法です。
これは半透明の球の後ろにキューブが映っていて、そのキューブが歪んでいる状態です。
作り方はUnity道場で行われた「エフェクト作成のためのShader Graph」講演を再現してみたものになります。
こちらの講演、シェーダー勉強中の方にはとても勉強になると思うのでオススメですよ！
講演のリンクは↓コチラです。後半の「たつまき」もかなり勉強になりました。
https://learning.unity3d.jp/3007/
背景を歪ませる表現は講演にあるバリアの他にも、炎や剣の軌跡など使う場面は多いので、作れるようになっておくととても便利だと思います。
それでは解説に進みましょうー！
最初の環境設定
今回の背景を歪ませる表現は、不透明オブジェクトの描画結果を球に投影して、球のUVを歪ませる事で表現しています。
そのため、まずはシェーダーから描画結果にアクセスする設定が必要になります。
設定するファイルは、Assets配下の「Settings → UniversalRP-HighQuality」というファイルです。
このファイルの「Opaque Texture」のフラグをオンにします。
これで必要な設定は終わりなのでシェーダーの作成に移ります。
シェーダー全体図
個々のノードを見ていく前に、このシェーダーが何をしているのか、全体の流れを軽く把握していきましょう。
マスターノードは「PBR」を使います。
①で背景（現在の描画結果）を拾ってテクスチャとして使います。
②は球のUVをスクリーンスペースにして、③でそのUVを歪ませています。
流れは以上になります。
背景をオブジェクトに投影する
まずは背景（現在の描画結果）を球に投影するところから始めましょう。
「Sample Texture 2D」と「Texture 2D Asset」ノードを作り、「Texture 2D」ノードをプロパティ化します。
そしてBlackboardでTexture 2Dの「Reference」を「_CameraOpaqueTexturte」と書き換えます。（これは描画結果を取得してくる定数みたいなものらしいです）
下図のように背景がプレビューされたらOKです。
この状態でシーンビューを見てみると、下図のように描画結果が球に貼られます。
ただしこれは球のUVに貼った状態なので、このままでは今回やりたい表現にはなりません。
そこで、新たに「Screen Position」ノードを作成し、これを下図のように繋ぎます。
これで後ろが透けてるような見た目になりました。
ただしこれは透けているわけではなく、スクリーン座標をUVとして描画結果を貼り付けているためこのような見た目になっています。
背景を歪ませる
ここまでできたら、後はUVを歪ませれば背景が歪んだ見た目になります。
歪ませるには、下図のようなノイズをTimeで動かしたものを「Screen Position」ノードに加算すればOKです。
これで球の中が歪んで見えるシェーダーができました！
これを基に、マスターノードをUnlitにしてブレンドモードをAlphaやAddに変えてみるとまた違った表現ができます。
↓UnlitでAlphaにしたもの。球の陰影が付かないので光学迷彩っぽくなりますね。
↓UnlitでAddにしたもの。元の背景と歪ませた背景が加算されてこのように重なった見た目になります。
今回の記事は以上となります。
