title: "SDF入門" description: "符号付き距離関数（SDF）の概念を学びます。距離に基づいた図形描画の基本を理解しましょう。" chapter: "04-shapes" order: 1 challenge: description: "SDFの値を色で可視化してください。SDFが負（図形の内側）の領域を赤、正（外側）の領域を青で表示し、境界付近（距離が0に近い部分）を白く光らせましょう。" hints:

"円のSDFは length(uv - center) - radius で計算できます。"
"負の値には赤、正の値には青を割り当てるには、step関数やif文が使えます。"
"境界を光らせるには 1.0 - smoothstep(0.0, 0.02, abs(d)) のようにSDFの絶対値が小さい領域を検出します。"

SDF入門

符号付き距離関数とは

SDF（Signed Distance Function / 符号付き距離関数） は、シェーダーで図形を描くための強力な手法です。

SDFの考え方はシンプルです：

空間上の各点から、図形の表面までの最短距離を返す関数

この距離には「符号」がつきます：

正の値：図形の外側（表面から離れている）
負の値：図形の内側
ゼロ：図形の表面上

なぜSDFなのか

SDFを使う利点は多くあります：

アンチエイリアスが自然にかかる
アウトラインやグロー効果が簡単
図形の合成（和・積・差）が容易
アニメーションとの相性が良い

最初のSDF：円

最もシンプルなSDFは円です。原点を中心とした半径 r の円のSDFは：

float sdCircle(vec2 p, float r) {
    return length(p) - r;
}

length(p) は原点からの距離を返します。そこから半径を引くと：

円の内側では負の値
円の外側では正の値
円周上ではゼロ

になります。

SDFから図形を描く

SDFの値から実際に図形を描くには、step や smoothstep を使います：

float d = sdCircle(uv - 0.5, 0.3);

// step：くっきりした境界
float shape = step(0.0, -d); // 内側=1.0, 外側=0.0

// smoothstep：滑らかな境界（アンチエイリアス）
float shape = smoothstep(0.01, 0.0, d); // 境界がなめらか

SDFの値を可視化する

SDFの値そのものを色として可視化すると、距離場の構造がよく分かります：

// 距離を色にマッピング
vec3 color = vec3(0.0);
color = mix(vec3(0.0, 0.3, 1.0), vec3(1.0, 0.3, 0.0), step(0.0, d));

右のプレビューでは、円のSDFが可視化されています。青い領域が外側、暖色が内側です。

まとめ

SDFは各点から図形表面までの符号付き距離を返す関数
正＝外側、負＝内側、ゼロ＝表面
step や smoothstep でSDFから図形を描画する
SDFの可視化で距離場の構造を理解できる