Unity Shader #7 レンズの雨滴

このノートでは、URPの組み込みShader Graphを使って画面上に水滴の流れを表示する効果の実装について説明します。シェーダーでよく使われるテクニックも含みます。全体の考え方は、雨滴を描く、トレイルを描く、その他の部分をぼかすの3つに分けられます。

UVの理解

Shader GraphでUVノードを直接使ってUVを取得すると、プレビュー図が表示されます。SwizzleノードとMaskでx、y、z、wの4成分を確認します。0は黒、1は白です。斉次座標では点のw成分は1なので、UVは2Dでxは左から右へ0-1、yは下から上へ0-1です。

雨滴を描く

円を描き、複数の円を描き、正方形を長方形に変え、円形を時間とともに動かします。Smoothstepでエッジをシャープにし、Fractionで複製し、Timeでアニメーションします。

トレイルを描く

y方向に新しいuv範囲を描き、大きな円の下のトレイルを隠します。X方向の揺れはsin関数で実装し、パスを描画するには雨滴境界の上白下黒、パスが白で両側が黒、グラデーション図の3つが必要です。