はじめに
最近のゲーム、たとえば『原神』や『鳴潮』などでは、天気の表現が美しく描写されています。
こうした美しい風景や空気感を描くためにはシェーダーが欠かせません。
特に最近流れてきた鳴潮の雨の表現が本物のようで、自分も「こんなグラフィックを作ってみたい！」と思い立ち、見よう見まねながら初心者なりに雨の再現に挑戦してみました。
サンプル
完成品はこちら。
空、水たまり、波紋をシェーダーグラフで作成しました。
雨粒はVFXグラフで作成しています。
ポストプロセスで画面の色調補正なども行なっています。
今回は空、水たまりを簡単に説明していきます。
下準備
まず空を作成するにあたり、Skyboxを設定します。
プロジェクト内の適当なところで
右クリック（または上部メニューのAsset） > Create > Shader Graph > URP > Unlit
Litだと光沢や光を受ける描写に適していますが、雲自体マットな質感のため不要なのと、Unlitの方が軽いためこちらを選択しています。
シェーダーグラフが作成されるので適当な名前をつけましょう。
これとは別で、マテリアルも作成します。
一応シェーダーグラフを作成した時に自動でマテリアルが子として作成されるのですが、こちらを使う場合インスペクターで値を調整したりできないため、別で作成しています。
右クリック or Asset > Create > Material で任意の名前をつけて作成します。
この作成したマテリアルのインスペクター上部にある Shader から作成したシェーダーグラフを選択します。
次にこのマテリアルをSkyboxに設定していきます。
上部メニューの Window > Rendering > Lighting > Environment を開きます。
一番上にSkybo Material があるので、ここに先ほどのマテリアルをセットします。
これで準備は完了です。
シーンで確認できるようになりました。
ステップ① - 雲のベース作成
早速雲のベースをシェーダーグラフで作成していきます。
グラフは以下です。
ここで空全体に広がる「雲のベースとなる動き」を生成しています。
以下、ノードと役割解説です。
【Cloud Base】
◼︎ Position → Normalize
ワールド座標を正規化して、空全体の基準ベクトルを作成。
これにより「どの方向に雲を流すか」をコントロール。
◼︎ Split → G成分 + Horizon変数
Position の G成分（高さ）を取り出し、作成した水平線（Horizon）変数を合成。
インスペクターでHorizonを調整します。
これで「地平線に近い部分を暗く・上空を明るく」といった変化が可能に。
◼︎ Divide → Multiply
Divideでスケール調整を行い、水平線と空の境界を少しはっきりとさせる。
Normalize のベクトルと組み合わせることで、「雲の広がり」と「地形に応じた自然な歪み」を表現。
◼︎ Split → Vector2 (R→X, B→Y)
XYZから必要な成分を2Dに変換。
雲の流れを「UV座標的」に扱いやすくする。
◼︎ Multiply (CloudTiling)
雲のタイルサイズを決定するパラメータ。
値が大きいほど細かな雲に、小さいほど大きな塊の雲になるようコントロール。
◼︎ Time → Vector2 → Multiply
時間経過によるUVの移動を作成。
値を 0.6, 0.6 に設定して雲の流れを緩やかに。
◼︎ Add (CloudBase最終)
Timeによる動きとTilingのスケールを加算し、最終的な雲の動きの基礎UVを生成。
ステップ② - 低層雲の作成
雲をよく観察すると、高い雲と低い雲に分かれています。
低い雲は暗く、動きが早いです。
【Black Low Cloud】
先ほどのベースから分岐し、低い雲を作成していきます。
◼︎ Height変数 → Divide
雲の高さを変数で調整。
Divide の B に CloudBase の「Horizon 補正」結果を加え、地平線との関係を強調。
◼︎ Multiply (Divide out × Normalize)
高さ補正と正規化ベクトルを組み合わせ、雲の動きに奥行きを追加。
◼︎ Split (R,B) → Vector2 → Multiply (CloudTiling)
UV成分を取り出してタイル化。
高層雲より細かい模様にする。
◼︎ Add (UV + 時間制御)
Time 制御を「X:1,Y:1」で強めに適用。
高層雲より速い動きに。
◼︎ SimpleNoise (Scale=1.2) → Power (B=2)
ノイズを生成し、スケールの調整＋コントラスト調整。
スケールが小さいほど大きめの雲に、大きいほど細かな雲になります。
イメージとしては値が小さいほどテクスチャを大きく引き伸ばしたような感じです。
Cloud Tilingとの違いは、こちらは低層雲のみをコントロールします。
また、Powerの値が小さいほどくっきりとした雲に、大きいほどぼやけた雲になります。
◼︎ One Minus → Saturate → One Minus
最後にもう一度反転し、雲の濃さを強調。
ステップ③ - 高層雲の作成
高層雲の作成を行なっていきます。
画像下側の工程です。
流れは大体 Black Low Cloud と同じになっています。
【Cloud】
◼︎ CloudBase (Add) → SimpleNoise
雲ベースの動きをノイズに入力。
雲の模様を生成します。
◼︎ Power (B=2)
ノイズのコントラストを強調。
薄い雲の明暗をはっきりさせます。
◼︎ One Minus → Saturate
白黒を反転し、範囲を 0〜1 にクランプ。
この工程あってもなくてもそんなに見た目変わらないです
Cloud（高層雲） と Black Low Cloud（低層雲）の違い
Black Low Cloud では、Height変数 や Divide の工程を追加しています。
ここで低層雲を再現するため、高さと明暗、広がりを調整したあと、Cloud Base で行った工程を再度行っています。
つまり、Black Low Cloud は低層雲を再現するための Cloud Base + Cloud のほぼコピーです。
ステップ④ - 色の調整と全体の合成
【SkyColor】
ベースとなる空の色と、雲の低層と高層の色を合成します。
地平線に近い部分は濃く、上空は明るくすることで、奥行きのある空になるようにしています。
◼︎ CloudBase (Horizon + Split out) → Saturate
地平線の補正結果を 0〜1 にクランプ。
空のグラデーションを作る基準値となります。
◼︎ Power (B=2)
空の濃い部分と明るい部分の割合を調整し、空の濃淡をさらに強調します。
Bの値を大きくするほど下の黒い部分が多くなり、小さくすると半々くらいになります。
◼︎ Lerp (T=Power out, A=濃いグレー, B=明るいグレー)
作成したグラデーションに色を掛け合わせます。
LerpのAは地平線に近い暗い色を、Bに明るい色を置き、2色補間を行います。
【全体の合成】
◼︎ Cloud × Black Low Cloud
2種類の雲を Multiply で重ね合わせます。
◼︎ (Cloud & Black Low Cloud) × (SkyColorのSaturate out)
雲の模様を空の明暗に馴染ませ、リアルな雲影を再現します。
◼︎ Lerp
T = 上記 Multiply out
A = SkyColorの最終Lerp out（空の色）
B = 黒
→ この色が低層雲の色になります。
出力 → Fragment Base Color に接続
保存して完成です！
水たまり
水たまりの作成です。
先ほどと同じようにマテリアルとシェーダーグラフを作成し、マテリアルにこのシェーダーグラフを指定します。
1 . まず Gradient Noise ノードを作成し、X値は10くらいにします。
（Addは繋がなくて大丈夫です。）
2 . outを Smoothstep ノードに接続し、Edge1 を 0.6、Edge2 を1にし、白黒反転・強調させます。
この白い部分が水たまりです。
3 . 水たまりの縁がくっきりし過ぎているので、ぼかすために Simple Noise ノードを作成してXを100にし、Multiply で上記と掛け合わせます。
4 . 水たまりの中心にノイズは不要なため、
Smoothstep ノードで、縁がはっきりしない程度に白黒くっきりさせます。
5 . 白色と掛け合わせます（あんま意味ないかも）
あまり白過ぎても浮いてしまうので、水たまり部分を半透明くらいにしたいです。
6 . そこで X 0.1, Y 0.1, Z 0.1, W 2 と掛け合わせます。
X, Y, Z は RGB と同等に考えて良いです。
XYZが1だと白、0だと真っ黒になります。つまり0.1はグレーになります。
Wは今回あまり関係ないです。
次の `Add` の工程はなくても変わらなそうなので省略。
最後の Add で波紋とブレンドしています。
なお、波紋は以下の記事を参考にしました。
広がり方や頻度など細かい調整はしたものの波紋自体はほぼ同じ作りのため今回省略します。
細かいスケールなどを調整し、水たまりと波紋を Multiply で掛け合わせて完成です！
最後に
今回は、雨の表現に挑戦しました。
こうした自然の風景は、よく観察して忠実に再現しないとチープな印象になりやすいため、特に雲の層の質感表現には力を入れました。
水たまりの鏡面反射などにも取り組みたかったのですが、今回は自分の中で納得できる仕上がりに至らず、次の機会にリベンジしたいと思っています。
今後は、晴れや雪といった天候表現はもちろん、遠景が青く霞んで見える レイリー散乱 の表現や、プレイヤー体験をより豊かにする ポストエフェクト などにも挑戦していく予定です。