react-native-webrtc-kaleidoscope 2.4.0 → 2.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-webrtc-kaleidoscope",
-  "version": "2.4.0",
+  "version": "2.5.1",
   "description": "Live video effects (blur, background replacement, generative backgrounds, flip/rotate) for react-native-webrtc, packaged as a managed-Expo-friendly Expo Module. Working on web, Android, and iOS. Active development.",
   "keywords": [
     "react-native",
@@ -524,10 +524,14 @@
     "./expo-module.config.json": "./expo-module.config.json",
     "./package.json": "./package.json"
   },
+  "bin": {
+    "kaleidoscope-thumbnails": "./tools/thumbnails/make-thumbnails.ts"
+  },
   "files": [
     "src",
     "catalog",
     "dist",
+    "tools",
     "android/src",
     "android/build.gradle",
     "ios",
@@ -568,6 +572,7 @@
     "check:shaders": "bun run build:shaders && git diff --exit-code -- android/src/main/java/com/simiancraft/kaleidoscope/gpu/ShadersGenerated.kt web-driver/shaders.generated.ts",
     "bench:shader": "bun run scripts/shader-cost.ts",
     "shader:view": "bun run scripts/shader-view.ts",
+    "thumbs": "bun run build && bun tools/thumbnails/make-thumbnails.ts --book demo/kaleidoscope.preset-book.ts --out demo/assets/thumbnails --repo",
     "demo": "bun run build && cd demo && bun run start",
     "demo:wsl": "bun run build && cd demo && bun run start:wsl",
     "demo:ios": "bun run build && cd demo && bun run ios",
@@ -634,7 +639,7 @@
     "lefthook": "^2.1.9",
     "livekit-client": "^2.0.0",
     "nativewind": "4.2.x",
-    "playwright": "^1.60.0",
+    "playwright": "1.60.0",
     "publint": "^0.3.18",
     "react": "18.2.0",
     "react-native": "0.74.5",

package/tools/thumbnails/book-loader.ts

@@ -0,0 +1,104 @@
+// Loads a preset book as DATA by executing it under Bun with three shims
+// (issue #65). The book is real TypeScript that imports React control
+// components, expo-asset, and bundled images; none of those matter to a
+// thumbnail, so each is replaced with the smallest stand-in that keeps the
+// module graph executable:
+//
+//   - `expo-asset`: `Asset.fromModule(m).uri` returns the module value itself,
+//     which (via the asset shim below) is the file's absolute path.
+//   - control components (`*.form.*`, `*.controls.*`): a Proxy that satisfies
+//     any named import without pulling React in; presets reference these as
+//     values but thumbnails never render them.
+//   - bundled images (`.webp` / `.png` / `.jpg`): the file's absolute path as
+//     the default export, so an image layer's `source` resolves to something
+//     the CLI can read and embed.
+//
+// Executing (vs static parsing, which the prebuild plugin does for asset
+// collection) is what yields exact per-preset layer stacks and uniform values
+// with no fragile object-literal parsing. This is Bun-only by design; the
+// thumbnail maker is an opt-in dev command, not runtime code.
+
+import path from 'node:path';
+import { plugin } from 'bun';
+
+/** One layer as authored in a book (the subset thumbnails care about). */
+type LoadedLayer = {
+  readonly id?: string;
+  readonly shader: string;
+  readonly target?: string;
+  readonly blend?: string;
+  readonly source?: string;
+  readonly uniforms?: Record<string, number | readonly number[]>;
+};
+
+/** One preset as authored in a book. */
+export type LoadedPreset = {
+  readonly name: string;
+  readonly taxonomy: readonly string[];
+  readonly thumbnail?: string | number;
+  readonly layers: readonly LoadedLayer[];
+};
+
+plugin({
+  name: 'kaleidoscope-thumbnails-book-shims',
+  setup(build) {
+    // Path-based onLoad (not onResolve, which Bun's runtime plugins do not
+    // reliably fire): any file inside the expo-asset package becomes the
+    // shim, so its entry never executes and never drags React Native's
+    // Flow-typed asset registry in.
+    build.onLoad({ filter: /node_modules\/expo-asset\/.*\.[cm]?js$/ }, () => ({
+      contents: [
+        'function unwrap(m) {',
+        '  if (typeof m === "string") return m;',
+        '  try { if (m && typeof m.default === "string") return m.default; } catch {}',
+        '  try { if (m && typeof m.uri === "string") return m.uri; } catch {}',
+        '  try { return String(m); } catch { return ""; }',
+        '}',
+        'export const Asset = { fromModule: (m) => ({ uri: unwrap(m) }) };',
+      ].join('\n'),
+      loader: 'js',
+    }));
+    // Control components are imported by NAME, and ESM named imports need the
+    // name to exist; the name is convention-derived from the filename
+    // (`clouds.controls.js` -> CloudsControls, `plasma.form.tsx` -> PlasmaForm),
+    // so the stub synthesizes exactly that export.
+    build.onLoad({ filter: /\.(form|controls)\.(tsx|jsx|ts|js)$/ }, (args) => {
+      const base = path.basename(args.path);
+      const stem = base.split('.')[0] ?? 'stub';
+      const kind = base.includes('.controls.') ? 'Controls' : 'Form';
+      const pascal = stem
+        .split('-')
+        .map((s) => s.charAt(0).toUpperCase() + s.slice(1))
+        .join('');
+      const name = `${pascal}${kind}`;
+      return {
+        contents: `export const ${name} = () => null;\nexport default ${name};`,
+        loader: 'js',
+      };
+    });
+    // Bun materializes plugin modules as ESM namespaces even when authored as
+    // CJS, so the path rides the default export; `import x from './x.webp'`
+    // unwraps it natively and the Asset shim's unwrap() handles the
+    // `require('./x.webp')` namespace form.
+    build.onLoad({ filter: /\.(webp|png|jpe?g|gif)$/ }, (args) => ({
+      contents: `export default ${JSON.stringify(args.path)};`,
+      loader: 'js',
+    }));
+  },
+});
+
+/**
+ * Import the book and return its preset map. Accepts the conventional
+ * `export const presets` (the demo's shape) or a default export.
+ */
+export async function loadPresetBook(bookPath: string): Promise<Record<string, LoadedPreset>> {
+  const abs = path.resolve(bookPath);
+  const mod = (await import(abs)) as { presets?: unknown; default?: unknown };
+  const book = mod.presets ?? mod.default;
+  if (!book || typeof book !== 'object') {
+    throw new Error(
+      `${bookPath} did not export a preset book (expected \`export const presets = {...}\` or a default export).`,
+    );
+  }
+  return book as Record<string, LoadedPreset>;
+}

package/tools/thumbnails/make-thumbnails.ts

@@ -0,0 +1,287 @@
+#!/usr/bin/env bun
+// Thumbnail maker (issue #65): generate a standardized 320x180 WebP thumbnail
+// for EVERY preset in a declared preset book, stomping existing files.
+//
+//   bunx kaleidoscope-thumbnails --book ./kaleidoscope.preset-book.ts --out ./assets/thumbnails
+//   bun run thumbs        # this repo: demo book, repo conventions (see --repo)
+//
+// What it does: loads the book as data (see book-loader.ts), projects each
+// preset's NON-SUBJECT layer stack (no mask, no person) into a render spec,
+// and drives a headless-Chromium page (render-page.ts) that composites the
+// stack — generative shaders at their exact preset uniforms over control
+// defaults, image layers cover-fit, blur layers blurring the bundled
+// "virtual scene" office fixture standing in for the camera — then encodes
+// the smallest WebP that survives an RMSE gate against the raw render.
+//
+// Output: `<out>/<preset-id>.thumb.webp` per preset, plus printed `thumbnail:`
+// wiring suggestions. The tool never rewrites the book. With --repo (this
+// repository's convention) two preset classes are redirected:
+//   - a preset whose id matches a packaged composite stomps
+//     `catalog/composites/<id>/<id>.thumb.webp` (already wired by id);
+//   - a single-image preset whose plate lives under `catalog/images/`
+//     stomps the sibling `<leaf>.thumb.webp` (the existing image-thumb
+//     convention).
+//
+// Requirements: Bun, and `playwright` resolvable from the working directory
+// (it is a devDependency here; consumers install it themselves — this is an
+// opt-in command, not runtime code). The default browser flags reach a real
+// GPU through WSLg/ANGLE; pass --no-gl-flags on platforms where they fight
+// the default (macOS).
+
+import { existsSync, mkdirSync, readFileSync, readdirSync, writeFileSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import path from 'node:path';
+import { type LoadedPreset, loadPresetBook } from './book-loader';
+import { type PageLayerSpec, type PagePresetSpec, type PageResult, generatePage } from './render-page';
+
+const TOOL_DIR = path.dirname(new URL(import.meta.url).pathname);
+const PKG_ROOT = path.resolve(TOOL_DIR, '..', '..');
+
+type Args = {
+  book: string;
+  out: string;
+  fixture: string;
+  repo: boolean;
+  glFlags: boolean;
+};
+
+function parseArgs(argv: string[]): Args {
+  const a: Args = {
+    book: 'kaleidoscope.preset-book.ts',
+    out: 'assets/thumbnails',
+    fixture: path.join(TOOL_DIR, 'office-fixture.webp'),
+    repo: false,
+    glFlags: true,
+  };
+  for (let i = 0; i < argv.length; i++) {
+    const k = argv[i];
+    if (k === '--book') a.book = argv[++i] ?? a.book;
+    else if (k === '--out') a.out = argv[++i] ?? a.out;
+    else if (k === '--fixture') a.fixture = argv[++i] ?? a.fixture;
+    else if (k === '--repo') a.repo = true;
+    else if (k === '--no-gl-flags') a.glFlags = false;
+    else if (k === '--help' || k === '-h') {
+      console.log(
+        'usage: kaleidoscope-thumbnails --book <preset-book.ts> --out <dir> [--fixture <img>] [--repo] [--no-gl-flags]',
+      );
+      process.exit(0);
+    }
+  }
+  return a;
+}
+
+function toDataUrl(filePath: string): string {
+  const ext = path.extname(filePath).slice(1).toLowerCase();
+  const mime = ext === 'jpg' ? 'jpeg' : ext;
+  return `data:image/${mime};base64,${readFileSync(filePath).toString('base64')}`;
+}
+
+/** Find `catalog/images/<category>/<id>.webp` for a native image id. */
+function findCatalogImage(id: string): string | null {
+  const root = path.join(PKG_ROOT, 'catalog', 'images');
+  if (!existsSync(root)) return null;
+  for (const cat of readdirSync(root, { withFileTypes: true })) {
+    if (!cat.isDirectory()) continue;
+    const candidate = path.join(root, cat.name, `${id}.webp`);
+    if (existsSync(candidate)) return candidate;
+  }
+  return null;
+}
+
+/** Resolve an image layer's source (path, native id, or book-relative) to a file. */
+function resolveImagePath(source: string, bookDir: string): string | null {
+  if (existsSync(source)) return source;
+  const catalogHit = findCatalogImage(source);
+  if (catalogHit) return catalogHit;
+  const rel = path.resolve(bookDir, source);
+  if (existsSync(rel)) return rel;
+  return null;
+}
+
+/** Shader-name -> default-uniform map, read from the built control descriptors. */
+async function loadShaderDefaults(): Promise<Record<string, Record<string, number | number[]>>> {
+  const mod = (await import(path.join(PKG_ROOT, 'dist', 'catalog', 'shaders', 'index.js'))) as Record<
+    string,
+    unknown
+  >;
+  const defaults: Record<string, Record<string, number | number[]>> = {};
+  for (const [exportName, value] of Object.entries(mod)) {
+    if (!exportName.endsWith('_CONTROLS') || !Array.isArray(value)) continue;
+    const shader = exportName.slice(0, -'_CONTROLS'.length).toLowerCase().replace(/_/g, '-');
+    const map: Record<string, number | number[]> = {};
+    for (const c of value as Array<{ name: string; default: number | readonly number[] }>) {
+      map[c.name] = Array.isArray(c.default) ? [...c.default] : (c.default as number);
+    }
+    defaults[shader] = map;
+  }
+  return defaults;
+}
+
+type Job = {
+  readonly id: string;
+  readonly spec: PagePresetSpec;
+  readonly dest: string;
+  readonly extraDests: readonly string[]; // additional copies (catalog stomp + book-local)
+  readonly wire: boolean; // whether to print a thumbnail: wiring suggestion
+};
+
+function buildJobs(
+  book: Record<string, LoadedPreset>,
+  args: Args,
+  bookDir: string,
+  defaults: Record<string, Record<string, number | number[]>>,
+  shaderNames: ReadonlySet<string>,
+): Job[] {
+  const jobs: Job[] = [];
+  for (const [id, preset] of Object.entries(book)) {
+    const layers: PageLayerSpec[] = [];
+    const imagePaths: string[] = [];
+    let skip: string | null = null;
+
+    for (const layer of preset.layers) {
+      if (layer.target === 'subject' || layer.shader === 'direct') continue;
+      const blend = layer.blend;
+      if (layer.shader === 'image') {
+        const resolved = layer.source ? resolveImagePath(layer.source, bookDir) : null;
+        if (!resolved) {
+          skip = `image layer '${layer.id ?? '?'}' source '${layer.source}' not found`;
+          break;
+        }
+        imagePaths.push(resolved);
+        layers.push({ kind: 'image', dataUrl: toDataUrl(resolved), blend });
+      } else if (layer.shader === 'blur') {
+        const sigma = Number(layer.uniforms?.sigma ?? defaults.blur?.sigma ?? 3);
+        layers.push({ kind: 'blur', sigma, blend });
+      } else if (shaderNames.has(layer.shader)) {
+        const uniforms = { ...(defaults[layer.shader] ?? {}), ...(layer.uniforms ?? {}) };
+        const plain: Record<string, number | number[]> = {};
+        for (const [k, v] of Object.entries(uniforms)) plain[k] = Array.isArray(v) ? [...v] : (v as number);
+        layers.push({ kind: 'shader', name: layer.shader, uniforms: plain, blend });
+      } else {
+        skip = `unknown layer shader '${layer.shader}'`;
+        break;
+      }
+    }
+    if (skip) {
+      console.warn(`  skip ${id}: ${skip}`);
+      continue;
+    }
+    if (layers.length === 0) {
+      console.warn(`  skip ${id}: no renderable background layers`);
+      continue;
+    }
+
+    // Destination: repo conventions split composites and catalog images.
+    let dest = path.resolve(args.out, `${id}.thumb.webp`);
+    const extraDests: string[] = [];
+    let wire = true;
+    if (args.repo) {
+      const compositeDir = path.join(PKG_ROOT, 'catalog', 'composites', id);
+      const onlyImage = layers.length === 1 && layers[0]?.kind === 'image' && imagePaths[0];
+      if (existsSync(compositeDir)) {
+        dest = path.join(compositeDir, `${id}.thumb.webp`);
+        wire = false; // already wired by id (native) and by module (web)
+      } else if (onlyImage && imagePaths[0]?.startsWith(path.join(PKG_ROOT, 'catalog', 'images'))) {
+        // Stomp the catalog's image-thumb convention AND keep a book-local
+        // copy: the package's exports map does not expose catalog thumbs, so
+        // the book wires the local one.
+        const img = imagePaths[0];
+        extraDests.push(path.join(path.dirname(img), `${path.basename(img, '.webp')}.thumb.webp`));
+      }
+    }
+    jobs.push({ id, spec: { id, layers }, dest, extraDests, wire });
+  }
+  return jobs;
+}
+
+async function main(): Promise<void> {
+  const args = parseArgs(process.argv.slice(2));
+  if (!existsSync(args.book)) {
+    console.error(`book not found: ${args.book}`);
+    process.exit(2);
+  }
+  if (!existsSync(args.fixture)) {
+    console.error(`camera fixture not found: ${args.fixture}`);
+    process.exit(2);
+  }
+
+  let chromium: typeof import('playwright').chromium;
+  try {
+    ({ chromium } = await import('playwright'));
+  } catch {
+    console.error(
+      'playwright is required: install it as a devDependency (`bun add -d playwright && bunx playwright install chromium`).',
+    );
+    process.exit(2);
+  }
+
+  const book = await loadPresetBook(args.book);
+  const bookDir = path.dirname(path.resolve(args.book));
+  const defaults = await loadShaderDefaults();
+
+  const generated = (await import(
+    path.join(PKG_ROOT, 'dist', 'web-driver', 'shaders.generated.js')
+  )) as {
+    SHADER_SOURCES: Readonly<Record<string, string>>;
+    COMPOSITE_BLUR_FRAG_SRC: string;
+  };
+
+  const jobs = buildJobs(book, args, bookDir, defaults, new Set(Object.keys(generated.SHADER_SOURCES)));
+  console.log(`${jobs.length} preset(s) to render from ${path.relative(process.cwd(), args.book)}`);
+
+  const html = generatePage({
+    shaderSources: generated.SHADER_SOURCES,
+    blurFragSrc: generated.COMPOSITE_BLUR_FRAG_SRC,
+    fixtureDataUrl: toDataUrl(args.fixture),
+  });
+  const pagePath = path.join(tmpdir(), `kaleidoscope-thumbs-${process.pid}.html`);
+  writeFileSync(pagePath, html);
+
+  const browser = await chromium.launch({
+    args: args.glFlags ? ['--use-gl=angle', '--use-angle=gl'] : [],
+  });
+  const page = await browser.newPage({ viewport: { width: 800, height: 500 } });
+  page.on('pageerror', (e) => console.error(`  page error: ${e.message}`));
+  await page.goto(`file://${pagePath}`);
+
+  const wires: string[] = [];
+  let failures = 0;
+  for (const job of jobs) {
+    try {
+      const result = (await page.evaluate(
+        // biome-ignore lint/suspicious/noExplicitAny: page-scope function injected by render-page
+        (spec) => (window as any).renderPreset(spec),
+        job.spec,
+      )) as PageResult;
+      const b64 = result.dataUrl.slice('data:image/webp;base64,'.length);
+      for (const dest of [job.dest, ...job.extraDests]) {
+        mkdirSync(path.dirname(dest), { recursive: true });
+        writeFileSync(dest, Buffer.from(b64, 'base64'));
+      }
+      const kb = (Buffer.byteLength(b64, 'base64') / 1024).toFixed(1);
+      console.log(
+        `  ok ${job.id}  ->  ${path.relative(process.cwd(), job.dest)}  (${kb} KB, q ${result.q}, rmse ${result.rmse.toFixed(2)})`,
+      );
+      if (job.wire) wires.push(job.id);
+    } catch (e) {
+      failures++;
+      console.error(`  FAIL ${job.id}: ${e instanceof Error ? e.message : e}`);
+    }
+  }
+  await browser.close();
+
+  if (wires.length > 0) {
+    console.log('\nWire these into the book (the tool never edits it):');
+    for (const id of wires) {
+      console.log(
+        `  '${id}': thumbnail: Asset.fromModule(require('./${path.relative(bookDir, path.resolve(args.out, `${id}.thumb.webp`)).replace(/\\\\/g, '/')}')).uri,`,
+      );
+    }
+  }
+  if (failures > 0) {
+    console.error(`\n${failures} preset(s) failed`);
+    process.exit(1);
+  }
+}
+
+main();

package/tools/thumbnails/render-page.ts

@@ -0,0 +1,259 @@
+// The thumbnail maker's render page (issue #65): a self-contained HTML
+// document that composites one preset's non-subject layer stack and encodes a
+// 320x180 WebP, all in-browser (the browser's own encoder; no native image
+// deps). The CLI drives it per preset via `window.renderPreset(spec)`.
+//
+// Rendering model (mirrors the web compositor's semantics at thumbnail scale):
+//   - shader layers draw on a WebGL2 canvas (the generated single-source
+//     frags, exact preset uniforms over control defaults, fixed mid-animation
+//     uTime so output is deterministic and past initialization);
+//   - image layers cover-fit onto the 2D compositing canvas;
+//   - blur layers run the real composite-blur two-pass over the bundled
+//     "virtual scene" office fixture (the camera stand-in);
+//   - `additive` blend maps to canvas 'lighter', everything else paints over.
+//
+// Render happens at 2x (640x360) and downscales to 320x180 for antialiasing.
+// Encoding sweeps WebP quality from low to high and keeps the first level
+// whose decode round-trips within an RMSE gate against the uncompressed
+// canvas: smallest file with no visible artifacting.
+
+export type PageLayerSpec =
+  | {
+      readonly kind: 'shader';
+      readonly name: string;
+      readonly uniforms: Record<string, number | readonly number[]>;
+      readonly blend?: string;
+    }
+  | { readonly kind: 'image'; readonly dataUrl: string; readonly blend?: string }
+  | { readonly kind: 'blur'; readonly sigma: number; readonly blend?: string };
+
+export type PagePresetSpec = {
+  readonly id: string;
+  readonly layers: readonly PageLayerSpec[];
+};
+
+export type PageResult = {
+  readonly dataUrl: string;
+  readonly q: number;
+  readonly bytes: number;
+  readonly rmse: number;
+};
+
+const FULLSCREEN_VERT = `#version 300 es
+out highp vec2 vUv;
+void main() {
+  vec2 p = vec2(float((gl_VertexID << 1) & 2), float(gl_VertexID & 2));
+  vUv = p;
+  gl_Position = vec4(p * 2.0 - 1.0, 0.0, 1.0);
+}`;
+
+export function generatePage(opts: {
+  readonly shaderSources: Readonly<Record<string, string>>;
+  readonly blurFragSrc: string;
+  readonly fixtureDataUrl: string;
+}): string {
+  const data = JSON.stringify({
+    vert: FULLSCREEN_VERT,
+    sources: opts.shaderSources,
+    blurSrc: opts.blurFragSrc,
+    fixture: opts.fixtureDataUrl,
+  });
+  return `<!doctype html>
+<html><head><meta charset="utf-8"><title>kaleidoscope thumbnails</title></head>
+<body>
+<script>
+const DATA = ${data};
+const W = 640, H = 360, TW = 320, TH = 180;
+// Fixed mid-animation clock: deterministic, and well past t=0 initialization.
+const T = 7.0;
+// RMSE gate (0..255 scale) for "no visible artifacting" on a 320x180 thumb.
+const RMSE_MAX = 2.6;
+const QUALITIES = [0.5, 0.6, 0.68, 0.76, 0.84, 0.92];
+
+const glc = document.createElement('canvas');
+glc.width = W; glc.height = H;
+const gl = glc.getContext('webgl2', { antialias: false, preserveDrawingBuffer: true });
+
+const progCache = {};
+function compile(type, src) {
+  const s = gl.createShader(type);
+  gl.shaderSource(s, src); gl.compileShader(s);
+  if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) {
+    throw new Error('shader compile: ' + (gl.getShaderInfoLog(s) || '?'));
+  }
+  return s;
+}
+function program(key, fragSrc) {
+  if (progCache[key]) return progCache[key];
+  const p = gl.createProgram();
+  gl.attachShader(p, compile(gl.VERTEX_SHADER, DATA.vert));
+  gl.attachShader(p, compile(gl.FRAGMENT_SHADER, fragSrc));
+  gl.linkProgram(p);
+  if (!gl.getProgramParameter(p, gl.LINK_STATUS)) {
+    throw new Error('link ' + key + ': ' + (gl.getProgramInfoLog(p) || '?'));
+  }
+  progCache[key] = p;
+  return p;
+}
+
+function setUniform(p, name, v) {
+  const loc = gl.getUniformLocation(p, name) || gl.getUniformLocation(p, name + '[0]');
+  if (!loc) return;
+  if (typeof v === 'number') { gl.uniform1f(loc, v); return; }
+  if (!Array.isArray(v)) return;
+  if (v.length === 2) gl.uniform2f(loc, v[0], v[1]);
+  else if (v.length === 3) gl.uniform3f(loc, v[0], v[1], v[2]);
+  else if (v.length === 4) gl.uniform4f(loc, v[0], v[1], v[2], v[3]);
+  else gl.uniform2fv(loc, new Float32Array(v)); // a flat vec2[] (polygon)
+}
+function setUniforms(p, uniforms, w, h) {
+  gl.useProgram(p);
+  setUniform(p, 'uTime', T);
+  setUniform(p, 'uResolution', [w, h]);
+  for (const k in uniforms) setUniform(p, k, uniforms[k]);
+}
+
+function renderShader(name, uniforms) {
+  const src = DATA.sources[name];
+  if (!src) throw new Error('no shader source registered for "' + name + '"');
+  const p = program(name, src);
+  gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+  gl.viewport(0, 0, W, H);
+  setUniforms(p, uniforms, W, H);
+  gl.drawArrays(gl.TRIANGLES, 0, 3);
+}
+
+function imgToTexture(img) {
+  const tex = gl.createTexture();
+  gl.bindTexture(gl.TEXTURE_2D, tex);
+  gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
+  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img);
+  gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+  return tex;
+}
+function makeFbo(w, h) {
+  const tex = gl.createTexture();
+  gl.bindTexture(gl.TEXTURE_2D, tex);
+  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA8, w, h, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+  const fbo = gl.createFramebuffer();
+  gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);
+  gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, tex, 0);
+  gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+  return { fbo, tex };
+}
+
+let fixtureImgP = null;
+function fixtureImg() {
+  if (!fixtureImgP) fixtureImgP = loadImg(DATA.fixture);
+  return fixtureImgP;
+}
+function loadImg(url) {
+  return new Promise((res, rej) => {
+    const i = new Image();
+    i.onload = () => res(i);
+    i.onerror = () => rej(new Error('image failed to load'));
+    i.src = url;
+  });
+}
+
+// The real composite-blur, both separable passes, over the camera stand-in.
+async function renderBlur(sigma) {
+  const img = await fixtureImg();
+  const srcTex = imgToTexture(img);
+  const pass = makeFbo(W, H);
+  const p = program('composite-blur', DATA.blurSrc);
+  gl.activeTexture(gl.TEXTURE0);
+
+  gl.bindFramebuffer(gl.FRAMEBUFFER, pass.fbo);
+  gl.viewport(0, 0, W, H);
+  gl.bindTexture(gl.TEXTURE_2D, srcTex);
+  gl.useProgram(p);
+  setUniform(p, 'uTex', 0);
+  const texLoc = gl.getUniformLocation(p, 'uTex');
+  if (texLoc) gl.uniform1i(texLoc, 0);
+  setUniform(p, 'uSigma', sigma);
+  setUniform(p, 'uDir', [1 / W, 0]);
+  gl.drawArrays(gl.TRIANGLES, 0, 3);
+
+  gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+  gl.viewport(0, 0, W, H);
+  gl.bindTexture(gl.TEXTURE_2D, pass.tex);
+  if (texLoc) gl.uniform1i(texLoc, 0);
+  setUniform(p, 'uSigma', sigma);
+  setUniform(p, 'uDir', [0, 1 / H]);
+  gl.drawArrays(gl.TRIANGLES, 0, 3);
+}
+
+function coverDraw(ctx, img, w, h) {
+  const s = Math.max(w / img.naturalWidth, h / img.naturalHeight);
+  const dw = img.naturalWidth * s, dh = img.naturalHeight * s;
+  ctx.drawImage(img, (w - dw) / 2, (h - dh) / 2, dw, dh);
+}
+
+async function rmseAgainst(ref, dataUrl) {
+  const img = await loadImg(dataUrl);
+  const c = document.createElement('canvas');
+  c.width = TW; c.height = TH;
+  const x = c.getContext('2d');
+  x.drawImage(img, 0, 0);
+  const got = x.getImageData(0, 0, TW, TH).data;
+  let sum = 0, n = 0;
+  for (let i = 0; i < got.length; i += 4) {
+    for (let ch = 0; ch < 3; ch++) {
+      const d = got[i + ch] - ref.data[i + ch];
+      sum += d * d; n++;
+    }
+  }
+  return Math.sqrt(sum / n);
+}
+
+window.renderPreset = async (spec) => {
+  const comp = document.createElement('canvas');
+  comp.width = W; comp.height = H;
+  const ctx = comp.getContext('2d');
+  ctx.fillStyle = '#000';
+  ctx.fillRect(0, 0, W, H);
+
+  for (const layer of spec.layers) {
+    ctx.globalCompositeOperation = layer.blend === 'additive' ? 'lighter' : 'source-over';
+    if (layer.kind === 'image') {
+      coverDraw(ctx, await loadImg(layer.dataUrl), W, H);
+    } else if (layer.kind === 'blur') {
+      await renderBlur(layer.sigma);
+      ctx.drawImage(glc, 0, 0, W, H);
+    } else {
+      renderShader(layer.name, layer.uniforms);
+      ctx.drawImage(glc, 0, 0, W, H);
+    }
+  }
+  ctx.globalCompositeOperation = 'source-over';
+
+  const tc = document.createElement('canvas');
+  tc.width = TW; tc.height = TH;
+  const tctx = tc.getContext('2d');
+  tctx.drawImage(comp, 0, 0, TW, TH);
+  const ref = tctx.getImageData(0, 0, TW, TH);
+
+  for (const q of QUALITIES) {
+    const url = tc.toDataURL('image/webp', q);
+    const rmse = await rmseAgainst(ref, url);
+    if (rmse <= RMSE_MAX) {
+      return { dataUrl: url, q, bytes: Math.round((url.length - 'data:image/webp;base64,'.length) * 0.75), rmse };
+    }
+  }
+  // Noisy content (dot lattices, starfields, confetti) never satisfies an
+  // RMSE gate; the per-pixel error is invisible dither. Cap at the sweep's
+  // top quality instead of escalating further.
+  const url = tc.toDataURL('image/webp', 0.92);
+  const rmse = await rmseAgainst(ref, url);
+  return { dataUrl: url, q: 0.92, bytes: Math.round((url.length - 'data:image/webp;base64,'.length) * 0.75), rmse };
+};
+</script>
+</body></html>`;
+}