第03回 テクスチャーサンプリングと UV

前回: 第02回 Shader Graph基礎 / 次回: 第04回 半透明表現と UV アニメーション

今回の授業内容

• 画像ファイルとUnity上のテクスチャーを区別する
• テクスチャーサンプリングとUV座標の関係を理解する
• Sample Texture 2Dで画像を表示する
• TilingとOffsetで読む範囲を変更する
• Wrap ModeとFilter Modeによる見え方を比較する

テクスチャーの基礎

テクスチャーとは

CGの世界でのテクスチャーは、主に GPU が扱う画像データのことを指します
本来のテクスチャーは「質感」の意味ですが、リアルタイムCGの世界ではモデルの表面に貼る 「画像データ」の意味で使われるのが一般的です

多くの場合、テクスチャーはモデルの表面に貼るための画像ですが、それ以外にも様々な用途で使われます

テクスチャーフォーマット

画像ファイルにはPNG、JPEG、TGA、PSDなどいくつかのデータ形式があります
これらは同じ画像であっても、圧縮方法や色の表現方法、人間が編集する上での利便性などが異なります

PSDはPhotoshopのネイティブ形式で、レイヤーやアルファチャンネルなどの情報を保持でき、ゲーム制作のワークフローでもよく使われます
PNGやTGAは純粋な画像ファイル形式ですが、透明度を表すAlphaチャンネルを持てるため、こちらもゲームや映像制作の世界でよく使われます

これらの画像データは、そのままではGPUで扱うのに適してはいません
ゲームエンジンはこうしたファイルをGPUで扱いやすいデータ形式に変換する機能を備えているのが一般的です
Unity の場合、ファイルに個別のImport Settingsを設定することで、読み込む際の変換方法を指定できます

シェーダーでは、最終的に読み込まれたテクスチャーの各チャンネルの値を使います

テクスチャーサンプリング

画像はAI生成

テクスチャーの持つデータを取り出す処理が テクスチャーサンプリングです
画像のどの位置のデータを取り出すかは、モデル上の位置と画像上の位置を対応づけるUV座標で指定されます

UV座標でテクスチャーを参照する

テクスチャーのどの位置を読むかを指定するための座標がUV座標です
U が横、V が縦を表します

例えばモデルの頂点ごとに UV 座標を持てば画像を貼る位置を決めることができます

UV の範囲

※ 画像はAI生成

左下を (0, 0)、右上を (1, 1) として0 から 1 の四角形で画像全体を表します
たとえば (0.5, 0.5) は画像の中心です

範囲外を指定した場合の挙動はテクスチャーの属性設定で変わります（後述）

Sample Texture 2D ノード

Unityの Shader Graph では、Sample Texture 2D ノードを使ってテクスチャーをサンプリングできます

Texture 入力にはどのテクスチャーを読むかをプロパティかデフォルト値で設定します
UV 入力には画像のどの位置を読むかを指定します
省略した場合は頂点上に指定されたUV座標が読まれます

ノードからは読み取ったデータが出力されます
例えばカラーテクスチャーを Base Color につなぐとテクスチャー内容が表示されます

UV のタイリングとオフセット

UV 座標は0から1の範囲で画像を表しますがマイナスや1を超える値を指定することで様々な表現が可能になります

ShaderGraphでは、Tilling And Offset ノードを使えば UV 座標を計算で操作できます

Tiling は UV の倍率です
画像を縦横に並べることができます

Offset は UV のオフセット値です
サンプル位置をずらすことができます

テクスチャーの表示方法を設定する

範囲外の UV の扱いと拡大縮小の補間方法

テクスチャーの Import Settings で Wrap Mode と Filter Mode を設定できる
シェーダーで同等の計算は可能だが、通常はテクスチャー側で設定する

テクスチャーには、範囲外の UV をどう扱うか、 拡大縮小時に色をどう補間するかといった属性があります
これらの属性はテクスチャー側で設定します
静的な設定のため、シェーダー側で操作することは基本的にはできません

つまり、テクスチャー側の設定もシェーダーの挙動に影響するため、シェーダーを扱う際には基本的な設定を理解しておく必要があります

Wrap Mode：範囲外の UV の折り返し設定

Clamp の例: Tilingの倍率が高くても繰り返されず画像の端が引き延ばされている

Repeat は、範囲外のテクスチャーを繰り返してサンプリングします
Clamp は、テクスチャーの端を伸ばしてサンプリングします

Wrap Mode はテクスチャー側の設定です
シェーダー側ではありませんので注意してください

Filter Mode：拡大縮小時の補間方法

例: 左が Point、右が Bilinear より高度な補間を行うTriLinearも存在するが割愛

Point は最も近い画素の色をそのまま使うためドットの境目がくっきり見えます
Bilinear は周囲の画素の色を補間するためなめらかに見えます

ドット絵は Point、 写真などは Bilinear が向いています
テクスチャーの内容に合わせて選んでください

実習：Shader GraphでテクスチャーとUVを操作する

実習1：テクスチャーをそのまま表示する

1. Texture2D プロパティを追加する
2. Sample Texture 2D ノードを配置する
3. Texture2D を Texture 入力へ接続する
4. 出力を Base Color へつなぎ、マテリアルに画像を設定する

• 最小構成は Texture2D -> Sample Texture 2D -> Base Color です

実習2：Tilingで密度を調整する

1. UV ノードを追加する
2. Tiling And Offset ノードを Sample Texture 2D の手前に入れる
3. Tiling を (2, 2) や (4, 1) に変えて見比べる
4. テクスチャー画像がどの方向にどう並ぶかを確認する

• テクスチャーのタイリングは砂浜や草原などの自然表現でも使われますが、倍率によって見え方が大きく変わるため調整が重要です

実習3：Offsetで表示位置をずらす

1. 同じ Tiling And Offset ノードの Offset を使う
2. X と Y の値を少しずつ変えて見え方を確認する
3. 画像が動いたのではなく、読む場所が変わったと説明できるようにする

• Offset はテクスチャーの表示位置をずらすための機能ですが画像そのものを動かすのではなく、読む場所を変えることがポイントです
  スクロールアニメーションなどによく使われます

実習4：Wrap ModeとFilter Modeを切り替える

1. テクスチャーの Import Settings を開く
2. Wrap Mode を Repeat と Clamp で切り替える
3. Filter Mode を Point と Bilinear で切り替える

• ドット絵、模様、写真、グラデーションで向き不向きがあります
  適切なモードを探してみてください

UV座標を加工した発展表現

Sphere ノードでUVに魚眼レンズ様の効果を加えた例複雑な表現を動的に実現できるのがシェーダーの強み

UV を計算で加工すればテクスチャーの見え方を動的に変えることができます
例えば UV 座標に Time を足すことで画像が流れるような表現が可能になります
それ以外にも波紋の表現や、UV を回転させて渦巻き模様を作ることもできます
画像を直接編集しなくても計算だけで表現を変えられるのはシェーダーならではです

完成条件

• Sample Texture 2D を使って画像を表示できる
• 画像ファイル形式とテクスチャーのチャンネルを区別できる
• UV が画像参照用の座標だと説明できる
• Tiling と Offset で見え方を調整できる
• Wrap Mode と Filter Mode の使い分けを説明できる
• UV に計算を加えた変化を説明できる

今回のまとめ

• テクスチャーサンプリングは座標を指定してテクスチャーのデータを読む処理です
• UV はテクスチャーの読む場所を決める座標です
  モデル上の適切な位置に画像を張るため頂点ごとに UV 座標が設定されます
• Tiling、Offset、Wrap Mode、Filter Mode でテクスチャーの繰り返しや拡大縮小の際の見え方を調整できます
• PNGやJPEGなどの画像ファイルはUnityに読み込まれてテクスチャーとして扱われます
• これらはどれも CG を扱う上で重要な概念です
  ぜひ覚えてください