@moood/render 0.1.3 → 0.1.5

package/engine/gl.js

@@ -7,32 +7,120 @@
 // (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
+  const QUADS = 8192, STRIDE = 12; // per vertex: x y u v r g b a, haze k b, lit, depth
 
   // 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;
+  in vec2 a_pos; in vec2 a_uv; in vec4 a_col; in vec2 a_haze; in vec2 a_lit;
   uniform vec2 u_canvas, u_off;
-  out vec2 v_uv; out vec4 v_col; out vec2 v_haze;
+  out vec2 v_uv; out vec4 v_col; out vec2 v_haze; out vec2 v_lit;
   void main() {
-    v_uv = a_uv; v_col = a_col; v_haze = a_haze;
+    v_uv = a_uv; v_col = a_col; v_haze = a_haze; v_lit = a_lit;
     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);
   }`;
+  // A lit scene (engine.js: lookOf) draws into three targets: the colour; what is lit and how far
+  // it is (lit·a, lit·depth·a, 0, a — composed like a colour, so the nearest painting wins); and the
+  // glows (additive quads: light in the air, covered by what is drawn in front of them later). The
+  // final pass lays the light on the colour by the depth, then adds the glows.
   const FS = `#version 300 es
   precision mediump float;
-  in vec2 v_uv; in vec4 v_col; in vec2 v_haze;
+  in vec2 v_uv; in vec4 v_col; in vec2 v_haze; in vec2 v_lit;
   uniform sampler2D u_tex;
   uniform vec3 u_fog;
-  out vec4 o;
+  layout(location = 0) out vec4 o;
+  #ifdef LIT
+  layout(location = 1) out vec4 o_lit;
+  layout(location = 2) out vec4 o_glow;
+  #endif
   // aerial perspective (see haze()): colour·k + fog·b, premultiplied
   void main() {
-    o = texture(u_tex, v_uv) * v_col;
+    vec4 c = 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);
+    c.rgb = clamp(c.rgb * v_haze.x + u_fog * v_haze.y * c.a, c.rgb * 0.6, c.a > 0.0 ? vec3(c.a) : c.rgb);
+    #ifdef LIT
+    if (v_col.a > 0.0) { o = c; o_lit = vec4(v_lit.x * c.a, v_lit.x * v_lit.y * c.a, 0.0, c.a); o_glow = vec4(0.0, 0.0, 0.0, c.a); }
+    else { o = vec4(0.0); o_lit = vec4(0.0); o_glow = vec4(c.rgb, 0.0); }
+    #else
+    o = c;
+    #endif
+  }`;
+  // the same, cut by a mask (an element's `clip`): what other elements painted this frame, in a
+  // target as big as the canvas — seen inside it (u_inside 1) or outside it (0)
+  const CFS = FS.replace('uniform vec3 u_fog;', 'uniform vec3 u_fog;\n  uniform sampler2D u_mask;\n  uniform highp vec2 u_canvas;\n  uniform float u_inside;')
+    .replace(/}\s*$/, '  float m = texture(u_mask, gl_FragCoord.xy / u_canvas).a, k = mix(1.0 - m, m, u_inside);\n    o *= k;\n    #ifdef LIT\n    o_lit *= k; o_glow *= k;\n    #endif\n  }');
+  // A reflecting plane's mirror pass (mirrors): what is above the plane drawn where its mirror image
+  // is seen, into three targets like a lit scene's — the colour; [height above the plane (eye heights),
+  // px from where it meets it] (v_lit in this pass, premultiplied); the glows. Below the plane: nothing.
+  // (Its lit variant is drawn: litOf.)
+  const MFS = FS.replace('o_lit = vec4(v_lit.x * c.a, v_lit.x * v_lit.y * c.a, 0.0, c.a);', 'o_lit = vec4(v_lit * c.a, 0.0, c.a);')
+    .replace('void main() {', 'void main() {\n    if (v_lit.y < 0.0) discard;');
+  // ... laid on the plane (drawn as its cells): only where it is painted (u_tex), u_strength of it,
+  // fading out over u_fade above the plane, blurred the more the farther above it (u_blur per px from
+  // where it meets the plane: the mirror's mip levels). The height of what is mirrored where nothing
+  // is: the average around.
+  const RFS = `#version 300 es
+  precision highp float;
+  in vec2 v_uv;
+  uniform sampler2D u_tex, u_mc, u_mh, u_mg;
+  uniform vec2 u_canvas;
+  uniform float u_strength, u_fade, u_blur;
+  layout(location = 0) out vec4 o;
+  #ifdef LIT
+  layout(location = 1) out vec4 o_lit;
+  layout(location = 2) out vec4 o_glow;
+  #endif
+  void main() {
+    vec2 q = gl_FragCoord.xy / u_canvas;
+    vec4 hc = textureLod(u_mh, q, 0.0), hb = textureLod(u_mh, q, 4.0);
+    vec2 hd = hc.a > 0.5 ? hc.rg / hc.a : hb.rg / max(hb.a, 1e-4);
+    float lod = min(5.0, log2(max(1.0, u_blur * hd.y * 0.5)));
+    vec2 d = exp2(lod) / u_canvas;
+    vec4 c = vec4(0.0); vec3 gw = vec3(0.0);
+    for (int i = 0; i < 4; i++) {
+      vec2 p = q + d * vec2(i == 0 || i == 3 ? -1.0 : 1.0, i < 2 ? -1.0 : 1.0);
+      c += textureLod(u_mc, p, lod); gw += textureLod(u_mg, p, lod).rgb;
+    }
+    float f = u_fade > 0.0 ? 1.0 - smoothstep(0.0, u_fade, hd.x) : 1.0, k = 0.25 * u_strength * f * texture(u_tex, v_uv).a;
+    #ifdef LIT
+    o = c * k; o_lit = vec4(0.0); o_glow = vec4(gw * k, 0.0);
+    #else
+    o = vec4((c.rgb + gw) * k, c.a * k);
+    #endif
+  }`;
+  // A plane's pool of light (`lit`: the scene's point lights where the scene is not lit), drawn as its
+  // cells, added: its painting (u_tex) lit that much more by each light by its distance — a point of it
+  // in the world from its uv (the plane: u_pc its centre, u_pa its size and turn)
+  const LFS = `#version 300 es
+  precision highp float;
+  in vec2 v_uv; in vec2 v_haze;
+  uniform sampler2D u_tex;
+  uniform vec3 u_pc;
+  uniform vec4 u_pa;
+  uniform int u_n;
+  uniform vec4 u_lp[8];
+  uniform vec3 u_lc[8];
+  layout(location = 0) out vec4 o;
+  #ifdef LIT
+  layout(location = 1) out vec4 o_lit;
+  layout(location = 2) out vec4 o_glow;
+  #endif
+  void main() {
+    vec4 c = texture(u_tex, v_uv);
+    float u = (v_uv.x - 0.5) * u_pa.x, v = (v_uv.y - 0.5) * u_pa.y;
+    vec3 P = vec3(u_pc.x + u * u_pa.z + v * u_pa.w, u_pc.y, u_pc.z - v * u_pa.z + u * u_pa.w), L = vec3(0.0);
+    for (int i = 0; i < 8; i++) {
+      if (i >= u_n) break;
+      float x = length(u_lp[i].xyz - P) / u_lp[i].w;
+      if (x < 1.0) L += u_lc[i] * (1.0 - x * x) * (1.0 - x * x);
+    }
+    o = vec4((c.rgb + 0.12 * c.a) * L * v_haze.x, 0.0);
+    #ifdef LIT
+    o_lit = vec4(0.0); o_glow = vec4(0.0);
+    #endif
   }`;
   // full-screen passes: a triangle pair in pixel coordinates
   const QVS = `#version 300 es
@@ -45,7 +133,11 @@ const MooodGL = (() => {
   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;
+  layout(location = 0) out vec4 o;
+  #ifdef LIT
+  layout(location = 1) out vec4 o_lit;
+  layout(location = 2) out vec4 o_glow;
+  #endif
   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);
@@ -55,29 +147,73 @@ const MooodGL = (() => {
     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);
+    #ifdef LIT
+    // a row h below the horizon is about 1/h eye heights away
+    o_lit = vec4(1.0, clamp(u_res.y / max(1.0, py - u_wy), 0.3, 150.0), 0.0, 1.0);
+    o_glow = vec4(0.0);
+    #endif
   }`;
-  // Final pass: soft-light tint, vignette, per-pixel film grain (overlay), fresh every frame.
+  // Final pass: soft-light tint, vignette, per-pixel film grain (overlay), fresh every frame; the
+  // scene's brightness and saturation (its look, engine.js: lookOf). A lit scene: first the light
+  // laid on the colour — the ambient, and each point source by how far the painted thing under the
+  // pixel is from it (a source behind it, farther along the gaze, lights it little: a figure before
+  // a lamp is a silhouette, a wall behind the lamp is lit) — then the glows.
+  const LIGHTS = 8;
   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 float u_tintA, u_vig, u_grain, u_seed, u_fade, u_bright, u_sat;
   uniform vec3 u_fadeCol;
+  #ifdef LIT
+  uniform sampler2D u_lit, u_glow;
+  uniform vec3 u_amb;
+  uniform int u_n;
+  uniform vec4 u_lp[${LIGHTS}];   // a point source: where (eye heights), and its reach
+  uniform vec3 u_lc[${LIGHTS}];   // its colour × strength
+  uniform vec4 u_cam;             // the camera: x, z, height, yaw
+  uniform vec2 u_view;            // the gaze lowered (screen heights), the horizon
+  #endif
   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));
   }
+  #ifdef LIT
+  // the light on the painted colour c at frame pixel px (y up), its depth D along the gaze
+  vec3 lit(vec3 c, vec2 px, float D) {
+    float xe = (px.x - u_res.x * 0.5) / u_res.y * D, ye = (u_res.y - px.y) / u_res.y;
+    float cy = cos(u_cam.w), sy = sin(u_cam.w);
+    vec3 P = vec3(u_cam.x + xe * cy + D * sy, u_cam.z - (ye - u_view.y + u_view.x) * D, u_cam.y - xe * sy + D * cy);
+    vec3 L = u_amb;
+    for (int i = 0; i < ${LIGHTS}; i++) {
+      if (i >= u_n) break;
+      vec3 d = u_lp[i].xyz - P;
+      float x = length(d) / u_lp[i].w;
+      if (x >= 1.0) continue;
+      float f = (1.0 - x * x) * (1.0 - x * x);
+      float Dl = (u_lp[i].x - u_cam.x) * sy + (u_lp[i].z - u_cam.y) * cy;
+      L += u_lc[i] * f * mix(1.0, 0.3, smoothstep(0.02, 0.3, Dl - D));
+    }
+    return c * L;
+  }
+  #endif
   // 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;
+    #ifdef LIT
+    vec4 l = texture(u_lit, q / u_canvas);
+    if (l.r > 0.002) s.rgb = mix(s.rgb, lit(s.rgb, px, l.g / l.r), min(1.0, l.r / max(s.a, 0.002)));
+    s.rgb += texture(u_glow, q / u_canvas).rgb;
+    #endif
     vec3 c = s.rgb + (1.0 - s.a) * edge;
     c = mix(c, softLight(c, u_tint), u_tintA);
+    c = mix(vec3(dot(c, vec3(0.299, 0.587, 0.114))), c, u_sat) * u_bright;
     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);
@@ -86,6 +222,32 @@ const MooodGL = (() => {
     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);
   }`;
+  // A shadow: the caster's painting, black, laid where it falls (on a floor, on a wall) — through
+  // the alpha of what it falls on (u_mask; outside it, nothing), as dark as v_a.
+  const SVS = `#version 300 es
+  in vec2 a_pos; in vec2 a_uv; in vec2 a_uv2; in float a_a; in vec2 a_blur;
+  uniform vec2 u_canvas, u_off;
+  out vec2 v_uv; out vec2 v_uv2; out float v_a; out vec2 v_blur;
+  void main() {
+    v_uv = a_uv; v_uv2 = a_uv2; v_a = a_a; v_blur = a_blur;
+    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 SFS = `#version 300 es
+  precision mediump float;
+  in vec2 v_uv; in vec2 v_uv2; in float v_a; in vec2 v_blur;
+  uniform sampler2D u_tex, u_mask;
+  out vec4 o;
+  void main() {
+    float inside = step(0.0, v_uv2.x) * step(v_uv2.x, 1.0) * step(0.0, v_uv2.y) * step(v_uv2.y, 1.0);
+    // the caster's alpha over a disc as wide as the penumbra (a spiral of taps)
+    float a = 0.0;
+    for (int i = 0; i < 16; i++) {
+      float f = (float(i) + 0.5) / 16.0, t = float(i) * 2.39996;
+      a += texture(u_tex, v_uv + vec2(cos(t), sin(t)) * sqrt(f) * v_blur).a;
+    }
+    o = vec4(0.0, 0.0, 0.0, a / 16.0 * texture(u_mask, v_uv2).a * inside * v_a);
+  }`;
 
   function program(gl, vs, fs) {
     const p = gl.createProgram();
@@ -100,11 +262,17 @@ const MooodGL = (() => {
     gl.bindAttribLocation(p, 1, 'a_uv');
     gl.bindAttribLocation(p, 2, 'a_col');
     gl.bindAttribLocation(p, 3, 'a_haze');
+    gl.bindAttribLocation(p, 4, 'a_lit');
+    gl.bindAttribLocation(p, 2, 'a_uv2');
+    gl.bindAttribLocation(p, 3, 'a_a');
+    gl.bindAttribLocation(p, 4, 'a_blur');
     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)]));
+  // a shader's lit variant (LIT defined)
+  const litOf = src => src.replace('#version 300 es', '#version 300 es\n  #define LIT');
 
   // 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; }
@@ -134,10 +302,30 @@ const MooodGL = (() => {
   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']);
+    // the programs, plain and lit (made when a scene is first lit): { prog, cprog (cut by a mask:
+    // clip), wprog, pprog } and their uniforms; P: the current frame's
+    const programs = lit => {
+      const v = lit ? litOf : s => s, prog = program(gl, VS, v(FS)), cprog = program(gl, VS, v(CFS)), wprog = program(gl, QVS, v(WFS)), pprog = program(gl, QVS, v(PFS));
+      const rprog = program(gl, VS, v(RFS)), lprog = program(gl, VS, v(LFS));
+      return {
+        prog, cprog, wprog, pprog, rprog, lprog,
+        ru: uniforms(gl, rprog, ['canvas', 'off', 'tex', 'fog', 'mc', 'mh', 'mg', 'strength', 'fade', 'blur']),
+        lu: uniforms(gl, lprog, ['canvas', 'off', 'tex', 'fog', 'pc', 'pa', 'n', 'lp', 'lc']),
+        su: uniforms(gl, prog, ['canvas', 'off', 'tex', 'fog']),
+        cu: uniforms(gl, cprog, ['canvas', 'off', 'tex', 'fog', 'mask', 'inside']),
+        wu: uniforms(gl, wprog, ['res', 'canvas', 'off', 'tex', 'wy', 'k', 't', 'speed', 'u', 'col']),
+        pu: uniforms(gl, pprog, ['res', 'at', 'canvas', 'off', 'scene', 'tint', 'tintA', 'vig', 'grain', 'seed', 'fade', 'fadeCol', 'bright', 'sat', 'lit', 'glow', 'amb', 'n', 'lp', 'lc', 'cam', 'view']),
+      };
+    };
+    const PLAIN = programs(false);
+    let LITP = null, P = PLAIN;
+    // a lit scene needs a target it can write depths to (16-bit floats: either extension lets it)
+    const canLight = !!(gl.getExtension('EXT_color_buffer_float') || gl.getExtension('EXT_color_buffer_half_float'));
+    const sprog = program(gl, SVS, SFS), shu = uniforms(gl, sprog, ['canvas', 'off', 'tex', 'mask']);
+    // the mirror pass's program (made when a scene first has a reflecting plane: it needs the depths'
+    // targets too)
+    let MIRP = null;
+    const mirrorProgram = () => { const prog = program(gl, VS, litOf(MFS)); return { prog, su: uniforms(gl, prog, ['canvas', 'off', 'tex', 'fog']) }; };
 
     const data = new Float32Array(QUADS * 4 * STRIDE);
     const vao = gl.createVertexArray();
@@ -153,6 +341,19 @@ const MooodGL = (() => {
     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);
+    gl.enableVertexAttribArray(4); gl.vertexAttribPointer(4, 2, gl.FLOAT, false, STRIDE * 4, 40);
+    // shadows: x y, u v (the caster), u v (what it falls on), alpha, blur (u v) — as triangles
+    const SH_STRIDE = 9, SH_MAX = 6 * 4096;
+    const svao = gl.createVertexArray();
+    gl.bindVertexArray(svao);
+    const svbo = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, svbo);
+    gl.bufferData(gl.ARRAY_BUFFER, SH_MAX * SH_STRIDE * 4, gl.DYNAMIC_DRAW);
+    gl.enableVertexAttribArray(0); gl.vertexAttribPointer(0, 2, gl.FLOAT, false, SH_STRIDE * 4, 0);
+    gl.enableVertexAttribArray(1); gl.vertexAttribPointer(1, 2, gl.FLOAT, false, SH_STRIDE * 4, 8);
+    gl.enableVertexAttribArray(2); gl.vertexAttribPointer(2, 2, gl.FLOAT, false, SH_STRIDE * 4, 16);
+    gl.enableVertexAttribArray(3); gl.vertexAttribPointer(3, 1, gl.FLOAT, false, SH_STRIDE * 4, 24);
+    gl.enableVertexAttribArray(4); gl.vertexAttribPointer(4, 2, gl.FLOAT, false, SH_STRIDE * 4, 28);
     const qvao = gl.createVertexArray();
     gl.bindVertexArray(qvao);
     const qvbo = gl.createBuffer();
@@ -188,7 +389,49 @@ const MooodGL = (() => {
       gl.bindFramebuffer(gl.FRAMEBUFFER, null);
       return { tex, fbo };
     }
-    const dropTarget = r => { gl.deleteTexture(r.tex); gl.deleteFramebuffer(r.fbo); };
+    // a lit scene's target: the colour, what is lit and how far (16-bit floats), the glows — one
+    // framebuffer drawing to all three
+    function litTarget(w, h) {
+      const fbo = gl.createFramebuffer(), texs = [];
+      gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);
+      [gl.RGBA8, gl.RGBA16F, gl.RGBA8].forEach((format, i) => {
+        const tex = gl.createTexture();
+        gl.bindTexture(gl.TEXTURE_2D, tex);
+        gl.texStorage2D(gl.TEXTURE_2D, 1, format, w, h);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, i === 1 ? gl.NEAREST : gl.LINEAR);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, i === 1 ? gl.NEAREST : 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);
+        gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0 + i, gl.TEXTURE_2D, tex, 0);
+        texs.push(tex);
+      });
+      gl.drawBuffers(ALL_BUFFERS);
+      gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+      return { tex: texs[0], lit: texs[1], glow: texs[2], fbo };
+    }
+    // a reflecting plane's mirror (MFS): the colour, [height, px] (16-bit floats), the glows — at half
+    // the canvas's size, with MIRROR_LEVELS mip levels its blur is read from
+    const MIRROR_LEVELS = 6;
+    function mirrorTarget(w, h) {
+      const fbo = gl.createFramebuffer(), texs = [];
+      gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);
+      [gl.RGBA8, gl.RGBA16F, gl.RGBA8].forEach((format, i) => {
+        const tex = gl.createTexture();
+        gl.bindTexture(gl.TEXTURE_2D, tex);
+        gl.texStorage2D(gl.TEXTURE_2D, MIRROR_LEVELS, format, w, h);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_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);
+        gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0 + i, gl.TEXTURE_2D, tex, 0);
+        texs.push(tex);
+      });
+      gl.drawBuffers(ALL_BUFFERS);
+      gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+      return { tex: texs[0], lit: texs[1], glow: texs[2], fbo, w, h };
+    }
+    const ALL_BUFFERS = [gl.COLOR_ATTACHMENT0, gl.COLOR_ATTACHMENT1, gl.COLOR_ATTACHMENT2], COLOUR_ONLY = [gl.COLOR_ATTACHMENT0, gl.NONE, gl.NONE];
+    const dropTarget = r => { for (const t of [r.tex, r.lit, r.glow]) if (t) gl.deleteTexture(t); gl.deleteFramebuffer(r.fbo); };
 
     // textures shared by every scene
     const T = {
@@ -206,32 +449,61 @@ const MooodGL = (() => {
     // 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;
+    // what the quads drawn now are cut by (an element's `clip`): { tex: the mask, inside }, or null
+    let CLIP = null;
     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
+    // HAZE in eye heights: 220 = clear air (~40% haze at 200 m); spec.light.haze 0…1 → 600…25. The
+    // painting holds the scene's own haze (HAZE0, spec.light.haze); its look now (engine.js:
+    // lookOf) may thicken or thin the air (HAZE): what the painting holds is taken out, what the air
+    // holds now put in — in the starting view too.
     const NOHAZE = [1, 0];
-    let HAZE = 220;
+    let HAZE = 220, HAZE0 = 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));
+      const h0 = Math.min(0.85, 1 - Math.exp(-Math.max(0, Z) / HAZE0)), h1 = hz(D), k = Math.min(3, (1 - h1) / (1 - h0));
       return [k, h1 - h0 * k];
     };
+    // A lit scene: is what is drawn now lit by the scene's light, and how far along the gaze it is
+    // (eye heights) — [lit 0|1, depth]; the sky, the glows and inserts are not
+    const UNLIT = [0, 0];
+    let LT = UNLIT;
+    // The mirror pass (mirrors): MIR — the plane it mirrors, its level seen A + B/D down the frame D away
+    // along the gaze; MD — how far what is drawn now is (a vertex given none). A vertex at y, D away, goes
+    // where its mirror image is seen; MH, MP: its height above the plane (eye heights) and px from
+    // where it meets it — what the mirror fades and blurs by (MFS, RFS)
+    let MIR = null, MD = Infinity, MH = 0, MP = 0;
+    const mirrorY = (y, D) => {
+      const g = MIR.A + MIR.B / D;
+      MP = g - y; MH = isFinite(D) ? Math.max(-1e4, Math.min(1e4, MP * D / H)) : Math.sign(MP) * 1e4;
+      return g + MP;
+    };
+    // a pass over a plane's cells with a program of its own (RFS, LFS): { prog, u, set(u), add }
+    let PASS = null;
     function flush() {
       if (!n) return;
-      gl.useProgram(prog);
+      const u = PASS ? PASS.u : CLIP ? P.cu : P.su;
+      gl.useProgram(PASS ? PASS.prog : CLIP ? P.cprog : P.prog);
       gl.bindVertexArray(vao);
-      gl.uniform2f(su.canvas, CW, CH);
-      gl.uniform2f(su.off, OX, OY);
-      gl.uniform3f(su.fog, ...FOG);
+      gl.uniform2f(u.canvas, CW, CH);
+      gl.uniform2f(u.off, OX, OY);
+      gl.uniform3f(u.fog, ...FOG);
+      if (CLIP) {
+        gl.activeTexture(gl.TEXTURE1);
+        gl.bindTexture(gl.TEXTURE_2D, CLIP.tex);
+        gl.uniform1i(u.mask, 1);
+        gl.uniform1f(u.inside, CLIP.inside ? 1 : 0);
+      }
+      if (PASS) PASS.set(u);
       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.uniform1i(u.tex, 0);
+      if (curAdd || PASS?.add) 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);
@@ -240,40 +512,91 @@ const MooodGL = (() => {
     // 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;
+    function rect(tex, m, x, y, w, h, c = WHITE, a = 1, add = false, uv = UV, a1 = a) {
+      if (a <= 0 && a1 <= 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]);
+      // (a1: the alpha along its bottom edge, y + h — a reflection fading away)
+      const v = (px, py, u, vv, f) => { if (MIR) py = mirrorY(py, MD); data[k] = px; data[k + 1] = py; data[k + 2] = u; data[k + 3] = vv; data[k + 4] = c[0] * f; data[k + 5] = c[1] * f; data[k + 6] = c[2] * f; data[k + 7] = add ? 0 : f; data[k + 8] = HZ[0]; data[k + 9] = HZ[1]; data[k + 10] = MIR ? MH : LT[0]; data[k + 11] = MIR ? MP : LT[1]; k += STRIDE; };
+      v(ox, oy, uv[0], uv[1], a);
+      v(ox + ax, oy + ay, uv[2], uv[1], a);
+      v(ox + ax + bx, oy + ay + by, uv[2], uv[3], a1);
+      v(ox + bx, oy + by, uv[0], uv[3], a1);
       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) {
+    // a textured quad with four free corners p = [x0,y0, x1,y1, x2,y2, x3,y3] (clockwise from top-left);
+    // d: their depths (a lit scene: a surface going away), else the quad's (LT)
+    function quad(tex, p, uv, d = null) {
       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; };
+      const v = (i, u, vv) => { const y = MIR ? mirrorY(p[i + 1], d ? d[i >> 1] : MD) : p[i + 1]; data[k] = p[i]; data[k + 1] = y; data[k + 2] = u; data[k + 3] = vv; 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]; data[k + 10] = MIR ? MH : LT[0]; data[k + 11] = MIR ? MP : d ? d[i >> 1] : LT[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]
+    // a textured quad with four free corners, each [x, y, u, v, depth?]
     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];
+        data[k] = q[0]; data[k + 1] = MIR ? mirrorY(q[1], q[4] ?? MD) : 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]; data[k + 10] = MIR ? MH : LT[0]; data[k + 11] = MIR ? MP : q[4] ?? LT[1];
         k += STRIDE;
       }
       n++;
     }
+    // a convex polygon of points [x, y, u, v] (frame px, its texture's uv) as a fan, alpha a
+    function fan(tex, pts, a) {
+      if (tex !== curTex || curAdd || n + pts.length >= QUADS) { flush(); curTex = tex; curAdd = false; }
+      for (let i = 1; i + 1 < pts.length; i++) {
+        let k = n * 4 * STRIDE;
+        for (const q of [pts[0], pts[i], pts[i + 1], pts[i + 1]]) {
+          data[k] = q[0]; data[k + 1] = MIR ? mirrorY(q[1], MD) : q[1]; data[k + 2] = q[2]; data[k + 3] = q[3];
+          data[k + 4] = a; data[k + 5] = a; data[k + 6] = a; data[k + 7] = a; data[k + 8] = HZ[0]; data[k + 9] = HZ[1]; data[k + 10] = MIR ? MH : LT[0]; data[k + 11] = MIR ? MP : LT[1];
+          k += STRIDE;
+        }
+        n++;
+      }
+    }
+    // the part of a convex polygon where f (linear in x, y) is ≥ 0, its points' uv carried along
+    function keep(pts, f) {
+      const out = [];
+      for (let i = 0; i < pts.length; i++) {
+        const a = pts[i], b = pts[(i + 1) % pts.length], fa = f(a), fb = f(b);
+        if (fa >= 0) out.push(a);
+        if ((fa >= 0) !== (fb >= 0)) { const k = fa / (fa - fb); out.push(a.map((v, j) => v + (b[j] - v) * k)); }
+      }
+      return out;
+    }
+    // a textured rect (x, y, w, h: transformed by m, its uv) seen only above the line [[x, y], …]
+    // (frame px, x growing): what the land in front of it leaves seen
+    function rectAbove(tex, m, x, y, w, h, uv, a, line) {
+      const corners = [[x, y], [x + w, y], [x + w, y + h], [x, y + h]].map(([px, py]) => [...apply(m, px, py), uv[0] + (px - x) / w * (uv[2] - uv[0]), uv[1] + (py - y) / h * (uv[3] - uv[1])]);
+      for (let j = 0; j + 1 < line.length; j++) {
+        const [xa, ya] = line[j], [xb, yb] = line[j + 1], k = (yb - ya) / ((xb - xa) || 1);
+        const poly = keep(keep(keep(corners, p => p[0] - xa), p => xb - p[0]), p => ya + k * (p[0] - xa) - p[1]);
+        if (poly.length >= 3) fan(tex, poly, a);
+      }
+    }
+    // the land in front (LAND, this frame's — engine.js landLine): for something drawn as the rect r
+    // through m, D away along the gaze, the line it is seen above — null: all of it seen, false: none
+    let LAND = null;
+    function landOver(m, r, D) {
+      if (!LAND) return null;
+      const xs = [], ys = [];
+      for (const [px, py] of [[r.x, r.y], [r.x + r.w, r.y], [r.x + r.w, r.y + r.h], [r.x, r.y + r.h]]) { const q = apply(m, px, py); xs.push(q[0]); ys.push(q[1]); }
+      const line = LAND.at(D, Math.min(...xs), Math.max(...xs), Math.max(...ys));
+      if (!line) return null;
+      return line.every(([, y]) => y <= Math.min(...ys)) ? false : line;
+    }
+    // is the point (x, y) (frame px) under the line?
+    const under = (line, x, y) => {
+      const j = line.findIndex(([lx]) => lx >= x);
+      if (j <= 0) return j === 0 ? y > line[0][1] : y > line.at(-1)[1];
+      const [xa, ya] = line[j - 1], [xb, yb] = line[j];
+      return y > ya + (yb - ya) * (x - xa) / ((xb - xa) || 1);
+    };
     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);
     }
@@ -398,7 +721,10 @@ const MooodGL = (() => {
     function build(spec, w, h, prev, out) {
       if (prev) {
         for (const t of prev.textures) gl.deleteTexture(t);
-        dropTarget(prev.scene); dropTarget(prev.copy);
+        dropTarget(prev.plain); dropTarget(prev.copy);
+        if (prev.litScene) dropTarget(prev.litScene);
+        if (prev.mask) dropTarget(prev.mask);
+        for (const ob of prev.objects) if (ob.mirrorT) dropTarget(ob.mirrorT);
         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;
@@ -407,8 +733,7 @@ const MooodGL = (() => {
       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;
+      HAZE0 = typeof spec.light?.haze === 'number' ? I.hazeReach(spec.light.haze) : 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));
@@ -450,7 +775,8 @@ const MooodGL = (() => {
         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 => {
+      const parted = []; // [an element painting parts, the parts it painted]
+      const objects = (spec.objects || []).filter(o0 => !o0.insert).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 n = dz.now(o0), o = { ...n.o, _sw: ROUND && o0.sky ? I.TAU * H : SW }, Z = n.Z;
@@ -468,30 +794,163 @@ const MooodGL = (() => {
         // 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 whole = { x: bx, y: by, w: bw, h: bh };
+        const r0 = paintObject(o, bx, by, bw, bh, Math.min(1, MAX_SIDE / bw, MAX_SIDE / bh), 0, null, whole), 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 ? n.at : null,
-          live, ground: !!o.ground, from: o0.place ? o0 : null,
+        const ob = {
+          o, Z, x, y, s, bx, by, bw, bh, tex: frames[0], frames, pad: [(r0.region.w - bw) / 2 / bw, (r0.region.h - bh) / 2 / bh], period: o.period || 2, detail: null, cut: r0.cut,
+          p: ROUND && !o.sky ? n.at : null, at: n.at,
+          live, ground: !!o.ground, from: o0.place ? o0 : null, spec: o0, unseen: !!o0.unseen, parts: 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 })),
+          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, id: l.id })),
         };
+        if (r0.parts.length) { ob.parts = []; parted.push([ob, r0.parts]); }
+        return ob;
+      });
+      // inserts (engine.js): over all of it, fixed to the frame — repainted while open as the state
+      // changes (the iris their key opens), and every frame if their painting reads the time
+      const inserts = (spec.objects || []).filter(o0 => o0.insert).map(o0 => {
+        const o = { ...o0, _yh: dz.yh };
+        return { o, ...I.objectBox(o, SW, H), x: 0, y: 0, frames: [], period: o.period || 2, live: { canvas: I.layer(1, 1), tex: tex(I.layer(1, 1)), stateOnly: true, frames: 0, lights: [] } };
       });
       // 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 };
+      // cut by others (clip): a mask target to paint them in
+      const ids = new Set(objects.map(ob => ob.o.id).filter(id => id != null));
+      for (const ob of objects) ob.clip = I.clipOf(ob.spec, ids);
+      const S = {
+        W, H, SW, u, x0, span, yh: dz.yh, dz, lim: I.limits(spec, W, H), sky, stars, celestials, layers, objects, inserts, particles, textures,
+        shadows: shadowsOf(spec, objects), lands: objects.filter(ob => ob.plane?.drape), plain: target(CW, CH), litScene: null, copy: target(CW, CH),
+        mask: objects.some(ob => ob.clip) ? target(CW, CH) : null, out, rules: I.orderRules(spec),
+      };
+      for (const [ob, recs] of parted) paintParts(S, ob, recs, null);
+      S.order = orderOf(S);
+      // the planes that reflect (a browser that can't write depths draws no mirror)
+      S.mirrors = canLight ? objects.filter(ob => ob.plane?.mirror && !ob.unseen).map(ob => ob.plane) : [];
+      return S;
+    }
+    // draw far to near, layers, objects and their parts together (a house behind a hill is hidden by
+    // it) — as the elements say (behind, inFront)
+    const idOf = it => (it.ob ? it.ob.o.id : it.part ? it.part.owner.o.id : null) ?? null;
+    function orderOf(S) {
+      const list = [...S.layers.map(l => ({ l, Z: l.Z })), ...S.objects.map(ob => ({ ob, Z: ob.Z }))];
+      for (const ob of S.objects) for (const part of ob.parts || []) list.push({ part, Z: part.Z });
+      return I.arrange(list.sort((a, b) => (b.Z - a.Z) || 0), S.rules, idOf);
+    }
+
+    // ── parts ────────────────────────────────────────────────────────────
+    // An element painting parts (e.part: a fence's posts, the people of a crowd) — each part stands
+    // at its own depth, in a texture of its own, drawn among the rest where it stands. A part: { owner,
+    // rec: {dx, dz, box, paint}, o: where it is now (depths().part), Z, x, y, s, its box on the stage,
+    // tex, lights: its glows as fractions of its box }. They are painted when their element is
+    // (repaint), as sharp as each is seen from cam (as from the start without one).
+    function placePart(S, part) {
+      const n = S.dz.part(part.owner.spec, part.rec.dx, part.rec.dz, part.rec.box), o = n.o;
+      Object.assign(part, { o, Z: n.Z, x: o.x * SW, y: o.y * H, s: Math.max(2, o.size * H), p: ROUND ? n.at : null, at: n.at }, I.objectBox(o, SW, H));
+    }
+    function paintParts(S, ob, recs, cam) {
+      const list = ob.parts;
+      for (const gone of list.splice(recs.length)) { gl.deleteTexture(gone.tex); S.textures.delete(gone.tex); }
+      recs.forEach((rec, i) => {
+        const part = list[i] ||= { owner: ob, canvas: I.layer(1, 1), tex: null, lights: [] };
+        part.rec = rec;
+        placePart(S, part);
+        const r = { x: part.bx, y: part.by, w: part.bw, h: part.bh }, seen = cam && matOf(part, cam);
+        const k = liveScale(r, seen ? Math.max(LIVE_AWAY, seen.m[0]) : 1), c = part.canvas, w = Math.max(1, Math.round(r.w * k)), h = Math.max(1, Math.round(r.h * k));
+        if (c.width !== w || c.height !== h) { c.width = w; c.height = h; }
+        const g = c.getContext('2d'), lights = [], [ax, ay, ppm] = I.anchorOf(part.o, SW, H);
+        g.setTransform(1, 0, 0, 1, 0, 0); g.clearRect(0, 0, w, h);
+        g.setTransform(k, 0, 0, k, -r.x * k, -r.y * k);
+        rec.paint(g, ax, ay, ppm, lights);
+        if (part.tex) { flush(); gl.bindTexture(gl.TEXTURE_2D, part.tex); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, c); curTex = null; }
+        else { part.tex = texture(c); S.textures.add(part.tex); }
+        part.lights = lights.map(l => ({ u: (l.x - r.x) / r.w, v: (l.y - r.y) / r.h, r: l.r / r.w, c: col(l.col), a: l.a, flicker: l.flicker, id: l.id }));
+      });
+    }
+    // as each frame starts: the elements with parts painted if they are due (their parts with them),
+    // and their parts put where they are now
+    function prepareParts(S, cam, t) {
+      for (const ob of S.objects) {
+        if (!ob.parts) continue;
+        if (ob.live) {
+          for (const id of Array.isArray(ob.o.after) ? ob.o.after : []) { const other = BYID.get(id), oat = other?.live && matOf(other, cam); if (oat) textureOf(other, oat.m, t); }
+          // (itself out of sight — behind the eye — coarsely; its parts as they are seen: paintParts)
+          const at = matOf(ob, cam);
+          if (at) textureOf(ob, at.m, t); else unseen(ob, t);
+        }
+        for (const part of ob.parts) placePart(S, part);
+      }
+    }
+    function drawPartAt(part, cam, t) {
+      const at = matOf(part, cam);
+      if (!at) return;
+      MD = at.D;
+      const fade = I.nearFade(at.D), r = { x: part.bx, y: part.by, w: part.bw, h: part.bh };
+      const line = fade > 0 ? landOver(at.m, r, at.D) : false;
+      if (line === false) return;
+      part.shown = { tx: part.tex, r, m: at.m, frame: frameNo };
+      LT = part.owner.o.glows ? UNLIT : [1, at.D];
+      if (line) rectAbove(part.tex, at.m, r.x, r.y, r.w, r.h, UV, fade, line);
+      else rect(part.tex, at.m, r.x, r.y, r.w, r.h, WHITE, fade);
+      LT = UNLIT;
+      for (const lt of part.lights) {
+        const lx = r.x + lt.u * r.w, ly = r.y + lt.v * r.h;
+        if (line && under(line, ...apply(at.m, lx, ly))) continue;
+        const fl = lt.flicker != null ? 1 - lt.flicker * 0.5 * (0.5 + 0.5 * Math.sin(t * 9 + lx) * Math.sin(t * 5.3 + ly)) : 1;
+        sprite(T.glow, at.m, lx, ly, 2 * lt.r * r.w, 2 * lt.r * r.w, 0, lt.c, lt.a * 0.6 * fl * fade, true);
+      }
+    }
+
+    // ── cut by others ────────────────────────────────────────────────────
+    // An item of the order drawn — an element or a part of one — unless it is unseen (only a shape
+    // others are cut by); one with `clip` through the mask of what those it names paint now (list:
+    // the frame's order, where they are)
+    function drawItem(S, it, cam, t, list) {
+      const ob = it.ob || it.part.owner;
+      if (ob.unseen) return;
+      // (in a mirror: what is above its plane — not what is cut by others, the mask is the frame's)
+      if (MIR && (ob.clip || ob.ground || ob === MIR.ob || (ob.plane && ob.plane.Y <= MIR.Y + 0.01))) return;
+      if (ob.clip) {
+        maskOf(S, ob.clip.ids, cam, t, list);
+        CLIP = { tex: S.mask.tex, inside: ob.clip.inside };
+      }
+      if (it.part) drawPartAt(it.part, cam, t); else drawObjectAt(it.ob, cam, t);
+      if (ob.clip) { flush(); CLIP = null; }
+    }
+    // the elements `ids` (and their parts) painted in the mask target, as they are now (once a frame
+    // for all cut by the same ones)
+    function maskOf(S, ids, cam, t, list) {
+      const key = `${frameNo}${MIR ? ' mirrored' : ''}\n${ids.join('\n')}`;
+      if (S.maskKey === key) return;
+      S.maskKey = key;
+      flush();
+      gl.bindFramebuffer(gl.FRAMEBUFFER, S.mask.fbo);
+      gl.clearColor(0, 0, 0, 0);
+      gl.clear(gl.COLOR_BUFFER_BIT);
+      for (const it of list) {
+        if (!ids.includes(idOf(it)) || it.l) continue;
+        if (it.part) drawPartAt(it.part, cam, t); else drawObjectAt(it.ob, cam, t);
+      }
+      flush();
+      gl.bindFramebuffer(gl.FRAMEBUFFER, S.scene.fbo);
     }
 
     // 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 = [];
+    // (and the parts it paints, e.part: each to be painted on its own — paintParts)
+    // With `whole` (its box) while the scene is checked (cutOf): painted with a margin, looked at
+    // there and the margin cleared. → { canvas, lights, parts, region: what the canvas holds, cut }
+    function paintObject(o, bx, by, bw, bh, k, t = 0, into = null, whole = null) {
+      // (the margin within the largest texture there may be)
+      if (whole && checked(o)) k = Math.min(k, (MAX_SIDE - 2 * CUT_MARGIN) / bw, (MAX_SIDE - 2 * CUT_MARGIN) / bh);
+      const m = whole && checked(o) ? CUT_MARGIN / k : 0;
+      if (m) { bx -= m; by -= m; bw += 2 * m; bh += 2 * m; }
+      const lights = [], parts = [];
       const draw = (g) => {
         g.setTransform(k, 0, 0, k, -bx * k, -by * k);
-        I.drawObject(g, o, o._sw || SW, H, t, lights);
+        I.drawObject(g, o, o._sw || SW, H, t, lights, parts);
+        if (o.insert) I.iris(g, o, SW, H, I.opening(o), 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) {
@@ -512,7 +971,156 @@ const MooodGL = (() => {
         g.clearRect(0, 0, w, h);
         draw(g);
       } else canvas = paint(bw * k, bh * k, draw);
-      return { canvas, lights };
+      const region = { x: bx, y: by, w: bw, h: bh };
+      return { canvas, lights, parts, region, cut: m ? cutOf(canvas, region, whole, m) : null };
+    }
+
+    // ── cut off by its box ───────────────────────────────────────────────
+    // An element is painted within its box: paint going on past the box's edge is cut there, a
+    // straight line wherever that edge comes into the frame. While the scene is checked (a render,
+    // ?debug: engine.js CHECK — reading pixels back is not free) a custom element is painted with a
+    // margin of CUT_MARGIN px round its box (a live one at most once a second): what it paints in the
+    // margin's outer pixel runs on past the box (a painting that ends at its edge does not), and is
+    // said once for each edge as it shows (cutShown), so the artist widens its "box"; the margin is
+    // cleared — the picture is as unchecked. [left, top, right]: not the bottom — an element's foot is
+    // mostly hidden by the ground and what stands nearer: said, it would mostly be noise.
+    const EDGES = ['left', 'top', 'right'], CUT_MARGIN = 2;
+    const checked = o => I.CHECK.on && (o.kind === 'custom' || !o.kind) && !o.sky && !o.ground && !o.plane && !o.insert;
+    // the canvas painted over region r with a margin m (r's units) round the part of it that is to be
+    // seen: the edges of that part that are its box's (whole) and are painted past → [left, top,
+    // right] or null; the margin cleared
+    function cutOf(canvas, r, whole, m) {
+      const g = canvas.getContext('2d'), w = canvas.width, h = canvas.height, M = Math.round(m * w / r.w);
+      const hit = (x, y, sw, sh) => { const d = g.getImageData(x, y, sw, sh).data; let n = 0; for (let i = 3; i < d.length; i += 4) if (d[i] > 40) n++; return n >= 3; };
+      const at = [Math.abs(r.x + m - whole.x) < 1, Math.abs(r.y + m - whole.y) < 1, Math.abs(r.x + r.w - m - whole.x - whole.w) < 1];
+      const cut = w > 2 * M + 8 && h > 2 * M + 8 ? [at[0] && hit(0, M, 1, h - 2 * M), at[1] && hit(M, 0, w - 2 * M, 1), at[2] && hit(w - 1, M, 1, h - 2 * M)] : [];
+      g.setTransform(1, 0, 0, 1, 0, 0);
+      g.clearRect(0, 0, M, h); g.clearRect(w - M, 0, M, h); g.clearRect(0, 0, w, M); g.clearRect(0, h - M, w, M);
+      return cut.some(Boolean) ? cut : null;
+    }
+    // the edges it is cut at that are in the frame now (m: its screen transform)
+    function cutShown(ob, m) {
+      const x0 = m[0] * ob.bx + m[4], x1 = x0 + m[0] * ob.bw, y0 = m[3] * ob.by + m[5], y1 = y0 + m[3] * ob.bh;
+      const across = x1 > 0 && x0 < W, down = y1 > 0 && y0 < H;
+      const seen = [down && x0 > 0 && x0 < W, across && y0 > 0 && y0 < H, down && x1 > 0 && x1 < W];
+      ob.cut.forEach((c, i) => { if (c && seen[i]) I.warn(`${ob.o.name || ob.o.id}: its painting is cut off by its box at the ${EDGES[i]} edge, in the frame — widen its "box"`); });
+    }
+
+    // ── shadows ──────────────────────────────────────────────────────────
+    // A shadow (engine.js: shadowsOf) on the ground is drawn just before the element that casts it;
+    // on a plane or an upright element, right after that one, only where it is painted (its alpha).
+    // The caster's painting is laid on the receiver's plane as a grid of cells, each corner where the
+    // ray from the light through it meets that plane (cells straddling another receiver met first are
+    // split, then left to it), blurred as much as the light's size (`soft`) spreads its edge there:
+    // sharp at the contact, softer away from it.
+    const SH_GRID = [12, 20], SH_DEPTH = 3;
+    // the scene's shadows (engine.js: shadowsOf) with their elements: { ob, onto: ['ground' | ob], … }
+    function shadowsOf(spec, objects) {
+      const byId = new Map(objects.filter(x => x.o.id != null).map(x => [String(x.o.id), x]));
+      return I.shadowsOf(spec).map(sh => ({ ...sh, ob: byId.get(sh.id), onto: sh.onto.map(id => (id === 'ground' ? id : byId.get(id))) }));
+    }
+    // what a shadow falls on, as a plane of the world: a point q on it, its normal n, its texture
+    // (what it is painted with now: the shadow shows only where that is) and where a world point is
+    // on that texture — or null (a card that turns to face the eye)
+    // (the ground: level where the caster stands, A — over the land, its height there; what isn't
+    // drawn this frame takes none)
+    function receiver(R, A) {
+      if (R === 'ground') return { q: [0, I.groundAt(A.X * I.EYE, A.Z * I.EYE) / I.EYE, 0], n: [0, 1, 0], tex: T.white, uv: () => [0.5, 0.5] };
+      if (!R.shown || R.shown.frame !== frameNo) return null;
+      const { tx, r } = R.shown;
+      if (R.plane) {
+        const P = R.plane;
+        return { q: [P.Xc, P.Y, P.Zc], n: [0, 1, 0], tex: tx, uv: S => { const dx = S[0] - P.Xc, dz = S[2] - P.Zc; return [(dx * P.cos + dz * P.sin + P.w / 2) / P.w, (dx * P.sin - dz * P.cos + P.d / 2) / P.d]; } };
+      }
+      const p = ROUND ? R.p : R.at;
+      if (!p || (ROUND && typeof R.o.facing !== 'number')) return null;
+      const k = H / p.Zp, f = ROUND ? R.o.facing * Math.PI / 180 : Math.PI, ux = -Math.cos(f), uz = Math.sin(f);
+      return { q: [p.X, p.Y, p.Z], n: [uz, 0, -ux], tex: tx, uv: S => [(R.x + ((S[0] - p.X) * ux + (S[2] - p.Z) * uz) * k - r.x) / r.w, (R.y - (S[1] - p.Y) * k - r.y) / r.h] };
+    }
+    // what casts a shadow: an element, or a part of one (e.part) — { tx: its painting this frame, r:
+    // the region of it that is, at: where it stands (depths().now), x, y: its anchor on the stage }
+    function caster(it, cam, t) {
+      if (it.part) { const p = it.part; return { tx: p.tex, r: { x: p.bx, y: p.by, w: p.bw, h: p.bh }, at: p.at, x: p.x, y: p.y }; }
+      const ob = it.ob, at = matOf(ob, cam);
+      if (!at) return null;
+      const { tx, r } = textureOf(ob, at.m, t);
+      return { tx, r, at: ob.at, x: ob.x, y: ob.y };
+    }
+    // the shadows falling on R now: on 'ground', the item's (an element or a part), before it is
+    // drawn; on an element R, all that are cast on it — of the elements and their parts
+    function castOn(S, R, it, cam, t) {
+      if (MIR) return;
+      const owner = it && (it.ob || it.part.owner);
+      for (const sh of S.shadows) {
+        if (!sh.onto.includes(R)) continue;
+        // (each caster's on each receiver: its grid kept while nothing it depends on moves — slot)
+        if (R === 'ground') { if (sh.ob === owner) drawShadow(S, sh, R, caster(it, cam, t), cam, `ground ${it.part ? owner.parts.indexOf(it.part) : -1}`); continue; }
+        [{ ob: sh.ob }, ...(sh.ob.parts || []).map(part => ({ part }))].forEach((c, i) => drawShadow(S, sh, R, caster(c, cam, t), cam, `${R.o.id} ${i - 1}`));
+      }
+    }
+    function drawShadow(S, sh, R, cs, cam, slot) {
+      const src = cs && I.shadowLight(S.sources, sh, cs.at), pl = src && receiver(R, cs.at);
+      if (!pl) return;
+      const others = sh.onto.filter(x => x !== R).map(x => receiver(x, cs.at)).filter(Boolean);
+      // the caster's painting this frame (painted first, if it is to be), and its points in the world
+      const { tx, r } = cs, A = cs.at, k = A.Zp / H;
+      const ax = ROUND ? Math.cos(cam.yaw || 0) : 1, az = ROUND ? -Math.sin(cam.yaw || 0) : 0;
+      const world = (f, g) => { const u = (r.x + r.w * f - cs.x) * k; return [A.X + u * ax, A.Y - (r.y + r.h * g - cs.y) * k, A.Z + u * az]; };
+      flush();
+      gl.useProgram(sprog);
+      gl.bindVertexArray(svao);
+      gl.bindBuffer(gl.ARRAY_BUFFER, svbo);
+      gl.uniform2f(shu.canvas, CW, CH);
+      gl.uniform2f(shu.off, OX, OY);
+      gl.activeTexture(gl.TEXTURE1); gl.bindTexture(gl.TEXTURE_2D, pl.tex); gl.uniform1i(shu.mask, 1);
+      gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, tx); gl.uniform1i(shu.tex, 0);
+      gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
+      if (S.lit) gl.drawBuffers(COLOUR_ONLY);
+      // the grid laid as it was, while the caster, its light, what it falls on and the camera are where
+      // they were (a still frame: none of it made again)
+      const key = [!!MIR, W, H, A.X, A.Y, A.Z, r.x, r.y, r.w, r.h, ...(src.at || []), ...(src.dir || []), src.strength, sh.strength, S.ambient, S.lit,
+        cam.x, cam.y, cam.z, cam.h, cam.yaw, ...pl.q, R.shown ? Object.values(R.shown.r).join() : '', ...others.flatMap(q => q.q), VX0, VY0, VX1, VY1].join();
+      const grids = sh.grids ||= new Map();
+      let verts = grids.get(slot)?.key === key ? grids.get(slot).verts : null;
+      if (!verts) {
+        const wk = r.w * k, hk = r.h * k, out = [];
+        // a corner: [screen x, y, its u v on the caster, on the receiver, how dark, how blurred (u, v)] —
+        // or null where its ray meets another receiver first, or none. The penumbra of a light `soft`
+        // across: soft·(t − 1) on the receiver from a point (t: how much farther than the caster it is),
+        // soft·t from far off — on the caster's painting that over the magnification
+        const corner = (f, g) => {
+          const C = world(f, g), h = I.rayHit(pl, C, src.at, src.dir);
+          if (!h || others.some(q => { const o2 = I.rayHit(q, C, src.at, src.dir); return o2 && o2[1] < h[1]; })) return null;
+          const p = I.project(cam, ...h[0], W, H, YH);
+          if (!p) return null;
+          const b = src.dir ? sh.soft * h[1] : sh.soft * (h[1] - 1) / h[1];
+          return [p[0], p[1], f, g, ...pl.uv(h[0]), I.shadowAt(sh, src, h[0], S.ambient, S.lit), b / wk, b / hk];
+        };
+        const cell = (f0, g0, f1, g1, depth) => {
+          const c = [corner(f0, g0), corner(f1, g0), corner(f1, g1), corner(f0, g1)], ok = c.filter(Boolean).length;
+          if (ok === 0) return;
+          if (ok < 4) {
+            if (depth >= SH_DEPTH) return;
+            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.max(...c.map(q => q[0])) < VX0 || Math.min(...c.map(q => q[0])) > VX1 || Math.max(...c.map(q => q[1])) < VY0 || Math.min(...c.map(q => q[1])) > VY1) return;
+          out.push(c[0], c[1], c[2], c[0], c[2], c[3]);
+        };
+        const [GC, GR] = SH_GRID;
+        for (let gi = 0; gi < GR; gi++) for (let fi = 0; fi < GC; fi++) cell(fi / GC, gi / GR, (fi + 1) / GC, (gi + 1) / GR, 0);
+        verts = new Float32Array(out.length * SH_STRIDE);
+        out.forEach((q, i) => verts.set(q, i * SH_STRIDE));
+        grids.set(slot, { key, verts });
+      }
+      for (let i = 0; i < verts.length; i += SH_MAX * SH_STRIDE) {
+        const n = Math.min(SH_MAX * SH_STRIDE, verts.length - i);
+        gl.bufferSubData(gl.ARRAY_BUFFER, 0, verts, i, n);
+        gl.drawArrays(gl.TRIANGLES, 0, n / SH_STRIDE);
+      }
+      if (S.lit) gl.drawBuffers(ALL_BUFFERS);
+      curTex = null;
     }
 
     // ── sharp close-ups ──────────────────────────────────────────────────
@@ -549,9 +1157,9 @@ const MooodGL = (() => {
         // 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;
+          if (ob.o.kind === 'bird' || ob.live || ob.parts || 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;
+          if (!at || at.D < 0.05) 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 };
@@ -581,6 +1189,7 @@ const MooodGL = (() => {
     }
 
     function drawWater(S, l, wy, t) {
+      if (MIR) return;
       flush();
       if (wy >= VY1) return;
       // copy what is drawn so far, then shade the water below the horizon from that copy
@@ -588,39 +1197,44 @@ const MooodGL = (() => {
       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.useProgram(P.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);
+      gl.uniform1i(P.wu.tex, 0);
+      gl.uniform2f(P.wu.res, W, H);
+      gl.uniform2f(P.wu.canvas, CW, CH);
+      gl.uniform2f(P.wu.off, OX, OY);
+      gl.uniform1f(P.wu.wy, Math.max(0, wy));
+      gl.uniform1f(P.wu.k, Math.min(1.2, Math.max(0, wy) / (H - wy)));
+      gl.uniform1f(P.wu.t, t);
+      gl.uniform1f(P.wu.speed, 1 + Math.abs(l.L.drift ?? 0) * 2);
+      gl.uniform1f(P.wu.u, S.u);
+      gl.uniform3f(P.wu.col, ...l.c);
+      band(P.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
+    // how finely a live element's region r is repainted: the scale it is seen at
     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 budget of pixels a repaint takes: what is on screen is painted only where it is seen — the
+    // screen and a margin at most — so as sharp as it is seen on a screen up to LIVE_BUDGET; a bigger
+    // one, a little softer: a 4K screen's iGPU is not to repaint 20 million pixels a frame)
+    const LIVE_BUDGET = 8e6;
+    const liveScale = (r, seen) => Math.min(seen, MAX_SIDE / r.w, MAX_SIDE / r.h, Math.sqrt(Math.min(LIVE_BUDGET, Math.max(4e6, 1.3 * CW * CH)) / (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) {
+    function drawGround(ob, cam, t, draw) {
       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);
+        if (stale(ob, k, whole)) repaint(ob, k, t, whole);
         tx = ob.live.tex;
       }
+      if (!draw) return;
       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;
@@ -634,13 +1248,15 @@ const MooodGL = (() => {
         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]);
+          HZ = haze(a.Z0, a.Z0 - cam.z); LT = ob.o.glows ? UNLIT : [1, 0];
+          const da = a.Z0 - cam.z, db = b.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], [da, da, db, db]);
         }
         if (a.y > VY1) break;
         a = b;
       }
-      HZ = NOHAZE;
+      HZ = NOHAZE; LT = UNLIT;
+      glowsOf(ob, ob.live?.r ? ob.live.lights : ob.lights, cam, t);
     }
 
     // ── horizontal planes ────────────────────────────────────────────────
@@ -653,146 +1269,228 @@ const MooodGL = (() => {
     // 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.
+    // read only the scene's state (e.state, e.was), when a key it read changed (engine.js: moved) —
+    // or when seen at a scale the old painting would blur. What it reads is looked at again at every
+    // repaint.
+    // One with `redraw` (engine.js: redrawOf) is repainted only when the keys it names change, whatever
+    // else it reads; one reading the light falling on it (e.lights), when the light does.
+    const timedOf = (o, frames) => o.redraw == null && (frames > 1 || !!I.READS.get(o)?.time);
     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;
+      const read = I.READS.get(o) || {}, timed = timedOf(o, frames);
+      return timed || read.state || read.lights || o.redraw != null ? { canvas: I.layer(1, 1), tex: tex(I.layer(1, 1)), stateOnly: !timed, frames, lights: [] } : null;
+    }
+    // stale: painted at another state (or light), 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(ob, k, need) {
+      const live = ob.live, f = live.k ? k / live.k : 0, sharp = f > 0.83 && f < 1.2 && live.r && covers(live.r, need);
+      if (live.frame === frameNo && sharp) 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);
+      if (!sharp) return true;
+      if (ob.o.redraw != null) return live.snap !== I.redrawOf(ob.o);
+      if (live.ver !== I.STATE.ver) { if (I.moved(live.read)) return true; live.ver = I.STATE.ver; }
+      return live.readsLights && live.src !== I.SOURCES.ver;
     }
-    // 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;
+    // repaints the region r of a live element (all of it, or what is on screen close up); `seen`:
+    // painted to be seen — only then is it looked at for being cut off by its box
+    function repaint(ob, k, t, r, seen = true) {
+      // (looked at for being cut off by its box at most once a second, when it is to be seen and not
+      // too coarse to tell: a few pixels across)
+      const whole = { x: ob.bx, y: ob.by, w: ob.bw, h: ob.bh }, look = seen && !(t - ob.cutAt < 1) && r.w * k >= 16 && r.h * k >= 16 && checked(ob.o);
+      const p = paintObject(ob.o, r.x, r.y, r.w, r.h, k, t, ob.live.canvas, look ? whole : null);
+      if (look) { ob.cutAt = t; ob.cut = p.cut; }
+      ob.live.r = p.region; ob.live.frame = frameNo;
+      if (p.parts.length || ob.parts) { ob.parts ||= []; paintParts(SCENE, ob, p.parts, CAM); }
       flush(); // quads already batched must be drawn with their own texture first
+      const t0 = I.PERF.on ? I.clock() : 0;
       gl.bindTexture(gl.TEXTURE_2D, ob.live.tex);
       gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, p.canvas);
+      if (I.PERF.on) I.PERF.add(ob.o, I.clock() - t0, true); // (its upload too)
       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 }));
+      ob.live.ver = I.STATE.ver; ob.live.k = k; ob.live.src = I.SOURCES.ver; ob.live.snap = I.redrawOf(ob.o); ob.live.read = I.READS.get(ob.o);
+      ob.live.stateOnly = !timedOf(ob.o, ob.live.frames); ob.live.readsLights = !!ob.live.read?.lights;
+      I.PERF.repainted(ob.o);
+      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, id: l.id }));
     }
     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;
+      const E = I.EYE, plane = I.planeOf(o0, dz), w = plane.w * E, d = plane.d * E, Zc = plane.Zc;
       // 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 o = { ...o0, sky: true, plane: true, _plane: plane };
       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));
+      const c = Math.abs(plane.cos), s = Math.abs(plane.sin);
       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,
+        o, plane, Z: Zc + (d * c + w * s) / 2 / E, bx, by, bw, bh, k, tex: tex(r0.canvas), frames: [],
+        lights: r0.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, id: l.id })),
+        live, spec: o0, unseen: !!o0.unseen,
       };
     }
-    // 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);
+    // A flat piece of the world drawn truly in perspective (engine.js: cellsOf — world(f, g) → [X, Y,
+    // Z], C × R cells; or its cells made already: the land's, landCells), each cell with the haze of
+    // its distance (hazeOf(D)), lit or not
+    function surface(cam, tex, world, C, R, hazeOf, lit, made) {
+      const quads = pt => {
+        HZ = hazeOf(pt.reduce((d, q) => d + q[4], 0) / pt.length); LT = lit ? [1, 0] : UNLIT;
         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;
+      if (made) made.forEach(quads); else I.cellsOf(cam, world, C, R, W, H, YH, [VX0, VY0, VX1, VY1], quads);
+      HZ = NOHAZE; LT = UNLIT;
+    }
+    // the land this frame: its draped planes' cells, as they are drawn (drawPlane) and what stands
+    // behind them is cut along (engine.js: landLine) — the view's and above it
+    function landCells(S, cam) {
+      for (const ob of S.lands) { ob.cells = []; I.cellsOf(cam, I.onPlane(ob.plane), ...I.PLANE_CELLS.webgl, W, H, YH, [VX0, -Infinity, VX1, VY1], pts => ob.cells.push(pts)); }
+    }
+    // the glows of a plane's or the ground's lights, where they are in the world
+    function glowsOf(ob, lights, cam, t) {
+      for (const lt of lights) {
+        const q = lightPlace(ob, lt), p = q && I.project(cam, ...q.at, W, H, YH);
+        if (!p) continue;
+        const r = q.reach / 2 * H / p[2], fl = flickerOf(lt, 0, 0, t);
+        MD = p[2];
+        sprite(T.glow, ID, p[0], p[1], 2 * r, 2 * r, 0, lt.c, lt.a * 0.6 * fl, true);
+        if (lt.dot) sprite(T.glow, ID, p[0], p[1], 6 * lt.dot * r / lt.r, 6 * lt.dot * r / lt.r, 0, DOT, 0.9, true);
+      }
     }
 
-    function drawPlane(ob, cam, t) {
+    const planeHaze = D => { const h = hz(D); return [1 - h, h]; };
+    // a pass over a plane's cells, as it is drawn, with a program of its own (mirrorPass, poolPass)
+    function overPlane(ob, cam, tx, pass) {
+      flush(); PASS = pass;
+      surface(cam, tx, I.onPlane(ob.plane), ...I.PLANE_CELLS.webgl, planeHaze, false, ob.cells);
+      flush(); PASS = null;
+    }
+    // Each reflecting plane in view: what is above it drawn as its mirror shows it (MIR) into the
+    // plane's mirror target — at half size, only where the plane is seen (the scissor), its mip levels
+    // made for the blur — before the frame: it is laid on the plane as the plane is drawn (mirrorPass).
+    // Its own `reflect` copy is not drawn over it; what is cut by others (clip) is not mirrored.
+    function mirrors(S, spec, cam, t, mSky) {
+      for (const ob of S.objects) {
+        ob.mirrored = null;
+        const Pl = ob.plane;
+        if (!S.mirrors.includes(Pl)) continue;
+        let x0 = Infinity, y0 = Infinity, x1 = -Infinity, y1 = -Infinity;
+        I.cellsOf(cam, I.onPlane(Pl), 4, 4, W, H, YH, [VX0, VY0, VX1, VY1], pts => { for (const q of pts) { x0 = Math.min(x0, q[0]); x1 = Math.max(x1, q[0]); y0 = Math.min(y0, q[1]); y1 = Math.max(y1, q[1]); } });
+        x0 = Math.max(x0, VX0); x1 = Math.min(x1, VX1); y0 = Math.max(y0, VY0); y1 = Math.min(y1, VY1);
+        if (!(x1 > x0 && y1 > y0)) continue;
+        const R = ob.mirrorT ??= mirrorTarget(Math.ceil(CW / 2), Math.ceil(CH / 2)), keep = P;
+        flush();
+        gl.bindFramebuffer(gl.FRAMEBUFFER, R.fbo);
+        gl.viewport(0, 0, R.w, R.h);
+        gl.clearColor(0, 0, 0, 0);
+        gl.clear(gl.COLOR_BUFFER_BIT);
+        gl.enable(gl.SCISSOR_TEST);
+        gl.scissor(Math.floor((x0 + OX) / 2) - 1, Math.floor((CH - y1 - OY) / 2) - 1, Math.ceil((x1 - x0) / 2) + 3, Math.ceil((y1 - y0) / 2) + 3);
+        P = MIRP ??= mirrorProgram();
+        MIR = { ob, Y: Pl.Y, A: (YH - cam.y) * H, B: H * ((cam.h ?? 1) - Pl.Y) }; MD = Infinity;
+        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);
+        flush();
+        MIR = null; P = keep;
+        gl.disable(gl.SCISSOR_TEST);
+        for (const tex of [R.tex, R.lit, R.glow]) { gl.bindTexture(gl.TEXTURE_2D, tex); gl.generateMipmap(gl.TEXTURE_2D); }
+        curTex = null;
+        ob.mirrored = R;
+      }
+    }
+    // the plane's mirror laid on it (RFS)
+    function mirrorPass(ob) {
+      const M = ob.plane.mirror, R = ob.mirrored;
+      return {
+        prog: P.rprog, u: P.ru, add: false, set: u => {
+          [R.tex, R.lit, R.glow].forEach((tex, i) => { gl.activeTexture(gl.TEXTURE1 + i); gl.bindTexture(gl.TEXTURE_2D, tex); });
+          gl.uniform1i(u.mc, 1); gl.uniform1i(u.mh, 2); gl.uniform1i(u.mg, 3);
+          gl.uniform1f(u.strength, M.strength); gl.uniform1f(u.fade, M.fade); gl.uniform1f(u.blur, M.blur);
+        },
+      };
+    }
+    // the scene's point lights near a plane that is `lit`, laid on it as much as the scene is not lit
+    // (LFS) — or null
+    const POOL_LIGHTS = 8;
+    function poolPass(ob, t) {
+      const Pl = ob.plane, k = Pl.pool * (1 - SCENE.lit), half = Math.hypot(Pl.w, Pl.d) / 2;
+      if (k <= 0) return null;
+      const pts = SCENE.sources.filter(s => !s.dir && s.strength > 0.002 && s.at[1] >= Pl.Y - 0.03 && Math.hypot(s.at[0] - Pl.Xc, s.at[2] - Pl.Zc) - half < s.reach);
+      if (!pts.length) return null;
+      pts.sort((a, b) => b.strength * b.reach - a.strength * a.reach).length = Math.min(pts.length, POOL_LIGHTS);
+      const lp = new Float32Array(4 * POOL_LIGHTS), lc = new Float32Array(3 * POOL_LIGHTS);
+      pts.forEach((s, i) => {
+        const f = s.sprite ? flickerOf(s.sprite.lt, s.sprite.x, s.sprite.y, t) : I.flickerNow(s, t);
+        lp.set([...s.at, s.reach], 4 * i);
+        lc.set(s.rgb.map(v => v / 255 * s.strength * f * k), 3 * i);
+      });
+      return {
+        prog: P.lprog, u: P.lu, add: true, set: u => {
+          gl.uniform3f(u.pc, Pl.Xc, Pl.Y, Pl.Zc); gl.uniform4f(u.pa, Pl.w, Pl.d, Pl.cos, Pl.sin);
+          gl.uniform1i(u.n, pts.length); gl.uniform4fv(u.lp, lp); gl.uniform3fv(u.lc, lc);
+        },
+      };
+    }
+    function drawPlane(ob, cam, t, draw) {
       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);
+        if (stale(ob, 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]; });
+      if (!draw) return;
+      // painted without haze (seen from above): all of it is the air at its own distance; draped
+      // (spec.relief), it lies on the land
+      surface(cam, tx, I.onPlane(ob.plane), ...I.PLANE_CELLS.webgl, planeHaze, !ob.o.glows, ob.cells);
+      ob.shown = { tx, r: { x: ob.bx, y: ob.by, w: ob.bw, h: ob.bh }, frame: frameNo };
+      if (ob.mirrored && !MIR) overPlane(ob, cam, tx, mirrorPass(ob));
+      const pool = !MIR && ob.plane.pool && poolPass(ob, t);
+      if (pool) overPlane(ob, cam, tx, pool);
+      glowsOf(ob, ob.live?.r ? ob.live.lights : ob.lights, cam, t);
     }
 
+    // A live element 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) and what keeps a memory
+    // of its own goes on — the elements it reads (`after`) first
+    function unseen(ob, t) {
+      for (const id of Array.isArray(ob.o.after) ? ob.o.after : []) { const other = BYID.get(id); if (other?.live) unseen(other, t); }
+      const whole = { x: ob.bx, y: ob.by, w: ob.bw, h: ob.bh }, k = Math.min(LIVE_AWAY, liveScale(whole, 1));
+      if (stale(ob, k, whole)) repaint(ob, k, t, whole, false);
+      return { tx: ob.live.tex, r: ob.live.r, lights: ob.live.lights };
+    }
     // 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;
+        // close up only what is on screen is painted, as sharp as it is seen — with a margin, wide for
+        // one repainted only as the state changes (a small move of the camera needn't repaint it)
+        const need = seen || whole, mg = ob.live.stateOnly ? 0.15 : 0.02;
+        const r = seen ? intersect(whole, { x: seen.x - seen.w * mg, y: seen.y - seen.h * mg, w: seen.w * (1 + 2 * mg), h: seen.h * (1 + 2 * mg) }) : 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);
+        if (stale(ob, k, need)) repaint(ob, k, t, r);
         return { tx: ob.live.tex, r: ob.live.r, lights: ob.live.lights };
       }
+      if (ob.live) return unseen(ob, t);
       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 };
+      // (painted with a margin round its box, when the scene was checked: pad, fractions of it)
+      const [px, py] = ob.pad;
+      return { tx: ob.frames[fi], r: { x: ob.bx - px * ob.bw, y: ob.by - py * ob.bh, w: ob.bw * (1 + 2 * px), h: ob.bh * (1 + 2 * py) }, 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;
+    // draw: false — only what drawing it paints is painted (a frame unseen, painted as when drawn: tick)
+    function drawObjectAt(ob, cam, t, draw = true) {
+      if (ob.plane) { drawPlane(ob, cam, t, draw); return; }
+      if (ob.ground) { drawGround(ob, cam, t, draw); return; }
+      if (ROUND && ob.o.sky) { drawSkyAround(ob, cam, t, draw); return; }
+      if (ROUND && typeof ob.o.facing === 'number') { drawCard(ob, cam, t, draw); return; }
+      // (out of sight — behind the eye, passed — a live element goes on all the same, painted coarsely,
+      // as a frame unseen paints it: tick)
+      const at = matOf(ob, cam), fade = at ? I.nearFade(at.D) : 0;
+      if (fade <= 0) { if (ob.live) unseen(ob, t); return; }
+      MD = at.D;
       const { o, x, y, s } = ob;
+      if (draw && ob.cut) cutShown(ob, at.m);
       // 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') {
@@ -821,46 +1519,59 @@ const MooodGL = (() => {
         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);
+      const { tx, r, lights } = textureOf(ob, m, t);
+      if (!draw) return;
+      const ma = a === ID ? m : mul(m, a);
+      // the land in front of it (spec.relief) hides what is behind its rise
+      const line = o.sky ? null : landOver(ma, r, at.D);
+      if (line === false) return;
+      ob.shown = { tx, r, m: ma, frame: frameNo };
+      LT = o.sky || o.glows ? UNLIT : [1, at.D];
       // 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) {
+      // raised above the ground, e.g. sitting on a pier, that is below its base), fading away from it —
+      // not over a reflecting plane: that mirrors it
+      if (ob.reflect && !MIR && !I.overMirror(SCENE.mirrors, ob.at)) {
         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, mul(ma, [1, 0, 0, -1, 0, 2 * gy]), r.x, r.y, r.w, r.h, WHITE, 0.08 * fade, false, UV, 0.3 * fade);
       }
-      rect(tx, ma, r.x, r.y, r.w, r.h, WHITE, fade);
+      if (line) rectAbove(tx, ma, r.x, r.y, r.w, r.h, UV, fade, line);
+      else rect(tx, ma, r.x, r.y, r.w, r.h, WHITE, fade);
+      LT = UNLIT;
       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 (line && under(line, ...apply(m, lx, ly))) continue;
+        sprite(T.glow, m, lx, ly, 2 * lt.r, 2 * lt.r, 0, lt.c, lt.a * 0.6 * flickerOf(lt, x, y, t) * 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) {
+    function drawCard(ob, cam, t, draw) {
       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);
+      if (!draw) return;
+      ob.shown = { tx, r, frame: frameNo };
       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));
+      surface(cam, tx, (f, g) => world(r.x + r.w * f, r.y + r.h * g), 16, 10, D => haze(p.Zp, D), !ob.o.glows);
       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;
+        MD = q[2];
         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) {
+    function drawSkyAround(ob, cam, t, draw) {
       const { tx } = textureOf(ob, null, t), C = 48, top = ob.by - cam.y * H;
+      if (!draw) return;
+      MD = Infinity;
       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;
@@ -875,6 +1586,7 @@ const MooodGL = (() => {
 
     // An element that moves through the world (its `place`): put where the state has it now
     // (depths().now) — its size, its depth, its haze and what it is drawn in front of or behind follow.
+    // → whether anything moved
     function placeMoving(S) {
       let moved = false;
       for (const ob of S.objects) {
@@ -882,22 +1594,101 @@ const MooodGL = (() => {
         const n = S.dz.now(ob.from), key = `${n.o.x}|${n.o.y}|${n.o.size}`;
         if (key === ob.placed) continue;
         ob.placed = key; moved = true;
-        const o = { ...n.o, _sw: ob.o._sw };
-        Object.assign(ob, { o, Z: n.Z, x: o.x * SW, y: o.y * H, s: Math.max(2, o.size * H) }, I.objectBox(o, SW, H));
+        const o = { ...n.o, _sw: ob.o._sw }, was = { bx: ob.bx, by: ob.by, bw: ob.bw };
+        Object.assign(ob, { o, Z: n.Z, x: o.x * SW, y: o.y * H, s: Math.max(2, o.size * H), at: n.at }, I.objectBox(o, SW, H));
         if (ROUND && !o.sky) ob.p = n.at;
+        // its painting as painted is laid over its box where it is now: its glows go with it (a live
+        // one's are where it is repainted)
+        const k = ob.bw / was.bw;
+        if (!ob.live) ob.lights = ob.lights.map(l => ({ ...l, x: ob.bx + (l.x - was.bx) * k, y: ob.by + (l.y - was.by) * k, r: l.r * k, dot: l.dot && l.dot * k }));
+      }
+      return moved;
+    }
+
+    // Where an element's light (l: in its painting's stage px, as lights are kept) is in the world, and
+    // how far it reaches (twice its glow): { at, reach } in eye heights, or null (the sky's)
+    function lightPlace(ob, l) {
+      if (ob.plane) {
+        const P = ob.plane, u = l.x / H / I.EYE, v = l.y / H / I.EYE;
+        return { at: [P.Xc + u * P.cos + v * P.sin, P.Y, P.Zc - v * P.cos + u * P.sin], reach: 2 * l.r / H / I.EYE };
+      }
+      if (ob.ground) {
+        // a row h below the horizon lies 1/h eye heights away, on the ground
+        const below = l.y - YH * H;
+        if (below < 1) return null;
+        const Z = H / below;
+        return { at: [(l.x - SW / 2) / H * Z, 0, Z], reach: 2 * l.r / H * Z };
+      }
+      if (ob.o.sky || !ob.at) return null;
+      const k = ob.at.Zp / H;
+      return { at: [ob.at.X + (l.x - ob.x) * k, ob.at.Y - (l.y - ob.y) * k, ob.at.Z], reach: 2 * l.r * k };
+    }
+    // a light's flicker now, as its glow flickers (drawObjectAt)
+    const flickerOf = (lt, x, y, t) => (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));
+    // the light in the air (engine.js: airOf), where it is seen: a source of the spec's halo (`glow`),
+    // or the haze round a point source (the light's hazeGlow)
+    function halo(S, { h, fog }, cam, t) {
+      const p = I.project(cam, ...h.at, W, H, YH);
+      if (!p) return;
+      MD = p[2];
+      const c = h.rgb.map(v => v / 255);
+      if (fog) { const r = h.reach * H / p[2]; sprite(T.glow, ID, p[0], p[1], 2 * r, 2 * r, 0, c, I.airGlow(S.look, h, p[2], t), true); return; }
+      const r = h.halo * H / p[2], a = Math.min(1, h.strength) * I.flickerNow(h, t);
+      sprite(T.glow, ID, p[0], p[1], 2 * r, 2 * r, 0, c, 0.6 * a, true);
+      sprite(T.glow, ID, p[0], p[1], 0.5 * r, 0.5 * r, 0, DOT, 0.8 * a, true);
+    }
+    // the scene's sources now (engine.js: sourcesNow): its own, and its elements' lights as last painted
+    // (sprite: the glow an element's light is drawn with — the light flickers as it does)
+    function sourcesOf(S, spec) {
+      const from = [];
+      for (const ob of S.objects) {
+        if (ob.o.kind === 'bird') continue;
+        for (const l of ob.live?.r ? ob.live.lights : ob.lights) {
+          const q = lightPlace(ob, l);
+          if (q) from.push({ id: l.id ?? String(ob.o.id ?? ob.o.kind), ...q, rgb: l.c.map(v => v * 255), strength: l.a, sprite: { lt: l, x: ob.x, y: ob.y } });
+        }
+        // its parts' (e.part), where each was painted
+        for (const part of ob.parts || []) {
+          const k = part.at.Zp / H;
+          for (const l of part.lights) {
+            const lx = part.bx + l.u * part.bw, ly = part.by + l.v * part.bh;
+            from.push({ id: l.id ?? String(ob.o.id), at: [part.at.X + (lx - part.x) * k, part.at.Y - (ly - part.y) * k, part.at.Z], reach: 2 * l.r * part.bw * k, rgb: l.c.map(v => v * 255), strength: l.a, sprite: { lt: { flicker: l.flicker, x: lx, y: ly }, x: part.x, y: part.y } });
+          }
+        }
       }
-      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);
+      return I.sourcesNow(spec, S.dz, from);
     }
 
+    // the scene and the camera this frame (what repaints, painting parts, go by)
+    let SCENE = null, CAM = null;
     function frame(S, spec, cam, t, dt, settled, goal) {
       frameNo++;
+      SCENE = S; CAM = cam;
       BYID = S.byId ??= new Map(S.objects.filter(x => x.o.id != null).map(x => [x.o.id, x]));
-      placeMoving(S);
+      const moved = placeMoving(S), parted = S.objects.some(ob => ob.parts);
+      if (parted) prepareParts(S, cam, t);
+      if (moved || parted) S.order = orderOf(S);
+      // the land hiding what stands behind its rises: for the camera as it is (kept while it stands)
+      const key = I.land() && `${cam.x}|${cam.y}|${cam.z}|${cam.h}|${cam.yaw}|${W}|${H}`;
+      landCells(S, cam);
+      if (key !== S.landKey) { S.landKey = key; S.land = key ? I.landLine([VX0, VY0, VX1, VY1], S.lands.flatMap(ob => ob.cells)) : null; }
+      LAND = S.land;
+      const look = S.look = I.lookOf(spec);
+      HAZE = look.hazeReach; FOG = look.hazeColor.map(v => v / 255);
+      // lit as much as the light is now (engine.js: lookOf): its programs and its three targets (made
+      // when it is first lit; a browser that can't write depths shows it unlit)
+      S.lit = canLight ? look.lit : 0;
+      P = S.lit ? (LITP ??= programs(true)) : PLAIN;
+      S.scene = S.lit ? (S.litScene ??= litTarget(CW, CH)) : S.plain;
+      S.sources = sourcesOf(S, spec);
+      // (its ambient level: how much a shadow takes away is the source's share of the light)
+      S.ambient = I.ambientOf(look, S.sources).reduce((a, b) => a + b) / 3;
+      const mSky = camMatrix(cam, Infinity);
+      mirrors(S, spec, cam, t, mSky);
       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]);
@@ -907,6 +1698,37 @@ const MooodGL = (() => {
       particlesAndPost(S, spec, cam, t, dt, goal);
     }
 
+    // A frame unseen (engine.js: stage.draw): the scene goes on as if it were drawn — what moves
+    // through the world is put where it is now, what is live is painted (a module's springs and steps
+    // go on, its lights and the point it marks are where they are), particles move, the sharp tiles
+    // for where the camera is are painted ahead — and nothing is drawn: the GPU does nothing. Live
+    // elements are painted coarsely, as what is out of sight is — or, `painted`, each as a drawn frame
+    // paints it (as finely as it is seen: code whose memory depends on how big it is painted goes on
+    // exactly as when drawn).
+    function tick(S, spec, cam, t, dt, goal, painted) {
+      frameNo++;
+      SCENE = S; CAM = cam;
+      BYID = S.byId ??= new Map(S.objects.filter(x => x.o.id != null).map(x => [x.o.id, x]));
+      // as a frame does (frame, above): what moves placed, the parts where they stand (painted with
+      // their element), the order, the light's sources (what reads e.lights is lit as when drawn)
+      const moved = placeMoving(S), parted = S.objects.some(ob => ob.parts);
+      if (parted) {
+        if (painted) prepareParts(S, cam, t);
+        else for (const ob of S.objects) if (ob.parts) { if (ob.live) unseen(ob, t); for (const part of ob.parts) placePart(S, part); }
+      }
+      if (moved || parted) S.order = orderOf(S);
+      S.sources = sourcesOf(S, spec);
+      for (const item of S.order) if (item.ob?.live) { if (painted) drawObjectAt(item.ob, cam, t, false); else unseen(item.ob, t); }
+      const FM = [1, 0, 0, 1, (W - SW) / 2, 0];
+      for (const ob of S.inserts) if (I.opening(ob.o) >= 0.002) { if (painted) textureOf(ob, FM, t); else unseen(ob, t); }
+      for (const { p, list } of S.particles) {
+        const wind = (p.wind ?? 0) * 60 * S.u;
+        for (const q of list) I.moveParticle(p.kind, q, CW, CH, t, dt, S.u, wind);
+      }
+      refine(S, cam, goal || cam);
+      evict(S);
+    }
+
     // 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) {
@@ -923,12 +1745,18 @@ const MooodGL = (() => {
           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 });
         }
+        for (const part of ob.parts || []) items.push({ part, d: Math.hypot(part.p.X - cam.x, part.p.Z - cam.z) });
       }
-      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);
+      for (const a of I.airOf(S.sources, S.look, h => Math.hypot(h.at[0] - cam.x, h.at[2] - cam.z))) items.push({ air: a, d: a.Z });
+      I.arrange(items.sort((a, b) => b.d - a.d), S.rules, idOf);
+      for (const it of items) {
+        if (it.air) { halo(S, it.air, cam, t); continue; }
+        const p = (it.ob || it.part).p;
+        castOn(S, 'ground', it, cam, t);
+        HZ = it.ob?.plane ? NOHAZE : haze(p.Zp, Math.hypot(p.X - cam.x, p.Z - cam.z));
+        drawItem(S, it, cam, t, items);
         HZ = NOHAZE;
+        if (it.ob) castOn(S, it.ob, null, cam, t);
       }
     }
 
@@ -939,8 +1767,17 @@ const MooodGL = (() => {
       }
       for (const c of S.celestials) rect(c.tex, mSky, c.x, c.y, c.size, c.size);
 
+      // the light in the air (the halos of the scene's own lights, the haze round its sources), each
+      // at its depth among the rest
+      const halos = I.airOf(S.sources, S.look, h => h.at[2]);
       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; }
+        while (halos.length && halos[0].Z >= item.Z) halo(S, halos.shift(), cam, t);
+        if (!item.l) {
+          castOn(S, 'ground', item, cam, t);
+          HZ = isFinite(item.Z) ? haze(item.Z, item.Z - cam.z) : NOHAZE; drawItem(S, item, cam, t, S.order); HZ = NOHAZE;
+          if (item.ob) castOn(S, item.ob, null, cam, t);
+          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);
@@ -948,6 +1785,7 @@ const MooodGL = (() => {
           drawWater(S, l, Math.round(m[5] + m[3] * L.y * H), t);
           continue;
         }
+        LT = [1, l.Z - cam.z]; MD = l.Z - cam.z;
         if (l.tex) {
           HZ = haze(l.Z, l.Z - cam.z);
           drawLayer(l, m, cam);
@@ -961,12 +1799,15 @@ const MooodGL = (() => {
             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);
           }
         }
+        LT = UNLIT;
       }
-
+      for (const a of halos) halo(S, a, cam, t);
     }
 
     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
+      // particles live in the canvas's pixels; in a lit scene a few metres off
+      const u = S.u, PM = [1, 0, 0, 1, VX0, VY0];
+      LT = [1, 3];
       for (const { p, c, list } of S.particles) {
         const wind = (p.wind ?? 0) * 60 * u;
         for (const q of list) {
@@ -987,36 +1828,71 @@ const MooodGL = (() => {
           }
         }
       }
+      LT = UNLIT;
+      // inserts over it all, fixed to the frame
+      const FM = [1, 0, 0, 1, (W - SW) / 2, 0];
+      for (const ob of S.inserts) {
+        if (I.opening(ob.o) < 0.002) continue;
+        const { tx, r } = textureOf(ob, FM, t);
+        rect(tx, FM, r.x, r.y, r.w, r.h);
+      }
       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);
+      const lt = I.lookOf(spec);
+      gl.useProgram(P.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));
+      gl.uniform1i(P.pu.scene, 0);
+      gl.uniform2f(P.pu.res, W, H);
+      gl.uniform2f(P.pu.at, OX, CH - OY - H);
+      gl.uniform2f(P.pu.canvas, CW, CH);
+      gl.uniform2f(P.pu.off, OX, OY);
+      gl.uniform3f(P.pu.tint, ...(lt.tint ? lt.tint.map(v => v / 255) : WHITE));
+      gl.uniform1f(P.pu.tintA, lt.tint ? I.clamp(lt.tintStrength, 0, 0.5) : 0);
+      gl.uniform1f(P.pu.vig, 0.75 * I.clamp(lt.vignette, 0, 1));
+      gl.uniform1f(P.pu.grain, 0.1 * I.clamp(lt.grain, 0, 1));
+      gl.uniform1f(P.pu.bright, Math.max(0, lt.brightness));
+      gl.uniform1f(P.pu.sat, Math.max(0, lt.saturation));
+      gl.uniform1f(P.pu.seed, Math.floor(Math.random() * 4096));
+      if (S.lit) lightUniforms(S, lt, cam, t);
       // 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);
+      gl.uniform1f(P.pu.fade, typeof sv.fade === 'number' ? I.clamp(sv.fade, 0, 1) : 0);
+      gl.uniform3f(P.pu.fadeCol, ...(typeof sv.fade_color === 'string' ? col(sv.fade_color) : [0, 0, 0]));
+      band(P.pprog, VY0, VY1);
 
       refine(S, cam, goal || cam);
       evict(S);
     }
 
-    return { name: 'webgl', fpsIdle: 60, pixelBudget: Infinity, resMax: 2, build, frame };
+    // A lit scene's light for the final pass: the ambient (engine.js: ambientOf), and the LIGHTS point
+    // sources that light most of what is seen from here — the strongest, by how near the camera their
+    // reach comes (one far off lights little of the frame)
+    function lightUniforms(S, lt, cam, t) {
+      const amb = I.ambientOf(lt, S.sources), points = S.sources.filter(s => !s.dir && s.strength > 0.002);
+      const weight = s => s.strength * s.reach / Math.max(s.reach, Math.hypot(s.at[0] - cam.x, s.at[1] - (cam.h ?? 1), s.at[2] - cam.z));
+      points.sort((a, b) => weight(b) - weight(a)).length = Math.min(points.length, LIGHTS);
+      const lp = new Float32Array(4 * LIGHTS), lc = new Float32Array(3 * LIGHTS);
+      points.forEach((s, i) => {
+        const f = s.sprite ? flickerOf(s.sprite.lt, s.sprite.x, s.sprite.y, t) : I.flickerNow(s, t);
+        lp.set([...s.at, s.reach], 4 * i);
+        lc.set(s.rgb.map(v => v / 255 * s.strength * f * lt.lit), 3 * i);
+      });
+      gl.activeTexture(gl.TEXTURE1); gl.bindTexture(gl.TEXTURE_2D, S.scene.lit); gl.uniform1i(P.pu.lit, 1);
+      gl.activeTexture(gl.TEXTURE2); gl.bindTexture(gl.TEXTURE_2D, S.scene.glow); gl.uniform1i(P.pu.glow, 2);
+      gl.activeTexture(gl.TEXTURE0);
+      gl.uniform3f(P.pu.amb, ...amb);
+      gl.uniform1i(P.pu.n, points.length);
+      gl.uniform4fv(P.pu.lp, lp);
+      gl.uniform3fv(P.pu.lc, lc);
+      gl.uniform4f(P.pu.cam, cam.x, cam.z, cam.h ?? 1, cam.yaw || 0);
+      gl.uniform2f(P.pu.view, cam.y, YH);
+    }
+
+    return { name: 'webgl', fpsIdle: 60, pixelBudget: Infinity, resMax: 2, build, frame, tick };
   }
 
   return { create };