@chromatic-coherence/generative-charts-3d 0.12.0

package/LICENSE

@@ -0,0 +1,36 @@
+Chromatic Coherence — dark-math Licence (2026)
+
+Copyright (c) 2026 Chromatic Coherence. All rights reserved.
+
+This software ("the Software") is source-available but is NOT open source.
+It is licensed, not sold. Downloading or installing it (for example from npm)
+grants no rights beyond those written below, and does not transfer ownership.
+
+1. FREE LICENCE — no cost, perpetual — granted to:
+     * individuals, for personal or non-commercial use;
+     * registered charities and non-profit organisations;
+     * small businesses — an organisation with fewer than 25 people AND under
+       £1,000,000 in annual gross revenue.
+   A Free Licence lets you install the Software and use it AS-IS, embedded
+   inside your own application, and distribute it only as an inseparable part
+   of that application.
+
+2. COMMERCIAL LICENCE — required by any organisation not covered by clause 1
+   (an "SME or Enterprise"). A one-off fee of £100 per organisation grants a
+   perpetual Commercial Licence covering all of that organisation's products.
+   Contact hello@chromaticcoherence.ai.
+
+3. In no case, and under no licence, may you:
+     * modify, adapt, translate, or create derivative works of the Software;
+     * reverse-engineer, decompile, or disassemble it, except to the extent
+       that right cannot lawfully be excluded;
+     * resell, relicense, sublicense, rent, or redistribute the Software on its
+       own — as a package, fork, component, or competing library;
+     * remove or alter this licence or any copyright or authorship notice.
+
+4. NO WARRANTY. The Software is provided "AS IS", without warranty of any kind,
+   express or implied. To the fullest extent permitted by law, Chromatic
+   Coherence accepts no liability for any claim, damage, or loss arising from
+   the Software or its use.
+
+For commercial licensing, contact hello@chromaticcoherence.ai.

package/README.md

@@ -0,0 +1,37 @@
+# @chromatic-coherence/generative-charts-3d
+
+**The second generative-charts engine.** The same API as
+[generative-charts-2d](https://chromaticcoherence.ai/generative-charts) — `createWorld`, `line`,
+`glow`, `face`, `grow`, the `draw*` living verbs, `cam`, `light`, `lights`, `pick` — rendered on
+WebGL. Zero dependencies; the browser is still the whole runtime.
+
+> **Status: v0.12.0 — the GPU edition, alpha.** What the GPU gives that canvas could not:
+> a **real depth buffer** — occlusion is exact and always on, for solids *and* for light
+> (a lamp behind a hill is hidden, no flags needed) — and **per-pixel light**: Lambert +
+> point-light falloff evaluated in the fragment shader, so light sweeps smoothly ACROSS a
+> face instead of flat-shading it. Deferred honestly: shadow maps, mirrors, `fade()` groups.
+> Labels ride a synced 2D overlay (never occluded, as in 2d). Browser-only.
+
+## Usage
+
+```ts
+import { createWorld, v3 } from "@chromatic-coherence/generative-charts-3d";
+
+const w = createWorld({ canvas, controls: true });
+w.light.signed = true;
+w.lights.push({ p: v3(0, 150, 0), intensity: 0.9, falloff: 300 });
+w.face(v3(-100, 0, -100), v3(100, 0, -100), v3(0, 0, 100), { hue: 265, sat: 40, light: 32 });
+w.grow((t, dt, world) => world.drawGlow(v3(Math.cos(t) * 80, 30, Math.sin(t) * 80), 40, 12, 0.9));
+w.start();
+```
+
+Scenes written for generative-charts-2d largely run unchanged — same camera, same verbs, same payloads.
+
+## 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. Install and use it as-is, embedded in your app — you may not modify it or
+redistribute it on its own. Full terms: [LICENSE](./LICENSE).
+
+© 2026 Chromatic Coherence. All rights reserved.

package/dist/index.d.ts

@@ -0,0 +1,196 @@
+export type V3 = {
+    x: number;
+    y: number;
+    z: number;
+};
+export declare const v3: (x?: number, y?: number, z?: number) => V3;
+export declare const add: (a: V3, b: V3) => V3;
+export declare const sub: (a: V3, b: V3) => V3;
+export declare const scale: (a: V3, s: number) => V3;
+export declare const dot: (a: V3, b: V3) => number;
+export declare const cross: (a: V3, b: V3) => V3;
+export declare const len: (a: V3) => number;
+export declare const norm: (a: V3) => V3;
+export declare const TAU: number;
+export declare const clamp: (v: number, lo: number, hi: number) => number;
+export declare const lerp: (a: number, b: number, u: number) => number;
+export declare const easeInOut: (u: number) => number;
+export declare function rnd(i: number, k: number): number;
+export type LineOpts = {
+    hue: number;
+    sat?: number;
+    light?: number;
+    alpha: number;
+    group?: string;
+};
+export type GlowOpts = {
+    hue?: number;
+    white?: boolean;
+    size: number;
+    alpha: number;
+    group?: string;
+};
+export type FaceOpts = {
+    hue: number;
+    sat?: number;
+    light?: number;
+    alpha?: number;
+    group?: string;
+    /** v0.5 — per-face material gloss 0..1 (multiplies the specular): skin ~0.5, cloth ~0.05. */
+    gloss?: number;
+    /** v0.8 — per-face perfusion 0..1: blood near the surface. Ruddiness + red subsurface bleed;
+     *  the world's bloodPulse rides on it. Skin ~0.1; a worked muscle flushes higher. */
+    blood?: number;
+};
+export type PointLight = {
+    p: V3;
+    intensity: number;
+    falloff: number;
+};
+export type Projected = {
+    x: number;
+    y: number;
+    s: number;
+    z: number;
+};
+export type GrowFn = (t: number, dt: number, w: World) => void;
+export type WorldOpts = {
+    canvas: HTMLCanvasElement;
+    maxDpr?: number;
+    drift?: number;
+    parallax?: number;
+    controls?: boolean;
+    shadows?: boolean;
+    camera?: {
+        target?: V3;
+        dist?: number;
+        pitch?: number;
+        yaw?: number;
+        fov?: number;
+    };
+};
+export declare class World {
+    private canvas;
+    private gl;
+    private overlay;
+    private og;
+    private opts;
+    private pFace;
+    private pLine;
+    private pPt;
+    private pDepth;
+    private shadowsOn;
+    private shadowFBO;
+    private shadowTex;
+    private svp;
+    private sFace;
+    private sLine;
+    private sPt;
+    private dFaceA;
+    private dLineA;
+    private dPtA;
+    private labels;
+    private bFace;
+    private bLine;
+    private bPt;
+    private bFaceD;
+    private bLineD;
+    private bPtD;
+    private staticDirty;
+    private hooks;
+    private raf;
+    private t0;
+    private tPrev;
+    private disposed;
+    private cleanup;
+    private fLight;
+    cam: {
+        target: V3;
+        dist: number;
+        pitch: number;
+        yawBase: number;
+        yawUser: number;
+        pitchUser: number;
+        distT: number;
+        fov: number;
+    };
+    light: {
+        dir: V3;
+        ambient: number;
+        diffuse: number;
+        signed: boolean;
+    };
+    lights: PointLight[];
+    /** v0.2 — per-pixel specular strength (0 = matte). Skin catches the light around 0.5. */
+    specular: number;
+    /** v0.5 — the ambient's colour, above and below (white = neutral, as before). */
+    ambientSky: V3;
+    ambientGround: V3;
+    /** v0.7 — the film look: filmic tone mapping on the solids (highlights roll off). */
+    filmic: boolean;
+    /** v0.12 — the colour grade: violet-cool shadows, warm highlights on the solids (art-directed). */
+    grade: boolean;
+    /** v0.12 — a cinematic vignette 0..1: edge-darkening on the composite, drawn on the overlay. */
+    vignette: number;
+    /** v0.8 — the global heartbeat: a scene sets this 0..1 each frame; it rides the per-face
+     *  blood so all perfused skin flushes together with the pulse. */
+    bloodPulse: number;
+    private groupIdx;
+    private groupAlpha;
+    private groupTarget;
+    private idxFor;
+    /** Fade a named group toward a target alpha — eased per frame, exactly as in 2d. */
+    fade(name: string, target: number): void;
+    W: number;
+    H: number;
+    private mx;
+    private my;
+    private mxT;
+    private myT;
+    private yawUserT;
+    private pitchUserT;
+    private cx;
+    private rt;
+    private up;
+    private fw;
+    private focal;
+    private vp;
+    constructor(o: WorldOpts);
+    private wireControls;
+    private resize;
+    private pushFace;
+    /** v0.2 — pass per-vertex normals (na, nb, nc) and shading interpolates SMOOTHLY across
+     *  the face: the facets vanish. Omit them for flat shading, exactly as before. */
+    face(a: V3, b: V3, c: V3, o: FaceOpts, na?: V3, nb?: V3, nc?: V3): void;
+    line(a: V3, b: V3, o: LineOpts): void;
+    glow(p: V3, o: GlowOpts): void;
+    dust(p: V3, alpha: number): void;
+    grow(fn: GrowFn): void;
+    drawLine(a: V3, b: V3, color: string, alpha: number, width?: number): void;
+    drawPath(pts: {
+        p: V3;
+    }[], color: string, alpha: number, width?: number): void;
+    drawGlow(p: V3, hue: number | null, size: number, alpha: number): void;
+    drawLabel(p: V3, text: string, color: string, alpha: number, dy?: number): void;
+    drawFace(a: V3, b: V3, c: V3, o: FaceOpts, na?: V3, nb?: V3, nc?: V3): void;
+    /** Screen-space overlay (the 2D label canvas — never occluded, like 2d's overlay()). */
+    overlay2d(cb: (g: CanvasRenderingContext2D, w: World) => void): void;
+    private setupCamera;
+    project(p: V3): Projected | null;
+    fog(z: number): number;
+    pick(sx: number, sy: number, planeY?: number): V3 | null;
+    get surface(): HTMLCanvasElement;
+    private renderFrame;
+    private setVP;
+    private setFog;
+    private setLights;
+    private attrib;
+    private depthDraw;
+    private drawFaces;
+    private drawLines;
+    private drawPts;
+    start(): void;
+    settle(t: number): void;
+    dispose(): void;
+}
+export declare function createWorld(o: WorldOpts): World;

package/dist/index.js

@@ -0,0 +1,771 @@
+// dark-math-3d — THE SECOND ENGINE. The same API as dark-math-2d, rendered on WebGL.
+//
+// Zero third-party imports, on purpose. What the GPU gives that canvas could not:
+//   • a REAL DEPTH BUFFER — occlusion is exact and always on, for solids AND for light
+//     (glows and lines are depth-tested against the faces: a lamp behind a hill is hidden)
+//   • PER-PIXEL LIGHT — Lambert + point-light falloff evaluated in the fragment shader,
+//     so light sweeps smoothly ACROSS a face instead of flat-shading it
+// v0.1 first light · v0.2 smooth normals + specular · v0.3 real shadow maps (PCF)
+// · v0.4 fade() groups · v0.5 materials (gloss + coloured ambient) · v0.6 soft shadows
+// · v0.7 filmic tone map · v0.8 THE PERFUSION TERM — blood near the surface changes how it
+//   meets the light (ruddiness + red subsurface bleed + the global pulse). The frontier:
+//   effort is fluid moving, and fluid moving is visible. Deferred: mirrors.
+export const v3 = (x = 0, y = 0, z = 0) => ({ x, y, z });
+export const add = (a, b) => v3(a.x + b.x, a.y + b.y, a.z + b.z);
+export const sub = (a, b) => v3(a.x - b.x, a.y - b.y, a.z - b.z);
+export const scale = (a, s) => v3(a.x * s, a.y * s, a.z * s);
+export const dot = (a, b) => a.x * b.x + a.y * b.y + a.z * b.z;
+export const cross = (a, b) => v3(a.y * b.z - a.z * b.y, a.z * b.x - a.x * b.z, a.x * b.y - a.y * b.x);
+export const len = (a) => Math.hypot(a.x, a.y, a.z);
+export const norm = (a) => { const l = len(a) || 1; return v3(a.x / l, a.y / l, a.z / l); };
+export const TAU = Math.PI * 2;
+export const clamp = (v, lo, hi) => Math.max(lo, Math.min(hi, v));
+export const lerp = (a, b, u) => a + (b - a) * u;
+export const easeInOut = (u) => (u < 0.5 ? 4 * u * u * u : 1 - Math.pow(-2 * u + 2, 3) / 2);
+export function rnd(i, k) {
+    const x = Math.sin(i * 12.9898 + k * 78.233) * 43758.5453;
+    return x - Math.floor(x);
+}
+// hsl → rgb (0..1), CPU-side — colours ride the vertex buffers
+function hsl(h, s, l) {
+    h = (((h % 360) + 360) % 360) / 360;
+    s = clamp(s, 0, 100) / 100;
+    l = clamp(l, 0, 100) / 100;
+    if (s === 0)
+        return [l, l, l];
+    const q = l < 0.5 ? l * (1 + s) : l + s - l * s, p = 2 * l - q;
+    const f = (t) => {
+        t = ((t % 1) + 1) % 1;
+        if (t < 1 / 6)
+            return p + (q - p) * 6 * t;
+        if (t < 1 / 2)
+            return q;
+        if (t < 2 / 3)
+            return p + (q - p) * (2 / 3 - t) * 6;
+        return p;
+    };
+    return [f(h + 1 / 3), f(h), f(h - 1 / 3)];
+}
+function mPerspective(fovy, aspect, near, far) {
+    const f = 1 / Math.tan(fovy / 2), nf = 1 / (near - far);
+    const m = new Float32Array(16);
+    m[0] = f / aspect;
+    m[5] = f;
+    m[10] = (far + near) * nf;
+    m[11] = -1;
+    m[14] = 2 * far * near * nf;
+    return m;
+}
+function mLookAt(eye, at, up) {
+    const zc = norm(sub(eye, at)), xc = norm(cross(up, zc)), yc = cross(zc, xc);
+    const m = new Float32Array(16);
+    m[0] = xc.x;
+    m[1] = yc.x;
+    m[2] = zc.x;
+    m[4] = xc.y;
+    m[5] = yc.y;
+    m[6] = zc.y;
+    m[8] = xc.z;
+    m[9] = yc.z;
+    m[10] = zc.z;
+    m[12] = -dot(xc, eye);
+    m[13] = -dot(yc, eye);
+    m[14] = -dot(zc, eye);
+    m[15] = 1;
+    return m;
+}
+function mMul(a, b) {
+    const o = new Float32Array(16);
+    for (let c = 0; c < 4; c++)
+        for (let r = 0; r < 4; r++)
+            o[c * 4 + r] = a[r] * b[c * 4] + a[4 + r] * b[c * 4 + 1] + a[8 + r] * b[c * 4 + 2] + a[12 + r] * b[c * 4 + 3];
+    return o;
+}
+const FACE_VS = `
+attribute vec3 aPos; attribute vec3 aNorm; attribute vec4 aCol; attribute float aGrp; attribute float aBlood;
+uniform mat4 uVP; uniform mat4 uSVP; uniform float uGA[8];
+varying vec3 vPos; varying vec3 vNorm; varying vec4 vCol; varying float vZ; varying vec4 vSh; varying float vGA; varying float vBlood;
+void main(){ vPos=aPos; vNorm=aNorm; vCol=aCol; vGA=uGA[int(aGrp+0.5)]; vBlood=aBlood;
+  vec4 p=uVP*vec4(aPos,1.0); vZ=p.w; vSh=uSVP*vec4(aPos,1.0); gl_Position=p; }`;
+const DEPTH_VS = `
+attribute vec3 aPos; uniform mat4 uVP; varying float vD;
+void main(){ vec4 p=uVP*vec4(aPos,1.0); vD=p.z/p.w*0.5+0.5; gl_Position=p; }`;
+const DEPTH_FS = `
+precision mediump float; varying float vD;
+vec4 pack(float d){ vec4 e=fract(d*vec4(1.,255.,65025.,16581375.)); return e-e.yzww*vec4(1./255.,1./255.,1./255.,0.); }
+void main(){ gl_FragColor=pack(clamp(vD,0.,1.)); }`;
+const FACE_FS = `
+precision mediump float;
+varying vec3 vPos; varying vec3 vNorm; varying vec4 vCol; varying float vZ;
+uniform vec3 uLdir; uniform float uAmb; uniform float uDif; uniform float uSigned;
+uniform vec3 uLp[4]; uniform float uLi[4]; uniform float uLf[4]; uniform int uLn;
+uniform vec3 uCam; uniform float uFogK; uniform float uSpec;
+uniform vec3 uSkyC; uniform vec3 uGroundC; uniform float uFilm; uniform float uGrade;
+uniform float uShadowOn; uniform sampler2D uShadow; uniform float uPulse;
+varying vec4 vSh; varying float vGA; varying float vBlood;
+float unpack(vec4 e){ return dot(e, vec4(1., 1./255., 1./65025., 1./16581375.)); }
+float h3(vec3 p){ return fract(sin(dot(p, vec3(12.9898, 78.233, 37.719))) * 43758.5453); }
+float vnoise(vec3 p){ vec3 i = floor(p), f = fract(p); f = f * f * (3.0 - 2.0 * f);
+  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),
+             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); }
+float shadowAt(vec2 uv, float ref){
+  if (uv.x < 0.0 || uv.x > 1.0 || uv.y < 0.0 || uv.y > 1.0) return 1.0;
+  return ref - 0.0035 <= unpack(texture2D(uShadow, uv)) ? 1.0 : 0.0;
+}
+void main(){
+  vec3 n = normalize(vNorm);
+  vec3 V = normalize(uCam - vPos);
+  float skin0 = clamp(vBlood * 5.0, 0.0, 1.0);
+  // v0.11 — a PROCEDURAL NORMAL MAP: perturb the shading normal by the gradient of a fine
+  //   noise field, so the surface catches light as if it had micro-relief (pores, weave) —
+  //   the trick real engines get from baked normal maps, done in pure math.
+  {
+    float bs = 5.5, e = 0.12, n0 = vnoise(vPos * bs);
+    vec3 g = vec3(vnoise(vPos * bs + vec3(e, 0.0, 0.0)) - n0,
+                  vnoise(vPos * bs + vec3(0.0, e, 0.0)) - n0,
+                  vnoise(vPos * bs + vec3(0.0, 0.0, e)) - n0) / e;
+    n = normalize(n - g * (0.10 + 0.30 * skin0));
+  }
+  float d = dot(n, normalize(uLdir));
+  float shade = uAmb + uDif * mix(abs(d), max(d, 0.0), uSigned);
+  float spec = 0.0;
+  float sh = 1.0;
+  if (uShadowOn > 0.5) { // lights[0] casts — 3x3 PCF for genuinely soft penumbrae (v0.6)
+    vec3 pr = vSh.xyz / vSh.w * 0.5 + 0.5;
+    float px = 1.6 / 1024.0;
+    sh = 0.0;
+    for (int sy = -1; sy <= 1; sy++)
+      for (int sx = -1; sx <= 1; sx++)
+        sh += shadowAt(pr.xy + vec2(float(sx), float(sy)) * px, pr.z);
+    sh /= 9.0;
+    sh = 0.35 + 0.65 * sh;
+  }
+  for (int i = 0; i < 4; i++) { if (i >= uLn) break;
+    vec3 v = uLp[i] - vPos; float d2 = dot(v, v); vec3 L = v * inversesqrt(d2 + 1e-4);
+    float lam = dot(n, L); lam = mix(abs(lam), max(lam, 0.0), uSigned);
+    float fall = 1.0 / (1.0 + d2 / (uLf[i] * uLf[i]));
+    float k = (i == 0) ? sh : 1.0;
+    shade += uLi[i] * lam * fall * k;
+    // v0.11 — GGX microfacet specular + Fresnel: roughness from the face's gloss (alpha slot),
+    //   so skin gives a tight bright highlight and cloth a broad dull sheen — real material response.
+    vec3 H = normalize(L + V);
+    float nh = max(dot(n, H), 0.0);
+    float rough = clamp(1.0 - vCol.a, 0.08, 1.0), a2 = rough * rough; a2 = a2 * a2;
+    float dnm = nh * nh * (a2 - 1.0) + 1.0;
+    float ggx = a2 / (3.14159 * dnm * dnm);
+    float fres = 0.04 + 0.96 * pow(1.0 - max(dot(H, V), 0.0), 5.0);
+    spec += uLi[i] * min(ggx, 6.0) * fres * fall * k * 0.16;
+  }
+  // v0.5 — the ambient has a COLOUR: cool from above, warm from below (the room bounces)
+  vec3 tint = mix(uGroundC, uSkyC, n.y * 0.5 + 0.5);
+  vec3 lit = vCol.rgb * (uAmb * tint + vec3(shade - uAmb));
+  // v0.8 — THE PERFUSION TERM: blood near the surface changes how it meets the light.
+  //   the global pulse rides on the per-face blood; ruddiness where it pools, and a red
+  //   subsurface bleed strongest at the terminator (where light grazes thin tissue).
+  float b = clamp(vBlood + uPulse * vBlood * 6.0, 0.0, 1.0);
+  lit *= mix(vec3(1.0), vec3(1.07, 0.95, 0.94), b);        // the flush
+  lit += vec3(0.62, 0.06, 0.08) * (b * 0.20 * (1.0 - abs(d))); // the subsurface red at the terminator
+  // v0.9 — skin micro-texture: fine pore noise, only where there is blood (skin, not cloth)
+  float skin = clamp(vBlood * 5.0, 0.0, 1.0);
+  float pore = vnoise(vPos * 2.4) * 0.6 + vnoise(vPos * 6.0) * 0.4;
+  lit *= 1.0 + (pore - 0.5) * 0.09 * skin;
+  // v0.10 — subsurface RIM: at grazing angles skin is thin and light bleeds through red
+  //   (the ears, the nose, fingers seen edge-on glow warm — the deepest skin cue there is)
+  float fres = pow(1.0 - clamp(dot(n, V), 0.0, 1.0), 3.0);
+  lit += vec3(0.55, 0.09, 0.10) * fres * skin * (0.28 + 0.5 * b);
+  float fog = clamp(uFogK / vZ, 0.08, 1.0);
+  vec3 outC = (lit + vec3(1.0) * spec * uSpec * vCol.a) * fog * vGA;
+  if (uFilm > 0.5) { // v0.7 — the film look: highlights roll off instead of clipping
+    outC = (outC * (2.51 * outC + 0.03)) / (outC * (2.43 * outC + 0.59) + 0.14);
+  }
+  if (uGrade > 0.5) { // v0.12 — the colour grade: violet-cool shadows, warm highlights (art-directed)
+    float luma = dot(outC, vec3(0.299, 0.587, 0.114));
+    outC *= mix(vec3(0.85, 0.83, 1.07), vec3(1.07, 0.99, 0.92), smoothstep(0.12, 0.72, luma));
+    outC = clamp(outC, 0.0, 1.0);
+  }
+  gl_FragColor = vec4(outC, 1.0);
+}`;
+const LINE_VS = `
+attribute vec3 aPos; attribute vec4 aCol; attribute float aGrp;
+uniform mat4 uVP; uniform float uGA[8];
+varying vec4 vCol; varying float vZ; varying float vGA;
+void main(){ vCol=aCol; vGA=uGA[int(aGrp+0.5)]; vec4 p=uVP*vec4(aPos,1.0); vZ=p.w; gl_Position=p; }`;
+const LINE_FS = `
+precision mediump float; varying vec4 vCol; varying float vZ; varying float vGA; uniform float uFogK;
+void main(){ float fog = clamp(uFogK / vZ, 0.08, 1.0); gl_FragColor = vec4(vCol.rgb * fog, vCol.a * fog * vGA); }`;
+const PT_VS = `
+attribute vec3 aPos; attribute float aSize; attribute vec4 aCol; attribute float aGrp;
+uniform mat4 uVP; uniform float uFocal; uniform float uGA[8];
+varying vec4 vCol; varying float vZ; varying float vGA;
+void main(){ vCol=aCol; vGA=uGA[int(aGrp+0.5)]; vec4 p=uVP*vec4(aPos,1.0); vZ=p.w;
+  gl_PointSize = clamp(aSize * uFocal / p.w, 1.0, 256.0); gl_Position=p; }`;
+const PT_FS = `
+precision mediump float; varying vec4 vCol; varying float vZ; varying float vGA; uniform float uFogK;
+void main(){
+  float r = length(gl_PointCoord - 0.5) * 2.0;
+  float a = exp(-3.2 * r * r) * (1.0 - smoothstep(0.85, 1.0, r));
+  float fog = clamp(uFogK / vZ, 0.08, 1.0);
+  gl_FragColor = vec4(vCol.rgb, 1.0) * (vCol.a * a * fog * vGA);
+}`;
+function makeProg(gl, vs, fs) {
+    const sh = (type, src) => {
+        const s = gl.createShader(type);
+        gl.shaderSource(s, src);
+        gl.compileShader(s);
+        if (!gl.getShaderParameter(s, gl.COMPILE_STATUS))
+            throw new Error("dark-math-3d shader: " + gl.getShaderInfoLog(s));
+        return s;
+    };
+    const p = gl.createProgram();
+    gl.attachShader(p, sh(gl.VERTEX_SHADER, vs));
+    gl.attachShader(p, sh(gl.FRAGMENT_SHADER, fs));
+    gl.linkProgram(p);
+    if (!gl.getProgramParameter(p, gl.LINK_STATUS))
+        throw new Error("dark-math-3d link: " + gl.getProgramInfoLog(p));
+    return p;
+}
+/** Parse a css hsl(...) string the way the 2d examples write them. */
+function parseHsl(c) {
+    const m = /hsl\(\s*([\d.]+)[deg\s]*[, ]\s*([\d.]+)%[, ]\s*([\d.]+)%/.exec(c);
+    return m ? hsl(+m[1], +m[2], +m[3]) : [0.9, 0.9, 1];
+}
+export class World {
+    idxFor(name) {
+        const n = name ?? "default";
+        let i = this.groupIdx.get(n);
+        if (i == null) {
+            i = Math.min(7, this.groupIdx.size);
+            this.groupIdx.set(n, i);
+        }
+        return i;
+    }
+    /** Fade a named group toward a target alpha — eased per frame, exactly as in 2d. */
+    fade(name, target) { this.groupTarget[this.idxFor(name)] = clamp(target, 0, 1); }
+    constructor(o) {
+        this.shadowFBO = null;
+        this.shadowTex = null;
+        this.svp = new Float32Array([1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]);
+        this.sFace = [];
+        this.sLine = [];
+        this.sPt = [];
+        this.dFaceA = [];
+        this.dLineA = [];
+        this.dPtA = [];
+        this.labels = [];
+        this.staticDirty = true;
+        this.hooks = [];
+        this.raf = 0;
+        this.t0 = 0;
+        this.tPrev = 0;
+        this.disposed = false;
+        this.cleanup = [];
+        this.fLight = [];
+        this.cam = { target: v3(0, 0, 0), dist: 700, pitch: 0.5, yawBase: 0, yawUser: 0, pitchUser: 0, distT: 700, fov: 1.15 };
+        this.light = { dir: v3(0, 1, 0), ambient: 0.55, diffuse: 0.45, signed: false };
+        this.lights = [];
+        /** v0.2 — per-pixel specular strength (0 = matte). Skin catches the light around 0.5. */
+        this.specular = 0;
+        /** v0.5 — the ambient's colour, above and below (white = neutral, as before). */
+        this.ambientSky = v3(1, 1, 1);
+        this.ambientGround = v3(1, 1, 1);
+        /** v0.7 — the film look: filmic tone mapping on the solids (highlights roll off). */
+        this.filmic = false;
+        /** v0.12 — the colour grade: violet-cool shadows, warm highlights on the solids (art-directed). */
+        this.grade = false;
+        /** v0.12 — a cinematic vignette 0..1: edge-darkening on the composite, drawn on the overlay. */
+        this.vignette = 0;
+        /** v0.8 — the global heartbeat: a scene sets this 0..1 each frame; it rides the per-face
+         *  blood so all perfused skin flushes together with the pulse. */
+        this.bloodPulse = 0;
+        // v0.4 — fade(): named groups with eased alphas, resolved in the shaders (max 8 groups)
+        this.groupIdx = new Map([["default", 0]]);
+        this.groupAlpha = new Float32Array(8).fill(1);
+        this.groupTarget = new Float32Array(8).fill(1);
+        this.W = 0;
+        this.H = 0;
+        this.mx = 0;
+        this.my = 0;
+        this.mxT = 0;
+        this.myT = 0;
+        this.yawUserT = 0;
+        this.pitchUserT = 0;
+        this.cx = v3();
+        this.rt = v3();
+        this.up = v3();
+        this.fw = v3();
+        this.focal = 0;
+        this.vp = new Float32Array(16);
+        this.canvas = o.canvas;
+        const gl = o.canvas.getContext("webgl", { alpha: true, antialias: true, premultipliedAlpha: true });
+        if (!gl)
+            throw new Error("dark-math-3d: no webgl context");
+        this.gl = gl;
+        this.opts = {
+            maxDpr: o.maxDpr ?? 2,
+            drift: o.drift ?? 0.045,
+            parallax: o.parallax ?? 0.3,
+            controls: o.controls ?? false,
+        };
+        if (o.camera) {
+            if (o.camera.target)
+                this.cam.target = o.camera.target;
+            if (o.camera.dist != null) {
+                this.cam.dist = o.camera.dist;
+                this.cam.distT = o.camera.dist;
+            }
+            if (o.camera.pitch != null)
+                this.cam.pitch = o.camera.pitch;
+            if (o.camera.yaw != null)
+                this.cam.yawBase = o.camera.yaw;
+            if (o.camera.fov != null)
+                this.cam.fov = o.camera.fov;
+        }
+        this.pFace = makeProg(gl, FACE_VS, FACE_FS);
+        this.pLine = makeProg(gl, LINE_VS, LINE_FS);
+        this.pPt = makeProg(gl, PT_VS, PT_FS);
+        this.pDepth = makeProg(gl, DEPTH_VS, DEPTH_FS);
+        this.shadowsOn = o.shadows ?? false;
+        if (this.shadowsOn) {
+            this.shadowTex = gl.createTexture();
+            gl.bindTexture(gl.TEXTURE_2D, this.shadowTex);
+            gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1024, 1024, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
+            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+            const rb = gl.createRenderbuffer();
+            gl.bindRenderbuffer(gl.RENDERBUFFER, rb);
+            gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT16, 1024, 1024);
+            this.shadowFBO = gl.createFramebuffer();
+            gl.bindFramebuffer(gl.FRAMEBUFFER, this.shadowFBO);
+            gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this.shadowTex, 0);
+            gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, rb);
+            gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+        }
+        this.bFace = gl.createBuffer();
+        this.bLine = gl.createBuffer();
+        this.bPt = gl.createBuffer();
+        this.bFaceD = gl.createBuffer();
+        this.bLineD = gl.createBuffer();
+        this.bPtD = gl.createBuffer();
+        // the label overlay — a synced 2D canvas floated over the GL surface
+        this.overlay = document.createElement("canvas");
+        this.overlay.style.cssText = "position:absolute;inset:0;width:100%;height:100%;pointer-events:none;";
+        const parent = this.canvas.parentElement;
+        if (parent) {
+            if (getComputedStyle(parent).position === "static")
+                parent.style.position = "relative";
+            parent.appendChild(this.overlay);
+        }
+        this.og = this.overlay.getContext("2d");
+        this.resize();
+        const ro = new ResizeObserver(() => this.resize());
+        ro.observe(this.canvas);
+        this.cleanup.push(() => ro.disconnect());
+        const onMouse = (e) => {
+            this.mxT = (e.clientX / window.innerWidth - 0.5) * 2;
+            this.myT = (e.clientY / window.innerHeight - 0.5) * 2;
+        };
+        window.addEventListener("mousemove", onMouse);
+        this.cleanup.push(() => window.removeEventListener("mousemove", onMouse));
+        if (this.opts.controls)
+            this.wireControls();
+    }
+    wireControls() {
+        const cv = this.canvas;
+        cv.style.touchAction = "pan-y";
+        cv.style.cursor = "grab";
+        let dragging = false, lx = 0, ly = 0;
+        const down = (e) => { dragging = true; lx = e.clientX; ly = e.clientY; cv.style.cursor = "grabbing"; cv.setPointerCapture(e.pointerId); };
+        const move = (e) => {
+            if (!dragging)
+                return;
+            this.yawUserT -= (e.clientX - lx) * 0.0045;
+            this.pitchUserT = clamp(this.pitchUserT + (e.clientY - ly) * 0.003, -0.3, 0.4);
+            lx = e.clientX;
+            ly = e.clientY;
+        };
+        const upFn = () => { dragging = false; cv.style.cursor = "grab"; };
+        const wheel = (e) => {
+            if (!e.ctrlKey && !e.metaKey)
+                return;
+            e.preventDefault();
+            this.cam.distT = clamp(this.cam.distT + e.deltaY * 0.6, 120, 2200);
+        };
+        cv.addEventListener("pointerdown", down);
+        cv.addEventListener("pointermove", move);
+        cv.addEventListener("pointerup", upFn);
+        cv.addEventListener("pointercancel", upFn);
+        cv.addEventListener("wheel", wheel, { passive: false });
+        this.cleanup.push(() => {
+            cv.removeEventListener("pointerdown", down);
+            cv.removeEventListener("pointermove", move);
+            cv.removeEventListener("pointerup", upFn);
+            cv.removeEventListener("pointercancel", upFn);
+            cv.removeEventListener("wheel", wheel);
+        });
+    }
+    resize() {
+        const dpr = Math.min(window.devicePixelRatio || 1, this.opts.maxDpr);
+        this.W = this.canvas.clientWidth;
+        this.H = this.canvas.clientHeight;
+        this.canvas.width = Math.max(1, Math.round(this.W * dpr));
+        this.canvas.height = Math.max(1, Math.round(this.H * dpr));
+        this.overlay.width = this.canvas.width;
+        this.overlay.height = this.canvas.height;
+        this.og.setTransform(dpr, 0, 0, dpr, 0, 0);
+        this.gl.viewport(0, 0, this.canvas.width, this.canvas.height);
+    }
+    // ── building the static world (same verbs as 2d) ──
+    pushFace(store, a, b, c, o, na, nb, nc) {
+        const n = na ? undefined : norm(cross(sub(b, a), sub(c, a)));
+        const [r, g, bl] = hsl(o.hue, o.sat ?? 45, o.light ?? 30);
+        const al = clamp(o.alpha ?? 1, 0, 1);
+        const gi = this.idxFor(o.group);
+        // faces are opaque (blend off), so the colour's alpha slot carries the GLOSS — documented
+        const gloss = clamp(o.gloss ?? 0.3, 0, 1);
+        const blood = clamp(o.blood ?? 0, 0, 1);
+        void al;
+        const verts = [[a, na ?? n], [b, nb ?? n], [c, nc ?? n]];
+        for (const [p, nn] of verts)
+            store.push(p.x, p.y, p.z, nn.x, nn.y, nn.z, r, g, bl, gloss, blood, gi);
+    }
+    /** v0.2 — pass per-vertex normals (na, nb, nc) and shading interpolates SMOOTHLY across
+     *  the face: the facets vanish. Omit them for flat shading, exactly as before. */
+    face(a, b, c, o, na, nb, nc) {
+        this.pushFace(this.sFace, a, b, c, o, na, nb, nc);
+        this.staticDirty = true;
+    }
+    line(a, b, o) {
+        const [r, g, bl] = hsl(o.hue, o.sat ?? 80, o.light ?? 55);
+        const al = clamp(o.alpha, 0, 1), gi = this.idxFor(o.group);
+        this.sLine.push(a.x, a.y, a.z, r, g, bl, al, gi, b.x, b.y, b.z, r, g, bl, al, gi);
+        this.staticDirty = true;
+    }
+    glow(p, o) {
+        const [r, g, bl] = o.white ? [1, 1, 1] : hsl(o.hue ?? 0, 85, 62);
+        this.sPt.push(p.x, p.y, p.z, o.size, r, g, bl, clamp(o.alpha, 0, 1), this.idxFor(o.group));
+        this.staticDirty = true;
+    }
+    dust(p, alpha) {
+        this.sPt.push(p.x, p.y, p.z, 1.6, 0.87, 0.89, 1, clamp(alpha * 0.6, 0, 1), 0);
+        this.staticDirty = true;
+    }
+    grow(fn) { this.hooks.push(fn); }
+    // ── the living verbs (gathered per frame, exactly like 2d's two beats) ──
+    drawLine(a, b, color, alpha, width = 1) {
+        this.fLight.push({ k: "line", a, b, color, alpha, width });
+    }
+    drawPath(pts, color, alpha, width = 1) {
+        this.fLight.push({ k: "poly", pts, color, alpha, width });
+    }
+    drawGlow(p, hue, size, alpha) {
+        this.fLight.push({ k: "glow", p, hue, size, alpha });
+    }
+    drawLabel(p, text, color, alpha, dy = 0) {
+        this.fLight.push({ k: "label", p, text, color, alpha, dy });
+    }
+    drawFace(a, b, c, o, na, nb, nc) {
+        this.pushFace(this.dFaceA, a, b, c, o, na, nb, nc);
+    }
+    /** Screen-space overlay (the 2D label canvas — never occluded, like 2d's overlay()). */
+    overlay2d(cb) { cb(this.og, this); }
+    // ── camera (identical maths to 2d) + CPU projection for pick/labels ──
+    setupCamera(t, dt) {
+        this.mx += (this.mxT - this.mx) * Math.min(1, dt * 3);
+        this.my += (this.myT - this.my) * Math.min(1, dt * 3);
+        this.cam.yawUser += (this.yawUserT - this.cam.yawUser) * Math.min(1, dt * 5);
+        this.cam.pitchUser += (this.pitchUserT - this.cam.pitchUser) * Math.min(1, dt * 5);
+        this.cam.dist += (this.cam.distT - this.cam.dist) * Math.min(1, dt * 4);
+        const yaw = this.cam.yawBase + t * this.opts.drift + this.cam.yawUser + this.mx * this.opts.parallax;
+        const pitch = clamp(this.cam.pitch + this.cam.pitchUser + this.my * this.opts.parallax * 0.5, 0.18, 0.95);
+        const cp = Math.cos(pitch), sp = Math.sin(pitch);
+        this.cx = add(this.cam.target, scale(v3(cp * Math.cos(yaw), sp, cp * Math.sin(yaw)), this.cam.dist));
+        this.fw = norm(sub(this.cam.target, this.cx));
+        this.rt = norm(cross(this.fw, v3(0, 1, 0)));
+        this.up = cross(this.rt, this.fw);
+        this.focal = Math.min(this.W, this.H) * this.cam.fov;
+        const fovy = 2 * Math.atan(this.H / (2 * this.focal));
+        this.vp = mMul(mPerspective(fovy, this.W / this.H, 24, 6000), mLookAt(this.cx, this.cam.target, v3(0, 1, 0)));
+    }
+    project(p) {
+        const dx = p.x - this.cx.x, dy = p.y - this.cx.y, dz = p.z - this.cx.z;
+        const z = dx * this.fw.x + dy * this.fw.y + dz * this.fw.z;
+        if (z < 24)
+            return null;
+        const f = this.focal / z;
+        return {
+            x: this.W / 2 + (dx * this.rt.x + dy * this.rt.y + dz * this.rt.z) * f,
+            y: this.H / 2 - (dx * this.up.x + dy * this.up.y + dz * this.up.z) * f,
+            s: f, z,
+        };
+    }
+    fog(z) { return Math.min(1, Math.max(0.08, (this.cam.dist * 0.9) / z)); }
+    pick(sx, sy, planeY = 0) {
+        const rx = (sx - this.W / 2) / this.focal, ry = -(sy - this.H / 2) / this.focal;
+        const dir = norm(add(add(this.fw, scale(this.rt, rx)), scale(this.up, ry)));
+        if (Math.abs(dir.y) < 1e-5)
+            return null;
+        const s = (planeY - this.cx.y) / dir.y;
+        if (s < 24)
+            return null;
+        return add(this.cx, scale(dir, s));
+    }
+    get surface() { return this.canvas; }
+    // ── the frame: gather → render (depth does the occlusion; the shader does the light) ──
+    renderFrame(t, dt) {
+        const gl = this.gl;
+        this.setupCamera(t, dt);
+        this.fLight.length = 0;
+        this.dFaceA.length = 0;
+        this.dLineA.length = 0;
+        this.dPtA.length = 0;
+        for (const fn of this.hooks)
+            fn(t, dt, this);
+        this.labels.length = 0;
+        for (const rec of this.fLight) {
+            if (rec.k === "label") {
+                this.labels.push(rec);
+                continue;
+            }
+            if (rec.k === "glow") {
+                const [r, g, b] = rec.hue == null ? [1, 1, 1] : hsl(rec.hue, 85, 62);
+                this.dPtA.push(rec.p.x, rec.p.y, rec.p.z, rec.size, r, g, b, clamp(rec.alpha, 0, 1), 0);
+            }
+            else if (rec.k === "line") {
+                const [r, g, b] = parseHsl(rec.color);
+                this.dLineA.push(rec.a.x, rec.a.y, rec.a.z, r, g, b, rec.alpha, 0, rec.b.x, rec.b.y, rec.b.z, r, g, b, rec.alpha, 0);
+            }
+            else if (rec.k === "poly") {
+                const [r, g, b] = parseHsl(rec.color);
+                for (let i = 1; i < rec.pts.length; i++) {
+                    const a = rec.pts[i - 1].p, q = rec.pts[i].p;
+                    this.dLineA.push(a.x, a.y, a.z, r, g, b, rec.alpha, 0, q.x, q.y, q.z, r, g, b, rec.alpha, 0);
+                }
+            }
+        }
+        const fogK = this.cam.dist * 0.9;
+        for (let i = 0; i < 8; i++) // fade(): eased group alphas
+            this.groupAlpha[i] += (this.groupTarget[i] - this.groupAlpha[i]) * Math.min(1, dt * 6);
+        // upload face buffers first (the depth pass reads them too)
+        if (this.staticDirty) {
+            gl.bindBuffer(gl.ARRAY_BUFFER, this.bFace);
+            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(this.sFace), gl.STATIC_DRAW);
+            gl.bindBuffer(gl.ARRAY_BUFFER, this.bLine);
+            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(this.sLine), gl.STATIC_DRAW);
+            gl.bindBuffer(gl.ARRAY_BUFFER, this.bPt);
+            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(this.sPt), gl.STATIC_DRAW);
+            this.staticDirty = false;
+        }
+        if (this.dFaceA.length) {
+            gl.bindBuffer(gl.ARRAY_BUFFER, this.bFaceD);
+            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(this.dFaceA), gl.DYNAMIC_DRAW);
+        }
+        // v0.3 — the shadow pass: the world as lights[0] sees it, packed into a depth texture
+        if (this.shadowsOn && this.shadowFBO && this.lights.length) {
+            const lp = this.lights[0].p;
+            const dir = norm(sub(this.cam.target, lp));
+            const up = Math.abs(dir.y) > 0.95 ? v3(1, 0, 0) : v3(0, 1, 0);
+            this.svp = mMul(mPerspective(1.15, 1, 40, 3500), mLookAt(lp, this.cam.target, up));
+            gl.bindFramebuffer(gl.FRAMEBUFFER, this.shadowFBO);
+            gl.viewport(0, 0, 1024, 1024);
+            gl.clearColor(1, 1, 1, 1);
+            gl.enable(gl.DEPTH_TEST);
+            gl.depthMask(true);
+            gl.disable(gl.BLEND);
+            gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+            gl.useProgram(this.pDepth);
+            gl.uniformMatrix4fv(gl.getUniformLocation(this.pDepth, "uVP"), false, this.svp);
+            this.depthDraw(this.bFace, this.sFace.length / 12);
+            this.depthDraw(this.bFaceD, this.dFaceA.length / 12);
+            gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+            gl.viewport(0, 0, this.canvas.width, this.canvas.height);
+        }
+        gl.clearColor(0, 0, 0, 0);
+        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+        // the solids — depth-written, per-pixel lit (and shadowed, when the map is on)
+        gl.enable(gl.DEPTH_TEST);
+        gl.depthMask(true);
+        gl.disable(gl.BLEND);
+        gl.useProgram(this.pFace);
+        this.setVP(this.pFace);
+        this.setLights(this.pFace, fogK);
+        this.drawFaces(this.bFace, this.sFace.length / 12, null);
+        if (this.dFaceA.length)
+            this.drawFaces(this.bFaceD, this.dFaceA.length / 12, null);
+        // the light — additive, depth-TESTED but not written: the dark occludes the light, exactly
+        gl.depthMask(false);
+        gl.enable(gl.BLEND);
+        gl.blendFunc(gl.ONE, gl.ONE);
+        gl.useProgram(this.pLine);
+        this.setVP(this.pLine);
+        this.setFog(this.pLine, fogK);
+        this.drawLines(this.bLine, this.sLine.length / 8, null);
+        if (this.dLineA.length)
+            this.drawLines(this.bLineD, this.dLineA.length / 8, new Float32Array(this.dLineA));
+        gl.useProgram(this.pPt);
+        this.setVP(this.pPt);
+        this.setFog(this.pPt, fogK);
+        const uF = gl.getUniformLocation(this.pPt, "uFocal");
+        gl.uniform1f(uF, this.focal * (this.canvas.width / Math.max(1, this.W)));
+        this.drawPts(this.bPt, this.sPt.length / 9, null);
+        if (this.dPtA.length)
+            this.drawPts(this.bPtD, this.dPtA.length / 9, new Float32Array(this.dPtA));
+        gl.depthMask(true);
+        // the labels — 2D overlay, never occluded (the honest exception, as in 2d)
+        this.og.clearRect(0, 0, this.W, this.H);
+        this.og.font = "600 11px ui-monospace, Menlo, monospace";
+        this.og.textAlign = "center";
+        this.og.textBaseline = "middle";
+        for (const l of this.labels) {
+            const q = this.project(l.p);
+            if (!q)
+                continue;
+            this.og.globalAlpha = clamp(l.alpha, 0, 1);
+            this.og.fillStyle = l.color;
+            this.og.fillText(l.text, q.x, q.y + l.dy);
+        }
+        this.og.globalAlpha = 1;
+        if (this.vignette > 0) { // v0.12 — the cinematic vignette, on the overlay
+            const g = this.og, W = this.W, H = this.H;
+            const grd = g.createRadialGradient(W / 2, H * 0.46, Math.min(W, H) * 0.28, W / 2, H / 2, Math.max(W, H) * 0.72);
+            grd.addColorStop(0, "rgba(0,0,0,0)");
+            grd.addColorStop(1, `rgba(6,4,14,${this.vignette})`);
+            g.fillStyle = grd;
+            g.fillRect(0, 0, W, H);
+        }
+    }
+    setVP(p) {
+        this.gl.uniformMatrix4fv(this.gl.getUniformLocation(p, "uVP"), false, this.vp);
+        this.gl.uniform1fv(this.gl.getUniformLocation(p, "uGA"), this.groupAlpha);
+    }
+    setFog(p, fogK) {
+        this.gl.uniform1f(this.gl.getUniformLocation(p, "uFogK"), fogK);
+    }
+    setLights(p, fogK) {
+        const gl = this.gl, L = norm(this.light.dir);
+        gl.uniform3f(gl.getUniformLocation(p, "uLdir"), L.x, L.y, L.z);
+        gl.uniform1f(gl.getUniformLocation(p, "uAmb"), this.light.ambient);
+        gl.uniform1f(gl.getUniformLocation(p, "uDif"), this.light.diffuse);
+        gl.uniform1f(gl.getUniformLocation(p, "uSigned"), this.light.signed ? 1 : 0);
+        gl.uniform3f(gl.getUniformLocation(p, "uCam"), this.cx.x, this.cx.y, this.cx.z);
+        gl.uniform1f(gl.getUniformLocation(p, "uSpec"), this.specular);
+        gl.uniform1f(gl.getUniformLocation(p, "uPulse"), this.bloodPulse);
+        gl.uniform1f(gl.getUniformLocation(p, "uGrade"), this.grade ? 1 : 0);
+        gl.uniform3f(gl.getUniformLocation(p, "uSkyC"), this.ambientSky.x, this.ambientSky.y, this.ambientSky.z);
+        gl.uniform3f(gl.getUniformLocation(p, "uGroundC"), this.ambientGround.x, this.ambientGround.y, this.ambientGround.z);
+        gl.uniform1f(gl.getUniformLocation(p, "uFilm"), this.filmic ? 1 : 0);
+        gl.uniformMatrix4fv(gl.getUniformLocation(p, "uSVP"), false, this.svp);
+        gl.uniform1f(gl.getUniformLocation(p, "uShadowOn"), this.shadowsOn && this.shadowTex && this.lights.length ? 1 : 0);
+        if (this.shadowTex) {
+            gl.activeTexture(gl.TEXTURE0);
+            gl.bindTexture(gl.TEXTURE_2D, this.shadowTex);
+            gl.uniform1i(gl.getUniformLocation(p, "uShadow"), 0);
+        }
+        this.setFog(p, fogK);
+        const n = Math.min(4, this.lights.length);
+        gl.uniform1i(gl.getUniformLocation(p, "uLn"), n);
+        const lp = new Float32Array(12), li = new Float32Array(4), lf = new Float32Array(4);
+        for (let i = 0; i < n; i++) {
+            lp[i * 3] = this.lights[i].p.x;
+            lp[i * 3 + 1] = this.lights[i].p.y;
+            lp[i * 3 + 2] = this.lights[i].p.z;
+            li[i] = this.lights[i].intensity;
+            lf[i] = this.lights[i].falloff;
+        }
+        gl.uniform3fv(gl.getUniformLocation(p, "uLp"), lp);
+        gl.uniform1fv(gl.getUniformLocation(p, "uLi"), li);
+        gl.uniform1fv(gl.getUniformLocation(p, "uLf"), lf);
+    }
+    attrib(p, name, size, stride, off) {
+        const gl = this.gl, loc = gl.getAttribLocation(p, name);
+        if (loc < 0)
+            return;
+        gl.enableVertexAttribArray(loc);
+        gl.vertexAttribPointer(loc, size, gl.FLOAT, false, stride * 4, off * 4);
+    }
+    depthDraw(buf, verts) {
+        if (!verts)
+            return;
+        const gl = this.gl;
+        gl.bindBuffer(gl.ARRAY_BUFFER, buf);
+        const loc = gl.getAttribLocation(this.pDepth, "aPos");
+        gl.enableVertexAttribArray(loc);
+        gl.vertexAttribPointer(loc, 3, gl.FLOAT, false, 12 * 4, 0);
+        gl.drawArrays(gl.TRIANGLES, 0, verts);
+    }
+    drawFaces(buf, verts, dyn) {
+        if (!verts)
+            return;
+        const gl = this.gl;
+        gl.bindBuffer(gl.ARRAY_BUFFER, buf);
+        if (dyn)
+            gl.bufferData(gl.ARRAY_BUFFER, dyn, gl.DYNAMIC_DRAW);
+        this.attrib(this.pFace, "aPos", 3, 12, 0);
+        this.attrib(this.pFace, "aNorm", 3, 12, 3);
+        this.attrib(this.pFace, "aCol", 4, 12, 6);
+        this.attrib(this.pFace, "aBlood", 1, 12, 10);
+        this.attrib(this.pFace, "aGrp", 1, 12, 11);
+        gl.drawArrays(gl.TRIANGLES, 0, verts);
+    }
+    drawLines(buf, verts, dyn) {
+        if (!verts)
+            return;
+        const gl = this.gl;
+        gl.bindBuffer(gl.ARRAY_BUFFER, buf);
+        if (dyn)
+            gl.bufferData(gl.ARRAY_BUFFER, dyn, gl.DYNAMIC_DRAW);
+        this.attrib(this.pLine, "aPos", 3, 8, 0);
+        this.attrib(this.pLine, "aCol", 4, 8, 3);
+        this.attrib(this.pLine, "aGrp", 1, 8, 7);
+        gl.drawArrays(gl.LINES, 0, verts);
+    }
+    drawPts(buf, verts, dyn) {
+        if (!verts)
+            return;
+        const gl = this.gl;
+        gl.bindBuffer(gl.ARRAY_BUFFER, buf);
+        if (dyn)
+            gl.bufferData(gl.ARRAY_BUFFER, dyn, gl.DYNAMIC_DRAW);
+        this.attrib(this.pPt, "aPos", 3, 9, 0);
+        this.attrib(this.pPt, "aSize", 1, 9, 3);
+        this.attrib(this.pPt, "aCol", 4, 9, 4);
+        this.attrib(this.pPt, "aGrp", 1, 9, 8);
+        gl.drawArrays(gl.POINTS, 0, verts);
+    }
+    start() {
+        const frame = (ts) => {
+            if (this.disposed)
+                return;
+            if (!this.t0) {
+                this.t0 = ts;
+                this.tPrev = ts;
+            }
+            const t = (ts - this.t0) / 1000;
+            const dt = Math.min(0.05, (ts - this.tPrev) / 1000);
+            this.tPrev = ts;
+            this.renderFrame(t, dt);
+            this.raf = !document.hidden ? requestAnimationFrame(frame) : 0;
+        };
+        this.raf = requestAnimationFrame(frame);
+        const onVis = () => {
+            if (!document.hidden && !this.raf && !this.disposed) {
+                this.tPrev = performance.now();
+                this.raf = requestAnimationFrame(frame);
+            }
+        };
+        document.addEventListener("visibilitychange", onVis);
+        this.cleanup.push(() => document.removeEventListener("visibilitychange", onVis));
+    }
+    settle(t) { this.renderFrame(t, 0); }
+    dispose() {
+        this.disposed = true;
+        cancelAnimationFrame(this.raf);
+        this.raf = 0;
+        for (const c of this.cleanup)
+            c();
+        this.cleanup = [];
+        this.overlay.remove();
+    }
+}
+export function createWorld(o) { return new World(o); }

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@chromatic-coherence/generative-charts-3d",
+  "version": "0.12.0",
+  "description": "The second generative-charts engine — the same API as generative-charts-2d, rendered on WebGL: a real depth buffer (occlusion exact, always on, for solids and light) and per-pixel Lambert + point lights. Zero dependencies.",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "3d",
+    "webgl",
+    "engine",
+    "charts",
+    "zero-dependency",
+    "graphics"
+  ],
+  "author": "Chromatic Coherence",
+  "license": "SEE LICENSE IN LICENSE",
+  "devDependencies": {
+    "typescript": "^5"
+  }
+}