シェーダー基礎

Appearance

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

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

ようやく画像の出番 ​

表現の幅が大きく広がります ​

おまたせしました ​

前回の振り返り ​

Shader Graph で色を扱う ​

  • 前回は Color と Float で 最小構成の単色シェーダーを作りました
  • 色空間で計算結果が変わることと 明るさの操作に触れました
  • 今回はより高度な色の表現を目指して テクスチャーと UV の扱いへ進みます

今回の授業の目的 ​

テクスチャーと UV を扱う ​

  • Shader Graph で画像を扱えるようになる
  • 画像ファイルと Unity 上のテクスチャーの違いを整理する
  • UV が「画像のどこを読むか」を決める座標だと理解する
  • Tiling と Offset で見え方を調整できるようにする
  • Wrap Mode と Filter Mode の違いを説明できるようにする

今回の授業内容 ​

シェーダーで画像を扱うための基礎知識 ​

  • テクスチャーサンプリングと UV の考え方
  • テクスチャーフォーマットとチャンネル
  • Sample Texture 2D ノードの入力と出力、Tiling と Offset
  • Wrap Mode と Filter Mode
  • Shader Graph での実装
  • UV に計算を加えた見え方の変化

テクスチャーとは ​

GPU が扱う画像データのこと ​

  • テクスチャーは「質感」の意味です リアルタイムCGの世界ではモデルの表面に貼る 「画像データ」の意味で使われることが多いです
  • PNG や JPEG などの画像ファイルを Unity に読み込むと 以降はテクスチャーとして扱えるアセットになります
  • テクスチャーはGPUで高速に扱えるデータ形式に変換されており シェーダーから参照できます
  • 多くの場合、テクスチャーはモデルの表面に貼るための画像ですが それ以外にも様々な用途で使われます

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

ファイル形式と中身の持ち方 ​

  • 画像ファイルには PNG、JPEG、TGA、PSD など いくつかの形式があります
  • PNG や TGA は透明度を表す Alpha チャンネルを持てるため ゲームや映像制作の世界でよく使われます
  • Unity に読み込んだ後は Import Settings によって GPU 用のテクスチャー形式へ変換されます
  • シェーダーでは、最終的に読み込まれたテクスチャーの 各チャンネルの値を使います

テクスチャーサンプリングとは ​

画像から指定位置の情報を取り出す ​

テクスチャーサンプリングの概念図
画像はAI生成

  • テクスチャーの持つデータを取り出す処理が テクスチャーサンプリングです
  • 画像のどの位置のデータを取り出すかは 座標で指定されます

UV 座標とは ​

モデル上の位置と画像上の位置を 対応づける座標 ​

Blender の UV 展開例

  • テクスチャーのどの位置を読むかを 指定するための座標が UV 座標です
  • U が横、V が縦を表します
  • 例えばモデルの頂点ごとに UV 座標を持てば 画像を貼る位置を決めることができます

UV の範囲 ​

0 から 1 の四角形で画像全体を表す ​

UV 座標の 0 から 1 の範囲
※ 画像はAI生成

  • 左下を (0, 0)、右上を (1, 1) として 画像全体を表します
  • この範囲の値で 画像のどの場所を読むかを指定します たとえば (0.5, 0.5) は画像の中心です
  • 範囲外を指定した場合の挙動は テクスチャーの属性設定で変わります（後述）

Sample Texture 2D ノードの使い方 ​

テクスチャーと UV を指定して サンプリングする ​

Sample Texture 2D の基本構成

  • Texture 入力にはどのテクスチャーを読むかを プロパティかデフォルト値で設定します
  • UV 入力には画像のどの位置を読むかを 指定します 省略した場合はモデルの指定 位置が読まれます
  • ノードからは読み取ったデータが出力されます 例えばカラーテクスチャーを Base Color に つなぐとテクスチャー内容が表示されます

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

UV 座標を操作する ​

Tiling And Offset ノードの例

  • UV 座標は0から1の範囲で画像を表しますが マイナスや1を超える値を指定することで 様々な表現が可能になります
  • Tilling And Offset ノードを使えば UV 座標を計算で操作できます
  • Tiling は UV の倍率です 画像を縦横に並べることができます
  • Offset は UV のオフセット値です サンプル位置をずらすことができます

テクスチャーの属性 ​

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

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

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

Wrap Mode ​

範囲外の UV をどう扱うか ​

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

  • Repeat は、範囲外のテクスチャーを 繰り返してサンプリングします
  • Clamp は、テクスチャーの端を伸ばして サンプリングします
  • Wrap Mode はテクスチャー側の設定です シェーダー側ではありませんので 注意してください

Filter Mode ​

テクスチャーを拡大縮小した際の 色の補間方法 ​

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

  • Point は最も近い画素の色をそのまま使うため ドットの境目がくっきり見えます
  • Bilinear は周囲の画素の色を補間するため なめらかに見えます
  • ドット絵は Point、 写真などは Bilinear が向いています テクスチャーの内容に合わせて選んでください

以下は Shader Graph を 使った実習です ​

Shader Graph に 触れるのだ ​

実習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 座標を加工する ​

より高度な表現を実現 ​

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

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

この回の到達目標 ​

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

今回のまとめ ​

テクスチャーと UV の基本を押さえる ​

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

おつかれさまでした！ ​

次回予告 第04回 半透明表現とUVアニメーション ​

エフェクトにも つながるよ ​