はじめに
こんにちは！株式会社キッズスターで2Dアニメーションデザイナーをしている Kawamuraです。
水のゆらぎに活用できそうなシェーダーを ShaderGraph で作成してみました。
記事では Unlit 設定にしており、2Dのテクスチャ表示(uGUI の Image,SpriteRenderer)を想定しています。
参考
【Unity URP】背景をゆらゆら動かすシェーダーをつくる（2019.3.0b4）
大いに参考にさせていただきました。
ビルトインでは Opaque Texture フラグがないので、シーン背景→画像にアレンジさせていただきました。
動作環境
- Unity 2021.3.xx
- ShaderGraph 12.1.xx
- ビルトイン レンダリングパイプライン
ノード全体
ポイント：NoiseをScreenPositionに反映させて、TextureのUVにゆらぎを入力
ノード解説
- 移動の設定
自動でゆらゆらループしてほしいので、Timeから移動値を作成します。
Timeの倍数をSpeedをプロパティ化すると、揺らぎの速さをInspetorで調整できるようになります。
Rotateノードは遊び部分です。スクロールの方向にコサイン波を付与してランダム性を足しています。
Rotateなし
Rotateあり
ノイズ生成
-
Gradient Noiseというパターンノードが既存で用意されています。
Remapで揺らぎの強さを調整します。
Remapの Min,Max をプロパティ化すると、揺らぎの大きさをInspetorで調整できるようになります。
テクスチャのUVにノイズを加算
- ScreenPosition にノイズを加算して、表示したいテクスチャのUVに指定します。
応用
しずくのテクスチャを用意してRemapの値を大きくすれば、水面の動きを再現できたりします。
Texture設定：MeshType=Full Rect, Wrap Mode=Repeat
Remap設定：Min.0, Max.1
Discussion