nodality 1.0.181 → 1.0.184

package/lib/raster-ops.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.181
+ * nodality v1.0.184
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */
@@ -46,6 +46,32 @@
 
 const MAX_BLOBS = 12;
 
+// ── Drivers ──────────────────────────────────────────────────────────
+// What steers a reactive op. Previously "react to the pointer" was
+// hardcoded into offset and duotone; a driver makes the input a value in
+// the node data, so the same op can be aimed at different signals:
+//
+//   { op: "offset", by: "mouse" }    { op: "offset", by: "scroll" }
+//
+// Each driver returns a focus point in device pixels plus an amount in
+// 0..1 that the op scales its effect by. Ops read them as u<i>_dpos and
+// u<i>_damt; the pipeline evaluates and uploads them once per frame.
+const DRIVERS = {
+    mouse: (c) => ({ x: c.mouseX, y: c.mouseY, amt: 1 }),
+    // Same focus as mouse, but faded in and out with the hover state, so
+    // the effect resolves away when the pointer leaves.
+    hover: (c) => ({ x: c.mouseX, y: c.mouseY, amt: c.hover }),
+    // A band that travels up the element as it crosses the viewport.
+    scroll: (c) => ({ x: c.w * 0.5, y: c.h * c.scroll, amt: 1 }),
+    // Hands-free: the focus drifts on a Lissajous path.
+    time: (c) => ({
+        x: c.w * (0.5 + 0.34 * Math.cos(c.t * 0.6)),
+        y: c.h * (0.5 + 0.34 * Math.sin(c.t * 0.8)),
+        amt: 1,
+    }),
+};
+const DRIVER_NAMES = Object.keys(DRIVERS);
+
 const REGISTRY = {
     hexalize: {
         stage: "cell",
@@ -71,13 +97,17 @@ const REGISTRY = {
         // version shifted only the texture lookup, which left grid
         // edges frozen in screen space.)
         stage: "warp",
-        decl: (p) => `uniform float ${p}strength; uniform float ${p}radius;`,
+        // Steered by the pointer unless the node says otherwise, which is
+        // what this op did before drivers existed.
+        defaultDriver: "mouse",
+        decl: (p) => `uniform float ${p}strength; uniform float ${p}radius;
+            uniform vec2 ${p}dpos; uniform float ${p}damt;`,
         code: (p) => `
         {
-            float d = length(warped - u_mouse);
+            float d = length(warped - ${p}dpos);
             float fall = 1.0 - smoothstep(0.0, ${p}radius, d);
-            vec2 dir = d > 0.5 ? (warped - u_mouse) / d : vec2(0.0);
-            warped -= dir * ${p}strength * fall;
+            vec2 dir = d > 0.5 ? (warped - ${p}dpos) / d : vec2(0.0);
+            warped -= dir * ${p}strength * fall * ${p}damt;
         }`,
         uniforms: (node, dpr) => ({
             strength: ["1f", (node.strength || 20) * dpr],
@@ -87,13 +117,15 @@ const REGISTRY = {
 
     duotone: {
         stage: "color",
-        decl: (p) => `uniform vec3 ${p}a; uniform vec3 ${p}b; uniform float ${p}radius;`,
+        decl: (p) => `uniform vec3 ${p}a; uniform vec3 ${p}b; uniform float ${p}radius;
+            uniform vec2 ${p}dpos; uniform float ${p}damt;`,
         code: (p, node) => `
         {
             float lum = dot(col, vec3(0.299, 0.587, 0.114));
             vec3 duo = mix(${p}a, ${p}b, lum);
-            ${node.by === "mouse"
-                ? `float mask = 1.0 - smoothstep(${p}radius * 0.35, ${p}radius, length(center - u_mouse));`
+            ${node.by
+                ? `float mask = (1.0 - smoothstep(${p}radius * 0.35, ${p}radius,
+                       length(center - ${p}dpos))) * ${p}damt;`
                 : `float mask = 1.0;`}
             col = mix(col, duo, mask);
         }`,
@@ -146,126 +178,429 @@ const REGISTRY = {
     // projection at all — the whole simulation is a single pass.
     //
     //   { op: "stir", strength: 26, swirl: 2.4, decay: 0.985 }
+    // Halftone: the print dot screen. Tone is carried by dot AREA on a
+    // rotated grid rather than by intensity, the way offset lithography
+    // reproduces a continuous-tone image with a single ink.
+    //
+    //   { op: "halftone", size: 6, angle: 15, ink: "#0B1B2B" }
+    //
+    // With a driver the screen coarsens toward the focus, like holding a
+    // loupe over the sheet.
+    halftone: {
+        stage: "color",
+        decl: (p) => `
+            uniform float ${p}size;
+            uniform float ${p}angle;
+            uniform vec3 ${p}ink;
+            uniform vec3 ${p}paper;
+            uniform float ${p}soft;
+            uniform float ${p}radius;
+            uniform vec2 ${p}dpos;
+            uniform float ${p}damt;`,
+        code: (p, node) => `
+        {
+            float lum = dot(col, vec3(0.299, 0.587, 0.114));
+            float sz = ${p}size;${node.by ? `
+            float fd = 1.0 - smoothstep(0.0, ${p}radius, length(frag - ${p}dpos));
+            sz *= 1.0 + fd * ${p}damt * 1.8;` : ``}
+            // Screen angle: rotating the grid is what stops the dots
+            // reading as a horizontal/vertical texture.
+            float ca = cos(${p}angle), sa = sin(${p}angle);
+            vec2 rp = vec2(ca * frag.x - sa * frag.y,
+                           sa * frag.x + ca * frag.y) / max(sz, 1.0);
+            vec2 cell = fract(rp) - 0.5;
+            // Dot radius from tone: darker tone prints a bigger dot.
+            // sqrt because ink coverage goes as area, not radius.
+            float rr = sqrt(clamp(1.0 - lum, 0.0, 1.0)) * 0.55;
+            float dm = smoothstep(rr, rr - ${p}soft, length(cell));
+            col = mix(${p}paper, ${p}ink, dm);
+        }`,
+        uniforms: (node, dpr) => ({
+            size: ["1f", (node.size || 6) * dpr],
+            angle: ["1f", ((node.angle != null ? node.angle : 15) * Math.PI) / 180],
+            ink: ["3fv", hexToRgb(node.ink || "#0B1B2B")],
+            paper: ["3fv", hexToRgb(node.paper || "#FFFFFF")],
+            soft: ["1f", node.softness != null ? node.softness : 0.08],
+            radius: ["1f", (node.radius || 220) * dpr],
+        }),
+    },
+
+    // Chromatic aberration: the only op that uses the displace stage. It
+    // does not move the sample position itself, it sets `chroma`, the
+    // per-channel split the sampler applies - red and blue are fetched
+    // either side of green along the radial direction, the way a simple
+    // lens disperses wavelengths toward its edges.
+    //
+    //   { op: "aberration", amount: 6 }            // radial, lens-like
+    //   { op: "aberration", amount: 14, by: "mouse" }  // focused at the pointer
+    aberration: {
+        stage: "displace",
+        chroma: true,
+        decl: (p) => `
+            uniform float ${p}amount;
+            uniform float ${p}radius;
+            uniform vec2 ${p}dpos;
+            uniform float ${p}damt;`,
+        code: (p, node) => `
+        {
+            vec2 ctr = ${node.by ? `${p}dpos` : `u_res * 0.5`};
+            vec2 dv = sampleP - ctr;
+            float dl = length(dv);
+            vec2 dir = dl > 0.5 ? dv / dl : vec2(0.0);
+            ${node.by
+                ? `float amt = ${p}amount * ${p}damt *
+                       (1.0 - smoothstep(0.0, ${p}radius, dl));`
+                : `float amt = ${p}amount * (dl / max(length(u_res) * 0.5, 1.0));`}
+            chroma += dir * amt;
+        }`,
+        uniforms: (node, dpr) => ({
+            amount: ["1f", (node.amount != null ? node.amount : 6) * dpr],
+            radius: ["1f", (node.radius || 240) * dpr],
+        }),
+    },
+
+    // Stirred liquid: an incompressible fluid whose velocity field warps
+    // the content and whose dye field colours it.
+    //
+    // Implemented from the published algorithm, not from any particular
+    // existing codebase:
+    //   J. Stam, "Stable Fluids", SIGGRAPH '99, 121-128 - the
+    //     unconditionally stable operator splitting used here: add
+    //     forces, advect by a backward particle trace, then project the
+    //     velocity onto its divergence-free part via a Poisson solve.
+    //   M. Harris, "Fast Fluid Dynamics Simulation on the GPU", GPU Gems
+    //     ch. 38 (2003) - mapping each operator onto a fragment program
+    //     over ping-ponged textures, Jacobi iterations for the pressure.
+    //   R. Fedkiw, J. Stam, H. Jensen, "Visual Simulation of Smoke",
+    //     SIGGRAPH '01 - vorticity confinement, which restores the
+    //     small-scale swirl that a coarse grid numerically damps away.
+    //
+    // Per frame: splat -> curl -> confine -> divergence -> pressure
+    // (Jacobi) -> subtract gradient -> advect velocity -> advect dye.
+    // The projection step is what distinguishes this from a plain
+    // velocity-texture smear: enforcing div(v)=0 is what makes the flow
+    // roll into persistent vortices instead of piling up and dissipating.
+    //
+    // Needs WebGL2 with float render targets; without them the op
+    // disables itself and the rest of the chain still renders.
     stir: {
-        // Warp: swirl the coordinate space (so a cell op downstream tiles
-        // the ALREADY-stirred content). Color: a faint moving sheen.
         stage: ["warp", "color"],
         decl: (p) => `
-            uniform sampler2D ${p}field;
+            uniform sampler2D ${p}vel;
+            uniform sampler2D ${p}dye;
             uniform float ${p}strength;
+            uniform float ${p}dyemix;
+            uniform float ${p}intensity;
             uniform float ${p}sheen;
-            uniform vec3 ${p}tint;
-            uniform float ${p}enc;
-            uniform float ${p}range;
-            vec2 ${p}flow(vec2 uvp) {
-                vec4 t = texture2D(${p}field, clamp(uvp, 0.001, 0.999));
-                return ${p}enc > 0.5 ? (t.xy * 2.0 - 1.0) * ${p}range : t.xy;
-            }`,
+            uniform vec3 ${p}tint;`,
         code: (p, node, stage) => stage === "warp" ? `
         {
-            // frag/warped are top-down pixels; the field is bottom-up
-            // [0,1] — flip y going in, and flip the y of the vector
-            // coming out so content drags WITH the pointer.
+            // frag/warped are top-down pixels, the field is bottom-up
+            // [0,1]: flip y going in, and flip the y of the vector coming
+            // out so the content drags WITH the pointer.
             vec2 fuv = vec2(warped.x / u_res.x, 1.0 - warped.y / u_res.y);
-            vec2 m = ${p}flow(fuv);
-            warped += vec2(m.x, -m.y) * ${p}strength;
+            vec2 v = texture2D(${p}vel, clamp(fuv, 0.001, 0.999)).xy;
+            warped += vec2(v.x, -v.y) * ${p}strength;
         }` : `
         {
-            // Moving liquid catches light: brighten toward the tint
-            // where the flow is fast. Sampled at the cell centre so it
-            // stays flat per tile when a cell op runs upstream.
-            vec2 suv = vec2(center.x / u_res.x, 1.0 - center.y / u_res.y);
-            float sm = length(${p}flow(suv));
-            col = mix(col, ${p}tint, (1.0 - exp(-sm * 5.0)) * ${p}sheen);
+            // Sampled at the CONTINUOUS warped position, never at the
+            // cell centre: a cell op upstream (hexalize) snaps the cell
+            // centre to one point per tile, which would quantise the
+            // liquid into flat per-hex patches instead of smooth swirls.
+            vec2 suv = vec2(warped.x / u_res.x, 1.0 - warped.y / u_res.y);
+            vec3 dc = texture2D(${p}dye, clamp(suv, 0.001, 0.999)).rgb;
+            float mag = length(dc);
+            // Colour is carried IN the dye field and advected with it, so
+            // a ribbon keeps its hue while the flow folds it. Deriving
+            // colour from the local flow direction instead would make
+            // neighbouring pixels jump hue and read as confetti.
+            vec3 liquid = mag > 1e-4 ? clamp(dc / mag * 1.25, 0.0, 1.0) : ${p}tint;
+            float amt = clamp((1.0 - exp(-mag * ${p}intensity)) * ${p}dyemix, 0.0, 1.0);
+            // Straight-alpha OVER so a later overlay op (blobs) still
+            // composites correctly on top of the liquid.
+            float na = amt + ovA * (1.0 - amt);
+            ovCol = (liquid * amt + ovCol * ovA * (1.0 - amt)) / max(na, 1e-4);
+            ovA = na;
+
+            // Faint sheen on the content itself where the flow is fast.
+            float sp = length(texture2D(${p}vel, clamp(suv, 0.001, 0.999)).xy);
+            col = mix(col, ${p}tint, (1.0 - exp(-sp * 0.7)) * ${p}sheen);
         }`,
         uniforms: (node, dpr) => ({
             strength: ["1f", (node.strength != null ? node.strength : 26) * dpr],
-            sheen: ["1f", node.sheen != null ? node.sheen : 0.25],
-            tint: ["3fv", hexToRgb(node.tint || "#BFE9FF")],
+            sheen: ["1f", node.sheen != null ? node.sheen : 0.15],
+            tint: ["3fv", hexToRgb(node.tint || "#7FD4FF")],
+            dyemix: ["1f", node.dye != null ? node.dye : 0.85],
+            intensity: ["1f", node.intensity != null ? node.intensity : 1.6],
         }),
-        // Stateful simulation. The pipeline creates the ping-pong pair,
-        // compiles this fragment source, and feeds s_point / s_impulse /
-        // s_dt every frame; everything else comes from `uniforms` here.
-        field: {
-            frag: () => `
+
+        // ── The simulation ────────────────────────────────────────────
+        // Declared as data: the pipeline allocates the targets, compiles
+        // the programs, and calls step() once per frame.
+        solver: {
+            resolutions: (node) => ({
+                sim: Math.max(32, Math.min(node.resolution || 128, 512)),
+                dye: Math.max(64, Math.min(node.dyeResolution || 512, 1024)),
+            }),
+            // read/write pairs ping-pong; single targets are scratch.
+            targets: {
+                velocity: { double: true, res: "sim", fmt: "rg", smooth: true },
+                dye: { double: true, res: "dye", fmt: "rgba", smooth: true },
+                pressure: { double: true, res: "sim", fmt: "r", smooth: false },
+                divergence: { double: false, res: "sim", fmt: "r", smooth: false },
+                vorticity: { double: false, res: "sim", fmt: "r", smooth: false },
+            },
+            // Which target each main-pass sampler reads.
+            samplers: { vel: "velocity", dye: "dye" },
+
+            programs: {
+                // Gaussian source term. Distance is measured as a
+                // fraction of the element's LONGER side so the radius
+                // means the same thing whatever the element's shape.
+                splat: `
 precision highp float;
-uniform sampler2D s_field;
-uniform vec2 s_texel;
-uniform float s_dt;
-uniform float s_decay;
-uniform float s_swirl;
-uniform float s_advect;
-uniform vec2 s_point;
-uniform vec2 s_impulse;
-uniform float s_radius;
-uniform float s_aspect;
-uniform float s_idle;
-uniform float s_time;
-uniform float s_enc;
-uniform float s_range;
-
-vec2 rd(vec2 uvp) {
-    vec4 t = texture2D(s_field, clamp(uvp, 0.0, 1.0));
-    return s_enc > 0.5 ? (t.xy * 2.0 - 1.0) * s_range : t.xy;
-}
+uniform sampler2D u_src;
+uniform vec2 u_texel;
+uniform vec2 u_point;
+uniform vec3 u_amount;
+uniform float u_radius;
+uniform float u_aspect;
+void main() {
+    vec2 uv = gl_FragCoord.xy * u_texel;
+    vec2 d = uv - u_point;
+    if (u_aspect >= 1.0) d.y /= u_aspect; else d.x *= u_aspect;
+    float g = exp(-dot(d, d) / max(u_radius * u_radius, 1e-6));
+    gl_FragColor = vec4(texture2D(u_src, uv).xyz + u_amount * g, 1.0);
+}`,
 
+                // Semi-Lagrangian advection (Stam 1999): trace the
+                // characteristic backwards and resample. Unconditionally
+                // stable for any timestep, which is the whole point.
+                advect: `
+precision highp float;
+uniform sampler2D u_vel;
+uniform sampler2D u_src;
+uniform vec2 u_texel;
+uniform float u_dt;
+uniform float u_diss;
 void main() {
-    vec2 uv = gl_FragCoord.xy * s_texel;
-    vec2 m = rd(uv);
-
-    // 1. Semi-Lagrangian backtrace: momentum rides its own flow.
-    vec2 a = rd(uv - m * s_advect * s_dt);
-
-    // 2. Curl of the field, normalised so the swirl setting is
-    //    resolution independent (central differences over two texels).
-    float r = rd(uv + vec2(s_texel.x, 0.0)).y;
-    float l = rd(uv - vec2(s_texel.x, 0.0)).y;
-    float t = rd(uv + vec2(0.0, s_texel.y)).x;
-    float b = rd(uv - vec2(0.0, s_texel.y)).x;
-    float curl = ((r - l) - (t - b)) * 0.5 / s_texel.y;
-
-    // 3. Rotate momentum by the local curl angle. Norm preserving, so
-    //    eddies spin and survive rather than smearing out — this is
-    //    what replaces vorticity confinement + pressure projection.
-    float th = curl * s_swirl * s_dt;
-    float cs = cos(th), sn = sin(th);
-    a = mat2(cs, sn, -sn, cs) * a;
-
-    // 4. Viscous decay (frame-rate independent).
-    a *= pow(s_decay, s_dt * 60.0);
-
-    // 5. The spoon: a gaussian impulse of pointer velocity.
-    vec2 d = uv - s_point;
-    d.x *= s_aspect;
-    a += s_impulse * exp(-dot(d, d) / max(s_radius * s_radius, 1e-6));
-
-    // 6. Optional hands-free stir: a source orbiting the centre.
-    if (s_idle > 0.0) {
-        float ia = s_time * 0.6;
-        vec2 ic = vec2(0.5 + 0.22 * cos(ia), 0.5 + 0.22 * sin(ia));
-        vec2 id = uv - ic;
-        id.x *= s_aspect;
-        a += vec2(-sin(ia), cos(ia)) * s_idle *
-             exp(-dot(id, id) / max(s_radius * s_radius, 1e-6)) * s_dt * 60.0;
-    }
+    vec2 uv = gl_FragCoord.xy * u_texel;
+    vec2 back = uv - texture2D(u_vel, uv).xy * u_dt;
+    gl_FragColor = vec4(texture2D(u_src, clamp(back, 0.0, 1.0)).xyz * u_diss, 1.0);
+}`,
+
+                // Scalar vorticity of a 2D field: d(vy)/dx - d(vx)/dy.
+                curl: `
+precision highp float;
+uniform sampler2D u_vel;
+uniform vec2 u_texel;
+void main() {
+    vec2 uv = gl_FragCoord.xy * u_texel;
+    float r = texture2D(u_vel, uv + vec2(u_texel.x, 0.0)).y;
+    float l = texture2D(u_vel, uv - vec2(u_texel.x, 0.0)).y;
+    float t = texture2D(u_vel, uv + vec2(0.0, u_texel.y)).x;
+    float b = texture2D(u_vel, uv - vec2(0.0, u_texel.y)).x;
+    gl_FragColor = vec4(0.5 * ((r - l) - (t - b)), 0.0, 0.0, 1.0);
+}`,
 
-    // Keep the field inside the encodable range.
-    float mg = length(a);
-    if (mg > s_range) a *= s_range / mg;
+                // Vorticity confinement (Fedkiw et al. 2001): push the
+                // velocity along N x omega, where N is the unit gradient
+                // of |omega|, i.e. toward the centre of each eddy. This
+                // feeds energy back into swirl the grid would otherwise
+                // smooth out.
+                confine: `
+precision highp float;
+uniform sampler2D u_vel;
+uniform sampler2D u_curl;
+uniform vec2 u_texel;
+uniform float u_eps;
+uniform float u_dt;
+void main() {
+    vec2 uv = gl_FragCoord.xy * u_texel;
+    float r = texture2D(u_curl, uv + vec2(u_texel.x, 0.0)).x;
+    float l = texture2D(u_curl, uv - vec2(u_texel.x, 0.0)).x;
+    float t = texture2D(u_curl, uv + vec2(0.0, u_texel.y)).x;
+    float b = texture2D(u_curl, uv - vec2(0.0, u_texel.y)).x;
+    float c = texture2D(u_curl, uv).x;
+    vec2 grad = 0.5 * vec2(abs(r) - abs(l), abs(t) - abs(b));
+    vec2 n = grad / (length(grad) + 1e-5);
+    vec2 force = u_eps * c * vec2(n.y, -n.x);
+    vec2 v = texture2D(u_vel, uv).xy + force * u_dt;
+    gl_FragColor = vec4(clamp(v, -64.0, 64.0), 0.0, 1.0);
+}`,
 
-    gl_FragColor = s_enc > 0.5
-        ? vec4(a / s_range * 0.5 + 0.5, 0.0, 1.0)
-        : vec4(a, 0.0, 1.0);
+                // div(v). The walls reflect, so the fluid stays in the box.
+                divergence: `
+precision highp float;
+uniform sampler2D u_vel;
+uniform vec2 u_texel;
+void main() {
+    vec2 uv = gl_FragCoord.xy * u_texel;
+    float r = texture2D(u_vel, uv + vec2(u_texel.x, 0.0)).x;
+    float l = texture2D(u_vel, uv - vec2(u_texel.x, 0.0)).x;
+    float t = texture2D(u_vel, uv + vec2(0.0, u_texel.y)).y;
+    float b = texture2D(u_vel, uv - vec2(0.0, u_texel.y)).y;
+    vec2 c = texture2D(u_vel, uv).xy;
+    if (uv.x - u_texel.x < 0.0) l = -c.x;
+    if (uv.x + u_texel.x > 1.0) r = -c.x;
+    if (uv.y - u_texel.y < 0.0) b = -c.y;
+    if (uv.y + u_texel.y > 1.0) t = -c.y;
+    gl_FragColor = vec4(0.5 * ((r - l) + (t - b)), 0.0, 0.0, 1.0);
 }`,
-            uniforms: (node) => ({
-                s_decay: ["1f", node.decay != null ? node.decay : 0.985],
-                s_swirl: ["1f", node.swirl != null ? node.swirl : 2.4],
-                s_advect: ["1f", node.advect != null ? node.advect : 0.35],
-                s_radius: ["1f", node.radius != null ? node.radius : 0.10],
-                s_idle: ["1f", node.idle != null ? node.idle : 0.0],
-            }),
-            force: (node) => (node.force != null ? node.force : 1.0),
-            resolution: (node) => Math.max(32, Math.min(node.resolution || 192, 512)),
+
+                // One Jacobi sweep of the Poisson equation lap(p) = div(v)
+                // (Harris 2003). Run a handful of these per frame.
+                jacobi: `
+precision highp float;
+uniform sampler2D u_p;
+uniform sampler2D u_div;
+uniform vec2 u_texel;
+void main() {
+    vec2 uv = gl_FragCoord.xy * u_texel;
+    float r = texture2D(u_p, uv + vec2(u_texel.x, 0.0)).x;
+    float l = texture2D(u_p, uv - vec2(u_texel.x, 0.0)).x;
+    float t = texture2D(u_p, uv + vec2(0.0, u_texel.y)).x;
+    float b = texture2D(u_p, uv - vec2(0.0, u_texel.y)).x;
+    float d = texture2D(u_div, uv).x;
+    gl_FragColor = vec4((r + l + t + b - d) * 0.25, 0.0, 0.0, 1.0);
+}`,
+
+                // v <- v - grad(p): the projection itself. After this the
+                // velocity is (discretely) divergence free.
+                subtract: `
+precision highp float;
+uniform sampler2D u_p;
+uniform sampler2D u_vel;
+uniform vec2 u_texel;
+void main() {
+    vec2 uv = gl_FragCoord.xy * u_texel;
+    float r = texture2D(u_p, uv + vec2(u_texel.x, 0.0)).x;
+    float l = texture2D(u_p, uv - vec2(u_texel.x, 0.0)).x;
+    float t = texture2D(u_p, uv + vec2(0.0, u_texel.y)).x;
+    float b = texture2D(u_p, uv - vec2(0.0, u_texel.y)).x;
+    vec2 v = texture2D(u_vel, uv).xy - 0.5 * vec2(r - l, t - b);
+    gl_FragColor = vec4(v, 0.0, 1.0);
+}`,
+
+                // Scale a target in place (used to carry a fraction of
+                // the previous pressure into the next solve).
+                decay: `
+precision highp float;
+uniform sampler2D u_tex;
+uniform vec2 u_texel;
+uniform float u_value;
+void main() {
+    gl_FragColor = texture2D(u_tex, gl_FragCoord.xy * u_texel) * u_value;
+}`,
+            },
+
+            // Colour dropped in by the spoon. With rainbow on, the hue
+            // comes from the stroke direction at the moment of injection
+            // and is then carried by the dye, so it stays coherent as the
+            // flow folds it.
+            splatColor: (node, dx, dy) => {
+                const amt = node.dyeAmount != null ? node.dyeAmount : 0.6;
+                if (!node.rainbow) {
+                    const c = hexToRgb(node.tint || "#7FD4FF");
+                    return [c[0] * amt, c[1] * amt, c[2] * amt];
+                }
+                const a = Math.atan2(dy, dx);
+                return [
+                    (0.5 + 0.5 * Math.cos(a)) * amt,
+                    (0.5 + 0.5 * Math.cos(a + 2.0944)) * amt,
+                    (0.5 + 0.5 * Math.cos(a + 4.1888)) * amt,
+                ];
+            },
+
+            step: (S, node, ctx) => {
+                const dt = Math.min(ctx.dt, 1 / 30);
+                const simT = 1 / S.res.sim;
+                const dyeT = 1 / S.res.dye;
+                const pow = (base, d) => Math.pow(base, d * 60);
+
+                // 1. Forces: splat momentum and dye at the pointer.
+                if (ctx.moving) {
+                    const f = node.force != null ? node.force : 1.0;
+                    S.use("splat");
+                    S.f1("u_radius", node.radius != null ? node.radius : 0.1);
+                    S.f1("u_aspect", ctx.aspect);
+                    S.f2("u_point", ctx.px, ctx.py);
+
+                    S.f2("u_texel", simT, simT);
+                    S.smp("u_src", S.read("velocity"), 0);
+                    S.f3("u_amount", ctx.dx * f, ctx.dy * f, 0);
+                    S.blit(S.write("velocity"));
+                    S.swap("velocity");
+
+                    S.f2("u_texel", dyeT, dyeT);
+                    S.smp("u_src", S.read("dye"), 0);
+                    S.f3("u_amount", ctx.col[0], ctx.col[1], ctx.col[2]);
+                    S.blit(S.write("dye"));
+                    S.swap("dye");
+                }
+
+                // 2. Vorticity confinement.
+                S.use("curl");
+                S.f2("u_texel", simT, simT);
+                S.smp("u_vel", S.read("velocity"), 0);
+                S.blit(S.single("vorticity"));
+
+                S.use("confine");
+                S.f2("u_texel", simT, simT);
+                S.f1("u_eps", node.curl != null ? node.curl : 2.2);
+                S.f1("u_dt", dt);
+                S.smp("u_vel", S.read("velocity"), 0);
+                S.smp("u_curl", S.single("vorticity"), 1);
+                S.blit(S.write("velocity"));
+                S.swap("velocity");
+
+                // 3. Projection: divergence -> pressure -> subtract.
+                S.use("divergence");
+                S.f2("u_texel", simT, simT);
+                S.smp("u_vel", S.read("velocity"), 0);
+                S.blit(S.single("divergence"));
+
+                S.use("decay");
+                S.f2("u_texel", simT, simT);
+                S.f1("u_value", pow(node.pressure != null ? node.pressure : 0.8, dt));
+                S.smp("u_tex", S.read("pressure"), 0);
+                S.blit(S.write("pressure"));
+                S.swap("pressure");
+
+                S.use("jacobi");
+                S.f2("u_texel", simT, simT);
+                S.smp("u_div", S.single("divergence"), 1);
+                const iters = Math.max(1, Math.min(node.pressureIterations || 6, 40));
+                for (let k = 0; k < iters; k++) {
+                    S.smp("u_p", S.read("pressure"), 0);
+                    S.blit(S.write("pressure"));
+                    S.swap("pressure");
+                }
+
+                S.use("subtract");
+                S.f2("u_texel", simT, simT);
+                S.smp("u_p", S.read("pressure"), 0);
+                S.smp("u_vel", S.read("velocity"), 1);
+                S.blit(S.write("velocity"));
+                S.swap("velocity");
+
+                // 4. Advection: velocity by itself, then dye by velocity.
+                S.use("advect");
+                S.f1("u_dt", dt);
+                S.f2("u_texel", simT, simT);
+                S.smp("u_vel", S.read("velocity"), 0);
+                S.smp("u_src", S.read("velocity"), 0);
+                S.f1("u_diss", pow(node.decay != null ? node.decay : 0.985, dt));
+                S.blit(S.write("velocity"));
+                S.swap("velocity");
+
+                S.f2("u_texel", dyeT, dyeT);
+                S.smp("u_vel", S.read("velocity"), 0);
+                S.smp("u_src", S.read("dye"), 1);
+                S.f1("u_diss", pow(node.dyeFade != null ? node.dyeFade : 0.97, dt));
+                S.blit(S.write("dye"));
+                S.swap("dye");
+            },
         },
     },
 
@@ -575,6 +910,13 @@ function buildFragmentShader(nodes) {
     // darkening only applies when a cell op runs without an edges op.
     const hasEdges = nodes.some((n) => n.op === "edges");
     const defaultSeam = hasEdges ? "" : "    col *= 1.0 - edge * 0.55;";
+    // Per-channel resampling costs two extra fetches, so it is only
+    // emitted when a displace-stage op actually asks for dispersion.
+    const hasChroma = nodes.some((n) => (REGISTRY[n.op] || {}).chroma);
+    const chromaFetch = hasChroma ? `
+    vec2 cpx = vec2(chroma.x, -chroma.y) / u_res;
+    col.r = texture2D(u_tex, clamp(uv + cpx, 0.001, 0.999)).r;
+    col.b = texture2D(u_tex, clamp(uv - cpx, 0.001, 0.999)).b;` : "";
     return `
 precision highp float;
 uniform sampler2D u_tex;
@@ -590,10 +932,11 @@ ${warp}
     float edge = 0.0;
 ${cell}
     vec2 sampleP = warped;
+    vec2 chroma = vec2(0.0);
 ${displace}
     vec2 uv = vec2(sampleP.x / u_res.x, 1.0 - sampleP.y / u_res.y);
     vec4 tex = texture2D(u_tex, clamp(uv, 0.001, 0.999));
-    vec3 col = tex.rgb;
+    vec3 col = tex.rgb;${chromaFetch}
     vec3 edgeCol = vec3(1.0);
     float edgeCov = 0.0;
     vec3 ovCol = vec3(0.0);
@@ -795,133 +1138,171 @@ function applyRasterPipeline(el, rasterNodes) {
     });
     let lastFrame = (typeof performance !== "undefined") ? performance.now() : 0;
 
-    // ── Field simulations (ops with a `field` descriptor, e.g. stir) ──
-    // Each owns a ping-pong pair of low-res targets holding a vector
-    // field that is advanced by its own program every frame and then
-    // sampled by the main pass. Half-float targets when the platform
-    // can render to them; otherwise the vectors are range-encoded into
-    // ordinary RGBA8, so the op still runs on WebGL1.
-    const fieldOps = [];
-    const makeField = (node, i) => {
+    // ── Fluid solvers (ops with a `solver` descriptor, e.g. stir) ─────
+    // An op may declare a set of render targets and fragment programs
+    // plus a step() that sequences the passes. The pipeline allocates
+    // everything here, runs step() once per frame, and binds the named
+    // result textures into the main composite pass.
+    //
+    // Float render targets are required (velocity and pressure are
+    // signed and need range well outside [0,1]). Without them the op
+    // disables itself rather than rendering something wrong.
+    const solverOps = [];
+    const makeSolver = (node, i) => {
         const def = REGISTRY[node.op];
-        const res = def.field.resolution(node);
-        const RANGE = 2.0;
-        const canFloat = isGL2 && !!gl.getExtension("EXT_color_buffer_float");
-
-        const mkPair = (enc) => {
-            const targets = [];
-            for (let k = 0; k < 2; k++) {
-                const t = gl.createTexture();
-                gl.bindTexture(gl.TEXTURE_2D, t);
-                gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
-                gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
-                gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
-                gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
-                if (enc) {
-                    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, res, res, 0,
-                        gl.RGBA, gl.UNSIGNED_BYTE, null);
-                } else {
-                    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA16F, res, res, 0,
-                        gl.RGBA, gl.HALF_FLOAT, null);
-                }
-                const f = gl.createFramebuffer();
-                gl.bindFramebuffer(gl.FRAMEBUFFER, f);
-                gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0,
-                    gl.TEXTURE_2D, t, 0);
-                if (gl.checkFramebufferStatus(gl.FRAMEBUFFER) !== gl.FRAMEBUFFER_COMPLETE) {
-                    targets.forEach((x) => { gl.deleteTexture(x.tex); gl.deleteFramebuffer(x.fbo); });
-                    gl.deleteTexture(t);
-                    gl.deleteFramebuffer(f);
-                    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
-                    return null;
-                }
-                // Zero field == the encoded midpoint in the 8-bit path.
-                gl.viewport(0, 0, res, res);
-                gl.clearColor(enc ? 0.5 : 0, enc ? 0.5 : 0, 0, 1);
-                gl.clear(gl.COLOR_BUFFER_BIT);
-                targets.push({ tex: t, fbo: f });
-            }
-            gl.bindFramebuffer(gl.FRAMEBUFFER, null);
-            return targets;
+        if (!isGL2 || !gl.getExtension("EXT_color_buffer_float")) {
+            console.info("[nodality] '" + node.op +
+                "' needs WebGL2 float render targets - op skipped.");
+            return null;
+        }
+        gl.getExtension("OES_texture_float_linear");
+        const res = def.solver.resolutions(node);
+        const FMT = {
+            r: [gl.R16F, gl.RED],
+            rg: [gl.RG16F, gl.RG],
+            rgba: [gl.RGBA16F, gl.RGBA],
+        };
+
+        const made = [];
+        const mkTarget = (size, fmt, smooth) => {
+            const [internal, format] = FMT[fmt];
+            const t = gl.createTexture();
+            gl.bindTexture(gl.TEXTURE_2D, t);
+            const flt = smooth ? gl.LINEAR : gl.NEAREST;
+            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, flt);
+            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, flt);
+            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.texImage2D(gl.TEXTURE_2D, 0, internal, size, size, 0,
+                format, gl.HALF_FLOAT, null);
+            const fbo = gl.createFramebuffer();
+            gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);
+            gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0,
+                gl.TEXTURE_2D, t, 0);
+            const ok = gl.checkFramebufferStatus(gl.FRAMEBUFFER) === gl.FRAMEBUFFER_COMPLETE;
+            gl.viewport(0, 0, size, size);
+            gl.clearColor(0, 0, 0, 1);
+            gl.clear(gl.COLOR_BUFFER_BIT);
+            const rec = { tex: t, fbo, size, ok };
+            made.push(rec);
+            return rec;
         };
 
-        let enc = canFloat ? 0 : 1;
-        let pair = canFloat ? mkPair(0) : null;
-        if (!pair) { enc = 1; pair = mkPair(1); }
-        if (!pair) return null;
+        const targets = {};
+        let allOk = true;
+        for (const name in def.solver.targets) {
+            const spec = def.solver.targets[name];
+            const size = res[spec.res];
+            if (spec.double) {
+                targets[name] = {
+                    a: mkTarget(size, spec.fmt, spec.smooth),
+                    b: mkTarget(size, spec.fmt, spec.smooth),
+                };
+                allOk = allOk && targets[name].a.ok && targets[name].b.ok;
+            } else {
+                targets[name] = { a: mkTarget(size, spec.fmt, spec.smooth) };
+                allOk = allOk && targets[name].a.ok;
+            }
+        }
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+
+        const cleanup = () => made.forEach((t) => {
+            gl.deleteFramebuffer(t.fbo);
+            gl.deleteTexture(t.tex);
+        });
 
-        let simProg;
+        if (!allOk) {
+            console.info("[nodality] '" + node.op +
+                "' float targets incomplete - op skipped.");
+            cleanup();
+            return null;
+        }
+
+        const progs = {};
         try {
-            simProg = gl.createProgram();
-            gl.attachShader(simProg, compile(gl.VERTEX_SHADER, VS));
-            gl.attachShader(simProg, compile(gl.FRAGMENT_SHADER, def.field.frag(node)));
-            gl.bindAttribLocation(simProg, 0, "a");
-            gl.linkProgram(simProg);
-            if (!gl.getProgramParameter(simProg, gl.LINK_STATUS)) {
-                throw new Error(gl.getProgramInfoLog(simProg));
+            for (const name in def.solver.programs) {
+                const pr = gl.createProgram();
+                gl.attachShader(pr, compile(gl.VERTEX_SHADER, VS));
+                gl.attachShader(pr, compile(gl.FRAGMENT_SHADER, def.solver.programs[name]));
+                gl.bindAttribLocation(pr, 0, "a");
+                gl.linkProgram(pr);
+                if (!gl.getProgramParameter(pr, gl.LINK_STATUS)) {
+                    throw new Error(name + ": " + gl.getProgramInfoLog(pr));
+                }
+                progs[name] = { prog: pr, loc: {} };
             }
         } catch (e) {
-            console.warn("[nodality] raster field sim unavailable for '" + node.op + "':", e);
-            pair.forEach((x) => { gl.deleteTexture(x.tex); gl.deleteFramebuffer(x.fbo); });
+            console.warn("[nodality] '" + node.op + "' solver programs failed:", e);
+            cleanup();
+            for (const n in progs) gl.deleteProgram(progs[n].prog);
             return null;
         }
 
-        // Static sim uniforms (set once).
-        gl.useProgram(simProg);
-        const SU = (n) => gl.getUniformLocation(simProg, n);
-        const statics = def.field.uniforms(node);
-        for (const key in statics) setUniform(SU(key), statics[key][0], statics[key][1]);
-        gl.uniform2f(SU("s_texel"), 1 / res, 1 / res);
-        gl.uniform1f(SU("s_enc"), enc);
-        gl.uniform1f(SU("s_range"), RANGE);
-
-        // The main pass needs to know how to decode what it samples.
         gl.useProgram(prog);
-        gl.uniform1f(U(`u${i}_enc`), enc);
-        gl.uniform1f(U(`u${i}_range`), RANGE);
-
         return {
-            i, res, prog: simProg, SU,
-            src: pair[0], dst: pair[1],
-            force: def.field.force(node),
+            i, node, def, res, targets, progs, cleanup,
             prevX: 0.5, prevY: 0.5, primed: false,
         };
     };
     rasterNodes.forEach((node, i) => {
         const def = REGISTRY[node.op];
-        if (!def || !def.field) return;
-        const f = makeField(node, i);
-        if (f) fieldOps.push(f);
+        if (!def || !def.solver) return;
+        const s = makeSolver(node, i);
+        if (s) solverOps.push(s);
     });
 
-    // Advance one field by a frame, ping-ponging its targets.
-    const stepField = (f, dt, now) => {
-        gl.useProgram(f.prog);
-        gl.bindFramebuffer(gl.FRAMEBUFFER, f.dst.fbo);
-        gl.viewport(0, 0, f.res, f.res);
-        gl.activeTexture(gl.TEXTURE0);
-        gl.bindTexture(gl.TEXTURE_2D, f.src.tex);
-        gl.uniform1i(f.SU("s_field"), 0);
-
-        // Pointer position in field space (bottom-up [0,1]) and the
-        // velocity it picked up since the previous frame — the spoon.
+    // One frame of a solver. `S` is the small API the op's step() drives.
+    const stepSolver = (s, dt) => {
+        let cur = null;
+        const S = {
+            res: s.res,
+            use(name) {
+                cur = s.progs[name];
+                gl.useProgram(cur.prog);
+            },
+            u(name) {
+                if (!(name in cur.loc)) cur.loc[name] = gl.getUniformLocation(cur.prog, name);
+                return cur.loc[name];
+            },
+            f1(n, v) { gl.uniform1f(S.u(n), v); },
+            f2(n, x, y) { gl.uniform2f(S.u(n), x, y); },
+            f3(n, x, y, z) { gl.uniform3f(S.u(n), x, y, z); },
+            smp(n, target, unit) {
+                gl.activeTexture(gl.TEXTURE0 + unit);
+                gl.bindTexture(gl.TEXTURE_2D, target.tex);
+                gl.uniform1i(S.u(n), unit);
+            },
+            read: (name) => s.targets[name].a,
+            write: (name) => s.targets[name].b,
+            single: (name) => s.targets[name].a,
+            swap(name) {
+                const t = s.targets[name];
+                const tmp = t.a; t.a = t.b; t.b = tmp;
+            },
+            blit(target) {
+                gl.bindFramebuffer(gl.FRAMEBUFFER, target.fbo);
+                gl.viewport(0, 0, target.size, target.size);
+                gl.drawArrays(gl.TRIANGLES, 0, 3);
+            },
+        };
+
+        // Pointer in field space (bottom-up [0,1]) and the velocity it
+        // picked up since the previous frame - the spoon.
         const px = mouse[0] / canvas.width;
         const py = 1 - mouse[1] / canvas.height;
-        let ix = 0, iy = 0;
-        if (f.primed) {
-            ix = (px - f.prevX) * 60 * f.force;
-            iy = (py - f.prevY) * 60 * f.force;
+        let dx = 0, dy = 0;
+        if (s.primed) {
+            dx = (px - s.prevX) / Math.max(dt, 1e-3);
+            dy = (py - s.prevY) / Math.max(dt, 1e-3);
         }
-        f.prevX = px; f.prevY = py; f.primed = true;
+        s.prevX = px; s.prevY = py; s.primed = true;
+        const moving = Math.abs(dx) + Math.abs(dy) > 1e-3;
 
-        gl.uniform2f(f.SU("s_point"), px, py);
-        gl.uniform2f(f.SU("s_impulse"), ix, iy);
-        gl.uniform1f(f.SU("s_dt"), Math.min(dt, 1 / 30));
-        gl.uniform1f(f.SU("s_aspect"), canvas.width / Math.max(canvas.height, 1));
-        gl.uniform1f(f.SU("s_time"), now / 1000);
-        gl.drawArrays(gl.TRIANGLES, 0, 3);
-
-        const swap = f.src; f.src = f.dst; f.dst = swap;
+        s.def.solver.step(S, s.node, {
+            dt, px, py, dx, dy, moving,
+            aspect: canvas.width / Math.max(canvas.height, 1),
+            col: s.def.solver.splatColor(s.node, dx, dy),
+        });
     };
 
     const tex = gl.createTexture();
@@ -1098,6 +1479,35 @@ function applyRasterPipeline(el, rasterNodes) {
     el.addEventListener("mousemove", onMove, { passive: true });
     el.addEventListener("touchmove", onMove, { passive: true });
 
+    // Driver inputs beyond the pointer. hoverTarget flips on enter/leave
+    // and `hover` eases toward it, so a hover-driven op resolves away
+    // smoothly instead of snapping off.
+    let hoverTarget = 0, hover = 0;
+    const onEnter = () => { hoverTarget = 1; };
+    const onLeave = () => { hoverTarget = 0; };
+    el.addEventListener("mouseenter", onEnter, { passive: true });
+    el.addEventListener("mouseleave", onLeave, { passive: true });
+
+    // Which nodes need a driver evaluated, and with what.
+    const driverNodes = [];
+    rasterNodes.forEach((node, i) => {
+        const def = REGISTRY[node.op] || {};
+        const name = node.by || def.defaultDriver;
+        if (name && DRIVERS[name]) driverNodes.push({ i, fn: DRIVERS[name] });
+        else if (node.by) {
+            console.warn("[nodality] unknown driver '" + node.by + "' on op '" +
+                node.op + "' - known drivers: " + DRIVER_NAMES.join(", "));
+        }
+    });
+
+    // How far the element has travelled across the viewport, 0..1.
+    const scrollProgress = () => {
+        if (typeof window === "undefined") return 0.5;
+        const r = el.getBoundingClientRect();
+        const vh = window.innerHeight || 1;
+        return Math.max(0, Math.min(1, (vh - r.top) / (vh + r.height)));
+    };
+
     // Render loop — paused while off-screen.
     let raf = 0;
     let visible = true;
@@ -1107,9 +1517,9 @@ function applyRasterPipeline(el, rasterNodes) {
             const now = (typeof performance !== "undefined") ? performance.now() : lastFrame + 16;
             const dt = Math.max(0, (now - lastFrame) / 1000);
 
-            // 1. Advance stateful field simulations into their own
-            //    off-screen targets (this rebinds framebuffer/program).
-            for (const f of fieldOps) stepField(f, dt, now);
+            // 1. Advance stateful fluid solvers into their own off-screen
+            //    targets (this rebinds framebuffer/program/textures).
+            for (const s of solverOps) stepSolver(s, dt);
 
             // 2. Composite pass, back on the visible framebuffer.
             gl.bindFramebuffer(gl.FRAMEBUFFER, null);
@@ -1120,6 +1530,20 @@ function applyRasterPipeline(el, rasterNodes) {
             gl.uniform2f(U("u_res"), canvas.width, canvas.height);
             gl.uniform2f(U("u_mouse"), mouse[0], mouse[1]);
             gl.uniform1f(U("u_time"), now / 1000);
+            // Evaluate each reactive op's driver and upload its focus.
+            if (driverNodes.length > 0) {
+                hover += (hoverTarget - hover) * (1 - Math.exp(-dt * 8));
+                const dctx = {
+                    mouseX: mouse[0], mouseY: mouse[1],
+                    w: canvas.width, h: canvas.height,
+                    t: now / 1000, hover, scroll: scrollProgress(),
+                };
+                for (const d of driverNodes) {
+                    const v = d.fn(dctx);
+                    gl.uniform2f(U(`u${d.i}_dpos`), v.x, v.y);
+                    gl.uniform1f(U(`u${d.i}_damt`), v.amt);
+                }
+            }
             // Advance and upload per-frame CPU simulations.
             if (dynamicOps.length > 0) {
                 const ctx = { w: canvas.width, h: canvas.height, mouseX: mouse[0], mouseY: mouse[1], dt: dt, t: now / 1000 };
@@ -1128,15 +1552,21 @@ function applyRasterPipeline(el, rasterNodes) {
                     for (const u of ups) setUniform(U(`u${d.i}_${u.name}`), u.kind, u.value);
                 }
             }
-            // Content on unit 0, each simulated field on its own unit.
+            // Content on unit 0, then each solver's named result
+            // textures (velocity, dye, ...) on units above it.
             gl.activeTexture(gl.TEXTURE0);
             gl.bindTexture(gl.TEXTURE_2D, tex);
             gl.uniform1i(U("u_tex"), 0);
-            fieldOps.forEach((f, k) => {
-                gl.activeTexture(gl.TEXTURE0 + 1 + k);
-                gl.bindTexture(gl.TEXTURE_2D, f.src.tex);
-                gl.uniform1i(U(`u${f.i}_field`), 1 + k);
-            });
+            let unit = 1;
+            for (const s of solverOps) {
+                const smps = s.def.solver.samplers;
+                for (const key in smps) {
+                    gl.activeTexture(gl.TEXTURE0 + unit);
+                    gl.bindTexture(gl.TEXTURE_2D, s.targets[smps[key]].a.tex);
+                    gl.uniform1i(U(`u${s.i}_${key}`), unit);
+                    unit++;
+                }
+            }
             gl.activeTexture(gl.TEXTURE0); // texture uploads assume unit 0
             lastFrame = now;
             gl.drawArrays(gl.TRIANGLES, 0, 3);
@@ -1232,15 +1662,14 @@ function applyRasterPipeline(el, rasterNodes) {
             if (typeof window !== "undefined") window.removeEventListener("resize", onWinResize);
             el.removeEventListener("mousemove", onMove);
             el.removeEventListener("touchmove", onMove);
+            el.removeEventListener("mouseenter", onEnter);
+            el.removeEventListener("mouseleave", onLeave);
             canvas.removeEventListener("paint", onPaint);
-            for (const f of fieldOps) {
-                [f.src, f.dst].forEach((t) => {
-                    gl.deleteFramebuffer(t.fbo);
-                    gl.deleteTexture(t.tex);
-                });
-                gl.deleteProgram(f.prog);
+            for (const s of solverOps) {
+                s.cleanup();
+                for (const n in s.progs) gl.deleteProgram(s.progs[n].prog);
             }
-            fieldOps.length = 0;
+            solverOps.length = 0;
             while (sourceEl !== el && sourceEl.firstChild) el.appendChild(sourceEl.firstChild);
             el.style.visibility = "";
             canvas.remove();
@@ -1248,4 +1677,7 @@ function applyRasterPipeline(el, rasterNodes) {
     };
 }
 
-export { applyRasterPipeline, registerRasterOp, RASTER_OP_NAMES, isHTMLInCanvasAvailable };
+export {
+    applyRasterPipeline, registerRasterOp, RASTER_OP_NAMES,
+    isHTMLInCanvasAvailable, DRIVER_NAMES,
+};