title: "sampler2Dとプロシージャルテクスチャ" description: "テクスチャの概念とUVマッピングの原理を学びます。プロシージャルにテクスチャを生成する手法を身につけます。" chapter: "08-textures" order: 1 challenge: description: "プロシージャルな木目テクスチャを作りましょう。中心からの距離にノイズを加えたリング状のパターンで、木の断面のような見た目を表現してください。" hints:

"まずは中心からの距離で同心円を作ります: float d = length(uv - 0.5) * 20.0;"
"sin で縞模様にし、ノイズで歪ませます: float ring = sin(d + noise * 5.0);"
"完成形: float d = length(uv - 0.5) * 20.0; float n = valueNoise(uv * 8.0); float ring = sin(d + n * 5.0) * 0.5 + 0.5; vec3 color = mix(vec3(0.4, 0.2, 0.05), vec3(0.7, 0.5, 0.2), ring);"

sampler2Dとプロシージャルテクスチャ

テクスチャとは

3Dグラフィックスにおいて、テクスチャとはオブジェクトの表面に貼り付ける画像のことです。レンガの壁、木の表面、金属の質感などを表現するために使われます。

GLSLでは sampler2D 型でテクスチャを扱い、texture() 関数で色を取得します：

uniform sampler2D u_texture;
vec4 color = texture(u_texture, uv);

UV座標とテクスチャマッピング

テクスチャの座標は UV座標 で表されます。これはこれまで使ってきた正規化座標と同じく、0.0〜1.0の範囲です：

U — 横方向（左が0.0、右が1.0）
V — 縦方向（下が0.0、上が1.0）

テクスチャマッピングの基本は「UV座標 → テクスチャの色」という変換です。

プロシージャルテクスチャ

画像を使わず、数式だけでテクスチャを生成するのがプロシージャルテクスチャです。これには大きなメリットがあります：

解像度に依存しない — 無限に拡大しても綺麗
メモリ不要 — 画像ファイルが必要ない
パラメトリック — 数値を変えるだけでバリエーション生成
アニメーション可能 — 時間変化を自然に組み込める

チェッカーボード

最もシンプルなプロシージャルテクスチャはチェッカーボードです：

vec2 grid = floor(uv * 8.0);
float checker = mod(grid.x + grid.y, 2.0);

floor でグリッド化し、x+y が偶数か奇数かでパターンを作ります。

縞模様

sin で繰り返しパターンを作り、step でくっきりした縞に：

// なめらかな縞
float stripe = sin(uv.x * 40.0) * 0.5 + 0.5;

// くっきりした縞
float stripe = step(0.5, fract(uv.x * 10.0));

ドットパターン

格子の各セルの中心に円を描きます：

vec2 cell = fract(uv * 8.0) - 0.5;
float dot = 1.0 - smoothstep(0.15, 0.2, length(cell));

テクスチャの応用

右のエディタでは、チェッカーボードテクスチャを生成しています。これは最もシンプルなプロシージャルテクスチャですが、色やスケールを変えるだけでさまざまな見た目になります。

前章で学んだノイズと組み合わせることで、さらにリアルなテクスチャが作れます。木目、大理石、布地などの自然素材は、基本パターン+ノイズで表現できます。

まとめ

sampler2D はGLSLでテクスチャを扱うための型
UV座標（0.0〜1.0）でテクスチャの位置を指定
プロシージャルテクスチャは数式だけで生成する
チェッカーボード、縞、ドットなどの基本パターンが構成要素
ノイズと組み合わせて自然なテクスチャを表現