UV Scrolling / Panner

This explanation is currently available in Japanese.

ひとことで

テクスチャを読むための座標（UV）に時間 × 速度を足して模様だけを流す手法です。メッシュの頂点は一切動かさずに、滝、川、溶岩、ベルトコンベア、エネルギーシールド、流れる雲などを表現できます。シェーダーでたった 1 行の足し算ですが、ゲームのエフェクトやマテリアルで最も多用される技法の一つです。Unreal Engine では Panner ノード、Unity の Shader Graph では Tiling And Offset ノードがこれにあたります。

ゲームでの使いどころ

• 水・溶岩・滝：川の水面や溶岩の流れ、落ちる滝の筋。
• 機械：ベルトコンベア、キャタピラ、回転するモニターの走査線。
• エフェクト：剣のオーラ、魔法のバリア、エネルギー弾の表面、ビームの内部の流れ。
• 背景：流れる雲、スクロールする星空、宇宙空間を進む演出。

しくみ

$\mathbf{v}$ は UV 空間での速度（1 秒あたりに何枚分ずらすか）です。テクスチャがタイリング可能（端がつながる）なら、UV が 1 を超えても繰り返し参照されるので、無限に流れ続けます（周期ノイズで作った素材が向いています）。

UV をずらした方向と模様が動いて見える方向は逆になる点に注意します。$v$ に正の値を足すと、同じ模様がより小さい $v$ の位置に現れるので、模様は $v$ の負の方向へ流れて見えます。

単純なスクロールだけでは、模様が 1 枚の板として滑っているように見えがちです。そこで定番の工夫が速さや向きの違う 2 層を重ねることです。

2 つの層が互いに相対的に動くので、模様が常に形を変え、流体らしい複雑さが生まれます。

実装のポイント

• 時間は大きくなり続ける：uTime が数時間分になると浮動小数点の精度が落ち、模様がガタガタになります。fract(uTime * speed) のように 0〜1 に丸めてから足すと安全です（タイリング素材なら結果は同じです）。
• UV の向きを意識する：モデルの UV 展開によって「下」がどの方向かは異なります。滝のメッシュは UV の v 方向が流れる向きになるよう展開しておきます。
• 頂点カラーで速さを変える：頂点カラーやマスクで速度を場所ごとに変えると、岸で遅く中央で速い川のような変化を付けられます。本格的に流れの向きまで変えたいならフローマップを使います。

つまずきやすい点

• 継ぎ目が見える：タイリングできないテクスチャをスクロールすると、端で模様が途切れて線が流れていきます。
• UV の歪み：UV 展開で引き伸ばされた部分では、流れる速さも伸び縮みして見えます。
• 動きが単調：1 層だけの一定速度のスクロールは、すぐに「動く壁紙」だと見抜かれます。層を重ねる、歪みノイズを加える、明るさを揺らすなどで変化を足します。

デモで試すこと

1. 「UV 座標を色で表示」をオンにすると、赤（u）と緑（v）の値そのものが流れている様子が見えます。形は一切変わっていません。
2. 「速さの違う 2 層を重ねる」をオフにすると、滝の模様が 1 枚の布のようにまとまって滑るだけになります。
3. 左下の「動いている頂点：0 個」が示すとおり、滝・ベルト・シールドのどれも、変わっているのは参照座標だけです。