TexCoord - テクスチャ座標について

TexCoordとかいう赤いノードは何をしているのか。

0. TextureSampleと画像の表示

Texture Sample をベースカラーに繋いだシンプルなマテリアル。

UVs とは

UVs は表示するテクスチャの位置を指定するピン。
「画像のこの部分の色を表示してね」みたいな感じ。

UVs に float2 の値を繋ぐことで、その位置の画像の色を表示してくれる。

Texture Sample に指定した画像

U で横方向の位置、V で縦方向の位置を指定している。

UVs の初期値は？

TexCoord を繋いだマテリアルと見た目がまったく同じになる。

つまり UVs に何も繋がっていない場合は TexCoord が使われている。

1. テクスチャ座標について

TexCoord = Texture Coordinate（テクスチャ コーディネート）の略。
日本語でテクスチャ座標。

ベースカラーに繋ぐとカラフルなグラデーションが表示される。

横方向に赤のグラデーション、縦方向に緑のグラデーションを合わせたもの。
逆に言えば R に横方向の情報、G に縦方向の情報が入っている。

Mask で色ごとに分けて確認できる。

R のみ（横方向）

G のみ（縦方向）

2. テクスチャ座標の考え方

TexCoord を Texture Sample の UVs に繋ぐと画像がそのまま表示される。

グラデーションだと理解が難しいので、一旦モザイク化して考える。

テクスチャ座標の各ブロックの値が、画像のどの位置を表示するかを表している。

モザイクを細かくしていくと、表示される内容もどんどん細かくなる。

ちなみにMayaでも同じことをしている。

3. テクスチャ座標の利用

テクスチャ座標の値が画像の位置を表すので、
テクスチャ座標の値が変わると表示されている内容も変わる。

足す → 移動

TexCoord に値を足すと表示が横にずれる。

ブロック状にして考える。足す前はそのままの位置。

数字で表すと、例えば真ん中が (0.5, 0.5)。

U（横）に値を足すと (1.0, 0.5) になる。

画像を表示してみると、足した分ずれている。

掛ける → 大きさ（タイリング）

TexCoord に 3 を掛けると 01 だったものが 03 になる。

同じように画像を参照するので、繰り返し（タイリング）になる。
1 を超しても繰り返して画像が表示される。
繰り返すか繰り返さないかは設定で変えることができる。

4. テクスチャ座標の応用

模様でずらす

テクスチャ座標に模様（テクスチャ）を足すことで、模様の形にずらすことができる。

シンプルにずらすノード

TexCoord にずらす量を加算している。

模様でずらすノード

ずらす量が Texture Sample になっても同じようにずれる。

時間でアニメーション

Time ノードを足すことで、時間で流れるアニメーションになる。

Timeノード

時間を取得することができる。おそらくゲームを起動してからの時間。

時間でずらすノード

ずらす量が Time ノードになっている。

中心で拡大・回転

中心で拡大は Scale UVs By Center。

回転は Custom Rotator。