レイマーチング

mat3 cameraBasis(vec3 eye, vec3 target) {
  vec3 back = normalize(eye - target);
  vec3 right = normalize(cross(vec3(0.0, 1.0, 0.0), back));
  vec3 up = cross(back, right); // 直交する単位ベクトル同士の cross なので正規化は不要
  return mat3(right, up, -back);
}

// 標準座標 p(短辺が -1〜1)を「センサー上の位置」と読み替えてレイの向きを作る。
// focal = 1 / tan(fov / 2) にすると、短辺方向の画角がちょうど fov になる
vec3 cameraRay(mat3 basis, vec2 p, float focal) {
  return normalize(basis * vec3(p, focal));
}

  vec3 eye = orbitEye(TARGET, theta, phi, RADIUS);
  mat3 basis = cameraBasis(eye, TARGET);
  vec3 rd = cameraRay(basis, p, 1.0 / tan(radians(FOV) * 0.5));

  float halfWidth = u_resolution.x * 0.5;
  bool right = gl_FragCoord.x > halfWidth;
  vec2 origin = vec2(right ? halfWidth : 0.0, 0.0);
  float side = min(halfWidth, u_resolution.y);
  vec2 p = ((gl_FragCoord.xy - origin) * 2.0 - vec2(halfWidth, u_resolution.y)) / side;

vec2 march(vec3 ro, vec3 rd, int maxSteps, float maxDist, float eps, float epsSlope) {
  float t = 0.0;
  for (int i = 0; i < maxSteps; i++) {
    float d = map(ro + rd * t);
    // ヒットのしきい値を t に比例させる。遠いほど 1 ピクセルの足跡が広いので、
    // 近くと同じ絶対値まで詰めるのは無駄になる。epsSlope = 0.0 にすれば
    // 固定のしきい値に戻る(比例の効き方の実測は本文 3 節)
    if (d < eps * (1.0 + epsSlope * t)) {
      return vec2(t, float(i + 1));
    }
    t += d;
    if (t > maxDist) {
      return vec2(-1.0, float(i + 1));
    }
  }
  return vec2(-1.0, float(maxSteps));
}

float sdBox(vec3 p, vec3 b) {
  vec3 q = abs(p) - b;
  return length(max(q, 0.0)) + min(max(q.x, max(q.y, q.z)), 0.0);
}

float map(vec3 p) {
  float a = u_time * ORBIT_SPEED;
  float d = sdSphere(p - vec3(0.85 * cos(a), 0.0, 0.85 * sin(a)), 0.42);
  d = smin(d, sdBox(p, vec3(0.34)) - 0.06, BLEND_K);
  d = smin(d, sdTorus(p, vec2(1.15, 0.11)), BLEND_K);
  return min(d, sdPlane(p, vec3(0.0, 1.0, 0.0), 0.75));
}

  // セルの中での位置に畳む。第24章 6 節の round 版そのままで、成分が 1 つ増えただけ
  vec3 q = p;
  q.xz -= CELL * round(q.xz / CELL);
  q.xz -= g_offset * OFFSET_DIR;

float dPillars(vec3 p) {
  vec2 id = clamp(round(p.xz / CELL - 0.5), LIMIT_LO, LIMIT_HI);
  vec2 cell = p.xz - CELL * (id + 0.5);
  return sdBox(vec3(cell.x, p.y + 0.08, cell.y), vec3(0.11, 0.62, 0.11)) - 0.04;
}

float map(vec3 p);

// 区画ごとに map の中身を変えたいが、map の引数は増やせない
// (march / calcNormal がプロトタイプどおりに呼ぶ)。そこでグローバル変数で渡す
float g_offset = 0.0;

vec3 albedoAt(vec3 p) {
  float a = dFloor(p);
  float b = dPillars(p);
  float c = dBody(p);
  if (a < b && a < c) {
    return FLOOR_SRGB;
  }
  return b < c ? PILLAR_SRGB : BODY_SRGB;
}

vec3 calcNormal(vec3 p, float eps) {
  vec2 h = vec2(eps, 0.0);
  return normalize(vec3(
      map(p + h.xyy) - map(p - h.xyy),
      map(p + h.yxy) - map(p - h.yxy),
      map(p + h.yyx) - map(p - h.yyx)));
}

// 前進差分版。中心の値を 1 回だけ取り、そこから 3 方向へ 1 歩ずつ。
// 評価は 4 回で済むが、サンプル点が正の側に偏るぶん面がわずかにずれる
vec3 calcNormalForward(vec3 p, float eps) {
  float d = map(p);
  vec2 h = vec2(eps, 0.0);
  return normalize(vec3(
      map(p + h.xyy) - d,
      map(p + h.yxy) - d,
      map(p + h.yyx) - d));
}

    vec3 n = calcNormal(pos, 0.0006 * (1.0 + hit.x));

float softShadow(vec3 ro, vec3 rd, float mint, float maxt, int maxSteps, float k) {
  float res = 1.0;
  float t = mint;
  for (int i = 0; i < maxSteps; i++) {
    float h = map(ro + rd * t);
    if (h < 0.001) {
      return 0.0;
    }
    res = min(res, k * h / t);
    t += h;
    if (t > maxt) {
      break;
    }
  }
  return res;
}

float calcAO(vec3 p, vec3 n, float delta, float k) {
  float occ = 0.0;
  float weight = 0.5; // 1 / 2^i
  for (int i = 1; i <= 5; i++) {
    float len = float(i) * delta;
    occ += weight * (len - map(p + n * len));
    weight *= 0.5;
  }
  return clamp(1.0 - k * occ, 0.0, 1.0);
}

    float diffuse = max(dot(n, LIGHT_DIRECTION), 0.0);
    float shadow = softShadow(
        pos + n * SHADOW_BIAS, LIGHT_DIRECTION, SHADOW_MIN_T, SHADOW_MAX_T, SHADOW_STEPS, shadowK);
    float ao = calcAO(pos, n, AO_DELTA, AO_STRENGTH);

    // 影は直接光にだけ掛け、AO は環境光にだけ掛ける(第21章 10 節・第17章 6 節)
    vec3 direct = srgbToLinear(SUN_SRGB) * SUN_INTENSITY * diffuse * shadow;
    vec3 ambient = sky * AMBIENT * ao;
    color = albedo * (direct + ambient);

    // 距離フォグ。奥へ行くほど空の色に置き換わる
    color = mix(sky, color, exp(-hit.x * FOG_DENSITY));
  }

  // 画面へ出す最後の 1 行。ここまでずっとリニア空間で計算してきた(第27章 2 節)
  fragColor = vec4(linearToSrgb(color), 1.0);

  vec3 sky = srgbToLinear(mix(SKY_LOW_SRGB, SKY_HIGH_SRGB, smoothstep(-0.1, 0.6, rd.y)));

function resolveIncludes(source: string): string {
  return source
    .replace('#include "color.glsl"', () => colorChunkSource.trim())
    .replace('#include "march.glsl"', () => marchChunkSource.trim());
}

// この章だけ dpr の上限を 1.5 に下げている(既定は 2)。
// 全画面レイマーチングは 1 ピクセルあたり map() を数十回評価するので、
// コストがピクセル数にそのまま比例する。dpr 2 → 1.5 でピクセル数は
// (1.5 / 2)^2 = 0.5625 倍になる。先例は第23章(ディファードの G-buffer)
const MAX_DPR = 1.5;

// 第28章の 4 本のデモが共有するチャンク。
// 各 .frag に書いた include 行を main.ts が文字列置換でこのファイルの中身に
// 差し替える(仕組みは第23章の pbr.glsl・第24章の sdf.glsl と同じ)。
//
// シーンの距離関数 map(vec3) は、このファイルではなく各 .frag が定義する。
// GLSL ES 3.00 は「呼ぶ前にプロトタイプか定義が必要」(仕様 §6.1)なので、
// ここではプロトタイプだけ置いて実体をあとから書く。プロトタイプと定義の
// 両方を書くのは合法(仕様 §12.6「多重の関数宣言(プロトタイプ)は許す」)。
float map(vec3 p);

// ---- 3D の距離関数 -----------------------------------------------------
// Inigo Quilez「distance functions」(iquilezles.org/articles/distfunctions/)が
// 「exact な SDF」として挙げているものをそのまま使う。第24章の 2D 版と
// 見比べると、sdBox は max が 1 段深くなっただけで式の形は同じ。

float sdSphere(vec3 p, float r) {
  return length(p) - r;
}

float sdBox(vec3 p, vec3 b) {
  vec3 q = abs(p) - b;
  return length(max(q, 0.0)) + min(max(q.x, max(q.y, q.z)), 0.0);
}

// t.x = 輪の半径、t.y = 管の半径。xz 平面に寝た輪になる
float sdTorus(vec3 p, vec2 t) {
  vec2 q = vec2(length(p.xz) - t.x, p.y);
  return length(q) - t.y;
}

// n は単位ベクトル、h は原点から面までの符号付きの距離。
// n = (0, 1, 0) / h = 0.75 なら「y = -0.75 の水平な床」になる
float sdPlane(vec3 p, vec3 n, float h) {
  return dot(p, n) + h;
}

// 第24章の smin と同じ式(1 文字も変えていない)。k は溶ける幅で、
// |a - b| >= k なら min と一致し、a == b のとき min より k / 4 だけ小さい
float smin(float a, float b, float k) {
  float h = clamp(0.5 + 0.5 * (b - a) / k, 0.0, 1.0);
  return mix(b, a, h) - k * h * (1.0 - h);
}

// ---- カメラ ------------------------------------------------------------

// 球面座標 → カメラ位置。第15章の軌道カメラとまったく同じ式で、
// この章は第15章の流儀(水平面から測る仰角 phi・+z から測る方位角 theta)を採る
vec3 orbitEye(vec3 target, float theta, float phi, float radius) {
  return target + radius * vec3(cos(phi) * sin(theta), sin(phi), cos(phi) * cos(theta));
}

// カメラの基底を列に並べた mat3。中身は第12章の lookAt と同じ cross 2 回で、
// 列 0 = 右、列 1 = 上、列 2 = 前(視線の向き)。
// back は第12章の zAxis、right は xAxis、up は yAxis にそのまま対応する
mat3 cameraBasis(vec3 eye, vec3 target) {
  vec3 back = normalize(eye - target);
  vec3 right = normalize(cross(vec3(0.0, 1.0, 0.0), back));
  vec3 up = cross(back, right); // 直交する単位ベクトル同士の cross なので正規化は不要
  return mat3(right, up, -back);
}

// 標準座標 p(短辺が -1〜1)を「センサー上の位置」と読み替えてレイの向きを作る。
// focal = 1 / tan(fov / 2) にすると、短辺方向の画角がちょうど fov になる
vec3 cameraRay(mat3 basis, vec2 p, float focal) {
  return normalize(basis * vec3(p, focal));
}

// ---- sphere tracing ----------------------------------------------------

// 距離のぶんだけ進む前進。名前の由来は John C. Hart, "Sphere tracing: a
// geometric method for the antialiased ray tracing of implicit surfaces",
// The Visual Computer 12, 527-545 (1996)。
// 戻り値 x = 当たった距離 t(外れたら -1.0)、y = 消費したステップ数
vec2 march(vec3 ro, vec3 rd, int maxSteps, float maxDist, float eps, float epsSlope) {
  float t = 0.0;
  for (int i = 0; i < maxSteps; i++) {
    float d = map(ro + rd * t);
    // ヒットのしきい値を t に比例させる。遠いほど 1 ピクセルの足跡が広いので、
    // 近くと同じ絶対値まで詰めるのは無駄になる。epsSlope = 0.0 にすれば
    // 固定のしきい値に戻る(比例の効き方の実測は本文 3 節)
    if (d < eps * (1.0 + epsSlope * t)) {
      return vec2(t, float(i + 1));
    }
    t += d;
    if (t > maxDist) {
      return vec2(-1.0, float(i + 1));
    }
  }
  return vec2(-1.0, float(maxSteps));
}

// ---- 法線 --------------------------------------------------------------

// 中心差分による法線。map を 6 回評価する(本文 5 節)。
// 出典: Inigo Quilez「normals for an SDF」(iquilezles.org/articles/normalsSDF/)
vec3 calcNormal(vec3 p, float eps) {
  vec2 h = vec2(eps, 0.0);
  return normalize(vec3(
      map(p + h.xyy) - map(p - h.xyy),
      map(p + h.yxy) - map(p - h.yxy),
      map(p + h.yyx) - map(p - h.yyx)));
}

// ---- 影 ----------------------------------------------------------------

// ソフトシャドウ。表面から光源方向へもう 1 本 sphere tracing し、
// 「当たりかけた度合い」h / t の最小値を遮蔽率にする。
// 出典: Inigo Quilez「soft shadows in raymarched SDFs」
// (iquilezles.org/articles/rmshadows/)のオリジナル版。同記事によれば
// この式の公開は 2010 年で、k は光源の大きさ(立体角)の逆数に相当し、
// 大きいほど影が硬くなる
float softShadow(vec3 ro, vec3 rd, float mint, float maxt, int maxSteps, float k) {
  float res = 1.0;
  float t = mint;
  for (int i = 0; i < maxSteps; i++) {
    float h = map(ro + rd * t);
    if (h < 0.001) {
      return 0.0;
    }
    res = min(res, k * h / t);
    t += h;
    if (t > maxt) {
      break;
    }
  }
  return res;
}

// ---- アンビエントオクルージョン ----------------------------------------

// 法線方向へ delta ずつ離れた 5 点で距離場を測り、「何も無ければ i * delta の
// はず」との差を、遠い点ほど半分ずつ軽くして積む。map の評価回数は 5 回で固定。
// 出典: Inigo Quilez「Rendering Worlds With Two Triangles」(nvscene 2008 の
// 発表資料 iquilezles.org/articles/nvscene2008/rwwtt.pdf・47〜53 枚目)。
// 同資料は元のアイデアを Alex Evans, "Fast Approximations for Global
// Illumination on Dynamic Scenes"(SIGGRAPH 2006 コースノート
// "Advanced Real-Time Rendering in 3D Graphics and Games" 第 9 章)に帰している
float calcAO(vec3 p, vec3 n, float delta, float k) {
  float occ = 0.0;
  float weight = 0.5; // 1 / 2^i
  for (int i = 1; i <= 5; i++) {
    float len = float(i) * delta;
    occ += weight * (len - map(p + n * len));
    weight *= 0.5;
  }
  return clamp(1.0 - k * occ, 0.0, 1.0);
}

// 第28章 デモ4 が使う色変換。第27章 color.glsl から srgbToLinear / linearToSrgb の
// 2 関数だけを複製したもの(この 2 関数はヘッダーコメント以外 1 文字も違わない。
// 第27章のファイルにはトーンマッピングと余弦パレットも入っているので、
// ファイル全体としては別物)。この章では「ライティングをリニア空間で計算し、
// 出す直前に sRGB へ戻す」ためだけに使う。変換の理屈と伝達関数の出どころは第27章 2 節。
// なおデモ1〜3 はこの往復を通さず、画面に出る sRGB 値を直接書くと決めている(本文 7 節)。

/**
 * sRGB エンコード値 → リニア値。
 * 出典: OpenGL ES 3.0.6 §3.8.16 式 (3.26)。GPU が sRGB テクスチャを読むときの変換そのもの。
 * 境界 (0.04045) では 2 つの式の差が 2.3e-9 しかないので、等号がどちら側かは問題にならない。
 */
vec3 srgbToLinear(vec3 c) {
  vec3 lo = c / 12.92;
  vec3 hi = pow((c + 0.055) / 1.055, vec3(2.4));
  return mix(lo, hi, step(vec3(0.04045), c));
}

/**
 * リニア値 → sRGB エンコード値。画面へ出す最後の 1 行はこれになる。
 * 出典: OpenGL ES 3.0.6 §4.1.8 式 (4.1)。仕様は指数を 0.41666 と書いているが、
 * これは 1/2.4 = 0.4166666… を打ち切った値で、8 ビット出力での差は最大 1 段。1/2.4 を使う。
 * 仕様の式は 0 以下と 1 以上を切り落とすので、clamp がその 2 本の枝にあたる。
 */
vec3 linearToSrgb(vec3 c) {
  c = clamp(c, 0.0, 1.0);
  vec3 lo = c * 12.92;
  vec3 hi = 1.055 * pow(c, vec3(1.0 / 2.4)) - 0.055;
  return mix(lo, hi, step(vec3(0.0031308), c));
}

#version 300 es

// 第28章 デモ1: sphere tracing のステップ数を色で見る。
// 各ピクセルから 1 本レイを飛ばし、map の値だけ進む前進を繰り返して、
// ヒットするまでに何ステップ使ったかを色にした。形は塗っていない。
//   暗い青 = 数ステップで済んだ / 明るいほど多い(MAX_STEPS を使い切ると純白)
// シルエットの縁と、床を浅い角度でなめる方向でステップ数が跳ね上がるのが見どころ。
// ポインタ: 左右で方位角、上下で仰角(カメラの軌道)。

precision highp float;

uniform float u_time;
uniform vec2 u_resolution;
uniform vec2 u_mouse;

out vec4 fragColor;

#include "march.glsl"

// ---- 書き換えて試すための定数 ----------------------------------------
// 1 本のレイに許すステップ数。下げるとそのぶん軽くなり、白い領域が広がる
const int MAX_STEPS = 128;
// これより遠くまで進んだら「何にも当たらなかった」とみなす
const float MAX_DIST = 24.0;
// ヒットのしきい値の基準値と、距離に対する傾き。
// march の中で eps * (1.0 + epsSlope * t) として使われる
const float EPS = 0.0015;
const float EPS_SLOPE = 0.25;
// 短辺方向の画角(度)。第3部のカメラ標準は 45 度だった
const float FOV = 45.0;
// カメラの注視点と軌道半径
const vec3 TARGET = vec3(0.0, -0.10, 0.0);
const float RADIUS = 4.2;
// 球が本体のまわりを回る速さ
const float ORBIT_SPEED = 0.35;
// 溶ける幅(第24章の smin の k)
const float BLEND_K = 0.35;
// ----------------------------------------------------------------------

// このデモのシーン。球・箱・輪を smin で溶かし合わせ、床を min で足す
float map(vec3 p) {
  float a = u_time * ORBIT_SPEED;
  float d = sdSphere(p - vec3(0.85 * cos(a), 0.0, 0.85 * sin(a)), 0.42);
  d = smin(d, sdBox(p, vec3(0.34)) - 0.06, BLEND_K);
  d = smin(d, sdTorus(p, vec2(1.15, 0.11)), BLEND_K);
  return min(d, sdPlane(p, vec3(0.0, 1.0, 0.0), 0.75));
}

// ステップ数 0〜1 を色に写す。暗い青 → 青 → 黄 → 白。
// この色は光の量ではなく診断用のカラーマップなので、画面に出る sRGB 値として
// 直接選んでいる(リニア空間との往復は通さない。第27章 3 節・本文 7 節)
vec3 stepsColor(float t01) {
  vec3 c = mix(vec3(0.05, 0.07, 0.16), vec3(0.20, 0.58, 0.85), smoothstep(0.0, 0.35, t01));
  c = mix(c, vec3(0.95, 0.74, 0.24), smoothstep(0.32, 0.72, t01));
  return mix(c, vec3(1.0, 0.98, 0.94), smoothstep(0.72, 1.0, t01));
}

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

  // ポインタで軌道を動かす。上限の 0.85 rad(約 49 度)は構図で決めた値。真上(pi/2)へ
  // 寄せると cameraBasis の cross が退化するので、そもそも近づけない(第15章と同じ理由。
  // 第15章の PHI_LIMIT は pi/2 - 0.05 で、あちらは限界の ε 手前まで許している)。
  // 下限はカメラが床(y = -0.75)より十分上に来るところで止める
  vec2 mouse01 = u_mouse / u_resolution;
  float theta = mix(-1.1, 1.1, mouse01.x);
  float phi = mix(0.03, 0.85, mouse01.y);

  vec3 eye = orbitEye(TARGET, theta, phi, RADIUS);
  mat3 basis = cameraBasis(eye, TARGET);
  vec3 rd = cameraRay(basis, p, 1.0 / tan(radians(FOV) * 0.5));

  vec2 hit = march(eye, rd, MAX_STEPS, MAX_DIST, EPS, EPS_SLOPE);
  vec3 color = stepsColor(hit.y / float(MAX_STEPS));

  fragColor = vec4(color, 1.0);
}

#version 300 es

// 第28章 デモ2: 3D の繰り返しと、それが壊れるとき。
// 画面を左右 2 区画に分け、まったく同じシーンを同じカメラから描く。
//   左 = 形をセルの中央に置いた繰り返し   → 距離は過大評価にならず、絵は破綻しない
//   右 = 同じ形をセルの中でずらした繰り返し → 距離が過大評価になり、レイが面を突き抜ける
// ポインタ: 左右で方位角、上下で右区画のずらし量(いちばん下で 0 = 左と同じ)。

precision highp float;

uniform vec2 u_resolution;
uniform vec2 u_mouse;

out vec4 fragColor;

#include "march.glsl"

// ---- 書き換えて試すための定数 ----------------------------------------
const int MAX_STEPS = 96;
const float MAX_DIST = 24.0;
const float EPS = 0.0015;
const float EPS_SLOPE = 0.25;
const float FOV = 45.0;
const vec3 TARGET = vec3(0.0, -0.15, 0.0);
const float RADIUS = 4.6;
// カメラの仰角(このデモは固定)
const float PHI = 0.30;
// セルの一辺。xz 平面に敷き詰める
const float CELL = 1.30;
// セルの中の球の半径。CELL / 2 より小さいので、形はセルからはみ出さない
const float BALL = 0.40;
// ずらす向き。ポインタ上下でこの向きに 0〜MAX_OFFSET だけずらす
const vec2 OFFSET_DIR = vec2(0.88, 0.47);
const float MAX_OFFSET = 0.42;
// 溶ける幅
const float BLEND_K = 0.22;
// 面から光源へ向かう単位ベクトル(第17章の約束)
const vec3 LIGHT_DIRECTION = normalize(vec3(0.45, 0.80, 0.40));
// ----------------------------------------------------------------------

// 区画ごとに map の中身を変えたいが、map の引数は増やせない
// (march / calcNormal がプロトタイプどおりに呼ぶ)。そこでグローバル変数で渡す
float g_offset = 0.0;

float map(vec3 p) {
  // セルの中での位置に畳む。第24章 6 節の round 版そのままで、成分が 1 つ増えただけ
  vec3 q = p;
  q.xz -= CELL * round(q.xz / CELL);
  q.xz -= g_offset * OFFSET_DIR;

  float d = sdSphere(q - vec3(0.0, -0.18, 0.0), BALL);
  d = smin(d, sdBox(q - vec3(0.0, 0.26, 0.0), vec3(BALL * 0.52)), BLEND_K);
  return min(d, sdPlane(p, vec3(0.0, 1.0, 0.0), 0.75));
}

void main() {
  // 区画は左右 2 枚。標準座標の 1 行を「区画の幅」で使い直す
  float halfWidth = u_resolution.x * 0.5;
  bool right = gl_FragCoord.x > halfWidth;
  vec2 origin = vec2(right ? halfWidth : 0.0, 0.0);
  float side = min(halfWidth, u_resolution.y);
  vec2 p = ((gl_FragCoord.xy - origin) * 2.0 - vec2(halfWidth, u_resolution.y)) / side;

  vec2 mouse01 = u_mouse / u_resolution;
  g_offset = right ? MAX_OFFSET * mouse01.y : 0.0;

  float theta = mix(-1.2, 1.2, mouse01.x);
  vec3 eye = orbitEye(TARGET, theta, PHI, RADIUS);
  mat3 basis = cameraBasis(eye, TARGET);
  vec3 rd = cameraRay(basis, p, 1.0 / tan(radians(FOV) * 0.5));

  vec2 hit = march(eye, rd, MAX_STEPS, MAX_DIST, EPS, EPS_SLOPE);

  vec3 color = vec3(0.06, 0.07, 0.09);
  if (hit.x > 0.0) {
    vec3 pos = eye + rd * hit.x;
    vec3 n = calcNormal(pos, 0.0015);
    // 素の Lambert + 一定の環境光。ここは絵の仕上げではなく形の確認なので、
    // 下の色は「画面に出る sRGB 値」として直接選んでいる(光の量ではない。
    // 第27章 3 節)。リニア / sRGB の往復を通すのはデモ4 だけ(本文 7 節)
    float diffuse = max(dot(n, LIGHT_DIRECTION), 0.0);
    // 床(y = -0.75)だけ色を変える。step の引数は「床なら 1」になるように選んだ
    vec3 albedo = mix(vec3(0.85, 0.62, 0.38), vec3(0.30, 0.34, 0.40), step(0.74, -pos.y));
    color = albedo * (0.18 + 0.82 * diffuse);
    color *= 1.0 - 0.85 * smoothstep(4.0, 14.0, hit.x); // 遠くを沈めて奥行きを出す
  }

  // 仕切り線は描画バッファの px 単位で引く(第4部の規約)
  float toEdge = abs(gl_FragCoord.x - halfWidth);
  color = mix(vec3(0.02, 0.02, 0.03), color, smoothstep(0.0, 1.5, toEdge));

  fragColor = vec4(color, 1.0);
}

#version 300 es

// 第28章 デモ3: 法線を数値微分で作る。
// 画面を左右 2 区画に分け、同じシーンを同じカメラから描く。
//   左 = 中心差分で作った法線を、そのまま色にしたもの(n * 0.5 + 0.5)
//   右 = その法線に Lambert を当てたもの
// ポインタ: 左右で方位角、上下で差分の刻み eps(10^-7 〜 10^-1 の対数スケール)。
// 小さすぎると差が float の精度に埋もれ、大きすぎると細部が丸まる(本文 5 節)。

precision highp float;

uniform vec2 u_resolution;
uniform vec2 u_mouse;

out vec4 fragColor;

#include "march.glsl"

// ---- 書き換えて試すための定数 ----------------------------------------
const int MAX_STEPS = 96;
const float MAX_DIST = 24.0;
const float EPS = 0.0015;
const float EPS_SLOPE = 0.25;
const float FOV = 45.0;
const vec3 TARGET = vec3(0.0, -0.05, 0.0);
const float RADIUS = 3.6;
const float PHI = 0.26;
// 差分の刻みの範囲(10 の指数で指定する)
const float LOG_EPS_MIN = -7.0;
const float LOG_EPS_MAX = -1.0;
// 溶ける幅
const float BLEND_K = 0.30;
// 面から光源へ向かう単位ベクトル(第17章の約束)
const vec3 LIGHT_DIRECTION = normalize(vec3(0.45, 0.80, 0.40));
// ----------------------------------------------------------------------

float map(vec3 p) {
  float d = sdSphere(p - vec3(-0.42, 0.06, 0.0), 0.46);
  d = smin(d, sdBox(p - vec3(0.46, -0.06, 0.0), vec3(0.30)) - 0.05, BLEND_K);
  d = smin(d, sdTorus(p - vec3(0.0, 0.02, 0.0), vec2(0.98, 0.10)), BLEND_K);
  return min(d, sdPlane(p, vec3(0.0, 1.0, 0.0), 0.75));
}

void main() {
  float halfWidth = u_resolution.x * 0.5;
  bool right = gl_FragCoord.x > halfWidth;
  vec2 origin = vec2(right ? halfWidth : 0.0, 0.0);
  float side = min(halfWidth, u_resolution.y);
  vec2 p = ((gl_FragCoord.xy - origin) * 2.0 - vec2(halfWidth, u_resolution.y)) / side;

  vec2 mouse01 = u_mouse / u_resolution;
  float theta = mix(-1.2, 1.2, mouse01.x);
  float normalEps = pow(10.0, mix(LOG_EPS_MIN, LOG_EPS_MAX, mouse01.y));

  vec3 eye = orbitEye(TARGET, theta, PHI, RADIUS);
  mat3 basis = cameraBasis(eye, TARGET);
  vec3 rd = cameraRay(basis, p, 1.0 / tan(radians(FOV) * 0.5));

  vec2 hit = march(eye, rd, MAX_STEPS, MAX_DIST, EPS, EPS_SLOPE);

  vec3 color = vec3(0.06, 0.07, 0.09);
  if (hit.x > 0.0) {
    vec3 pos = eye + rd * hit.x;
    vec3 n = calcNormal(pos, normalEps);
    // どちらの区画も法線を見るための可視化なので、色は「画面に出る sRGB 値」として
    // 直接書いている(光の量ではない。第27章 3 節)。リニア / sRGB の往復を通すのは
    // デモ4 だけ(本文 7 節)。左半分は法線をそのまま色にしているので、往復を通す相手ではない
    if (right) {
      float diffuse = max(dot(n, LIGHT_DIRECTION), 0.0);
      color = vec3(0.78, 0.74, 0.70) * (0.16 + 0.84 * diffuse);
    } else {
      // 向きをそのまま色に。x が赤、y が緑、z が青
      color = n * 0.5 + 0.5;
    }
    color *= 1.0 - 0.7 * smoothstep(3.5, 12.0, hit.x);
  }

  float toEdge = abs(gl_FragCoord.x - halfWidth);
  color = mix(vec3(0.02, 0.02, 0.03), color, smoothstep(0.0, 1.5, toEdge));

  fragColor = vec4(color, 1.0);
}

#version 300 es

// 第28章 デモ4: 仕上げ。ここまでの部品を全部使った一枚絵。
//   ① 有限繰り返し(clamp した番地)で並べた 16 本の柱
//   ② smin で溶かした球 + 輪と、その台座
//   ③ 中心差分の法線 → Lambert
//   ④ 光源方向へもう 1 本レイを進めるソフトシャドウ(直接光に掛ける)
//   ⑤ 法線方向 5 点のアンビエントオクルージョン(環境光に掛ける)
//   ⑥ 距離フォグ
//   ⑦ ライティングはリニア空間で計算し、出す直前だけ sRGB へ戻す(第27章 2 節)
// ポインタ: 左右で方位角、上下で影のやわらかさ(下がやわらかい = 光源が大きい)。

precision highp float;

uniform float u_time;
uniform vec2 u_resolution;
uniform vec2 u_mouse;

out vec4 fragColor;

#include "color.glsl"
#include "march.glsl"

// ---- 書き換えて試すための定数 ----------------------------------------
const int MAX_STEPS = 96;
const float MAX_DIST = 26.0;
const float EPS = 0.0015;
const float EPS_SLOPE = 0.25;
const float FOV = 45.0;
const vec3 TARGET = vec3(0.0, -0.05, 0.0);
const float RADIUS = 5.0;
const float PHI = 0.22;
// 柱の格子。セルの一辺と、番地を止める範囲(-2〜1 の 4 × 4 = 16 本)
const float CELL = 2.20;
const vec2 LIMIT_LO = vec2(-2.0);
const vec2 LIMIT_HI = vec2(1.0);
// 溶ける幅
const float BLEND_K = 0.28;
// 影のレイに許すステップ数と、始点を法線方向へ逃がす量
const int SHADOW_STEPS = 48;
const float SHADOW_MIN_T = 0.03;
const float SHADOW_MAX_T = 9.0;
const float SHADOW_BIAS = 0.012;
// アンビエントオクルージョンの刻みと強さ
const float AO_DELTA = 0.12;
const float AO_STRENGTH = 4.0;
// フォグの濃さ。exp(-t * FOG_DENSITY) が残る割合
const float FOG_DENSITY = 0.12;
// 面から光源へ向かう単位ベクトル(第17章の約束)
const vec3 LIGHT_DIRECTION = normalize(vec3(0.42, 0.72, 0.55));
// 色はすべて sRGB で書き、読んだ直後にリニアへ直す(第27章 3 節)
const vec3 SUN_SRGB = vec3(1.00, 0.94, 0.86);
const float SUN_INTENSITY = 1.15;
const vec3 SKY_LOW_SRGB = vec3(0.06, 0.07, 0.09);
const vec3 SKY_HIGH_SRGB = vec3(0.15, 0.18, 0.24);
const float AMBIENT = 0.34;
const vec3 BODY_SRGB = vec3(0.86, 0.66, 0.42);
const vec3 PILLAR_SRGB = vec3(0.72, 0.74, 0.78);
const vec3 FLOOR_SRGB = vec3(0.40, 0.43, 0.48);
// ----------------------------------------------------------------------

// シーンを 3 つの部品に分けて書く。map はその min を返すだけ
float dFloor(vec3 p) {
  return sdPlane(p, vec3(0.0, 1.0, 0.0), 0.70);
}

// 柱。番地を clamp で止めた有限繰り返し(第24章 6 節の 3D 版)。
// - 0.5 しているのは、セルの中心を半セルずらして原点(中央)を空けるため
float dPillars(vec3 p) {
  vec2 id = clamp(round(p.xz / CELL - 0.5), LIMIT_LO, LIMIT_HI);
  vec2 cell = p.xz - CELL * (id + 0.5);
  return sdBox(vec3(cell.x, p.y + 0.08, cell.y), vec3(0.11, 0.62, 0.11)) - 0.04;
}

// 台座と、その上の球 + 輪。球だけゆっくり上下する
float dBody(vec3 p) {
  vec3 c = vec3(0.0, 0.12 + 0.06 * sin(u_time * 0.6), 0.0);
  float d = sdSphere(p - c, 0.50);
  d = smin(d, sdTorus(p - vec3(0.0, 0.12, 0.0), vec2(0.86, 0.10)), BLEND_K);
  return min(d, sdBox(p - vec3(0.0, -0.66, 0.0), vec3(0.72, 0.05, 0.72)) - 0.03);
}

float map(vec3 p) {
  return min(dFloor(p), min(dPillars(p), dBody(p)));
}

// map が返すのは float 1 つだけなので、「どの部品に当たったか」は残らない。
// 当たった点で部品ごとの距離を測り直し、いちばん近いものの色を使う
vec3 albedoAt(vec3 p) {
  float a = dFloor(p);
  float b = dPillars(p);
  float c = dBody(p);
  if (a < b && a < c) {
    return FLOOR_SRGB;
  }
  return b < c ? PILLAR_SRGB : BODY_SRGB;
}

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

  vec2 mouse01 = u_mouse / u_resolution;
  float theta = mix(-1.2, 1.2, mouse01.x);
  float shadowK = mix(4.0, 40.0, mouse01.y); // 光源の大きさの逆数に相当(本文 6 節)

  vec3 eye = orbitEye(TARGET, theta, PHI, RADIUS);
  mat3 basis = cameraBasis(eye, TARGET);
  vec3 rd = cameraRay(basis, p, 1.0 / tan(radians(FOV) * 0.5));

  // 空とフォグの色。sRGB で書いた定数をリニアへ直してから計算に入れる
  vec3 sky = srgbToLinear(mix(SKY_LOW_SRGB, SKY_HIGH_SRGB, smoothstep(-0.1, 0.6, rd.y)));

  vec2 hit = march(eye, rd, MAX_STEPS, MAX_DIST, EPS, EPS_SLOPE);

  vec3 color = sky;
  if (hit.x > 0.0) {
    vec3 pos = eye + rd * hit.x;
    // 法線の刻みを距離に比例させる。遠くの 1 ピクセルは太いので、
    // そこで細かい差分を取っても揺れるだけになる(本文 5 節)
    vec3 n = calcNormal(pos, 0.0006 * (1.0 + hit.x));
    vec3 albedo = srgbToLinear(albedoAt(pos));

    float diffuse = max(dot(n, LIGHT_DIRECTION), 0.0);
    float shadow = softShadow(
        pos + n * SHADOW_BIAS, LIGHT_DIRECTION, SHADOW_MIN_T, SHADOW_MAX_T, SHADOW_STEPS, shadowK);
    float ao = calcAO(pos, n, AO_DELTA, AO_STRENGTH);

    // 影は直接光にだけ掛け、AO は環境光にだけ掛ける(第21章 10 節・第17章 6 節)
    vec3 direct = srgbToLinear(SUN_SRGB) * SUN_INTENSITY * diffuse * shadow;
    vec3 ambient = sky * AMBIENT * ao;
    color = albedo * (direct + ambient);

    // 距離フォグ。奥へ行くほど空の色に置き換わる
    color = mix(sky, color, exp(-hit.x * FOG_DENSITY));
  }

  // 画面へ出す最後の 1 行。ここまでずっとリニア空間で計算してきた(第27章 2 節)
  fragColor = vec4(linearToSrgb(color), 1.0);
}

// 第28章: レイマーチング
// 第2部と同じ「1 canvas + 切替ボタン」構成(第10章の main.ts をそのまま踏襲)。
// 4 本のフラグメントシェーダーが共通のチャンク(march.glsl / color.glsl)を
// #include で取り込むので、送る前に文字列置換で解決する。

import { startFullscreenShader } from '../../lib/fullscreen-shader';
import stepsSource from './01-steps.frag?raw';
import repeatSource from './02-repeat.frag?raw';
import normalSource from './03-normal.frag?raw';
import sceneSource from './04-scene.frag?raw';
import colorChunkSource from './color.glsl?raw';
import marchChunkSource from './march.glsl?raw';

// 第23章から続く極小のインクルード。置換文字列を関数で渡しているのは、
// String.replace が `$&` などを特別扱いするため。
// color.glsl と march.glsl は互いに依存していないので、順序はどちらでもよい
function resolveIncludes(source: string): string {
  return source
    .replace('#include "color.glsl"', () => colorChunkSource.trim())
    .replace('#include "march.glsl"', () => marchChunkSource.trim());
}

const demos = [
  { id: 'steps', label: 'ステップ数', source: resolveIncludes(stepsSource) },
  { id: 'repeat', label: '繰り返しと破綻', source: resolveIncludes(repeatSource) },
  { id: 'normal', label: '法線と刻み幅', source: resolveIncludes(normalSource) },
  { id: 'scene', label: '影 + AO + フォグ', source: resolveIncludes(sceneSource) },
] as const;

// この章だけ dpr の上限を 1.5 に下げている(既定は 2)。
// 全画面レイマーチングは 1 ピクセルあたり map() を数十回評価するので、
// コストがピクセル数にそのまま比例する。dpr 2 → 1.5 でピクセル数は
// (1.5 / 2)^2 = 0.5625 倍になる。先例は第23章(ディファードの G-buffer)
const MAX_DPR = 1.5;

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, { maxDpr: MAX_DPR });

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, { maxDpr: MAX_DPR });
    for (const b of controls.querySelectorAll('button')) {
      b.setAttribute('aria-pressed', 'false');
    }
    button.setAttribute('aria-pressed', 'true');
  });
  controls.append(button);
}