夜風のMixedReality

xRと出会って変わった人生と出会った技術を書き残すためのGeekなHoloRangerの居場所

URP環境でブラーシェーダーを描く

本日はShader勉強枠です。

筆者も独自のShaderを描けるようにはなってきましたがまだまだ初心者です。

今回はエフェクト用のShaderを描いてみます。

〇ブラーとは?

筆者もグラフィック関係に携わるまで聞いたことがなかったのですが、[ブラー(Blur)]とはぼかし処理のことを指します。写真などでも使用されるようですが、Shaderとしての表現としてすりガラスなどを表現するものにも使用されるようです。

〇環境

・Unity 2020.3.13f1

・Universal RP 10.5

・ShaderGraph 10.5.0

今回はURP環境下でShaderGraphを使用しています。

〇参考

今回はこちらの動画を参考に、カスタマイズしています。

www.youtube.com

〇ShaderGraph

シェーダー全文は以下のようになります。

f:id:Holomoto-Sumire:20220112194809p:plain

[FragmentShader]の[GraphInspector]からSurfaceを[Transparent]に変えます。

f:id:Holomoto-Sumire:20220112195134p:plain

これはブラーシェーダーが自分自身の後ろの画像をゆがませるうえでα値が必要なためです。

シェーダーの処理は以下のようになっています。

f:id:Holomoto-Sumire:20220112195736p:plain

赤枠とオレンジ枠のノードは同じで両者の違いは入力値が[float Value]なのか、[ Value*-1]であるかの違いです。

f:id:Holomoto-Sumire:20220112195549p:plain

やっている処理としては描画している画面である[Screen position](=カメラのレンダリング画像)のuvをずらしそれらを合成しています。

f:id:Holomoto-Sumire:20220112200133p:plain

現実世界で表現すると屈折のようにこのShaderのオブジェクトの後ろにある映像はUVをValue分ずらされ、複数のそれらが合成され出力されています。

これによってブラーの表現が行われます。

f:id:Holomoto-Sumire:20220112200436p:plain

参考にした動画ではLitで光の影響を受けるシェーダーでしたが、筆者のカスタマイズはUnlitで若干処理を気にしました。

とはいえベンチマークを実際取っているわけではないので後日実機で動かしていきます。