📌

Unity ShaderGraph備忘録 part1-UVとUVスクロール

に公開
Unity
shader
Shader Graph
tech

※URPの2D前提で書いてます。

UVって何？

alt text
3Dモデル界隈でよく出てくる、このグラデーションの画像のこと
紫外線ではない

平面画像の話に限って言うと、「画像の見え方を決めるときに参照する座標」と言える
xyzは3Dの座標で使ってるので、被らないようにuとvの値を使っている
赤がu軸で、緑がv軸


alt text
u軸の赤とv軸の緑がグラデーションで足されて、右上の部分は黄色で表されている
光の三原色の赤+緑と同じ原理


alt text
UnityではUVの左下が（0，0）、右上が（1，1）で
対応する画像の色情報を参照している


alt text
画像にUVを重ねたイメージ図
それぞれ0～1の位置に対応した画像の色が参照される
※ピクセル数は参照していない


alt text
なのでUVをねじったりすると、画像も同様にねじれる


UVオフセット

UVに数値を足す（Add）と位置が移動する
alt text
　値はx = u, y = vにそれぞれ対応している

  • xに足すとuvは左方向に移動する
  • yに足すと下方向に移動する
  • xとyに同じ値を足すと対角線上の左下に移動する

引き算（Subtract）すると、足し算とは逆方向に移動する

どゆこと？
「方眼紙をカメラで撮ってる」と思うと分かりやすいかもしれません
0~1の範囲が収まってた画面に、1が加わる事で方眼紙がずれて1～2の範囲が収まる
0～1の範囲は1～2が画面に入ってくる方向とは逆方向に去っていきます


alt text
座標が移動したUVを画像に適用した時に
2D画像のインポート設定の中にある「wrap mode」で出力が少し変わる

  • Clampモードだと画面端のピクセルが引き延ばされる見た目に
  • Repeatモードにすると画像が繰り返され
  • Mirrorモードにすると鏡面で反転されつつ画像が繰り返される

等。

UVスクロール

UVの各値に足す数値にtimeノードを繋ぐと、
時間経過が足されるのでUV位置が変わり続ける　= UVがスクロールする
alt text
alt text


UVタイリング

alt text
UVに数値を掛けると（Multiply）画像の大きさが変わる

  • xは横方向に
  • yは縦方向に
  • xとyに同じ値を掛けると縦横均等に大きさが変わる
    0.5などの、1以下の正の小数を掛けると画像が拡大される

こちらもオフセット同様、「wrap mode」の設定で出力が少し変わる


なんで1以下を掛けてるのに拡大されるの？
UV座標を縮めると、同じ画像領域が引き伸ばされて見える
（例えば0～1の範囲まで見えてたものが、0～0.5の範囲にフォーカスされる）
なので画像は拡大されたような見た目になります


Tiling And Offsetノード

alt text
これまで話した
タイリング（Tiling） = 掛け算
オフセット（Offset） = 足し（引き）算
に、対応しているノード。このノード1つで2つの操作を同時に行える


alt text
Tiling and offsetノードの

  • Tilingに繰り返したい数、
  • offsetにtimeノードを繋げると

alt text
レトロなゲームの背景っぽい画像が作れる


縦横いずれかの移動方向を変えたい場合は
0からtimeを引いたノードをx または y につなぐ
alt text

alt text
xに繋いだので、さっきとは逆方向に移動するようになる

Discussion