@3driseai/3drise-viewer 0.1.28 → 0.1.29

package/dist/components/text/engine/methods.d.ts

@@ -0,0 +1,19 @@
+export declare const DRAW_METHODS: string[];
+export declare const ERASE_METHODS: string[];
+export declare const TIP_METHODS: string[];
+export declare function prepare(strokes: any, mode: any): void;
+export declare function extentOf(strokes: any): {
+    x0: number;
+    y0: number;
+    x1: number;
+    y1: number;
+    w: number;
+    h: number;
+};
+export declare function applyDraw(method: any, strokes: any, o: any, ctx: any): any;
+export declare function applyErase(method: any, strokes: any, o: any, ctx: any): any;
+export declare function applyAnim(strokes: any, anim: any, G: any): {
+    infoD: any;
+    infoE: any;
+};
+//# sourceMappingURL=methods.d.ts.map

package/dist/components/text/engine/methods.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"methods.d.ts","sourceRoot":"","sources":["../../../../src/components/text/engine/methods.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,YAAY,UAAwF,CAAC;AAClH,eAAO,MAAM,aAAa,UAAyG,CAAC;AACpI,eAAO,MAAM,WAAW,UAA+B,CAAC;AASxD,wBAAgB,OAAO,CAAC,OAAO,KAAA,EAAE,IAAI,KAAA,QAMpC;AACD,wBAAgB,QAAQ,CAAC,OAAO,KAAA;;;;;;;EAI/B;AA2CD,wBAAgB,SAAS,CAAC,MAAM,KAAA,EAAE,OAAO,KAAA,EAAE,CAAC,KAAA,EAAE,GAAG,KAAA,OAIhD;AACD,wBAAgB,UAAU,CAAC,MAAM,KAAA,EAAE,OAAO,KAAA,EAAE,CAAC,KAAA,EAAE,GAAG,KAAA,OASjD;AAED,wBAAgB,SAAS,CAAC,OAAO,KAAA,EAAE,IAAI,KAAA,EAAE,CAAC,KAAA;;;EAKzC"}

package/dist/components/text/engine/methods.js

@@ -0,0 +1,126 @@
+import { penTiming } from './glyphs.js';
+// Draw / erase methods. A method only fills the schedule fields of each stroke:
+//   draw : s.seg  (window in global progress) + s.t  (per-point time inside the window)
+//   erase: s.segO + s.tO
+// Methods are shared by every look. A few are look-native (epicycle). 'none' = no animation, 'cut' = instant erase.
+export const DRAW_METHODS = ['pen', 'trace', 'bothEnds', 'wipe', 'radial', 'scatter', 'dissolve', 'fade', 'none'];
+export const ERASE_METHODS = ['fade', 'undraw', 'wipe', 'radial', 'scatter', 'dissolve', 'trace', 'bothEnds', 'pen', 'cut', 'none'];
+export const TIP_METHODS = ['pen', 'trace', 'epicycle']; // methods that have a visible pen / front
+const hash = (a, b = 0) => { const x = Math.sin(a * 127.1 + b * 311.7) * 43758.5453; return x - Math.floor(x); };
+const arcT = (s) => { const n = s.pts.length / 2, a = new Float32Array(n); for (let i = 0; i < n; i++)
+    a[i] = s.cum[i] / Math.max(1e-9, s.len); return a; };
+const pathT = (s) => (s.pt ? Float32Array.from(s.pt) : arcT(s));
+const fill = (n, v) => new Float32Array(n).fill(v);
+const nOf = (s) => s.pts.length / 2;
+// mode: 'hand' (pen timing from the 2/3 power law), 'outline' (time ~ length), 'keep' (stroke already has t)
+export function prepare(strokes, mode) {
+    for (const s of strokes) {
+        if (mode === 'hand') {
+            penTiming(s);
+            s.pt = s.t;
+            s.ptime = s.time;
+            s.t = null;
+        }
+        else if (mode === 'keep') {
+            s.pt = s.t;
+            s.ptime = s.ptime || Math.max(s.len, 1e-3);
+            s.t = null;
+        }
+        else {
+            s.pt = null;
+            s.ptime = Math.max(s.len, 1e-3);
+            s.t = null;
+        }
+    }
+}
+export function extentOf(strokes) {
+    let x0 = 1e9, y0 = 1e9, x1 = -1e9, y1 = -1e9;
+    for (const s of strokes)
+        for (let i = 0; i < s.pts.length; i += 2) {
+            x0 = Math.min(x0, s.pts[i]);
+            x1 = Math.max(x1, s.pts[i]);
+            y0 = Math.min(y0, s.pts[i + 1]);
+            y1 = Math.max(y1, s.pts[i + 1]);
+        }
+    return { x0, y0, x1, y1, w: Math.max(1e-6, x1 - x0), h: Math.max(1e-6, y1 - y0) };
+}
+// returns { sched: [{seg, t}], info: {soft, fade, tip} }
+const GEN = {
+    pen(strokes) {
+        const avg = strokes.reduce((a, s) => a + s.ptime, 0) / Math.max(1, strokes.length), gap = 0.2 * avg;
+        const sum = strokes.reduce((a, s) => a + s.ptime + gap, 0);
+        let c = 0;
+        return { sched: strokes.map((s) => { const r = { seg: [c / sum, (c + s.ptime) / sum], t: pathT(s) }; c += s.ptime + gap; return r; }), info: { soft: 0.004 } };
+    },
+    trace(strokes, o, ctx) {
+        const G = ctx.G, st = o.stagger / G, win = 1 - (G - 1) * st;
+        return { sched: strokes.map((s) => ({ seg: [s.glyph * st, s.glyph * st + win], t: pathT(s) })), info: { soft: 0.004 } };
+    },
+    epicycle(strokes, o, ctx) {
+        const G = ctx.G;
+        return { sched: strokes.map((s) => ({ seg: [s.glyph / G, (s.glyph + 1) / G], t: pathT(s) })), info: { soft: 0.004 } };
+    },
+    bothEnds(strokes, o, ctx) {
+        const G = ctx.G, st = o.stagger / G, win = 1 - (G - 1) * st;
+        return { sched: strokes.map((s) => { const u = arcT(s); const t = u.map((x) => 2 * Math.min(x, 1 - x)); return { seg: [s.glyph * st, s.glyph * st + win], t }; }), info: { soft: 0.02 } };
+    },
+    wipe(strokes, o, ctx) {
+        const a = ((o.angle || 0) * Math.PI) / 180, dx = Math.cos(a), dy = Math.sin(a);
+        const e = ctx.ext;
+        const proj = (x, y) => (x - e.x0) * dx + (y - e.y0) * dy;
+        const corners = [proj(e.x0, e.y0), proj(e.x1, e.y0), proj(e.x0, e.y1), proj(e.x1, e.y1)];
+        const lo = Math.min(...corners), hi = Math.max(...corners), span = Math.max(1e-6, hi - lo);
+        return { sched: strokes.map((s) => { const n = nOf(s), t = new Float32Array(n); for (let i = 0; i < n; i++)
+                t[i] = (proj(s.pts[2 * i], s.pts[2 * i + 1]) - lo) / span; return { seg: [0, 1], t }; }), info: { soft: 0.14 } };
+    },
+    radial(strokes, o, ctx) {
+        const e = ctx.ext, cx = (e.x0 + e.x1) / 2, cy = (e.y0 + e.y1) / 2;
+        let rm = 1e-6;
+        const R = (x, y) => Math.hypot(x - cx, (y - cy) * 2.0);
+        for (const s of strokes)
+            for (let i = 0; i < s.pts.length; i += 2)
+                rm = Math.max(rm, R(s.pts[i], s.pts[i + 1]));
+        return { sched: strokes.map((s) => { const n = nOf(s), t = new Float32Array(n); for (let i = 0; i < n; i++)
+                t[i] = R(s.pts[2 * i], s.pts[2 * i + 1]) / rm; return { seg: [0, 1], t }; }), info: { soft: 0.14 } };
+    },
+    scatter(strokes, o, ctx) {
+        return { sched: strokes.map((s) => { const h = hash(s.glyph, ctx.seed); return { seg: [h * 0.6, h * 0.6 + 0.4], t: pathT(s) }; }), info: { soft: 0.004 } };
+    },
+    dissolve(strokes, o, ctx) {
+        return { sched: strokes.map((s, si) => { const n = nOf(s), t = new Float32Array(n); for (let i = 0; i < n; i++)
+                t[i] = hash(Math.floor(s.cum[i] / 0.07), s.glyph * 7 + si + ctx.seed); return { seg: [0, 1], t }; }), info: { soft: 0.2 } };
+    },
+    fade(strokes) { return { sched: strokes.map((s) => ({ seg: [0, 1], t: fill(nOf(s), 0) })), info: { soft: 0.004, fade: true } }; },
+};
+GEN.none = GEN.fade;
+GEN.cut = GEN.fade;
+export function applyDraw(method, strokes, o, ctx) {
+    const g = (GEN[method] || GEN.fade)(strokes, o, { ...ctx, seed: 0 });
+    strokes.forEach((s, i) => { s.seg = g.sched[i].seg; s.t = g.sched[i].t; });
+    ctx.drawSched = g.sched;
+    return { soft: 0.004, tip: TIP_METHODS.includes(method), fade: false, ...g.info };
+}
+export function applyErase(method, strokes, o, ctx) {
+    let sched, info = { soft: 0.004 };
+    if (method === 'undraw') { // mirror of the draw: last drawn goes first, each stroke from its end
+        sched = ctx.drawSched.map((d) => ({ seg: [1 - d.seg[1], 1 - d.seg[0]], t: d.t.map((x) => 1 - x) }));
+        info = { soft: ctx.drawInfo ? ctx.drawInfo.soft : 0.004, fade: !!(ctx.drawInfo && ctx.drawInfo.fade) };
+        if (info.fade)
+            info.soft = 0.004;
+    }
+    else {
+        const g = (GEN[method] || GEN.fade)(strokes, o, { ...ctx, seed: 5 });
+        sched = g.sched;
+        info = { soft: 0.004, ...g.info };
+    }
+    strokes.forEach((s, i) => { s.segO = sched[i].seg; s.tO = sched[i].t; });
+    return { soft: 0.004, fade: false, ...info };
+}
+// convenience: set up both schedules, returns {infoD, infoE}
+export function applyAnim(strokes, anim, G) {
+    const ctx = { G: Math.max(1, G), ext: extentOf(strokes) };
+    const infoD = applyDraw(anim.draw.method, strokes, anim.draw, ctx);
+    ctx.drawInfo = infoD;
+    const infoE = applyErase(anim.erase.method, strokes, anim.erase, ctx);
+    return { infoD, infoE };
+}

package/dist/components/text/engine/playback.d.ts

@@ -0,0 +1,40 @@
+export declare const EASES: {
+    linear: (t: any) => any;
+    easeInOut: (t: any) => number;
+    easeOut: (t: any) => number;
+    easeIn: (t: any) => number;
+};
+export declare const hasAnim: (m: any) => boolean;
+export declare function cycleLength(cfg: any): number;
+export declare function cycleAt(tau: any, cfg: any): {
+    d: number;
+    e: number;
+    since: number;
+};
+export declare function createPlayback(): {
+    S: {
+        d: number;
+        e: number;
+        since: number;
+        mode: string;
+        s: number;
+        clock: number;
+        paused: boolean;
+    };
+    hide(): void;
+    reset(cfg: any): void;
+    restart(cfg: any): void;
+    playDraw(cfg: any): void;
+    playErase(cfg: any): void;
+    seek(cfg: any, u: any): void;
+    step(dt: any, cfg: any): {
+        d: number;
+        e: number;
+        since: number;
+        mode: string;
+        s: number;
+        clock: number;
+        paused: boolean;
+    };
+};
+//# sourceMappingURL=playback.d.ts.map

package/dist/components/text/engine/playback.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"playback.d.ts","sourceRoot":"","sources":["../../../../src/components/text/engine/playback.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,KAAK;;;;;CAKjB,CAAC;AAEF,eAAO,MAAM,OAAO,GAAI,MAAC,YAAsB,CAAC;AAGhD,wBAAgB,WAAW,CAAC,GAAG,KAAA,UAE9B;AAED,wBAAgB,OAAO,CAAC,GAAG,KAAA,EAAE,GAAG,KAAA;;;;EAa/B;AAED,wBAAgB,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;EA6B7B"}

package/dist/components/text/engine/playback.js

@@ -0,0 +1,114 @@
+// Playback controller. The text is a normal running object (constant state: drawn, idle effects on real time).
+// Draw and erase are optional animations layered on top. Output each frame: d (draw 0..1), e (erase 0..1),
+// since (seconds since the draw finished, drives drying / settling).
+//
+// Cycle (loop): hidden gap -> draw -> hold -> erase -> hidden gap -> repeat.
+// Yoyo: the whole cycle plays forward, then backward (erase reversed = re-appears, draw reversed = un-draws).
+export const EASES = {
+    linear: (t) => t,
+    easeInOut: (t) => (t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2),
+    easeOut: (t) => 1 - Math.pow(1 - t, 3),
+    easeIn: (t) => t * t * t,
+};
+const clamp01 = (x) => Math.max(0, Math.min(1, x));
+export const hasAnim = (m) => m && m !== 'none';
+const durOf = (c, isErase) => (!hasAnim(c.method) || (isErase && c.method === 'cut') ? 0 : Math.max(0, c.duration));
+export function cycleLength(cfg) {
+    const g = cfg.play.hiddenTime;
+    return Math.max(0.01, g + durOf(cfg.draw, false) + cfg.play.holdTime + durOf(cfg.erase, true) + g);
+}
+// cycle clock tau -> state
+export function cycleAt(tau, cfg) {
+    const g = cfg.play.hiddenTime, Dd = durOf(cfg.draw, false), H = cfg.play.holdTime, De = durOf(cfg.erase, true);
+    const ed = EASES[cfg.draw.ease] || EASES.easeInOut, ee = EASES[cfg.erase.ease] || EASES.easeInOut;
+    const hasErase = hasAnim(cfg.erase.method);
+    let d = 0, e = 0;
+    if (tau < g) {
+        d = 0;
+        e = 0;
+    }
+    else if (tau < g + Dd) {
+        d = ed((tau - g) / Dd);
+    }
+    else if (tau < g + Dd + H) {
+        d = 1;
+    }
+    else if (tau < g + Dd + H + De) {
+        d = 1;
+        e = ee((tau - g - Dd - H) / De);
+    }
+    else {
+        d = 1;
+        e = hasErase ? 1 : 0;
+        if (!hasErase)
+            d = 0;
+    } // no erase: cut back to hidden
+    if (Dd === 0 && tau >= g)
+        d = 1;
+    const since = Math.max(0, tau - g - Dd);
+    return { d, e, since };
+}
+export function createPlayback() {
+    const S = { d: 1, e: 0, since: 99, mode: 'idle', s: 0, clock: 0, paused: false };
+    const api = {
+        S,
+        hide() { S.mode = 'hidden'; S.d = 1; S.e = 1; S.paused = false; },
+        reset(cfg) { S.paused = false; S.clock = 0; S.s = 0; S.d = 1; S.e = 0; S.since = 99; S.mode = 'idle'; if (cfg.play.autoPlay)
+            api.restart(cfg); },
+        restart(cfg) { S.paused = false; S.clock = 0; if (cfg.play.loop) {
+            S.mode = 'cycle';
+        }
+        else
+            api.playDraw(cfg); },
+        playDraw(cfg) { S.paused = false; S.s = 0; S.d = 0; S.e = 0; S.since = 0; S.mode = hasAnim(cfg.draw.method) ? 'drawing' : 'idle'; if (S.mode === 'idle') {
+            S.d = 1;
+        } },
+        playErase(cfg) { S.paused = false; S.s = 0; S.d = 1; S.e = 0; S.mode = 'erasing'; if (durOf(cfg.erase, true) === 0) {
+            S.e = 1;
+            S.mode = 'hidden';
+        } },
+        seek(cfg, u) { S.mode = 'cycle'; S.paused = true; S.clock = u; api.step(0, cfg); },
+        step(dt, cfg) {
+            if (S.mode === 'cycle') {
+                const T = cycleLength(cfg);
+                if (!S.paused)
+                    S.clock += dt;
+                let tau;
+                if (cfg.play.yoyo) {
+                    const u = S.clock % (2 * T);
+                    tau = u < T ? u : 2 * T - u;
+                }
+                else
+                    tau = S.clock % T;
+                const r = cycleAt(tau, cfg);
+                S.d = r.d;
+                S.e = r.e;
+                S.since = r.since;
+            }
+            else if (S.mode === 'drawing') {
+                const D = durOf(cfg.draw, false);
+                S.s += dt / Math.max(D, 1e-4);
+                S.d = (EASES[cfg.draw.ease] || EASES.easeInOut)(clamp01(S.s));
+                S.since = 0;
+                if (S.s >= 1) {
+                    S.mode = 'idle';
+                    S.d = 1;
+                }
+            }
+            else if (S.mode === 'idle') {
+                S.since = Math.min(99, S.since + dt);
+            }
+            else if (S.mode === 'erasing') {
+                const D = durOf(cfg.erase, true);
+                S.s += dt / Math.max(D, 1e-4);
+                S.e = (EASES[cfg.erase.ease] || EASES.easeInOut)(clamp01(S.s));
+                if (S.s >= 1) {
+                    S.mode = 'hidden';
+                    S.e = 1;
+                }
+            }
+            return S;
+        },
+    };
+    return api;
+}

package/dist/components/text/engine/ribbon.d.ts

@@ -0,0 +1,58 @@
+import * as THREE from 'three';
+export declare const REVEAL_UNIFORMS = "\nuniform float uD; uniform float uE; uniform float uHead; uniform float uErase; uniform float uFadeIn; uniform float uFadeOut;\nuniform float uSoftIn; uniform float uSoftOut; uniform float uSince; uniform float uDur; uniform float uTime;\nuniform float uIdle; uniform float uIdleSpeed; uniform vec2 uExt; uniform float uHalf;\n";
+export declare const frag: (body: any, extraDecl?: string) => string;
+export declare const uniformsBase: () => {
+    uHalf: {
+        value: number;
+    };
+    uD: {
+        value: number;
+    };
+    uE: {
+        value: number;
+    };
+    uHead: {
+        value: number;
+    };
+    uErase: {
+        value: number;
+    };
+    uFadeIn: {
+        value: number;
+    };
+    uFadeOut: {
+        value: number;
+    };
+    uSoftIn: {
+        value: number;
+    };
+    uSoftOut: {
+        value: number;
+    };
+    uSince: {
+        value: number;
+    };
+    uDur: {
+        value: number;
+    };
+    uTime: {
+        value: number;
+    };
+    uIdle: {
+        value: number;
+    };
+    uIdleSpeed: {
+        value: number;
+    };
+    uExt: {
+        value: THREE.Vector2;
+    };
+};
+export declare function setReveal(u: any, S: any, infoD: any, infoE: any, dur: any, time: any): void;
+export declare function buildRibbon(strokes: any): THREE.BufferGeometry<THREE.NormalBufferAttributes, THREE.BufferGeometryEventMap>;
+export declare function ribbonMaterial(fragSrc: any, uniforms: any, widthFn: any, additive: any): THREE.ShaderMaterial;
+export declare function headPoint(s: any, head: any): any[];
+export declare function tips(strokes: any, head: any, max: any): any[];
+export declare function buildCapsules(strokes: any): THREE.InstancedBufferGeometry;
+export declare function capsuleMaterial(fragBody: any, uniforms: any): THREE.ShaderMaterial;
+//# sourceMappingURL=ribbon.d.ts.map

package/dist/components/text/engine/ribbon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ribbon.d.ts","sourceRoot":"","sources":["../../../../src/components/text/engine/ribbon.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,eAAO,MAAM,eAAe,6UAI3B,CAAC;AAWF,eAAO,MAAM,IAAI,GAAI,SAAI,EAAE,kBAAc,WAAwG,CAAC;AAElJ,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAIvB,CAAC;AAEH,wBAAgB,SAAS,CAAC,CAAC,KAAA,EAAE,CAAC,KAAA,EAAE,KAAK,KAAA,EAAE,KAAK,KAAA,EAAE,GAAG,KAAA,EAAE,IAAI,KAAA,QAMtD;AAGD,wBAAgB,WAAW,CAAC,OAAO,KAAA,oFAiClC;AAiBD,wBAAgB,cAAc,CAAC,OAAO,KAAA,EAAE,QAAQ,KAAA,EAAE,OAAO,KAAA,EAAE,QAAQ,KAAA,wBAQlE;AAGD,wBAAgB,SAAS,CAAC,CAAC,KAAA,EAAE,IAAI,KAAA,SAMhC;AACD,wBAAgB,IAAI,CAAC,OAAO,KAAA,EAAE,IAAI,KAAA,EAAE,GAAG,KAAA,SAGtC;AAKD,wBAAgB,aAAa,CAAC,OAAO,KAAA,iCAiBpC;AAkBD,wBAAgB,eAAe,CAAC,QAAQ,KAAA,EAAE,QAAQ,KAAA,wBAMjD"}

package/dist/components/text/engine/ribbon.js

@@ -0,0 +1,250 @@
+import * as THREE from 'three';
+// ---------------------------------------------------------------------------------------------
+// Two independent schedules per stroke:
+//   draw : seg [x, x+span] window in global draw progress, t[i] = when point i appears inside the window
+//   erase: segO window in global erase progress,           tO[i] = when point i disappears inside the window
+// A method (see methods.mjs) is just a way of filling those four fields. The shaders never know which method ran.
+// Stroke fields: pts, cum, len, closed, t, seg, tO, segO, pressure (opt), glyphN (opt)
+// ---------------------------------------------------------------------------------------------
+export const REVEAL_UNIFORMS = /* glsl */ `
+uniform float uD; uniform float uE; uniform float uHead; uniform float uErase; uniform float uFadeIn; uniform float uFadeOut;
+uniform float uSoftIn; uniform float uSoftOut; uniform float uSince; uniform float uDur; uniform float uTime;
+uniform float uIdle; uniform float uIdleSpeed; uniform vec2 uExt; uniform float uHalf;
+`;
+const VARYINGS = /* glsl */ `
+varying float vSide; varying vec2 vUU; varying vec4 vTT; varying vec2 vLL; varying vec2 vSI; varying float vVar; varying float vGlyph; varying float vSeed; varying vec2 vPos;
+`;
+const REVEAL_FUNCS = /* glsl */ `
+float h21(vec2 p){ return fract(sin(dot(p, vec2(12.9898, 78.233)))*43758.5453); }
+float revealIn(float f){ float tI = mix(vTT.x, vTT.y, f); return uFadeIn > 0.5 ? uD : smoothstep(0.0, max(uSoftIn,1e-4), vLL.x - tI); }
+float revealOut(float f){ float tO = mix(vTT.z, vTT.w, f); return uFadeOut > 0.5 ? 1.0 - uE : smoothstep(0.0, max(uSoftOut,1e-4), tO - vLL.y); }
+float ageAt(float f){ float tI = mix(vTT.x, vTT.y, f); return max(0.0, uHead - (vSI.x + tI*vSI.y))*uDur + uSince; }   // seconds since the pen / front passed here
+float arcAt(float f){ return mix(vUU.x, vUU.y, f); }
+`;
+export const frag = (body, extraDecl = '') => /* glsl */ `precision highp float;\n${REVEAL_UNIFORMS}${VARYINGS}${extraDecl}${REVEAL_FUNCS}${body}`;
+export const uniformsBase = () => ({
+    uHalf: { value: 0.02 }, uD: { value: 1 }, uE: { value: 0 }, uHead: { value: 0 }, uErase: { value: 0 }, uFadeIn: { value: 0 }, uFadeOut: { value: 0 },
+    uSoftIn: { value: 0.004 }, uSoftOut: { value: 0.004 }, uSince: { value: 99 }, uDur: { value: 5 }, uTime: { value: 0 },
+    uIdle: { value: 1 }, uIdleSpeed: { value: 1 }, uExt: { value: new THREE.Vector2(-3, 6) },
+});
+// per frame: playback state S = {d, e, since}; infoD / infoE = method info {soft, fade}
+export function setReveal(u, S, infoD, infoE, dur, time) {
+    u.uD.value = S.d;
+    u.uE.value = S.e;
+    u.uFadeIn.value = infoD.fade ? 1 : 0;
+    u.uFadeOut.value = infoE.fade ? 1 : 0;
+    u.uSoftIn.value = infoD.soft;
+    u.uSoftOut.value = infoE.soft;
+    u.uHead.value = S.d * (1 + infoD.soft + 0.002);
+    u.uErase.value = -infoE.soft - 0.002 + S.e * (1 + 2 * infoE.soft + 0.004);
+    u.uSince.value = S.since;
+    u.uDur.value = Math.max(0.05, dur);
+    u.uTime.value = time;
+}
+// ---- Ribbon ------------------------------------------------------------------------------
+export function buildRibbon(strokes) {
+    let nv = 0, ni = 0;
+    for (const s of strokes) {
+        const n = s.pts.length / 2;
+        nv += 2 * n;
+        ni += 6 * (n - 1);
+    }
+    const pos = new Float32Array(nv * 3), nor = new Float32Array(nv * 2), side = new Float32Array(nv), arc = new Float32Array(nv), len = new Float32Array(nv), tt = new Float32Array(nv), tto = new Float32Array(nv), seg = new Float32Array(nv * 2), sego = new Float32Array(nv * 2), vr = new Float32Array(nv * 2);
+    const idx = new Uint32Array(ni);
+    let v = 0, q = 0;
+    for (const s of strokes) {
+        const n = s.pts.length / 2;
+        const P = s.pts;
+        const sn = [];
+        for (let i = 0; i < n - 1; i++) {
+            const dx = P[2 * i + 2] - P[2 * i], dy = P[2 * i + 3] - P[2 * i + 1];
+            const l = Math.hypot(dx, dy) || 1;
+            sn.push([-dy / l, dx / l]);
+        }
+        const base = v;
+        for (let i = 0; i < n; i++) {
+            let a = sn[Math.max(0, i - 1)], b = sn[Math.min(n - 2, i)];
+            if (s.closed) {
+                if (i === 0 || i === n - 1) {
+                    a = sn[n - 2];
+                    b = sn[0];
+                }
+            }
+            let mx = a[0] + b[0], my = a[1] + b[1];
+            const ml = Math.hypot(mx, my);
+            if (ml < 1e-6) {
+                mx = b[0];
+                my = b[1];
+            }
+            else {
+                mx /= ml;
+                my /= ml;
+            }
+            const c = Math.max(0.8, mx * b[0] + my * b[1]);
+            mx /= c;
+            my /= c;
+            for (let sd = -1; sd <= 1; sd += 2) {
+                pos[3 * v] = P[2 * i];
+                pos[3 * v + 1] = P[2 * i + 1];
+                pos[3 * v + 2] = 0;
+                nor[2 * v] = mx;
+                nor[2 * v + 1] = my;
+                side[v] = sd;
+                arc[v] = s.cum[i];
+                len[v] = Math.max(1e-6, s.len);
+                tt[v] = s.t[i];
+                tto[v] = s.tO[i];
+                seg[2 * v] = s.seg[0];
+                seg[2 * v + 1] = s.seg[1];
+                sego[2 * v] = s.segO[0];
+                sego[2 * v + 1] = s.segO[1];
+                vr[2 * v] = s.pressure ? s.pressure[i] : 0;
+                vr[2 * v + 1] = s.glyphN || 0;
+                v++;
+            }
+        }
+        for (let i = 0; i < n - 1; i++) {
+            const a = base + 2 * i;
+            idx.set([a, a + 1, a + 2, a + 1, a + 3, a + 2], q);
+            q += 6;
+        }
+    }
+    const g = new THREE.BufferGeometry();
+    const set = (k, a, n) => g.setAttribute(k, new THREE.BufferAttribute(a, n));
+    set('position', pos, 3);
+    set('aNormal', nor, 2);
+    set('aSide', side, 1);
+    set('aArc', arc, 1);
+    set('aLen', len, 1);
+    set('aT', tt, 1);
+    set('aTO', tto, 1);
+    set('aSeg', seg, 2);
+    set('aSegO', sego, 2);
+    set('aVar', vr, 2);
+    g.setIndex(new THREE.BufferAttribute(idx, 1));
+    g.computeBoundingSphere();
+    return g;
+}
+const RIBBON_VERT = /* glsl */ `
+attribute vec2 aNormal; attribute float aSide; attribute float aArc; attribute float aLen; attribute float aT; attribute float aTO;
+attribute vec2 aSeg; attribute vec2 aSegO; attribute vec2 aVar;
+${REVEAL_UNIFORMS}${VARYINGS}
+void main(){
+  float w = uHalf * WIDTH_FN;
+  vec3 p = position + vec3(aNormal * (aSide * w), 0.0);
+  gl_Position = projectionMatrix * modelViewMatrix * vec4(p, 1.0);
+  float sp = max(aSeg.y - aSeg.x, 1e-4), so = max(aSegO.y - aSegO.x, 1e-4);
+  vSide = aSide; vVar = aVar.x; vGlyph = aVar.y; vPos = p.xy;
+  vTT = vec4(aT, aT, aTO, aTO); vUU = vec2(aArc / aLen); vSI = vec2(aSeg.x, sp);
+  vLL = vec2((uHead - aSeg.x) / sp, (uErase - aSegO.x) / so);
+  vSeed = aSeg.x * 91.7 + aVar.y * 13.1;
+}`;
+export function ribbonMaterial(fragSrc, uniforms, widthFn, additive) {
+    return new THREE.ShaderMaterial({
+        uniforms: { ...uniformsBase(), ...uniforms },
+        vertexShader: RIBBON_VERT.replace('WIDTH_FN', widthFn || '1.0'), fragmentShader: fragSrc,
+        transparent: true, depthWrite: false, side: THREE.DoubleSide,
+        blending: additive ? THREE.AdditiveBlending : THREE.CustomBlending,
+        ...(additive ? {} : { blendEquation: THREE.AddEquation, blendSrc: THREE.OneFactor, blendDst: THREE.OneMinusSrcAlphaFactor }),
+    });
+}
+// ---- pen tips ------------------------------------------------------------------------------
+export function headPoint(s, head) {
+    if (head < s.seg[0] || head > s.seg[1])
+        return null;
+    const u = (head - s.seg[0]) / Math.max(1e-6, s.seg[1] - s.seg[0]);
+    const n = s.pts.length / 2;
+    const T = s.t;
+    let lo = 0, hi = n - 1;
+    while (hi - lo > 1) {
+        const m = (lo + hi) >> 1;
+        if (T[m] <= u)
+            lo = m;
+        else
+            hi = m;
+    }
+    const f = Math.max(0, Math.min(1, (u - T[lo]) / Math.max(1e-9, T[hi] - T[lo])));
+    return [s.pts[2 * lo] + (s.pts[2 * hi] - s.pts[2 * lo]) * f, s.pts[2 * lo + 1] + (s.pts[2 * hi + 1] - s.pts[2 * lo + 1]) * f];
+}
+export function tips(strokes, head, max) {
+    // each tip fades in / out over the first / last 4% of its stroke window, so sparks never pop
+    const out = [];
+    for (const s of strokes) {
+        if (out.length >= max)
+            break;
+        const p = headPoint(s, head);
+        if (p) {
+            const u = (head - s.seg[0]) / Math.max(1e-6, s.seg[1] - s.seg[0]);
+            out.push([p[0], p[1], Math.min(1, u / 0.04, (1 - u) / 0.04)]);
+        }
+    }
+    return out;
+}
+// ---- Capsule field -------------------------------------------------------------------------
+// One instanced quad per polyline segment, fragment = distance to that segment. Blended with MAX the result is exactly
+// f(distance to the whole polyline): round joins and caps, no folded offsets however wide the glow.
+export function buildCapsules(strokes) {
+    let n = 0;
+    for (const s of strokes)
+        n += s.pts.length / 2 - 1;
+    const A = new Float32Array(n * 2), B = new Float32Array(n * 2), T = new Float32Array(n * 2), TO = new Float32Array(n * 2), AR = new Float32Array(n * 2), LN = new Float32Array(n), SG = new Float32Array(n * 2), SO = new Float32Array(n * 2), VR = new Float32Array(n * 2);
+    let k = 0;
+    for (const s of strokes) {
+        const m = s.pts.length / 2;
+        for (let i = 0; i < m - 1; i++) {
+            A.set([s.pts[2 * i], s.pts[2 * i + 1]], 2 * k);
+            B.set([s.pts[2 * i + 2], s.pts[2 * i + 3]], 2 * k);
+            T[2 * k] = s.t[i];
+            T[2 * k + 1] = s.t[i + 1];
+            TO[2 * k] = s.tO[i];
+            TO[2 * k + 1] = s.tO[i + 1];
+            AR[2 * k] = s.cum[i];
+            AR[2 * k + 1] = s.cum[i + 1];
+            LN[k] = Math.max(1e-6, s.len);
+            SG.set(s.seg, 2 * k);
+            SO.set(s.segO, 2 * k);
+            VR.set([s.pressure ? s.pressure[i] : 0, s.glyphN || 0], 2 * k);
+            k++;
+        }
+    }
+    const g = new THREE.InstancedBufferGeometry();
+    g.setAttribute('aq', new THREE.BufferAttribute(new Float32Array([-1, -1, 1, -1, 1, 1, -1, 1]), 2));
+    g.setIndex([0, 1, 2, 0, 2, 3]);
+    const ia = (k2, a, c) => g.setAttribute(k2, new THREE.InstancedBufferAttribute(a, c));
+    ia('iA', A, 2);
+    ia('iB', B, 2);
+    ia('iT', T, 2);
+    ia('iTO', TO, 2);
+    ia('iArc', AR, 2);
+    ia('iLen', LN, 1);
+    ia('iSeg', SG, 2);
+    ia('iSegO', SO, 2);
+    ia('iVar', VR, 2);
+    g.instanceCount = n;
+    g.boundingSphere = new THREE.Sphere(new THREE.Vector3(), 1e3);
+    return g;
+}
+const CAP_VERT = /* glsl */ `
+attribute vec2 aq; attribute vec2 iA; attribute vec2 iB; attribute vec2 iT; attribute vec2 iTO; attribute vec2 iArc; attribute float iLen;
+attribute vec2 iSeg; attribute vec2 iSegO; attribute vec2 iVar;
+${REVEAL_UNIFORMS}${VARYINGS}
+varying vec2 vXY; varying float vHL;
+void main(){
+  vec2 d = iB - iA; float l = max(length(d), 1e-6); vec2 dir = d / l; vec2 perp = vec2(-dir.y, dir.x);
+  float hl = 0.5*l; float R = uHalf;
+  vec2 loc = vec2(aq.x*(hl + R), aq.y*R);
+  vec2 w = 0.5*(iA + iB) + dir*loc.x + perp*loc.y;
+  gl_Position = projectionMatrix*modelViewMatrix*vec4(w, 0.0, 1.0);
+  float sp = max(iSeg.y - iSeg.x, 1e-4), so = max(iSegO.y - iSegO.x, 1e-4);
+  vXY = loc; vHL = hl; vSide = 0.0; vVar = iVar.x; vGlyph = iVar.y; vPos = w;
+  vTT = vec4(iT, iTO); vUU = iArc / iLen; vSI = vec2(iSeg.x, sp);
+  vLL = vec2((uHead - iSeg.x)/sp, (uErase - iSegO.x)/so);
+  vSeed = iSeg.x*91.7 + iVar.y*13.1;
+}`;
+export function capsuleMaterial(fragBody, uniforms) {
+    return new THREE.ShaderMaterial({
+        uniforms: { ...uniformsBase(), uHalf: { value: 0.06 }, ...uniforms },
+        vertexShader: CAP_VERT, fragmentShader: frag(fragBody, 'varying vec2 vXY; varying float vHL;\n'), transparent: true, depthWrite: false, side: THREE.DoubleSide,
+        blending: THREE.CustomBlending, blendEquation: THREE.MaxEquation, blendSrc: THREE.OneFactor, blendDst: THREE.OneFactor,
+    });
+}