この記事では、Unreal Engine 5 で円形に UV スクロールする方法を紹介します！
処理の大枠は Unity など他ツールでも同様ですので、Unreal Engine に触れたことない方も読み進めていただけますと幸いです。
対象読者
・エフェクトデザイナー
・マテリアルに興味があるデザイナー
環境
・Unreal Engine 5.6.1
目次
平面を円形に変換
【全体像】
- 『VectorToRadialValue』で平面の UV を 円形にする。
- 『Time』 ノードで V 軸をオフセット。
- U 軸の切れ目が発生しないよう、極座標前の UV で『DDX』『DDY』を算出。
『VectorToRadialValue』で平面の UV を 円形にする
ざっくりいうと “極座標 (Polar Coordinate) ” 処理をしています。
『TexCoord』をそのまま『VectorToRadialValue』に入力すると円の中心が左上になってしまいます。
円の中心をもともとの UV の中央にするために、『Subtract』で “-0.5 ~ 0.5” のベクトルにしています。
『Time』 ノードで V 軸をオフセット
定番の処理です。一定速度で UV スクロールさせています。
U 軸の切れ目が発生しないよう、極座標前の UV で『DDX』『DDY』を算出
【切れ目の例：わかりやすいように滑らかなテクスチャを使用】
極座標だけの場合、上記のように切れ目が見えてしまいます。
これは MipMap の問題です。
「MipMap を使用しない」or「DDX, DDY を設定」で解消でき、今回は後者の処理を組んでいます。
【『Texture Sample』の設定】
DDX, DDY は「隣接ピクセルの UV 座標との差分」であり、これをもとにミップマップの値が決まります。
極座標したときの “U = 0” と “U = 1” のつなぎ目において、「ピクセル UV 座標が 1 動いた」と判定されることがあり、これが切れ目（ミップが極端に低い部分）です。
DDX, DDY は極座標前の UV を渡せば、切れ目が発生する原因がなくなりきれいになります。
FlowMap
【全体像】
- FlowMap（外から内側への方向ベクトル）を作成
- 内側に引き伸ばされた UV を作成
- 『FlowMaps_Simple』に必要な情報を入力
FlowMap とは
主にRとGの値で「どの方向へ、どれくらい動かすか」を指定して行う、UV アニメーションです。
テクスチャ A と UV をずらしたテクスチャ A′の遷移を繰り返し、滑らかにアニメーションがループします。
【『FlowMaps_Simple』の最小構成】
処理としては上記のようになっています。
FlowMap（外から内側への方向ベクトル）を作成
- 『TexCoord』で “0 ~ 1” の RG 情報を取得。
- 『Subtract』で 0.5 減算し “-0.5~0.5” に変換。
- 『Length』で中心からの距離を算出し、『1-x』で中心が大きくなるように反転。
- 2 と 3 を乗算し、内向きのベクトルを算出。
- 『Normalize』で 4 を正規化。
- 後の処理で『FlowMaps_Simple』の規格に合うよう、X に -1 を乗算。
┗ 関数内で -1 乗算されているため、それを打ち消す。
今回は一定速度で UV スクロールさせたいため、5 の処理を行っています。
4 のままだと外側ほど遅い速度のスクロールになります。
内側に引き伸ばされた UV を作成
『TexCoord』と 内向きの方向ベクトル を合成しています。
「Stretch_Intensity」で UV の引き伸ばしを調整できます。
Stretch_Intensity = 0.2
Stretch_Intensity = 0.5
Stretch_Intensity = 0.8
『FlowMaps_Simple』に必要な情報を入力
今回は Diffuse, Flow Vector Map, Time, UVs を使用しています。
Swirl
【全体像】
- 回す角度を決める。
- 『Sine』『Cosine』で U,V それぞれどれだけ回転するか算出。
- 『Dot』で回転後の位置を算出。
UV を渦巻き形状に歪め、テクスチャを流しています。
厳密に “外側から中心” のように UV スクロールしているわけではありませんが、それに近い動きをしているように見えます。
回す角度を決める
中心から外側に行くにつれて大きく回転するようにします。
『Swirl_Intensity』で回転の最大値を調整できます。
『Sine』『Cosine』で U,V それぞれどれだけ回転するか算出
U, V それぞれの回転後の U’ , V’ の向きを計算しています。
例えば U の場合、以下のようなイメージです。
① 元々の U
X 方向。
② 回転後の U
(cosθ, sinθ)。 ← 回転後の「X」という方向。
『Dot』で回転後の位置を算出
「もともとの UV」 と「回転後の UV」を比較し、その変化量を算出しています。
これを U, V それぞれ行うと、渦巻き状の UV ができます。
まとめ
今回は Unreal Engine 5 で円形に UV スクロールする方法を紹介しました。
紹介した方法を使うことでビルボードでも Circle 系のメッシュ のような UV の動きができます！
また、Unreal Engine に限定した処理ではないため、ご使用の環境でお試しいただけますと幸いです。
