fbm とドメインワーピング

  // 周波数を上げるほど振幅を小さくしている(細かい波ほど控えめに足す)
  float wave1 = 0.40 * sin(2.0 * p.x + 1.1 * u_time);
  float wave2 = 0.20 * sin(5.0 * p.x - 1.7 * u_time);
  float wave3 = 0.10 * sin(11.0 * p.x + 2.9 * u_time);

float fbm(vec2 p, int octaves, float lacunarity, float gain) {
  float sum = 0.0;
  float amplitude = 0.5;
  float frequency = 1.0;
  for (int i = 0; i < octaves; i++) {
    sum += amplitude * gradientNoise(p * frequency);
    frequency *= lacunarity;
    amplitude *= gain;
  }
  return sum;
}

#version 300 es

// 第26章 デモ1: オクターブを 1 枚ずつ足していく。
// 画面を縦に 6 分割し、左から 1・2・3・4・5・6 オクターブの fbm を、
// まったく同じ座標で描く。低い周波数の起伏は 6 帯すべてに共通なので、
// 大きな形は帯をまたいでつながって見え、右へ行くほど細部だけが足されていく。
// 帯の下端の点の数が、その帯のオクターブ数。
//
// ポインタ: 左右 = lacunarity(1.2〜3.2)、上下 = gain(0.2〜0.8)。
// ポインタ未操作(中央)では lacunarity = 2.2 / gain = 0.5 になる。
// fbm.glsl の既定値 2.0 / 0.5 に合わせたいときは、少しだけ左寄りに置く。

precision highp float;
precision highp int; // uint を 32 ビットで扱うため(理由は第25章)

uniform vec2 u_resolution;
uniform vec2 u_mouse;

out vec4 fragColor;

#include "noise.glsl"
#include "fbm.glsl"

// ---- 書き換えて試すための定数 ----------------------------------------
// 標準座標 1.0 が第 1 オクターブの何セル分か
const float NOISE_SCALE = 2.0;
// 帯の数 = 右端の帯のオクターブ数
const int BANDS = 6;
// ----------------------------------------------------------------------

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

  // 連続パラメータはポインタで動かす(第10章と同じく 0〜1 に直してから mix)
  vec2 mouse01 = u_mouse / u_resolution;
  float lacunarity = mix(1.2, 3.2, mouse01.x);
  float gain = mix(0.2, 0.8, mouse01.y);

  // いま何番目の縦帯にいるか(左から 0〜5)。帯ごとに変えるのはオクターブ数だけ
  float bandF = gl_FragCoord.x * float(BANDS) / u_resolution.x;
  int band = int(bandF);
  int octaves = band + 1;

  float value = fbm(p * NOISE_SCALE, octaves, lacunarity, gain);

  // 既定設定での実測値域は -0.4861〜+0.4831 なので、0.5 を足すだけでほぼ 0〜1 に収まる。
  // gain を 0.5 より上げると振幅の和が増えて外へはみ出すので、clamp が効きはじめる
  // (画面の白と黒がべたっと潰れる。それが「値域が広がった」ことの見え方)
  float t = clamp(value + 0.5, 0.0, 1.0);
  vec3 color = mix(vec3(0.06, 0.07, 0.09), vec3(0.86, 0.90, 0.96), t);

  // 帯の境目に細い区切り線を引く(px 単位の距離で太さを決める)
  float toEdge = min(fract(bandF), 1.0 - fract(bandF)) * u_resolution.x / float(BANDS);
  color = mix(vec3(0.02, 0.02, 0.03), color, smoothstep(0.0, 1.5, toEdge));

  // 帯の下端に、オクターブ数ぶんの目印を打つ
  float bandWidth = u_resolution.x / float(BANDS);
  vec2 inBand = vec2(gl_FragCoord.x - float(band) * bandWidth, gl_FragCoord.y);
  float pitch = 11.0;
  float startX = bandWidth * 0.5 - pitch * 0.5 * float(octaves - 1);
  float marks = 0.0;
  for (int i = 0; i < BANDS; i++) {
    if (i >= octaves) {
      break;
    }
    vec2 center = vec2(startX + pitch * float(i), 16.0);
    marks = max(marks, 1.0 - smoothstep(2.5, 3.5, distance(inBand, center)));
  }
  color = mix(color, vec3(0.95, 0.62, 0.28), marks);

  fragColor = vec4(color, 1.0);
}

const int FBM_OCTAVES = 5; // 足すノイズの枚数
const float FBM_LACUNARITY = 2.0; // 1 枚進むごとの周波数の倍率
const float FBM_GAIN = 0.5; // 1 枚進むごとの振幅の倍率(persistence とも呼ぶ)

float fbm01(vec2 p) {
  return clamp(fbm(p) + 0.5, 0.0, 1.0);
}

float turbulence(vec2 p) {
  float sum = 0.0;
  float amplitude = 0.5;
  float frequency = 1.0;
  for (int i = 0; i < FBM_OCTAVES; i++) {
    sum += amplitude * abs(gradientNoise(p * frequency) * NOISE_TO_UNIT);
    frequency *= FBM_LACUNARITY;
    amplitude *= FBM_GAIN;
  }
  return sum;
}

    float r = 1.0 - abs(gradientNoise(p * frequency) * NOISE_TO_UNIT);
    sum += amplitude * r * r;

float marble(vec2 p, float frequency, float distortion) {
  return sin(p.x * frequency + fbm(p) * distortion) * 0.5 + 0.5;
}

  float threshold = mix(0.32, 0.58, u_mouse.x / u_resolution.x);
  float density = smoothstep(threshold, threshold + CLOUD_SOFTNESS, d);

#version 300 es

// 第26章 デモ2: 同じ足し算の、中身だけを変える。
// 画面を 2×2 に分け、4 区画とも同じ座標・同じオクターブ数で描く。
//   左上 fbm        — そのまま足す
//   右上 turbulence — 足す前に abs で折る(細い谷)
//   左下 ridged     — 1 - |n| を 2 乗して足す(細い尾根)
//   右下 marble     — sin の位相を fbm で乱す(第9章の sin が戻ってくる)
// 違いは fbm.glsl の中の 1〜2 行だけで、座標も格子もまったく同じもの。
//
// ポインタ: 左右でノイズの倍率(0.8〜3.0)。細かくすると 4 つの質感の差が見やすい。

precision highp float;
precision highp int; // uint を 32 ビットで扱うため(理由は第25章)

uniform vec2 u_resolution;
uniform vec2 u_mouse;

out vec4 fragColor;

#include "noise.glsl"
#include "fbm.glsl"

// ---- 書き換えて試すための定数 ----------------------------------------
// turbulence の実測値域(300 万点で 0.0006〜0.7007・中央値 0.230)を 0〜1 側へ寄せる
const float TURBULENCE_SCALE = 1.7;
// 大理石の縞の細かさと、その位相を fbm で乱す強さ
const float MARBLE_FREQUENCY = 4.0;
const float MARBLE_DISTORTION = 6.0;
// ----------------------------------------------------------------------

void main() {
  // 区画 1 つぶんの大きさ。全体が 3:2 なので、各区画も 3:2 のまま
  vec2 quadrant = u_resolution * 0.5;
  vec2 local = mod(gl_FragCoord.xy, quadrant);

  // 標準座標の式(第7章)を、画面全体ではなく「区画」に対して適用する
  vec2 p = (local * 2.0 - quadrant) / min(quadrant.x, quadrant.y);

  // 左下 (0,0) から右上 (1,1)。gl_FragCoord.y は上が大きいので、上段が y = 1
  ivec2 cell = ivec2(gl_FragCoord.xy / quadrant);
  int variant = (1 - cell.y) * 2 + cell.x; // 0 = 左上, 1 = 右上, 2 = 左下, 3 = 右下

  float scale = mix(0.8, 3.0, u_mouse.x / u_resolution.x);
  vec2 q = p * scale;

  float value;
  if (variant == 0) {
    value = fbm01(q);
  } else if (variant == 1) {
    value = turbulence(q) * TURBULENCE_SCALE;
  } else if (variant == 2) {
    value = ridged(q);
  } else {
    value = marble(q, MARBLE_FREQUENCY, MARBLE_DISTORTION);
  }
  value = clamp(value, 0.0, 1.0);

  // 4 つを同じ濃淡で並べる。色の設計は第27章の担当なので、ここでは 2 色の mix だけ
  vec3 color = mix(vec3(0.06, 0.07, 0.09), vec3(0.86, 0.90, 0.96), value);

  // 区画の境目に細い区切り線を引く
  vec2 toEdge = min(local, quadrant - local);
  color = mix(vec3(0.02, 0.02, 0.03), color, smoothstep(0.0, 1.5, min(toEdge.x, toEdge.y)));

  fragColor = vec4(color, 1.0);
}

vec2 fbm2(vec2 p) {
  return vec2(fbm(p), fbm(p + vec2(5.2, 1.3)));
}

float warp1(vec2 p, float strength, vec2 flow) {
  vec2 q = fbm2(p + flow);
  return fbm(p + strength * q);
}

float warp2(vec2 p, float strength, vec2 flow) {
  vec2 q = fbm2(p + flow);
  vec2 base = p + strength * q;
  vec2 r = vec2(fbm(base + vec2(1.7, 9.2)), fbm(base + vec2(8.3, 2.8)));
  return fbm(p + strength * r);
}

#version 300 es

// 第26章 デモ3: ドメインワーピングの段数を並べる。
// 画面を縦に 3 分割し、左から
//   (a) ワープなし   fbm(p)
//   (b) ワープ 1 段  fbm(p + s * fbm2(p))
//   (c) ワープ 2 段  歪ませるための座標そのものを、もう一度歪ませる
// 3 帯とも同じ座標・同じ fbm の設定で、違うのは「座標に何をしてから渡すか」だけ。
//
// ポインタ: 左右でずらす量 s(0.0〜6.0)。s = 0 なら 3 帯は完全に同じ絵になる。
// 「歪ませる場」だけが時間で流れるので、左端は止まったまま、右の 2 帯だけがうねる。

precision highp float;
precision highp int; // uint を 32 ビットで扱うため(理由は第25章)

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

out vec4 fragColor;

#include "noise.glsl"
#include "fbm.glsl"

// ---- 書き換えて試すための定数 ----------------------------------------
// 標準座標 1.0 が第 1 オクターブの何セル分か
const float NOISE_SCALE = 1.6;
// 帯の数(0 段 / 1 段 / 2 段)
const int BANDS = 3;
// 歪ませる場を流す速さ
const float FLOW_SPEED = 0.04;
// ----------------------------------------------------------------------

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

  float strength = mix(0.0, 6.0, u_mouse.x / u_resolution.x);
  vec2 flow = vec2(0.0, u_time * FLOW_SPEED);

  float bandF = gl_FragCoord.x * float(BANDS) / u_resolution.x;
  int band = int(bandF);

  float value;
  if (band == 0) {
    value = fbm(q);
  } else if (band == 1) {
    value = warp1(q, strength, flow);
  } else {
    value = warp2(q, strength, flow);
  }

  // ワープは値域をほとんど変えない(実測: 0 段 ±0.476 / 1 段 ±0.452 / 2 段 ±0.463)。
  // 変わるのは「同じ値がどこに並ぶか」だけ
  float t = clamp(value + 0.5, 0.0, 1.0);
  vec3 color = mix(vec3(0.06, 0.07, 0.09), vec3(0.86, 0.90, 0.96), t);

  // 帯の境目に細い区切り線を引く
  float toEdge = min(fract(bandF), 1.0 - fract(bandF)) * u_resolution.x / float(BANDS);
  color = mix(vec3(0.02, 0.02, 0.03), color, smoothstep(0.0, 1.5, toEdge));

  fragColor = vec4(color, 1.0);
}

// この章の主役: ノイズの「積み方」を集めたチャンク。
// 4 本のデモが `#include "fbm.glsl"` で差し込む(仕組みは第23章と同じ)。
// 中で gradientNoise を呼ぶので、シェーダー側では noise.glsl を先に include すること。
//
// コメントに書いてある値域は、この GLSL を JS へ移植して Node で実測した値
// (サンプル数は本文 3 節、または各コメントのとおり)。理論上の上界ではなく
// 一様乱択でたまたま出た最大・最小なので、真の値域の下からの見積もりである。

// ---- 書き換えて試すための定数 ----------------------------------------
// この 3 つはデモ 2・3・4 に効く
// (デモ 1 は 3 つともポインタから引数で渡すので、書き換えても効かない)
const int FBM_OCTAVES = 5; // 足すノイズの枚数
const float FBM_LACUNARITY = 2.0; // 1 枚進むごとの周波数の倍率
const float FBM_GAIN = 0.5; // 1 枚進むごとの振幅の倍率(persistence とも呼ぶ)
// ----------------------------------------------------------------------

// abs で折る変奏では、折る前に √2 = 1 / (√2/2) を掛けて振れ幅をそろえる。
// gradientNoise の理論上限 ±√2/2 がちょうど ±1 に写るので、1 - |n| は理論上 0 まで届く
// (実測の ±0.705 は ±0.997 になるので、実際に届くのは 0.003 あたりまで)。
const float NOISE_TO_UNIT = 1.4142135623730951;

/**
 * fbm (fractional Brownian motion) = オクターブ合成。
 * 周波数を lacunarity 倍しながら、振幅を gain 倍して減らしていくだけの足し算。
 * 初項の振幅が 0.5 なので、gain = 0.5 のときの振幅の和は 1 - 2^-octaves。
 */
float fbm(vec2 p, int octaves, float lacunarity, float gain) {
  float sum = 0.0;
  float amplitude = 0.5;
  float frequency = 1.0;
  for (int i = 0; i < octaves; i++) {
    sum += amplitude * gradientNoise(p * frequency);
    frequency *= lacunarity;
    amplitude *= gain;
  }
  return sum;
}

/** 既定設定(5 / 2.0 / 0.5)の fbm。実測値域は -0.4861 〜 +0.4831 */
float fbm(vec2 p) {
  return fbm(p, FBM_OCTAVES, FBM_LACUNARITY, FBM_GAIN);
}

/** 表示用に 0〜1 へ。実測値域が ±0.49 に収まるので、0.5 を足すだけで足りる(clamp は保険) */
float fbm01(vec2 p) {
  return clamp(fbm(p) + 0.5, 0.0, 1.0);
}

/**
 * turbulence: fbm との違いは「足す前に abs で折る」1 行だけ。
 * ノイズが 0 を横切る場所が折り目 = 細い谷になり、煙や炎の筋に見える。
 * 300 万点の一様乱択での実測値域は 0.0006〜0.7007、中央値 0.230
 */
float turbulence(vec2 p) {
  float sum = 0.0;
  float amplitude = 0.5;
  float frequency = 1.0;
  for (int i = 0; i < FBM_OCTAVES; i++) {
    sum += amplitude * abs(gradientNoise(p * frequency) * NOISE_TO_UNIT);
    frequency *= FBM_LACUNARITY;
    amplitude *= FBM_GAIN;
  }
  return sum;
}

/**
 * ridged: 折ったうえで上下を反転し(1 - |n|)、2 乗して山を細くする。
 * turbulence の谷が、そのまま尾根としてひっくり返る。実測値域 0.0870〜0.9675
 */
float ridged(vec2 p) {
  float sum = 0.0;
  float amplitude = 0.5;
  float frequency = 1.0;
  for (int i = 0; i < FBM_OCTAVES; i++) {
    float r = 1.0 - abs(gradientNoise(p * frequency) * NOISE_TO_UNIT);
    sum += amplitude * r * r;
    frequency *= FBM_LACUNARITY;
    amplitude *= FBM_GAIN;
  }
  return sum;
}

/**
 * 大理石: 縞(sin)の位相を fbm で乱す。第9章の sin がここで戻ってくる。
 * sin を 0〜1 へ写しているので、値域は構造上 0〜1。
 */
float marble(vec2 p, float frequency, float distortion) {
  return sin(p.x * frequency + fbm(p) * distortion) * 0.5 + 0.5;
}

/**
 * 同じ p から独立な 2 つの fbm を取り出して vec2 にする。
 * 2 本目の座標をずらすのがコツ(同じ座標を 2 回読んでも同じ値しか返らないため)。
 * ずらし量 (5.2, 1.3) は Inigo Quilez "Domain Warping" の作例に倣った値。
 * https://iquilezles.org/articles/warp/
 */
vec2 fbm2(vec2 p) {
  return vec2(fbm(p), fbm(p + vec2(5.2, 1.3)));
}

/**
 * ドメインワーピング 1 段: fbm(p + strength * fbm2(p))。
 * flow は「歪ませる場」だけに足すずらしで、時間を入れるとワープだけが流れる。
 */
float warp1(vec2 p, float strength, vec2 flow) {
  vec2 q = fbm2(p + flow);
  return fbm(p + strength * q);
}

/** ドメインワーピング 2 段: 歪ませるための座標そのものを、もう一度歪ませる */
float warp2(vec2 p, float strength, vec2 flow) {
  vec2 q = fbm2(p + flow);
  vec2 base = p + strength * q;
  vec2 r = vec2(fbm(base + vec2(1.7, 9.2)), fbm(base + vec2(8.3, 2.8)));
  return fbm(p + strength * r);
}

function resolveIncludes(source: string): string {
  return source
    .replace('#include "noise.glsl"', () => noiseChunkSource.trim())
    .replace('#include "fbm.glsl"', () => fbmChunkSource.trim());
}

precision highp float;
precision highp int; // uint を 32 ビットで扱うため(理由は第25章)

  // ① 座標そのものを横へ流す
  vec2 q = p * NOISE_SCALE + vec2(u_time * DRIFT_SPEED, 0.0);

  // ② 歪ませる場だけを別の速さで縦へ流す
  vec2 flow = vec2(0.0, u_time * FLOW_SPEED);

#version 300 es

// 第26章 デモ4: 総合の一枚絵 — ワープした fbm を smoothstep で抜いた雲。
// 部品はここまでのデモと同じで、組み合わせ方だけが違う。
//   ① ドメインを横へスクロールして、雲全体を流す
//   ② ワープの「歪ませる場」を縦へ動かして、雲の内側の形を変え続ける
//   ③ 1 段ワープした fbm を smoothstep で 0/1 側へ寄せ、輪郭のある塊にする
// 2D ノイズなので、時間軸は z ではなく「座標をずらす」形で入れている(本文 6 節)。
//
// ポインタ: 左右で雲の量(smoothstep の下側の閾値)。右へ動かすほど晴れる。

precision highp float;
precision highp int; // uint を 32 ビットで扱うため(理由は第25章)

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

out vec4 fragColor;

#include "noise.glsl"
#include "fbm.glsl"

// ---- 書き換えて試すための定数 ----------------------------------------
// 標準座標 1.0 が第 1 オクターブの何セル分か
const float NOISE_SCALE = 1.5;
// 雲全体が横へ流れる速さ(ドメインのスクロール)
const float DRIFT_SPEED = 0.035;
// 歪ませる場が動く速さ(雲が内側で形を変える)
const float FLOW_SPEED = 0.06;
// ワープでずらす量。4.0 まで上げると繊維状にほつれるので、この絵では弱めてある
const float CLOUD_WARP = 1.0;
// 閾値の下側と上側の幅。狭くすると輪郭が硬くなる
const float CLOUD_SOFTNESS = 0.22;
// ここから上を雲の芯として明るくする
const float CLOUD_CORE = 0.52;
// ----------------------------------------------------------------------

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

  // ① 座標そのものを横へ流す
  vec2 q = p * NOISE_SCALE + vec2(u_time * DRIFT_SPEED, 0.0);

  // ② 歪ませる場だけを別の速さで縦へ流す
  vec2 flow = vec2(0.0, u_time * FLOW_SPEED);
  // 0〜1 相当(CLOUD_WARP = 1.0 での実測は 300 万点で 0.021〜0.974・中央値 0.500)
  float d = warp1(q, CLOUD_WARP, flow) + 0.5;

  // ③ 閾値で抜く。ポインタで雲の量を変える
  float threshold = mix(0.32, 0.58, u_mouse.x / u_resolution.x);
  float density = smoothstep(threshold, threshold + CLOUD_SOFTNESS, d);
  density *= smoothstep(-1.4, -0.4, p.y); // 下ほど雲を薄くして、地平線側を空ける
  float core = smoothstep(CLOUD_CORE, CLOUD_CORE + 0.20, d);

  // 色は素朴に 2 色ずつの mix だけ。パレット設計・リニア/sRGB は第27章の担当
  vec3 sky = mix(vec3(0.26, 0.31, 0.42), vec3(0.07, 0.10, 0.18), p.y * 0.5 + 0.5);
  vec3 cloud = mix(vec3(0.52, 0.57, 0.66), vec3(0.93, 0.95, 0.98), core);
  vec3 color = mix(sky, cloud, density);

  color *= 1.0 - 0.28 * smoothstep(0.7, 1.7, length(p)); // 周辺を少し落とす

  fragColor = vec4(color, 1.0);

  // 実験: 雲を大理石に差し替える。d 以降を次の 3 行に置き換えると、
  // 同じワープを縞の位相に使った大理石になる(色も明るい側へ振ると雰囲気が出る)。
  //   float m = sin(q.x * 4.0 + warp1(q, CLOUD_WARP, flow) * 8.0) * 0.5 + 0.5;
  //   vec3 color = mix(vec3(0.10, 0.10, 0.12), vec3(0.92, 0.90, 0.86), m);
  //   fragColor = vec4(color, 1.0);
}

// 第26章: fbm とドメインワーピング
// 第2部と同じ「1 canvas + 切替ボタン」構成(第10章の main.ts をそのまま踏襲)。
// 増えたのは 1 か所だけ — 4 本のフラグメントシェーダーが共通のチャンク
// (noise.glsl / fbm.glsl)を #include で取り込むので、送る前に文字列置換で解決する。

import { startFullscreenShader } from '../../lib/fullscreen-shader';
import octavesSource from './01-octaves.frag?raw';
import variantsSource from './02-variants.frag?raw';
import warpSource from './03-warp.frag?raw';
import sceneSource from './04-scene.frag?raw';
import fbmChunkSource from './fbm.glsl?raw';
import noiseChunkSource from './noise.glsl?raw';

// 第23章と同じ極小のインクルード。置換文字列を関数で渡しているのは、
// String.replace が `$&` などを特別扱いするため。
// noise.glsl が先、fbm.glsl が後(fbm.glsl は gradientNoise を呼ぶ)。
function resolveIncludes(source: string): string {
  return source
    .replace('#include "noise.glsl"', () => noiseChunkSource.trim())
    .replace('#include "fbm.glsl"', () => fbmChunkSource.trim());
}

const demos = [
  { id: 'octaves', label: 'オクターブ 1〜6', source: resolveIncludes(octavesSource) },
  { id: 'variants', label: 'fbm の変奏 4 種', source: resolveIncludes(variantsSource) },
  { id: 'warp', label: 'ワープ 0/1/2 段', source: resolveIncludes(warpSource) },
  { id: 'scene', label: '雲', source: resolveIncludes(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);
}