[UE4][Tips] UV Distortion

今回は UnrealEngine4 のマテリアルのTipsを共有します。

UV Distortion について。
UV Distortion とは簡単にいうとUVの値を変化させてテクスチャを歪める手法のこと。
炎などエフェクト表現で使われる機会が多い技術ですね。

早速つくってみる

どういう仕組でこうなるのかの解説の前にまず作ってみましょう。
上のサンプル動画よりもう少し簡単なものを例に作成手順を解説します。

まず以下のような「歪ませたい画像」と「適当なノイズの画像」を準備します。
※下の画像はそれぞれ画像上で右メニューからダウンロードできます。

・歪ませたい画像


・ノイズ画像



これらをUnrealに読み込みます。
ノイズの画像、アセットをダブルクリックして開いたウィンドウでsRGBのチェックをオフにしてください。


このsRGBのチェックボックスは「色」として扱う用途ではないテクスチャ、例えばマスク用画像などの場合にオフにします。
こうすると例えばレッド0.5の色はそのままの0.5の数値としても扱うことができるようになります。

マテリアルの設定

次にマテリアルを作っていきます。

コンテンツブラウザの [Add New] から新規マテリアルを作成。



歪ませたい画像とTextureCoodinate を下図の用に接続。つまりモデルのUVに素直にテクスチャを貼ります。




この TextureCoodinate からTexture画像につながっている UV情報に手を加えることで UV Distortiom 実現します。
どのように手を加えるのかというと TextureCoordinate の出力にノイズ画像を加算します。
[Add]を作成して下図のように接続。


するとテクスチャが図のように変化します。
元画像と全然違う絵になってしまいますが、これは歪みが大きくて元の形状の跡形がない状態。


歪みを小さくするにはノイズ画像を暗くすると小さくなります。

ノイズ画像を暗くするためには、ノイズテクスチャに1以下の数値を乗算すれば良いので、とりあえず0.2のスカラーパラメータをMultiplyをつかって図のように接続します。

テクスチャが確認できる程度の歪みになります。

この数値を変化させると歪み具合の変化が確認できます。

このマテリアルをマテリアルインスタンスにしちゃえば、数値調整しながらリアルタイムにテクスチャの変化を見られるようになります。

マテリアルインスタンス化の手順は基本操作なので今回は説明しませんが、参考までに手順を動画にしました↓

ちなみに、このノイズをUVスクロールさせるとこの記事はじめのアニメーションが実現できます。

簡単な仕組みの解説

ではどうしてこんな事が起こるのか・・？
細かい説明は次回にしますが、簡単にいうとUV位置を移動（オフセット）させてるだけです。
よくテクスチャをタイリングするときにTexture Coordinate に数値を掛け算しますがあれと原理は一緒です。

次回、もう少し詳しく仕組みを解説してみようとおもいます！