UV・マテリアル表現

頂点変位

Vertex Displacement / World Position Offset

頂点を動かして風や波打つ表面を作る。

6 / 10

インタラクティブデモ

デモを準備しています…

頂点変位

ドラッグで視点を回転、Ctrl(⌘)+ スクロールでズーム。タッチ操作は 2 本指です。

ひとことで

頂点シェーダーの中で、頂点の位置を時間や場所に応じてずらす手法です。Unreal Engine では World Position Offset と呼ばれます。CPU で頂点を書き換えずに GPU 上だけで形を変えるので、草原の何万本もの草を風で揺らす、旗をはためかせる、水面を波打たせるといった大量の変形を、ほとんどコストをかけずに実現できます。

ゲームでの使いどころ

  • 植生の風:草、木の枝や葉、花が風にそよぐ(手続き的な風)。
  • 布・旗・マント:物理シミュレーションなしで、それらしくはためかせる。
  • 水面:波(ゲルストナー波)で頂点を上下させる。
  • 演出:呼吸で膨らむ、心臓の鼓動、画面の歪み、敵の出現時に形がねじれるなど。

しくみ

頂点シェーダーで、元の位置 p\mathbf{p} に変位を足します。

p′=p+d(p,t)⋅w\mathbf{p}' = \mathbf{p} + \mathbf{d}(\mathbf{p}, t) \cdot w

ポイントは重み ww です。変位させたくない部分(草の根元、旗の竿側)は 0、大きく揺らしたい部分(草の先端、旗の端)は 1 に近くします。重みの持たせ方には、

  • 頂点の高さや UV から計算する(デモの草は高さ、旗は UV の uu)
  • 頂点カラーに焼き込む(アーティストが塗れるので細かく制御できる)

があります。変位の関数 d\mathbf{d} には、正弦波の組み合わせや、時間でスクロールするノイズがよく使われます。頂点のワールド位置を位相に混ぜると、隣り合う草が少しずつずれて揺れ、風が草原を渡っていく様子になります。

実装のポイント

  • 法線も更新する:形を変えたら法線も変わります。解析的に微分できる変位(正弦波など)なら、微分から法線を計算し直します(デモの旗)。
  • インスタンシングと組み合わせる:同じ草のメッシュをインスタンシングで何千本も描き、揺れはすべて頂点シェーダーで計算すれば、CPU の負荷はほぼゼロです。
  • 影と当たり判定:影を正しく落とすには、影の描画(深度パス)にも同じ変位を適用します。一方、当たり判定は CPU 側のメッシュのままなので、見た目と判定がずれることを想定しておきます。

つまずきやすい点

  • カリングで消える:変位でメッシュが元の境界ボックスの外へ出ると、画面内にあるのに視錐台カリングで消えることがあります。境界を広めに設定します。
  • 法線を更新しない:形だけ変わって陰影が元のままだと、揺れているのに平らに見えます。
  • 頂点が足りない:変位は頂点単位なので、頂点の少ない板を曲げようとしても角張ります。旗のように滑らかに曲げたい部分は分割数を増やします。

デモで試すこと

  1. 「頂点変位」をオフにすると、草も旗も作ったときの形のまま完全に静止します。4,200 本の草の揺れが、すべて GPU の計算だけで作られていることが分かります。
  2. 「風の強さ」を上げると、先端ほど大きく曲がり、草原に風の通り道の波が走ります。
  3. 「旗の頂点」を表示すると、ワイヤーフレームの格子が波打っている様子が見えます。竿側の頂点がほとんど動かないのは重みが 0 に近いからです。

参考資料

Unreal Engine Material Coordinates ↗

分野全体の資料で、この項目を直接扱っているとは限りません。