Destroy mode: UV damage mask with tear, crush, burn and water at any unroll amount; roll up; size-dependent debris

app.js

@@ -8,6 +8,7 @@ import { createTear } from './tear.js';
 import { loadRegistry, listLocal, getLocal, localKey, remoteSource, fileSource, findManifest, buildMeshScroll, decodeImage } from './lib/scrolls.js';
 import { validateManifest, peelOrder, layerWindings, layerFile, roleOf, fill, REGISTRY_LIMITS, LOCAL_LIMITS } from './lib/manifest.js';
 import { setupOpenOwn } from './lib/openown.js';
+import { createDamage, injectFrag, DMG_HEAD } from './damage.js';
 
 const $ = (id) => document.getElementById(id);
 const params = new URLSearchParams(location.hash.slice(1));
@@ -254,9 +255,11 @@ const shared = {
   uRot: { value: 0 }, uRoll: { value: new THREE.Vector3() },
   uSweep: { value: 999 }, uLayer: { value: 1 }, uGpuMix: { value: 0 },
   uTime: { value: 0 }, uLift: { value: 3.5 },
+  uDmgT: { value: 0 }, uPickW: { value: 0 },
 };
 
 const VERT = /* glsl */`
+uniform sampler2D uDmg; uniform float uDmgOn;
 attribute vec2 aLocal;
 uniform float uP, uSoft, uRot, uLift;
 uniform vec3 uRoll, uFlatO;
@@ -274,6 +277,8 @@ void main() {
   vec3 pf = uFlatO + vec3(aLocal.x * uSize.x, -aLocal.y * uSize.y, 0.0);
   vec3 p = mix(pc, pf, e);
   p.z -= sin(3.14159265 * e) * uLift;
+  // soaked papyrus softens and sags
+  if (uDmgOn > 0.5) { float wv = texture2D(uDmg, aLocal).a; p.y -= wv * wv * 1.8; p.z += wv * 0.6; }
   vN = normalize(mix(nc, vec3(0.0, 0.0, 1.0), e));
   vLocal = aLocal;
   vE = e;
@@ -335,16 +340,20 @@ void main() {
   gl_FragColor = vec4(col, 1.0);
 }`;
 
-const PICK_FRAG = /* glsl */`
-uniform float uId;
+// picking: winding id and surface UV (or world position when uPickW is set); holes in the damage mask let picks through to deeper wraps
+const PICK_FRAG = DMG_HEAD + /* glsl */`
+uniform float uId, uPickW;
 uniform sampler2D uCT;
 uniform vec4 uAtlas;
 varying vec2 vLocal;
+varying vec3 vW;
 void main() {
   vec2 auv = uAtlas.xy + vLocal * (uAtlas.zw - uAtlas.xy);
   if (texture2D(uCT, auv).r < 0.012) discard;
-  gl_FragColor = vec4(uId / 255.0, 0.0, 0.0, 1.0);
+  if (uDmgOn > 0.5 && texture2D(uDmg, vLocal).r * 1.08 + (dFib(vLocal * uDmgMM) - 0.5) * 0.55 > 0.5) discard;
+  gl_FragColor = uPickW > 0.5 ? vec4(vW, 1.0) : vec4(uId / 255.0, vLocal, 1.0);
 }`;
+const FRAG_D = injectFrag(FRAG, 'vec3 n = normalize(vN);');
 
 // windings in peel order: outermost first
 const wins = ORDER.map((o) => M.windings.find((w) => w.id === o.id));
@@ -456,9 +465,10 @@ for (const [j, w] of wins.entries()) {
     uAtlas: { value: new THREE.Vector4(...w.atlas) },
     uGpuTex: { value: gpuTex[w.id] || blank }, uGpuOn: { value: gpuIds.has(w.id) ? 1 : 0 },
     uHi: { value: 0 }, uId: { value: j + 1 },
+    uDmg: { value: blank }, uDmgOn: { value: 0 }, uDmgMM: { value: new THREE.Vector2(w.widthMM, w.heightMM) },
   };
   const mat = new THREE.ShaderMaterial({
-    uniforms: { ...shared, ...own }, vertexShader: VERT, fragmentShader: FRAG, side: THREE.DoubleSide,
+    uniforms: { ...shared, ...own }, vertexShader: VERT, fragmentShader: FRAG_D, side: THREE.DoubleSide,
   });
   const pickMat = new THREE.ShaderMaterial({
     uniforms: { ...shared, ...own }, vertexShader: VERT, fragmentShader: PICK_FRAG, side: THREE.DoubleSide,
@@ -479,18 +489,25 @@ for (const m of meshes) {
 }
 const stripZ = -(Rmax + 3.5);
 for (const m of meshes) m.userData.own.uFlatO.value.z = stripZ;
+let groundY = Infinity;
+for (const m of meshes) groundY = Math.min(groundY, m.userData.own.uFlatO.value.y - m.userData.w.heightMM);
+groundY -= 6;
+const damage = createDamage({ THREE, scene, meshes, MOBILE, ground: () => groundY, uDmgT: shared.uDmgT });
 
 // ---------------------------------------------------------------- tear apart (just for fun)
 
 let tear = null, tearOn = false;
 function setTear(on) {
   tearOn = on;
-  if (on && !tear) tear = createTear({ THREE, scene, camera, controls, canvas, meshes, shared, FRAG, stripZ, ctImage: texCT.image, MOBILE });
+  if (on && !tear) tear = createTear({ THREE, scene, camera, controls, canvas, meshes, shared, FRAG: FRAG_D, stripZ, ctImage: texCT.image, MOBILE, damage });
   for (const m of meshes) m.visible = !on;
   if (tear) tear.group.visible = on;
-  $('btnTear').classList.toggle('on', on);
-  $('btnTear').setAttribute('aria-pressed', on);
-  for (const id of ['btnReset', 'btnCrush', 'btnShake', 'btnSound']) $(id).hidden = !on;
+  $('btnSandbox').classList.toggle('on', on);
+  $('btnSandbox').setAttribute('aria-pressed', on);
+  $('btnShake').hidden = !on;
+  for (const id of ['toolBurn', 'toolWater']) $(id).disabled = on;
+  if (on && (tool === 'burn' || tool === 'water')) setTool('tear');
+  if (tear) tear.setCrush(tool === 'crush');
   document.body.classList.toggle('tearing', on);
   if (on) {
     introDone(); autoplayAt = 0; setPlaying(false);
@@ -581,14 +598,28 @@ function setPlaying(v) {
   // replay from the end: rewind smoothly from where it is, never jump
   if (v && target >= 0.999) setTarget(0, 'play');
 }
-$('play').onclick = () => { introDone(); autoplayAt = 0; setPlaying(!playing); };
+$('play').onclick = () => { introDone(); autoplayAt = 0; setRolling(false); setPlaying(!playing); };
+// roll it back up: a steady rewind to fully rolled, any time
+let rolling = false;
+function setRolling(v) {
+  rolling = v;
+  $('btnRollUp').textContent = v ? 'Stop' : 'Roll up';
+  $('btnRollUp').classList.toggle('on', v);
+}
+$('btnRollUp').onclick = () => {
+  introDone(); autoplayAt = 0;
+  if (rolling) { setRolling(false); return; }
+  if (tearOn) setTear(false);
+  setPlaying(false);
+  if (target > 0.0005) setRolling(true);
+};
 const scrub = $('scrub');
 let scrubbing = false;
 function scrubTo(ev) {
   const r = scrub.getBoundingClientRect();
   setTarget((ev.clientX - r.left) / r.width, 'drag');
 }
-scrub.addEventListener('pointerdown', (e) => { introDone(); autoplayAt = 0; scrubbing = true; setPlaying(false); scrub.setPointerCapture(e.pointerId); scrubTo(e); });
+scrub.addEventListener('pointerdown', (e) => { introDone(); autoplayAt = 0; setRolling(false); scrubbing = true; setPlaying(false); scrub.setPointerCapture(e.pointerId); scrubTo(e); });
 scrub.addEventListener('pointermove', (e) => { if (scrubbing) scrubTo(e); });
 scrub.addEventListener('pointerup', () => { scrubbing = false; setTarget(target, 'drag'); saveHash(); });
 scrub.addEventListener('pointercancel', () => { scrubbing = false; setTarget(target, 'drag'); });
@@ -741,7 +772,7 @@ function pick(clientX, clientY) {
 let hover = null;
 let hoverAt = 0;
 let down = null;
-canvas.addEventListener('pointerdown', (e) => { if (tearOn) return; down = { x: e.clientX, y: e.clientY, t: performance.now() }; });
+canvas.addEventListener('pointerdown', (e) => { if (tearOn || destroyOn) return; down = { x: e.clientX, y: e.clientY, t: performance.now() }; });
 canvas.addEventListener('pointerup', (e) => {
   if (!down || tearOn) return;
   const moved = Math.hypot(e.clientX - down.x, e.clientY - down.y);
@@ -752,7 +783,7 @@ canvas.addEventListener('pointerup', (e) => {
   down = null;
 });
 canvas.addEventListener('pointermove', (e) => {
-  if (MOBILE || e.buttons || tearOn) return;
+  if (MOBILE || e.buttons || tearOn || destroyOn) return;
   const now = performance.now();
   if (now - hoverAt < 70) return;
   hoverAt = now;
@@ -997,14 +1028,114 @@ $('btnShot').onclick = () => {
   }, 'image/png');
 };
 
-$('btnTear').onclick = () => setTear(!tearOn);
-$('btnReset').onclick = () => tear && tear.reset();
-$('btnCrush').onclick = () => {
-  const on = $('btnCrush').getAttribute('aria-pressed') !== 'true';
-  $('btnCrush').setAttribute('aria-pressed', on);
-  $('btnCrush').classList.toggle('on', on);
-  tear && tear.setCrush(on);
-};
+// ---------------------------------------------------------------- Destroy: tear, crush, burn and soak at any unroll amount
+let destroyOn = false, tool = 'tear', act = null;
+function setTool(tl) {
+  tool = tl;
+  for (const b of document.querySelectorAll('.chip.tool')) { const on = b.dataset.tool === tl; b.classList.toggle('on', on); b.setAttribute('aria-pressed', on); }
+  document.body.classList.remove('tool-tear', 'tool-crush', 'tool-burn', 'tool-water');
+  if (destroyOn) document.body.classList.add(`tool-${tl}`);
+  if (tear) tear.setCrush(tl === 'crush');
+}
+function setDestroy(on) {
+  destroyOn = on;
+  $('btnTear').classList.toggle('on', on);
+  $('btnTear').setAttribute('aria-pressed', on);
+  for (const id of ['toolTear', 'btnCrush', 'toolBurn', 'toolWater', 'btnReset', 'btnSandbox', 'btnSound']) $(id).hidden = !on;
+  document.body.classList.toggle('destroy', on);
+  if (!on && tearOn) setTear(false);
+  if (!on) $('btnShake').hidden = true;
+  setTool(tool);
+  if (on) { introDone(); autoplayAt = 0; $('tip').hidden = true; if (hover) { hover.userData.own.uHi.value = 0; hover = null; } }
+}
+$('btnTear').onclick = () => setDestroy(!destroyOn);
+for (const b of document.querySelectorAll('.chip.tool')) b.onclick = () => setTool(b.dataset.tool);
+$('btnSandbox').onclick = () => setTear(!tearOn);
+$('btnReset').onclick = () => { damage.reset(); if (tear) tear.reset(); };
+
+// pick the surface under the pointer: winding, UV on it and world position, through any holes already made
+const pickF = new THREE.WebGLRenderTarget(1, 1, { type: THREE.FloatType });
+const pickFB = new Float32Array(4);
+function pickHit(x, y) {
+  const dpr = renderer.getPixelRatio();
+  camera.setViewOffset(innerWidth * dpr, innerHeight * dpr, x * dpr, y * dpr, 1, 1);
+  for (const m of meshes) m.material = m.userData.pickMat;
+  for (const o of damage.objects) o.visible = false;
+  renderer.setRenderTarget(pickF);
+  renderer.setClearColor(0x000000, 0);
+  shared.uPickW.value = 0;
+  renderer.clear(); renderer.render(scene, camera);
+  renderer.readRenderTargetPixels(pickF, 0, 0, 1, 1, pickFB);
+  const id = Math.round(pickFB[0] * 255), u = pickFB[1], v = pickFB[2];
+  let world = null;
+  if (id) {
+    shared.uPickW.value = 1;
+    renderer.clear(); renderer.render(scene, camera);
+    renderer.readRenderTargetPixels(pickF, 0, 0, 1, 1, pickFB);
+    world = new THREE.Vector3(pickFB[0], pickFB[1], pickFB[2]);
+  }
+  shared.uPickW.value = 0;
+  renderer.setRenderTarget(null);
+  renderer.setClearColor(0x030303, 1);
+  for (const m of meshes) m.material = m.userData.mat;
+  for (const o of damage.objects) o.visible = true;
+  camera.clearViewOffset();
+  return id && meshes[id - 1] ? { m: meshes[id - 1], u, v, world } : null;
+}
+function applyTool(first) {
+  const h = pickHit(act.x, act.y);
+  if (!h) { act.last = null; return; }
+  const now = performance.now();
+  if (act.tool === 'tear') {
+    const l = act.last;
+    if (l && l.m === h.m) {
+      const mm = Math.hypot((h.u - l.u) * h.m.userData.w.widthMM, (h.v - l.v) * h.m.userData.w.heightMM);
+      if (mm < 0.4) return;
+      if (mm < 18) { damage.tear(h.m, l.u, l.v, h.u, h.v); damage.debris(h.world, 0.8, mm > 2 ? 2 : 1, 'tear'); }
+    }
+    act.last = h;
+  } else if (act.tool === 'crush') {
+    // hold to press harder: a wider bite, and as the outer wrap gives way the next pick lands on the wrap beneath
+    const hold = (now - act.t0) / 1000;
+    const r = 1.5 + 1.2 * Math.min(hold, 2.5);
+    damage.crush(h.m, h.u, h.v, r, 0.5 + 0.15 * Math.min(hold, 2));
+    damage.debris(h.world, r, MOBILE ? 2 : 4);
+  } else if (act.tool === 'burn') {
+    if (first) damage.ignite(h.m, h.u, h.v, h.world);
+  } else if (act.tool === 'water') {
+    damage.wetAt(h.m, h.u, h.v, 3.0, first ? 0.45 : 0.22);
+    damage.drops(h.world, first ? 3 : 1);
+  }
+}
+function touchIcon(e) {
+  const d = document.createElement('div');
+  d.className = `touch-pop ${tool}`;
+  d.style.left = `${e.clientX}px`; d.style.top = `${e.clientY}px`;
+  document.body.appendChild(d);
+  setTimeout(() => d.remove(), 650);
+}
+canvas.addEventListener('pointerdown', (e) => {
+  if (!destroyOn || tearOn || e.button > 0) return;
+  act = { tool, x: e.clientX, y: e.clientY, t0: performance.now(), tick: performance.now(), last: null };
+  const h = pickHit(e.clientX, e.clientY);
+  if (!h) { act = null; return; }
+  e.stopImmediatePropagation();
+  controls.enabled = false;
+  canvas.setPointerCapture(e.pointerId);
+  autoplayAt = 0; setPlaying(false); setRolling(false);
+  document.body.classList.add('pressing');
+  if (e.pointerType === 'touch') touchIcon(e);
+  applyTool(true);
+}, true);
+canvas.addEventListener('pointermove', (e) => {
+  if (!act) return;
+  act.x = e.clientX; act.y = e.clientY;
+  if (act.tool === 'tear' && performance.now() - act.tick > 24) { act.tick = performance.now(); applyTool(false); }
+});
+const endAct = () => { if (!act) return; act = null; controls.enabled = true; document.body.classList.remove('pressing'); };
+canvas.addEventListener('pointerup', endAct);
+canvas.addEventListener('pointercancel', endAct);
+document.body.classList.add('js-tools');
 $('btnShake').onclick = () => tear && tear.shake();
 $('btnSound').onclick = () => {
   const on = $('btnSound').getAttribute('aria-pressed') !== 'true';
@@ -1052,6 +1183,12 @@ function frame() {
   }
   if (!intro && autoplayAt && (playing || scrubbing || t > 0)) autoplayAt = 0;
 
+  if (rolling) {
+    setTarget(target - dt / 7, 'play');
+    if (target <= 0) setRolling(false);
+  }
+  if (act && (act.tool === 'crush' || act.tool === 'water') && now - act.tick > (act.tool === 'crush' ? 70 : 90)) { act.tick = now; applyTool(false); }
+  damage.update(dt, shared.uTime.value);
   if (playing) {
     setTarget(target + dt / DURATION, 'play');
     if (target >= 1) setPlaying(false);

damage.js

@@ -0,0 +1,417 @@
+// Destroy mode: damage painted into a high-resolution mask in each winding's UV space, so holes, cracks, embers
+// and wet patches follow the surface as it rolls and unrolls. The visual edge is an alpha test in the fragment
+// shader against that smooth field plus fibre-direction noise (no per-triangle removal, so no staircase).
+// Channels: R missing (crushed, torn, burnt), G cracks, B ember heat, A wetness.
+// Particles (dust, fragments, flakes, smoke, ash, drops, puddles) live in their own capped system.
+
+export const DMG_HEAD = /* glsl */`
+uniform sampler2D uDmg; uniform float uDmgOn; uniform vec2 uDmgMM; uniform float uDmgT;
+float dHash(vec2 p) { return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453); }
+float dNoise(vec2 p) {
+  vec2 i = floor(p), f = fract(p); f = f * f * (3.0 - 2.0 * f);
+  return mix(mix(dHash(i), dHash(i + vec2(1.0, 0.0)), f.x), mix(dHash(i + vec2(0.0, 1.0)), dHash(i + vec2(1.0, 1.0)), f.x), f.y);
+}
+// papyrus fibres run along the sheet: noise stretched along x, fine across y
+float dFib(vec2 mm) {
+  vec2 p = mm * vec2(0.7, 6.5);
+  return 0.5 * dNoise(p) + 0.3 * dNoise(p * 2.13 + 3.7) + 0.2 * dNoise(mm * 6.0 + 11.0);
+}
+`;
+// after the surface normal is known: alpha test against the field
+export const DMG_CUT = /* glsl */`
+  vec4 dd = vec4(0.0); float dTh = 0.0, dFibV = 0.5;
+  if (uDmgOn > 0.5) {
+    dd = texture2D(uDmg, vLocal);
+    dFibV = dFib(vLocal * uDmgMM);
+    dTh = dd.r * 1.08 + (dFibV - 0.5) * 0.55;
+    if (dTh > 0.5) discard;
+  }
+`;
+// before the final colour: charred band, lifted lip and its shadow, cracks, wet gloss, embers
+export const DMG_EDGE = /* glsl */`
+  if (uDmgOn > 0.5) {
+    float charK = smoothstep(0.40, 0.495, dTh);
+    float lipK = smoothstep(0.27, 0.37, dTh) * (1.0 - charK);
+    float shadow = smoothstep(0.38, 0.7, texture2D(uDmg, vLocal + vec2(-0.3, 0.45) / uDmgMM).r) * (1.0 - charK);
+    col *= 1.0 + 0.32 * lipK;
+    col *= 1.0 - 0.5 * shadow;
+    float crack = dd.g * smoothstep(0.35, 0.75, dFibV + dd.g * 0.35);
+    col = mix(col, vec3(0.009, 0.006, 0.005), clamp(charK * 0.92 + crack * 0.9, 0.0, 1.0));
+    float wet = dd.a;
+    col *= 1.0 - 0.6 * wet;
+    vec3 dH = normalize(normalize(vec3(-0.35, 0.75, 0.55)) + normalize(cameraPosition - vW));
+    col += wet * pow(abs(dot(normalize(vN), dH)), 70.0) * vec3(0.6, 0.56, 0.5);
+    float flick = 0.7 + 0.3 * sin(uDmgT * 2.3 + dFibV * 23.0) * sin(uDmgT * 1.1 + dFibV * 7.0);
+    float emb = dd.b * flick;
+    col += vec3(1.0, 0.30, 0.05) * emb * (0.6 + 2.0 * charK) * 1.6;
+  }
+`;
+export function injectFrag(frag, cutAfter) {
+  if (!frag.includes(cutAfter)) throw new Error('damage: shader anchor missing');
+  return DMG_HEAD + frag.replace(cutAfter, cutAfter + DMG_CUT).replace('gl_FragColor = vec4(col, 1.0);', DMG_EDGE + '  gl_FragColor = vec4(col, 1.0);');
+}
+
+export function createDamage({ THREE, scene, meshes, MOBILE, ground, uDmgT }) {
+  const RES = MOBILE ? 1024 : 2048;
+  const masks = new Map();
+  const shared = { uDmgT: uDmgT || { value: 0 } };
+  const own = (m) => m.userData.own;
+  function mask(m) {
+    let k = masks.get(m);
+    if (k) return k;
+    const { w } = m.userData;
+    const W = RES, H = Math.max(64, Math.round((RES * w.heightMM) / w.widthMM));
+    const data = new Uint8Array(W * H * 4);
+    const tex = new THREE.DataTexture(data, W, H, THREE.RGBAFormat);
+    tex.minFilter = tex.magFilter = THREE.LinearFilter;
+    tex.generateMipmaps = false; tex.flipY = false; tex.needsUpdate = true;
+    k = { m, W, H, data, tex, pxmm: W / w.widthMM, dirty: true, embers: [], wet: [], world: null };
+    masks.set(m, k);
+    own(m).uDmg.value = tex; own(m).uDmgOn.value = 1;
+    return k;
+  }
+  const at = (k, u, v, c) => {
+    const x = Math.min(k.W - 1, Math.max(0, Math.round(u * k.W))), y = Math.min(k.H - 1, Math.max(0, Math.round(v * k.H)));
+    return k.data[(y * k.W + x) * 4 + c] / 255;
+  };
+  // a soft elliptical brush, wider along the fibres; amount adds to one channel
+  function blob(k, u, v, rMM, c, amount, aspect = 1.45) {
+    const cx = u * k.W, cy = v * k.H, rx = rMM * k.pxmm * aspect, ry = rMM * k.pxmm;
+    const x0 = Math.max(0, Math.floor(cx - rx)), x1 = Math.min(k.W - 1, Math.ceil(cx + rx));
+    const y0 = Math.max(0, Math.floor(cy - ry)), y1 = Math.min(k.H - 1, Math.ceil(cy + ry));
+    const d = k.data, W = k.W, a = amount * 255;
+    for (let y = y0; y <= y1; y++) {
+      const dy = (y - cy) / ry, dy2 = dy * dy;
+      for (let x = x0; x <= x1; x++) {
+        const dx = (x - cx) / rx, q = dx * dx + dy2;
+        if (q >= 1) continue;
+        const f = (1 - q) * (1 - q);
+        const i = (y * W + x) * 4 + c;
+        d[i] = Math.min(255, d[i] + a * f);
+      }
+    }
+    k.dirty = true;
+  }
+  function line(k, u0, v0, u1, v1, rMM, c, amount, wobble) {
+    const mm = Math.hypot((u1 - u0) * k.W, (v1 - v0) * k.H) / k.pxmm;
+    const n = Math.max(1, Math.ceil(mm / (rMM * 0.6)));
+    const nx = -(v1 - v0) * k.H, ny = (u1 - u0) * k.W, nl = Math.hypot(nx, ny) || 1;
+    for (let i = 0; i <= n; i++) {
+      const f = i / n, j = wobble ? (Math.sin(f * 9.1 + u0 * 50) * 0.6 + (Math.random() - 0.5)) * wobble * k.pxmm : 0;
+      blob(k, u0 + (u1 - u0) * f + (nx / nl) * j / k.W, v0 + (v1 - v0) * f + (ny / nl) * j / k.H, rMM, c, amount, 1.15);
+    }
+  }
+  const mmToUV = (k, dx, dy) => [dx * k.pxmm / k.W, dy * k.pxmm / k.H];
+
+  // ------------------------------------------------------------ tools
+  function crush(m, u, v, rMM, strength) {
+    const k = mask(m);
+    const wet = at(k, u, v, 3);
+    const s = strength * (1 + 1.6 * wet);   // soaked papyrus gives way
+    blob(k, u, v, rMM, 0, 0.95 * s);
+    for (let i = 0; i < 5; i++) {
+      const a = Math.random() * 6.283, r = rMM * (0.5 + Math.random() * 0.6);
+      const [du, dv] = mmToUV(k, Math.cos(a) * r, Math.sin(a) * r * 0.7);
+      blob(k, u + du, v + dv, rMM * (0.35 + Math.random() * 0.35), 0, 0.7 * s);
+    }
+    // radial cracks into the surrounding sheet
+    const nc = 2 + (Math.random() * 3 | 0);
+    for (let i = 0; i < nc; i++) {
+      const a = Math.random() * 6.283, l = rMM * (1.2 + Math.random() * 1.6);
+      const [a0, b0] = mmToUV(k, Math.cos(a) * rMM * 0.7, Math.sin(a) * rMM * 0.7);
+      const [a1, b1] = mmToUV(k, Math.cos(a) * l * 1.4, Math.sin(a) * l * 0.6);
+      line(k, u + a0, v + b0, u + a1, v + b1, 0.22, 1, 0.9, 0.25);
+    }
+  }
+  function tear(m, u0, v0, u1, v1) {
+    const k = mask(m);
+    const wet = at(k, u1, v1, 3);
+    line(k, u0, v0, u1, v1, 0.32 + wet * 0.4, 0, 1.0, 0.35);
+    line(k, u0, v0, u1, v1, 1.1, 1, 0.35, 0.6);
+  }
+  function wetAt(m, u, v, rMM, amount) {
+    const k = mask(m);
+    blob(k, u, v, rMM, 3, amount, 1.25);
+    k.wet.push({ u, v, r: rMM, t: 0 });
+    if (k.wet.length > 200) k.wet.shift();
+    // water puts embers out
+    for (const e of k.embers) if (Math.hypot((e.u - u) * k.W, (e.v - v) * k.H) / k.pxmm < rMM * 1.3) e.life = 0;
+  }
+  let emberCount = 0;
+  const EMAX = MOBILE ? 140 : 360;
+  function ignite(m, u, v, world) {
+    const k = mask(m);
+    k.world = world.clone();
+    k.burnR = 0;
+    for (let i = 0; i < 4; i++) addEmber(k, u, v, 0);
+  }
+  function addEmber(k, u, v, gen) {
+    if (emberCount >= EMAX || u < 0 || v < 0 || u > 1 || v > 1) return;
+    if (at(k, u, v, 3) > 0.35) return;          // too wet to catch
+    if (at(k, u, v, 0) > 0.6) return;            // already gone
+    k.embers.push({ u, v, gen, life: 2.5 + Math.random() * 3.0, age: 0, next: 0.4 + Math.random() * 0.8 });
+    emberCount++;
+  }
+
+  // ------------------------------------------------------------ particles
+  const PMAX = MOBILE ? 700 : 1800;
+  const pPos = new Float32Array(PMAX * 3), pVel = new Float32Array(PMAX * 3), pCol = new Float32Array(PMAX * 4), pSize = new Float32Array(PMAX);
+  const pSleep = new Uint8Array(PMAX), pType = new Uint8Array(PMAX), pLife = new Float32Array(PMAX), pAge = new Float32Array(PMAX), pSeed = new Float32Array(PMAX);
+  let pHead = 0;
+  const pGeo = new THREE.BufferGeometry();
+  pGeo.setAttribute('position', new THREE.BufferAttribute(pPos, 3).setUsage(THREE.DynamicDrawUsage));
+  pGeo.setAttribute('aCol', new THREE.BufferAttribute(pCol, 4).setUsage(THREE.DynamicDrawUsage));
+  pGeo.setAttribute('aSize', new THREE.BufferAttribute(pSize, 1).setUsage(THREE.DynamicDrawUsage));
+  const pMat = new THREE.ShaderMaterial({
+    transparent: true, depthWrite: false,
+    uniforms: { uScale: { value: 400 } },
+    vertexShader: /* glsl */`attribute vec4 aCol; attribute float aSize; uniform float uScale; varying vec4 vC;
+      void main() { vC = aCol; vec4 mv = modelViewMatrix * vec4(position, 1.0); gl_Position = projectionMatrix * mv;
+        gl_PointSize = aCol.a <= 0.0 ? 0.0 : max(1.0, aSize * uScale / -mv.z); }`,
+    fragmentShader: /* glsl */`varying vec4 vC;
+      void main() { float d = length(gl_PointCoord - 0.5) * 2.0; float a = smoothstep(1.0, 0.25, d) * vC.a; if (a < 0.01) discard; gl_FragColor = vec4(vC.rgb, a); }`,
+  });
+  const points = new THREE.Points(pGeo, pMat);
+  points.frustumCulled = false;
+  scene.add(points);
+  // types: 0 dust, 1 ash, 2 smoke, 3 drop, 4 spark
+  function spawnP(type, x, y, z, vx, vy, vz, size, life, r, g, b, a) {
+    const i = pHead++ % PMAX;
+    pSleep[i] = 0; pType[i] = type; pPos[i * 3] = x; pPos[i * 3 + 1] = y; pPos[i * 3 + 2] = z;
+    pVel[i * 3] = vx; pVel[i * 3 + 1] = vy; pVel[i * 3 + 2] = vz;
+    pSize[i] = size; pLife[i] = life; pAge[i] = 0; pSeed[i] = Math.random() * 100;
+    pCol[i * 4] = r; pCol[i * 4 + 1] = g; pCol[i * 4 + 2] = b; pCol[i * 4 + 3] = a;
+  }
+  // fragments and flakes: tumbling instanced shards
+  const FMAX = MOBILE ? 220 : 600;
+  const shard = new THREE.BufferGeometry();
+  {
+    const v = [0, 0, 0], n = 6;
+    for (let i = 0; i <= n; i++) { const a = (i / n) * 6.283, r = 0.5 * (0.6 + 0.4 * Math.abs(Math.sin(i * 2.7 + 1.3))); v.push(Math.cos(a) * r, Math.sin(a) * r * 0.7, (i % 2) * 0.06); }
+    const idx = []; for (let i = 1; i <= n; i++) idx.push(0, i, i + 1);
+    shard.setAttribute('position', new THREE.Float32BufferAttribute(v, 3)); shard.setIndex(idx); shard.computeVertexNormals();
+  }
+  const fMesh = new THREE.InstancedMesh(shard, new THREE.MeshStandardMaterial({ color: 0x2a1d14, roughness: 0.9, metalness: 0, side: THREE.DoubleSide }), FMAX);
+  fMesh.instanceMatrix.setUsage(THREE.DynamicDrawUsage);
+  fMesh.frustumCulled = false;
+  fMesh.count = 0;
+  scene.add(fMesh);
+  const light = new THREE.HemisphereLight(0xfff0dd, 0x221810, 1.6);
+  scene.add(light);
+  const fPos = new Float32Array(FMAX * 3), fVel = new Float32Array(FMAX * 3), fRot = new Float32Array(FMAX * 3), fSpin = new Float32Array(FMAX * 3);
+  const fSize = new Float32Array(FMAX), fAge = new Float32Array(FMAX), fRest = new Uint8Array(FMAX), fLive = new Uint8Array(FMAX);
+  let fHead = 0;
+  function spawnF(x, y, z, vx, vy, vz, size) {
+    const i = fHead++ % FMAX;
+    fLive[i] = 1; fRest[i] = 0; fAge[i] = 0; fSize[i] = size;
+    fPos[i * 3] = x; fPos[i * 3 + 1] = y; fPos[i * 3 + 2] = z;
+    fVel[i * 3] = vx; fVel[i * 3 + 1] = vy; fVel[i * 3 + 2] = vz;
+    for (let c = 0; c < 3; c++) { fRot[i * 3 + c] = Math.random() * 6.3; fSpin[i * 3 + c] = (Math.random() - 0.5) * 14; }
+    fMesh.count = Math.max(fMesh.count, Math.min(FMAX, fHead));
+  }
+  // puddles on the floor
+  const QMAX = 40;
+  const qMesh = new THREE.InstancedMesh(new THREE.CircleGeometry(1, 28).rotateX(-Math.PI / 2),
+    new THREE.MeshStandardMaterial({ color: 0x0b0d10, roughness: 0.08, metalness: 0.2, transparent: true, opacity: 0.85 }), QMAX);
+  qMesh.frustumCulled = false; qMesh.count = 0;
+  scene.add(qMesh);
+  const puddles = [];
+  function feedPuddle(x, z, vol) {
+    let p = puddles.find((q) => Math.hypot(q.x - x, q.z - z) < q.r + 3);
+    if (!p) { if (puddles.length >= QMAX) puddles.shift(); p = { x, z, vol: 0, r: 0 }; puddles.push(p); }
+    p.vol += vol;
+  }
+
+  // the debris a hit makes, by size: fine dust hangs, fragments flutter, flakes drop
+  function debris(world, rMM, n, kind = 'crush') {
+    const { x, y, z } = world;
+    for (let i = 0; i < n; i++) {
+      const a = Math.random() * 6.283, r = Math.random() * rMM;
+      const big = Math.random() < 0.25;
+      spawnF(x + Math.cos(a) * r, y + Math.sin(a) * r * 0.6, z + 0.4,
+        Math.cos(a) * (20 + Math.random() * 50), 10 + Math.random() * 40, 20 + Math.random() * 50,
+        big ? 1.1 + Math.random() * 1.5 : 0.35 + Math.random() * 0.6);
+    }
+    const nd = kind === 'tear' ? n * 2 : n * 5;
+    for (let i = 0; i < nd; i++) {
+      const a = Math.random() * 6.283, sp = 15 + Math.random() * 35;   // a little puff outward
+      const c = 0.10 + Math.random() * 0.06;
+      spawnP(0, x + (Math.random() - 0.5) * rMM, y + (Math.random() - 0.5) * rMM, z + 0.5,
+        Math.cos(a) * sp, Math.sin(a) * sp * 0.6 + 6, 8 + Math.random() * 25, 0.25 + Math.random() * 0.5, 5 + Math.random() * 4, c * 1.25, c * 0.95, c * 0.75, 0.75);
+    }
+  }
+  function drops(world, n) {
+    for (let i = 0; i < n; i++) {
+      const x = world.x + (Math.random() - 0.5) * 3, z = world.z + (Math.random() - 0.5) * 3;
+      spawnP(3, x, world.y + 25 + Math.random() * 20, z, 0, -60, 0, 0.9 + Math.random() * 0.5, 3, 0.55, 0.65, 0.75, 0.9);
+      if (Math.random() < 0.5) spawnP(3, x, world.y - 1, z, 0, -5, 0, 0.7, 4, 0.45, 0.55, 0.65, 0.85);   // drips off the sheet
+    }
+  }
+
+  // ------------------------------------------------------------ update
+  const tmpM = new THREE.Matrix4(), tmpQ = new THREE.Quaternion(), tmpE = new THREE.Euler(), tmpS = new THREE.Vector3(), tmpP = new THREE.Vector3();
+  let burnTick = 0, wetTick = 0, upTick = 0, decayTick = 0;
+  function update(dt, time) {
+    shared.uDmgT.value = time;
+    // burning: slow ember creep, faster along the fibres, char behind it, smoke and ash above
+    burnTick += dt;
+    if (burnTick > 0.1) {
+      const h = burnTick; burnTick = 0;
+      for (const k of masks.values()) {
+        if (!k.embers.length) continue;
+        const keep = [];
+        for (const e of k.embers) {
+          e.age += h; e.life -= h; e.next -= h;
+          blob(k, e.u, e.v, 0.9, 2, 0.20 * h * 10 * 0.12);
+          blob(k, e.u, e.v, 0.7, 0, 0.05 * h * 10 * 0.1 + (e.age > 1.5 ? 0.03 : 0));
+          if (e.next <= 0 && e.gen < 40) {
+            e.next = 0.6 + Math.random() * 1.0;
+            const along = Math.random() < 0.7, s = 0.6 + Math.random() * 0.8, a = Math.random() < 0.5 ? -1 : 1;
+            const [du, dv] = mmToUV(k, along ? a * s * 1.4 : (Math.random() - 0.5) * s, along ? (Math.random() - 0.5) * s * 0.4 : a * s * 0.7);
+            if (Math.random() < 0.93 - e.gen * 0.012) addEmber(k, e.u + du, e.v + dv, e.gen + 1);
+          }
+          if (e.life > 0) keep.push(e);
+          else { blob(k, e.u, e.v, 1.0, 0, 0.55); emberCount--; if (k.world && Math.random() < 0.5) spawnF(k.world.x + (Math.random() - 0.5) * 6, k.world.y + (Math.random() - 0.5) * 4, k.world.z + 0.3, (Math.random() - 0.5) * 10, 5, 4, 0.3 + Math.random() * 0.4); }
+        }
+        k.embers = keep;
+        if (k.world && keep.length) {
+          const spread = Math.min(20, 2 + Math.sqrt(keep.length) * 0.9);
+          for (let i = 0; i < Math.min(3, keep.length / 6 + 1); i++) {
+            const g = 0.16 + Math.random() * 0.1;
+            spawnP(2, k.world.x + (Math.random() - 0.5) * spread, k.world.y + (Math.random() - 0.5) * spread * 0.6, k.world.z + 1,
+              (Math.random() - 0.5) * 6, 8 + Math.random() * 6, 4 + Math.random() * 4, 2.5 + Math.random() * 2, 4 + Math.random() * 2, g, g * 0.95, g * 0.9, 0.35);
+          }
+          if (Math.random() < 0.6) spawnP(1, k.world.x + (Math.random() - 0.5) * spread, k.world.y + (Math.random() - 0.5) * spread * 0.6, k.world.z + 1,
+            (Math.random() - 0.5) * 8, 12 + Math.random() * 10, 3, 0.5 + Math.random() * 0.6, 6, 0.32, 0.30, 0.28, 0.85);
+          if (Math.random() < 0.25) spawnP(4, k.world.x + (Math.random() - 0.5) * spread, k.world.y, k.world.z + 1, (Math.random() - 0.5) * 10, 25 + Math.random() * 15, 3, 0.25, 1.2, 1.0, 0.45, 0.1, 1.0);
+        }
+      }
+    }
+    // ember glow cools where nothing burns any more
+    decayTick += dt;
+    if (decayTick > 0.25) {
+      const f = Math.exp(-decayTick * 0.6); decayTick = 0;
+      for (const k of masks.values()) {
+        if (!k.hot && !k.embers.length) continue;
+        const d = k.data; let any = false;
+        for (let i = 2; i < d.length; i += 4) if (d[i]) { d[i] = d[i] * f; any = true; }
+        k.hot = any; k.dirty = true;
+      }
+    }
+    // soaked spots slowly dissolve and delaminate
+    wetTick += dt;
+    if (wetTick > 0.4) {
+      wetTick = 0;
+      for (const k of masks.values()) for (const w of k.wet) {
+        w.t += 0.4;
+        if (w.t < 2.5 || at(k, w.u, w.v, 3) < 0.55 || Math.random() > 0.35) continue;
+        const a = Math.random() * 6.283, r = Math.random() * w.r * 0.8;
+        const [du, dv] = mmToUV(k, Math.cos(a) * r, Math.sin(a) * r);
+        blob(k, w.u + du, w.v + dv, 0.5 + Math.random() * 0.6, 0, 0.12);
+        if (Math.random() < 0.3) blob(k, w.u + du, w.v + dv, 1.2, 1, 0.15);
+      }
+    }
+    // texture uploads, throttled
+    upTick += dt;
+    if (upTick > (MOBILE ? 0.09 : 0.05)) {
+      upTick = 0;
+      for (const k of masks.values()) if (k.dirty) { k.tex.needsUpdate = true; k.dirty = false; }
+    }
+    stepParticles(dt, time);
+  }
+  function stepParticles(dt, time) {
+    const G = ground();
+    for (let i = 0; i < PMAX; i++) {
+      if (pCol[i * 4 + 3] <= 0) continue;
+      pAge[i] += dt;
+      const t = pType[i], o = i * 3, life = pLife[i];
+      if (pAge[i] > life) { pCol[i * 4 + 3] = 0; continue; }
+      if (pSleep[i]) {   // landed: asleep on the floor, only fading
+        pCol[i * 4 + 3] = Math.min(pCol[i * 4 + 3], Math.max(0, 1 - pAge[i] / life) * 0.9);
+        continue;
+      }
+      let g, k, turb;
+      if (t === 0) { g = 22; k = 3.2; turb = 10; }          // dust: terminal velocity about 7 mm/s
+      else if (t === 1) { g = 6; k = 1.6; turb = 12; }      // ash: warm air carries it up first
+      else if (t === 2) { g = -14; k = 1.1; turb = 14; }    // smoke rises
+      else if (t === 3) { g = 520; k = 0.3; turb = 0; }     // water drops
+      else { g = 40; k = 1.2; turb = 6; }                   // sparks
+      const x = pPos[o], y = pPos[o + 1], z = pPos[o + 2], s = pSeed[i], tt = time * 0.8;
+      const tx = Math.sin(0.11 * y + tt + s) + Math.sin(0.09 * z - 0.7 * tt + 1.3);
+      const ty = Math.sin(0.10 * z + 0.6 * tt + 2.1 + s) + Math.sin(0.12 * x - 0.8 * tt);
+      const tz = Math.sin(0.1 * x + 0.75 * tt + 0.7) + Math.sin(0.09 * y + 0.5 * tt + 3.0 + s);
+      const e = Math.exp(-k * dt);
+      pVel[o] = pVel[o] * e + tx * turb * dt;
+      pVel[o + 1] = pVel[o + 1] * e + (ty * turb * 0.6 - g) * dt;
+      pVel[o + 2] = pVel[o + 2] * e + tz * turb * dt;
+      pPos[o] += pVel[o] * dt; pPos[o + 1] += pVel[o + 1] * dt; pPos[o + 2] += pVel[o + 2] * dt;
+      const fade = 1 - pAge[i] / life;
+      // guard: anything broken is recycled
+      if (!Number.isFinite(pPos[o] + pPos[o + 1] + pPos[o + 2] + pVel[o] + pVel[o + 1] + pVel[o + 2])) { pCol[i * 4 + 3] = 0; continue; }
+      if (pPos[o + 1] <= G) {
+        if (t === 3) { feedPuddle(pPos[o], pPos[o + 2], 1); pCol[i * 4 + 3] = 0; continue; }
+        if (t === 2 || t === 4) { pCol[i * 4 + 3] = 0; continue; }
+        // dust and ash land: snap to the floor, stop, sleep
+        pPos[o + 1] = G + 0.05; pVel[o] = pVel[o + 1] = pVel[o + 2] = 0; pSleep[i] = 1;
+        pLife[i] = pAge[i] + 6 + Math.random() * 4;
+        continue;
+      }
+      if (t === 2) { pSize[i] += dt * 2.2; pCol[i * 4 + 3] = 0.32 * fade * Math.min(1, pAge[i] * 3); }
+      else if (t === 4) pCol[i * 4 + 3] = fade;
+      else if (t !== 3) pCol[i * 4 + 3] = Math.min(0.8, fade * 1.6) * (t === 0 ? 0.75 : 0.9);
+    }
+    pGeo.attributes.position.needsUpdate = pGeo.attributes.aCol.needsUpdate = pGeo.attributes.aSize.needsUpdate = true;
+    // fragments flutter and tumble with lift; big flakes drop
+    for (let i = 0; i < fMesh.count; i++) {
+      const o = i * 3;
+      if (!fLive[i]) { tmpM.makeScale(0, 0, 0); fMesh.setMatrixAt(i, tmpM); continue; }
+      fAge[i] += dt;
+      if (!Number.isFinite(fPos[o] + fPos[o + 1] + fPos[o + 2])) { fLive[i] = 0; continue; }
+      if (!fRest[i]) {
+        const big = fSize[i] > 1.0;
+        const g = big ? 380 : 160, k = big ? 0.6 : 3.0;
+        const tilt = Math.abs(Math.sin(fRot[o])), flut = big ? 0 : 55;
+        const e = Math.exp(-k * (1 + 1.5 * tilt) * dt);
+        fVel[o] = fVel[o] * e + Math.sin(fAge[i] * 7 + i) * flut * dt;
+        fVel[o + 1] = fVel[o + 1] * e - g * dt;
+        fVel[o + 2] = fVel[o + 2] * e + Math.cos(fAge[i] * 5.3 + i) * flut * 0.6 * dt;
+        for (let c = 0; c < 3; c++) { fPos[o + c] += fVel[o + c] * dt; fRot[o + c] += fSpin[o + c] * dt; }
+        if (fPos[o + 1] < ground() + 0.1) { fPos[o + 1] = ground() + 0.1; fRest[i] = 1; fRot[o] = Math.PI / 2 + (Math.random() - 0.5) * 0.3; }
+      }
+      const fadeS = fAge[i] > 25 ? Math.max(0, 1 - (fAge[i] - 25) / 5) : 1;
+      if (fadeS <= 0) fLive[i] = 0;
+      tmpE.set(fRot[o], fRot[o + 1], fRot[o + 2]);
+      tmpQ.setFromEuler(tmpE);
+      tmpS.setScalar(fSize[i] * fadeS);
+      tmpP.set(fPos[o], fPos[o + 1], fPos[o + 2]);
+      tmpM.compose(tmpP, tmpQ, tmpS);
+      fMesh.setMatrixAt(i, tmpM);
+    }
+    fMesh.instanceMatrix.needsUpdate = true;
+    // puddles spread and slowly soak away
+    const G2 = ground() + 0.05;
+    qMesh.count = puddles.length;
+    puddles.forEach((p, i) => {
+      p.vol *= Math.exp(-dt * 0.02);
+      const want = Math.sqrt(p.vol) * 1.4;
+      p.r += (want - p.r) * Math.min(1, dt * 2);
+      tmpM.compose(tmpP.set(p.x, G2, p.z), tmpQ.identity(), tmpS.set(p.r, 1, p.r * 0.8));
+      qMesh.setMatrixAt(i, tmpM);
+    });
+    qMesh.instanceMatrix.needsUpdate = true;
+  }
+
+  function reset() {
+    for (const k of masks.values()) { own(k.m).uDmgOn.value = 0; own(k.m).uDmg.value = blankTex; k.tex.dispose(); }
+    masks.clear();
+    emberCount = 0;
+    pCol.fill(0); fLive.fill(0); fMesh.count = 0; fHead = 0; puddles.length = 0; qMesh.count = 0;
+  }
+  const blankTex = new THREE.DataTexture(new Uint8Array(4), 1, 1); blankTex.needsUpdate = true;
+  const stats = () => ({ masks: masks.size, embers: emberCount, particles: [...pCol].filter((_, i) => i % 4 === 3).filter((a) => a > 0).length, shards: fLive.reduce((a, b) => a + b, 0), puddles: puddles.length });
+  // map a material-space hit (mm) from the flat sandbox onto the same mask
+  function crushMM(m, xMM, yMM, rMM) { const w = m.userData.w; crush(m, xMM / w.widthMM, yMM / w.heightMM, rMM, 1.0); }
+  function tearMM(m, ax, ay, bx, by) { const w = m.userData.w; const k = mask(m); line(k, ax / w.widthMM, ay / w.heightMM, bx / w.widthMM, by / w.heightMM, 0.28, 0, 0.75, 0.3); line(k, ax / w.widthMM, ay / w.heightMM, bx / w.widthMM, by / w.heightMM, 0.8, 1, 0.3, 0.4); }
+  const objects = [points, fMesh, qMesh];
+  return { objects, shared, blankTex, crush, tear, wetAt, ignite, debris, drops, update, reset, stats, crushMM, tearMM, wetness: (m, u, v) => (masks.has(m) ? at(masks.get(m), u, v, 3) : 0), dust: (x, y, z) => debris({ x, y, z }, 1.5, 0, 'tear') || spawnP(0, x, y, z, (Math.random() - 0.5) * 30, 8 + Math.random() * 12, 8 + Math.random() * 15, 0.3 + Math.random() * 0.4, 6, 0.13, 0.1, 0.08, 0.75) };
+}

index.html

@@ -94,9 +94,13 @@ if (!/(^|[#&])s=/.test(location.hash)) ['scrolls/index.json', 'scrolls/PHerc0139
   <p class="layer-hint" id="layerHint" aria-live="polite">Published ink (2.4 µm): Vesuvius Challenge detection, 2.4 µm scan, all windings.</p>
   <details class="layer-why" id="layerWhy"><summary>Why two ink layers?</summary><p>Published ink is the Vesuvius Challenge result on the fine 2.4 µm scan. Our ink model (9 µm) is the open ink_9um model run by us on a scan about 4x coarser, so it is blurrier. It shows what an open model can recover from cheaper scans, as a baseline you can check.</p></details>
   <div class="seg tear-seg">
-    <button class="chip" id="btnTear" aria-pressed="false" title="Rip the carbonized papyrus: brittle, layered and fused like the real scrolls. Just for fun, not a real unrolling.">Tear apart</button>
-    <button class="chip" id="btnReset" hidden title="Put every sheet back">Reset</button>
-    <button class="chip" id="btnCrush" hidden aria-pressed="false" title="Press or drag to mash the papyrus into flakes, crumbs and dust">Crush</button>
+    <button class="chip" id="btnTear" aria-pressed="false" title="Destroy: tear, crush, burn or soak the scroll, rolled up or unrolled. Damage stays as you roll and unroll. Just for fun, not a real unrolling. (T)">Destroy</button>
+    <button class="chip tool" id="toolTear" data-tool="tear" hidden aria-pressed="false" title="Drag across the papyrus to rip it (X)">Tear</button>
+    <button class="chip tool" id="btnCrush" data-tool="crush" hidden aria-pressed="false" title="Press to crumble it; hold to press harder and go deeper into the roll (C)">Crush</button>
+    <button class="chip tool" id="toolBurn" data-tool="burn" hidden aria-pressed="false" title="Click to ignite: embers creep slowly along the fibres (B)">Burn</button>
+    <button class="chip tool" id="toolWater" data-tool="water" hidden aria-pressed="false" title="Press or hold to drip and pour water: it darkens, softens, weakens and slowly dissolves the papyrus (W)">Water</button>
+    <button class="chip" id="btnReset" hidden title="Undo all damage and clear the debris">Reset</button>
+    <button class="chip" id="btnSandbox" hidden aria-pressed="false" title="Lay the strip flat with full fracture physics: grab to rip, Crush to crumble">Sandbox</button>
     <button class="chip" id="btnShake" hidden title="Knock the table: loosens random bits">Shake</button>
     <button class="chip" id="btnSound" hidden aria-pressed="false" title="Soft crackle when it breaks">Sound off</button>
   </div>
@@ -121,6 +125,7 @@ if (!/(^|[#&])s=/.test(location.hash)) ['scrolls/index.json', 'scrolls/PHerc0139
   <button id="play" class="play" aria-label="Unroll">
     <svg viewBox="0 0 24 24" width="16" height="16" id="playIcon"><path d="M7 5l12 7-12 7z" fill="currentColor"/></svg>
   </button>
+  <button id="btnRollUp" class="chip roll-up" title="Roll it back up (U)">Roll up</button>
   <div class="scrub" id="scrub">
     <input type="range" id="scrubIn" class="scrub-in" min="0" max="1000" step="1" value="0" aria-label="Unroll position">
     <div class="ticks" id="ticks"></div>

tear.js

@@ -1,3 +1,4 @@
+import { DMG_HEAD as DMG_HEAD_T, DMG_CUT as DMG_CUT_T, DMG_EDGE as DMG_EDGE_T } from './damage.js';
 // "Tear apart": a just-for-fun brittle fracture toy on top of the unrolled strip.
 // Not a real unrolling. Position based dynamics (Verlet + distance constraints) on typed arrays,
 // with real cracks: a crack is a jagged polyline in the sheet's own material space that grows from
@@ -48,7 +49,7 @@ const P = {
 };
 
 export function createTear(ctx) {
-  const { THREE, scene, camera, controls, canvas, meshes, shared, FRAG, stripZ, ctImage } = ctx;
+  const { THREE, scene, camera, controls, canvas, meshes, shared, FRAG, stripZ, ctImage, damage } = ctx;
   const MOBILE = ctx.MOBILE;
   const cell = MOBILE ? P.cellMobile : P.cell;
 
@@ -192,7 +193,7 @@ void main() {
     .replace('gl_FragColor = vec4(col, 1.0);',
       'col = mix(col, papy * 0.8 + vec3(0.03, 0.022, 0.015), vStrand * 0.7);\n  col = mix(col, vec3(0.022, 0.016, 0.012) * (0.6 + 0.4 * diff), vRim);\n  gl_FragColor = vec4(col, 1.0);');
   // verso: matte brown-black charcoal with a faint sheen, fibres from the CT
-  const VERSO = /* glsl */`
+  const VERSO = DMG_HEAD_T + /* glsl */`
 uniform sampler2D uCT; uniform vec4 uAtlas;
 varying vec2 vLocal; varying vec3 vN; varying vec3 vW; varying float vRim; varying float vStrand;
 void main() {
@@ -200,18 +201,20 @@ void main() {
   float ct = texture2D(uCT, auv).r;
   if (ct < 0.012 && vRim < 0.5) discard;
   vec3 n = normalize(vN), v = normalize(cameraPosition - vW), l = normalize(vec3(-0.35, 0.75, 0.55));
+${DMG_CUT_T}
   float diff = 0.25 + 0.75 * abs(dot(n, l));
   float spec = pow(max(dot(reflect(-l, n * sign(dot(n, v))), v), 0.0), 24.0) * 0.10;
   vec3 col = mix(vec3(0.018, 0.013, 0.010), vec3(0.16, 0.11, 0.075), pow(ct, 1.4)) * diff + spec;
   col = mix(col, col * 1.25 + vec3(0.02, 0.014, 0.01), vStrand);
   col = mix(col, vec3(0.012, 0.009, 0.007) * (0.6 + 0.4 * diff), vRim);
+${DMG_EDGE_T}
   gl_FragColor = vec4(col, 1.0);
 }`;
   const mats = (s, L) => {
     const own = s.m.userData.own;
     return L === 0
-      ? new THREE.ShaderMaterial({ uniforms: { ...shared, uAtlas: own.uAtlas, uGpuTex: own.uGpuTex, uGpuOn: own.uGpuOn, uHi: { value: 0 } }, vertexShader: VERT, fragmentShader: RECTO, side: THREE.DoubleSide })
-      : new THREE.ShaderMaterial({ uniforms: { uCT: shared.uCT, uAtlas: own.uAtlas }, vertexShader: VERT, fragmentShader: VERSO, side: THREE.DoubleSide });
+      ? new THREE.ShaderMaterial({ uniforms: { ...shared, uAtlas: own.uAtlas, uGpuTex: own.uGpuTex, uGpuOn: own.uGpuOn, uHi: { value: 0 }, uDmg: own.uDmg, uDmgOn: own.uDmgOn, uDmgMM: own.uDmgMM }, vertexShader: VERT, fragmentShader: RECTO, side: THREE.DoubleSide })
+      : new THREE.ShaderMaterial({ uniforms: { uCT: shared.uCT, uAtlas: own.uAtlas, uDmg: own.uDmg, uDmgOn: own.uDmgOn, uDmgMM: own.uDmgMM, uDmgT: shared.uDmgT }, vertexShader: VERT, fragmentShader: VERSO, side: THREE.DoubleSide });
   };
   // coarse mesh: the physics grid itself, used until a sheet cracks
   for (const s of sheets) for (const lay of s.lay) {
@@ -530,6 +533,7 @@ void main() {
     if (!s.cracked) { s.cracked = true; for (const l of s.lay) makeFine(l); }
     if (!lay.seg) { lay.seg = new Float32Array(4096); lay.nseg = 0; lay.hash = []; }
     if (lay.nseg * 4 + 4 > lay.seg.length) { const g = new Float32Array(lay.seg.length * 2); g.set(lay.seg); lay.seg = g; }
+    if (damage && lay.L === 0) damage.tearMM(s.m, ax, ay, bx, by);   // ragged, fibrous lips along the cut
     const id = lay.nseg++, o = id * 4;
     lay.seg[o] = ax; lay.seg[o + 1] = ay; lay.seg[o + 2] = bx; lay.seg[o + 3] = by;
     hashCells(s, ax, ay, bx, by, 0, (c) => { (lay.hash[c] ||= []).push(id); });
@@ -777,6 +781,7 @@ void main() {
       const o = k * 3, f = Math.exp(-1.8 * dt);
       dv[o] *= f; dv[o + 1] *= f; dv[o + 2] *= f;
       dp[o] += dv[o] * dt; dp[o + 1] += dv[o + 1] * dt; dp[o + 2] += dv[o + 2] * dt;
+      if (dp[o + 1] < ground) { dp[o + 1] = ground; dv[o] = dv[o + 1] = dv[o + 2] = 0; }   // never through the floor
       if (dl[k] <= 0) dp[o + 1] = -1e5;
     }
     flakeGeo.attributes.position.needsUpdate = true;
@@ -1149,6 +1154,7 @@ void main() {
     crumbs.instanceMatrix.needsUpdate = true;
   }
   function spawnDust(x, y, z) {
+    if (damage) { damage.dust(x, y, z); return; }   // size-dependent drag and drift, shared with the rolled view
     const k = dHead++ % DU;
     dp[k * 3] = x; dp[k * 3 + 1] = y; dp[k * 3 + 2] = z + 0.5;
     dv[k * 3] = (Math.random() - 0.5) * 30; dv[k * 3 + 1] = 8 + Math.random() * 20; dv[k * 3 + 2] = 10 + Math.random() * 25;
@@ -1164,17 +1170,10 @@ void main() {
     const R0 = 2.0 + Math.random() * 1.6;
     const ph1 = Math.random() * 6.3, ph2 = Math.random() * 6.3;
     const rAt = (a) => R0 * (0.78 + 0.16 * Math.sin(3 * a + ph1) + 0.1 * Math.sin(7 * a + ph2) + 0.06 * Math.random());
-    // remove the ragged disc from the render mesh (triangle granularity gives a crumbly edge)
-    let removed = 0;
-    hashCells(s, hx - R0 * 1.2, hy - R0 * 1.2, hx + R0 * 1.2, hy + R0 * 1.2, 0, (c) => {
-      for (const t of F.cellTris[c]) {
-        if (F.kd[t] === 3) continue;
-        const dx = F.ref[t * 2] - hx, dy = F.ref[t * 2 + 1] - hy;
-        if (dx * dx + dy * dy < rAt(Math.atan2(dy, dx)) ** 2) { F.kd[t] = 3; removed++; }
-      }
-    });
-    if (!removed) return 0;
-    F.attrsDirty = true;
+    // the visible hole is drawn by the damage mask in UV space: a smooth, fibrous edge with no triangle staircase.
+    // physics stays separate: the nodes inside still let go below
+    if (damage) damage.crushMM(s.m, hx, hy, R0 * 1.15);
+    const removed = Math.round((Math.PI * R0 * R0) / (P.renderCell * P.renderCell * 0.5));
     // physics: nodes inside are gone; their links let go, the rim is free to flake further
     for (let i = 0; i < s.R; i++) for (let j = 0; j < s.C; j++) {
       const n = node(s, lay.L, i, j);