![見出し画像](https://assets.st-note.com/production/uploads/images/126217059/rectangle_large_type_2_1dfc314048d632919aa1b2e5ca636bd8.png?width=1200)
「入門」UE5/UEFNマテリアルの基本(テクスチャー座標と歪み)Part6
前回は、マテリアルを使って凹凸を表現しました。
今回は、テクスチャー座標についてです。
最終結果は、以下のようになります。
![](https://assets.st-note.com/production/uploads/images/80710843/picture_pc_583b13422d6629e32a84df3a26fbb0d5.gif)
参考にした動画です。
使用するテクスチャー
以下2種類のテクスチャーを、ダウンロードしましょう。
歪みに使用するテクスチャー
UVを理解するためのテクスチャー
2つのテクスチャーのダウンロードし、プロジェクトのTextureフォルダ内にインポートしましょう。
ALL/Content/Texture
![](https://assets.st-note.com/img/1655119859024-pvD57wmQWs.png?width=1200)
新規マテリアルを作ろう
新規マテリアルをMaterialフォルダ内に作り、名前をM_Distortionにします。
ALL/Content/Material
![](https://assets.st-note.com/img/1655119963174-5OYcqnY2uT.png?width=1200)
M_Distortionを開き、インポートした2つのテクスチャーを設置します。
![](https://assets.st-note.com/production/uploads/images/80608894/picture_pc_e57f4d278a268f45d27a856cf6a3f6bc.gif?width=1200)
テクスチャーのUV座標を理解しよう
テクスチャーを配置したら以下の画像のように、プレビューメッシュをPlaneに変えて、T_UV_StudyテクスチャーのRGBチャンネルをベースカラーとエミッシブに繋げましょう。
エミッシブとは、発光のことでマテリアルを発光させることができます。
![](https://assets.st-note.com/img/1655120787140-z5ziYvLoFn.png?width=1200)
UVの紹介。
UVとは、メッシュにテクスチャーを貼り付ける位置、方向、大きさなど調整するために使う座標軸です。
画像でわかるように、横方向がUで縦方向がVになります。
![](https://assets.st-note.com/img/1655122633813-MxyYUBHlM2.png?width=1200)
実は、TextureSmapleノードの左側の入力ピンには、UVsというUVを調整できる入力ピンがあります。
![](https://assets.st-note.com/img/1655163870962-9pKKBwmWgU.png)
このUVsに、TextureCoordinateノード使ってUVを調整してみましょう。
グラフパネル上で、右クリック「texturecoordinate」と検索して、以下の画像のように繋ぎます。
TextureCoordinate
テクスチャー座標を取得、調整するノードです。
![](https://assets.st-note.com/img/1655163032146-4DSqLtu0d2.png?width=1200)
TextureCoordinateを選択したまま、詳細パネルを見てみましょう。
U TillingとV TillingというUVの調整項目があります。
そこに数値を入れて調整してみましょう。
![](https://assets.st-note.com/production/uploads/images/80636439/picture_pc_cc8faa0b346bc2c6c41ff869b190f71d.gif?width=1200)
テクスチャーの座標が変わりました。
ここで覚えておきたいのは、テクスチャーのUV座標を動かすときはTextureCoordinateノードを使用するということです。
現在は、テクスチャーにシワが入るようにUV座標が変化していますが、これをきれいに変化させます。
以下の画像のように、Constant2Vectorとaddを追加します。
以前紹介したマテリアルの計算ですね。
なぜConstant2Vectorかというと、TextureCoordinateはUとVの2つの値を持っているので、こちらも2つの値を持つConstant2Vectorを使用し、値を変えることで、テクスチャー座標(UV)を動かすことができます。
Constant2VectorのRチャンネルがU(横方向)、GチャンネルがV(縦方向)です。
![](https://assets.st-note.com/img/1655165756949-Act9ONOpCv.png?width=1200)
Constant2VectorのRチャンネルの値を0.1 → 0.2 → 0.3と入力すると、横方向に座標がズレていくのがわかります。もちろんGチャンネルの場合は縦方向にズレていきます。
![](https://assets.st-note.com/production/uploads/images/80638575/picture_pc_c0b70c34a321aac21a263405e1857b44.gif)
続いてTimeノードを使って、テクスチャーを動かします。
以下の画像のように、Constant2VectorをTimeノードに差し変えます。
![](https://assets.st-note.com/production/uploads/images/80638767/picture_pc_ba0aecccf2d70da26407fe8999733edf.gif?width=1200)
Timeノードとは
一定の速度で連続的に値1を出力しています。
イメージとしてはこんな感じです。
1111111、、、
その結果、TextureCoordinateで取得したUV座標にaddノードで、1が足されて続けて動いているように見えます。
![](https://assets.st-note.com/production/uploads/images/80638951/picture_pc_29ba5c469ffb3de767fed06dff984e8c.gif?width=1200)
それでは、現在動いているスピードをMultiplyを使って調整します。
Timeの値(1)を1以下にすると遅くなり、1以上にする事で早くなります。
以下のようにMultiply を追加します。
![](https://assets.st-note.com/img/1655166517199-z0uwGmU0Rc.png?width=1200)
上記MultiplyのAにはTimeから1が入り、Bの値に0.5を入れることで、
1×0.5を実行し半分のスピード(0.5)になります。
![](https://assets.st-note.com/production/uploads/images/80641013/picture_pc_811b20beb76a45f7fac7ef1166b2013d.gif?width=1200)
さらにMultiplyのBに、Constant2Vectorを使用することで、横方向(R)、縦方向(G)を独自に調整できます。
![](https://assets.st-note.com/production/uploads/images/80680362/picture_pc_75e1c85b7dbace20ec04554ab5717ecf.gif?width=1200)
ランダム感を出そう
現在のM_Distortionは、一定の動きしか調整できません。
ここから、タイトルにもあるようにノイズテクスチャー使って歪む表現を作っていきます。
そこで必要になるのが、以下distortionノイズテクスチャーです。
![](https://assets.st-note.com/img/1655208864150-UYty5miT3e.png)
以下は、distortionのRチャンネルと、Gチャンネルです。
(チャンネルの確認方法)
![](https://assets.st-note.com/img/1655208877167-Ncue7G1nQa.png)
![](https://assets.st-note.com/img/1655208882082-uO6hhpwIgE.png)
これらを使って歪みを表現します。
以下のように、ノードを繋ぎなおしましょう。
![](https://assets.st-note.com/img/1655249415282-8XfuZwOEvL.png?width=1200)
ここで、Appendが使用されています。
その理由は、TextureCoordinateはUとVの2つの値(座標)を取得しているので、Addで足し算しようと思えば、こちらも2つの値が必要になります。そこで、distortionテクスチャーのR、Gの2つの値を取得しています。
少し、distortionテクスチャーが強すぎるので、Multiplyを使ってdistortionの強さを調整します。
![](https://assets.st-note.com/img/1655249945929-aTtQjKUfrR.png?width=1200)
追加したMultiplyのBを1以下の値にすることで、distortionテクスチャーの強さが和らぎます。
反対に1以上にすると激しくなります。
今回は、0.03にしました。
これを先ほどまで使用していた、Timeノードで動かしてみます。
![](https://assets.st-note.com/img/1655250437074-nLEK52Ie3I.png?width=1200)
先ほどは、T_UV_StudyテクスチャーをTimeで動かしていましたが、今回はdistortionを動かします。
テクスチャーを動かすには、そのテクスチャーのUV座標が必要ですね。
TextureCoordinateで取得して、以下のようにaddで繋ぎます。
![](https://assets.st-note.com/img/1655251016724-r8H0m814ss.png?width=1200)
ここのノードの組み合わせは、冒頭と同じなので説明を割愛します。
Constant2VectorにはR→0.4、G→0を入力しています。
結果は以下のようになります。
![](https://assets.st-note.com/production/uploads/images/80706277/picture_pc_eaae47df2373ea0d498092eabfd6c7ef.gif)
非常に視覚では分かりにくいですが、この動きはまだ一定方向にしか動いていません。
では、一定方向にしか動いていないかdistortionテクスチャーを直接マテリアルに繋いで確認してみましょう。
![](https://assets.st-note.com/img/1655252067895-fAWVvgqplB.png?width=1200)
![](https://assets.st-note.com/production/uploads/images/80707033/picture_pc_c0fe0b26fe8bd28cf91b27198aca5fdf.gif)
ご覧の通りRチャンネルしか値(0.4)を入れていないので、一定方向にしか動きません。
ここで思い出していただきたいのは、UV座標はUが横方向で、Vが縦方向です。
そして、Constant2VectorのRチャンネル(U)に0.4、Gチャンネル(V)に0なので横方向にしか動きません。
これを理解すれば、縦方向に動かすにはどうすればよいかわかると思います。
![](https://assets.st-note.com/img/1655122633813-MxyYUBHlM2.png?width=1200)
縦にも動かしてもっとバリエーションを付けよう
以下のように、ノードの開始からAppendまでをコピペします。
(私は視認性を上げる為に、コメントを付けています。)
![](https://assets.st-note.com/production/uploads/images/80709556/picture_pc_90d7cc5cee9d9a7019dc6fdd7d875e84.gif?width=1200)
コピペしたら横方向の歪み(U)のConstant2VectorのRとGにそれぞれ(0.4、0.01)を入力します。
縦方向の歪み(V)のConstant2Vectorは、R(0.07)、G(0.3)を入力し、distortionテクスチャーのRとGチャンネルを繋げることで、さらにランダム感を表現できます。
![](https://assets.st-note.com/img/1655255210286-O7mTcS1j1V.png?width=1200)
最後に、横方向と縦方向の歪みをaddで足し合わせて完成です。
![](https://assets.st-note.com/img/1655256215853-3ImZUoWK3V.png?width=1200)
![](https://assets.st-note.com/production/uploads/images/80710843/picture_pc_583b13422d6629e32a84df3a26fbb0d5.gif)
今回は、テクスチャー座標と歪みの表現について紹介しました。
まとめ
UVとは、メッシュにテクスチャーを貼り付ける位置、方向、大きさなど調整するために使う座標軸です。
テクスチャー座標を取得、調整する場合は、TextureCoordinateノードを使用する。
UV座標は横方向がUで、縦方向がV。
Constant2VectorでのUV座標はU→Rチャンネル、V→Gチャンネル
Timeノードは一定のスピードで1を出力する。
次回
ガラスの表現を作っていきます。
この記事が気に入ったらサポートをしてみませんか?