乱数とノイズ

// CPU の疑似乱数生成器(three.js の MathUtils.seededRandom と同じ Mulberry32)。
// 状態 seed を持ち、1 回呼ぶたびに書き換える。「次の値」は「前の値」なしには出せない
let seed = 12345;
function random(): number {
  let t = (seed += 0x6d2b79f5);
  t = Math.imul(t ^ (t >>> 15), t | 1);
  t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
  return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
}

/**
 * 定番の「1 行ハッシュ」。GLSL ES 3.00 §4.5.1 は三角関数の精度を「未定義」と
 * 定めているので、この式の結果は実装によって変わりうる。本文 2 節
 */
float fractSinHash(vec2 cell) {
  return fract(sin(dot(cell, vec2(12.9898, 78.233))) * 43758.5453);
}

#version 300 es

// 第25章 デモ1: 白色ノイズを 2 通りのハッシュで作り、左右に並べて比べる。
//   左 = 定番の fract(sin(dot(p, k)) * 43758.5453)
//   右 = 整数ハッシュ(noise.glsl の hash21 → pcg3d)
// 両方に「同じセル座標」を渡しているので、違いはハッシュの中身だけ。
//
// ポインタ左右 = 格子の細かさ。
// ポインタ上下 = セル座標を 2 の冪だけ遠くへ運ぶ(0 → 2^24)。
// 未操作のとき u_mouse は canvas の中央なので、読み込み直後は e = 12(オフセット 4096)。
// オフセット 0 の素の絵を見るにはポインタを下げる。
// 上へ動かしていくと、まず左だけが崩れる(sin に渡す引数の精度が足りなくなる)。
// 一番上まで上げると右も崩れるが、そちらはハッシュではなく
// 「セル座標を載せている float そのもの」の精度の限界。

precision highp float;
precision highp int; // ← これが無いと右のハッシュが別物になる。本文 3 節

uniform vec2 u_resolution;
uniform vec2 u_mouse;

out vec4 fragColor;

#include "noise.glsl"

// ---- 書き換えて試すための定数 ----------------------------------------
// 格子の細かさ(画面の短辺あたりのセル数)。ポインタ左右でこの間を動く
const float CELLS_MIN = 8.0;
const float CELLS_MAX = 160.0;
// ポインタを一番上まで動かしたときのオフセット(2 の何乗まで運ぶか)
const float MAX_EXP = 24.0;
// ----------------------------------------------------------------------

/**
 * 定番の「1 行ハッシュ」。GLSL ES 3.00 §4.5.1 は三角関数の精度を「未定義」と
 * 定めているので、この式の結果は実装によって変わりうる。本文 2 節
 */
float fractSinHash(vec2 cell) {
  return fract(sin(dot(cell, vec2(12.9898, 78.233))) * 43758.5453);
}

void main() {
  vec2 uv = gl_FragCoord.xy / u_resolution;

  // 左右どちらの帯にいるか。0 = 左(fract(sin))、1 = 右(pcg3d)
  int side = uv.x < 0.5 ? 0 : 1;

  // 帯ごとのローカル座標。両方の帯が「同じセル座標」を見るようにする。
  // x に aspect * 0.5 を掛けているのはセルを正方形に保つため
  float aspect = u_resolution.x / u_resolution.y;
  vec2 local = vec2(fract(uv.x * 2.0) * aspect * 0.5, uv.y);

  float mx = u_mouse.x / u_resolution.x;
  float my = u_mouse.y / u_resolution.y;

  vec2 base = floor(local * mix(CELLS_MIN, CELLS_MAX, mx));

  // 座標を遠くへ運ぶ。2 の冪に丸めているのは、崩れ始める桁を読み取りやすくするため
  float e = min(floor(my * (MAX_EXP + 1.0)), MAX_EXP);
  vec2 cell = base + (e < 1.0 ? 0.0 : exp2(e));

  // 左は float のまま sin に渡し、右は ivec2 にしてから整数ハッシュへ渡す
  float h = side == 0 ? fractSinHash(cell) : hash21(ivec2(cell));

  vec3 color = vec3(0.06, 0.07, 0.09) + h * vec3(0.86, 0.88, 0.92);

  // 中央の仕切り線(第4部の既定形。描画バッファのピクセル単位で引く)
  float border = abs(gl_FragCoord.x - u_resolution.x * 0.5);
  color = mix(vec3(0.02, 0.02, 0.03), color, smoothstep(0.0, 1.5, border));

  fragColor = vec4(color, 1.0);
}

uvec3 pcg3d(uvec3 v) {
  v = v * 1664525u + 1013904223u;
  v.x += v.y * v.z;
  v.y += v.z * v.x;
  v.z += v.x * v.y;
  v ^= v >> 16u;
  v.x += v.y * v.z;
  v.y += v.z * v.x;
  v.z += v.x * v.y;
  return v;
}

float hash21(ivec2 cell) {
  uint h = pcg3d(uvec3(ivec3(cell, 0))).x;
  return float(h) / 4294967296.0; // 2^32 で割って 0〜1 へ
}

precision highp float;
precision highp int; // ← これが無いと右のハッシュが別物になる。本文 3 節

// これは書いてはいけない。p が負のとき、float → uint の変換は未定義(§5.4.1)
uvec2 bad = uvec2(floor(p));

// ivec2 を経由する。int → uint はビットパターンをそのまま移すので、
// 負の座標でも「決まった 1 つの uint」に落ちる(§5.4.1)
ivec2 cell = ivec2(floor(p));
uvec2 good = uvec2(cell);

float valueNoise(vec2 p) {
  vec2 base = floor(p);
  ivec2 cell = ivec2(base);
  vec2 t = p - base;
  vec2 u = vec2(fade(t.x), fade(t.y));

  float a = hash21(cell + ivec2(0, 0));
  float b = hash21(cell + ivec2(1, 0));
  float c = hash21(cell + ivec2(0, 1));
  float d = hash21(cell + ivec2(1, 1));

  return mix(mix(a, b, u.x), mix(c, d, u.x), u.y);
}

/** Perlin の 5 次補間。t = 0 と t = 1 の両端で 1 階・2 階の傾きがともに 0 になる */
float fade(float t) {
  return t * t * t * (t * (t * 6.0 - 15.0) + 10.0);
}

/** 補間関数 4 種。mode = 0 最近傍 / 1 線形 / 2 三次 / 3 五次 */
float interpolate(float t, int mode) {
  if (mode == 0) return step(0.5, t); // 補間しない(近いほうの格子点の値をそのまま)
  if (mode == 1) return t; // 線形。mix にそのまま渡すのと同じ
  if (mode == 2) return t * t * (3.0 - 2.0 * t); // 3 次。smoothstep の中身
  return fade(t); // 5 次。noise.glsl の fade
}

#version 300 es

// 第25章 デモ2: value noise の補間関数を 4 種類並べて比べる。
//   横 4 列 = 最近傍 / 線形 / 3 次(smoothstep と同じ式) / 5 次(Perlin の fade)
//   上の段  = ノイズそのもの
//   下の段  = 同じノイズの「勾配の大きさ」(微分表示)
// 上の段だけ見ていると 3 列目と 4 列目の区別はつかない。差は下の段に出る。
// ポインタ左右でノイズの周波数が変わる。

precision highp float;
precision highp int;

uniform vec2 u_resolution;
uniform vec2 u_mouse;

out vec4 fragColor;

#include "noise.glsl"

// ---- 書き換えて試すための定数 ----------------------------------------
// ノイズの周波数(セル 1 枚の高さあたりの格子数)。ポインタ左右でこの間を動く
const float FREQ_MIN = 2.0;
const float FREQ_MAX = 7.0;
// 微分表示の明るさ。勾配の大きさをこの値で割ってから色にする
const float GRAD_SCALE = 1.2;
// ----------------------------------------------------------------------

/** 補間関数 4 種。mode = 0 最近傍 / 1 線形 / 2 三次 / 3 五次 */
float interpolate(float t, int mode) {
  if (mode == 0) return step(0.5, t); // 補間しない(近いほうの格子点の値をそのまま)
  if (mode == 1) return t; // 線形。mix にそのまま渡すのと同じ
  if (mode == 2) return t * t * (3.0 - 2.0 * t); // 3 次。smoothstep の中身
  return fade(t); // 5 次。noise.glsl の fade
}

/**
 * noise.glsl の valueNoise の、補間関数だけを差し替えられる版。
 * この比較がデモの主題なので、共有チャンクは変えずにここへローカル版を置いている
 */
float valueNoiseWith(vec2 p, int mode) {
  vec2 base = floor(p);
  ivec2 cell = ivec2(base);
  vec2 t = p - base;
  vec2 u = vec2(interpolate(t.x, mode), interpolate(t.y, mode));

  float a = hash21(cell + ivec2(0, 0));
  float b = hash21(cell + ivec2(1, 0));
  float c = hash21(cell + ivec2(0, 1));
  float d = hash21(cell + ivec2(1, 1));

  return mix(mix(a, b, u.x), mix(c, d, u.x), u.y);
}

void main() {
  // 画面を 4 列 × 2 行に割る
  vec2 cellSize = vec2(u_resolution.x / 4.0, u_resolution.y / 2.0);
  vec2 index = min(floor(gl_FragCoord.xy / cellSize), vec2(3.0, 1.0));
  int mode = int(index.x);
  bool topRow = index.y > 0.5;

  float freq = mix(FREQ_MIN, FREQ_MAX, u_mouse.x / u_resolution.x);

  // どのセルも「同じノイズの同じ場所」を見るように、セル内の位置から座標を作る。
  // cellSize.y で割っているので、画面上のピクセルは正方形のまま
  vec2 inCell = gl_FragCoord.xy - index * cellSize;
  vec2 q = inCell / cellSize.y * freq;

  float n = valueNoiseWith(q, mode);

  // 勾配の大きさ。dFdx / dFdy は画面のピクセル単位なので、ノイズ座標あたりに直す
  // (セルの境界をまたぐ 2×2 の組では別の列の値が混ざるが、そこは仕切り線で隠れる)
  float grad = length(vec2(dFdx(n), dFdy(n))) * cellSize.y / freq;

  vec3 color;
  if (topRow) {
    color = vec3(0.06, 0.07, 0.09) + n * vec3(0.84, 0.86, 0.90);
  } else {
    float g = clamp(grad / GRAD_SCALE, 0.0, 1.0);
    color = vec3(0.05, 0.06, 0.08) + g * vec3(0.95, 0.72, 0.34);
  }

  // セルの仕切り線(第4部の既定形。描画バッファのピクセル単位で引く)
  vec2 edge = min(inCell, cellSize - inCell);
  float border = min(edge.x, edge.y);
  color = mix(vec3(0.02, 0.02, 0.03), color, smoothstep(0.0, 1.5, border));

  fragColor = vec4(color, 1.0);
}

float gradientNoise(vec2 p) {
  vec2 base = floor(p);
  ivec2 cell = ivec2(base);
  vec2 t = p - base;
  vec2 u = vec2(fade(t.x), fade(t.y));

  float a = dot(randomGradient(cell + ivec2(0, 0)), t - vec2(0.0, 0.0));
  float b = dot(randomGradient(cell + ivec2(1, 0)), t - vec2(1.0, 0.0));
  float c = dot(randomGradient(cell + ivec2(0, 1)), t - vec2(0.0, 1.0));
  float d = dot(randomGradient(cell + ivec2(1, 1)), t - vec2(1.0, 1.0));

  return mix(mix(a, b, u.x), mix(c, d, u.x), u.y);
}

/** 格子点に置く長さ 1 の勾配ベクトル。角度を乱数で選ぶので、向きの分布が一様になる */
vec2 randomGradient(ivec2 cell) {
  float angle = hash21(cell) * TAU;
  return vec2(cos(angle), sin(angle));
}

// 正方形から取って normalize する版。短く書けるが、向きが斜め 45 度に偏る
vec2 badGradient(ivec2 cell) {
  vec2 v = vec2(hash21(cell), hash21(cell + ivec2(7919, 0))) * 2.0 - 1.0;
  return normalize(v);
}

#version 300 es

// 第25章 デモ3: gradient noise (Perlin) の骨格を見る。
// 青 = 負、橙 = 正、白い細線 = 値がちょうど 0 の等高線。
// ポインタ左右 = 格子・格子点・各格子点に置かれた勾配ベクトルの重ね書きの濃さ。
// 未操作のとき u_mouse は canvas の中央なので、読み込み直後は overlay = 0.5(半分の濃さ)。
// 見どころは「白い 0 の線が、必ずすべての格子点を通る」こと。

precision highp float;
precision highp int;

uniform vec2 u_resolution;
uniform vec2 u_mouse;

out vec4 fragColor;

#include "noise.glsl"

// ---- 書き換えて試すための定数 ----------------------------------------
// 画面の短辺(標準座標の -1〜+1)に何セル入れるか
const float CELLS = 2.5;
// 勾配ベクトルの描画の長さ(格子 1 マスを 1.0 とした比)と根元の太さ
const float ARROW_LENGTH = 0.42;
const float ARROW_WIDTH = 0.030;
// 格子点に打つ点の半径
const float DOT_RADIUS = 0.055;
// ----------------------------------------------------------------------

/** 格子点 a から向き g へ伸びる、先細りの矢。戻り値は 0〜1 のマスク */
float spike(vec2 p, vec2 a, vec2 g, float w) {
  vec2 pa = p - a;
  vec2 ba = g * ARROW_LENGTH;
  float h = clamp(dot(pa, ba) / dot(ba, ba), 0.0, 1.0); // 第8章の線分の射影
  float d = length(pa - ba * h) - mix(ARROW_WIDTH, 0.0, h);
  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);
  vec2 q = p * CELLS; // ノイズ座標。格子の間隔がちょうど 1.0 になる

  // ノイズ座標での「1 ピクセルぶんの幅」。アンチエイリアスの基準に使い回す
  float w = CELLS * 2.0 / min(u_resolution.x, u_resolution.y);

  float n = gradientNoise(q);

  vec3 color = vec3(0.06, 0.07, 0.09);
  color = mix(color, vec3(0.16, 0.34, 0.62), clamp(-n * 1.7, 0.0, 1.0)); // 負 = 青
  color = mix(color, vec3(0.92, 0.58, 0.26), clamp(n * 1.7, 0.0, 1.0)); // 正 = 橙

  // 値が 0 の等高線。fwidth は n に対して取る(第8章の塗りの常套句と同じ考え方)
  float nw = fwidth(n);
  float zero = 1.0 - smoothstep(0.0, nw * 1.6, abs(n));

  // ポインタ左右で重ね書きの強さを変える。0 = 素のノイズ、1 = 骨格を全部見せる
  float overlay = u_mouse.x / u_resolution.x;

  // 格子線: 整数座標にいちばん近い距離
  vec2 f = abs(q - floor(q + 0.5));
  float grid = 1.0 - smoothstep(0.0, w * 1.5, min(f.x, f.y));

  // いま自分がいるセルの 4 隅に、勾配ベクトルと点を描く。
  // 矢の長さが格子間隔より短いので、隣のセルの矢はここまで届かない
  float arrows = 0.0;
  float dots = 0.0;
  vec2 base = floor(q);
  for (int j = 0; j <= 1; j++) {
    for (int i = 0; i <= 1; i++) {
      ivec2 cell = ivec2(base) + ivec2(i, j);
      vec2 a = vec2(cell);
      arrows = max(arrows, spike(q, a, randomGradient(cell), w));
      dots = max(dots, 1.0 - smoothstep(-w, w, length(q - a) - DOT_RADIUS));
    }
  }

  color = mix(color, vec3(0.52, 0.58, 0.68), grid * 0.6 * overlay);
  color = mix(color, vec3(0.96, 0.98, 1.00), zero * (0.30 + 0.60 * overlay));
  color = mix(color, vec3(0.90, 0.94, 1.00), arrows * overlay);
  color = mix(color, vec3(0.26, 0.92, 0.72), dots * overlay);

  fragColor = vec4(color, 1.0);
}

// gradient noise を 0〜1 へ。掛ける 0.70711 は 0.5 / 理論上限(= 0.5 / 0.70711)で、
// 数としてはたまたま理論上限と同じ値になる。これで上限がちょうど 0.5 に写る
float n01 = gradientNoise(p) * 0.70711 + 0.5; // 実測 0.0014 〜 0.9965

// 端まで使い切る必要がないなら、こちらのほうが覚えやすい
float safe01 = gradientNoise(p) * 0.5 + 0.5; // 実測 0.1475 〜 0.8510

#version 300 es

// 第25章 デモ4: value noise と gradient noise を同じ条件で並べる。
//   上の段 = value noise(0〜1 をそのまま)
//   下の段 = gradient noise(n * 0.70711 + 0.5 で 0〜1 に写したもの)
//   左の列 = そのまま表示 / 中の列 = 勾配の大きさ / 右の列 = 等高線 + 格子
// 中と右の列に、格子との関係の違いがはっきり出る。
// ポインタ左右でノイズの周波数が変わる。

precision highp float;
precision highp int;

uniform vec2 u_resolution;
uniform vec2 u_mouse;

out vec4 fragColor;

#include "noise.glsl"

// ---- 書き換えて試すための定数 ----------------------------------------
// ノイズの周波数(セル 1 枚の高さあたりの格子数)。ポインタ左右でこの間を動く
const float FREQ_MIN = 2.0;
const float FREQ_MAX = 6.0;
// 微分表示の明るさ。勾配の大きさをこの値で割ってから色にする
const float GRAD_SCALE = 1.2;
// 等高線の本数(0〜1 を何段に割るか)
const float CONTOURS = 10.0;
// gradient noise を 0〜1 に写す係数。1/√2 = 0.70711(理論上限 √2/2 の逆数の半分)
const float GRADIENT_TO_01 = 0.70711;
// ----------------------------------------------------------------------

void main() {
  // 画面を 3 列 × 2 行に割る
  vec2 cellSize = vec2(u_resolution.x / 3.0, u_resolution.y / 2.0);
  vec2 index = min(floor(gl_FragCoord.xy / cellSize), vec2(2.0, 1.0));
  int col = int(index.x);
  bool topRow = index.y > 0.5;

  float freq = mix(FREQ_MIN, FREQ_MAX, u_mouse.x / u_resolution.x);

  // どのセルも「同じノイズの同じ場所」を見るように、セル内の位置から座標を作る
  vec2 inCell = gl_FragCoord.xy - index * cellSize;
  vec2 q = inCell / cellSize.y * freq;

  // 上下とも 0〜1 に揃えてから比べる。gradient 側は本文 7 節の常套句
  float n = topRow ? valueNoise(q) : gradientNoise(q) * GRADIENT_TO_01 + 0.5;

  // ノイズ座標あたりの勾配の大きさ(dFdx / dFdy は画面のピクセル単位なので直す)
  float grad = length(vec2(dFdx(n), dFdy(n))) * cellSize.y / freq;

  vec3 color = vec3(0.06, 0.07, 0.09) + n * vec3(0.84, 0.86, 0.90);

  if (col == 1) {
    float g = clamp(grad / GRAD_SCALE, 0.0, 1.0);
    color = vec3(0.05, 0.06, 0.08) + g * vec3(0.95, 0.72, 0.34);
  } else if (col == 2) {
    // 等高線: 0〜1 を CONTOURS 段に割り、段の境目に線を引く(第8章の fract(d * N))
    float bands = n * CONTOURS;
    float e = fwidth(bands);
    float edge = min(fract(bands), 1.0 - fract(bands));
    float line = 1.0 - smoothstep(0.0, e * 1.2, edge);
    color = mix(color * 0.55, vec3(0.35, 0.85, 0.95), line);

    // 格子を薄く重ねて、等高線と格子点の関係を見えるようにする
    vec2 f = abs(q - floor(q + 0.5));
    float gw = fwidth(q.x) * 1.5;
    float grid = 1.0 - smoothstep(0.0, gw, min(f.x, f.y));
    color = mix(color, vec3(0.95, 0.45, 0.35), grid * 0.7);
  }

  // セルの仕切り線(第4部の既定形。描画バッファのピクセル単位で引く)
  vec2 edgePx = min(inCell, cellSize - inCell);
  float border = min(edgePx.x, edgePx.y);
  color = mix(vec3(0.02, 0.02, 0.03), color, smoothstep(0.0, 1.5, border));

  fragColor = vec4(color, 1.0);
}

// 置換文字列を関数で渡すのは、String.replace が `$&` などを特別扱いするため(第23章)
function resolveIncludes(source: string): string {
  return source.replace('#include "noise.glsl"', () => noiseChunkSource.trim());
}

// 第25章の中核。4 本のデモがすべてこのチャンクを読み込む
// (`#include "noise.glsl"` を main.ts が文字列置換する。仕組みは第23章と同じ)。
//
// このチャンクを使うシェーダーは、先頭に必ず次の 2 行を書くこと。
//   precision highp float;
//   precision highp int;
// フラグメントシェーダーの整数の既定精度は mediump で(GLSL ES 3.00 §4.5.4)、
// mediump の uint は 16 ビットしか保証がない(§4.5.1)。32 ビットで折り返すことを
// 前提にした下のハッシュは、そこで別物になる。詳しくは第25章の本文。

const float TAU = 6.283185307179586;

/**
 * pcg3d — 3 つの uint を、互いに無関係に見える 3 つの uint へかき混ぜる整数ハッシュ。
 * 出典: Mark Jarzynski, Marc Olano, "Hash Functions for GPU Rendering",
 *   Journal of Computer Graphics Techniques, Vol. 9, No. 3 (2020), p.32.
 *   https://jcgt.org/published/0009/03/02/
 * 掛け算と足し算は 2^32 で折り返す(GLSL ES 3.00 §4.1.3)。
 * この桁あふれがビットをかき混ぜる動力そのもので、避けるべき事故ではない。
 */
uvec3 pcg3d(uvec3 v) {
  v = v * 1664525u + 1013904223u;
  v.x += v.y * v.z;
  v.y += v.z * v.x;
  v.z += v.x * v.y;
  v ^= v >> 16u;
  v.x += v.y * v.z;
  v.y += v.z * v.x;
  v.z += v.x * v.y;
  return v;
}

/**
 * 整数の格子座標 → 0〜1 の乱数 1 つ。
 * ivec2 → uvec2 の変換はビットパターンをそのまま移すので(§5.4.1)、負の座標も安全に扱える。
 * float から直接 uint へ変換してはいけない — 負の float から uint への変換は未定義(§5.4.1)。
 */
float hash21(ivec2 cell) {
  uint h = pcg3d(uvec3(ivec3(cell, 0))).x;
  return float(h) / 4294967296.0; // 2^32 で割って 0〜1 へ
}

/** 格子点に置く長さ 1 の勾配ベクトル。角度を乱数で選ぶので、向きの分布が一様になる */
vec2 randomGradient(ivec2 cell) {
  float angle = hash21(cell) * TAU;
  return vec2(cos(angle), sin(angle));
}

/** Perlin の 5 次補間。t = 0 と t = 1 の両端で 1 階・2 階の傾きがともに 0 になる */
float fade(float t) {
  return t * t * t * (t * (t * 6.0 - 15.0) + 10.0);
}

/** value noise: 格子点に置いた乱数そのものを補間する。戻り値は 0〜1 */
float valueNoise(vec2 p) {
  vec2 base = floor(p);
  ivec2 cell = ivec2(base);
  vec2 t = p - base;
  vec2 u = vec2(fade(t.x), fade(t.y));

  float a = hash21(cell + ivec2(0, 0));
  float b = hash21(cell + ivec2(1, 0));
  float c = hash21(cell + ivec2(0, 1));
  float d = hash21(cell + ivec2(1, 1));

  return mix(mix(a, b, u.x), mix(c, d, u.x), u.y);
}

/**
 * gradient noise (Perlin): 格子点に置いた勾配ベクトルと、格子点からの変位との内積を
 * 補間する。格子点の上では必ず 0 になる。とりうる値の理論上限は ±√2/2 = 0.70711 で、
 * 500 万点を乱択して出た最大・最小は -0.7051 / +0.7021。後者は乱択の結果なので、
 * 測り直すと ±0.005 ほど振れる(上限に近づくだけで、超えることはない)。
 */
float gradientNoise(vec2 p) {
  vec2 base = floor(p);
  ivec2 cell = ivec2(base);
  vec2 t = p - base;
  vec2 u = vec2(fade(t.x), fade(t.y));

  float a = dot(randomGradient(cell + ivec2(0, 0)), t - vec2(0.0, 0.0));
  float b = dot(randomGradient(cell + ivec2(1, 0)), t - vec2(1.0, 0.0));
  float c = dot(randomGradient(cell + ivec2(0, 1)), t - vec2(0.0, 1.0));
  float d = dot(randomGradient(cell + ivec2(1, 1)), t - vec2(1.0, 1.0));

  return mix(mix(a, b, u.x), mix(c, d, u.x), u.y);
}

// 第25章: 乱数とノイズ
// 第2部と同じ構成: 1 つの canvas に対して、切替ボタンでフラグメントシェーダーを
// 差し替える。この章で 1 つだけ増えているのが、4 本すべてが読み込む noise.glsl を
// 配るための `#include` の解決(仕組みは第23章と同じ)。

import { startFullscreenShader } from '../../lib/fullscreen-shader';
import hashSource from './01-hash.frag?raw';
import valueNoiseSource from './02-value-noise.frag?raw';
import gradientNoiseSource from './03-gradient-noise.frag?raw';
import compareSource from './04-compare.frag?raw';
import noiseChunkSource from './noise.glsl?raw';

// 置換文字列を関数で渡すのは、String.replace が `$&` などを特別扱いするため(第23章)
function resolveIncludes(source: string): string {
  return source.replace('#include "noise.glsl"', () => noiseChunkSource.trim());
}

const demos = [
  { id: 'hash', label: 'ハッシュ 2 種', source: resolveIncludes(hashSource) },
  { id: 'value', label: '補間関数の比較', source: resolveIncludes(valueNoiseSource) },
  { id: 'gradient', label: 'Perlin の骨格', source: resolveIncludes(gradientNoiseSource) },
  { id: 'compare', label: 'value と gradient', source: resolveIncludes(compareSource) },
] 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);
}