title: "色の補間" description: "mix関数を使った色のブレンドと補間を学びます。グラデーションの作り方やカラーパレットの生成を実践します。" chapter: "02-colors" order: 2 challenge: description: "3色以上を使った横方向のグラデーションを作ってください。例えば、左端が赤、中央が白、右端が青のようなグラデーションです。" hints:

"2つの mix を使って3色のグラデーションを作れます。uv.x が 0.0~0.5 と 0.5~1.0 の区間で別々の mix を使います。"
"smoothstep を使うと区間の切り替えをなめらかにできます。smoothstep(0.0, 0.5, uv.x) で前半、smoothstep(0.5, 1.0, uv.x) で後半を制御します。"
"例: vec3 c = mix(red, white, smoothstep(0.0, 0.5, uv.x)); c = mix(c, blue, smoothstep(0.5, 1.0, uv.x));"

色の補間

mix関数

mix は、GLSLで最も重要な関数の一つです。2つの値を第3引数の比率で線形補間（ブレンド）します。

mix(a, b, t)  // a * (1.0 - t) + b * t

t = 0.0 のとき a を返す
t = 1.0 のとき b を返す
t = 0.5 のとき a と b の中間値

2色のグラデーション

mix を使えば、簡単にグラデーションが作れます：

vec3 colorA = vec3(1.0, 0.0, 0.0); // 赤
vec3 colorB = vec3(0.0, 0.0, 1.0); // 青

vec3 gradient = mix(colorA, colorB, uv.x);

uv.x が左端で 0.0、右端で 1.0 なので、左から右へ赤から青へのグラデーションになります。

smoothstep関数

smoothstep は、滑らかな遷移を作る関数です：

smoothstep(edge0, edge1, x)

x < edge0 → 0.0
x > edge1 → 1.0
その間は滑らかなS字カーブ（エルミート補間）

step が瞬時に切り替わるのに対し、smoothstep はなめらかに変化します：

// 鋭い切り替え
float hard = step(0.5, uv.x);

// なめらかな切り替え
float soft = smoothstep(0.4, 0.6, uv.x);

カラーパレットの生成

sin と cos を組み合わせると、美しいカラーパレットを数式で生成できます：

vec3 palette(float t) {
    vec3 a = vec3(0.5);
    vec3 b = vec3(0.5);
    vec3 c = vec3(1.0);
    vec3 d = vec3(0.0, 0.33, 0.67);
    return a + b * cos(6.28318 * (c * t + d));
}

パラメータ a, b, c, d を変えることで、無限のバリエーションが生まれます。

複数色のグラデーション

3色以上のグラデーションを作るには、mix を連鎖させます：

vec3 color;
if (uv.x < 0.5) {
    color = mix(red, green, uv.x * 2.0);
} else {
    color = mix(green, blue, (uv.x - 0.5) * 2.0);
}

または smoothstep を使ってよりなめらかに合成できます。

まとめ

mix(a, b, t) は線形補間。グラデーションの基本
smoothstep でなめらかな遷移を作れる
cos ベースのパレット関数で美しい色彩を生成
mix の連鎖で複数色のグラデーションが可能