見出し画像

「入門」UE5/UEFNマテリアルの基本（テクスチャー座標と歪み）Part6

Takuya

前回は、マテリアルを使って凹凸を表現しました。

今回は、テクスチャー座標についてです。
最終結果は、以下のようになります。

参考にした動画です。


使用するテクスチャー

以下２種類のテクスチャーを、ダウンロードしましょう。

歪みに使用するテクスチャー

UVを理解するためのテクスチャー

２つのテクスチャーのダウンロードし、プロジェクトのTextureフォルダ内にインポートしましょう。
ALL/Content/Texture

新規マテリアルを作ろう

新規マテリアルをMaterialフォルダ内に作り、名前をM_Distortionにします。
ALL/Content/Material

M_Distortionを開き、インポートした２つのテクスチャーを設置します。

テクスチャーのUV座標を理解しよう

テクスチャーを配置したら以下の画像のように、プレビューメッシュをPlaneに変えて、T_UV_StudyテクスチャーのRGBチャンネルをベースカラーとエミッシブに繋げましょう。
エミッシブとは、発光のことでマテリアルを発光させることができます。

UVの紹介。

UVとは、メッシュにテクスチャーを貼り付ける位置、方向、大きさなど調整するために使う座標軸です。
画像でわかるように、横方向がUで縦方向がVになります。

実は、TextureSmapleノードの左側の入力ピンには、UVsというUVを調整できる入力ピンがあります。

このUVsに、TextureCoordinateノード使ってUVを調整してみましょう。
グラフパネル上で、右クリック「texturecoordinate」と検索して、以下の画像のように繋ぎます。

  • TextureCoordinate
    テクスチャー座標を取得、調整するノードです。

TextureCoordinateを選択したまま、詳細パネルを見てみましょう。
U TillingとV TillingというUVの調整項目があります。
そこに数値を入れて調整してみましょう。

テクスチャーの座標が変わりました。
ここで覚えておきたいのは、テクスチャーのUV座標を動かすときはTextureCoordinateノードを使用するということです。

現在は、テクスチャーにシワが入るようにUV座標が変化していますが、これをきれいに変化させます。

以下の画像のように、Constant2Vectorとaddを追加します。
以前紹介したマテリアルの計算ですね。
なぜConstant2Vectorかというと、TextureCoordinateはUとVの2つの値を持っているので、こちらも２つの値を持つConstant2Vectorを使用し、値を変えることで、テクスチャー座標（UV）を動かすことができます。
Constant2VectorのRチャンネルがU(横方向)、GチャンネルがV(縦方向)です。

Constant2VectorのRチャンネルの値を0.1 → 0.2 → 0.3と入力すると、横方向に座標がズレていくのがわかります。もちろんGチャンネルの場合は縦方向にズレていきます。

続いてTimeノードを使って、テクスチャーを動かします。
以下の画像のように、Constant2VectorをTimeノードに差し変えます。

  • Timeノードとは
    一定の速度で連続的に値1を出力しています。
    イメージとしてはこんな感じです。
    1111111、、、
    その結果、TextureCoordinateで取得したUV座標にaddノードで、1が足されて続けて動いているように見えます。

それでは、現在動いているスピードをMultiplyを使って調整します。
Timeの値(1)を1以下にすると遅くなり、1以上にする事で早くなります。
以下のようにMultiply を追加します。

上記MultiplyのAにはTimeから１が入り、Bの値に0.5を入れることで、
1×0.5を実行し半分のスピード（0.5）になります。

さらにMultiplyのBに、Constant２Vectorを使用することで、横方向（R）、縦方向（G）を独自に調整できます。

ランダム感を出そう

現在のM_Distortionは、一定の動きしか調整できません。
ここから、タイトルにもあるようにノイズテクスチャー使って歪む表現を作っていきます。
そこで必要になるのが、以下distortionノイズテクスチャーです。

distortion

以下は、distortionのRチャンネルと、Gチャンネルです。
（チャンネルの確認方法）

Rチャンネル
Gチャンネル

これらを使って歪みを表現します。
以下のように、ノードを繋ぎなおしましょう。

ここで、Appendが使用されています。
その理由は、TextureCoordinateはUとVの２つの値（座標）を取得しているので、Addで足し算しようと思えば、こちらも２つの値が必要になります。そこで、distortionテクスチャーのR、Gの２つの値を取得しています。

少し、distortionテクスチャーが強すぎるので、Multiplyを使ってdistortionの強さを調整します。

追加したMultiplyのBを１以下の値にすることで、distortionテクスチャーの強さが和らぎます。
反対に１以上にすると激しくなります。
今回は、0.03にしました。
これを先ほどまで使用していた、Timeノードで動かしてみます。

先ほどは、T_UV_StudyテクスチャーをTimeで動かしていましたが、今回はdistortionを動かします。
テクスチャーを動かすには、そのテクスチャーのUV座標が必要ですね。
TextureCoordinateで取得して、以下のようにaddで繋ぎます。

ここのノードの組み合わせは、冒頭と同じなので説明を割愛します。
Constant2VectorにはR→0.4、G→0を入力しています。
結果は以下のようになります。

非常に視覚では分かりにくいですが、この動きはまだ一定方向にしか動いていません。
では、一定方向にしか動いていないかdistortionテクスチャーを直接マテリアルに繋いで確認してみましょう。

ご覧の通りRチャンネルしか値（0.4）を入れていないので、一定方向にしか動きません。
ここで思い出していただきたいのは、UV座標はUが横方向で、Vが縦方向です。
そして、Constant2VectorのRチャンネル（U）に0.4、Gチャンネル（V）に0なので横方向にしか動きません。
これを理解すれば、縦方向に動かすにはどうすればよいかわかると思います。

縦にも動かしてもっとバリエーションを付けよう

以下のように、ノードの開始からAppendまでをコピペします。
（私は視認性を上げる為に、コメントを付けています。）

コピペしたら横方向の歪み（U）のConstant2VectorのRとGにそれぞれ（0.4、0.01）を入力します。
縦方向の歪み（V）のConstant2Vectorは、R（0.07）、G（0.3）を入力し、distortionテクスチャーのRとGチャンネルを繋げることで、さらにランダム感を表現できます。

最後に、横方向と縦方向の歪みをaddで足し合わせて完成です。

今回は、テクスチャー座標と歪みの表現について紹介しました。

まとめ

  • UVとは、メッシュにテクスチャーを貼り付ける位置、方向、大きさなど調整するために使う座標軸です。

  • テクスチャー座標を取得、調整する場合は、TextureCoordinateノードを使用する。

  • UV座標は横方向がUで、縦方向がV。

  • Constant2VectorでのUV座標はU→Rチャンネル、V→Gチャンネル

  • Timeノードは一定のスピードで１を出力する。

次回

ガラスの表現を作っていきます。


この記事が気に入ったらサポートをしてみませんか？