@chromatic-coherence/generative-charts-3d 0.12.2 → 0.13.1

package/dist/index.d.ts

@@ -61,6 +61,11 @@ export type WorldOpts = {
     parallax?: number;
     controls?: boolean;
     shadows?: boolean;
+    /** v0.13 — THE INK EDITION: theme "light" renders the same recipe on paper instead of night.
+     *  One rule, applied everywhere: lightness inverts (the dark ground becomes paper, bright
+     *  light becomes ink), the light pass blends normally instead of additively, and fog fades
+     *  toward the page instead of toward black. Recipes need no changes. Default "dark". */
+    theme?: "dark" | "light";
     camera?: {
         target?: V3;
         dist?: number;
@@ -104,6 +109,7 @@ export declare class World {
     private disposed;
     private cleanup;
     private fLight;
+    private ink;
     cam: {
         target: V3;
         dist: number;
@@ -158,6 +164,11 @@ export declare class World {
     constructor(o: WorldOpts);
     private wireControls;
     private resize;
+    private col;
+    private parseCol;
+    private inkCss;
+    /** Remap a recipe-supplied css colour for the ink edition's overlay labels (identity when dark). */
+    private themedCss;
     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. */

package/dist/index.js

@@ -101,7 +101,7 @@ uniform vec3 uLdir; uniform float uAmb; uniform float uDif; uniform float uSigne
 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;
+uniform float uShadowOn; uniform sampler2D uShadow; uniform float uPulse; uniform float uInk;
 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); }
@@ -174,7 +174,10 @@ void main(){
   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;
+  vec3 outC = lit + vec3(1.0) * spec * uSpec * vCol.a;
+  // ink edition: fog fades toward the paper, not toward black (the page shows through)
+  if (uInk > 0.5) outC = mix(vec3(0.90, 0.92, 0.95), outC, fog * vGA);
+  else outC = outC * 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);
   }
@@ -191,8 +194,11 @@ 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); }`;
+precision mediump float; varying vec4 vCol; varying float vZ; varying float vGA; uniform float uFogK; uniform float uInk;
+void main(){ float fog = clamp(uFogK / vZ, 0.08, 1.0);
+  // ink edition: colour holds, alpha fades — the line washes toward the paper behind it
+  if (uInk > 0.5) gl_FragColor = vec4(vCol.rgb, vCol.a * fog * vGA);
+  else 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];
@@ -200,12 +206,15 @@ 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;
+precision mediump float; varying vec4 vCol; varying float vZ; varying float vGA; uniform float uFogK; uniform float uInk;
 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);
+  float A = vCol.a * a * fog * vGA;
+  // ink edition: an ink blot blended normally, not a premultiplied additive glow
+  if (uInk > 0.5) gl_FragColor = vec4(vCol.rgb, A);
+  else gl_FragColor = vec4(vCol.rgb, 1.0) * A;
 }`;
 function makeProg(gl, vs, fs) {
     const sh = (type, src) => {
@@ -224,11 +233,6 @@ function makeProg(gl, vs, fs) {
         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";
@@ -260,6 +264,7 @@ export class World {
         this.disposed = false;
         this.cleanup = [];
         this.fLight = [];
+        this.ink = false; // v0.13 — theme "light": ink on paper instead of light on black
         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 = [];
@@ -295,11 +300,13 @@ export class World {
         this.fw = v3();
         this.focal = 0;
         this.vp = new Float32Array(16);
+        this.inkCss = new Map();
         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.ink = o.theme === "light";
         this.opts = {
             maxDpr: o.maxDpr ?? 2,
             drift: o.drift ?? 0.045,
@@ -416,10 +423,30 @@ export class World {
         this.og.setTransform(dpr, 0, 0, dpr, 0, 0);
         this.gl.viewport(0, 0, this.canvas.width, this.canvas.height);
     }
+    // ── the ink edition's one rule: lightness inverts; recipe colours pass through unchanged when dark ──
+    col(h, s, l) {
+        return hsl(h, s, this.ink ? 100 - l : l);
+    }
+    parseCol(c) {
+        const m = /hsl\(\s*([\d.]+)[deg\s]*[, ]\s*([\d.]+)%[, ]\s*([\d.]+)%/.exec(c);
+        return m ? this.col(+m[1], +m[2], +m[3]) : (this.ink ? [0.18, 0.18, 0.28] : [0.9, 0.9, 1]);
+    }
+    /** Remap a recipe-supplied css colour for the ink edition's overlay labels (identity when dark). */
+    themedCss(color) {
+        if (!this.ink)
+            return color;
+        let c = this.inkCss.get(color);
+        if (!c) {
+            const m = /hsl\(\s*([\d.]+)(?:deg)?[\s,]+([\d.]+)%[\s,]+([\d.]+)%\s*\)/.exec(color);
+            c = m ? `hsl(${m[1]} ${m[2]}% ${clamp(100 - +m[3], 0, 100)}%)` : color;
+            this.inkCss.set(color, c);
+        }
+        return c;
+    }
     // ── 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 [r, g, bl] = this.col(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
@@ -437,18 +464,21 @@ export class World {
         this.staticDirty = true;
     }
     line(a, b, o) {
-        const [r, g, bl] = hsl(o.hue, o.sat ?? 80, o.light ?? 55);
+        const [r, g, bl] = this.col(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);
+        const [r, g, bl] = o.white ? (this.ink ? [0.16, 0.15, 0.24] : [1, 1, 1]) : this.col(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);
+        if (this.ink)
+            this.sPt.push(p.x, p.y, p.z, 1.6, 0.29, 0.31, 0.45, clamp(alpha * 0.6, 0, 1), 0);
+        else
+            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); }
@@ -529,15 +559,15 @@ export class World {
                 continue;
             }
             if (rec.k === "glow") {
-                const [r, g, b] = rec.hue == null ? [1, 1, 1] : hsl(rec.hue, 85, 62);
+                const [r, g, b] = rec.hue == null ? (this.ink ? [0.16, 0.15, 0.24] : [1, 1, 1]) : this.col(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);
+                const [r, g, b] = this.parseCol(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);
+                const [r, g, b] = this.parseCol(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);
@@ -594,9 +624,13 @@ export class World {
         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
+        // (ink edition: normal alpha blending — ink layers over paper instead of light adding up)
         gl.depthMask(false);
         gl.enable(gl.BLEND);
-        gl.blendFunc(gl.ONE, gl.ONE);
+        if (this.ink)
+            gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+        else
+            gl.blendFunc(gl.ONE, gl.ONE);
         gl.useProgram(this.pLine);
         this.setVP(this.pLine);
         this.setFog(this.pLine, fogK);
@@ -622,7 +656,7 @@ export class World {
             if (!q)
                 continue;
             this.og.globalAlpha = clamp(l.alpha, 0, 1);
-            this.og.fillStyle = l.color;
+            this.og.fillStyle = this.themedCss(l.color);
             this.og.fillText(l.text, q.x, q.y + l.dy);
         }
         this.og.globalAlpha = 1;
@@ -630,7 +664,7 @@ export class World {
             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})`);
+            grd.addColorStop(1, this.ink ? `rgba(52,48,76,${this.vignette * 0.3})` : `rgba(6,4,14,${this.vignette})`);
             g.fillStyle = grd;
             g.fillRect(0, 0, W, H);
         }
@@ -641,12 +675,14 @@ export class World {
     }
     setFog(p, fogK) {
         this.gl.uniform1f(this.gl.getUniformLocation(p, "uFogK"), fogK);
+        this.gl.uniform1f(this.gl.getUniformLocation(p, "uInk"), this.ink ? 1 : 0);
     }
     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);
+        // ink edition: paper wants gentler shading — lift the ambient, soften the diffuse swing
+        gl.uniform1f(gl.getUniformLocation(p, "uAmb"), this.ink ? Math.min(1, this.light.ambient + 0.22) : this.light.ambient);
+        gl.uniform1f(gl.getUniformLocation(p, "uDif"), this.ink ? this.light.diffuse * 0.55 : 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);
@@ -654,7 +690,8 @@ export class World {
         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);
+        // ink edition: the filmic curve would grey the paper itself — tone mapping is a night look
+        gl.uniform1f(gl.getUniformLocation(p, "uFilm"), this.filmic && !this.ink ? 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) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chromatic-coherence/generative-charts-3d",
-  "version": "0.12.2",
+  "version": "0.13.1",
   "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",