@moood/render 0.0.0 → 0.1.2

package/engine/gl.js

@@ -1,1027 +1,1027 @@
-// WebGL2 renderer for the living-scene engine (engine.js). Everything expensive to
-// paint — landscape layers, objects, clouds, celestials — is painted once per scene
-// with engine.js's Canvas 2D code and uploaded as textures. Each frame the GPU places
-// those textures (camera + parallax), draws glows and particles as batched sprites, runs
-// a small shader for water, and one final pass for tint, vignette and film grain.
-// Close up, the edges of the landscape come from sharp tiles painted at the zoom level
-// (like a map), a few per frame, ahead of the camera.
-const MooodGL = (() => {
-  const I = Moood.internals;
-  const QUADS = 8192, STRIDE = 10; // per vertex: x y u v r g b a, haze k b
-
-  // Everything is drawn in the frame's pixels (engine.js: the frame is a landscape rectangle inside
-  // the canvas, which shows the scene on around it): u_off is where the frame starts in the
-  // canvas, u_canvas the canvas's size.
-  const VS = `#version 300 es
-  in vec2 a_pos; in vec2 a_uv; in vec4 a_col; in vec2 a_haze;
-  uniform vec2 u_canvas, u_off;
-  out vec2 v_uv; out vec4 v_col; out vec2 v_haze;
-  void main() {
-    v_uv = a_uv; v_col = a_col; v_haze = a_haze;
-    vec2 p = a_pos + u_off;
-    gl_Position = vec4(p.x / u_canvas.x * 2.0 - 1.0, 1.0 - p.y / u_canvas.y * 2.0, 0.0, 1.0);
-  }`;
-  const FS = `#version 300 es
-  precision mediump float;
-  in vec2 v_uv; in vec4 v_col; in vec2 v_haze;
-  uniform sampler2D u_tex;
-  uniform vec3 u_fog;
-  out vec4 o;
-  // aerial perspective (see haze()): colour·k + fog·b, premultiplied
-  void main() {
-    o = texture(u_tex, v_uv) * v_col;
-    // painted colours don't always hold the haze we assume: never darken more than 40%; an
-    // additive quad (light, alpha 0) is never brightened by it
-    o.rgb = clamp(o.rgb * v_haze.x + u_fog * v_haze.y * o.a, o.rgb * 0.6, o.a > 0.0 ? vec3(o.a) : o.rgb);
-  }`;
-  // full-screen passes: a triangle pair in pixel coordinates
-  const QVS = `#version 300 es
-  in vec2 a_pos; uniform vec2 u_canvas, u_off;
-  void main() { vec2 p = a_pos + u_off; gl_Position = vec4(p.x / u_canvas.x * 2.0 - 1.0, 1.0 - p.y / u_canvas.y * 2.0, 0.0, 1.0); }`;
-  // Water: mirror what is drawn above the horizon, ripple it, tint with the water colour.
-  const WFS = `#version 300 es
-  precision highp float;
-  uniform sampler2D u_tex;
-  uniform vec2 u_res, u_canvas, u_off;  // the frame, the canvas, where the frame starts in it
-  uniform float u_wy, u_k, u_t, u_speed, u_u;
-  uniform vec3 u_col;
-  out vec4 o;
-  void main() {
-    float px = gl_FragCoord.x - u_off.x, py = u_canvas.y - gl_FragCoord.y - u_off.y;
-    float depth = u_res.y - u_wy, d = clamp((py - u_wy) / depth, 0.0, 1.0);
-    float dx = (sin(30.0 * log(0.03 + d) - u_t * 1.4 * u_speed) * 0.6 + sin(d * 53.0 + u_t * 0.8) * 0.4) * (1.0 + d * 16.0) * u_u;
-    float sy = max(0.0, u_wy - 1.0 - (py - u_wy) * u_k);
-    vec3 refl = texture(u_tex, vec2((px + dx + u_off.x) / u_canvas.x, 1.0 - (sy + u_off.y) / u_canvas.y)).rgb;
-    vec3 c = mix(refl, u_col, mix(0.35, 0.8, d));
-    c += vec3(0.06) * (1.0 - step(u_u, py - u_wy)); // thin bright line on the horizon
-    o = vec4(c, 1.0);
-  }`;
-  // Final pass: soft-light tint, vignette, per-pixel film grain (overlay), fresh every frame.
-  const PFS = `#version 300 es
-  precision highp float;
-  uniform sampler2D u_scene;
-  uniform vec2 u_res, u_at, u_canvas;  // the frame's size, where it starts in the canvas (window px), the canvas
-  uniform vec3 u_tint;
-  uniform float u_tintA, u_vig, u_grain, u_seed, u_fade;
-  uniform vec3 u_fadeCol;
-  out vec4 o;
-  float hash(vec2 p) { vec3 q = fract(vec3(p.xyx) * 0.1031); q += dot(q, q.yzx + 33.33); return fract((q.x + q.y) * q.z); }
-  vec3 softLight(vec3 b, vec3 s) {
-    vec3 d = mix(((16.0 * b - 12.0) * b + 4.0) * b, sqrt(b), step(0.25, b));
-    return mix(b - (1.0 - 2.0 * s) * b * (1.0 - b), b + (2.0 * s - 1.0) * (d - b), step(0.5, s));
-  }
-  // Around the frame the scene goes on as painted; where nothing is painted (alpha 0), the colour at
-  // the frame's nearest edge carries on. Out of the frame it dims gently toward the canvas's edges.
-  void main() {
-    vec2 q = gl_FragCoord.xy, px = q - u_at;
-    vec4 s = texture(u_scene, q / u_canvas);
-    vec3 edge = texture(u_scene, clamp(q, u_at + 0.5, u_at + u_res - 0.5) / u_canvas).rgb;
-    vec3 c = s.rgb + (1.0 - s.a) * edge;
-    c = mix(c, softLight(c, u_tint), u_tintA);
-    float r0 = min(u_res.x, u_res.y) * 0.35, r1 = length(u_res) * 0.6;
-    c *= 1.0 - u_vig * clamp((length(px - u_res * 0.5) - r0) / (r1 - r0), 0.0, 1.0);
-    vec2 out_ = max(max(-px, px - u_res), 0.0);
-    c *= 1.0 - 0.45 * smoothstep(0.0, 0.5, length(out_) / u_res.y);
-    float n = hash(px + u_seed);
-    vec3 ov = mix(2.0 * c * n, 1.0 - 2.0 * (1.0 - c) * (1.0 - n), step(0.5, c));
-    o = vec4(mix(mix(c, ov, u_grain), u_fadeCol, u_fade), 1.0);
-  }`;
-
-  function program(gl, vs, fs) {
-    const p = gl.createProgram();
-    for (const [type, src] of [[gl.VERTEX_SHADER, vs], [gl.FRAGMENT_SHADER, fs]]) {
-      const s = gl.createShader(type);
-      gl.shaderSource(s, src);
-      gl.compileShader(s);
-      if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) throw new Error(gl.getShaderInfoLog(s));
-      gl.attachShader(p, s);
-    }
-    gl.bindAttribLocation(p, 0, 'a_pos');
-    gl.bindAttribLocation(p, 1, 'a_uv');
-    gl.bindAttribLocation(p, 2, 'a_col');
-    gl.bindAttribLocation(p, 3, 'a_haze');
-    gl.linkProgram(p);
-    if (!gl.getProgramParameter(p, gl.LINK_STATUS)) throw new Error(gl.getProgramInfoLog(p));
-    return p;
-  }
-  const uniforms = (gl, p, names) => Object.fromEntries(names.map(n => [n, gl.getUniformLocation(p, 'u_' + n)]));
-
-  // small 2D helpers for sprite textures
-  function paint(w, h, fn) { const c = I.layer(w, h); fn(c.getContext('2d'), c.width, c.height); return c; }
-  const colours = new Map();
-  function col(hexOrRgb) {
-    let c = colours.get(hexOrRgb);
-    if (!c) {
-      const rgb = hexOrRgb.startsWith('#') ? I.rgb(hexOrRgb) : hexOrRgb;
-      c = rgb.split(',').map(v => Number(v) / 255);
-      colours.set(hexOrRgb, c);
-    }
-    return c;
-  }
-  const WHITE = [1, 1, 1];
-
-  // affine matrices [a b c d e f]: x' = a x + c y + e, y' = b x + d y + f
-  const ID = [1, 0, 0, 1, 0, 0];
-  const mul = (m, n) => [m[0] * n[0] + m[2] * n[1], m[1] * n[0] + m[3] * n[1], m[0] * n[2] + m[2] * n[3], m[1] * n[2] + m[3] * n[3], m[0] * n[4] + m[2] * n[5] + m[4], m[1] * n[4] + m[3] * n[5] + m[5]];
-  // rotate by r and scale (sx, sy) around pivot (px, py), then shift by (tx, ty)
-  const around = (px, py, r, sx, sy, tx = 0, ty = 0) => {
-    const c = Math.cos(r), s = Math.sin(r);
-    const a = c * sx, b = s * sx, cc = -s * sy, d = c * sy;
-    return [a, b, cc, d, px - a * px - cc * py + tx, py - b * px - d * py + ty];
-  };
-  const apply = (m, x, y) => [m[0] * x + m[2] * y + m[4], m[1] * x + m[3] * y + m[5]];
-
-  function create(canvas) {
-    const gl = canvas.getContext('webgl2', { alpha: false, antialias: false, depth: false, stencil: false, premultipliedAlpha: true, preserveDrawingBuffer: false });
-    if (!gl) return null;
-    const prog = program(gl, VS, FS), wprog = program(gl, QVS, WFS), pprog = program(gl, QVS, PFS);
-    const su = uniforms(gl, prog, ['canvas', 'off', 'tex', 'fog']);
-    const wu = uniforms(gl, wprog, ['res', 'canvas', 'off', 'tex', 'wy', 'k', 't', 'speed', 'u', 'col']);
-    const pu = uniforms(gl, pprog, ['res', 'at', 'canvas', 'off', 'scene', 'tint', 'tintA', 'vig', 'grain', 'seed', 'fade', 'fadeCol']);
-
-    const data = new Float32Array(QUADS * 4 * STRIDE);
-    const vao = gl.createVertexArray();
-    gl.bindVertexArray(vao);
-    const vbo = gl.createBuffer();
-    gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
-    gl.bufferData(gl.ARRAY_BUFFER, data.byteLength, gl.DYNAMIC_DRAW);
-    const idx = new Uint16Array(QUADS * 6);
-    for (let q = 0; q < QUADS; q++) idx.set([q * 4, q * 4 + 1, q * 4 + 2, q * 4, q * 4 + 2, q * 4 + 3], q * 6);
-    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, gl.createBuffer());
-    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, idx, gl.STATIC_DRAW);
-    gl.enableVertexAttribArray(0); gl.vertexAttribPointer(0, 2, gl.FLOAT, false, STRIDE * 4, 0);
-    gl.enableVertexAttribArray(1); gl.vertexAttribPointer(1, 2, gl.FLOAT, false, STRIDE * 4, 8);
-    gl.enableVertexAttribArray(2); gl.vertexAttribPointer(2, 4, gl.FLOAT, false, STRIDE * 4, 16);
-    gl.enableVertexAttribArray(3); gl.vertexAttribPointer(3, 2, gl.FLOAT, false, STRIDE * 4, 32);
-    const qvao = gl.createVertexArray();
-    gl.bindVertexArray(qvao);
-    const qvbo = gl.createBuffer();
-    gl.bindBuffer(gl.ARRAY_BUFFER, qvbo);
-    gl.enableVertexAttribArray(0); gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 8, 0);
-    gl.bindVertexArray(null);
-
-    gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
-    gl.enable(gl.BLEND);
-
-    function texture(source) {
-      const t = gl.createTexture();
-      gl.bindTexture(gl.TEXTURE_2D, t);
-      gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, source);
-      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 t;
-    }
-    // an offscreen render target of the canvas size
-    function target(w, h) {
-      const tex = gl.createTexture();
-      gl.bindTexture(gl.TEXTURE_2D, tex);
-      gl.texStorage2D(gl.TEXTURE_2D, 1, gl.RGBA8, w, h);
-      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);
-      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 { tex, fbo };
-    }
-    const dropTarget = r => { gl.deleteTexture(r.tex); gl.deleteFramebuffer(r.fbo); };
-
-    // textures shared by every scene
-    const T = {
-      white: texture(paint(2, 2, (g) => { g.fillStyle = '#fff'; g.fillRect(0, 0, 2, 2); })),
-      glow: texture(I.glowSprite('255,255,255')),
-      dot: texture(paint(32, 32, (g) => { const r = g.createRadialGradient(16, 16, 0, 16, 16, 16); r.addColorStop(0, '#fff'); r.addColorStop(0.55, 'rgba(255,255,255,0.9)'); r.addColorStop(1, 'rgba(255,255,255,0)'); g.fillStyle = r; g.fillRect(0, 0, 32, 32); })),
-      ring: texture(paint(32, 32, (g) => { g.strokeStyle = '#fff'; g.lineWidth = 2; g.beginPath(); g.arc(16, 16, 13, 0, 7); g.stroke(); })),
-      streak: texture(paint(4, 32, (g) => { const r = g.createLinearGradient(0, 0, 0, 32); r.addColorStop(0, 'rgba(255,255,255,0)'); r.addColorStop(1, '#fff'); g.fillStyle = r; g.fillRect(1, 0, 2, 32); })),
-      ellipse: texture(paint(32, 16, (g) => { g.fillStyle = '#fff'; g.beginPath(); g.ellipse(16, 8, 15, 7, 0, 0, 7); g.fill(); })),
-    };
-
-    // ── batching ─────────────────────────────────────────────────────────
-    // W × H: the frame; SW: the width of the stage everything is painted on (engine.js);
-    // ROUND: the scene is looked around (around, roam) — elements are cards standing in the world
-    // OX, OY: where the frame starts in the canvas, CW × CH the canvas (px); what is seen is the
-    // canvas — in the frame's pixels from (VX0, VY0) to (VX1, VY1)
-    let n = 0, curTex = null, curAdd = false, W = 1, H = 1, SW = 1, ROUND = false;
-    let OX = 0, OY = 0, CW = 1, CH = 1, VX0 = 0, VY0 = 0, VX1 = 1, VY1 = 1;
-    // Aerial perspective: air between you and a thing tints it toward the horizon's sky
-    // colour, h(D) = 1 − e^(−D/HAZE). The scene is painted as seen from the start, so its
-    // colours already hold the haze of distance Z; walking to distance D we take that out and
-    // put the new amount in: c·k + fog·b, k = (1−h(D))/(1−h(Z)), b = h(D) − h(Z)·k.
-    // HAZE in eye heights: 220 = clear air (~40% haze at 200 m); spec.light.haze 0…1 → 600…25
-    const NOHAZE = [1, 0];
-    let HAZE = 220;
-    let HZ = NOHAZE, FOG = [0.5, 0.5, 0.5];
-    const hz = D => 1 - Math.exp(-Math.max(0, D) / HAZE);
-    // painted for distance Z, seen from D away
-    const haze = (Z, D) => {
-      const h0 = Math.min(0.85, hz(Z)), h1 = hz(D), k = Math.min(3, (1 - h1) / (1 - h0));
-      return [k, h1 - h0 * k];
-    };
-    function flush() {
-      if (!n) return;
-      gl.useProgram(prog);
-      gl.bindVertexArray(vao);
-      gl.uniform2f(su.canvas, CW, CH);
-      gl.uniform2f(su.off, OX, OY);
-      gl.uniform3f(su.fog, ...FOG);
-      gl.activeTexture(gl.TEXTURE0);
-      gl.bindTexture(gl.TEXTURE_2D, curTex);
-      gl.uniform1i(su.tex, 0);
-      if (curAdd) gl.blendFunc(gl.ONE, gl.ONE); else gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
-      gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
-      gl.bufferSubData(gl.ARRAY_BUFFER, 0, data, 0, n * 4 * STRIDE);
-      gl.drawElements(gl.TRIANGLES, n * 6, gl.UNSIGNED_SHORT, 0);
-      n = 0;
-    }
-    // one textured quad: the rect (x, y, w, h) transformed by m, uv rect, tint, alpha.
-    // Colours are premultiplied; additive quads get alpha 0 so they only add light.
-    const UV = [0, 0, 1, 1];
-    function rect(tex, m, x, y, w, h, c = WHITE, a = 1, add = false, uv = UV) {
-      if (a <= 0) return;
-      if (tex !== curTex || add !== curAdd || n >= QUADS) { flush(); curTex = tex; curAdd = add; }
-      const r = c[0] * a, g = c[1] * a, b = c[2] * a, al = add ? 0 : a;
-      const ax = m[0] * w, ay = m[1] * w, bx = m[2] * h, by = m[3] * h;
-      const ox = m[0] * x + m[2] * y + m[4], oy = m[1] * x + m[3] * y + m[5];
-      let k = n * 4 * STRIDE;
-      const v = (px, py, u, vv) => { data[k] = px; data[k + 1] = py; data[k + 2] = u; data[k + 3] = vv; data[k + 4] = r; data[k + 5] = g; data[k + 6] = b; data[k + 7] = al; data[k + 8] = HZ[0]; data[k + 9] = HZ[1]; k += STRIDE; };
-      v(ox, oy, uv[0], uv[1]);
-      v(ox + ax, oy + ay, uv[2], uv[1]);
-      v(ox + ax + bx, oy + ay + by, uv[2], uv[3]);
-      v(ox + bx, oy + by, uv[0], uv[3]);
-      n++;
-    }
-    // a textured quad with four free corners p = [x0,y0, x1,y1, x2,y2, x3,y3] (clockwise from top-left)
-    function quad(tex, p, uv, c = WHITE, a = 1) {
-      if (tex !== curTex || curAdd || n >= QUADS) { flush(); curTex = tex; curAdd = false; }
-      const r = c[0] * a, g = c[1] * a, b = c[2] * a;
-      let k = n * 4 * STRIDE;
-      const v = (i, u, vv) => { data[k] = p[i]; data[k + 1] = p[i + 1]; data[k + 2] = u; data[k + 3] = vv; data[k + 4] = r; data[k + 5] = g; data[k + 6] = b; data[k + 7] = a; data[k + 8] = HZ[0]; data[k + 9] = HZ[1]; k += STRIDE; };
-      v(0, uv[0], uv[1]); v(2, uv[2], uv[1]); v(4, uv[2], uv[3]); v(6, uv[0], uv[3]);
-      n++;
-    }
-    // a textured quad with four free corners, each [x, y, u, v]
-    function quadAt(tex, A, B, C_, D) {
-      if (tex !== curTex || curAdd || n >= QUADS) { flush(); curTex = tex; curAdd = false; }
-      let k = n * 4 * STRIDE;
-      for (const q of [A, B, C_, D]) {
-        data[k] = q[0]; data[k + 1] = q[1]; data[k + 2] = q[2]; data[k + 3] = q[3];
-        data[k + 4] = 1; data[k + 5] = 1; data[k + 6] = 1; data[k + 7] = 1; data[k + 8] = HZ[0]; data[k + 9] = HZ[1];
-        k += STRIDE;
-      }
-      n++;
-    }
-    function sprite(tex, m, cx, cy, w, h, rot, c, a, add) {
-      rect(tex, rot ? mul(m, around(cx, cy, rot, 1, 1)) : m, cx - w / 2, cy - h / 2, w, h, c, a, add);
-    }
-    // an opaque band across all that is seen (y0..y1, frame px) drawn with program p (its
-    // u_canvas, u_off set)
-    function band(p, y0, y1) {
-      flush();
-      gl.useProgram(p);
-      gl.bindVertexArray(qvao);
-      gl.bindBuffer(gl.ARRAY_BUFFER, qvbo);
-      gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([VX0, y0, VX1, y0, VX1, y1, VX0, y0, VX1, y1, VX0, y1]), gl.STREAM_DRAW);
-      gl.disable(gl.BLEND);
-      gl.drawArrays(gl.TRIANGLES, 0, 6);
-      gl.enable(gl.BLEND);
-      curTex = null;
-    }
-
-    // ── camera ───────────────────────────────────────────────────────────
-    let YH = 0.6; // horizon of the current scene, in screen heights
-    const camMatrix = (cam, Z) => I.view(cam, Z, W, H, YH);
-    // where an element's painting goes from camera c: { m, D } (D: its distance along the gaze),
-    // null behind the eye
-    const matOf = (ob, c) => (ROUND ? I.billboard(c, ob.p, ob.x, ob.y, W, H, YH) : { m: camMatrix(c, ob.Z), D: ob.Z - c.z });
-    // what part of a depth plane is seen, in its own (unscaled) coordinates
-    const visible = m => ({ x: (VX0 - m[4]) / m[0], y: (VY0 - m[5]) / m[3], w: (VX1 - VX0) / m[0], h: (VY1 - VY0) / m[3] });
-
-    // ── landscape layers ─────────────────────────────────────────────────
-    // A layer is one colour. Per vertical strip it is empty above `tops`, solid below
-    // `solids`: the body is a flat fill, and only the band between (ridges, roofs, trees)
-    // needs a texture. Close up, that band is shown from sharp tiles painted at the zoom
-    // level (TILE px square, level n = scale LEVEL^n), like a map; a tile that isn't ready
-    // yet falls back to a neighbouring level, then to the scene's base texture.
-    const TILE = 512, PAD = 1, LEVEL = 1.5, MAX_TILES = 160, TILES_PER_FRAME = 6;
-    const levelFor = s => (s <= 1.05 ? 0 : Math.min(7, Math.ceil(Math.log(s) / Math.log(LEVEL) - 1e-6)));
-    const scratch = I.layer(TILE + 2 * PAD, TILE + 2 * PAD), pool = [];
-    let tileCount = 0, frameNo = 0;
-    let BYID = new Map(); // the scene's elements by id (this frame's)
-    function tileTexture() {
-      if (pool.length) return pool.pop();
-      const t = gl.createTexture();
-      gl.bindTexture(gl.TEXTURE_2D, t);
-      gl.texStorage2D(gl.TEXTURE_2D, 1, gl.RGBA8, TILE + 2 * PAD, TILE + 2 * PAD);
-      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 t;
-    }
-    function freeTile(tile) {
-      tileCount--;
-      if (pool.length < 16) pool.push(tile.tex); else gl.deleteTexture(tile.tex);
-    }
-    const TUV = [PAD / (TILE + 2 * PAD), PAD / (TILE + 2 * PAD), 1 - PAD / (TILE + 2 * PAD), 1 - PAD / (TILE + 2 * PAD)];
-    const tileSize = n => TILE / Math.pow(LEVEL, n);
-    // the band's vertical extent over layer x range [xa, xb]
-    function bandOver(l, xa, xb) {
-      let top = Infinity, bot = -Infinity;
-      for (let i = Math.max(0, Math.floor((xa - l.x0) / l.stripW)); i <= Math.min(l.tops.length - 1, Math.floor((xb - l.x0) / l.stripW)); i++) {
-        if (l.solids[i] > l.tops[i]) { top = Math.min(top, l.tops[i]); bot = Math.max(bot, l.solids[i]); }
-      }
-      return [top, bot];
-    }
-    // tile cells at level n that cover the band within region v (layer coordinates)
-    function cells(l, n, v) {
-      const ts = tileSize(n), out = [];
-      for (let tx = Math.floor(v.x / ts); tx * ts < v.x + v.w; tx++) {
-        const [top, bot] = bandOver(l, tx * ts, (tx + 1) * ts);
-        if (!(bot > top)) continue;
-        for (let ty = Math.floor(Math.max(v.y, top) / ts); ty * ts < Math.min(v.y + v.h, bot); ty++) out.push({ tx, ty, x: tx * ts, y: ty * ts, s: ts });
-      }
-      return out;
-    }
-    function paintTile(l, n, c) {
-      const k = Math.pow(LEVEL, n);
-      I.staticLayer(l.L, SW, H, l.seed, { x: c.x - PAD / k, y: c.y - PAD / k, w: (TILE + 2 * PAD) / k, h: (TILE + 2 * PAD) / k, k, canvas: scratch });
-      const tex = tileTexture();
-      gl.bindTexture(gl.TEXTURE_2D, tex);
-      gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, gl.RGBA, gl.UNSIGNED_BYTE, scratch);
-      l.tiles.set(`${n}:${c.tx}:${c.ty}`, { tex, used: frameNo, n });
-      tileCount++;
-    }
-    // best available texture for a cell: its own level, else a neighbour level covering it
-    function tileFor(l, n, c) {
-      for (const m of [n, n - 1, n + 1]) {
-        if (m < 1) continue;
-        const ts = tileSize(m), tx = Math.floor((c.x + c.s / 2) / ts), ty = Math.floor((c.y + c.s / 2) / ts);
-        const t = l.tiles.get(`${m}:${tx}:${ty}`);
-        if (t && (m === n || (tx * ts <= c.x + 0.01 && ty * ts <= c.y + 0.01 && (tx + 1) * ts >= c.x + c.s - 0.01 && (ty + 1) * ts >= c.y + c.s - 0.01))) {
-          t.used = frameNo;
-          const ox = (c.x - tx * ts) / ts, oy = (c.y - ty * ts) / ts, f = c.s / ts, span = TUV[2] - TUV[0];
-          return { tex: t.tex, uv: [TUV[0] + ox * span, TUV[1] + oy * span, TUV[0] + (ox + f) * span, TUV[1] + (oy + f) * span] };
-        }
-      }
-      return null;
-    }
-    function drawLayer(l, m, cam) {
-      const r = l.region, bottom = r.y + r.h, c = col(l.L.color);
-      // flat body, strip by strip
-      for (let i = 0; i < l.tops.length; i++) {
-        const xa = l.x0 + i * l.stripW, xb = xa + l.stripW;
-        if (m[0] * xb + m[4] < VX0 || m[0] * xa + m[4] > VX1) continue;
-        rect(T.white, m, xa, l.solids[i], l.stripW, bottom + 50 * H - l.solids[i], c);
-      }
-      const n = levelFor(m[0]);
-      if (n === 0) {
-        for (let i = 0; i < l.tops.length; i++) {
-          const xa = l.x0 + i * l.stripW, xb = xa + l.stripW, ya = l.tops[i], yb = l.solids[i];
-          if (yb <= ya || m[0] * xb + m[4] < VX0 || m[0] * xa + m[4] > VX1) continue;
-          rect(l.tex, m, xa, ya, xb - xa, yb - ya, WHITE, 1, false, [(xa - r.x) / r.w, (ya - r.y) / r.h, (xb - r.x) / r.w, (yb - r.y) / r.h]);
-        }
-        return;
-      }
-      for (const cell of cells(l, n, visible(m))) {
-        const t = tileFor(l, n, cell);
-        if (t) rect(t.tex, m, cell.x, cell.y, cell.s, cell.s, WHITE, 1, false, t.uv);
-        else rect(l.tex, m, cell.x, cell.y, cell.s, cell.s, WHITE, 1, false, [(cell.x - r.x) / r.w, (cell.y - r.y) / r.h, (cell.x + cell.s - r.x) / r.w, (cell.y + cell.s - r.y) / r.h]);
-      }
-    }
-
-    // ── build: paint everything once ─────────────────────────────────────
-    // w × h: the frame; out = { x, y, cw, ch }: where it starts in the canvas and the canvas (px)
-    function build(spec, w, h, prev, out) {
-      if (prev) {
-        for (const t of prev.textures) gl.deleteTexture(t);
-        dropTarget(prev.scene); dropTarget(prev.copy);
-        for (const l of prev.layers) if (l.tiles) for (const t of l.tiles.values()) freeTile(t);
-      }
-      W = w; H = h; SW = I.STAGE * h; ROUND = I.camSetup(spec).round;
-      OX = out.x; OY = out.y; CW = out.cw; CH = out.ch; VX0 = -OX; VY0 = -OY; VX1 = CW - OX; VY1 = CH - OY;
-      const textures = new Set(), tex = c => { const t = texture(c); textures.add(t); return t; };
-      const u = H / 900, seed = I.hash(JSON.stringify(spec.layers || []) + (spec.title || '')), rnd = I.seeded(seed);
-      const x0 = -I.EXT * SW, span = (1 + 2 * I.EXT) * SW, dz = I.depths(spec);
-      YH = dz.yh;
-      FOG = col(spec.light?.hazeColor || spec.sky?.bottom || '#808080');
-      HAZE = typeof spec.light?.haze === 'number' ? 600 * Math.pow(25 / 600, I.clamp(spec.light.haze, 0, 1)) : 220;
-
-      const sky = spec.sky ? tex(paint(4, 256, (g) => { const r = g.createLinearGradient(0, 0, 0, 256); r.addColorStop(0, spec.sky.top); r.addColorStop(0.55, spec.sky.middle); r.addColorStop(1, spec.sky.bottom); g.fillStyle = r; g.fillRect(0, 0, 4, 256); })) : null;
-      const starCount = Math.round((spec.stars?.density ?? 0) * span * H / 2500 / (u * u));
-      const stars = Array.from({ length: starCount }, () => ({ x: x0 + rnd() * span, y: -0.45 * H + Math.pow(rnd(), 1.4) * H * 1.15, r: (0.4 + Math.pow(rnd(), 4) * 1.6) * u, p: rnd() * 7, f: 0.4 + rnd() * 2 }));
-      // the sky plane zooms at most ZOOM_MAX^0.32 ≈ 1.4×: paint celestials and birds that much finer
-      const SS = 1.5;
-      const celestials = (spec.celestials || []).map(c => {
-        const r = c.size * H / 2, R = r * 9, size = Math.max(4, Math.ceil(2 * R));
-        const canvas = paint(size * SS, size * SS, (g, cw) => {
-          g.scale(cw / size, cw / size);
-          const cx = size / 2, cy = size / 2, cc = I.rgb(c.color);
-          g.globalAlpha = Math.min(1, 0.35 * (c.glow ?? 0.5));
-          g.drawImage(I.glowSprite(cc), 0, 0, size, size);
-          g.globalAlpha = 1;
-          g.fillStyle = c.color; g.beginPath(); g.arc(cx, cy, r, 0, 7); g.fill();
-          if (c.kind === 'moon') { g.fillStyle = 'rgba(0,0,0,0.07)'; for (const [dx, dy, rr] of [[-0.3, -0.2, 0.25], [0.28, 0.15, 0.17], [-0.05, 0.4, 0.13]]) { g.beginPath(); g.arc(cx + dx * r, cy + dy * r, rr * r, 0, 7); g.fill(); } }
-          if (c.kind === 'planet') { g.strokeStyle = `rgba(${cc},0.6)`; g.lineWidth = r * 0.08; g.beginPath(); g.ellipse(cx, cy, r * 1.8, r * 0.4, -0.3, 0, 7); g.stroke(); }
-        });
-        return { tex: tex(canvas), x: c.x * SW - size / 2, y: c.y * H - size / 2, size };
-      });
-      const layers = (spec.layers || []).map((L, i) => {
-        const Z = dz.Z[i];
-        if (L.kind === 'clouds') {
-          const cc = I.rgb(L.color);
-          const clouds = Array.from({ length: Math.round((3 + (L.density ?? 0.5) * 9) * (1 + 2 * I.EXT)) }, () => {
-            const cw = SW * (0.12 + rnd() * 0.2), ch = cw * 0.35;
-            const canvas = paint(cw, ch, (g) => {
-              for (let k = 0; k < 7; k++) {
-                const gx = cw * (0.2 + rnd() * 0.6), gy = ch * (0.45 + rnd() * 0.25), gr = ch * (0.35 + rnd() * 0.3);
-                g.globalAlpha = 0.55; g.drawImage(I.glowSprite(cc), gx - gr, gy - gr, 2 * gr, 2 * gr);
-              }
-            });
-            return { tex: tex(canvas), w: cw, h: ch, x: rnd() * span, y: L.y * H + (rnd() - 0.5) * (L.height ?? 0.1) * H, sp: (4 + rnd() * 8) * u };
-          });
-          return { L, Z, clouds };
-        }
-        if (L.kind === 'fog') return { L, Z, c: col(L.color), blobs: Array.from({ length: 10 }, () => ({ x: rnd() * span, dy: (rnd() - 0.5) * (L.height ?? 0.08) * H, rx: SW * (0.2 + rnd() * 0.25), ry: H * (0.03 + rnd() * 0.04), sp: (5 + rnd() * 10) * u, a: 0.06 + rnd() * 0.06 })) };
-        if (L.kind === 'water') return { L, Z, c: col(L.color) };
-        const lseed = seed + i * 101, st = I.staticLayer(L, SW, H, lseed);
-        return { L, Z, seed: lseed, tex: tex(st.canvas), x0: st.x0, region: { x: st.x0, y: 0, w: span, h: I.DEEP * H }, tops: st.tops, solids: st.solids, stripW: st.stripW, windows: st.windows, tiles: new Map() };
-      });
-      const objects = (spec.objects || []).map(o0 => {
-        if (o0.plane) return planeOf(o0, dz, tex);
-        // looking around, the sky is the full circle, 2π stage heights wide (engine.js)
-        const o = { ...o0, x: dz.objectX(o0), y: dz.objectY(o0), size: dz.objectSize(o0), _yh: dz.yh, _sw: ROUND && o0.sky ? I.TAU * H : SW }, Z = dz.objectZ(o0);
-        const x = o.x * SW, y = o.y * H, s = Math.max(2, o.size * H);
-        if (o.kind === 'bird') {
-          const canvas = paint(s * 1.2 * SS, s * 0.6 * SS, (g) => {
-            g.scale(SS, SS);
-            g.strokeStyle = o.color; g.lineCap = 'round'; g.lineWidth = Math.max(1.5, s * 0.08);
-            const cx = s * 0.6, cy = s * 0.35;
-            g.beginPath(); g.moveTo(cx - s * 0.5, cy - s * 0.1); g.quadraticCurveTo(cx - s * 0.2, cy - s * 0.15, cx, cy);
-            g.quadraticCurveTo(cx + s * 0.2, cy - s * 0.15, cx + s * 0.5, cy - s * 0.1); g.stroke();
-          });
-          return { o, Z, x, y, s, tex: tex(canvas), w: s * 1.2, h: s * 0.6, lights: [] };
-        }
-        // a custom element whose code reads the time is repainted live every frame (one reading the
-        // scene's state, when the state changes)
-        const { bx, by, bw, bh } = ROUND && o.sky ? { bx: 0, by: -0.35 * H, bw: I.TAU * H, bh: 1.6 * H } : I.objectBox(o, SW, H);
-        const r0 = paintObject(o, bx, by, bw, bh, Math.min(1, MAX_SIDE / bw, MAX_SIDE / bh), 0), frames = [tex(r0.canvas)], lights = r0.lights;
-        const live = (o.kind === 'custom' || !o.kind) ? liveOf(o, o.frames, tex) : null;
-        return {
-          o, Z, x, y, s, bx, by, bw, bh, tex: frames[0], frames, period: o.period || 2, detail: null,
-          p: ROUND && !o.sky ? dz.objectAt(o0) : null,
-          live, ground: !!o.ground, from: o0.place ? o0 : null,
-          reflect: o.reflect ?? (o.kind === 'boat' || o.kind === 'bridge'),
-          lights: lights.map(l => ({ x: l.x, y: l.y, r: l.r, c: col(l.col), a: l.a, dot: l.dot, fire: o.kind === 'campfire', flicker: l.flicker })),
-        };
-      });
-      // particles fall over all that is seen: in the canvas's pixels
-      const particles = (spec.particles || []).map(p => ({ p, c: col(p.color || '#ffffff'), list: I.makeParticles(p, CW, CH, rnd) }));
-      // draw far to near, layers and objects together (a house behind a hill is hidden by it)
-      const order = [...layers.map(l => ({ l, Z: l.Z })), ...objects.map(ob => ({ ob, Z: ob.Z }))].sort((a, b) => (b.Z - a.Z) || 0);
-      return { W, H, SW, u, x0, span, yh: dz.yh, dz, lim: I.limits(spec, W, H), sky, stars, celestials, layers, objects, order, particles, textures, scene: target(CW, CH), copy: target(CW, CH), out };
-    }
-
-    // Paints an object at t = 0 — the region (bx, by, bw, bh) of it — into a canvas at scale
-    // k. Light rects and cones are baked in; glows stay sprites so they can flicker.
-    function paintObject(o, bx, by, bw, bh, k, t = 0, into = null) {
-      const lights = [];
-      const draw = (g) => {
-        g.setTransform(k, 0, 0, k, -bx * k, -by * k);
-        I.drawObject(g, o, o._sw || SW, H, t, lights);
-        for (const l of lights) {
-          if (l.rect) { g.fillStyle = `rgba(${l.col},${Math.min(1, l.a * 2.2)})`; g.fillRect(...l.rect); }
-          if (l.cone) {
-            const gr = g.createLinearGradient(0, l.y, 0, l.cone.y);
-            gr.addColorStop(0, `rgba(${l.col},${l.a * 0.35})`); gr.addColorStop(1, `rgba(${l.col},0)`);
-            g.fillStyle = gr; g.globalCompositeOperation = 'lighter';
-            g.beginPath(); g.moveTo(l.x - l.dot, l.y); g.lineTo(l.x + l.dot, l.y); g.lineTo(l.x + l.cone.w, l.cone.y); g.lineTo(l.x - l.cone.w, l.cone.y); g.fill();
-            g.globalCompositeOperation = 'source-over';
-          }
-        }
-      };
-      let canvas = into;
-      if (into) {
-        const w = Math.max(1, Math.round(bw * k)), h = Math.max(1, Math.round(bh * k));
-        if (into.width !== w || into.height !== h) { into.width = w; into.height = h; }
-        const g = into.getContext('2d');
-        g.setTransform(1, 0, 0, 1, 0, 0);
-        g.clearRect(0, 0, w, h);
-        draw(g);
-      } else canvas = paint(bw * k, bh * k, draw);
-      return { canvas, lights };
-    }
-
-    // ── sharp close-ups ──────────────────────────────────────────────────
-    const MAX_SIDE = 8192;
-    const intersect = (a, b) => {
-      const x = Math.max(a.x, b.x), y = Math.max(a.y, b.y), w = Math.min(a.x + a.w, b.x + b.w) - x, h = Math.min(a.y + a.h, b.y + b.h) - y;
-      return w > 0 && h > 0 ? { x, y, w, h } : null;
-    };
-    const covers = (r, v) => r.x <= v.x + 0.5 && r.y <= v.y + 0.5 && r.x + r.w >= v.x + v.w - 0.5 && r.y + r.h >= v.y + v.h - 0.5;
-    function setDetail(S, owner, det) {
-      if (owner.detail) for (const t of owner.detail.frames) { gl.deleteTexture(t); S.textures.delete(t); }
-      owner.detail = det;
-      if (det) for (const t of det.frames) S.textures.add(t);
-    }
-    // Each frame, paint a few missing tiles: first for where the camera is heading (`goal`),
-    // so the close-up is sharp on arrival, then for where it is now; nearest layer and
-    // screen centre first. Objects are small: re-painted whole at the needed scale.
-    function refine(S, cam, goal) {
-      let budget = TILES_PER_FRAME;
-      for (const c of [goal, cam]) {
-        for (const l of [...S.layers].reverse()) {
-          if (!l.tiles) continue;
-          if (l.Z - c.z < 0.05) continue;
-          const n = levelFor(camMatrix(c, l.Z)[0]);
-          if (n === 0) continue;
-          const v = visible(camMatrix(c, l.Z)), cx = v.x + v.w / 2, cy = v.y + v.h / 2;
-          const todo = cells(l, n, v).filter(cell => !l.tiles.has(`${n}:${cell.tx}:${cell.ty}`));
-          todo.sort((a, b) => Math.hypot(a.x - cx, a.y - cy) - Math.hypot(b.x - cx, b.y - cy));
-          for (const cell of todo) {
-            if (budget-- <= 0) return;
-            paintTile(l, n, cell);
-          }
-        }
-        // objects: re-painted at the needed scale, only the part on screen (a tall tower
-        // close up would otherwise be a huge canvas)
-        for (const ob of [...S.objects].reverse()) {
-          if (ob.o.kind === 'bird' || ob.live || ob.ground || ob.plane || ob.o.sky || (ROUND && typeof ob.o.facing === 'number')) continue;
-          const at = matOf(ob, c);
-          if (!at || at.D < 0.3) continue;
-          const k = Math.pow(LEVEL, levelFor(at.m[0]));
-          if (k <= 1) { if (ob.detail && c === cam) setDetail(S, ob, null); continue; }
-          const v = visible(at.m), box = { x: ob.bx, y: ob.by, w: ob.bw, h: ob.bh };
-          const need = intersect(box, v);
-          if (!need || (ob.detail && ob.detail.k >= k && covers(ob.detail.region, need))) continue;
-          const r = intersect(box, { x: v.x - v.w * 0.15, y: v.y - v.h * 0.15, w: v.w * 1.3, h: v.h * 1.3 });
-          // cost in tiles' worth of pixels; one big job may run alone in a frame
-          const cost = Math.ceil(r.w * r.h * k * k / (TILE * TILE)) * ob.frames.length;
-          if (cost > budget && budget < TILES_PER_FRAME) return;
-          budget -= cost;
-          const kk = Math.min(k, MAX_SIDE / r.w, MAX_SIDE / r.h);
-          const n = ob.frames.length;
-          setDetail(S, ob, { frames: ob.frames.map((_, f) => texture(paintObject(ob.o, r.x, r.y, r.w, r.h, kk, f / n * ob.period).canvas)), k, region: r });
-        }
-      }
-    }
-    // keep GPU memory bounded: drop the least recently drawn tiles
-    function evict(S) {
-      if (tileCount <= MAX_TILES) return;
-      const all = [];
-      for (const l of S.layers) if (l.tiles) for (const [key, t] of l.tiles) all.push([t.used, l, key, t]);
-      all.sort((a, b) => a[0] - b[0]);
-      for (const [used, l, key, t] of all.slice(0, tileCount - MAX_TILES)) {
-        if (used === frameNo) break;
-        l.tiles.delete(key); freeTile(t);
-      }
-    }
-
-    function drawWater(S, l, wy, t) {
-      flush();
-      if (wy >= VY1) return;
-      // copy what is drawn so far, then shade the water below the horizon from that copy
-      gl.bindFramebuffer(gl.READ_FRAMEBUFFER, S.scene.fbo);
-      gl.bindFramebuffer(gl.DRAW_FRAMEBUFFER, S.copy.fbo);
-      gl.blitFramebuffer(0, 0, CW, CH, 0, 0, CW, CH, gl.COLOR_BUFFER_BIT, gl.NEAREST);
-      gl.bindFramebuffer(gl.FRAMEBUFFER, S.scene.fbo);
-      gl.useProgram(wprog);
-      gl.activeTexture(gl.TEXTURE0);
-      gl.bindTexture(gl.TEXTURE_2D, S.copy.tex);
-      gl.uniform1i(wu.tex, 0);
-      gl.uniform2f(wu.res, W, H);
-      gl.uniform2f(wu.canvas, CW, CH);
-      gl.uniform2f(wu.off, OX, OY);
-      gl.uniform1f(wu.wy, Math.max(0, wy));
-      gl.uniform1f(wu.k, Math.min(1.2, Math.max(0, wy) / (H - wy)));
-      gl.uniform1f(wu.t, t);
-      gl.uniform1f(wu.speed, 1 + Math.abs(l.L.drift ?? 0) * 2);
-      gl.uniform1f(wu.u, S.u);
-      gl.uniform3f(wu.col, ...l.c);
-      band(wprog, Math.max(VY0, wy), VY1);
-    }
-
-    const wrapX = (x, S, w) => ((x % (S.span + w)) + S.span + w) % (S.span + w) + S.x0 - w;
-    const WINDOW = col('#ffd08a'), DOT = col('255,245,220');
-
-    // how finely a live element's region r is repainted: the scale it is seen at, up to ~4 Mpx
-    const LIVE_AWAY = 0.05; // the scale a live element out of sight is painted at (for its lights)
-    const liveScale = (r, seen) => Math.min(seen, MAX_SIDE / r.w, MAX_SIDE / r.h, Math.sqrt(4e6 / (r.w * r.h)));
-
-    // A ground plane (water, fields, a road) is painted as seen from the start. Each row of it
-    // lies at a depth — a row h below the horizon is 1/h eye heights away — so as you walk, the
-    // rows are laid out again in perspective: drawn as thin strips, each with its own haze.
-    function drawGround(ob, cam, t) {
-      let tx = ob.tex;
-      if (ob.live) {
-        const whole = { x: ob.bx, y: ob.by, w: ob.bw, h: ob.bh }, k = liveScale(whole, 1);
-        if (stale(ob.live, k, whole)) repaint(ob, k, t, whole);
-        tx = ob.live.tex;
-      }
-      const yhH = YH * H, top = Math.max(ob.by, yhH + 0.5), bot = ob.by + ob.bh, N = 120, look = -cam.y * H;
-      const row = y => {
-        const Z0 = H / (y - yhH), D = Z0 - cam.z;
-        if (D <= 0.05) return null;
-        const s = Z0 / D;
-        return { Z0, s, e: (W - s * SW) / 2 - H * cam.x / D, y: yhH + (y - yhH) * s + look + H * ((cam.h ?? 1) - 1) / D };
-      };
-      let a = row(top);
-      for (let i = 1; i <= N && a; i++) {
-        const y1 = top + (bot - top) * (i / N) ** 1.6, b = row(y1);   // finer near the horizon
-        if (!b) break;
-        const y0 = top + (bot - top) * ((i - 1) / N) ** 1.6, xl = ob.bx, xr = ob.bx + ob.bw;
-        if (b.y > VY0 && a.y < VY1) {
-          HZ = haze(a.Z0, a.Z0 - cam.z);
-          quad(tx, [a.s * xl + a.e, a.y, a.s * xr + a.e, a.y, b.s * xr + b.e, b.y, b.s * xl + b.e, b.y], [0, (y0 - ob.by) / ob.bh, 1, (y1 - ob.by) / ob.bh]);
-        }
-        if (a.y > VY1) break;
-        a = b;
-      }
-      HZ = NOHAZE;
-    }
-
-    // ── horizontal planes ────────────────────────────────────────────────
-    // A plane lies flat — a floor, a pier, a table top, a chessboard, a patch of water. The
-    // artist paints it from above, in metres, origin at its centre (x to the right, y toward
-    // the viewer); it lies `distance` m away (its centre), at `elevation` m, `width` × `depth` m,
-    // turned `rotation` degrees about the vertical. It is projected truly for wherever the
-    // camera is: drawn as a grid of small cells, each from its own projected corners, with the
-    // haze of its own distance. It is drawn at its far edge, before whatever stands on it.
-    // World units here are eye heights, as everywhere in the camera: a point (X, Y, Z) is seen
-    // at x = W/2 + H·(X − cam.x)/(Z − cam.z), y = yh·H + H·(1 − Y)/(Z − cam.z) − cam.y·H.
-    // Live elements: repainted every frame if their code read the time as it was painted; if it
-    // read only the scene's state (e.state, e.was), when the state changed — or when seen at a scale
-    // the old painting would blur. What it reads is looked at again at every repaint.
-    function liveOf(o, frames, tex) {
-      const read = I.READS.get(o) || {}, timed = frames > 1 || read.time;
-      return timed || read.state ? { canvas: I.layer(1, 1), tex: tex(I.layer(1, 1)), stateOnly: !timed, frames, lights: [] } : null;
-    }
-    // stale: painted at another state, or at a scale the painting would blur, or not over all of `need`
-    // (painted this frame already — an element that reads it got it painted first — it is not)
-    function stale(live, k, need) {
-      const f0 = live.k ? k / live.k : 0;
-      if (live.frame === frameNo && f0 > 0.83 && f0 < 1.2 && live.r && covers(live.r, need)) return false;
-      if (!live.stateOnly) return true;
-      const f = live.k ? k / live.k : 0;
-      return live.ver !== I.STATE.ver || !(f > 0.83 && f < 1.2) || !live.r || !covers(live.r, need);
-    }
-    // repaints the region r of a live element (all of it, or what is on screen close up)
-    function repaint(ob, k, t, r) {
-      const p = paintObject(ob.o, r.x, r.y, r.w, r.h, k, t, ob.live.canvas);
-      ob.live.r = r; ob.live.frame = frameNo;
-      flush(); // quads already batched must be drawn with their own texture first
-      gl.bindTexture(gl.TEXTURE_2D, ob.live.tex);
-      gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, p.canvas);
-      curTex = null;
-      ob.live.ver = I.STATE.ver; ob.live.k = k;
-      ob.live.stateOnly = !(ob.live.frames > 1 || I.READS.get(ob.o)?.time);
-      ob.live.lights = p.lights.map(l => ({ x: l.x, y: l.y, r: l.r, c: col(l.col), a: l.a, dot: l.dot, flicker: l.flicker }));
-    }
-    const PLANE_TEX = 2048;
-    function planeOf(o0, dz, tex) {
-      const E = I.EYE, w = Math.max(0.05, o0.width || 4), d = Math.max(0.05, o0.depth || 4);
-      const at = dz.objectAt(o0), Zc = at.Z, Xc = at.X, rot = (o0.rotation || 0) * Math.PI / 180;
-      // painted as a flat (sky-like) element: code units are metres, 1 m = H px before scaling
-      const o = { ...o0, sky: true, plane: true };
-      const k = PLANE_TEX / (Math.max(w, d) * H), bx = -w / 2 * H, by = -d / 2 * H, bw = w * H, bh = d * H;
-      const r0 = paintObject(o, bx, by, bw, bh, k, 0);
-      const live = liveOf(o, 0, tex);
-      const c = Math.abs(Math.cos(rot)), s = Math.abs(Math.sin(rot));
-      return {
-        o, plane: { Xc, Y: (o0.elevation || 0) / E, Zc, w: w / E, d: d / E, cos: Math.cos(rot), sin: Math.sin(rot) },
-        Z: Zc + (d * c + w * s) / 2 / E, bx, by, bw, bh, k, tex: tex(r0.canvas), frames: [], lights: [],
-        live,
-      };
-    }
-    // A flat piece of the world drawn truly in perspective: world(f, g) → [X, Y, Z] (eye heights)
-    // for the point (f, g) of its texture, both 0…1. Drawn as C × R cells; a cell close to the eye
-    // (nearer than it is big) is split finer, and one partly behind the eye is cut at the near
-    // plane, not dropped — a floor reaches right to your feet. hazeOf(D): the haze D away.
-    const NEAR = 0.06;
-    const eyeOf = (cam, X, Y, Z) => {
-      const rx = X - cam.x, rz = Z - cam.z, c = Math.cos(cam.yaw || 0), s = Math.sin(cam.yaw || 0);
-      return [rx * c - rz * s, (cam.h ?? 1) - Y, rx * s + rz * c];
-    };
-    function surface(cam, tex, world, C, R, hazeOf) {
-      const cell = (f0, g0, f1, g1, depth) => {
-        let poly = [[f0, g0], [f1, g0], [f1, g1], [f0, g1]].map(([f, g]) => ({ e: eyeOf(cam, ...world(f, g)), f, g }));
-        const zs = poly.map(k => k.e[2]);
-        if (Math.max(...zs) < NEAR) return;
-        const size = Math.hypot(poly[0].e[0] - poly[2].e[0], poly[0].e[1] - poly[2].e[1], poly[0].e[2] - poly[2].e[2]);
-        if (depth < 4 && Math.min(...zs) < size) {
-          const fm = (f0 + f1) / 2, gm = (g0 + g1) / 2;
-          cell(f0, g0, fm, gm, depth + 1); cell(fm, g0, f1, gm, depth + 1); cell(f0, gm, fm, g1, depth + 1); cell(fm, gm, f1, g1, depth + 1);
-          return;
-        }
-        if (Math.min(...zs) < NEAR) {
-          const cut = [];
-          for (let i = 0; i < poly.length; i++) {
-            const a = poly[i], b = poly[(i + 1) % poly.length], ain = a.e[2] >= NEAR, bin = b.e[2] >= NEAR;
-            if (ain) cut.push(a);
-            if (ain !== bin) {
-              const k = (NEAR - a.e[2]) / (b.e[2] - a.e[2]);
-              cut.push({ e: a.e.map((v, j) => v + (b.e[j] - v) * k), f: a.f + (b.f - a.f) * k, g: a.g + (b.g - a.g) * k });
-            }
-          }
-          poly = cut;
-          if (poly.length < 3) return;
-        }
-        const pt = poly.map(k => [W / 2 + H * k.e[0] / k.e[2], YH * H + H * k.e[1] / k.e[2] - cam.y * H, k.f, k.g]);
-        const xs = pt.map(q => q[0]), ys = pt.map(q => q[1]);
-        if (Math.max(...xs) < VX0 || Math.min(...xs) > VX1 || Math.max(...ys) < VY0 || Math.min(...ys) > VY1) return;
-        HZ = hazeOf(poly.reduce((d, k) => d + k.e[2], 0) / poly.length);
-        if (pt.length === 3) quadAt(tex, pt[0], pt[1], pt[2], pt[2]);
-        else quadAt(tex, pt[0], pt[1], pt[2], pt[3]);
-        if (pt.length === 5) quadAt(tex, pt[0], pt[3], pt[4], pt[4]);
-      };
-      for (let i = 0; i < R; i++) for (let j = 0; j < C; j++) cell(j / C, i / R, (j + 1) / C, (i + 1) / R, 0);
-      HZ = NOHAZE;
-    }
-
-    function drawPlane(ob, cam, t) {
-      let tx = ob.tex;
-      if (ob.live) {
-        const whole = { x: ob.bx, y: ob.by, w: ob.bw, h: ob.bh }, k = Math.min(ob.k, 1024 / Math.max(ob.bw, ob.bh));
-        if (stale(ob.live, k, whole)) repaint(ob, k, t, whole);
-        tx = ob.live.tex;
-      }
-      // local (u across, v toward the viewer, from its centre); painted without haze (seen from
-      // above): all of it is the air at its own distance
-      const P = ob.plane;
-      surface(cam, tx, (f, g) => {
-        const u = -P.w / 2 + P.w * f, v = -P.d / 2 + P.d * g;
-        return [P.Xc + u * P.cos + v * P.sin, P.Y, P.Zc - v * P.cos + u * P.sin];
-      }, 24, 48, D => { const h = hz(D); return [1 - h, h]; });
-    }
-
-    // the texture an element is shown with now: its live painting (repainted when due), else its
-    // frame of the loop — the sharp close-up when that covers what is seen of it
-    function textureOf(ob, m, t) {
-      const n = ob.frames.length, fi = n > 1 ? Math.floor((((t / ob.period) % 1) + 1) % 1 * n) % n : 0, whole = { x: ob.bx, y: ob.by, w: ob.bw, h: ob.bh };
-      const seen = ob.live && m ? intersect(whole, visible(m)) : null;
-      if (ob.live && (!m || seen)) {
-        // close up only what is on screen (and a margin, so a small move needn't repaint) is painted:
-        // as sharp as it is seen
-        const need = seen || whole;
-        const r = seen ? intersect(whole, { x: seen.x - seen.w * 0.15, y: seen.y - seen.h * 0.15, w: seen.w * 1.3, h: seen.h * 1.3 }) : whole;
-        const k = liveScale(r, m ? m[0] : 1);
-        if (stale(ob.live, k, need)) repaint(ob, k, t, r);
-        return { tx: ob.live.tex, r: ob.live.r, lights: ob.live.lights };
-      }
-      if (ob.live) {
-        // out of sight: painted all the same, coarsely, so its lights are where they are now (a
-        // lantern carried off-screen still lights the edge it is behind)
-        const k = Math.min(LIVE_AWAY, liveScale(whole, 1));
-        if (stale(ob.live, k, whole)) repaint(ob, k, t, whole);
-        return { tx: ob.live.tex, r: ob.live.r, lights: ob.live.lights };
-      }
-      const det = ob.detail, onScreen = det && m && intersect(whole, visible(m));
-      if (det && m && (!onScreen || covers(det.region, onScreen))) return { tx: det.frames[fi], r: det.region, lights: ob.lights };
-      return { tx: ob.frames[fi], r: whole, lights: ob.lights };
-    }
-
-    function drawObjectAt(ob, cam, t) {
-      if (ob.plane) { drawPlane(ob, cam, t); return; }
-      if (ob.ground) { drawGround(ob, cam, t); return; }
-      if (ROUND && ob.o.sky) { drawSkyAround(ob, cam, t); return; }
-      if (ROUND && typeof ob.o.facing === 'number') { drawCard(ob, cam, t); return; }
-      const at = matOf(ob, cam);
-      if (!at) return;
-      const fade = I.clamp((at.D - 0.3) / 0.6, 0, 1);
-      if (fade <= 0) return;
-      const { o, x, y, s } = ob;
-      // a platformer's hero: moved and turned from where it is painted
-      const m = cam.hero && o.id === cam.hero.id ? mul(at.m, I.heroMatrix(cam.hero, x, s / (o.height || 2))) : at.m;
-      if (o.kind === 'bird') {
-        // across the widest frame
-        const span = I.WIDEST * H + 4 * s, bx = ((x + t * s * 1.5 * (o.flip ? -1 : 1)) % span + span) % span + (SW - I.WIDEST * H) / 2 - 2 * s;
-        const by = y + Math.sin(t * 0.7 + x) * s * 0.4;
-        // wings flap by squashing the painted bird vertically around its body
-        rect(ob.tex, mul(m, [1, 0, 0, 0.3 + 0.7 * Math.sin(t * 8 + x), bx, by]), -ob.w / 2, -ob.h * 0.58, ob.w, ob.h, WHITE, fade);
-        return;
-      }
-      // gentle per-kind motion, applied to the pre-painted object around its base
-      let a = ID;
-      if (o.kind === 'tree') a = around(x, y, Math.sin(t * 0.8 + x) * 0.015, 1, 1);
-      else if (o.kind === 'flower') a = around(x, y, Math.sin(t * 1.4 + x) * 0.06, 1, 1);
-      else if (o.kind === 'lantern') a = around(x, y - s * 0.6, Math.sin(t * 1.2 + x) * 0.12, 1, 1);
-      else if (o.kind === 'boat') a = around(x, y, 0, 1, 1, 0, Math.sin(t * 1.1 + x) * s * 0.03);
-      else if (o.kind === 'figure') a = around(x, y, 0, 1, 1 + Math.sin(t * 1.3) * 0.008);
-      else if ((o.kind === 'custom' || !o.kind) && (o.sway || o.bob)) {
-        // custom motion hints: sway (degrees, about the base), bob (metres, up and down)
-        const ppm = s / (o.height || 2);
-        a = around(x, y, Math.sin(t * 0.9 + x) * (o.sway || 0) * Math.PI / 180, 1, 1, 0, Math.sin(t * 1.1 + x) * (o.bob || 0) * ppm);
-      }
-      // the elements its code reads (`after`: where another figure's hand is now, through a module)
-      // are painted first this frame
-      for (const id of Array.isArray(o.after) ? o.after : []) {
-        const other = BYID.get(id), oat = other?.live && matOf(other, cam);
-        if (oat) textureOf(other, oat.m, t);
-      }
-      const ma = a === ID ? m : mul(m, a), { tx, r, lights } = textureOf(ob, m, t);
-      // on water: a mirrored, fainter copy about the water surface under it (for something
-      // raised above the ground, e.g. sitting on a pier, that is below its base)
-      if (ob.reflect) {
-        const gy = isFinite(ob.Z) ? Math.max(y, (YH + 1 / ob.Z) * H) : YH * H; // sky: about the horizon
-        rect(tx, mul(ma, [1, 0, 0, -1, 0, 2 * gy]), r.x, r.y, r.w, r.h, WHITE, 0.3 * fade);
-      }
-      rect(tx, ma, r.x, r.y, r.w, r.h, WHITE, fade);
-      for (const lt of lights) {
-        const fl = lt.fire ? 0.8 + 0.2 * Math.sin(t * 11)
-          : lt.flicker != null ? 1 - lt.flicker * 0.5 * (0.5 + 0.5 * Math.sin(t * 9 + lt.x) * Math.sin(t * 5.3 + lt.y))
-          : 0.9 + 0.1 * Math.sin(t * 7 + x) * Math.sin(t * 3.1 + y);
-        const [lx, ly] = apply(a, lt.x, lt.y);
-        sprite(T.glow, m, lx, ly, 2 * lt.r, 2 * lt.r, 0, lt.c, lt.a * 0.6 * fl * fade, true);
-        if (lt.dot) sprite(T.glow, m, lx, ly, 6 * lt.dot, 6 * lt.dot, 0, DOT, 0.9 * fade, true);
-      }
-        }
-
-    // Looking around, an element with `facing` stands turned its own way (a wall, a door, a
-    // cupboard): its painting is a vertical card in the world — the painted point (px, py) is
-    // (px − x, py − y)/ppm metres from its anchor along the card and down — projected truly,
-    // as a grid of small cells like a plane, each with the haze of its own distance.
-    function drawCard(ob, cam, t) {
-      const p = ob.p, f = ob.o.facing * Math.PI / 180, ppm = H / p.Zp; // painted px per eye height
-      const tx_ = -Math.cos(f), tz = Math.sin(f); // along the card, to the right of one facing it
-      const { tx, r, lights } = textureOf(ob, null, t);
-      const world = (px, py) => { const u = (px - ob.x) / ppm, v = (py - ob.y) / ppm; return [p.X + u * tx_, p.Y - v, p.Z + u * tz]; };
-      surface(cam, tx, (f, g) => world(r.x + r.w * f, r.y + r.h * g), 16, 10, D => haze(p.Zp, D));
-      const at = (px, py) => I.project(cam, ...world(px, py), W, H, YH);
-      for (const lt of lights) {
-        const q = at(lt.x, lt.y);
-        if (!q) continue;
-        const k = p.Zp / q[2], fl = lt.flicker != null ? 1 - lt.flicker * 0.5 * (0.5 + 0.5 * Math.sin(t * 9 + lt.x) * Math.sin(t * 5.3 + lt.y)) : 1;
-        sprite(T.glow, ID, q[0], q[1], 2 * lt.r * k, 2 * lt.r * k, 0, lt.c, lt.a * 0.6 * fl, true);
-      }
-    }
-    // The sky all around: its painting is the full circle (2π stage heights, straight ahead in
-    // the middle); each narrow column of the frame shows the bearing it looks at.
-    function drawSkyAround(ob, cam, t) {
-      const { tx } = textureOf(ob, null, t), C = 48, top = ob.by - cam.y * H;
-      for (let i = 0; i < C; i++) {
-        const xa = VX0 + (VX1 - VX0) * i / C, xb = VX0 + (VX1 - VX0) * (i + 1) / C;
-        const ua = (cam.yaw + Math.atan((xa - W / 2) / H)) / I.TAU + 0.5, ub = (cam.yaw + Math.atan((xb - W / 2) / H)) / I.TAU + 0.5;
-        const base = Math.floor(ua), u0 = ua - base, u1 = ub - base;
-        if (u1 <= 1) { rect(tx, ID, xa, top, xb - xa, ob.bh, WHITE, 1, false, [u0, 0, u1, 1]); continue; }
-        // the column crosses the seam behind you: both sides of it
-        const xm = xa + (xb - xa) * (1 - u0) / (u1 - u0);
-        rect(tx, ID, xa, top, xm - xa, ob.bh, WHITE, 1, false, [u0, 0, 1, 1]);
-        rect(tx, ID, xm, top, xb - xm, ob.bh, WHITE, 1, false, [0, 0, u1 - 1, 1]);
-      }
-    }
-
-    // An element that moves through the world (its `place`: {across, distance, elevation, x} — the
-    // names of numbers in the state, metres): put where the state says now — its size, its depth,
-    // its haze and what it is drawn in front of or behind follow.
-    function placeMoving(S) {
-      const v = I.STATE.values;
-      let moved = false;
-      for (const ob of S.objects) {
-        if (!ob.from) continue;
-        const o1 = { ...ob.from };
-        for (const [f, k] of Object.entries(ob.from.place)) if (typeof k === 'string' && typeof v[k] === 'number') o1[f] = v[k];
-        const key = `${o1.x}|${o1.across}|${o1.distance}|${o1.elevation}`;
-        if (key === ob.placed) continue;
-        ob.placed = key; moved = true;
-        const o = { ...ob.o, x: S.dz.objectX(o1), y: S.dz.objectY(o1), size: S.dz.objectSize(o1) };
-        Object.assign(ob, { o, Z: S.dz.objectZ(o1), x: o.x * SW, y: o.y * H, s: Math.max(2, o.size * H) }, I.objectBox(o, SW, H));
-        if (ROUND && !o.sky) ob.p = S.dz.objectAt(o1);
-      }
-      if (!moved) return;
-      for (const item of S.order) if (item.ob) item.Z = item.ob.Z;
-      S.order.sort((a, b) => (b.Z - a.Z) || 0);
-    }
-
-    function frame(S, spec, cam, t, dt, settled, goal) {
-      frameNo++;
-      BYID = S.byId ??= new Map(S.objects.filter(x => x.o.id != null).map(x => [x.o.id, x]));
-      placeMoving(S);
-      gl.bindFramebuffer(gl.FRAMEBUFFER, S.scene.fbo);
-      gl.viewport(0, 0, CW, CH);
-      const mSky = camMatrix(cam, Infinity);
-      gl.clearColor(0, 0, 0, 0); // what nothing paints stays clear: the final pass fills it
-      gl.clear(gl.COLOR_BUFFER_BIT);
-      if (S.sky) rect(S.sky, mSky, S.x0, -H, S.span, 3 * H, WHITE, 1, false, [0, -1, 1, 2]);
-
-      if (ROUND) drawAround(S, cam, t);
-      else drawAhead(S, spec, cam, t, mSky);
-      particlesAndPost(S, spec, cam, t, dt, goal);
-    }
-
-    // looking around: the sky, then what stands about, far to near as seen now — planes by the
-    // farthest reach of them
-    function drawAround(S, cam, t) {
-      for (const ob of S.objects) if (ob.o.sky) drawObjectAt(ob, cam, t);
-      const items = [];
-      for (const ob of S.objects) {
-        if (ob.o.sky || ob.ground) continue;
-        if (ob.plane) {
-          const P = ob.plane;
-          items.push({ ob, d: Math.hypot(P.Xc - cam.x, P.Zc - cam.z) + Math.max(P.w, P.d) / 2 });
-        } else {
-          // a card turned its own way (a wall) by its farthest reach too: what stands in front of
-          // it is drawn after it
-          const half = typeof ob.o.facing === 'number' ? ob.bw / 2 / (H / ob.p.Zp) : 0;
-          items.push({ ob, d: Math.hypot(ob.p.X - cam.x, ob.p.Z - cam.z) + half });
-        }
-      }
-      items.sort((a, b) => b.d - a.d);
-      for (const { ob } of items) {
-        HZ = ob.plane ? NOHAZE : haze(ob.p.Zp, Math.hypot(ob.p.X - cam.x, ob.p.Z - cam.z));
-        drawObjectAt(ob, cam, t);
-        HZ = NOHAZE;
-      }
-    }
-
-    function drawAhead(S, spec, cam, t, mSky) {
-      if (S.stars.length) {
-        const sc = col(spec.stars?.color || '#ffffff');
-        for (const s of S.stars) sprite(T.dot, mSky, s.x, s.y, 2.6 * s.r, 2.6 * s.r, 0, sc, 0.25 + 0.75 * Math.pow(0.5 + 0.5 * Math.sin(t * s.f + s.p), 2), false);
-      }
-      for (const c of S.celestials) rect(c.tex, mSky, c.x, c.y, c.size, c.size);
-
-      for (const item of S.order) {
-        if (item.ob) { HZ = isFinite(item.Z) ? haze(item.Z, item.Z - cam.z) : NOHAZE; drawObjectAt(item.ob, cam, t); HZ = NOHAZE; continue; }
-        const l = item.l, L = l.L;
-        if (l.Z - cam.z < 0.05) continue; // walked past it
-        const m = camMatrix(cam, l.Z);
-        if (L.kind === 'water') {
-          drawWater(S, l, Math.round(m[5] + m[3] * L.y * H), t);
-          continue;
-        }
-        if (l.tex) {
-          HZ = haze(l.Z, l.Z - cam.z);
-          drawLayer(l, m, cam);
-          for (const w of l.windows) if (Math.sin(t * 0.07 + w.p) > -0.85) rect(T.white, m, w.x, w.y, w.w, w.h, WINDOW, 0.55 + 0.25 * Math.sin(w.p));
-          HZ = NOHAZE;
-        } else if (L.kind === 'clouds') {
-          for (const c of l.clouds) rect(c.tex, m, wrapX(c.x + t * c.sp * (L.drift ?? 0.3) * 3, S, c.w), c.y - c.h / 2, c.w, c.h);
-        } else if (L.kind === 'fog') {
-          for (const b of l.blobs) {
-            const cx = wrapX(b.x + t * b.sp * (L.drift ?? 0.3) * 2, S, 2 * b.rx) + b.rx;
-            rect(T.glow, m, cx - b.rx, L.y * H + b.dy - b.ry, 2 * b.rx, 2 * b.ry, l.c, b.a * 2.2);
-          }
-        }
-      }
-
-    }
-
-    function particlesAndPost(S, spec, cam, t, dt, goal) {
-      const u = S.u, PM = [1, 0, 0, 1, VX0, VY0]; // particles live in the canvas's pixels
-      for (const { p, c, list } of S.particles) {
-        const wind = (p.wind ?? 0) * 60 * u;
-        for (const q of list) {
-          I.moveParticle(p.kind, q, CW, CH, t, dt, u, wind);
-          const r = (1 + q.z * 3) * u;
-          switch (p.kind) {
-            case 'rain': { const len = (10 + q.z * 16) * u; rect(T.streak, PM, q.x - Math.max(1, u), q.y, 2 * Math.max(1, u), len, c, 0.28); break; }
-            case 'fireflies': sprite(T.glow, PM, q.x, q.y, 36 * u, 36 * u, 0, c, 0.6 * (0.25 + 0.75 * Math.pow(0.5 + 0.5 * Math.sin(t * 1.6 + q.ph * 3), 3)), true); break;
-            case 'embers': sprite(T.glow, PM, q.x, q.y, 16 * u, 16 * u, 0, c, 0.6 * (0.5 + 0.5 * Math.sin(t * 5 + q.ph)), true); break;
-            case 'petals': case 'leaves': {
-              const k = p.kind === 'leaves' ? 2.4 : 1.6;
-              rect(T.ellipse, mul(PM, around(q.x, q.y, t * (0.5 + q.z) + q.ph, 1, Math.abs(Math.sin(t * 2 + q.ph)) * 0.8 + 0.2)), q.x - r * k, q.y - r, 2 * r * k, 2 * r, c, 0.85);
-              break;
-            }
-            case 'bubbles': sprite(T.ring, PM, q.x, q.y, 3.4 * r, 3.4 * r, 0, c, 0.5, false); break;
-            case 'dust': sprite(T.dot, PM, q.x, q.y, r * 1.2, r * 1.2, 0, c, 0.35, false); break;
-            default: sprite(T.dot, PM, q.x, q.y, r * 2.4, r * 2.4, 0, c, 0.3 + q.z * 0.55, false);
-          }
-        }
-      }
-      flush();
-
-      // final pass to the screen, the whole canvas: the frame at its place in it (S.out)
-      gl.bindFramebuffer(gl.FRAMEBUFFER, null);
-      gl.viewport(0, 0, CW, CH);
-      const lt = spec.light || {};
-      gl.useProgram(pprog);
-      gl.activeTexture(gl.TEXTURE0);
-      gl.bindTexture(gl.TEXTURE_2D, S.scene.tex);
-      gl.uniform1i(pu.scene, 0);
-      gl.uniform2f(pu.res, W, H);
-      gl.uniform2f(pu.at, OX, CH - OY - H);
-      gl.uniform2f(pu.canvas, CW, CH);
-      gl.uniform2f(pu.off, OX, OY);
-      gl.uniform3f(pu.tint, ...(lt.tint ? col(lt.tint) : WHITE));
-      gl.uniform1f(pu.tintA, lt.tint ? I.clamp(lt.tintStrength ?? 0, 0, 0.5) : 0);
-      gl.uniform1f(pu.vig, 0.75 * I.clamp(lt.vignette ?? 0.5, 0, 1));
-      gl.uniform1f(pu.grain, 0.1 * I.clamp(lt.grain ?? 0.5, 0, 1));
-      gl.uniform1f(pu.seed, Math.floor(Math.random() * 4096));
-      // a film's cut: the frame fades to a colour (state: fade 0…1, fade_color — black by default)
-      const sv = I.STATE.values;
-      gl.uniform1f(pu.fade, typeof sv.fade === 'number' ? I.clamp(sv.fade, 0, 1) : 0);
-      gl.uniform3f(pu.fadeCol, ...(typeof sv.fade_color === 'string' ? col(sv.fade_color) : [0, 0, 0]));
-      band(pprog, VY0, VY1);
-
-      refine(S, cam, goal || cam);
-      evict(S);
-    }
-
-    return { name: 'webgl', fpsIdle: 60, pixelBudget: Infinity, resMax: 2, build, frame };
-  }
-
-  return { create };
-})();
+// WebGL2 renderer for the living-scene engine (engine.js). Everything expensive to
+// paint — landscape layers, objects, clouds, celestials — is painted once per scene
+// with engine.js's Canvas 2D code and uploaded as textures. Each frame the GPU places
+// those textures (camera + parallax), draws glows and particles as batched sprites, runs
+// a small shader for water, and one final pass for tint, vignette and film grain.
+// Close up, the edges of the landscape come from sharp tiles painted at the zoom level
+// (like a map), a few per frame, ahead of the camera.
+const MooodGL = (() => {
+  const I = Moood.internals;
+  const QUADS = 8192, STRIDE = 10; // per vertex: x y u v r g b a, haze k b
+
+  // Everything is drawn in the frame's pixels (engine.js: the frame is a landscape rectangle inside
+  // the canvas, which shows the scene on around it): u_off is where the frame starts in the
+  // canvas, u_canvas the canvas's size.
+  const VS = `#version 300 es
+  in vec2 a_pos; in vec2 a_uv; in vec4 a_col; in vec2 a_haze;
+  uniform vec2 u_canvas, u_off;
+  out vec2 v_uv; out vec4 v_col; out vec2 v_haze;
+  void main() {
+    v_uv = a_uv; v_col = a_col; v_haze = a_haze;
+    vec2 p = a_pos + u_off;
+    gl_Position = vec4(p.x / u_canvas.x * 2.0 - 1.0, 1.0 - p.y / u_canvas.y * 2.0, 0.0, 1.0);
+  }`;
+  const FS = `#version 300 es
+  precision mediump float;
+  in vec2 v_uv; in vec4 v_col; in vec2 v_haze;
+  uniform sampler2D u_tex;
+  uniform vec3 u_fog;
+  out vec4 o;
+  // aerial perspective (see haze()): colour·k + fog·b, premultiplied
+  void main() {
+    o = texture(u_tex, v_uv) * v_col;
+    // painted colours don't always hold the haze we assume: never darken more than 40%; an
+    // additive quad (light, alpha 0) is never brightened by it
+    o.rgb = clamp(o.rgb * v_haze.x + u_fog * v_haze.y * o.a, o.rgb * 0.6, o.a > 0.0 ? vec3(o.a) : o.rgb);
+  }`;
+  // full-screen passes: a triangle pair in pixel coordinates
+  const QVS = `#version 300 es
+  in vec2 a_pos; uniform vec2 u_canvas, u_off;
+  void main() { vec2 p = a_pos + u_off; gl_Position = vec4(p.x / u_canvas.x * 2.0 - 1.0, 1.0 - p.y / u_canvas.y * 2.0, 0.0, 1.0); }`;
+  // Water: mirror what is drawn above the horizon, ripple it, tint with the water colour.
+  const WFS = `#version 300 es
+  precision highp float;
+  uniform sampler2D u_tex;
+  uniform vec2 u_res, u_canvas, u_off;  // the frame, the canvas, where the frame starts in it
+  uniform float u_wy, u_k, u_t, u_speed, u_u;
+  uniform vec3 u_col;
+  out vec4 o;
+  void main() {
+    float px = gl_FragCoord.x - u_off.x, py = u_canvas.y - gl_FragCoord.y - u_off.y;
+    float depth = u_res.y - u_wy, d = clamp((py - u_wy) / depth, 0.0, 1.0);
+    float dx = (sin(30.0 * log(0.03 + d) - u_t * 1.4 * u_speed) * 0.6 + sin(d * 53.0 + u_t * 0.8) * 0.4) * (1.0 + d * 16.0) * u_u;
+    float sy = max(0.0, u_wy - 1.0 - (py - u_wy) * u_k);
+    vec3 refl = texture(u_tex, vec2((px + dx + u_off.x) / u_canvas.x, 1.0 - (sy + u_off.y) / u_canvas.y)).rgb;
+    vec3 c = mix(refl, u_col, mix(0.35, 0.8, d));
+    c += vec3(0.06) * (1.0 - step(u_u, py - u_wy)); // thin bright line on the horizon
+    o = vec4(c, 1.0);
+  }`;
+  // Final pass: soft-light tint, vignette, per-pixel film grain (overlay), fresh every frame.
+  const PFS = `#version 300 es
+  precision highp float;
+  uniform sampler2D u_scene;
+  uniform vec2 u_res, u_at, u_canvas;  // the frame's size, where it starts in the canvas (window px), the canvas
+  uniform vec3 u_tint;
+  uniform float u_tintA, u_vig, u_grain, u_seed, u_fade;
+  uniform vec3 u_fadeCol;
+  out vec4 o;
+  float hash(vec2 p) { vec3 q = fract(vec3(p.xyx) * 0.1031); q += dot(q, q.yzx + 33.33); return fract((q.x + q.y) * q.z); }
+  vec3 softLight(vec3 b, vec3 s) {
+    vec3 d = mix(((16.0 * b - 12.0) * b + 4.0) * b, sqrt(b), step(0.25, b));
+    return mix(b - (1.0 - 2.0 * s) * b * (1.0 - b), b + (2.0 * s - 1.0) * (d - b), step(0.5, s));
+  }
+  // Around the frame the scene goes on as painted; where nothing is painted (alpha 0), the colour at
+  // the frame's nearest edge carries on. Out of the frame it dims gently toward the canvas's edges.
+  void main() {
+    vec2 q = gl_FragCoord.xy, px = q - u_at;
+    vec4 s = texture(u_scene, q / u_canvas);
+    vec3 edge = texture(u_scene, clamp(q, u_at + 0.5, u_at + u_res - 0.5) / u_canvas).rgb;
+    vec3 c = s.rgb + (1.0 - s.a) * edge;
+    c = mix(c, softLight(c, u_tint), u_tintA);
+    float r0 = min(u_res.x, u_res.y) * 0.35, r1 = length(u_res) * 0.6;
+    c *= 1.0 - u_vig * clamp((length(px - u_res * 0.5) - r0) / (r1 - r0), 0.0, 1.0);
+    vec2 out_ = max(max(-px, px - u_res), 0.0);
+    c *= 1.0 - 0.45 * smoothstep(0.0, 0.5, length(out_) / u_res.y);
+    float n = hash(px + u_seed);
+    vec3 ov = mix(2.0 * c * n, 1.0 - 2.0 * (1.0 - c) * (1.0 - n), step(0.5, c));
+    o = vec4(mix(mix(c, ov, u_grain), u_fadeCol, u_fade), 1.0);
+  }`;
+
+  function program(gl, vs, fs) {
+    const p = gl.createProgram();
+    for (const [type, src] of [[gl.VERTEX_SHADER, vs], [gl.FRAGMENT_SHADER, fs]]) {
+      const s = gl.createShader(type);
+      gl.shaderSource(s, src);
+      gl.compileShader(s);
+      if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) throw new Error(gl.getShaderInfoLog(s));
+      gl.attachShader(p, s);
+    }
+    gl.bindAttribLocation(p, 0, 'a_pos');
+    gl.bindAttribLocation(p, 1, 'a_uv');
+    gl.bindAttribLocation(p, 2, 'a_col');
+    gl.bindAttribLocation(p, 3, 'a_haze');
+    gl.linkProgram(p);
+    if (!gl.getProgramParameter(p, gl.LINK_STATUS)) throw new Error(gl.getProgramInfoLog(p));
+    return p;
+  }
+  const uniforms = (gl, p, names) => Object.fromEntries(names.map(n => [n, gl.getUniformLocation(p, 'u_' + n)]));
+
+  // small 2D helpers for sprite textures
+  function paint(w, h, fn) { const c = I.layer(w, h); fn(c.getContext('2d'), c.width, c.height); return c; }
+  const colours = new Map();
+  function col(hexOrRgb) {
+    let c = colours.get(hexOrRgb);
+    if (!c) {
+      const rgb = hexOrRgb.startsWith('#') ? I.rgb(hexOrRgb) : hexOrRgb;
+      c = rgb.split(',').map(v => Number(v) / 255);
+      colours.set(hexOrRgb, c);
+    }
+    return c;
+  }
+  const WHITE = [1, 1, 1];
+
+  // affine matrices [a b c d e f]: x' = a x + c y + e, y' = b x + d y + f
+  const ID = [1, 0, 0, 1, 0, 0];
+  const mul = (m, n) => [m[0] * n[0] + m[2] * n[1], m[1] * n[0] + m[3] * n[1], m[0] * n[2] + m[2] * n[3], m[1] * n[2] + m[3] * n[3], m[0] * n[4] + m[2] * n[5] + m[4], m[1] * n[4] + m[3] * n[5] + m[5]];
+  // rotate by r and scale (sx, sy) around pivot (px, py), then shift by (tx, ty)
+  const around = (px, py, r, sx, sy, tx = 0, ty = 0) => {
+    const c = Math.cos(r), s = Math.sin(r);
+    const a = c * sx, b = s * sx, cc = -s * sy, d = c * sy;
+    return [a, b, cc, d, px - a * px - cc * py + tx, py - b * px - d * py + ty];
+  };
+  const apply = (m, x, y) => [m[0] * x + m[2] * y + m[4], m[1] * x + m[3] * y + m[5]];
+
+  function create(canvas) {
+    const gl = canvas.getContext('webgl2', { alpha: false, antialias: false, depth: false, stencil: false, premultipliedAlpha: true, preserveDrawingBuffer: false });
+    if (!gl) return null;
+    const prog = program(gl, VS, FS), wprog = program(gl, QVS, WFS), pprog = program(gl, QVS, PFS);
+    const su = uniforms(gl, prog, ['canvas', 'off', 'tex', 'fog']);
+    const wu = uniforms(gl, wprog, ['res', 'canvas', 'off', 'tex', 'wy', 'k', 't', 'speed', 'u', 'col']);
+    const pu = uniforms(gl, pprog, ['res', 'at', 'canvas', 'off', 'scene', 'tint', 'tintA', 'vig', 'grain', 'seed', 'fade', 'fadeCol']);
+
+    const data = new Float32Array(QUADS * 4 * STRIDE);
+    const vao = gl.createVertexArray();
+    gl.bindVertexArray(vao);
+    const vbo = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
+    gl.bufferData(gl.ARRAY_BUFFER, data.byteLength, gl.DYNAMIC_DRAW);
+    const idx = new Uint16Array(QUADS * 6);
+    for (let q = 0; q < QUADS; q++) idx.set([q * 4, q * 4 + 1, q * 4 + 2, q * 4, q * 4 + 2, q * 4 + 3], q * 6);
+    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, gl.createBuffer());
+    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, idx, gl.STATIC_DRAW);
+    gl.enableVertexAttribArray(0); gl.vertexAttribPointer(0, 2, gl.FLOAT, false, STRIDE * 4, 0);
+    gl.enableVertexAttribArray(1); gl.vertexAttribPointer(1, 2, gl.FLOAT, false, STRIDE * 4, 8);
+    gl.enableVertexAttribArray(2); gl.vertexAttribPointer(2, 4, gl.FLOAT, false, STRIDE * 4, 16);
+    gl.enableVertexAttribArray(3); gl.vertexAttribPointer(3, 2, gl.FLOAT, false, STRIDE * 4, 32);
+    const qvao = gl.createVertexArray();
+    gl.bindVertexArray(qvao);
+    const qvbo = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, qvbo);
+    gl.enableVertexAttribArray(0); gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 8, 0);
+    gl.bindVertexArray(null);
+
+    gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
+    gl.enable(gl.BLEND);
+
+    function texture(source) {
+      const t = gl.createTexture();
+      gl.bindTexture(gl.TEXTURE_2D, t);
+      gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, source);
+      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 t;
+    }
+    // an offscreen render target of the canvas size
+    function target(w, h) {
+      const tex = gl.createTexture();
+      gl.bindTexture(gl.TEXTURE_2D, tex);
+      gl.texStorage2D(gl.TEXTURE_2D, 1, gl.RGBA8, w, h);
+      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);
+      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 { tex, fbo };
+    }
+    const dropTarget = r => { gl.deleteTexture(r.tex); gl.deleteFramebuffer(r.fbo); };
+
+    // textures shared by every scene
+    const T = {
+      white: texture(paint(2, 2, (g) => { g.fillStyle = '#fff'; g.fillRect(0, 0, 2, 2); })),
+      glow: texture(I.glowSprite('255,255,255')),
+      dot: texture(paint(32, 32, (g) => { const r = g.createRadialGradient(16, 16, 0, 16, 16, 16); r.addColorStop(0, '#fff'); r.addColorStop(0.55, 'rgba(255,255,255,0.9)'); r.addColorStop(1, 'rgba(255,255,255,0)'); g.fillStyle = r; g.fillRect(0, 0, 32, 32); })),
+      ring: texture(paint(32, 32, (g) => { g.strokeStyle = '#fff'; g.lineWidth = 2; g.beginPath(); g.arc(16, 16, 13, 0, 7); g.stroke(); })),
+      streak: texture(paint(4, 32, (g) => { const r = g.createLinearGradient(0, 0, 0, 32); r.addColorStop(0, 'rgba(255,255,255,0)'); r.addColorStop(1, '#fff'); g.fillStyle = r; g.fillRect(1, 0, 2, 32); })),
+      ellipse: texture(paint(32, 16, (g) => { g.fillStyle = '#fff'; g.beginPath(); g.ellipse(16, 8, 15, 7, 0, 0, 7); g.fill(); })),
+    };
+
+    // ── batching ─────────────────────────────────────────────────────────
+    // W × H: the frame; SW: the width of the stage everything is painted on (engine.js);
+    // ROUND: the scene is looked around (around, roam) — elements are cards standing in the world
+    // OX, OY: where the frame starts in the canvas, CW × CH the canvas (px); what is seen is the
+    // canvas — in the frame's pixels from (VX0, VY0) to (VX1, VY1)
+    let n = 0, curTex = null, curAdd = false, W = 1, H = 1, SW = 1, ROUND = false;
+    let OX = 0, OY = 0, CW = 1, CH = 1, VX0 = 0, VY0 = 0, VX1 = 1, VY1 = 1;
+    // Aerial perspective: air between you and a thing tints it toward the horizon's sky
+    // colour, h(D) = 1 − e^(−D/HAZE). The scene is painted as seen from the start, so its
+    // colours already hold the haze of distance Z; walking to distance D we take that out and
+    // put the new amount in: c·k + fog·b, k = (1−h(D))/(1−h(Z)), b = h(D) − h(Z)·k.
+    // HAZE in eye heights: 220 = clear air (~40% haze at 200 m); spec.light.haze 0…1 → 600…25
+    const NOHAZE = [1, 0];
+    let HAZE = 220;
+    let HZ = NOHAZE, FOG = [0.5, 0.5, 0.5];
+    const hz = D => 1 - Math.exp(-Math.max(0, D) / HAZE);
+    // painted for distance Z, seen from D away
+    const haze = (Z, D) => {
+      const h0 = Math.min(0.85, hz(Z)), h1 = hz(D), k = Math.min(3, (1 - h1) / (1 - h0));
+      return [k, h1 - h0 * k];
+    };
+    function flush() {
+      if (!n) return;
+      gl.useProgram(prog);
+      gl.bindVertexArray(vao);
+      gl.uniform2f(su.canvas, CW, CH);
+      gl.uniform2f(su.off, OX, OY);
+      gl.uniform3f(su.fog, ...FOG);
+      gl.activeTexture(gl.TEXTURE0);
+      gl.bindTexture(gl.TEXTURE_2D, curTex);
+      gl.uniform1i(su.tex, 0);
+      if (curAdd) gl.blendFunc(gl.ONE, gl.ONE); else gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
+      gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
+      gl.bufferSubData(gl.ARRAY_BUFFER, 0, data, 0, n * 4 * STRIDE);
+      gl.drawElements(gl.TRIANGLES, n * 6, gl.UNSIGNED_SHORT, 0);
+      n = 0;
+    }
+    // one textured quad: the rect (x, y, w, h) transformed by m, uv rect, tint, alpha.
+    // Colours are premultiplied; additive quads get alpha 0 so they only add light.
+    const UV = [0, 0, 1, 1];
+    function rect(tex, m, x, y, w, h, c = WHITE, a = 1, add = false, uv = UV) {
+      if (a <= 0) return;
+      if (tex !== curTex || add !== curAdd || n >= QUADS) { flush(); curTex = tex; curAdd = add; }
+      const r = c[0] * a, g = c[1] * a, b = c[2] * a, al = add ? 0 : a;
+      const ax = m[0] * w, ay = m[1] * w, bx = m[2] * h, by = m[3] * h;
+      const ox = m[0] * x + m[2] * y + m[4], oy = m[1] * x + m[3] * y + m[5];
+      let k = n * 4 * STRIDE;
+      const v = (px, py, u, vv) => { data[k] = px; data[k + 1] = py; data[k + 2] = u; data[k + 3] = vv; data[k + 4] = r; data[k + 5] = g; data[k + 6] = b; data[k + 7] = al; data[k + 8] = HZ[0]; data[k + 9] = HZ[1]; k += STRIDE; };
+      v(ox, oy, uv[0], uv[1]);
+      v(ox + ax, oy + ay, uv[2], uv[1]);
+      v(ox + ax + bx, oy + ay + by, uv[2], uv[3]);
+      v(ox + bx, oy + by, uv[0], uv[3]);
+      n++;
+    }
+    // a textured quad with four free corners p = [x0,y0, x1,y1, x2,y2, x3,y3] (clockwise from top-left)
+    function quad(tex, p, uv, c = WHITE, a = 1) {
+      if (tex !== curTex || curAdd || n >= QUADS) { flush(); curTex = tex; curAdd = false; }
+      const r = c[0] * a, g = c[1] * a, b = c[2] * a;
+      let k = n * 4 * STRIDE;
+      const v = (i, u, vv) => { data[k] = p[i]; data[k + 1] = p[i + 1]; data[k + 2] = u; data[k + 3] = vv; data[k + 4] = r; data[k + 5] = g; data[k + 6] = b; data[k + 7] = a; data[k + 8] = HZ[0]; data[k + 9] = HZ[1]; k += STRIDE; };
+      v(0, uv[0], uv[1]); v(2, uv[2], uv[1]); v(4, uv[2], uv[3]); v(6, uv[0], uv[3]);
+      n++;
+    }
+    // a textured quad with four free corners, each [x, y, u, v]
+    function quadAt(tex, A, B, C_, D) {
+      if (tex !== curTex || curAdd || n >= QUADS) { flush(); curTex = tex; curAdd = false; }
+      let k = n * 4 * STRIDE;
+      for (const q of [A, B, C_, D]) {
+        data[k] = q[0]; data[k + 1] = q[1]; data[k + 2] = q[2]; data[k + 3] = q[3];
+        data[k + 4] = 1; data[k + 5] = 1; data[k + 6] = 1; data[k + 7] = 1; data[k + 8] = HZ[0]; data[k + 9] = HZ[1];
+        k += STRIDE;
+      }
+      n++;
+    }
+    function sprite(tex, m, cx, cy, w, h, rot, c, a, add) {
+      rect(tex, rot ? mul(m, around(cx, cy, rot, 1, 1)) : m, cx - w / 2, cy - h / 2, w, h, c, a, add);
+    }
+    // an opaque band across all that is seen (y0..y1, frame px) drawn with program p (its
+    // u_canvas, u_off set)
+    function band(p, y0, y1) {
+      flush();
+      gl.useProgram(p);
+      gl.bindVertexArray(qvao);
+      gl.bindBuffer(gl.ARRAY_BUFFER, qvbo);
+      gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([VX0, y0, VX1, y0, VX1, y1, VX0, y0, VX1, y1, VX0, y1]), gl.STREAM_DRAW);
+      gl.disable(gl.BLEND);
+      gl.drawArrays(gl.TRIANGLES, 0, 6);
+      gl.enable(gl.BLEND);
+      curTex = null;
+    }
+
+    // ── camera ───────────────────────────────────────────────────────────
+    let YH = 0.6; // horizon of the current scene, in screen heights
+    const camMatrix = (cam, Z) => I.view(cam, Z, W, H, YH);
+    // where an element's painting goes from camera c: { m, D } (D: its distance along the gaze),
+    // null behind the eye
+    const matOf = (ob, c) => (ROUND ? I.billboard(c, ob.p, ob.x, ob.y, W, H, YH) : { m: camMatrix(c, ob.Z), D: ob.Z - c.z });
+    // what part of a depth plane is seen, in its own (unscaled) coordinates
+    const visible = m => ({ x: (VX0 - m[4]) / m[0], y: (VY0 - m[5]) / m[3], w: (VX1 - VX0) / m[0], h: (VY1 - VY0) / m[3] });
+
+    // ── landscape layers ─────────────────────────────────────────────────
+    // A layer is one colour. Per vertical strip it is empty above `tops`, solid below
+    // `solids`: the body is a flat fill, and only the band between (ridges, roofs, trees)
+    // needs a texture. Close up, that band is shown from sharp tiles painted at the zoom
+    // level (TILE px square, level n = scale LEVEL^n), like a map; a tile that isn't ready
+    // yet falls back to a neighbouring level, then to the scene's base texture.
+    const TILE = 512, PAD = 1, LEVEL = 1.5, MAX_TILES = 160, TILES_PER_FRAME = 6;
+    const levelFor = s => (s <= 1.05 ? 0 : Math.min(7, Math.ceil(Math.log(s) / Math.log(LEVEL) - 1e-6)));
+    const scratch = I.layer(TILE + 2 * PAD, TILE + 2 * PAD), pool = [];
+    let tileCount = 0, frameNo = 0;
+    let BYID = new Map(); // the scene's elements by id (this frame's)
+    function tileTexture() {
+      if (pool.length) return pool.pop();
+      const t = gl.createTexture();
+      gl.bindTexture(gl.TEXTURE_2D, t);
+      gl.texStorage2D(gl.TEXTURE_2D, 1, gl.RGBA8, TILE + 2 * PAD, TILE + 2 * PAD);
+      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 t;
+    }
+    function freeTile(tile) {
+      tileCount--;
+      if (pool.length < 16) pool.push(tile.tex); else gl.deleteTexture(tile.tex);
+    }
+    const TUV = [PAD / (TILE + 2 * PAD), PAD / (TILE + 2 * PAD), 1 - PAD / (TILE + 2 * PAD), 1 - PAD / (TILE + 2 * PAD)];
+    const tileSize = n => TILE / Math.pow(LEVEL, n);
+    // the band's vertical extent over layer x range [xa, xb]
+    function bandOver(l, xa, xb) {
+      let top = Infinity, bot = -Infinity;
+      for (let i = Math.max(0, Math.floor((xa - l.x0) / l.stripW)); i <= Math.min(l.tops.length - 1, Math.floor((xb - l.x0) / l.stripW)); i++) {
+        if (l.solids[i] > l.tops[i]) { top = Math.min(top, l.tops[i]); bot = Math.max(bot, l.solids[i]); }
+      }
+      return [top, bot];
+    }
+    // tile cells at level n that cover the band within region v (layer coordinates)
+    function cells(l, n, v) {
+      const ts = tileSize(n), out = [];
+      for (let tx = Math.floor(v.x / ts); tx * ts < v.x + v.w; tx++) {
+        const [top, bot] = bandOver(l, tx * ts, (tx + 1) * ts);
+        if (!(bot > top)) continue;
+        for (let ty = Math.floor(Math.max(v.y, top) / ts); ty * ts < Math.min(v.y + v.h, bot); ty++) out.push({ tx, ty, x: tx * ts, y: ty * ts, s: ts });
+      }
+      return out;
+    }
+    function paintTile(l, n, c) {
+      const k = Math.pow(LEVEL, n);
+      I.staticLayer(l.L, SW, H, l.seed, { x: c.x - PAD / k, y: c.y - PAD / k, w: (TILE + 2 * PAD) / k, h: (TILE + 2 * PAD) / k, k, canvas: scratch });
+      const tex = tileTexture();
+      gl.bindTexture(gl.TEXTURE_2D, tex);
+      gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, gl.RGBA, gl.UNSIGNED_BYTE, scratch);
+      l.tiles.set(`${n}:${c.tx}:${c.ty}`, { tex, used: frameNo, n });
+      tileCount++;
+    }
+    // best available texture for a cell: its own level, else a neighbour level covering it
+    function tileFor(l, n, c) {
+      for (const m of [n, n - 1, n + 1]) {
+        if (m < 1) continue;
+        const ts = tileSize(m), tx = Math.floor((c.x + c.s / 2) / ts), ty = Math.floor((c.y + c.s / 2) / ts);
+        const t = l.tiles.get(`${m}:${tx}:${ty}`);
+        if (t && (m === n || (tx * ts <= c.x + 0.01 && ty * ts <= c.y + 0.01 && (tx + 1) * ts >= c.x + c.s - 0.01 && (ty + 1) * ts >= c.y + c.s - 0.01))) {
+          t.used = frameNo;
+          const ox = (c.x - tx * ts) / ts, oy = (c.y - ty * ts) / ts, f = c.s / ts, span = TUV[2] - TUV[0];
+          return { tex: t.tex, uv: [TUV[0] + ox * span, TUV[1] + oy * span, TUV[0] + (ox + f) * span, TUV[1] + (oy + f) * span] };
+        }
+      }
+      return null;
+    }
+    function drawLayer(l, m, cam) {
+      const r = l.region, bottom = r.y + r.h, c = col(l.L.color);
+      // flat body, strip by strip
+      for (let i = 0; i < l.tops.length; i++) {
+        const xa = l.x0 + i * l.stripW, xb = xa + l.stripW;
+        if (m[0] * xb + m[4] < VX0 || m[0] * xa + m[4] > VX1) continue;
+        rect(T.white, m, xa, l.solids[i], l.stripW, bottom + 50 * H - l.solids[i], c);
+      }
+      const n = levelFor(m[0]);
+      if (n === 0) {
+        for (let i = 0; i < l.tops.length; i++) {
+          const xa = l.x0 + i * l.stripW, xb = xa + l.stripW, ya = l.tops[i], yb = l.solids[i];
+          if (yb <= ya || m[0] * xb + m[4] < VX0 || m[0] * xa + m[4] > VX1) continue;
+          rect(l.tex, m, xa, ya, xb - xa, yb - ya, WHITE, 1, false, [(xa - r.x) / r.w, (ya - r.y) / r.h, (xb - r.x) / r.w, (yb - r.y) / r.h]);
+        }
+        return;
+      }
+      for (const cell of cells(l, n, visible(m))) {
+        const t = tileFor(l, n, cell);
+        if (t) rect(t.tex, m, cell.x, cell.y, cell.s, cell.s, WHITE, 1, false, t.uv);
+        else rect(l.tex, m, cell.x, cell.y, cell.s, cell.s, WHITE, 1, false, [(cell.x - r.x) / r.w, (cell.y - r.y) / r.h, (cell.x + cell.s - r.x) / r.w, (cell.y + cell.s - r.y) / r.h]);
+      }
+    }
+
+    // ── build: paint everything once ─────────────────────────────────────
+    // w × h: the frame; out = { x, y, cw, ch }: where it starts in the canvas and the canvas (px)
+    function build(spec, w, h, prev, out) {
+      if (prev) {
+        for (const t of prev.textures) gl.deleteTexture(t);
+        dropTarget(prev.scene); dropTarget(prev.copy);
+        for (const l of prev.layers) if (l.tiles) for (const t of l.tiles.values()) freeTile(t);
+      }
+      W = w; H = h; SW = I.STAGE * h; ROUND = I.camSetup(spec).round;
+      OX = out.x; OY = out.y; CW = out.cw; CH = out.ch; VX0 = -OX; VY0 = -OY; VX1 = CW - OX; VY1 = CH - OY;
+      const textures = new Set(), tex = c => { const t = texture(c); textures.add(t); return t; };
+      const u = H / 900, seed = I.hash(JSON.stringify(spec.layers || []) + (spec.title || '')), rnd = I.seeded(seed);
+      const x0 = -I.EXT * SW, span = (1 + 2 * I.EXT) * SW, dz = I.depths(spec);
+      YH = dz.yh;
+      FOG = col(spec.light?.hazeColor || spec.sky?.bottom || '#808080');
+      HAZE = typeof spec.light?.haze === 'number' ? 600 * Math.pow(25 / 600, I.clamp(spec.light.haze, 0, 1)) : 220;
+
+      const sky = spec.sky ? tex(paint(4, 256, (g) => { const r = g.createLinearGradient(0, 0, 0, 256); r.addColorStop(0, spec.sky.top); r.addColorStop(0.55, spec.sky.middle); r.addColorStop(1, spec.sky.bottom); g.fillStyle = r; g.fillRect(0, 0, 4, 256); })) : null;
+      const starCount = Math.round((spec.stars?.density ?? 0) * span * H / 2500 / (u * u));
+      const stars = Array.from({ length: starCount }, () => ({ x: x0 + rnd() * span, y: -0.45 * H + Math.pow(rnd(), 1.4) * H * 1.15, r: (0.4 + Math.pow(rnd(), 4) * 1.6) * u, p: rnd() * 7, f: 0.4 + rnd() * 2 }));
+      // the sky plane zooms at most ZOOM_MAX^0.32 ≈ 1.4×: paint celestials and birds that much finer
+      const SS = 1.5;
+      const celestials = (spec.celestials || []).map(c => {
+        const r = c.size * H / 2, R = r * 9, size = Math.max(4, Math.ceil(2 * R));
+        const canvas = paint(size * SS, size * SS, (g, cw) => {
+          g.scale(cw / size, cw / size);
+          const cx = size / 2, cy = size / 2, cc = I.rgb(c.color);
+          g.globalAlpha = Math.min(1, 0.35 * (c.glow ?? 0.5));
+          g.drawImage(I.glowSprite(cc), 0, 0, size, size);
+          g.globalAlpha = 1;
+          g.fillStyle = c.color; g.beginPath(); g.arc(cx, cy, r, 0, 7); g.fill();
+          if (c.kind === 'moon') { g.fillStyle = 'rgba(0,0,0,0.07)'; for (const [dx, dy, rr] of [[-0.3, -0.2, 0.25], [0.28, 0.15, 0.17], [-0.05, 0.4, 0.13]]) { g.beginPath(); g.arc(cx + dx * r, cy + dy * r, rr * r, 0, 7); g.fill(); } }
+          if (c.kind === 'planet') { g.strokeStyle = `rgba(${cc},0.6)`; g.lineWidth = r * 0.08; g.beginPath(); g.ellipse(cx, cy, r * 1.8, r * 0.4, -0.3, 0, 7); g.stroke(); }
+        });
+        return { tex: tex(canvas), x: c.x * SW - size / 2, y: c.y * H - size / 2, size };
+      });
+      const layers = (spec.layers || []).map((L, i) => {
+        const Z = dz.Z[i];
+        if (L.kind === 'clouds') {
+          const cc = I.rgb(L.color);
+          const clouds = Array.from({ length: Math.round((3 + (L.density ?? 0.5) * 9) * (1 + 2 * I.EXT)) }, () => {
+            const cw = SW * (0.12 + rnd() * 0.2), ch = cw * 0.35;
+            const canvas = paint(cw, ch, (g) => {
+              for (let k = 0; k < 7; k++) {
+                const gx = cw * (0.2 + rnd() * 0.6), gy = ch * (0.45 + rnd() * 0.25), gr = ch * (0.35 + rnd() * 0.3);
+                g.globalAlpha = 0.55; g.drawImage(I.glowSprite(cc), gx - gr, gy - gr, 2 * gr, 2 * gr);
+              }
+            });
+            return { tex: tex(canvas), w: cw, h: ch, x: rnd() * span, y: L.y * H + (rnd() - 0.5) * (L.height ?? 0.1) * H, sp: (4 + rnd() * 8) * u };
+          });
+          return { L, Z, clouds };
+        }
+        if (L.kind === 'fog') return { L, Z, c: col(L.color), blobs: Array.from({ length: 10 }, () => ({ x: rnd() * span, dy: (rnd() - 0.5) * (L.height ?? 0.08) * H, rx: SW * (0.2 + rnd() * 0.25), ry: H * (0.03 + rnd() * 0.04), sp: (5 + rnd() * 10) * u, a: 0.06 + rnd() * 0.06 })) };
+        if (L.kind === 'water') return { L, Z, c: col(L.color) };
+        const lseed = seed + i * 101, st = I.staticLayer(L, SW, H, lseed);
+        return { L, Z, seed: lseed, tex: tex(st.canvas), x0: st.x0, region: { x: st.x0, y: 0, w: span, h: I.DEEP * H }, tops: st.tops, solids: st.solids, stripW: st.stripW, windows: st.windows, tiles: new Map() };
+      });
+      const objects = (spec.objects || []).map(o0 => {
+        if (o0.plane) return planeOf(o0, dz, tex);
+        // looking around, the sky is the full circle, 2π stage heights wide (engine.js)
+        const o = { ...o0, x: dz.objectX(o0), y: dz.objectY(o0), size: dz.objectSize(o0), _yh: dz.yh, _sw: ROUND && o0.sky ? I.TAU * H : SW }, Z = dz.objectZ(o0);
+        const x = o.x * SW, y = o.y * H, s = Math.max(2, o.size * H);
+        if (o.kind === 'bird') {
+          const canvas = paint(s * 1.2 * SS, s * 0.6 * SS, (g) => {
+            g.scale(SS, SS);
+            g.strokeStyle = o.color; g.lineCap = 'round'; g.lineWidth = Math.max(1.5, s * 0.08);
+            const cx = s * 0.6, cy = s * 0.35;
+            g.beginPath(); g.moveTo(cx - s * 0.5, cy - s * 0.1); g.quadraticCurveTo(cx - s * 0.2, cy - s * 0.15, cx, cy);
+            g.quadraticCurveTo(cx + s * 0.2, cy - s * 0.15, cx + s * 0.5, cy - s * 0.1); g.stroke();
+          });
+          return { o, Z, x, y, s, tex: tex(canvas), w: s * 1.2, h: s * 0.6, lights: [] };
+        }
+        // a custom element whose code reads the time is repainted live every frame (one reading the
+        // scene's state, when the state changes)
+        const { bx, by, bw, bh } = ROUND && o.sky ? { bx: 0, by: -0.35 * H, bw: I.TAU * H, bh: 1.6 * H } : I.objectBox(o, SW, H);
+        const r0 = paintObject(o, bx, by, bw, bh, Math.min(1, MAX_SIDE / bw, MAX_SIDE / bh), 0), frames = [tex(r0.canvas)], lights = r0.lights;
+        const live = (o.kind === 'custom' || !o.kind) ? liveOf(o, o.frames, tex) : null;
+        return {
+          o, Z, x, y, s, bx, by, bw, bh, tex: frames[0], frames, period: o.period || 2, detail: null,
+          p: ROUND && !o.sky ? dz.objectAt(o0) : null,
+          live, ground: !!o.ground, from: o0.place ? o0 : null,
+          reflect: o.reflect ?? (o.kind === 'boat' || o.kind === 'bridge'),
+          lights: lights.map(l => ({ x: l.x, y: l.y, r: l.r, c: col(l.col), a: l.a, dot: l.dot, fire: o.kind === 'campfire', flicker: l.flicker })),
+        };
+      });
+      // particles fall over all that is seen: in the canvas's pixels
+      const particles = (spec.particles || []).map(p => ({ p, c: col(p.color || '#ffffff'), list: I.makeParticles(p, CW, CH, rnd) }));
+      // draw far to near, layers and objects together (a house behind a hill is hidden by it)
+      const order = [...layers.map(l => ({ l, Z: l.Z })), ...objects.map(ob => ({ ob, Z: ob.Z }))].sort((a, b) => (b.Z - a.Z) || 0);
+      return { W, H, SW, u, x0, span, yh: dz.yh, dz, lim: I.limits(spec, W, H), sky, stars, celestials, layers, objects, order, particles, textures, scene: target(CW, CH), copy: target(CW, CH), out };
+    }
+
+    // Paints an object at t = 0 — the region (bx, by, bw, bh) of it — into a canvas at scale
+    // k. Light rects and cones are baked in; glows stay sprites so they can flicker.
+    function paintObject(o, bx, by, bw, bh, k, t = 0, into = null) {
+      const lights = [];
+      const draw = (g) => {
+        g.setTransform(k, 0, 0, k, -bx * k, -by * k);
+        I.drawObject(g, o, o._sw || SW, H, t, lights);
+        for (const l of lights) {
+          if (l.rect) { g.fillStyle = `rgba(${l.col},${Math.min(1, l.a * 2.2)})`; g.fillRect(...l.rect); }
+          if (l.cone) {
+            const gr = g.createLinearGradient(0, l.y, 0, l.cone.y);
+            gr.addColorStop(0, `rgba(${l.col},${l.a * 0.35})`); gr.addColorStop(1, `rgba(${l.col},0)`);
+            g.fillStyle = gr; g.globalCompositeOperation = 'lighter';
+            g.beginPath(); g.moveTo(l.x - l.dot, l.y); g.lineTo(l.x + l.dot, l.y); g.lineTo(l.x + l.cone.w, l.cone.y); g.lineTo(l.x - l.cone.w, l.cone.y); g.fill();
+            g.globalCompositeOperation = 'source-over';
+          }
+        }
+      };
+      let canvas = into;
+      if (into) {
+        const w = Math.max(1, Math.round(bw * k)), h = Math.max(1, Math.round(bh * k));
+        if (into.width !== w || into.height !== h) { into.width = w; into.height = h; }
+        const g = into.getContext('2d');
+        g.setTransform(1, 0, 0, 1, 0, 0);
+        g.clearRect(0, 0, w, h);
+        draw(g);
+      } else canvas = paint(bw * k, bh * k, draw);
+      return { canvas, lights };
+    }
+
+    // ── sharp close-ups ──────────────────────────────────────────────────
+    const MAX_SIDE = 8192;
+    const intersect = (a, b) => {
+      const x = Math.max(a.x, b.x), y = Math.max(a.y, b.y), w = Math.min(a.x + a.w, b.x + b.w) - x, h = Math.min(a.y + a.h, b.y + b.h) - y;
+      return w > 0 && h > 0 ? { x, y, w, h } : null;
+    };
+    const covers = (r, v) => r.x <= v.x + 0.5 && r.y <= v.y + 0.5 && r.x + r.w >= v.x + v.w - 0.5 && r.y + r.h >= v.y + v.h - 0.5;
+    function setDetail(S, owner, det) {
+      if (owner.detail) for (const t of owner.detail.frames) { gl.deleteTexture(t); S.textures.delete(t); }
+      owner.detail = det;
+      if (det) for (const t of det.frames) S.textures.add(t);
+    }
+    // Each frame, paint a few missing tiles: first for where the camera is heading (`goal`),
+    // so the close-up is sharp on arrival, then for where it is now; nearest layer and
+    // screen centre first. Objects are small: re-painted whole at the needed scale.
+    function refine(S, cam, goal) {
+      let budget = TILES_PER_FRAME;
+      for (const c of [goal, cam]) {
+        for (const l of [...S.layers].reverse()) {
+          if (!l.tiles) continue;
+          if (l.Z - c.z < 0.05) continue;
+          const n = levelFor(camMatrix(c, l.Z)[0]);
+          if (n === 0) continue;
+          const v = visible(camMatrix(c, l.Z)), cx = v.x + v.w / 2, cy = v.y + v.h / 2;
+          const todo = cells(l, n, v).filter(cell => !l.tiles.has(`${n}:${cell.tx}:${cell.ty}`));
+          todo.sort((a, b) => Math.hypot(a.x - cx, a.y - cy) - Math.hypot(b.x - cx, b.y - cy));
+          for (const cell of todo) {
+            if (budget-- <= 0) return;
+            paintTile(l, n, cell);
+          }
+        }
+        // objects: re-painted at the needed scale, only the part on screen (a tall tower
+        // close up would otherwise be a huge canvas)
+        for (const ob of [...S.objects].reverse()) {
+          if (ob.o.kind === 'bird' || ob.live || ob.ground || ob.plane || ob.o.sky || (ROUND && typeof ob.o.facing === 'number')) continue;
+          const at = matOf(ob, c);
+          if (!at || at.D < 0.3) continue;
+          const k = Math.pow(LEVEL, levelFor(at.m[0]));
+          if (k <= 1) { if (ob.detail && c === cam) setDetail(S, ob, null); continue; }
+          const v = visible(at.m), box = { x: ob.bx, y: ob.by, w: ob.bw, h: ob.bh };
+          const need = intersect(box, v);
+          if (!need || (ob.detail && ob.detail.k >= k && covers(ob.detail.region, need))) continue;
+          const r = intersect(box, { x: v.x - v.w * 0.15, y: v.y - v.h * 0.15, w: v.w * 1.3, h: v.h * 1.3 });
+          // cost in tiles' worth of pixels; one big job may run alone in a frame
+          const cost = Math.ceil(r.w * r.h * k * k / (TILE * TILE)) * ob.frames.length;
+          if (cost > budget && budget < TILES_PER_FRAME) return;
+          budget -= cost;
+          const kk = Math.min(k, MAX_SIDE / r.w, MAX_SIDE / r.h);
+          const n = ob.frames.length;
+          setDetail(S, ob, { frames: ob.frames.map((_, f) => texture(paintObject(ob.o, r.x, r.y, r.w, r.h, kk, f / n * ob.period).canvas)), k, region: r });
+        }
+      }
+    }
+    // keep GPU memory bounded: drop the least recently drawn tiles
+    function evict(S) {
+      if (tileCount <= MAX_TILES) return;
+      const all = [];
+      for (const l of S.layers) if (l.tiles) for (const [key, t] of l.tiles) all.push([t.used, l, key, t]);
+      all.sort((a, b) => a[0] - b[0]);
+      for (const [used, l, key, t] of all.slice(0, tileCount - MAX_TILES)) {
+        if (used === frameNo) break;
+        l.tiles.delete(key); freeTile(t);
+      }
+    }
+
+    function drawWater(S, l, wy, t) {
+      flush();
+      if (wy >= VY1) return;
+      // copy what is drawn so far, then shade the water below the horizon from that copy
+      gl.bindFramebuffer(gl.READ_FRAMEBUFFER, S.scene.fbo);
+      gl.bindFramebuffer(gl.DRAW_FRAMEBUFFER, S.copy.fbo);
+      gl.blitFramebuffer(0, 0, CW, CH, 0, 0, CW, CH, gl.COLOR_BUFFER_BIT, gl.NEAREST);
+      gl.bindFramebuffer(gl.FRAMEBUFFER, S.scene.fbo);
+      gl.useProgram(wprog);
+      gl.activeTexture(gl.TEXTURE0);
+      gl.bindTexture(gl.TEXTURE_2D, S.copy.tex);
+      gl.uniform1i(wu.tex, 0);
+      gl.uniform2f(wu.res, W, H);
+      gl.uniform2f(wu.canvas, CW, CH);
+      gl.uniform2f(wu.off, OX, OY);
+      gl.uniform1f(wu.wy, Math.max(0, wy));
+      gl.uniform1f(wu.k, Math.min(1.2, Math.max(0, wy) / (H - wy)));
+      gl.uniform1f(wu.t, t);
+      gl.uniform1f(wu.speed, 1 + Math.abs(l.L.drift ?? 0) * 2);
+      gl.uniform1f(wu.u, S.u);
+      gl.uniform3f(wu.col, ...l.c);
+      band(wprog, Math.max(VY0, wy), VY1);
+    }
+
+    const wrapX = (x, S, w) => ((x % (S.span + w)) + S.span + w) % (S.span + w) + S.x0 - w;
+    const WINDOW = col('#ffd08a'), DOT = col('255,245,220');
+
+    // how finely a live element's region r is repainted: the scale it is seen at, up to ~4 Mpx
+    const LIVE_AWAY = 0.05; // the scale a live element out of sight is painted at (for its lights)
+    const liveScale = (r, seen) => Math.min(seen, MAX_SIDE / r.w, MAX_SIDE / r.h, Math.sqrt(4e6 / (r.w * r.h)));
+
+    // A ground plane (water, fields, a road) is painted as seen from the start. Each row of it
+    // lies at a depth — a row h below the horizon is 1/h eye heights away — so as you walk, the
+    // rows are laid out again in perspective: drawn as thin strips, each with its own haze.
+    function drawGround(ob, cam, t) {
+      let tx = ob.tex;
+      if (ob.live) {
+        const whole = { x: ob.bx, y: ob.by, w: ob.bw, h: ob.bh }, k = liveScale(whole, 1);
+        if (stale(ob.live, k, whole)) repaint(ob, k, t, whole);
+        tx = ob.live.tex;
+      }
+      const yhH = YH * H, top = Math.max(ob.by, yhH + 0.5), bot = ob.by + ob.bh, N = 120, look = -cam.y * H;
+      const row = y => {
+        const Z0 = H / (y - yhH), D = Z0 - cam.z;
+        if (D <= 0.05) return null;
+        const s = Z0 / D;
+        return { Z0, s, e: (W - s * SW) / 2 - H * cam.x / D, y: yhH + (y - yhH) * s + look + H * ((cam.h ?? 1) - 1) / D };
+      };
+      let a = row(top);
+      for (let i = 1; i <= N && a; i++) {
+        const y1 = top + (bot - top) * (i / N) ** 1.6, b = row(y1);   // finer near the horizon
+        if (!b) break;
+        const y0 = top + (bot - top) * ((i - 1) / N) ** 1.6, xl = ob.bx, xr = ob.bx + ob.bw;
+        if (b.y > VY0 && a.y < VY1) {
+          HZ = haze(a.Z0, a.Z0 - cam.z);
+          quad(tx, [a.s * xl + a.e, a.y, a.s * xr + a.e, a.y, b.s * xr + b.e, b.y, b.s * xl + b.e, b.y], [0, (y0 - ob.by) / ob.bh, 1, (y1 - ob.by) / ob.bh]);
+        }
+        if (a.y > VY1) break;
+        a = b;
+      }
+      HZ = NOHAZE;
+    }
+
+    // ── horizontal planes ────────────────────────────────────────────────
+    // A plane lies flat — a floor, a pier, a table top, a chessboard, a patch of water. The
+    // artist paints it from above, in metres, origin at its centre (x to the right, y toward
+    // the viewer); it lies `distance` m away (its centre), at `elevation` m, `width` × `depth` m,
+    // turned `rotation` degrees about the vertical. It is projected truly for wherever the
+    // camera is: drawn as a grid of small cells, each from its own projected corners, with the
+    // haze of its own distance. It is drawn at its far edge, before whatever stands on it.
+    // World units here are eye heights, as everywhere in the camera: a point (X, Y, Z) is seen
+    // at x = W/2 + H·(X − cam.x)/(Z − cam.z), y = yh·H + H·(1 − Y)/(Z − cam.z) − cam.y·H.
+    // Live elements: repainted every frame if their code read the time as it was painted; if it
+    // read only the scene's state (e.state, e.was), when the state changed — or when seen at a scale
+    // the old painting would blur. What it reads is looked at again at every repaint.
+    function liveOf(o, frames, tex) {
+      const read = I.READS.get(o) || {}, timed = frames > 1 || read.time;
+      return timed || read.state ? { canvas: I.layer(1, 1), tex: tex(I.layer(1, 1)), stateOnly: !timed, frames, lights: [] } : null;
+    }
+    // stale: painted at another state, or at a scale the painting would blur, or not over all of `need`
+    // (painted this frame already — an element that reads it got it painted first — it is not)
+    function stale(live, k, need) {
+      const f0 = live.k ? k / live.k : 0;
+      if (live.frame === frameNo && f0 > 0.83 && f0 < 1.2 && live.r && covers(live.r, need)) return false;
+      if (!live.stateOnly) return true;
+      const f = live.k ? k / live.k : 0;
+      return live.ver !== I.STATE.ver || !(f > 0.83 && f < 1.2) || !live.r || !covers(live.r, need);
+    }
+    // repaints the region r of a live element (all of it, or what is on screen close up)
+    function repaint(ob, k, t, r) {
+      const p = paintObject(ob.o, r.x, r.y, r.w, r.h, k, t, ob.live.canvas);
+      ob.live.r = r; ob.live.frame = frameNo;
+      flush(); // quads already batched must be drawn with their own texture first
+      gl.bindTexture(gl.TEXTURE_2D, ob.live.tex);
+      gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, p.canvas);
+      curTex = null;
+      ob.live.ver = I.STATE.ver; ob.live.k = k;
+      ob.live.stateOnly = !(ob.live.frames > 1 || I.READS.get(ob.o)?.time);
+      ob.live.lights = p.lights.map(l => ({ x: l.x, y: l.y, r: l.r, c: col(l.col), a: l.a, dot: l.dot, flicker: l.flicker }));
+    }
+    const PLANE_TEX = 2048;
+    function planeOf(o0, dz, tex) {
+      const E = I.EYE, w = Math.max(0.05, o0.width || 4), d = Math.max(0.05, o0.depth || 4);
+      const at = dz.objectAt(o0), Zc = at.Z, Xc = at.X, rot = (o0.rotation || 0) * Math.PI / 180;
+      // painted as a flat (sky-like) element: code units are metres, 1 m = H px before scaling
+      const o = { ...o0, sky: true, plane: true };
+      const k = PLANE_TEX / (Math.max(w, d) * H), bx = -w / 2 * H, by = -d / 2 * H, bw = w * H, bh = d * H;
+      const r0 = paintObject(o, bx, by, bw, bh, k, 0);
+      const live = liveOf(o, 0, tex);
+      const c = Math.abs(Math.cos(rot)), s = Math.abs(Math.sin(rot));
+      return {
+        o, plane: { Xc, Y: (o0.elevation || 0) / E, Zc, w: w / E, d: d / E, cos: Math.cos(rot), sin: Math.sin(rot) },
+        Z: Zc + (d * c + w * s) / 2 / E, bx, by, bw, bh, k, tex: tex(r0.canvas), frames: [], lights: [],
+        live,
+      };
+    }
+    // A flat piece of the world drawn truly in perspective: world(f, g) → [X, Y, Z] (eye heights)
+    // for the point (f, g) of its texture, both 0…1. Drawn as C × R cells; a cell close to the eye
+    // (nearer than it is big) is split finer, and one partly behind the eye is cut at the near
+    // plane, not dropped — a floor reaches right to your feet. hazeOf(D): the haze D away.
+    const NEAR = 0.06;
+    const eyeOf = (cam, X, Y, Z) => {
+      const rx = X - cam.x, rz = Z - cam.z, c = Math.cos(cam.yaw || 0), s = Math.sin(cam.yaw || 0);
+      return [rx * c - rz * s, (cam.h ?? 1) - Y, rx * s + rz * c];
+    };
+    function surface(cam, tex, world, C, R, hazeOf) {
+      const cell = (f0, g0, f1, g1, depth) => {
+        let poly = [[f0, g0], [f1, g0], [f1, g1], [f0, g1]].map(([f, g]) => ({ e: eyeOf(cam, ...world(f, g)), f, g }));
+        const zs = poly.map(k => k.e[2]);
+        if (Math.max(...zs) < NEAR) return;
+        const size = Math.hypot(poly[0].e[0] - poly[2].e[0], poly[0].e[1] - poly[2].e[1], poly[0].e[2] - poly[2].e[2]);
+        if (depth < 4 && Math.min(...zs) < size) {
+          const fm = (f0 + f1) / 2, gm = (g0 + g1) / 2;
+          cell(f0, g0, fm, gm, depth + 1); cell(fm, g0, f1, gm, depth + 1); cell(f0, gm, fm, g1, depth + 1); cell(fm, gm, f1, g1, depth + 1);
+          return;
+        }
+        if (Math.min(...zs) < NEAR) {
+          const cut = [];
+          for (let i = 0; i < poly.length; i++) {
+            const a = poly[i], b = poly[(i + 1) % poly.length], ain = a.e[2] >= NEAR, bin = b.e[2] >= NEAR;
+            if (ain) cut.push(a);
+            if (ain !== bin) {
+              const k = (NEAR - a.e[2]) / (b.e[2] - a.e[2]);
+              cut.push({ e: a.e.map((v, j) => v + (b.e[j] - v) * k), f: a.f + (b.f - a.f) * k, g: a.g + (b.g - a.g) * k });
+            }
+          }
+          poly = cut;
+          if (poly.length < 3) return;
+        }
+        const pt = poly.map(k => [W / 2 + H * k.e[0] / k.e[2], YH * H + H * k.e[1] / k.e[2] - cam.y * H, k.f, k.g]);
+        const xs = pt.map(q => q[0]), ys = pt.map(q => q[1]);
+        if (Math.max(...xs) < VX0 || Math.min(...xs) > VX1 || Math.max(...ys) < VY0 || Math.min(...ys) > VY1) return;
+        HZ = hazeOf(poly.reduce((d, k) => d + k.e[2], 0) / poly.length);
+        if (pt.length === 3) quadAt(tex, pt[0], pt[1], pt[2], pt[2]);
+        else quadAt(tex, pt[0], pt[1], pt[2], pt[3]);
+        if (pt.length === 5) quadAt(tex, pt[0], pt[3], pt[4], pt[4]);
+      };
+      for (let i = 0; i < R; i++) for (let j = 0; j < C; j++) cell(j / C, i / R, (j + 1) / C, (i + 1) / R, 0);
+      HZ = NOHAZE;
+    }
+
+    function drawPlane(ob, cam, t) {
+      let tx = ob.tex;
+      if (ob.live) {
+        const whole = { x: ob.bx, y: ob.by, w: ob.bw, h: ob.bh }, k = Math.min(ob.k, 1024 / Math.max(ob.bw, ob.bh));
+        if (stale(ob.live, k, whole)) repaint(ob, k, t, whole);
+        tx = ob.live.tex;
+      }
+      // local (u across, v toward the viewer, from its centre); painted without haze (seen from
+      // above): all of it is the air at its own distance
+      const P = ob.plane;
+      surface(cam, tx, (f, g) => {
+        const u = -P.w / 2 + P.w * f, v = -P.d / 2 + P.d * g;
+        return [P.Xc + u * P.cos + v * P.sin, P.Y, P.Zc - v * P.cos + u * P.sin];
+      }, 24, 48, D => { const h = hz(D); return [1 - h, h]; });
+    }
+
+    // the texture an element is shown with now: its live painting (repainted when due), else its
+    // frame of the loop — the sharp close-up when that covers what is seen of it
+    function textureOf(ob, m, t) {
+      const n = ob.frames.length, fi = n > 1 ? Math.floor((((t / ob.period) % 1) + 1) % 1 * n) % n : 0, whole = { x: ob.bx, y: ob.by, w: ob.bw, h: ob.bh };
+      const seen = ob.live && m ? intersect(whole, visible(m)) : null;
+      if (ob.live && (!m || seen)) {
+        // close up only what is on screen (and a margin, so a small move needn't repaint) is painted:
+        // as sharp as it is seen
+        const need = seen || whole;
+        const r = seen ? intersect(whole, { x: seen.x - seen.w * 0.15, y: seen.y - seen.h * 0.15, w: seen.w * 1.3, h: seen.h * 1.3 }) : whole;
+        const k = liveScale(r, m ? m[0] : 1);
+        if (stale(ob.live, k, need)) repaint(ob, k, t, r);
+        return { tx: ob.live.tex, r: ob.live.r, lights: ob.live.lights };
+      }
+      if (ob.live) {
+        // out of sight: painted all the same, coarsely, so its lights are where they are now (a
+        // lantern carried off-screen still lights the edge it is behind)
+        const k = Math.min(LIVE_AWAY, liveScale(whole, 1));
+        if (stale(ob.live, k, whole)) repaint(ob, k, t, whole);
+        return { tx: ob.live.tex, r: ob.live.r, lights: ob.live.lights };
+      }
+      const det = ob.detail, onScreen = det && m && intersect(whole, visible(m));
+      if (det && m && (!onScreen || covers(det.region, onScreen))) return { tx: det.frames[fi], r: det.region, lights: ob.lights };
+      return { tx: ob.frames[fi], r: whole, lights: ob.lights };
+    }
+
+    function drawObjectAt(ob, cam, t) {
+      if (ob.plane) { drawPlane(ob, cam, t); return; }
+      if (ob.ground) { drawGround(ob, cam, t); return; }
+      if (ROUND && ob.o.sky) { drawSkyAround(ob, cam, t); return; }
+      if (ROUND && typeof ob.o.facing === 'number') { drawCard(ob, cam, t); return; }
+      const at = matOf(ob, cam);
+      if (!at) return;
+      const fade = I.clamp((at.D - 0.3) / 0.6, 0, 1);
+      if (fade <= 0) return;
+      const { o, x, y, s } = ob;
+      // a platformer's hero: moved and turned from where it is painted
+      const m = cam.hero && o.id === cam.hero.id ? mul(at.m, I.heroMatrix(cam.hero, x, s / (o.height || 2))) : at.m;
+      if (o.kind === 'bird') {
+        // across the widest frame
+        const span = I.WIDEST * H + 4 * s, bx = ((x + t * s * 1.5 * (o.flip ? -1 : 1)) % span + span) % span + (SW - I.WIDEST * H) / 2 - 2 * s;
+        const by = y + Math.sin(t * 0.7 + x) * s * 0.4;
+        // wings flap by squashing the painted bird vertically around its body
+        rect(ob.tex, mul(m, [1, 0, 0, 0.3 + 0.7 * Math.sin(t * 8 + x), bx, by]), -ob.w / 2, -ob.h * 0.58, ob.w, ob.h, WHITE, fade);
+        return;
+      }
+      // gentle per-kind motion, applied to the pre-painted object around its base
+      let a = ID;
+      if (o.kind === 'tree') a = around(x, y, Math.sin(t * 0.8 + x) * 0.015, 1, 1);
+      else if (o.kind === 'flower') a = around(x, y, Math.sin(t * 1.4 + x) * 0.06, 1, 1);
+      else if (o.kind === 'lantern') a = around(x, y - s * 0.6, Math.sin(t * 1.2 + x) * 0.12, 1, 1);
+      else if (o.kind === 'boat') a = around(x, y, 0, 1, 1, 0, Math.sin(t * 1.1 + x) * s * 0.03);
+      else if (o.kind === 'figure') a = around(x, y, 0, 1, 1 + Math.sin(t * 1.3) * 0.008);
+      else if ((o.kind === 'custom' || !o.kind) && (o.sway || o.bob)) {
+        // custom motion hints: sway (degrees, about the base), bob (metres, up and down)
+        const ppm = s / (o.height || 2);
+        a = around(x, y, Math.sin(t * 0.9 + x) * (o.sway || 0) * Math.PI / 180, 1, 1, 0, Math.sin(t * 1.1 + x) * (o.bob || 0) * ppm);
+      }
+      // the elements its code reads (`after`: where another figure's hand is now, through a module)
+      // are painted first this frame
+      for (const id of Array.isArray(o.after) ? o.after : []) {
+        const other = BYID.get(id), oat = other?.live && matOf(other, cam);
+        if (oat) textureOf(other, oat.m, t);
+      }
+      const ma = a === ID ? m : mul(m, a), { tx, r, lights } = textureOf(ob, m, t);
+      // on water: a mirrored, fainter copy about the water surface under it (for something
+      // raised above the ground, e.g. sitting on a pier, that is below its base)
+      if (ob.reflect) {
+        const gy = isFinite(ob.Z) ? Math.max(y, (YH + 1 / ob.Z) * H) : YH * H; // sky: about the horizon
+        rect(tx, mul(ma, [1, 0, 0, -1, 0, 2 * gy]), r.x, r.y, r.w, r.h, WHITE, 0.3 * fade);
+      }
+      rect(tx, ma, r.x, r.y, r.w, r.h, WHITE, fade);
+      for (const lt of lights) {
+        const fl = lt.fire ? 0.8 + 0.2 * Math.sin(t * 11)
+          : lt.flicker != null ? 1 - lt.flicker * 0.5 * (0.5 + 0.5 * Math.sin(t * 9 + lt.x) * Math.sin(t * 5.3 + lt.y))
+          : 0.9 + 0.1 * Math.sin(t * 7 + x) * Math.sin(t * 3.1 + y);
+        const [lx, ly] = apply(a, lt.x, lt.y);
+        sprite(T.glow, m, lx, ly, 2 * lt.r, 2 * lt.r, 0, lt.c, lt.a * 0.6 * fl * fade, true);
+        if (lt.dot) sprite(T.glow, m, lx, ly, 6 * lt.dot, 6 * lt.dot, 0, DOT, 0.9 * fade, true);
+      }
+        }
+
+    // Looking around, an element with `facing` stands turned its own way (a wall, a door, a
+    // cupboard): its painting is a vertical card in the world — the painted point (px, py) is
+    // (px − x, py − y)/ppm metres from its anchor along the card and down — projected truly,
+    // as a grid of small cells like a plane, each with the haze of its own distance.
+    function drawCard(ob, cam, t) {
+      const p = ob.p, f = ob.o.facing * Math.PI / 180, ppm = H / p.Zp; // painted px per eye height
+      const tx_ = -Math.cos(f), tz = Math.sin(f); // along the card, to the right of one facing it
+      const { tx, r, lights } = textureOf(ob, null, t);
+      const world = (px, py) => { const u = (px - ob.x) / ppm, v = (py - ob.y) / ppm; return [p.X + u * tx_, p.Y - v, p.Z + u * tz]; };
+      surface(cam, tx, (f, g) => world(r.x + r.w * f, r.y + r.h * g), 16, 10, D => haze(p.Zp, D));
+      const at = (px, py) => I.project(cam, ...world(px, py), W, H, YH);
+      for (const lt of lights) {
+        const q = at(lt.x, lt.y);
+        if (!q) continue;
+        const k = p.Zp / q[2], fl = lt.flicker != null ? 1 - lt.flicker * 0.5 * (0.5 + 0.5 * Math.sin(t * 9 + lt.x) * Math.sin(t * 5.3 + lt.y)) : 1;
+        sprite(T.glow, ID, q[0], q[1], 2 * lt.r * k, 2 * lt.r * k, 0, lt.c, lt.a * 0.6 * fl, true);
+      }
+    }
+    // The sky all around: its painting is the full circle (2π stage heights, straight ahead in
+    // the middle); each narrow column of the frame shows the bearing it looks at.
+    function drawSkyAround(ob, cam, t) {
+      const { tx } = textureOf(ob, null, t), C = 48, top = ob.by - cam.y * H;
+      for (let i = 0; i < C; i++) {
+        const xa = VX0 + (VX1 - VX0) * i / C, xb = VX0 + (VX1 - VX0) * (i + 1) / C;
+        const ua = (cam.yaw + Math.atan((xa - W / 2) / H)) / I.TAU + 0.5, ub = (cam.yaw + Math.atan((xb - W / 2) / H)) / I.TAU + 0.5;
+        const base = Math.floor(ua), u0 = ua - base, u1 = ub - base;
+        if (u1 <= 1) { rect(tx, ID, xa, top, xb - xa, ob.bh, WHITE, 1, false, [u0, 0, u1, 1]); continue; }
+        // the column crosses the seam behind you: both sides of it
+        const xm = xa + (xb - xa) * (1 - u0) / (u1 - u0);
+        rect(tx, ID, xa, top, xm - xa, ob.bh, WHITE, 1, false, [u0, 0, 1, 1]);
+        rect(tx, ID, xm, top, xb - xm, ob.bh, WHITE, 1, false, [0, 0, u1 - 1, 1]);
+      }
+    }
+
+    // An element that moves through the world (its `place`: {across, distance, elevation, x} — the
+    // names of numbers in the state, metres): put where the state says now — its size, its depth,
+    // its haze and what it is drawn in front of or behind follow.
+    function placeMoving(S) {
+      const v = I.STATE.values;
+      let moved = false;
+      for (const ob of S.objects) {
+        if (!ob.from) continue;
+        const o1 = { ...ob.from };
+        for (const [f, k] of Object.entries(ob.from.place)) if (typeof k === 'string' && typeof v[k] === 'number') o1[f] = v[k];
+        const key = `${o1.x}|${o1.across}|${o1.distance}|${o1.elevation}`;
+        if (key === ob.placed) continue;
+        ob.placed = key; moved = true;
+        const o = { ...ob.o, x: S.dz.objectX(o1), y: S.dz.objectY(o1), size: S.dz.objectSize(o1) };
+        Object.assign(ob, { o, Z: S.dz.objectZ(o1), x: o.x * SW, y: o.y * H, s: Math.max(2, o.size * H) }, I.objectBox(o, SW, H));
+        if (ROUND && !o.sky) ob.p = S.dz.objectAt(o1);
+      }
+      if (!moved) return;
+      for (const item of S.order) if (item.ob) item.Z = item.ob.Z;
+      S.order.sort((a, b) => (b.Z - a.Z) || 0);
+    }
+
+    function frame(S, spec, cam, t, dt, settled, goal) {
+      frameNo++;
+      BYID = S.byId ??= new Map(S.objects.filter(x => x.o.id != null).map(x => [x.o.id, x]));
+      placeMoving(S);
+      gl.bindFramebuffer(gl.FRAMEBUFFER, S.scene.fbo);
+      gl.viewport(0, 0, CW, CH);
+      const mSky = camMatrix(cam, Infinity);
+      gl.clearColor(0, 0, 0, 0); // what nothing paints stays clear: the final pass fills it
+      gl.clear(gl.COLOR_BUFFER_BIT);
+      if (S.sky) rect(S.sky, mSky, S.x0, -H, S.span, 3 * H, WHITE, 1, false, [0, -1, 1, 2]);
+
+      if (ROUND) drawAround(S, cam, t);
+      else drawAhead(S, spec, cam, t, mSky);
+      particlesAndPost(S, spec, cam, t, dt, goal);
+    }
+
+    // looking around: the sky, then what stands about, far to near as seen now — planes by the
+    // farthest reach of them
+    function drawAround(S, cam, t) {
+      for (const ob of S.objects) if (ob.o.sky) drawObjectAt(ob, cam, t);
+      const items = [];
+      for (const ob of S.objects) {
+        if (ob.o.sky || ob.ground) continue;
+        if (ob.plane) {
+          const P = ob.plane;
+          items.push({ ob, d: Math.hypot(P.Xc - cam.x, P.Zc - cam.z) + Math.max(P.w, P.d) / 2 });
+        } else {
+          // a card turned its own way (a wall) by its farthest reach too: what stands in front of
+          // it is drawn after it
+          const half = typeof ob.o.facing === 'number' ? ob.bw / 2 / (H / ob.p.Zp) : 0;
+          items.push({ ob, d: Math.hypot(ob.p.X - cam.x, ob.p.Z - cam.z) + half });
+        }
+      }
+      items.sort((a, b) => b.d - a.d);
+      for (const { ob } of items) {
+        HZ = ob.plane ? NOHAZE : haze(ob.p.Zp, Math.hypot(ob.p.X - cam.x, ob.p.Z - cam.z));
+        drawObjectAt(ob, cam, t);
+        HZ = NOHAZE;
+      }
+    }
+
+    function drawAhead(S, spec, cam, t, mSky) {
+      if (S.stars.length) {
+        const sc = col(spec.stars?.color || '#ffffff');
+        for (const s of S.stars) sprite(T.dot, mSky, s.x, s.y, 2.6 * s.r, 2.6 * s.r, 0, sc, 0.25 + 0.75 * Math.pow(0.5 + 0.5 * Math.sin(t * s.f + s.p), 2), false);
+      }
+      for (const c of S.celestials) rect(c.tex, mSky, c.x, c.y, c.size, c.size);
+
+      for (const item of S.order) {
+        if (item.ob) { HZ = isFinite(item.Z) ? haze(item.Z, item.Z - cam.z) : NOHAZE; drawObjectAt(item.ob, cam, t); HZ = NOHAZE; continue; }
+        const l = item.l, L = l.L;
+        if (l.Z - cam.z < 0.05) continue; // walked past it
+        const m = camMatrix(cam, l.Z);
+        if (L.kind === 'water') {
+          drawWater(S, l, Math.round(m[5] + m[3] * L.y * H), t);
+          continue;
+        }
+        if (l.tex) {
+          HZ = haze(l.Z, l.Z - cam.z);
+          drawLayer(l, m, cam);
+          for (const w of l.windows) if (Math.sin(t * 0.07 + w.p) > -0.85) rect(T.white, m, w.x, w.y, w.w, w.h, WINDOW, 0.55 + 0.25 * Math.sin(w.p));
+          HZ = NOHAZE;
+        } else if (L.kind === 'clouds') {
+          for (const c of l.clouds) rect(c.tex, m, wrapX(c.x + t * c.sp * (L.drift ?? 0.3) * 3, S, c.w), c.y - c.h / 2, c.w, c.h);
+        } else if (L.kind === 'fog') {
+          for (const b of l.blobs) {
+            const cx = wrapX(b.x + t * b.sp * (L.drift ?? 0.3) * 2, S, 2 * b.rx) + b.rx;
+            rect(T.glow, m, cx - b.rx, L.y * H + b.dy - b.ry, 2 * b.rx, 2 * b.ry, l.c, b.a * 2.2);
+          }
+        }
+      }
+
+    }
+
+    function particlesAndPost(S, spec, cam, t, dt, goal) {
+      const u = S.u, PM = [1, 0, 0, 1, VX0, VY0]; // particles live in the canvas's pixels
+      for (const { p, c, list } of S.particles) {
+        const wind = (p.wind ?? 0) * 60 * u;
+        for (const q of list) {
+          I.moveParticle(p.kind, q, CW, CH, t, dt, u, wind);
+          const r = (1 + q.z * 3) * u;
+          switch (p.kind) {
+            case 'rain': { const len = (10 + q.z * 16) * u; rect(T.streak, PM, q.x - Math.max(1, u), q.y, 2 * Math.max(1, u), len, c, 0.28); break; }
+            case 'fireflies': sprite(T.glow, PM, q.x, q.y, 36 * u, 36 * u, 0, c, 0.6 * (0.25 + 0.75 * Math.pow(0.5 + 0.5 * Math.sin(t * 1.6 + q.ph * 3), 3)), true); break;
+            case 'embers': sprite(T.glow, PM, q.x, q.y, 16 * u, 16 * u, 0, c, 0.6 * (0.5 + 0.5 * Math.sin(t * 5 + q.ph)), true); break;
+            case 'petals': case 'leaves': {
+              const k = p.kind === 'leaves' ? 2.4 : 1.6;
+              rect(T.ellipse, mul(PM, around(q.x, q.y, t * (0.5 + q.z) + q.ph, 1, Math.abs(Math.sin(t * 2 + q.ph)) * 0.8 + 0.2)), q.x - r * k, q.y - r, 2 * r * k, 2 * r, c, 0.85);
+              break;
+            }
+            case 'bubbles': sprite(T.ring, PM, q.x, q.y, 3.4 * r, 3.4 * r, 0, c, 0.5, false); break;
+            case 'dust': sprite(T.dot, PM, q.x, q.y, r * 1.2, r * 1.2, 0, c, 0.35, false); break;
+            default: sprite(T.dot, PM, q.x, q.y, r * 2.4, r * 2.4, 0, c, 0.3 + q.z * 0.55, false);
+          }
+        }
+      }
+      flush();
+
+      // final pass to the screen, the whole canvas: the frame at its place in it (S.out)
+      gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+      gl.viewport(0, 0, CW, CH);
+      const lt = spec.light || {};
+      gl.useProgram(pprog);
+      gl.activeTexture(gl.TEXTURE0);
+      gl.bindTexture(gl.TEXTURE_2D, S.scene.tex);
+      gl.uniform1i(pu.scene, 0);
+      gl.uniform2f(pu.res, W, H);
+      gl.uniform2f(pu.at, OX, CH - OY - H);
+      gl.uniform2f(pu.canvas, CW, CH);
+      gl.uniform2f(pu.off, OX, OY);
+      gl.uniform3f(pu.tint, ...(lt.tint ? col(lt.tint) : WHITE));
+      gl.uniform1f(pu.tintA, lt.tint ? I.clamp(lt.tintStrength ?? 0, 0, 0.5) : 0);
+      gl.uniform1f(pu.vig, 0.75 * I.clamp(lt.vignette ?? 0.5, 0, 1));
+      gl.uniform1f(pu.grain, 0.1 * I.clamp(lt.grain ?? 0.5, 0, 1));
+      gl.uniform1f(pu.seed, Math.floor(Math.random() * 4096));
+      // a film's cut: the frame fades to a colour (state: fade 0…1, fade_color — black by default)
+      const sv = I.STATE.values;
+      gl.uniform1f(pu.fade, typeof sv.fade === 'number' ? I.clamp(sv.fade, 0, 1) : 0);
+      gl.uniform3f(pu.fadeCol, ...(typeof sv.fade_color === 'string' ? col(sv.fade_color) : [0, 0, 0]));
+      band(pprog, VY0, VY1);
+
+      refine(S, cam, goal || cam);
+      evict(S);
+    }
+
+    return { name: 'webgl', fpsIdle: 60, pixelBudget: Infinity, resMax: 2, build, frame };
+  }
+
+  return { create };
+})();