形を描く

// 第7章で導出した標準座標。中心が原点、短い辺の方向が -1〜+1、
// アスペクト比補正済み。この章のシェーダーはすべてこの p の上で考える
vec2 p = (gl_FragCoord.xy * 2.0 - u_resolution) / min(u_resolution.x, u_resolution.y);

// 中心 center・半径 radius の円の「符号付き距離」
// 内側: 負 / 円周上: 0 / 外側: 正
float d = length(p - center) - radius;

// (a) step: 符号だけを見る。d ≦ 0(内側)なら 1
float maskStep = step(0.0, -d);

// (b) smoothstep 固定幅: d が 0.02 → 0.0 に近づくにつれ 0 → 1
float maskFixed = 1.0 - smoothstep(0.0, 0.02, d);

// (c) smoothstep + fwidth: 輪郭の両側を約 1 ピクセルずつ(合計約 2 ピクセル)ぼかす
float w = fwidth(d);
float maskAA = 1.0 - smoothstep(-w, w, d);

#version 300 es

// 第8章 デモ1: 同じ円を 3 通りの塗り方で比較する。
// 画面を縦に 3 分割し、左から
//   (a) step             — くっきり。ただしピクセル単位のジャギーが出る
//   (b) smoothstep 固定幅 — なめらか。ただしぼかし幅が「標準座標の 0.02」で固定
//   (c) smoothstep + fwidth — 輪郭の両側を約 1 ピクセルずつぼかすよう自動調整(この章の主役)
// ブラウザの拡大率を変えて (b) と (c) の輪郭を見比べるのがこのデモの本題。

precision highp float;

uniform vec2 u_resolution;

out vec4 fragColor;

// 円の符号付き距離: 原点中心・半径 radius の円周までの距離。
// 内側で負、円周上で 0、外側で正
float sdCircle(vec2 p, float radius) {
  return length(p) - radius;
}

void main() {
  // 標準座標(第7章): 中心が原点、短い辺の方向が -1〜+1、アスペクト比補正済み
  float side = min(u_resolution.x, u_resolution.y);
  vec2 p = (gl_FragCoord.xy * 2.0 - u_resolution) / side;

  // いま何番目の縦帯にいるか(左から 0, 1, 2)
  int band = int(gl_FragCoord.x * 3.0 / u_resolution.x);

  // 各帯の中央のピクセル座標を、p と同じ式で標準座標へ変換して円の中心にする
  vec2 centerPx = vec2((float(band) + 0.5) / 3.0, 0.5) * u_resolution;
  vec2 center = (centerPx * 2.0 - u_resolution) / side;

  float d = sdCircle(p - center, 0.42);

  // (a) 符号だけを見る: d ≦ 0(内側)なら 1、正(外側)なら 0
  float maskStep = step(0.0, -d);

  // (b) 固定幅のぼかし: d が 0.02 → 0.0 に近づくにつれ 0 → 1
  float maskFixed = 1.0 - smoothstep(0.0, 0.02, d);

  // (c) ぼかし幅を fwidth で決める。
  //     w = fwidth(d) は「隣のピクセルとの間で d がどれだけ変わるか」(第5章)。
  //     輪郭の両側 ±w、つまり片側約 1 ピクセルずつ・合計約 2 ピクセルをぼかす
  float w = fwidth(d);
  float maskAA = 1.0 - smoothstep(-w, w, d);

  float mask = band == 0 ? maskStep : (band == 1 ? maskFixed : maskAA);

  // 帯の境目がわかるよう、背景の明るさを帯ごとに少しずつ変えておく
  vec3 background = vec3(0.06, 0.07, 0.09) + float(band) * 0.03;
  vec3 color = mix(background, vec3(0.92, 0.62, 0.25), mask);
  fragColor = vec4(color, 1.0);
}

#version 300 es

// 第8章 デモ2: 円の距離場そのものを絵にする。
//   1. 内側(d < 0)と外側(d > 0)を色分け
//   2. 円周から遠いほど暗くする(距離の「深さ」)
//   3. fract(d * 6.0) の縞 = 1/6 間隔の等高線
//   4. |d| が小さいところに白い線 = d = 0 の等高線(円周そのもの)
// 半径は u_time でゆっくり脈動する(sin の使いこなしは第9章)。
// 円が伸び縮みしても、縞は常に「円周からの距離」に貼り付いたまま動く。

precision highp float;

uniform float u_time;
uniform vec2 u_resolution;

out vec4 fragColor;

void main() {
  vec2 p = (gl_FragCoord.xy * 2.0 - u_resolution) / min(u_resolution.x, u_resolution.y);

  float radius = 0.5 + 0.15 * sin(u_time * 0.8);
  float d = length(p) - radius;

  // 1. 内外の色分け。step(0.0, d) は外側で 1 になる
  vec3 inside = vec3(0.95, 0.55, 0.25);
  vec3 outside = vec3(0.25, 0.45, 0.85);
  vec3 color = mix(inside, outside, step(0.0, d));

  // 2. 円周から離れるほど暗く。d の絶対値がそのまま「遠さ」になっている
  color *= 1.0 - 0.5 * clamp(abs(d), 0.0, 1.0);

  // 3. fract で d を 1/6 ごとに繰り返して縞にする = 等高線。
  //    縞の境界はあえて step のままにしてある(ジャギーの直し方は実験リストで)
  color *= 0.85 + 0.15 * step(0.5, fract(d * 6.0));

  // 4. d = 0 の等高線(円周)を白い線で重ねる。線の縁は fwidth でアンチエイリアス
  float w = fwidth(d);
  float outline = 1.0 - smoothstep(0.008 - w, 0.008 + w, abs(d));
  color = mix(color, vec3(1.0), outline);

  fragColor = vec4(color, 1.0);
}

// 矩形: b は中心から辺までの半サイズ(幅・高さの半分)
float sdBox(vec2 p, vec2 b) {
  vec2 q = abs(p) - b; // ① 第 1 象限へ折りたたみ、角を基準にした相対位置へ
  return length(max(q, 0.0)) // ② 外側: 正の成分だけでできた直角三角形の斜辺
       + min(max(q.x, q.y), 0.0); // ③ 内側: 近い方の辺までの距離(負)。外側では 0
}

// 距離から 0.07 を引くだけで、輪郭(d = 0 の線)が 0.07 だけ外へ膨らむ = 角丸矩形
float dRound = sdBox(p, vec2(0.19, 0.12)) - 0.07;

// 線分も同じ。「太さのない線までの距離」から半分の太さを引くと、太さのある線になる
float dSeg = sdSegment(p, a, b) - 0.035;

// 線分 ab: p から線分上の最近点までの距離
float sdSegment(vec2 p, vec2 a, vec2 b) {
  vec2 pa = p - a;
  vec2 ba = b - a;
  // pa を ba に「影を落として」、最近点が a から何割の位置かを得る。
  // clamp で 0〜1 に収めるので、最近点は必ず線分の上に留まる
  float h = clamp(dot(pa, ba) / dot(ba, ba), 0.0, 1.0);
  return length(pa - ba * h); // 最近点 a + ba * h までの距離
}

// abs で「円周からの符号なし距離」にしてから、リングの半分の太さを引く
float dRing = abs(length(p - center) - radius) - thickness;

#version 300 es

// 第8章 デモ3: 矩形・角丸矩形・線分・リング。
// どれも「p から形までの符号付き距離」を返す関数(2D の SDF)として書く。
// 左から: sdBox / sdBox - 0.07(角丸) / sdSegment - 0.035(太さ付き) / リング

precision highp float;

uniform vec2 u_resolution;

out vec4 fragColor;

// 矩形: b は中心から辺までの半サイズ(幅・高さの半分)。導出は本文 4 節
float sdBox(vec2 p, vec2 b) {
  vec2 q = abs(p) - b; // 対称性で第 1 象限に折りたたみ、角を基準にした相対位置へ
  return length(max(q, 0.0)) + min(max(q.x, q.y), 0.0);
}

// 線分 ab: p から線分上の最近点までの距離
float sdSegment(vec2 p, vec2 a, vec2 b) {
  vec2 pa = p - a;
  vec2 ba = b - a;
  // pa を ba に「影を落として」、最近点が a から何割の位置かを得る。
  // clamp で 0〜1 に収めるので、最近点は必ず線分の上(dot の本格解説は第11章)
  float h = clamp(dot(pa, ba) / dot(ba, ba), 0.0, 1.0);
  return length(pa - ba * h); // 最近点 a + ba * h までの距離
}

// 塗りの常套句: 距離 → 0〜1 のマスク(輪郭の両側を約 1 ピクセルずつぼかす)
float fill(float d) {
  float w = fwidth(d);
  return 1.0 - smoothstep(-w, w, d);
}

void main() {
  vec2 p = (gl_FragCoord.xy * 2.0 - u_resolution) / min(u_resolution.x, u_resolution.y);

  // 4 つの形。位置は標準座標で直書き(この canvas は 3:2 なので x は -1.5〜+1.5)
  float dBox = sdBox(p - vec2(-1.05, 0.0), vec2(0.26, 0.19));
  float dRound = sdBox(p - vec2(-0.35, 0.0), vec2(0.19, 0.12)) - 0.07; // 引くだけで角丸
  float dSeg = sdSegment(p, vec2(0.12, -0.28), vec2(0.62, 0.3)) - 0.035; // 太さも引くだけ
  float dRing = abs(length(p - vec2(1.05, 0.0)) - 0.27) - 0.05; // abs で輪郭だけ残す

  // 背景の上に、それぞれ色を変えて重ねる(距離 → マスク → mix)
  vec3 color = vec3(0.06, 0.07, 0.09);
  color = mix(color, vec3(0.35, 0.65, 0.95), fill(dBox));
  color = mix(color, vec3(0.95, 0.6, 0.3), fill(dRound));
  color = mix(color, vec3(0.55, 0.85, 0.45), fill(dSeg));
  color = mix(color, vec3(0.9, 0.45, 0.75), fill(dRing));

  fragColor = vec4(color, 1.0);
}

// 2 つの距離場の min = 2 つの形の和(union)。
// 「近い方の形までの距離」を採用すれば、どちらかの内側にいる限り d は負のまま
float d = min(d1, d2);

#version 300 es

// 第8章 デモ4: min による合成だけで作る一枚絵。
// 雪だるま(円 3 つ + 腕の線分 2 本)と地面(水平線)を min でひとつの距離場にまとめる。
// 太陽は u_mouse に追従する。空 → 太陽 → 雪の順に塗るので、
// ポインタを下へ動かすと太陽は地面の「後ろ」に沈む(塗り重ねの順序がそのまま前後関係)。

precision highp float;

uniform vec2 u_resolution;
uniform vec2 u_mouse;

out vec4 fragColor;

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

float sdSegment(vec2 p, vec2 a, vec2 b) {
  vec2 pa = p - a;
  vec2 ba = b - a;
  float h = clamp(dot(pa, ba) / dot(ba, ba), 0.0, 1.0);
  return length(pa - ba * h);
}

float fill(float d) {
  float w = fwidth(d);
  return 1.0 - smoothstep(-w, w, d);
}

void main() {
  float side = min(u_resolution.x, u_resolution.y);
  vec2 p = (gl_FragCoord.xy * 2.0 - u_resolution) / side;

  // u_mouse は gl_FragCoord と同じ座標系(第6章)なので、p と同じ式で標準座標へ。
  // ポインタ未操作の間、ハーネスは画面中央を渡してくるので m = (0, 0) になる
  vec2 m = (u_mouse * 2.0 - u_resolution) / side;

  // 空: 高さ p.y で 2 色を混ぜるグラデーション(第7章)
  vec3 color = mix(vec3(0.16, 0.22, 0.4), vec3(0.45, 0.55, 0.75), p.y * 0.5 + 0.5);

  // 太陽: ポインタに追従する円。先に塗るので、あとから塗る雪の後ろに隠れる
  float dSun = sdCircle(p - m, 0.13);
  color = mix(color, vec3(0.98, 0.8, 0.35), fill(dSun));

  // 雪だるま + 地面: min で「全部まとめてひとつの形」にしていく
  float d = sdCircle(p - vec2(-0.55, -0.42), 0.34); // 胴(下)
  d = min(d, sdCircle(p - vec2(-0.55, 0.06), 0.24)); // 胴(中)
  d = min(d, sdCircle(p - vec2(-0.55, 0.43), 0.16)); // 頭
  d = min(d, sdSegment(p, vec2(-0.76, 0.12), vec2(-1.08, 0.36)) - 0.025); // 左腕
  d = min(d, sdSegment(p, vec2(-0.34, 0.12), vec2(-0.02, 0.36)) - 0.025); // 右腕
  d = min(d, p.y + 0.62); // 地面。「p.y + 0.62」自体が水平線 y = -0.62 までの符号付き距離

  color = mix(color, vec3(0.93, 0.95, 0.98), fill(d));

  fragColor = vec4(color, 1.0);
}

// u_mouse は gl_FragCoord と同じ座標系(第6章)なので、p と同じ式で標準座標にできる
vec2 m = (u_mouse * 2.0 - u_resolution) / min(u_resolution.x, u_resolution.y);
float dSun = length(p - m) - 0.13; // ポインタに追従する円

// 1. 距離: ピクセルから形までの符号付き距離を計算する
float d = sdBox(p - position, halfSize);

// 2. マスク: 輪郭の両側を約 1 ピクセルずつぼかして 0〜1 へ
float w = fwidth(d);
float mask = 1.0 - smoothstep(-w, w, d);

// 3. 色: マスクの割合で色を重ねる
color = mix(color, shapeColor, mask);

// 第8章: 形を描く
// 第2部のデモは「1 つの canvas + 切替ボタン」方式。
// フラグメントシェーダー 4 本を、ボタンで差し替えながら同じハーネスで動かす。

import { startFullscreenShader } from '../../lib/fullscreen-shader';
import circleSource from './01-circle.frag?raw';
import fieldSource from './02-field.frag?raw';
import shapesSource from './03-shapes.frag?raw';
import sceneSource from './04-scene.frag?raw';

const demos = [
  { id: 'circle', label: '円と塗り方 3 種', source: circleSource },
  { id: 'field', label: '距離場を見る', source: fieldSource },
  { id: 'shapes', label: '矩形・線分・リング', source: shapesSource },
  { id: 'scene', label: 'min で合成', source: sceneSource },
] as const;

const canvas = document.querySelector<HTMLCanvasElement>('#demo');
const controls = document.querySelector<HTMLParagraphElement>('#demo-buttons');
if (!canvas || !controls) {
  throw new Error('デモに必要な要素が見つかりません');
}

let handle = startFullscreenShader(canvas, demos[0].source);

for (const [index, demo] of demos.entries()) {
  const button = document.createElement('button');
  button.type = 'button';
  button.textContent = demo.label;
  button.setAttribute('aria-pressed', index === 0 ? 'true' : 'false');
  button.addEventListener('click', () => {
    // いまのループを止めてから、新しいシェーダーで開始し直す(第6章の stop() の出番)。
    // 古いプログラムの解放は省略している(後始末は第35章)
    handle.stop();
    handle = startFullscreenShader(canvas, demo.source);
    for (const b of controls.querySelectorAll('button')) {
      b.setAttribute('aria-pressed', 'false');
    }
    button.setAttribute('aria-pressed', 'true');
  });
  controls.append(button);
}