@chromatic-coherence/generative-engine 1.1.0 → 1.3.0

package/README.md

@@ -1,120 +1,137 @@
-<div align="center">
-
-# generative-engine
-
-### **THE THIRD ENGINE** — the [Generative Charts](https://chromaticcoherence.ai/generative-charts) family grows into a full **WebGL2 graphics engine**.
-
-[![licence: source-available](https://img.shields.io/badge/licence-source--available-1e88e5)](./LICENSE)
-[![zero dependencies](https://img.shields.io/badge/dependencies-0-success)](#)
-
-**[Live scenes →](https://chromaticcoherence.ai/generative-engine)** · **[The charts sibling →](https://www.npmjs.com/package/@chromatic-coherence/generative-charts)**
-
-</div>
-
----
-
-The charts library stays what it is — small, stable, chart-first. **generative-engine** is where
-the family expands: the same API (`createWorld` · `face` · `line` · `glow` · `grow` · `draw*` ·
-`fade`), so chart recipes port forward by changing one import — and underneath it, a real
-graphics engine. Zero dependencies; the browser is the only runtime.
-
-```bash
-npm install @chromatic-coherence/generative-engine
-```
-
-```js
-import { createWorld, v3, icosphere, heightfield } from "@chromatic-coherence/generative-engine";
-
-const w = createWorld({ canvas, controls: true, shadows: true });
-w.lights.push({ p: v3(-160, 320, 120), intensity: 1.2, falloff: 500 });
-w.mesh(heightfield((x, z) => Math.sin(x * 0.01) * 20, 800, 800), { hue: 262, sat: 38, light: 26 });
-w.meshMorph(icosphere(70, 3), myBlob, { hue: 350, sat: 30, light: 42, gloss: 0.5, group: "blob" });
-w.grow((t) => { w.morph("blob", 0.5 + 0.5 * Math.sin(t)); w.setTransform("blob", { rotateY: t * 0.4 }); });
-w.start();
-```
-
-## What the engine adds over the chart editions
-
-| | |
-|---|---|
-| **WebGL2 + HDR post chain** | The scene renders to a floating-point target, then: **bloom** (soft-knee bright pass, half-res gaussian), **SSAO** (depth-based contact shading), one composite pass (ACES filmic, colour grade, vignette), and **FXAA**. All art-directable (`w.bloom`, `w.ssao`, `w.fxaa`), all on by default. `post: false` opts out. |
-| **Real shadow maps** | A depth **texture** with hardware-comparison PCF (`sampler2DShadow`) — soft, exact, 2048px by default. `shadows: { size, softness, bias }`. |
-| **Geometry stdlib** | `plane` · `box` · `icosphere` · `tube` (parallel-transport sweep, taperable) · `lathe` · `extrude` · `heightfield` · `transformMesh` · `mergeMesh` — all pure math, all unit-tested, uploaded in one `w.mesh(geo, opts)` call with smooth normals. |
-| **Ribbons** | `w.ribbon(points, { width })` / `w.drawRibbon(...)` — screen-space-expanded strokes with **real pixel width**, feathered edges, depth-tested. The stroke aesthetic `gl.LINES` never allowed. |
-| **Group transforms** | `w.setTransform(group, { translate, rotateY, scale })` — geometry moves rigidly in the vertex stage, zero CPU re-tessellation, shadow pass included. |
-| **Morph targets** | `w.meshMorph(geoA, geoB, opts)` + `w.morph(group, t)` — blend between two vertex sets in the shader (breathing, becoming). Eased like `fade`. |
-| **8 point lights** | Up from 4; `lights[0]` casts the shadows. HDR intensities welcome — bloom catches what exceeds 1.0. |
-| **The carried light model** | Everything the chart edition learned rides along: GGX + Fresnel specular, procedural micro-relief, the perfusion term (`blood`, `bloodPulse`), pore noise, subsurface rim, coloured hemispheric ambient, fog — now resolving toward a real background colour the engine owns. |
-
-**The ink edition** (`theme: "light"`) still renders any recipe on paper instead of night —
-lightness inverts, strokes blend normally, SSAO becomes pencil shading. Bloom stays dark-only.
-
-## Objectives — scenes that know where they're going
-
-A scene gets a **goal** and the engine drives motion toward it; a live **movement meter**
-tells you whether the scene is moving or settled — and names what is moving.
-
-```ts
-import { createWorld, attachObjectives } from "@chromatic-coherence/generative-engine";
-
-const w = createWorld({ canvas });
-const obj = attachObjectives(w);
-
-obj.define("reveal", {
-  morph:  { group: "terrain", to: 1 },     // blend the terrain to its B shape
-  camera: { dist: 420, pitch: 0.62 },      // settle the camera in close
-  fade:   { group: "veil", to: 0 },        // dissolve the veil
-  pace: 3,                                 // seconds to ~95% of the way there
-});
-
-obj.onReading(r => {
-  // { name, progress, level, floor, moving, settled, driving: ["morph:terrain","camera",...] }
-  if (r.settled) console.log(`${r.name}: settled`);
-});
-
-// later — the goal itself moves; motion continues from the current state, no snap,
-// and the meter lights up again:
-obj.retarget("reveal", { camera: { dist: 300 } });
-```
-
-Channels: `transform` (group rigid-body spec) · `morph` · `fade` · `camera` · `custom`
-(an `apply(progress, dt)` escape hatch). `readings()` is the pull form of `onReading`.
-
-**The meter's semantics** come from the objective-movement measurement work this engine's
-org ran first as science: movement is a **level sustained above a settled floor**, not a
-discrete event. `driving` names the elevated channels — movement you can name; `settled`
-is the sustained fall to the floor. Options: `attachObjectives(w, { floor, settleAfter })`.
-
-The layer rides the frame loop as a `grow()` hook and drives the World through its public
-verbs only — the renderer is untouched, and everything composes with hand-written `grow()`
-animation.
-
-## Demo
-
-`demo/index.html` — serve the package folder (`python -m http.server`) and open
-`/demo/`. Drag to orbit, ctrl+wheel to zoom; `?theme=light`, `?post=0`, `?still`.
-
-## Falling back
-
-`createWorld` **throws** (never a blank page) when WebGL2 is missing. Catch it and build the
-same recipe through the chart editions — the API is a subset, so the fallback chain
-engine → charts-3d → charts-2d is three imports of the same code. Browsers cap live GL
-contexts per page: on teardown call `dispose(true)` to release the context immediately, and
-mount a **fresh** canvas if you rebuild (a lost context is dead on its canvas).
-
-## Roadmap
-
-Planar mirrors · instancing · depth of field · motion blur. The chart editions stay lean.
-
-## Licence
-
-**Source-available, not open source.** Free for individuals, charities and small businesses
-(fewer than 25 people and under £1M annual revenue); a one-off **£100** covers any larger
-organisation. Full terms in [LICENSE](./LICENSE); commercial licensing:
-[hello@chromaticcoherence.ai](mailto:hello@chromaticcoherence.ai).
-
----
-
-<div align="center">
-<sub>© 2026 Chromatic Coherence. All rights reserved.</sub>
-</div>
+<div align="center">
+
+# generative-engine
+
+### **THE THIRD ENGINE** — the [Generative Charts](https://chromaticcoherence.ai/generative-charts) family grows into a full **WebGL2 graphics engine**.
+
+[![licence: source-available](https://img.shields.io/badge/licence-source--available-1e88e5)](./LICENSE)
+[![zero dependencies](https://img.shields.io/badge/dependencies-0-success)](#)
+
+**[Live scenes →](https://chromaticcoherence.ai/generative-engine)** · **[The charts sibling →](https://www.npmjs.com/package/@chromatic-coherence/generative-charts)**
+
+</div>
+
+---
+
+The charts library stays what it is — small, stable, chart-first. **generative-engine** is where
+the family expands: the same API (`createWorld` · `face` · `line` · `glow` · `grow` · `draw*` ·
+`fade`), so chart recipes port forward by changing one import — and underneath it, a real
+graphics engine. Zero dependencies; the browser is the only runtime.
+
+```bash
+npm install @chromatic-coherence/generative-engine
+```
+
+```js
+import { createWorld, v3, icosphere, heightfield } from "@chromatic-coherence/generative-engine";
+
+const w = createWorld({ canvas, controls: true, shadows: true });
+w.lights.push({ p: v3(-160, 320, 120), intensity: 1.2, falloff: 500 });
+w.mesh(heightfield((x, z) => Math.sin(x * 0.01) * 20, 800, 800), { hue: 262, sat: 38, light: 26 });
+w.meshMorph(icosphere(70, 3), myBlob, { hue: 350, sat: 30, light: 42, gloss: 0.5, group: "blob" });
+w.grow((t) => { w.morph("blob", 0.5 + 0.5 * Math.sin(t)); w.setTransform("blob", { rotateY: t * 0.4 }); });
+w.start();
+```
+
+## What the engine adds over the chart editions
+
+| | |
+|---|---|
+| **WebGL2 + HDR post chain** | The scene renders to a floating-point target, then: **bloom** (soft-knee bright pass, half-res gaussian), **SSAO** (depth-based contact shading), one composite pass (ACES filmic, colour grade, vignette), and **FXAA**. All art-directable (`w.bloom`, `w.ssao`, `w.fxaa`), all on by default. `post: false` opts out. |
+| **Real shadow maps** | A depth **texture** with hardware-comparison PCF (`sampler2DShadow`) — soft, exact, 2048px by default. `shadows: { size, softness, bias }`. |
+| **Geometry stdlib** | `plane` · `box` · `icosphere` · `tube` (parallel-transport sweep, taperable) · `lathe` · `extrude` · `heightfield` · `transformMesh` · `mergeMesh` — all pure math, all unit-tested, uploaded in one `w.mesh(geo, opts)` call with smooth normals. |
+| **Ribbons** | `w.ribbon(points, { width })` / `w.drawRibbon(...)` — screen-space-expanded strokes with **real pixel width**, feathered edges, depth-tested. The stroke aesthetic `gl.LINES` never allowed. |
+| **Group transforms** | `w.setTransform(group, { translate, rotateY, scale })` — geometry moves rigidly in the vertex stage, zero CPU re-tessellation, shadow pass included. |
+| **Morph targets** | `w.meshMorph(geoA, geoB, opts)` + `w.morph(group, t)` — blend between two vertex sets in the shader (breathing, becoming). Eased like `fade`. |
+| **8 point lights** | Up from 4; `lights[0]` casts the shadows. HDR intensities welcome — bloom catches what exceeds 1.0. |
+| **The carried light model** | Everything the chart edition learned rides along: GGX + Fresnel specular, procedural micro-relief, the perfusion term (`blood`, `bloodPulse`), pore noise, subsurface rim, coloured hemispheric ambient, fog — now resolving toward a real background colour the engine owns. |
+
+**The ink edition** (`theme: "light"`) still renders any recipe on paper instead of night —
+lightness inverts, strokes blend normally, SSAO becomes pencil shading. Bloom stays dark-only.
+
+## Objectives — scenes that know where they're going
+
+A scene gets a **goal** and the engine drives motion toward it; a live **movement meter**
+tells you whether the scene is moving or settled — and names what is moving.
+
+```ts
+import { createWorld, attachObjectives } from "@chromatic-coherence/generative-engine";
+
+const w = createWorld({ canvas });
+const obj = attachObjectives(w);
+
+obj.define("reveal", {
+  morph:  { group: "terrain", to: 1 },     // blend the terrain to its B shape
+  camera: { dist: 420, pitch: 0.62 },      // settle the camera in close
+  fade:   { group: "veil", to: 0 },        // dissolve the veil
+  pace: 3,                                 // seconds to ~95% of the way there
+});
+
+obj.onReading(r => {
+  // { name, progress, level, floor, moving, settled, driving: ["morph:terrain","camera",...] }
+  if (r.settled) console.log(`${r.name}: settled`);
+});
+
+// later — the goal itself moves; motion continues from the current state, no snap,
+// and the meter lights up again:
+obj.retarget("reveal", { camera: { dist: 300 } });
+```
+
+Channels: `transform` (group rigid-body spec) · `morph` · `fade` · `camera` · `custom`
+(an `apply(progress, dt)` escape hatch). `readings()` is the pull form of `onReading`.
+
+**The meter's semantics** come from the objective-movement measurement work this engine's
+org ran first as science: movement is a **level sustained above a settled floor**, not a
+discrete event. `driving` names the elevated channels — movement you can name; `settled`
+is the sustained fall to the floor. Options: `attachObjectives(w, { floor, settleAfter })`.
+
+The layer rides the frame loop as a `grow()` hook and drives the World through its public
+verbs only — the renderer is untouched, and everything composes with hand-written `grow()`
+animation.
+
+## Demo
+
+`demo/index.html` — serve the package folder (`python -m http.server`) and open
+`/demo/`. Drag to orbit, ctrl+wheel to zoom; `?theme=light`, `?post=0`, `?still`.
+
+## Falling back
+
+`createWorld` **throws** (never a blank page) when WebGL2 is missing. Catch it and build the
+same recipe through the chart editions — the API is a subset, so the fallback chain
+engine → charts-3d → charts-2d is three imports of the same code. Browsers cap live GL
+contexts per page: on teardown call `dispose(true)` to release the context immediately, and
+mount a **fresh** canvas if you rebuild (a lost context is dead on its canvas).
+
+## Instancing, depth of field, motion blur (v1.2)
+
+- **`w.meshInstanced(geo, transforms, opts)`** — upload a mesh once, draw it at every
+  transform in a single instanced call, shadow pass included. A forest is one draw.
+  Instances ride their group's fade / morph / transform like any other geometry.
+- **`w.dof = { on, focus, range, maxBlur }`** — depth of field: blur grows with distance
+  from the focus plane (world units), sharp subjects protected per-tap.
+- **`w.motionBlur = { on, strength }`** — camera motion blur by depth reprojection into
+  the previous frame; streaks clamp to 4 % of the screen.
+
+## GPU wind (v1.3)
+
+`meshInstanced(geo, transforms, { ..., sway: { amp, freq? } })` — every instance sways
+individually in the vertex stage (shadow pass included): per-instance scattered phase,
+height-scaled displacement, a second harmonic so the motion breathes. `w.wind = { dir,
+speed }` is the one wind that blows through every swaying batch. Zero CPU per frame.
+
+## Roadmap
+
+Planar mirrors · real water · skeletal figures. The chart editions stay lean.
+
+## Licence
+
+**Source-available, not open source.** Free for individuals, charities and small businesses
+(fewer than 25 people and under £1M annual revenue); a one-off **£100** covers any larger
+organisation. Full terms in [LICENSE](./LICENSE); commercial licensing:
+[hello@chromaticcoherence.ai](mailto:hello@chromaticcoherence.ai).
+
+---
+
+<div align="center">
+<sub>© 2026 Chromatic Coherence. All rights reserved.</sub>
+</div>

package/dist/post.d.ts

@@ -23,6 +23,16 @@ export type PostParams = {
     fxaa: boolean;
     near: number;
     far: number;
+    /** depth of field (W8): blur scaled by distance from the focus plane */
+    dofOn?: boolean;
+    dofFocus?: number;
+    dofRange?: number;
+    dofMaxBlur?: number;
+    /** camera motion blur (W8): depth reprojection into the previous frame */
+    moOn?: boolean;
+    moStrength?: number;
+    invVP?: Float32Array;
+    prevVP?: Float32Array;
 };
 export declare class PostChain {
     readonly hdr: boolean;
@@ -33,6 +43,8 @@ export declare class PostChain {
     private pAoBlur;
     private pComposite;
     private pFxaa;
+    private pDof;
+    private pMoblur;
     private scene;
     sceneDepth: WebGLTexture | null;
     private bloomA;
@@ -40,6 +52,7 @@ export declare class PostChain {
     private aoA;
     private aoB;
     private ldr;
+    private ldrB;
     private W;
     private H;
     constructor(gl: WebGL2RenderingContext);

package/dist/post.js

@@ -4,7 +4,7 @@
 // texture; then bright-pass -> half-res separable gaussian (ping-pong) for
 // bloom, depth-based half-res SSAO + blur, one composite pass (bloom add,
 // ACES filmic, grade, vignette), and an optional FXAA pass last.
-import { FST_VS, BRIGHT_FS, BLUR_FS, SSAO_FS, AOBLUR_FS, COMPOSITE_FS, FXAA_FS, } from "./shaders.js";
+import { FST_VS, BRIGHT_FS, BLUR_FS, SSAO_FS, AOBLUR_FS, COMPOSITE_FS, FXAA_FS, DOF_FS, MOBLUR_FS, } from "./shaders.js";
 export function makeProg(gl, vs, fs) {
     const sh = (type, src) => {
         const s = gl.createShader(type);
@@ -48,6 +48,7 @@ export class PostChain {
         this.aoA = null;
         this.aoB = null;
         this.ldr = null;
+        this.ldrB = null;
         this.W = 0;
         this.H = 0;
         this.gl = gl;
@@ -58,6 +59,8 @@ export class PostChain {
         this.pAoBlur = new PInfo(gl, FST_VS, AOBLUR_FS);
         this.pComposite = new PInfo(gl, FST_VS, COMPOSITE_FS);
         this.pFxaa = new PInfo(gl, FST_VS, FXAA_FS);
+        this.pDof = new PInfo(gl, FST_VS, DOF_FS);
+        this.pMoblur = new PInfo(gl, FST_VS, MOBLUR_FS);
     }
     makeTarget(w, h, hdrFmt, filter) {
         const gl = this.gl;
@@ -114,6 +117,7 @@ export class PostChain {
         this.aoA = this.makeTarget(hw, hh, false, gl.LINEAR);
         this.aoB = this.makeTarget(hw, hh, false, gl.LINEAR);
         this.ldr = this.makeTarget(w, h, false, gl.LINEAR);
+        this.ldrB = this.makeTarget(w, h, false, gl.LINEAR);
         gl.bindFramebuffer(gl.FRAMEBUFFER, null);
     }
     /** Bind the scene target — the world's render pass draws into this. */
@@ -173,6 +177,9 @@ export class PostChain {
             gl.uniform2f(this.pAoBlur.u("uPx"), 1 / this.aoA.w, 1 / this.aoA.h);
             this.fst(this.pAoBlur, this.aoB);
         }
+        // remaining LDR passes after composite — each renders src -> dst (null = the canvas)
+        const dofOn = !!o.dofOn, moOn = !!(o.moOn && o.invVP && o.prevVP);
+        const tail = (dofOn ? 1 : 0) + (moOn ? 1 : 0) + (o.fxaa ? 1 : 0);
         this.pComposite.use();
         this.bindTex(0, this.scene.tex);
         this.bindTex(1, o.bloomOn ? this.bloomA.tex : null);
@@ -186,10 +193,42 @@ export class PostChain {
         gl.uniform1f(this.pComposite.u("uGrade"), o.grade ? 1 : 0);
         gl.uniform1f(this.pComposite.u("uVig"), o.vignette);
         gl.uniform1f(this.pComposite.u("uInk"), o.ink ? 1 : 0);
-        this.fst(this.pComposite, o.fxaa ? this.ldr : null);
+        let src = tail > 0 ? this.ldr : null;
+        this.fst(this.pComposite, src);
+        let left = tail;
+        const next = () => (--left > 0 ? (src === this.ldr ? this.ldrB : this.ldr) : null);
+        if (dofOn) {
+            const dst = next();
+            this.pDof.use();
+            this.bindTex(0, src.tex);
+            this.bindTex(1, this.sceneDepth);
+            gl.uniform1i(this.pDof.u("uTex"), 0);
+            gl.uniform1i(this.pDof.u("uDepth"), 1);
+            gl.uniform1f(this.pDof.u("uNear"), o.near);
+            gl.uniform1f(this.pDof.u("uFar"), o.far);
+            gl.uniform1f(this.pDof.u("uFocus"), o.dofFocus ?? 700);
+            gl.uniform1f(this.pDof.u("uRange"), o.dofRange ?? 420);
+            gl.uniform1f(this.pDof.u("uMaxBlur"), o.dofMaxBlur ?? 10);
+            gl.uniform2f(this.pDof.u("uPx"), 1 / this.W, 1 / this.H);
+            this.fst(this.pDof, dst);
+            src = dst;
+        }
+        if (moOn) {
+            const dst = next();
+            this.pMoblur.use();
+            this.bindTex(0, src.tex);
+            this.bindTex(1, this.sceneDepth);
+            gl.uniform1i(this.pMoblur.u("uTex"), 0);
+            gl.uniform1i(this.pMoblur.u("uDepth"), 1);
+            gl.uniformMatrix4fv(this.pMoblur.u("uInvVP"), false, o.invVP);
+            gl.uniformMatrix4fv(this.pMoblur.u("uPrevVP"), false, o.prevVP);
+            gl.uniform1f(this.pMoblur.u("uStrength"), o.moStrength ?? 0.6);
+            this.fst(this.pMoblur, dst);
+            src = dst;
+        }
         if (o.fxaa) {
             this.pFxaa.use();
-            this.bindTex(0, this.ldr.tex);
+            this.bindTex(0, src.tex);
             gl.uniform1i(this.pFxaa.u("uTex"), 0);
             gl.uniform2f(this.pFxaa.u("uPx"), 1 / this.W, 1 / this.H);
             this.fst(this.pFxaa, null);
@@ -205,9 +244,10 @@ export class PostChain {
         this.drop(this.aoA);
         this.drop(this.aoB);
         this.drop(this.ldr);
+        this.drop(this.ldrB);
         if (this.sceneDepth)
             this.gl.deleteTexture(this.sceneDepth);
-        this.scene = this.bloomA = this.bloomB = this.aoA = this.aoB = this.ldr = null;
+        this.scene = this.bloomA = this.bloomB = this.aoA = this.aoB = this.ldr = this.ldrB = null;
         this.sceneDepth = null;
     }
 }

package/dist/shaders.d.ts

@@ -1,5 +1,7 @@
 export declare const FACE_VS = "#version 300 es\nin vec3 aPos; in vec3 aNorm; in vec4 aCol; in float aBlood; in float aGrp;\nin vec3 aPos2; in vec3 aNorm2;\nuniform mat4 uVP; uniform mat4 uSVP;\nuniform mat4 uGM[8]; uniform mat3 uNM[8]; uniform float uMW[8]; uniform float uGA[8];\nout vec3 vPos; out vec3 vNorm; out vec4 vCol; out float vZ; out vec4 vSh;\nout float vGA; out float vBlood;\nvoid main(){\n  int g = int(aGrp + 0.5);\n  float w = uMW[g];\n  vec3 p = mix(aPos, aPos2, w), n = mix(aNorm, aNorm2, w);\n  vec4 wp = uGM[g] * vec4(p, 1.0);\n  vPos = wp.xyz; vNorm = uNM[g] * n; vCol = aCol; vGA = uGA[g]; vBlood = aBlood;\n  vec4 cp = uVP * wp; vZ = cp.w; vSh = uSVP * wp; gl_Position = cp;\n}";
 export declare const FACE_FS = "#version 300 es\nprecision highp float;\nin vec3 vPos; in vec3 vNorm; in vec4 vCol; in float vZ; in vec4 vSh;\nin float vGA; in float vBlood;\nuniform vec3 uLdir; uniform float uAmb; uniform float uDif; uniform float uSigned;\nuniform vec3 uLp[8]; uniform float uLi[8]; uniform float uLf[8]; uniform int uLn;\nuniform vec3 uCam; uniform float uFogK; uniform float uSpec; uniform vec3 uBg;\nuniform vec3 uSkyC; uniform vec3 uGroundC; uniform float uPulse;\nuniform float uShadowOn; uniform float uShadowSoft; uniform float uShadowBias;\nuniform lowp sampler2DShadow uShadow; uniform float uShadowPx;\nout vec4 fragColor;\nfloat h3(vec3 p){ return fract(sin(dot(p, vec3(12.9898, 78.233, 37.719))) * 43758.5453); }\nfloat vnoise(vec3 p){ vec3 i = floor(p), f = fract(p); f = f * f * (3.0 - 2.0 * f);\n  return mix(mix(mix(h3(i), h3(i + vec3(1,0,0)), f.x), mix(h3(i + vec3(0,1,0)), h3(i + vec3(1,1,0)), f.x), f.y),\n             mix(mix(h3(i + vec3(0,0,1)), h3(i + vec3(1,0,1)), f.x), mix(h3(i + vec3(0,1,1)), h3(i + vec3(1,1,1)), f.x), f.y), f.z); }\nfloat shadowFactor(){\n  vec3 pr = vSh.xyz / vSh.w * 0.5 + 0.5;\n  if (pr.x < 0.0 || pr.x > 1.0 || pr.y < 0.0 || pr.y > 1.0 || pr.z > 1.0) return 1.0;\n  float ref = pr.z - uShadowBias;\n  // 3x3 taps over a hardware-compared (LINEAR sampler2DShadow => free 2x2 PCF each) map\n  float s = 0.0;\n  for (int sy = -1; sy <= 1; sy++)\n    for (int sx = -1; sx <= 1; sx++)\n      s += texture(uShadow, vec3(pr.xy + vec2(float(sx), float(sy)) * uShadowPx * uShadowSoft, ref));\n  s /= 9.0;\n  return 0.35 + 0.65 * s;\n}\nvoid main(){\n  vec3 n = normalize(vNorm);\n  vec3 V = normalize(uCam - vPos);\n  float skin = clamp(vBlood * 5.0, 0.0, 1.0);\n  { // procedural micro-relief: perturb the shading normal by a fine noise gradient\n    float bs = 5.5, e = 0.12, n0 = vnoise(vPos * bs);\n    vec3 g = vec3(vnoise(vPos * bs + vec3(e, 0.0, 0.0)) - n0,\n                  vnoise(vPos * bs + vec3(0.0, e, 0.0)) - n0,\n                  vnoise(vPos * bs + vec3(0.0, 0.0, e)) - n0) / e;\n    n = normalize(n - g * (0.10 + 0.30 * skin));\n  }\n  float d = dot(n, normalize(uLdir));\n  float shade = uAmb + uDif * mix(abs(d), max(d, 0.0), uSigned);\n  float spec = 0.0;\n  float sh = uShadowOn > 0.5 ? shadowFactor() : 1.0;\n  for (int i = 0; i < 8; i++) { if (i >= uLn) break;\n    vec3 v = uLp[i] - vPos; float d2 = dot(v, v); vec3 L = v * inversesqrt(d2 + 1e-4);\n    float lam = dot(n, L); lam = mix(abs(lam), max(lam, 0.0), uSigned);\n    float fall = 1.0 / (1.0 + d2 / (uLf[i] * uLf[i]));\n    float k = (i == 0) ? sh : 1.0;\n    shade += uLi[i] * lam * fall * k;\n    // GGX microfacet + Fresnel \u2014 roughness from the face's gloss (colour alpha slot)\n    vec3 H = normalize(L + V);\n    float nh = max(dot(n, H), 0.0);\n    float rough = clamp(1.0 - vCol.a, 0.08, 1.0), a2 = rough * rough; a2 = a2 * a2;\n    float dnm = nh * nh * (a2 - 1.0) + 1.0;\n    float ggx = a2 / (3.14159 * dnm * dnm);\n    float fres = 0.04 + 0.96 * pow(1.0 - max(dot(H, V), 0.0), 5.0);\n    spec += uLi[i] * min(ggx, 6.0) * fres * fall * k * 0.16;\n  }\n  // coloured hemispheric ambient: cool from above, warm from below\n  vec3 tint = mix(uGroundC, uSkyC, n.y * 0.5 + 0.5);\n  vec3 lit = vCol.rgb * (uAmb * tint + vec3(shade - uAmb));\n  // the perfusion term: blood near the surface changes how it meets the light\n  float b = clamp(vBlood + uPulse * vBlood * 6.0, 0.0, 1.0);\n  lit *= mix(vec3(1.0), vec3(1.07, 0.95, 0.94), b);\n  lit += vec3(0.62, 0.06, 0.08) * (b * 0.20 * (1.0 - abs(d)));\n  // pore noise, only where there is blood (skin, not cloth)\n  float pore = vnoise(vPos * 2.4) * 0.6 + vnoise(vPos * 6.0) * 0.4;\n  lit *= 1.0 + (pore - 0.5) * 0.09 * skin;\n  // subsurface rim: grazing light bleeds through thin tissue, warm\n  float fres = pow(1.0 - clamp(dot(n, V), 0.0, 1.0), 3.0);\n  lit += vec3(0.55, 0.09, 0.10) * fres * skin * (0.28 + 0.5 * b);\n  float fog = clamp(uFogK / vZ, 0.08, 1.0);\n  vec3 outC = lit + vec3(1.0) * spec * uSpec * vCol.a;\n  // fog and fades resolve toward the REAL background colour (the engine owns its ground)\n  fragColor = vec4(mix(uBg, outC, fog * vGA), 1.0);\n}";
+export declare const FACE_INST_VS = "#version 300 es\nin vec3 aPos; in vec3 aNorm; in vec4 aCol; in float aBlood; in float aGrp;\nin vec3 aPos2; in vec3 aNorm2;\nin vec4 aI0; in vec4 aI1; in vec4 aI2; in vec4 aI3; in vec4 aIP;\nuniform mat4 uVP; uniform mat4 uSVP; uniform float uT; uniform vec3 uWindDir;\nuniform mat4 uGM[8]; uniform mat3 uNM[8]; uniform float uMW[8]; uniform float uGA[8];\nout vec3 vPos; out vec3 vNorm; out vec4 vCol; out float vZ; out vec4 vSh;\nout float vGA; out float vBlood;\nvoid main(){\n  int g = int(aGrp + 0.5);\n  float w = uMW[g];\n  mat4 inst = mat4(aI0, aI1, aI2, aI3);\n  vec3 p = mix(aPos, aPos2, w), n = mix(aNorm, aNorm2, w);\n  // W9 GPU WIND: per-instance (phase, freq, amp); displacement grows with height,\n  // plus a second harmonic so the sway breathes instead of ticking\n  float sw = sin(uT * aIP.y + aIP.x) + 0.5 * sin(uT * aIP.y * 2.3 + aIP.x * 1.7);\n  p += uWindDir * (sw * aIP.z * max(p.y, 0.0));\n  vec4 wp = uGM[g] * (inst * vec4(p, 1.0));\n  vPos = wp.xyz; vNorm = uNM[g] * (mat3(inst) * n); vCol = aCol; vGA = uGA[g]; vBlood = aBlood;\n  vec4 cp = uVP * wp; vZ = cp.w; vSh = uSVP * wp; gl_Position = cp;\n}";
+export declare const DEPTH_INST_VS = "#version 300 es\nin vec3 aPos; in float aGrp; in vec3 aPos2;\nin vec4 aI0; in vec4 aI1; in vec4 aI2; in vec4 aI3; in vec4 aIP;\nuniform mat4 uVP; uniform float uT; uniform vec3 uWindDir;\nuniform mat4 uGM[8]; uniform mat3 uNM[8]; uniform float uMW[8]; uniform float uGA[8];\nvoid main(){\n  int g = int(aGrp + 0.5);\n  vec3 p = mix(aPos, aPos2, uMW[g]);\n  float sw = sin(uT * aIP.y + aIP.x) + 0.5 * sin(uT * aIP.y * 2.3 + aIP.x * 1.7);\n  p += uWindDir * (sw * aIP.z * max(p.y, 0.0));\n  gl_Position = uVP * (uGM[g] * (mat4(aI0, aI1, aI2, aI3) * vec4(p, 1.0)));\n}";
 export declare const DEPTH_VS = "#version 300 es\nin vec3 aPos; in float aGrp; in vec3 aPos2;\nuniform mat4 uVP;\nuniform mat4 uGM[8]; uniform mat3 uNM[8]; uniform float uMW[8]; uniform float uGA[8];\nvoid main(){\n  int g = int(aGrp + 0.5);\n  vec3 p = mix(aPos, aPos2, uMW[g]);\n  gl_Position = uVP * (uGM[g] * vec4(p, 1.0));\n}";
 export declare const DEPTH_FS = "#version 300 es\nprecision mediump float;\nvoid main(){}";
 export declare const LINE_VS = "#version 300 es\nin vec3 aPos; in vec4 aCol; in float aGrp;\nuniform mat4 uVP;\nuniform mat4 uGM[8]; uniform mat3 uNM[8]; uniform float uMW[8]; uniform float uGA[8];\nout vec4 vCol; out float vZ; out float vGA;\nvoid main(){\n  int g = int(aGrp + 0.5);\n  vCol = aCol; vGA = uGA[g];\n  vec4 p = uVP * (uGM[g] * vec4(aPos, 1.0)); vZ = p.w; gl_Position = p;\n}";
@@ -14,4 +16,6 @@ export declare const BLUR_FS = "#version 300 es\nprecision mediump float;\nin ve
 export declare const SSAO_FS = "#version 300 es\nprecision highp float;\nin vec2 vUv; uniform sampler2D uDepth;\nuniform float uNear; uniform float uFar; uniform float uRadius; uniform vec2 uRes;\nout vec4 fragColor;\nfloat viewZ(vec2 uv){\n  float d = texture(uDepth, uv).r * 2.0 - 1.0;\n  return 2.0 * uNear * uFar / (uFar + uNear - d * (uFar - uNear));\n}\nfloat hash(vec2 p){ return fract(sin(dot(p, vec2(12.9898, 78.233))) * 43758.5453); }\nvoid main(){\n  float z0 = viewZ(vUv);\n  // screen-space sample radius shrinks with distance (a world-ish radius)\n  float rad = uRadius / z0;\n  float ang = hash(vUv * uRes) * 6.2831853;\n  float occ = 0.0;\n  for (int i = 0; i < 12; i++) {\n    float fi = float(i);\n    float a = ang + fi * 2.3999632;           // golden-angle spiral\n    float r = rad * (0.25 + 0.75 * fract(fi * 0.618034));\n    vec2 uv = vUv + vec2(cos(a), sin(a)) * r;\n    float dz = z0 - viewZ(uv);                // positive => sample nearer camera => occluder\n    occ += smoothstep(z0 * 0.002, z0 * 0.02, dz) * smoothstep(z0 * 0.35, 0.0, dz);\n  }\n  float ao = 1.0 - occ / 12.0;\n  fragColor = vec4(vec3(ao), 1.0);\n}";
 export declare const AOBLUR_FS = "#version 300 es\nprecision mediump float;\nin vec2 vUv; uniform sampler2D uTex; uniform vec2 uPx;\nout vec4 fragColor;\nvoid main(){\n  float s = 0.0;\n  for (int y = -1; y <= 2; y++)\n    for (int x = -1; x <= 2; x++)\n      s += texture(uTex, vUv + vec2(float(x) - 0.5, float(y) - 0.5) * uPx).r;\n  fragColor = vec4(vec3(s / 16.0), 1.0);\n}";
 export declare const COMPOSITE_FS = "#version 300 es\nprecision mediump float;\nin vec2 vUv;\nuniform sampler2D uScene; uniform sampler2D uBloom; uniform sampler2D uAO;\nuniform float uBloomStr; uniform float uAOStr;\nuniform float uFilm; uniform float uGrade; uniform float uVig; uniform float uInk;\nout vec4 fragColor;\nvoid main(){\n  vec3 c = texture(uScene, vUv).rgb;\n  c *= mix(1.0, texture(uAO, vUv).r, uAOStr);\n  c += texture(uBloom, vUv).rgb * uBloomStr;\n  if (uFilm > 0.5) { // ACES-ish filmic: highlights roll off instead of clipping\n    c = (c * (2.51 * c + 0.03)) / (c * (2.43 * c + 0.59) + 0.14);\n  }\n  c = clamp(c, 0.0, 1.0);\n  if (uGrade > 0.5) { // violet-cool shadows, warm highlights\n    float luma = dot(c, vec3(0.299, 0.587, 0.114));\n    c *= mix(vec3(0.85, 0.83, 1.07), vec3(1.07, 0.99, 0.92), smoothstep(0.12, 0.72, luma));\n    c = clamp(c, 0.0, 1.0);\n  }\n  if (uVig > 0.0) { // cinematic vignette, in the composite now (off the overlay)\n    vec2 q = vUv - vec2(0.5, 0.54);\n    float r = smoothstep(0.35, 0.9, length(q * vec2(1.15, 1.0)));\n    vec3 dk = uInk > 0.5 ? vec3(0.20, 0.19, 0.30) : vec3(0.024, 0.016, 0.055);\n    c = mix(c, dk, uVig * r * (uInk > 0.5 ? 0.3 : 1.0));\n  }\n  fragColor = vec4(c, 1.0);\n}";
+export declare const DOF_FS = "#version 300 es\nprecision highp float;\nin vec2 vUv; uniform sampler2D uTex; uniform sampler2D uDepth;\nuniform float uNear; uniform float uFar; uniform float uFocus; uniform float uRange;\nuniform float uMaxBlur; uniform vec2 uPx;\nout vec4 fragColor;\nfloat lin(float d){ return uNear * uFar / (uFar - d * (uFar - uNear)); }\nconst vec2 DISC[12] = vec2[](\n  vec2(-0.326, -0.406), vec2(-0.840, -0.074), vec2(-0.696, 0.457), vec2(-0.203, 0.621),\n  vec2(0.962, -0.195), vec2(0.473, -0.480), vec2(0.519, 0.767), vec2(0.185, -0.893),\n  vec2(0.507, 0.064), vec2(0.896, 0.412), vec2(-0.322, -0.933), vec2(-0.792, -0.598));\nvoid main(){\n  float z = lin(texture(uDepth, vUv).r);\n  float coc = clamp(abs(z - uFocus) / max(1.0, uRange), 0.0, 1.0) * uMaxBlur;\n  vec3 acc = texture(uTex, vUv).rgb;\n  float wsum = 1.0;\n  for (int i = 0; i < 12; i++) {\n    vec2 off = DISC[i] * coc * uPx;\n    // a sharp (in-focus) neighbour must not bleed into a blurred one: weight each tap\n    // by ITS OWN CoC so foreground focus stays crisp against a soft background\n    float zt = lin(texture(uDepth, vUv + off).r);\n    float ct = clamp(abs(zt - uFocus) / max(1.0, uRange), 0.0, 1.0);\n    float w = 0.25 + 0.75 * ct;\n    acc += texture(uTex, vUv + off).rgb * w;\n    wsum += w;\n  }\n  fragColor = vec4(acc / wsum, 1.0);\n}";
+export declare const MOBLUR_FS = "#version 300 es\nprecision highp float;\nin vec2 vUv; uniform sampler2D uTex; uniform sampler2D uDepth;\nuniform mat4 uInvVP; uniform mat4 uPrevVP; uniform float uStrength;\nout vec4 fragColor;\nvoid main(){\n  float d = texture(uDepth, vUv).r;\n  vec4 ndc = vec4(vUv * 2.0 - 1.0, d * 2.0 - 1.0, 1.0);\n  vec4 wp = uInvVP * ndc; wp /= wp.w;\n  vec4 pc = uPrevVP * wp;\n  vec2 prevUv = (pc.xy / pc.w) * 0.5 + 0.5;\n  vec2 vel = (vUv - prevUv) * uStrength;\n  float vlen = length(vel);\n  if (vlen < 1e-5 || pc.w <= 0.0) { fragColor = vec4(texture(uTex, vUv).rgb, 1.0); return; }\n  vel = vlen > 0.04 ? vel * (0.04 / vlen) : vel;  // clamp the streak to 4% of the screen\n  vec3 acc = vec3(0.0);\n  for (int i = 0; i < 8; i++) {\n    float t = (float(i) / 7.0) - 0.5;\n    acc += texture(uTex, clamp(vUv + vel * t, vec2(0.001), vec2(0.999))).rgb;\n  }\n  fragColor = vec4(acc / 8.0, 1.0);\n}";
 export declare const FXAA_FS = "#version 300 es\nprecision mediump float;\nin vec2 vUv; uniform sampler2D uTex; uniform vec2 uPx;\nout vec4 fragColor;\nfloat luma(vec3 c){ return dot(c, vec3(0.299, 0.587, 0.114)); }\nvoid main(){\n  vec3 cM = texture(uTex, vUv).rgb;\n  float lM = luma(cM);\n  float lN = luma(texture(uTex, vUv + vec2(0.0, -uPx.y)).rgb);\n  float lS = luma(texture(uTex, vUv + vec2(0.0, uPx.y)).rgb);\n  float lW = luma(texture(uTex, vUv + vec2(-uPx.x, 0.0)).rgb);\n  float lE = luma(texture(uTex, vUv + vec2(uPx.x, 0.0)).rgb);\n  float lMin = min(lM, min(min(lN, lS), min(lW, lE)));\n  float lMax = max(lM, max(max(lN, lS), max(lW, lE)));\n  float range = lMax - lMin;\n  if (range < max(0.0312, lMax * 0.125)) { fragColor = vec4(cM, 1.0); return; }\n  vec2 dir = normalize(vec2((lE + lS) - (lW + lN), (lN + lE) - (lS + lW)) + 1e-6);\n  vec3 a = texture(uTex, vUv + dir * uPx * 0.5).rgb;\n  vec3 b = texture(uTex, vUv - dir * uPx * 0.5).rgb;\n  fragColor = vec4(mix(cM, (a + b) * 0.5, 0.75), 1.0);\n}";