@3driseai/3drise-viewer 0.1.28 → 0.1.29

package/dist/components/text/engine/looks/burnAway.js

@@ -0,0 +1,593 @@
+import * as THREE from 'three';
+import { setReveal, REVEAL_UNIFORMS } from '../ribbon.js';
+import { prepare, applyAnim, extentOf, DRAW_METHODS, ERASE_METHODS } from '../methods.js';
+import { buildField, fieldMaterial, fieldQuad } from '../fieldkit.js';
+// =========================================================================================================================
+// burnAway — letters cut from paper that burn.
+//
+// THE MATHS. Combustion of a thin sheet is a front propagating through a medium at a local speed v(p): its arrival time
+// T(p) solves the eikonal equation |grad T| = 1/v(p). We solve it for real on the CPU at build (multi-source Dijkstra with a
+// 16-neighbour stencil on a mask of the glyphs, so the front runs ALONG each stroke and wraps around loops and counters, it
+// never jumps through the air), starting at a few seeded ignition points. Each letter piece is ignited from the nearest
+// ignition (delay = distance / (1/0.7)), as if embers hop across the gaps. T is normalised to 0..1 (A) and baked into a
+// half-float texture. In the shader the fire "spreads unevenly": A is warped by low-frequency fbm (a local speed
+// modulation, so the ignition points stay the earliest) and the front edge gets finer fbm ragged detail.
+// The erase animation S.e drives the front: pixel p is lit at e = (1-L)*A'(p) and then lives for a lifecycle of length L
+// (spread knob: larger spread = faster front, longer-lingering remains), so at S.e = 1 every pixel is gone by construction.
+// Behind the front the age t = e - arrival gives the stages: ember line (radiance of a blackbody cooling 1750K -> 900K,
+// I ~ T^4) -> char (dark cellular cracking: Voronoi F2-F1, glowing in the cracks) -> ash (pale, brittle: plates that flake
+// away on their own random thresholds) -> gone (alpha eaten by fbm / cell hashes, edges first). Ahead of the front the sheet
+// toasts (brown gradient) and a faint warm halo spills out. Rising sparks are closed form: born at the instant the front
+// passes their seed pixel (they evaluate the same arrival function in the vertex shader), drift up and cool.
+// =========================================================================================================================
+const hex = (h) => new THREE.Color(h);
+function mulberry32(a) { return function () { a |= 0; a = (a + 0x6d2b79f5) | 0; let t = Math.imul(a ^ (a >>> 15), 1 | a); t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t; return ((t ^ (t >>> 14)) >>> 0) / 4294967296; }; }
+// ---- GLSL shared by the fragment shader and the spark vertex shader ---------------------------------------------------
+const BURN_COMMON = /* glsl */ `
+uniform sampler2D uArr; uniform vec4 uArrExt; uniform float uL; uniform float uV; uniform float uRough; uniform vec2 uSeedV; uniform float uBurn; uniform float uK;
+float bh(vec2 p){ vec3 p3 = fract(vec3(p.xyx)*0.1031); p3 += dot(p3, p3.yzx + 33.33); return fract((p3.x + p3.y)*p3.z); }
+float vnz(vec2 p){ vec2 i = floor(p); vec2 f = fract(p); f = f*f*(3.0 - 2.0*f);
+  return mix(mix(bh(i), bh(i + vec2(1.0, 0.0)), f.x), mix(bh(i + vec2(0.0, 1.0)), bh(i + vec2(1.0, 1.0)), f.x), f.y); }
+float fbm4(vec2 p){ float a = 0.5; float s = 0.0; for (int i = 0; i < 4; i++){ s += a*vnz(p); p = p*2.03 + vec2(17.1, 9.7); a *= 0.5; } return s/0.9375; }
+vec3 S(vec3 c){ return pow(c, vec3(2.2)); }
+// ember colour from temperature: the config ember hue is the mid-temperature colour; cooler = deeper (darker, redder), hotter = paler and more
+// yellow-white (gamma lift keeps the hue, so a blue ember glows blue). Radiance follows T^4 (see irad).
+uniform vec3 uColor2;
+vec3 ember(float T){ vec3 b = max(uColor2, vec3(1.0e-3)); b /= max(b.r, max(b.g, b.b)); float h = smoothstep(900.0, 1800.0, T); return pow(b, vec3(mix(1.7, 0.45, h))); }
+float irad(float T){ return pow(T/1500.0, 4.0); }
+// arrival of the front at p, in erase progress units (0 .. 1-L). A is warped by low-frequency fbm = uneven local speed.
+float burnArr(vec2 p){
+  float A = texture2D(uArr, (p - uArrExt.xy)/uArrExt.zw).r;
+  float amp = 0.34*uRough; float n = fbm4(p*1.5 + uSeedV);
+  float w = (1.0 + amp*1.5*(2.0*n - 1.0))/(1.0 + amp*1.5);
+  return (1.0 - uL)*clamp(A*w, 0.0, 1.0);
+}
+`;
+const BURN_FRAG = /* glsl */ `
+uniform vec3 uColor; uniform float uOpacity; uniform float uChar; uniform float uEmber; uniform float uSinge; uniform float uLace; uniform float uCurl; uniform vec4 uEmb[8];
+vec3 vor(vec2 p){ vec2 n = floor(p); vec2 f = fract(p); float F1 = 8.0; float F2 = 8.0; float id = 0.0;
+  for (int j = -1; j <= 1; j++) for (int i = -1; i <= 1; i++){
+    vec2 g = vec2(float(i), float(j)); vec2 c = n + g;
+    vec2 o = vec2(bh(c), bh(c + vec2(31.7, 17.3)));
+    float d = length(g + o - f);
+    if (d < F1){ F2 = F1; F1 = d; id = bh(c + vec2(5.1, 9.2)); } else if (d < F2) F2 = d;
+  } return vec3(F1, F2 - F1, id); }
+void main(){
+  vec4 FA = fieldA(vPos);
+  float d = FA.x;
+  float fw = max(fwidth(d), 2.0e-4);
+  vec2 pxe = fwidth(vPos); float pem = max(pxe.x + pxe.y, 1.0e-5);          // em per pixel
+  float vin = revealInG(FA.y);
+  float ageD = ageG(FA.y);
+  float vOut = revealOutG(FA.z);
+  // ---- time since the front passed (burn) or since the shared erase method reached this pixel (generic) ----
+  float arr = max(0.0, burnArr(vPos) + uRough*(0.009*(2.0*fbm4(vPos*13.0 + uSeedV*3.1) - 1.0) + 0.003*(2.0*fbm4(vPos*41.0 + uSeedV*1.7) - 1.0)));
+  float tt = uBurn > 0.5 ? (uE - arr) : (1.0 - vOut)*uL;
+  float phi = tt/uL;                  // lifecycle 0..1
+  float D = tt*uV/uK;                 // em behind the front (negative ahead of it), in units of a stroke of the reference width
+  float aheadEm = max(-D, 0.0);
+  float gEnd = mix(0.14, 1.0, uChar);   // lifecycle fraction at which the remains are gone
+  float psi = max(phi, 0.0)/gEnd;
+  // ---- textures of the material ----
+  float q = max(-d, 0.0);
+  float rimN = fbm4(vPos*23.0 + uSeedV);
+  float cov = 1.0 - smoothstep(-fw, fw, d + 0.0022*(rimN - 0.5));
+  vec2 wp = vec2(vnz(vPos*7.0 + uSeedV), vnz(vPos*7.0 + uSeedV + 19.7)) - 0.5;   // domain warp: cracks wander like real ones
+  vec3 vc = vor(vPos*15.0 + wp*1.6 + uSeedV*0.37);
+  vec3 vf = vor(vPos*38.0 + wp*2.5 + uSeedV*0.91 + 7.3);
+  float nh = fbm4(vPos*9.0 + uSeedV*1.3);
+  float cn = fbm4(vPos*21.0 + uSeedV*2.0);
+  // ---- paper: warm cream, long fibres along a fixed grain, soft mottling; fresh paper is a touch brighter ----
+  vec2 rp = vec2(0.9553*vPos.x + 0.2955*vPos.y, -0.2955*vPos.x + 0.9553*vPos.y);
+  float fa = 1.0 - smoothstep(0.12, 0.35, 40.0*pem);
+  // felted fibres: three elongated noises at 60 degrees to each other (no single direction), plus fine grain that fades with pixel size
+  vec2 r2 = vec2(-0.5*rp.x + 0.866*rp.y, -0.866*rp.x - 0.5*rp.y); vec2 r3 = vec2(-0.5*rp.x - 0.866*rp.y, 0.866*rp.x - 0.5*rp.y);
+  float fibre = (vnz(rp*vec2(6.0, 42.0)) + vnz(r2*vec2(6.0, 42.0) + 4.1) + vnz(r3*vec2(6.0, 42.0) + 8.3))/3.0;
+  fibre = 0.5 + (fibre - 0.5)*2.2 + (vnz(vPos*90.0) - 0.5)*0.5*fa;
+  float fleck = step(0.994, bh(floor(vPos*70.0)))*fa;
+  float mott = fbm4(vPos*4.5 + uSeedV*0.5);
+  float lum = 0.92 + 0.10*(mott - 0.5) + 0.30*(fibre - 0.5) - 0.10*fleck;
+  vec3 paper = uColor*lum*(1.0 + 0.10*exp(-ageD/0.7));
+  // the cut edge catches a little light just inside the contour
+  paper *= 1.0 + 0.035*exp(-pow((q - 0.006)/0.0035, 2.0));
+  // ---- singed rim: darker brown that deepens towards the contour ----
+  float ws = mix(0.008, 0.04, uSinge)*clamp(uK, 0.6, 1.3);
+  float rim = exp(-(q + 0.005*(rimN - 0.5))/ws)*(0.25 + 0.75*uSinge);
+  vec3 singeA = S(vec3(0.46, 0.25, 0.09)); vec3 singeB = S(vec3(0.11, 0.055, 0.022));
+  paper = mix(paper, mix(singeA, singeB, smoothstep(0.35, 1.0, rim))*(0.8 + 0.4*fibre), clamp(rim*1.05, 0.0, 1.0)*0.92);
+  // ---- toast ahead of the front ----
+  float toast = uBurn*exp(-aheadEm/0.03);
+  paper = mix(paper, S(vec3(0.55, 0.36, 0.17))*lum*0.8, toast*0.7);
+  // ---- char, cracks and ash behind it ----
+  float wC = 0.035 + fwidth(vc.y);
+  float cr = max(1.0 - smoothstep(0.02, 0.02 + wC, vc.y), 0.55*(1.0 - smoothstep(0.015, 0.015 + 0.06 + fwidth(vf.y), vf.y)));
+  vec3 charC = S(vec3(0.17, 0.13, 0.105))*(0.5 + 0.95*cn)*(0.85 + 0.3*vc.z)*(1.0 - 0.75*cr)*(0.8 + 0.4*fibre);
+  vec3 ashC = S(vec3(0.40, 0.375, 0.345))*(0.5 + 0.8*cn)*(0.92 + 0.16*vc.z)*(0.8 + 0.4*fibre)*(1.0 - 0.3*cr);
+  float ashMix = smoothstep(0.30, 0.85, psi + 0.3*(nh - 0.5));
+  vec3 burnt = mix(charC, ashC, ashMix);
+  float charMix = uBurn > 0.5 ? smoothstep(0.0, 0.006 + 1.5*pem, D) : smoothstep(0.02, 0.30, psi);
+  // ---- eaten away: plates and edges go on their own random thresholds ----
+  float hh = mix(0.5*nh + 0.5*cn, vc.z, 0.22);
+  float thr = mix(0.42, 0.93, hh) - 0.20*exp(-q/0.03);
+  float alive = 1.0 - smoothstep(thr - 0.09, thr + 0.02, psi);
+  // ---- resting smouldering embers (tiny blackbody points on the edge, breathing) ----
+  vec3 eRest = vec3(0.0); float dark = 0.0;
+  for (int i = 0; i < 8; i++){
+    vec4 e = uEmb[i];
+    if (e.w > 0.0){
+      float rr = length(vPos - e.xy);
+      float br = 0.55 + 0.45*sin(uTime*0.6*uIdleSpeed + e.z);
+      float nz = vnz(vPos*60.0 + e.z*13.0);
+      float rad = max(0.017*e.w*(0.7 + 0.6*uEmber), 1.5*pem);
+      float core = exp(-pow(rr/(rad*(0.85 + 0.25*br)), 2.0))*(0.45 + 0.9*nz);
+      float halo = exp(-rr/(0.05*e.w));
+      dark = max(dark, exp(-pow(rr/(0.032*e.w), 2.0)));
+      float Te = 950.0 + 600.0*clamp(core*br, 0.0, 1.0);
+      eRest += ember(Te)*irad(Te)*(core*0.8 + halo*0.09)*(0.4 + 0.6*br);
+    }
+  }
+  eRest *= uEmber;
+  paper = mix(paper, charC*1.2, dark*0.85);
+  vec3 body = mix(paper, burnt, charMix);
+  // ---- paper curl (shading only): the charring edge lifts toward the viewer. Height h = curl * edge weight * profile(D): zero at the front,
+  // peaking just behind it, relaxing further back. The normal comes from the screen-space slope of h, lit from the upper left; the free edge
+  // shows a thin dark underside, and the lifted lip throws a soft shadow on the paper ahead. No geometry moves.
+  float gate = smoothstep(0.0, 0.02, uE);
+  float curlP = uCurl*smoothstep(0.0, 0.012, D)*exp(-max(D, 0.0)/0.07)*uBurn;
+  float hgt = 0.03*curlP*(0.35 + 0.65*exp(-q/0.04))*(0.8 + 0.4*cn);
+  float gx = dFdx(vPos.x); gx = abs(gx) > 1.0e-6 ? gx : 1.0e-6; float gy = dFdy(vPos.y); gy = abs(gy) > 1.0e-6 ? gy : 1.0e-6;
+  vec2 slope = vec2(dFdx(hgt)/gx, dFdy(hgt)/gy);
+  vec3 nrm = normalize(vec3(-slope*0.9, 1.0)); vec3 Ld = normalize(vec3(-0.5, 0.6, 0.65));
+  body *= clamp(dot(nrm, Ld)/Ld.z, 0.45, 1.5);
+  body = mix(body, S(vec3(0.045, 0.03, 0.02)), clamp(curlP*exp(-q/0.007), 0.0, 1.0)*0.85*(1.0 - smoothstep(0.0, 0.01, d)));
+  body *= 1.0 - 0.38*uCurl*uBurn*gate*exp(-aheadEm/0.04)*(0.4 + 0.6*exp(-q/0.05));
+  // ---- ash skeleton: the ink / carbon outlasts the paper, so a fragile lace of the letter (inner contour + medial ridge of the distance
+  // field, broken into threads) stays behind the front, cooling from warm grey to blue-grey with a slow sheen, then flakes off cell by cell
+  // in a slow wave that is finished by S.e = 1.
+  float le = 0.014;
+  float qn = 0.25*(max(-fieldA(vPos + vec2(le, 0.0)).x, 0.0) + max(-fieldA(vPos - vec2(le, 0.0)).x, 0.0) + max(-fieldA(vPos + vec2(0.0, le)).x, 0.0) + max(-fieldA(vPos - vec2(0.0, le)).x, 0.0));
+  float ridge = smoothstep(0.08*le, 0.4*le, q - qn)*step(0.004, q);
+  float lw = max(0.0024*clamp(uK, 0.6, 1.3), 0.75*pem);
+  float wob = 0.005*(fbm4(vPos*17.0 + uSeedV*0.3) - 0.5)*2.0;
+  float outl = exp(-pow((q - 0.010 - wob)/lw, 2.0))*(1.0 - smoothstep(-0.002, 0.002, d));
+  float thread = smoothstep(0.42, 0.66, fbm4(vPos*22.0 + uSeedV*0.7));
+  float lace = max(0.8*outl, 0.38*ridge*smoothstep(0.5, 0.75, thread + 0.3*vf.z))*(0.2 + 0.8*thread);
+  float wv = clamp((vPos.x - uArrExt.x)/uArrExt.z, 0.0, 1.0);
+  float tc = mix(0.72, 0.965, clamp(0.6*wv + 0.4*vc.z, 0.0, 1.0));
+  float collapse = 1.0 - smoothstep(tc - 0.035, tc + 0.03, uE);
+  float laceA = lace*uLace*mix(0.5, 1.0, uChar)*smoothstep(0.30, 0.75, psi)*collapse*vin*uOpacity;
+  float cool = smoothstep(0.4, 1.0, psi);
+  float shn = pow(vnz(vec2(vPos.x*4.0 + uTime*0.12*uIdleSpeed, vPos.y*8.0 + 3.1*vc.z)), 3.0);
+  vec3 laceC = mix(S(vec3(0.50, 0.47, 0.43)), S(vec3(0.42, 0.50, 0.60)), cool)*(0.55 + 0.9*shn*cool);
+  // ---- the front itself: thin ember line, glowing bed in the cracks, heat halo ahead ----
+  float Dp = max(D, 0.0);
+  float onFront = smoothstep(0.0, 0.0035 + 1.5*pem, D);
+  float Dw = 0.010*(0.55 + 0.7*uEmber);
+  float T = mix(1750.0, 1150.0, 1.0 - exp(-Dp/0.03));
+  float line = exp(-Dp/Dw);
+  float beat = 0.55 + 0.45*sin(uTime*0.9*uIdleSpeed + vc.z*40.0);
+  float bed = exp(-Dp/0.06)*cr*beat*(1.0 - smoothstep(0.04, 0.4, psi));
+  float Tb = mix(1150.0, 880.0, smoothstep(0.0, 0.3, psi));
+  vec3 emis = (ember(T)*irad(T)*line*0.62 + ember(Tb)*irad(Tb)*bed*0.8 + ember(1250.0)*0.09*exp(-Dp/0.035))*onFront*uEmber;
+  emis += ember(1250.0)*0.09*uBurn*exp(-aheadEm/0.03)*(1.0 - onFront)*uEmber;
+  emis += eRest;
+  // ---- composite ----
+  float aBody0 = cov*vin*alive*mix(1.0, 1.0 - 0.2*cr, ashMix*charMix)*(1.0 - 0.5*smoothstep(0.4, 1.0, psi)*charMix)*uOpacity;
+  float aBody = aBody0 + laceA*(1.0 - aBody0);
+  body = (body*aBody0 + laceC*laceA*(1.0 - aBody0))/max(aBody, 1.0e-4);
+  float sp = exp(-max(d, 0.0)/0.014)*(1.0 - smoothstep(0.025, 0.045, d));
+  float mEm = (cov + (1.0 - cov)*sp*0.55)*alive*vin*uOpacity;
+  vec3 em = emis*mEm;
+  em /= max(1.0, max(em.r, max(em.g, em.b)));
+  gl_FragColor = vec4(body*aBody + em, aBody);
+  #include <tonemapping_fragment>
+  #include <colorspace_fragment>
+}`;
+// ---- rising sparks (closed form) ----------------------------------------------------------------------------------------
+const SPARK_VERT = /* glsl */ `
+${REVEAL_UNIFORMS}${BURN_COMMON}
+attribute vec4 aR; attribute float aMode; attribute float aG;
+uniform float uScale; uniform float uSize; uniform float uEmber;
+varying float vA; varying vec3 vCol;
+void main(){
+  vec2 pos = position.xy; float a = 0.0; float T = 1300.0; float sz = 1.0;
+  if (aMode < 0.5){
+    float arr = burnArr(position.xy);
+    float life = uL*(0.3 + 0.55*aR.x);
+    float k = (uE - arr)/life;
+    if (uBurn > 0.5 && k > 0.0 && k < 1.0){
+      float e = 1.0 - pow(1.0 - k, 1.7);
+      pos.y += 0.012 + (0.14 + 0.26*aR.y)*e;
+      pos.x += (aR.z - 0.5)*0.10*e + 0.025*sin(k*5.0 + aR.w*6.28)*e;
+      a = smoothstep(0.0, 0.06, k)*(1.0 - smoothstep(0.45, 1.0, k))*(0.5 + 0.5*aR.w);
+      T = mix(1700.0, 950.0, k); sz = 0.7 + 0.6*aR.x;
+    }
+  } else {
+    float P = 5.0 + 5.0*aR.x; float ph = uTime*uIdleSpeed/P + aR.y*7.0; float kk = floor(ph);
+    float k = fract(ph)/0.4;
+    float on = step(0.45, bh(vec2(kk, aR.z*91.0)));
+    float vis = uFadeIn > 0.5 ? uD : smoothstep(0.0, max(uSoftIn, 1.0e-4), uHead - aG);
+    vis *= 1.0 - smoothstep(0.0, 0.06, uE);
+    if (k < 1.0){
+      float e = 1.0 - pow(1.0 - k, 1.5);
+      pos.y += 0.01 + (0.08 + 0.12*aR.y)*e;
+      pos.x += (aR.w - 0.5)*0.05*e + 0.012*sin(k*4.0 + aR.z*6.28)*e;
+      a = on*vis*smoothstep(0.0, 0.15, k)*(1.0 - smoothstep(0.4, 1.0, k))*0.75;
+      T = mix(1550.0, 950.0, k); sz = 0.55 + 0.4*aR.x;
+    }
+  }
+  a *= (0.75 + 0.25*sin(uTime*(3.0 + 4.0*aR.w) + aR.z*30.0))*uEmber;
+  vA = a; vCol = ember(T)*irad(T)*1.1;
+  vec4 mv = modelViewMatrix*vec4(pos, 0.001, 1.0); gl_Position = projectionMatrix*mv;
+  gl_PointSize = a > 0.001 ? max(2.0, sz*uSize*uScale/-mv.z) : 0.0;
+}`;
+const SPARK_FRAG = /* glsl */ `
+precision highp float; varying float vA; varying vec3 vCol;
+void main(){ vec2 p = gl_PointCoord*2.0 - 1.0; float r = length(p);
+  float core = 1.0 - smoothstep(0.0, 0.32, r); float halo = pow(max(1.0 - r, 0.0), 2.6)*0.5;
+  float a = (core*0.95 + halo)*vA; if (a < 0.004) discard;
+  vec3 c = vCol*a; c /= max(1.0, max(c.r, max(c.g, c.b)))*1.0;
+  gl_FragColor = vec4(c, 1.0);
+  #include <tonemapping_fragment>
+  #include <colorspace_fragment>
+}`;
+// ---- CPU: the eikonal solve -------------------------------------------------------------------------------------------
+function burnMap(strokes, field, G, seed) {
+    const ex = field.ext, ew = ex.z, eh = ex.w;
+    const W = 512, H = Math.max(8, Math.round(W * eh / ew)), sx = ew / W, sy = eh / H, N = W * H;
+    const rng = mulberry32(Math.floor(seed) * 7919 + 13);
+    // inside mask (even-odd per glyph), same convention as the field kit
+    const cv = document.createElement('canvas');
+    cv.width = W;
+    cv.height = H;
+    const g = cv.getContext('2d', { willReadFrequently: true });
+    g.fillStyle = '#fff';
+    g.fillRect(0, 0, W, H);
+    g.fillStyle = '#000';
+    const byGlyph = new Map();
+    for (const s of strokes) {
+        if (!byGlyph.has(s.glyph))
+            byGlyph.set(s.glyph, []);
+        byGlyph.get(s.glyph).push(s);
+    }
+    for (const list of byGlyph.values()) {
+        g.beginPath();
+        for (const s of list) {
+            for (let i = 0; i < s.pts.length; i += 2) {
+                const X = (s.pts[i] - ex.x) / sx, Y = H - (s.pts[i + 1] - ex.y) / sy;
+                if (i === 0)
+                    g.moveTo(X, Y);
+                else
+                    g.lineTo(X, Y);
+            }
+            g.closePath();
+        }
+        g.fill('evenodd');
+    }
+    const im = g.getImageData(0, 0, W, H).data;
+    const inside = new Uint8Array(N);
+    for (let y = 0; y < H; y++)
+        for (let x = 0; x < W; x++)
+            inside[y * W + x] = im[((H - 1 - y) * W + x) * 4] < 128 ? 1 : 0;
+    // ignition centres: contour points, one per slice of the text width (embers hop from the nearest one)
+    const e = extentOf(strokes);
+    const K = Math.max(1, Math.min(4, Math.round(G / 4)));
+    const cand = [];
+    strokes.forEach((s, si) => { const n = s.pts.length / 2; for (let k = 0; k < n - 1; k++)
+        cand.push([si, k]); });
+    const gDat = (si, k) => { const s = strokes[si]; return s.seg[0] + s.t[k] * (s.seg[1] - s.seg[0]); };
+    const sites = []; // {x, y, gD}
+    const addSite = (c) => { const s = strokes[c[0]]; sites.push({ x: s.pts[2 * c[1]], y: s.pts[2 * c[1] + 1], g: gDat(c[0], c[1]), si: c[0] }); };
+    for (let kk = 0; kk < K; kk++) {
+        const lo = e.x0 + e.w * kk / K, hi = e.x0 + e.w * (kk + 1) / K;
+        let pool = cand.filter((c) => { const x = strokes[c[0]].pts[2 * c[1]]; return x >= lo && x <= hi; });
+        if (!pool.length)
+            pool = cand;
+        addSite(pool[Math.floor(rng() * pool.length) % pool.length]);
+    }
+    const centres = sites.slice();
+    for (let tries = 0, want = Math.min(8, K + 3); sites.length < want && tries < 200; tries++) {
+        const c = cand[Math.floor(rng() * cand.length) % cand.length];
+        const s = strokes[c[0]];
+        const x = s.pts[2 * c[1]], y = s.pts[2 * c[1] + 1];
+        if (sites.every((o) => Math.hypot(o.x - x, o.y - y) > 0.45))
+            addSite(c);
+    }
+    // connected components of the mask (a glyph may have islands: the dot of an i)
+    const comp = new Int32Array(N).fill(-1);
+    const comps = [];
+    const stack = [];
+    for (let p = 0; p < N; p++) {
+        if (!inside[p] || comp[p] >= 0)
+            continue;
+        const id = comps.length;
+        const cells = [];
+        comp[p] = id;
+        stack.push(p);
+        while (stack.length) {
+            const c = stack.pop();
+            cells.push(c);
+            const cx = c % W, cy = (c / W) | 0;
+            for (let dy = -1; dy <= 1; dy++)
+                for (let dx = -1; dx <= 1; dx++) {
+                    const xx = cx + dx, yy = cy + dy;
+                    if (xx < 0 || yy < 0 || xx >= W || yy >= H)
+                        continue;
+                    const q = yy * W + xx;
+                    if (inside[q] && comp[q] < 0) {
+                        comp[q] = id;
+                        stack.push(q);
+                    }
+                }
+        }
+        comps.push(cells);
+    }
+    // multi-source Dijkstra (binary heap, lazy deletion). Every component starts at the cell nearest an ignition centre.
+    const dist = new Float64Array(N).fill(1e30);
+    let hk = new Float64Array(1024), hv = new Int32Array(1024), hn = 0;
+    const push = (k, v) => { if (hn === hk.length) {
+        const a = new Float64Array(hn * 2), b = new Int32Array(hn * 2);
+        a.set(hk);
+        b.set(hv);
+        hk = a;
+        hv = b;
+    } let i = hn++; while (i > 0) {
+        const p = (i - 1) >> 1;
+        if (hk[p] <= k)
+            break;
+        hk[i] = hk[p];
+        hv[i] = hv[p];
+        i = p;
+    } hk[i] = k; hv[i] = v; };
+    const pop = () => { const rk = hk[0], rv = hv[0]; const k = hk[--hn], v = hv[hn]; let i = 0; for (;;) {
+        let c = 2 * i + 1;
+        if (c >= hn)
+            break;
+        if (c + 1 < hn && hk[c + 1] < hk[c])
+            c++;
+        if (hk[c] >= k)
+            break;
+        hk[i] = hk[c];
+        hv[i] = hv[c];
+        i = c;
+    } hk[i] = k; hv[i] = v; return [rk, rv]; };
+    for (const cells of comps) {
+        let best = -1, bd = 1e30;
+        for (const c of cells) {
+            const X = ex.x + ((c % W) + 0.5) * sx, Y = ex.y + (((c / W) | 0) + 0.5) * sy;
+            for (const s of centres) {
+                const d2 = (X - s.x) ** 2 + (Y - s.y) ** 2;
+                if (d2 < bd) {
+                    bd = d2;
+                    best = c;
+                }
+            }
+        }
+        const delay = 0.7 * Math.sqrt(bd);
+        dist[best] = delay;
+        push(delay, best);
+    }
+    const NB = [[1, 0], [-1, 0], [0, 1], [0, -1], [1, 1], [1, -1], [-1, 1], [-1, -1], [2, 1], [2, -1], [-2, 1], [-2, -1], [1, 2], [1, -2], [-1, 2], [-1, -2]];
+    const NL = NB.map(([a, b]) => Math.hypot(a * sx, b * sy));
+    while (hn > 0) {
+        const [dk, c] = pop();
+        if (dk > dist[c])
+            continue;
+        const cx = c % W, cy = (c / W) | 0;
+        for (let j = 0; j < 16; j++) {
+            const xx = cx + NB[j][0], yy = cy + NB[j][1];
+            if (xx < 0 || yy < 0 || xx >= W || yy >= H)
+                continue;
+            const q = yy * W + xx;
+            if (!inside[q])
+                continue;
+            const nd = dk + NL[j];
+            if (nd < dist[q]) {
+                dist[q] = nd;
+                push(nd, q);
+            }
+        }
+    }
+    let Tmax = 1e-3;
+    for (let p = 0; p < N; p++)
+        if (inside[p] && dist[p] < 1e29)
+            Tmax = Math.max(Tmax, dist[p]);
+    // the fire should keep burning new paper at a steady pace: map T through a blend of itself and its cdf over the paper area
+    // (monotone, so the front topology is unchanged; sparse regions are crossed faster than dense ones)
+    const ord = [];
+    for (let p = 0; p < N; p++)
+        if (inside[p] && dist[p] < 1e29)
+            ord.push(p);
+    ord.sort((a, b) => dist[a] - dist[b]);
+    const rank = new Float32Array(N);
+    ord.forEach((p, i) => { rank[p] = i / Math.max(1, ord.length - 1); });
+    const EQ = 0.55;
+    for (const p of ord)
+        dist[p] = ((1 - EQ) * dist[p] / Tmax + EQ * rank[p]) * Tmax;
+    const A = new Float32Array(N).fill(1);
+    const set = new Uint8Array(N);
+    for (let p = 0; p < N; p++)
+        if (inside[p] && dist[p] < 1e29) {
+            A[p] = dist[p] / Tmax;
+            set[p] = 1;
+        }
+    // dilate the arrival a few texels outwards so the light spilling over the cut edge has a front too
+    for (let r = 0; r < 6; r++) {
+        const nA = A.slice(), nS = set.slice();
+        for (let y = 0; y < H; y++)
+            for (let x = 0; x < W; x++) {
+                const p = y * W + x;
+                if (set[p])
+                    continue;
+                let m = 2, f = 0;
+                for (let dy = -1; dy <= 1; dy++)
+                    for (let dx = -1; dx <= 1; dx++) {
+                        const xx = x + dx, yy = y + dy;
+                        if (xx < 0 || yy < 0 || xx >= W || yy >= H)
+                            continue;
+                        const q = yy * W + xx;
+                        if (set[q] && A[q] < m) {
+                            m = A[q];
+                            f = 1;
+                        }
+                    }
+                if (f) {
+                    nA[p] = m;
+                    nS[p] = 1;
+                }
+            }
+        A.set(nA);
+        set.set(nS);
+    }
+    const hf = THREE.DataUtils.toHalfFloat;
+    const data = new Uint16Array(N * 4);
+    const one = hf(1);
+    for (let p = 0; p < N; p++) {
+        data[4 * p] = hf(A[p]);
+        data[4 * p + 1] = 0;
+        data[4 * p + 2] = 0;
+        data[4 * p + 3] = one;
+    }
+    const tex = new THREE.DataTexture(data, W, H, THREE.RGBAFormat, THREE.HalfFloatType);
+    tex.minFilter = tex.magFilter = THREE.LinearFilter;
+    tex.wrapS = tex.wrapT = THREE.ClampToEdgeWrapping;
+    tex.generateMipmaps = false;
+    tex.needsUpdate = true;
+    // spark seeds: stratified over the burn order, so a spark is born every so often along the whole fire
+    const order = [];
+    for (let p = 0; p < N; p++)
+        if (inside[p] && dist[p] < 1e29)
+            order.push(p);
+    order.sort((a, b) => dist[a] - dist[b]);
+    const seeds = [];
+    const NBURN = 48;
+    if (order.length)
+        for (let i = 0; i < NBURN; i++) {
+            const c = order[Math.min(order.length - 1, Math.floor(((i + rng()) / NBURN) * order.length))];
+            seeds.push({ x: ex.x + ((c % W) + rng()) * sx, y: ex.y + (((c / W) | 0) + rng()) * sy, r: [rng(), rng(), rng(), rng()] });
+        }
+    let nIn = 0;
+    for (let p = 0; p < N; p++)
+        nIn += inside[p];
+    let per = 0;
+    for (const s of strokes)
+        per += s.len;
+    const strokeW = Math.max(0.03, Math.min(0.3, 2 * nIn * sx * sy / Math.max(1e-3, per)));
+    return { tex, Tmax, sites, seeds, rng, strokeW };
+}
+function sparkGeometry(map) {
+    const idle = [];
+    map.sites.forEach((s) => { for (let k = 0; k < 2; k++)
+        idle.push(s); });
+    const n = map.seeds.length + idle.length;
+    const pos = new Float32Array(n * 3), aR = new Float32Array(n * 4), aMode = new Float32Array(n), aG = new Float32Array(n);
+    map.seeds.forEach((s, i) => { pos[3 * i] = s.x; pos[3 * i + 1] = s.y; aR.set(s.r, 4 * i); });
+    idle.forEach((s, j) => { const i = map.seeds.length + j; pos[3 * i] = s.x; pos[3 * i + 1] = s.y; aMode[i] = 1; aG[i] = s.g; aR.set([map.rng(), map.rng(), map.rng(), map.rng()], 4 * i); });
+    const g = new THREE.BufferGeometry();
+    g.setAttribute('position', new THREE.BufferAttribute(pos, 3));
+    g.setAttribute('aR', new THREE.BufferAttribute(aR, 4));
+    g.setAttribute('aMode', new THREE.BufferAttribute(aMode, 1));
+    g.setAttribute('aG', new THREE.BufferAttribute(aG, 1));
+    g.boundingSphere = new THREE.Sphere(new THREE.Vector3(), 1e3);
+    return g;
+}
+export default {
+    key: 'burnAway', source: 'outline',
+    drawMethods: DRAW_METHODS, eraseMethods: ['burn', ...ERASE_METHODS], drawDefault: 'trace', eraseDefault: 'burn',
+    animDefaults: { eraseDuration: 6, holdTime: 2.5, eraseEase: 'linear' },
+    methodInfo: { burn: { label: 'Burn', hint: 'A combustion front: a few seeded ignition points, the fire runs along the letters, leaves char and ash, then nothing.' } },
+    catalog: {
+        name: 'Burn Away',
+        description: 'Letters cut from singed cream paper with smouldering embers; the erase is a combustion front travelling along the strokes leaving glowing edge, cracked char and ash. Use for dramatic reveals, titles and storytelling.',
+        tags: ['paper', 'burn', 'fire', 'ember', 'char', 'ash', 'parchment', 'dramatic'],
+    },
+    defaults: { color: '#efe2c4', color2: '#ff7a1c', char: 0.6, ashLace: 0.7, curl: 0.6, spread: 1, ember: 1, roughness: 0.6, singe: 0.55, opacity: 1, seed: 7 },
+    ui: {
+        main: [
+            { name: 'char', label: 'Char', description: 'How much cracked char and ash is left behind the fire (0 = clean burn).', type: 'number', min: 0, max: 1, step: 0.01 },
+            { name: 'spread', label: 'Spread', description: 'Speed of the fire front; faster fronts leave their remains lingering longer.', type: 'number', min: 0.3, max: 2.2, step: 0.01 },
+            { name: 'ember', label: 'Ember', description: 'Brightness and size of the embers, sparks and the glowing front.', type: 'number', min: 0, max: 2, step: 0.01 },
+            { name: 'color', label: 'Paper', description: 'Colour of the paper.', type: 'color' },
+        ],
+        more: [
+            { name: 'color2', label: 'Ember colour', description: 'Hue of the glowing embers (tints the blackbody ramp).', type: 'color' },
+            { name: 'roughness', label: 'Raggedness', description: 'How unevenly the fire spreads and how ragged the front is.', type: 'number', min: 0, max: 1, step: 0.01 },
+            { name: 'singe', label: 'Singe', description: 'Width and depth of the scorched brown rim at rest.', type: 'number', min: 0, max: 1, step: 0.01 },
+            { name: 'ashLace', label: 'Ash lace', description: 'How much of the writing stays as a fragile ash skeleton before it flakes away.', type: 'number', min: 0, max: 1, step: 0.01 },
+            { name: 'curl', label: 'Curl', description: 'How strongly the charring paper edge curls up toward the viewer.', type: 'number', min: 0, max: 1, step: 0.01 },
+            { name: 'opacity', label: 'Opacity', description: 'Overall opacity.', type: 'number', min: 0, max: 1, step: 0.01 },
+            { name: 'seed', label: 'Seed', description: 'Where the fire starts and how it spreads.', type: 'number', min: 0, max: 99, step: 1 },
+        ],
+    },
+    structural: ['seed'],
+    presets: [
+        { name: 'Parchment', description: 'Cream paper, a fire that leaves char and ash.', patch: {} },
+        { name: 'Clean burn', description: 'Fast, thin front that leaves almost nothing behind.', patch: { char: 0.08, spread: 1.7, roughness: 0.35, ember: 1.2 } },
+        { name: 'Smouldering', description: 'Slow, ragged creep with bright embers and heavy char.', patch: { char: 1, spread: 0.45, roughness: 0.9, ember: 1.5, singe: 0.8 } },
+        { name: 'Old map', description: 'Tea-stained sheet with a deep singed rim.', patch: { color: '#d9bf8a', singe: 1, char: 0.75, roughness: 0.8 } },
+        { name: 'Moonfire', description: 'Cold pale paper and bluish embers.', patch: { color: '#d7dde8', color2: '#6fa8ff', ember: 1.1, singe: 0.4 } },
+    ],
+    build(layout, cfg, anim) {
+        const strokes = layout.strokes;
+        prepare(strokes, 'outline');
+        const G = layout.glyphs.length;
+        strokes.forEach((s) => { s.glyphN = s.glyph / Math.max(1, G - 1); });
+        const { infoD, infoE } = applyAnim(strokes, anim, G);
+        const field = buildField(strokes, { source: 'outline', texels: 800 });
+        const map = burnMap(strokes, field, G, cfg.seed);
+        const shared = {
+            uArr: { value: map.tex }, uArrExt: { value: field.ext }, uL: { value: 0.3 }, uV: { value: 3 }, uRough: { value: cfg.roughness },
+            uK: { value: Math.max(0.45, Math.min(1.5, map.strokeW / 0.12)) }, uSeedV: { value: new THREE.Vector2((cfg.seed * 13.37) % 97, (cfg.seed * 7.11) % 89) }, uBurn: { value: anim.erase.method === 'burn' ? 1 : 0 },
+        };
+        const embers = [];
+        for (let i = 0; i < 8; i++)
+            embers.push(new THREE.Vector4(0, 0, 0, 0));
+        map.sites.slice(0, 8).forEach((s, i) => embers[i].set(s.x, s.y, (map.rng() * 6.283), 0.8 + 0.5 * map.rng()));
+        const mat = fieldMaterial(field, BURN_FRAG, {
+            ...shared, uColor: { value: hex(cfg.color) }, uColor2: { value: hex(cfg.color2) }, uOpacity: { value: 1 }, uChar: { value: cfg.char },
+            uEmber: { value: cfg.ember }, uSinge: { value: cfg.singe }, uLace: { value: cfg.ashLace }, uCurl: { value: cfg.curl }, uEmb: { value: embers },
+        }, { extra: BURN_COMMON });
+        const quad = fieldQuad(field, mat);
+        const geo = sparkGeometry(map);
+        const smat = new THREE.ShaderMaterial({
+            uniforms: { ...mat.uniforms, uScale: { value: 800 }, uSize: { value: 0.016 } },
+            vertexShader: SPARK_VERT, fragmentShader: SPARK_FRAG, transparent: true, depthWrite: false, blending: THREE.AdditiveBlending,
+        });
+        // uniforms shared by reference with the quad: one push point
+        for (const k of Object.keys(mat.uniforms))
+            smat.uniforms[k] = mat.uniforms[k];
+        smat.uniforms.uScale = { value: 800 };
+        smat.uniforms.uSize = { value: 0.016 };
+        const pts = new THREE.Points(geo, smat);
+        pts.frustumCulled = false;
+        const group = new THREE.Group();
+        group.add(quad, pts);
+        const Tmax = map.Tmax;
+        const api = {
+            object: group,
+            apply(c) {
+                const u = mat.uniforms;
+                u.uColor.value.set(c.color);
+                u.uColor2.value.set(c.color2);
+                u.uOpacity.value = c.opacity;
+                u.uChar.value = c.char;
+                u.uEmber.value = c.ember;
+                u.uSinge.value = c.singe;
+                u.uLace.value = c.ashLace;
+                u.uCurl.value = c.curl;
+                u.uRough.value = c.roughness;
+                // spread: fire speed vs. how long the remains linger. L = lifecycle length in erase progress (the front uses 1-L), so S.e = 1 always finishes.
+                const L = Math.max(0.12, Math.min(0.62, 0.12 + 0.22 * c.spread));
+                u.uL.value = L;
+                u.uV.value = Tmax / (1 - L);
+            },
+            update(S, time, px) {
+                setReveal(mat.uniforms, S, infoD, infoE, anim.draw.duration, time);
+                smat.uniforms.uScale.value = px;
+            },
+            dispose() { field.dispose(); map.tex.dispose(); mat.dispose(); quad.geometry.dispose(); geo.dispose(); smat.dispose(); },
+        };
+        api.apply(cfg);
+        return api;
+    },
+};