title: "画像エフェクト" description: "ピクセル値の変換による画像エフェクトを学びます。グレースケール、反転、コントラスト調整などの基本的な色変換を実装します。" chapter: "08-textures" order: 2 challenge: description: "セピア調の変換を実装しましょう。プロシージャルパターンにセピアトーン（古い写真風の暖かい茶色がかった色調）を適用してください。" hints:
- "セピア変換はRGB各チャンネルに特定の係数を掛けて合成します。"
- "セピアの公式: R = 0.393r + 0.769g + 0.189b, G = 0.349r + 0.686g + 0.168b, B = 0.272r + 0.534g + 0.131*b"
- "完成形: vec3 sepia = vec3(dot(color, vec3(0.393, 0.769, 0.189)), dot(color, vec3(0.349, 0.686, 0.168)), dot(color, vec3(0.272, 0.534, 0.131))); で元の色にセピア変換を適用できます。"
画像エフェクト
ピクセル値の変換
画像エフェクトの多くは、各ピクセルの色値を数式で変換するものです。テクスチャから取得した色（または、プロシージャルに生成した色）に対して変換関数を適用します。
この章では、プロシージャルに生成したパターンにエフェクトを適用して、画像処理の基本を学びます。
グレースケール
カラー画像をグレースケール（白黒）に変換するには、RGB値の輝度を計算します：
float luminance = dot(color, vec3(0.299, 0.587, 0.114));
vec3 gray = vec3(luminance);
なぜ単純な平均 (r+g+b)/3.0 ではないのか？ 人間の目は緑に最も敏感で、赤がそれに続き、青には最も鈍感です。上の係数（ITU-R BT.601規格）はこの感度差を反映しています。
反転
色の反転は最もシンプルなエフェクトです：
vec3 inverted = 1.0 - color;
黒は白に、赤はシアンに、青は黄に変わります。
コントラスト調整
コントラストは中間値（0.5）からの距離を増減させます：
float contrast = 1.5; // >1.0で増加、<1.0で減少
vec3 adjusted = (color - 0.5) * contrast + 0.5;
contrast > 1.0— 暗い部分はより暗く、明るい部分はより明るくcontrast < 1.0— 全体的にグレーに近づく
明度調整
明度の調整は単純な加算です：
float brightness = 0.2;
vec3 adjusted = color + brightness;
ガンマ補正
pow 関数でガンマ値を調整します：
float gamma = 2.2;
vec3 corrected = pow(color, vec3(1.0 / gamma));
gamma < 1.0— 中間調を持ち上げる（明るく）gamma > 1.0— 中間調を押し下げる（暗く）
彩度調整
グレースケール値と元の色を mix で補間します：
float saturation = 1.5;
float gray = dot(color, vec3(0.299, 0.587, 0.114));
vec3 adjusted = mix(vec3(gray), color, saturation);
saturation = 0.0— 完全にグレースケールsaturation = 1.0— 元のままsaturation > 1.0— より鮮やかに
エフェクトの組み合わせ
右のエディタでは、プロシージャルなグラデーションパターンにグレースケールとコントラスト調整を適用しています。複数のエフェクトを組み合わせることで、より複雑な色調補正が可能です。
まとめ
- グレースケール変換は輝度係数を使った加重平均
- コントラストは中間値（0.5）からの距離を調整
- 彩度はグレースケールと元色のmixで制御
- 複数のエフェクトを重ねて色調補正を行う