@appinternalleads/ui 0.4.0 → 0.4.2

package/dist/esm/motion/typesurface/renderer.js

@@ -0,0 +1,732 @@
+'use client';
+/* eslint-disable comppack/no-raw-colour -- the backdrop fallback is scene content. */
+/**
+ * **The WebGL2 renderer.** Draws what the geometry engine returns: table, loose page, the stack,
+ * the sheet, a prop, then the letters on top (depth-tested, so folds hide them), after a shadow
+ * pass from the key light. Textures are cached: the artwork per (surface, seed), the text raster
+ * per (text, typography, width). A colour or a slider never repaints anything; only new words or
+ * a new font repaint the text raster. Browser-only; no React.
+ */
+import { ART_FONTS, paintGrain, paintSurfaceArt } from './art';
+import { TS_BLEND_MODES } from './config';
+import { createGeometryEngine } from './engine';
+import { layoutText, morphGap, glyphShift } from './layout';
+import { findTypeSurfaceFont, typeSurfaceFontsUrl } from './fonts';
+import { DEPTH_FS, DEPTH_VS, SURFACE_FS, SURFACE_VS, TEXT_FS, TEXT_VS } from './shaders';
+import { surfaceFor } from './surfaces';
+import { canvasMeasurer, cssFont, rasterText } from './text';
+const m4 = () => new Float32Array(16);
+function mul(a, b, o = m4()) {
+    for (let i = 0; i < 4; i++)
+        for (let j = 0; j < 4; j++) {
+            let s = 0;
+            for (let k = 0; k < 4; k++)
+                s += a[k * 4 + j] * b[i * 4 + k];
+            o[i * 4 + j] = s;
+        }
+    return o;
+}
+function perspective(fovy, aspect, near, far) {
+    const f = 1 / Math.tan(fovy / 2), o = m4();
+    o[0] = f / aspect;
+    o[5] = f;
+    o[10] = (far + near) / (near - far);
+    o[11] = -1;
+    o[14] = (2 * far * near) / (near - far);
+    return o;
+}
+function ortho(r, near, far) {
+    const o = m4();
+    o[0] = 1 / r;
+    o[5] = 1 / r;
+    o[10] = -2 / (far - near);
+    o[14] = -(far + near) / (far - near);
+    o[15] = 1;
+    return o;
+}
+const sub = (a, b) => [a[0] - b[0], a[1] - b[1], a[2] - b[2]];
+const cross = (a, b) => [a[1] * b[2] - a[2] * b[1], a[2] * b[0] - a[0] * b[2], a[0] * b[1] - a[1] * b[0]];
+const norm = (a) => { const l = Math.hypot(a[0], a[1], a[2]) || 1; return [a[0] / l, a[1] / l, a[2] / l]; };
+const dot = (a, b) => a[0] * b[0] + a[1] * b[1] + a[2] * b[2];
+function lookAt(eye, at, up) {
+    const z = norm(sub(eye, at)), x = norm(cross(up, z)), y = cross(z, x), o = m4();
+    o[0] = x[0];
+    o[4] = x[1];
+    o[8] = x[2];
+    o[1] = y[0];
+    o[5] = y[1];
+    o[9] = y[2];
+    o[2] = z[0];
+    o[6] = z[1];
+    o[10] = z[2];
+    o[12] = -dot(x, eye);
+    o[13] = -dot(y, eye);
+    o[14] = -dot(z, eye);
+    o[15] = 1;
+    return o;
+}
+const hexRgb = (h) => {
+    const s = h.length === 4 ? h.slice(1).split('').map((c) => c + c).join('') : h.slice(1);
+    const n = parseInt(s, 16);
+    return Number.isFinite(n) ? [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255] : [0, 0, 0];
+};
+const TABLES = { desk: 0, studio: 1, wood: 3 };
+/** How each substrate shades: specular, roughness, light through the sheet, and the shader's model. */
+const SHADING = {
+    newsprint: { spec: 0.035, rough: 0.92, translucent: 0.18, model: 0 },
+    paper: { spec: 0.04, rough: 0.9, translucent: 0.2, model: 0 },
+    label: { spec: 0.12, rough: 0.55, translucent: 0, model: 1 },
+    film: { spec: 0.9, rough: 0.1, translucent: 0, model: 2 },
+    fabric: { spec: 0.02, rough: 0.95, translucent: 0.08, model: 3 },
+};
+/** The camera for a config and geometry: perspective sets tilt and field of view together (a dolly zoom). */
+export function cameraFor(config, def, g, aspect) {
+    const p = config.deformation.perspective;
+    const pitch = Math.min(80, Math.max(0, def.camera.flat + (def.camera.deep - def.camera.flat) * p + config.view.pitch)) * (Math.PI / 180);
+    const yaw = config.view.yaw * (Math.PI / 180);
+    const fov = (10 + 18 * p) * (Math.PI / 180);
+    const fit = aspect < 1 ? 1 / aspect : 1;
+    const dist = (g.radius / Math.sin(fov / 2)) * 0.92 * fit / config.view.zoom;
+    const t = g.target;
+    const dir = [Math.sin(pitch) * Math.sin(yaw), -Math.sin(pitch) * Math.cos(yaw), Math.cos(pitch)];
+    const eye = [t[0] + dir[0] * dist, t[1] + dir[1] * dist, t[2] + dir[2] * dist];
+    const up = [-Math.cos(pitch) * Math.sin(yaw), Math.cos(pitch) * Math.cos(yaw), Math.sin(pitch)];
+    // Near and far hug the object: with a narrow lens the camera is far away, and a loose near plane
+    // would leave too little depth precision to keep a label 2.5 mm off its bottle.
+    const reach = g.radius * 3;
+    return { eye, target: t, up, fov, near: Math.max(dist * 0.05, dist - reach), far: dist + reach * 2 };
+}
+export class TypeSurfaceRenderer {
+    canvas;
+    ok;
+    error = null;
+    gl;
+    progSurf;
+    progText;
+    progDepth;
+    engines = new Map();
+    art = new Map();
+    grain;
+    textTex = null;
+    textKey = '';
+    layout = null;
+    layoutKey = '';
+    bufs = new Map();
+    shadowFbo;
+    shadowTex;
+    shadowSize = 2048;
+    indexVersions = new Map();
+    viewProj = m4();
+    fontsVersion = 0;
+    lastGeometry = null;
+    propUv = null;
+    /** Bumped when an engine is (re)built, so static buffers (uvs, triangles) are uploaded again. */
+    geometryVersion = 1;
+    uvVersions = new Map();
+    onFonts = () => { this.fontsVersion++; };
+    constructor(canvas) {
+        this.canvas = canvas;
+        const gl = canvas.getContext('webgl2', { antialias: true, preserveDrawingBuffer: true, alpha: false, depth: true });
+        if (!gl) {
+            this.ok = false;
+            this.error = 'This browser has no WebGL2, which the surface lab needs.';
+            return;
+        }
+        this.gl = gl;
+        try {
+            this.progSurf = this.program(SURFACE_VS, SURFACE_FS);
+            this.progText = this.program(TEXT_VS, TEXT_FS);
+            this.progDepth = this.program(DEPTH_VS, DEPTH_FS);
+        }
+        catch (e) {
+            this.ok = false;
+            this.error = e.message;
+            return;
+        }
+        this.grain = this.texture(paintGrain(3), true, true);
+        this.shadowTex = gl.createTexture();
+        gl.bindTexture(gl.TEXTURE_2D, this.shadowTex);
+        gl.texStorage2D(gl.TEXTURE_2D, 1, gl.DEPTH_COMPONENT24, this.shadowSize, this.shadowSize);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_COMPARE_MODE, gl.COMPARE_REF_TO_TEXTURE);
+        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);
+        this.shadowFbo = gl.createFramebuffer();
+        gl.bindFramebuffer(gl.FRAMEBUFFER, this.shadowFbo);
+        gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.TEXTURE_2D, this.shadowTex, 0);
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+        document.fonts?.addEventListener?.('loadingdone', this.onFonts);
+        for (const f of ART_FONTS)
+            void document.fonts?.load?.(f).catch(() => undefined);
+        this.ok = true;
+    }
+    dispose() {
+        document.fonts?.removeEventListener?.('loadingdone', this.onFonts);
+        this.gl?.getExtension('WEBGL_lose_context')?.loseContext();
+    }
+    program(vs, fs) {
+        const gl = this.gl;
+        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(`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(`Link: ${gl.getProgramInfoLog(p)}`);
+        return { p, u: new Map() };
+    }
+    loc(pr, name) {
+        if (!pr.u.has(name))
+            pr.u.set(name, this.gl.getUniformLocation(pr.p, name));
+        return pr.u.get(name) ?? null;
+    }
+    texture(src, mip, repeat = false) {
+        const gl = this.gl;
+        const t = gl.createTexture();
+        gl.bindTexture(gl.TEXTURE_2D, t);
+        gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
+        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, src);
+        if (mip)
+            gl.generateMipmap(gl.TEXTURE_2D);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, mip ? gl.LINEAR_MIPMAP_LINEAR : gl.LINEAR);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+        const wrap = repeat ? gl.REPEAT : gl.CLAMP_TO_EDGE;
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, wrap);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, wrap);
+        const aniso = gl.getExtension('EXT_texture_filter_anisotropic');
+        if (aniso && mip)
+            gl.texParameterf(gl.TEXTURE_2D, aniso.TEXTURE_MAX_ANISOTROPY_EXT, 8);
+        return t;
+    }
+    buffer(key, data, target, count) {
+        const gl = this.gl;
+        let b = this.bufs.get(key);
+        const bytes = (count ?? data.length) * 4;
+        if (!b || b.size < bytes) {
+            if (b)
+                gl.deleteBuffer(b.buf);
+            b = { buf: gl.createBuffer(), size: data.byteLength };
+            gl.bindBuffer(target, b.buf);
+            gl.bufferData(target, data.byteLength, gl.DYNAMIC_DRAW);
+            this.bufs.set(key, b);
+        }
+        gl.bindBuffer(target, b.buf);
+        gl.bufferSubData(target, 0, data, 0, count ?? data.length);
+        return b.buf;
+    }
+    attr(loc, key, data, size, count) {
+        const gl = this.gl;
+        this.buffer(key, data, gl.ARRAY_BUFFER, count === undefined ? undefined : count * size);
+        gl.enableVertexAttribArray(loc);
+        gl.vertexAttribPointer(loc, size, gl.FLOAT, false, 0, 0);
+    }
+    attrKeep(loc, key, size) {
+        const gl = this.gl;
+        const b = this.bufs.get(key);
+        if (!b)
+            return;
+        gl.bindBuffer(gl.ARRAY_BUFFER, b.buf);
+        gl.enableVertexAttribArray(loc);
+        gl.vertexAttribPointer(loc, size, gl.FLOAT, false, 0, 0);
+    }
+    elements(key, data, count, version) {
+        const gl = this.gl;
+        if (this.indexVersions.get(key) !== version || !this.bufs.has(key)) {
+            this.buffer(key, data, gl.ELEMENT_ARRAY_BUFFER, count);
+            this.indexVersions.set(key, version);
+        }
+        else
+            gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.bufs.get(key).buf);
+    }
+    engine(def) {
+        let e = this.engines.get(def.id);
+        // The engine is built for one definition: a re-registered surface, or an edited object, gets a new one.
+        if (!e || e.def !== def) {
+            if (def.solid)
+                for (const [k, v] of this.engines)
+                    if (v.def.solid)
+                        this.engines.delete(k);
+            e = createGeometryEngine(def);
+            this.engines.set(def.id, e);
+            this.geometryVersion++;
+        }
+        return e;
+    }
+    artFor(def, seed, color) {
+        // Every constructed object shares one slot, so editing one doesn't pile up textures.
+        const slot = def.solid ? 'object' : def.id;
+        const key = `${slot}:${def.solid ? `${def.width.toFixed(4)}:${def.height.toFixed(4)}:` : ''}${seed}:${color}:${this.fontsVersion}`;
+        let a = this.art.get(key);
+        if (!a) {
+            const aspect = def.height / def.width;
+            const { front, back, inner } = paintSurfaceArt(def.art, seed, aspect, color);
+            for (const [k, v] of this.art)
+                if (k.startsWith(`${slot}:`)) {
+                    this.gl.deleteTexture(v.front);
+                    this.gl.deleteTexture(v.back);
+                    this.gl.deleteTexture(v.inner);
+                    this.art.delete(k);
+                }
+            a = { front: this.texture(front, true), back: this.texture(back, true), inner: this.texture(inner, true), aspect };
+            this.art.set(key, a);
+        }
+        return a;
+    }
+    /** The text layout for a config (cached); null for empty text. */
+    layoutFor(config) {
+        const t = config.typography;
+        const key = `${config.text}|${cssFont(t, 100)}|${t.letterSpacing}|${t.lineHeight}|${t.align}|${config.placement.maxWidth}|${this.fontsVersion}`;
+        if (key !== this.layoutKey) {
+            this.layoutKey = key;
+            this.layout = config.text.trim() ? layoutText(config.text, t, config.placement.maxWidth, canvasMeasurer) : null;
+            void document.fonts?.load?.(cssFont(t, 100), config.text).catch(() => undefined);
+        }
+        return this.layout;
+    }
+    textTexture(config, layout) {
+        if (this.layoutKey !== this.textKey) {
+            this.textKey = this.layoutKey;
+            if (this.textTex)
+                this.gl.deleteTexture(this.textTex);
+            this.textTex = this.texture(rasterText(layout, config.typography).canvas, true);
+        }
+        return this.textTex;
+    }
+    /** Where a world point lands on the canvas, in CSS pixels (for the debug overlay and picking). */
+    project(p, o = 0) {
+        const m = this.viewProj;
+        const x = p[o], y = p[o + 1], z = p[o + 2];
+        const cx = m[0] * x + m[4] * y + m[8] * z + m[12];
+        const cy = m[1] * x + m[5] * y + m[9] * z + m[13];
+        const cw = m[3] * x + m[7] * y + m[11] * z + m[15];
+        const w = this.canvas.clientWidth, h = this.canvas.clientHeight;
+        return [((cx / cw) * 0.5 + 0.5) * w, (1 - ((cy / cw) * 0.5 + 0.5)) * h, cw];
+    }
+    get geometry() { return this.lastGeometry; }
+    /**
+     * Resolves once everything `config` draws with has loaded: its text font and the artwork's faces.
+     * It waits for stylesheets still loading, and (unless `loadFonts` is false) links the lab's Google
+     * Fonts stylesheet when the font is one of `TS_FONTS` and the page has not declared it. Any other
+     * undeclared font resolves with its fallback. Render after it.
+     */
+    async whenReady(config, loadFonts = true) {
+        const fonts = document.fonts;
+        if (!fonts?.load)
+            return;
+        const font = cssFont(config.typography, 100);
+        const load = () => fonts.load(font, config.text || 'A').catch(() => []);
+        const sheetLoaded = (l) => (l.sheet ? Promise.resolve() : new Promise((done) => {
+            l.addEventListener('load', () => done(), { once: true });
+            l.addEventListener('error', () => done(), { once: true });
+        }));
+        // No face for the font yet: `load` resolves empty, which would pass a fallback off as ready. A
+        // stylesheet may still be on its way; failing that, a lab font is fetched from its own stylesheet.
+        if ((await load()).length === 0) {
+            await Promise.all(Array.from(document.querySelectorAll('link[rel="stylesheet"]')).map(sheetLoaded));
+            if ((await load()).length === 0 && loadFonts && findTypeSurfaceFont(config.typography.fontFamily.split(',')[0])) {
+                const href = typeSurfaceFontsUrl();
+                let link = Array.from(document.querySelectorAll('link[rel="stylesheet"]')).find((l) => l.href === href);
+                if (!link) {
+                    link = document.createElement('link');
+                    link.rel = 'stylesheet';
+                    link.href = href;
+                    document.head.appendChild(link);
+                }
+                await sheetLoaded(link);
+                await load();
+            }
+        }
+        await Promise.all(ART_FONTS.map((f) => fonts.load(f).catch(() => undefined)));
+        await fonts.ready;
+    }
+    /** Draw `config` (already at its timeline moment) at `timeMs`. */
+    render(config, timeMs, debug = {}) {
+        if (!this.ok)
+            return null;
+        const gl = this.gl;
+        const cv = this.canvas;
+        const dpr = Math.min(2, window.devicePixelRatio || 1);
+        const W = Math.max(2, Math.round(cv.clientWidth * dpr)), H = Math.max(2, Math.round(cv.clientHeight * dpr));
+        if (cv.width !== W || cv.height !== H) {
+            cv.width = W;
+            cv.height = H;
+        }
+        const def = surfaceFor(config);
+        // Buffers are keyed by surface; every constructed object shares one set, re-uploaded when it changes.
+        const bk = def.solid ? 'object' : def.id;
+        const layout = this.layoutFor(config);
+        const g = this.engine(def).evaluate(config, timeMs, layout, { guides: !!(debug.folds || debug.bounds || debug.baseline || debug.controls) });
+        this.lastGeometry = g;
+        const gv = this.geometryVersion;
+        const sheetOn = def.sheet !== 'hidden';
+        const art = this.artFor(def, config.surface.seed, def.prop || def.solid ? def.color : config.surface.color ?? def.color);
+        const textTex = layout && g.text ? this.textTexture(config, layout) : null;
+        const cam = cameraFor(config, def, g, W / H);
+        const view = lookAt(cam.eye, cam.target, cam.up);
+        const proj = perspective(cam.fov, W / H, cam.near, cam.far);
+        mul(proj, view, this.viewProj);
+        const L = norm([-0.55, 0.62, 0.56]);
+        const lr = g.radius * 1.9;
+        const lightEye = [g.target[0] + L[0] * 6, g.target[1] + L[1] * 6, g.target[2] + L[2] * 6];
+        const lightVP = mul(ortho(lr, 0.1, 14), lookAt(lightEye, g.target, [0, 1, 0]));
+        const backdrop = hexRgb(def.backdrop[1]);
+        const tableQuad = new Float32Array([-9, 9, g.tableZ, 9, 9, g.tableZ, -9, -9, g.tableZ, 9, -9, g.tableZ]);
+        const up4 = new Float32Array([0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1]);
+        const tuv4 = new Float32Array(8);
+        const zeros = new Float32Array(16);
+        const quadIdx = new Uint32Array([0, 2, 1, 1, 2, 3]);
+        // Glyph remap data (letters spread mid-morph).
+        const gap = layout ? morphGap(config.deformation.morph, layout) : 0;
+        const glyphs = new Float32Array(96 * 4), lines = new Float32Array(8 * 4);
+        let glyphTotal = 0;
+        if (layout) {
+            layout.lines.slice(0, 8).forEach((l, li) => {
+                lines[li * 4] = li === 0 ? -1e6 : l.top;
+                lines[li * 4 + 2] = glyphTotal;
+                let c = 0;
+                l.glyphs.forEach((gl2, i) => { if (glyphTotal < 96) {
+                    glyphs.set([gl2.x0, gl2.x1, glyphShift(l, i, gap), 0], glyphTotal * 4);
+                    glyphTotal++;
+                    c++;
+                } });
+                lines[li * 4 + 3] = c;
+            });
+        }
+        const gapOn = layout && glyphTotal < 96 ? gap : 0;
+        const setTextAlpha = (pr) => {
+            gl.uniform2f(this.loc(pr, 'uBlock'), layout.width, layout.height);
+            gl.uniform1f(this.loc(pr, 'uGap'), gapOn);
+            gl.uniform4fv(this.loc(pr, 'uGlyphs'), glyphs);
+            gl.uniform4fv(this.loc(pr, 'uLines'), lines);
+            gl.uniform1i(this.loc(pr, 'uLineCount'), Math.min(8, layout.lines.length));
+            gl.activeTexture(gl.TEXTURE3);
+            gl.bindTexture(gl.TEXTURE_2D, textTex);
+            gl.uniform1i(this.loc(pr, 'uText'), 3);
+        };
+        // Upload geometry.
+        const bindSheet = (positionsKey, positions) => {
+            this.attr(0, positionsKey, positions, 3);
+            this.attrKeep(1, 'sheet.n', 3);
+            this.attrKeep(2, `sheet.uv:${bk}`, 2);
+            this.attrKeep(3, 'sheet.a', 4);
+            gl.disableVertexAttribArray(4);
+            this.elements(`sheet.i:${bk}`, g.indices, g.indices.length, gv);
+        };
+        this.buffer('sheet.n', g.sheet.normals, gl.ARRAY_BUFFER);
+        this.buffer('sheet.a', g.sheet.attrs, gl.ARRAY_BUFFER);
+        if (this.uvVersions.get(bk) !== gv) {
+            this.buffer(`sheet.uv:${bk}`, g.uvs, gl.ARRAY_BUFFER);
+            this.uvVersions.set(bk, gv);
+        }
+        const bindProp = () => {
+            const pr = g.prop;
+            this.attr(0, 'prop.p', pr.positions, 3);
+            this.attr(1, 'prop.n', pr.normals, 3);
+            this.propUv = this.propUv?.length === pr.vertexCount * 2 ? this.propUv : new Float32Array(pr.vertexCount * 2);
+            this.attr(2, 'prop.uv', this.propUv, 2);
+            this.attr(3, 'prop.a', pr.attrs, 4);
+            gl.disableVertexAttribArray(4);
+            this.elements(`prop.i:${bk}`, pr.indices, pr.indices.length, gv);
+        };
+        const drawSheetGeom = () => gl.drawElements(gl.TRIANGLES, g.indices.length, gl.UNSIGNED_INT, 0);
+        const bindText = () => {
+            const t = g.text;
+            this.attr(0, 'text.p', t.positions, 3, t.vertexCount);
+            this.attr(1, 'text.n', t.normals, 3, t.vertexCount);
+            this.attr(2, 'text.uv', t.uvs, 2, t.vertexCount);
+            this.attr(3, 'text.a', t.attrs, 4, t.vertexCount);
+            this.attr(4, 'text.tuv', t.tuv, 2, t.vertexCount);
+            this.elements('text.i', t.indices, t.indexCount, `${def.id}:${gv}:${t.indexVersion}:${t.indexCount}`);
+        };
+        const bindQuad = (key, pos, uvs) => {
+            this.attr(0, `${key}.p`, pos, 3);
+            this.attr(1, 'quad.n', up4, 3);
+            this.attr(2, `${key}.uv`, uvs, 2);
+            this.attr(3, 'quad.a', zeros, 4);
+            this.attr(4, 'quad.tuv', tuv4, 2);
+            this.elements('quad.i', quadIdx, 6, 1);
+        };
+        // ---- shadow pass ----
+        gl.bindFramebuffer(gl.FRAMEBUFFER, this.shadowFbo);
+        gl.viewport(0, 0, this.shadowSize, this.shadowSize);
+        gl.clear(gl.DEPTH_BUFFER_BIT);
+        gl.enable(gl.DEPTH_TEST);
+        gl.disable(gl.CULL_FACE);
+        gl.enable(gl.POLYGON_OFFSET_FILL);
+        gl.polygonOffset(2, 4);
+        const dp = this.progDepth;
+        gl.useProgram(dp.p);
+        gl.uniformMatrix4fv(this.loc(dp, 'uVP'), false, lightVP);
+        gl.uniform1i(this.loc(dp, 'uIsText'), 0);
+        if (!debug.noShadows && sheetOn) {
+            bindSheet('sheet.p', g.sheet.positions);
+            drawSheetGeom();
+        }
+        if (!debug.noShadows)
+            g.stack.forEach((s, i) => { bindSheet(`stack${i}.p`, s); drawSheetGeom(); });
+        if (g.prop && !debug.noShadows) {
+            bindProp();
+            gl.drawElements(gl.TRIANGLES, g.prop.indices.length, gl.UNSIGNED_INT, 0);
+        }
+        if (layout && g.text && textTex && config.material.shadow > 0.02 && !debug.noShadows) {
+            gl.uniform1i(this.loc(dp, 'uIsText'), 1);
+            gl.uniform1f(this.loc(dp, 'uCast'), 0.4 + config.material.shadow);
+            setTextAlpha(dp);
+            bindText();
+            gl.drawElements(gl.TRIANGLES, g.text.indexCount, gl.UNSIGNED_INT, 0);
+        }
+        gl.disable(gl.POLYGON_OFFSET_FILL);
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+        // ---- main pass ----
+        gl.viewport(0, 0, W, H);
+        gl.clearColor(backdrop[0], backdrop[1], backdrop[2], 1);
+        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+        const sp = this.progSurf;
+        gl.useProgram(sp.p);
+        const common = (pr) => {
+            gl.uniformMatrix4fv(this.loc(pr, 'uVP'), false, this.viewProj);
+            gl.uniformMatrix4fv(this.loc(pr, 'uLightVP'), false, lightVP);
+            gl.uniform3fv(this.loc(pr, 'uLightDir'), L);
+            gl.uniform3fv(this.loc(pr, 'uEye'), cam.eye);
+            gl.uniform3f(this.loc(pr, 'uKey'), 1.28, 1.23, 1.13);
+            gl.uniform1f(this.loc(pr, 'uAmb'), 0.55);
+            gl.uniform3fv(this.loc(pr, 'uBackdrop'), backdrop);
+            gl.uniform3fv(this.loc(pr, 'uTarget'), g.target);
+            gl.uniform1f(this.loc(pr, 'uRadius'), g.radius);
+            gl.uniform1f(this.loc(pr, 'uAspect'), art.aspect);
+            gl.activeTexture(gl.TEXTURE0);
+            gl.bindTexture(gl.TEXTURE_2D, this.shadowTex);
+            gl.uniform1i(this.loc(pr, 'uShadow'), 0);
+            gl.activeTexture(gl.TEXTURE4);
+            gl.bindTexture(gl.TEXTURE_2D, this.grain);
+            gl.uniform1i(this.loc(pr, 'uGrain'), 4);
+        };
+        common(sp);
+        const tex = (front, back) => {
+            gl.activeTexture(gl.TEXTURE1);
+            gl.bindTexture(gl.TEXTURE_2D, front);
+            gl.uniform1i(this.loc(sp, 'uFront'), 1);
+            gl.activeTexture(gl.TEXTURE2);
+            gl.bindTexture(gl.TEXTURE_2D, back);
+            gl.uniform1i(this.loc(sp, 'uBackTex'), 2);
+        };
+        const look = SHADING[def.shading];
+        gl.uniform1f(this.loc(sp, 'uSpec'), look.spec);
+        gl.uniform1f(this.loc(sp, 'uRough'), look.rough);
+        gl.uniform1f(this.loc(sp, 'uTranslucent'), look.translucent);
+        gl.uniform1i(this.loc(sp, 'uShading'), look.model);
+        gl.uniform3fv(this.loc(sp, 'uPropColor'), hexRgb(config.surface.color ?? def.color));
+        gl.uniform3fv(this.loc(sp, 'uCapColor'), hexRgb('#E0431B'));
+        gl.uniform1i(this.loc(sp, 'uDebug'), 0);
+        // Table.
+        gl.uniform1i(this.loc(sp, 'uMode'), 1);
+        gl.uniform1i(this.loc(sp, 'uTable'), TABLES[def.table]);
+        tex(art.inner, art.inner);
+        bindQuad('table', tableQuad, new Float32Array([0, 0, 1, 0, 0, 1, 1, 1]));
+        gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_INT, 0);
+        gl.uniform1i(this.loc(sp, 'uMode'), 0);
+        if (g.loose) {
+            tex(art.inner, art.back);
+            bindQuad('loose', g.loose.positions, g.loose.uvs);
+            gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_INT, 0);
+        }
+        tex(art.inner, art.back);
+        g.stack.forEach((s, i) => { bindSheet(`stack${i}.p`, s); drawSheetGeom(); });
+        gl.uniform1i(this.loc(sp, 'uDebug'), debug.deformation ? 1 : debug.mapping ? 2 : 0);
+        tex(art.front, art.back);
+        if (sheetOn) {
+            bindSheet('sheet.p', g.sheet.positions);
+            drawSheetGeom();
+        }
+        if (g.prop) {
+            gl.uniform1i(this.loc(sp, 'uMode'), 2);
+            gl.uniform1i(this.loc(sp, 'uDebug'), 0);
+            bindProp();
+            // One draw per part: each has its own material.
+            for (const r of g.prop.ranges) {
+                const mt = r.material;
+                gl.uniform1i(this.loc(sp, 'uPartOn'), mt ? 1 : 0);
+                if (mt) {
+                    gl.uniform3fv(this.loc(sp, 'uPropColor'), hexRgb(mt.color));
+                    gl.uniform4f(this.loc(sp, 'uPart'), mt.metalness, mt.roughness, mt.reflection, mt.gain);
+                }
+                gl.drawElements(gl.TRIANGLES, r.count, gl.UNSIGNED_INT, r.start * 4);
+            }
+            gl.uniform1i(this.loc(sp, 'uPartOn'), 0);
+            gl.uniform1i(this.loc(sp, 'uMode'), 0);
+        }
+        // ---- letters ----
+        if (layout && g.text && textTex && g.text.indexCount > 0) {
+            const tp = this.progText;
+            gl.useProgram(tp.p);
+            common(tp);
+            setTextAlpha(tp);
+            gl.activeTexture(gl.TEXTURE1);
+            gl.bindTexture(gl.TEXTURE_2D, art.front);
+            gl.uniform1i(this.loc(tp, 'uPaper'), 1);
+            const ty = config.typography, m = config.material;
+            gl.uniform3fv(this.loc(tp, 'uColor'), hexRgb(ty.color));
+            gl.uniform3fv(this.loc(tp, 'uColor2'), hexRgb(ty.gradient.to));
+            if (ty.gradient.enabled)
+                gl.uniform3fv(this.loc(tp, 'uColor'), hexRgb(ty.gradient.from));
+            gl.uniform1f(this.loc(tp, 'uGradOn'), ty.gradient.enabled ? 1 : 0);
+            gl.uniform1f(this.loc(tp, 'uGradAngle'), ty.gradient.angle);
+            gl.uniform1f(this.loc(tp, 'uOpacity'), ty.opacity);
+            gl.uniform1i(this.loc(tp, 'uBlendMode'), Math.max(0, TS_BLEND_MODES.indexOf(ty.blendMode)));
+            gl.uniform1i(this.loc(tp, 'uMat'), 0);
+            gl.uniform1f(this.loc(tp, 'uBlendAmt'), m.blend);
+            gl.uniform1f(this.loc(tp, 'uInkStrength'), m.inkStrength);
+            gl.uniform1f(this.loc(tp, 'uSpread'), m.inkSpread);
+            gl.uniform1f(this.loc(tp, 'uRough'), m.inkRoughness);
+            gl.uniform1f(this.loc(tp, 'uPaperInf'), m.paperInfluence);
+            gl.uniform1f(this.loc(tp, 'uGrainInf'), m.grainInfluence);
+            gl.uniform1f(this.loc(tp, 'uHalftone'), m.halftone);
+            gl.uniform1f(this.loc(tp, 'uDisp'), m.displacement);
+            gl.uniform1f(this.loc(tp, 'uContrast'), m.surfaceContrast);
+            gl.uniform1f(this.loc(tp, 'uGloss'), m.gloss);
+            gl.uniform1f(this.loc(tp, 'uEmboss'), m.type === 'emboss' ? m.emboss : m.emboss * 0.25);
+            gl.uniform1f(this.loc(tp, 'uLod'), 0);
+            bindText();
+            gl.enable(gl.BLEND);
+            gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
+            gl.enable(gl.POLYGON_OFFSET_FILL);
+            gl.polygonOffset(-1, -2);
+            gl.depthMask(false);
+            gl.drawElements(gl.TRIANGLES, g.text.indexCount, gl.UNSIGNED_INT, 0);
+            gl.depthMask(true);
+            gl.disable(gl.POLYGON_OFFSET_FILL);
+            gl.disable(gl.BLEND);
+        }
+        return g;
+    }
+    /** The nearest sheet vertex to a canvas point (CSS px): its uv, or null off the surface. */
+    pick(x, y) {
+        const g = this.lastGeometry;
+        if (!g)
+            return null;
+        let best = Infinity, bi = -1;
+        const pos = g.sheet.positions;
+        const step = 2;
+        for (let k = 0; k < g.nu * g.nv; k += step) {
+            const [px, py, w] = this.project(pos, k * 3);
+            if (w <= 0)
+                continue;
+            const d = (px - x) ** 2 + (py - y) ** 2;
+            if (d < best) {
+                best = d;
+                bi = k;
+            }
+        }
+        if (bi < 0 || best > 40 * 40)
+            return null;
+        return { u: g.uvs[bi * 2], v: g.uvs[bi * 2 + 1] };
+    }
+}
+/** Draw the debug overlay (mesh, folds, bounds, baselines, normals, control points) on a 2D canvas. */
+export function drawDebugOverlay(ctx, r, debug) {
+    const g = r.geometry;
+    const c = ctx.canvas;
+    const dpr = Math.min(2, window.devicePixelRatio || 1);
+    const w = Math.round(c.clientWidth * dpr), h = Math.round(c.clientHeight * dpr);
+    if (c.width !== w || c.height !== h) {
+        c.width = w;
+        c.height = h;
+    }
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    ctx.clearRect(0, 0, c.clientWidth, c.clientHeight);
+    if (!g)
+        return;
+    const poly = (pts, color, width = 1, dash = []) => {
+        ctx.strokeStyle = color;
+        ctx.lineWidth = width;
+        ctx.setLineDash(dash);
+        ctx.beginPath();
+        for (let k = 0; k < pts.length / 3; k++) {
+            const [x, y] = r.project(pts, k * 3);
+            if (k)
+                ctx.lineTo(x, y);
+            else
+                ctx.moveTo(x, y);
+        }
+        ctx.stroke();
+        ctx.setLineDash([]);
+    };
+    if (debug.mesh) {
+        const pos = g.sheet.positions;
+        ctx.strokeStyle = 'rgba(80,200,255,0.45)';
+        ctx.lineWidth = 0.6;
+        const step = 6;
+        for (let j = 0; j < g.nv; j += step) {
+            ctx.beginPath();
+            for (let i = 0; i < g.nu; i++) {
+                const [x, y] = r.project(pos, (j * g.nu + i) * 3);
+                if (i)
+                    ctx.lineTo(x, y);
+                else
+                    ctx.moveTo(x, y);
+            }
+            ctx.stroke();
+        }
+        for (let i = 0; i < g.nu; i += step) {
+            ctx.beginPath();
+            for (let j = 0; j < g.nv; j++) {
+                const [x, y] = r.project(pos, (j * g.nu + i) * 3);
+                if (j)
+                    ctx.lineTo(x, y);
+                else
+                    ctx.moveTo(x, y);
+            }
+            ctx.stroke();
+        }
+    }
+    if (debug.normals) {
+        const pos = g.sheet.positions, n = g.sheet.normals;
+        ctx.strokeStyle = 'rgba(120,255,140,0.8)';
+        ctx.lineWidth = 1;
+        const len = g.def.width * 0.035;
+        for (let j = 0; j < g.nv; j += 12)
+            for (let i = 0; i < g.nu; i += 12) {
+                const k = (j * g.nu + i) * 3;
+                const [x0, y0] = r.project(pos, k);
+                const [x1, y1] = r.project([pos[k] + n[k] * len, pos[k + 1] + n[k + 1] * len, pos[k + 2] + n[k + 2] * len]);
+                ctx.beginPath();
+                ctx.moveTo(x0, y0);
+                ctx.lineTo(x1, y1);
+                ctx.stroke();
+            }
+    }
+    const gd = g.guides;
+    if (gd) {
+        if (debug.folds) {
+            gd.folds.forEach((f) => poly(f, '#ffd23f', 2, [6, 4]));
+            gd.foldZones.forEach((f) => poly(f, 'rgba(255,210,63,0.5)', 1, [2, 3]));
+            if (gd.roll)
+                poly(gd.roll, '#ff8c3f', 2, [6, 4]);
+        }
+        if (debug.bounds && gd.textOutline)
+            poly(gd.textOutline, '#ff4fd8', 1.5);
+        if (debug.baseline)
+            gd.baselines.forEach((b) => poly(b, '#4fe3ff', 1.5));
+        if (debug.controls) {
+            for (let k = 0; k < gd.anchors.length / 3; k++) {
+                const [x, y] = r.project(gd.anchors, k * 3);
+                ctx.fillStyle = '#fff';
+                ctx.strokeStyle = '#111';
+                ctx.lineWidth = 1.5;
+                ctx.beginPath();
+                ctx.arc(x, y, 5, 0, Math.PI * 2);
+                ctx.fill();
+                ctx.stroke();
+            }
+        }
+    }
+}
+//# sourceMappingURL=renderer.js.map