vireglass 3.1.1 → 3.2.1

package/README.md

@@ -153,6 +153,10 @@ glass.setMorph({ smoothing: 34, shape: { offsetX: 150, offsetY: -78, width: 170,
 Two shapes joined through the smooth union — §5's merging and splitting. What the shapes mean is
 your choreography; the material only knows how two silhouettes join.
 
+`glass.setAppear(t)` brings the element in and out by how much light it bends, not by opacity. The
+maps are baked once at full presence and appear is written in place on the filter, so driving it
+every frame costs no bake and no new filter, at rest or interim.
+
 ### Morphing elements
 
 ```ts
@@ -168,7 +172,7 @@ backdrop probe, a full-resolution displacement map (and spectral map) and a new
 That is the difference between 60 fps and 10 to 20. While interim, the element does none of it: it
 reuses its last sample, keeps its filter, and the browser stretches the existing map over the live
 box. The body, rim, shadow and custom properties still update every frame. A change of the morph
-shapes passed to `setMorph`, of `setAppear` or of the system accessibility settings rebuilds the map
+shapes passed to `setMorph` or of the system accessibility settings rebuilds the map
 at reduced resolution and shows it in place, where the browser decodes lazily only once it has been
 decoded. `setInterim(false)` does one full-resolution rebuild and one probe (with a supplied
 `sample` it does not probe). Repeating `setInterim(false)` is a no-op.

package/dist/dom.cjs

@@ -579,13 +579,15 @@ function bevelProfile(t) {
   const raw = Math.min(t / Math.sqrt(Math.max(1 - t * t * BEVEL.sphere, BEVEL.floor)), BEVEL.slopeMax);
   return raw / BEVEL.slopeMax;
 }
+function displacementScale(optics, geometry) {
+  return Math.min(optics.refraction * thicknessDp(geometry, optics) * SCALE_GAIN, MAX_SCALE);
+}
 function renderDisplacementPixels(optics, geometry, dpr, state = {}) {
   const bevel = bevelDp(geometry, optics);
   const density = mapDensity(geometry, bevel, dpr);
   const width = Math.max(1, Math.round(geometry.width * density));
   const height = Math.max(1, Math.round(geometry.height * density));
-  const rawScale = optics.refraction * thicknessDp(geometry, optics) * SCALE_GAIN;
-  const scale = Math.min(rawScale, MAX_SCALE);
+  const scale = displacementScale(optics, geometry);
   const smoothing = state.smoothing ?? 0;
   const shapes = [state.morph, state.morph2, ...state.morphs ?? []];
   const data = new Uint8ClampedArray(width * height * 4);
@@ -709,6 +711,18 @@ function mapDensity2(bevel, dpr) {
   if (bevel <= 0) return dpr;
   return Math.min(dpr, BEVEL_SAMPLES2 / bevel);
 }
+var DEPTH_STEPS = 2048;
+function hueAlongDepth(bevel, rim, thick, optics) {
+  const table = new Float64Array((DEPTH_STEPS + 1) * 3);
+  for (let k = 0; k <= DEPTH_STEPS; k += 1) {
+    const s = k / DEPTH_STEPS;
+    const [r, g, b] = spectralHue(s * s * bevel, bevel, rim, thick, optics);
+    table[k * 3] = r;
+    table[k * 3 + 1] = g;
+    table[k * 3 + 2] = b;
+  }
+  return table;
+}
 function renderSpectralPixels(optics, geometry, dpr) {
   const bevel = bevelDp(geometry, optics);
   const density = mapDensity2(bevel, dpr);
@@ -720,24 +734,28 @@ function renderSpectralPixels(optics, geometry, dpr) {
   const halfW = geometry.width / 2;
   const halfH = geometry.height / 2;
   const neutral = Math.round(1 / HEADROOM * 255);
+  const table = hueAlongDepth(bevel, rim, thick, optics);
+  const toByte = 255 / HEADROOM;
+  new Uint32Array(data.buffer).fill(new Uint32Array(new Uint8ClampedArray([neutral, neutral, neutral, 255]).buffer)[0]);
+  const corner = Math.max(geometry.cornerRadius, bevel);
   for (let py = 0; py < height; py += 1) {
     const y = (py + 0.5) / density - halfH;
+    const ay = Math.abs(y);
+    const plain = Math.max(ay <= halfH - bevel ? halfW - corner : -1, ay <= halfH - corner ? halfW - bevel : -1);
     for (let px = 0; px < width; px += 1) {
       const x = (px + 0.5) / density - halfW;
+      if (Math.abs(x) <= plain) continue;
       const i = (py * width + px) * 4;
       const sd = sdfRoundedRect(x, y, geometry.width, geometry.height, geometry.cornerRadius);
       const e = Math.max(-sd, 0);
-      if (e >= bevel) {
-        data[i] = neutral;
-        data[i + 1] = neutral;
-        data[i + 2] = neutral;
-        data[i + 3] = 255;
-        continue;
-      }
-      const [r, g, b] = spectralHue(e, bevel, rim, thick, optics);
-      data[i] = Math.round(r / HEADROOM * 255);
-      data[i + 1] = Math.round(g / HEADROOM * 255);
-      data[i + 2] = Math.round(b / HEADROOM * 255);
+      if (e >= bevel) continue;
+      const u = Math.sqrt(e / bevel) * DEPTH_STEPS;
+      const k = Math.min(Math.floor(u), DEPTH_STEPS - 1);
+      const f = u - k;
+      const at = k * 3;
+      data[i] = Math.round((table[at] + (table[at + 3] - table[at]) * f) * toByte);
+      data[i + 1] = Math.round((table[at + 1] + (table[at + 4] - table[at + 1]) * f) * toByte);
+      data[i + 2] = Math.round((table[at + 2] + (table[at + 5] - table[at + 2]) * f) * toByte);
       data[i + 3] = 255;
     }
   }
@@ -1807,6 +1825,9 @@ function getFilterHost(host) {
   (host instanceof ShadowRoot ? host : host.body).appendChild(svg);
   return svg;
 }
+function writeAttr(node, name, value) {
+  if (node.getAttribute(name) !== value) node.setAttribute(name, value);
+}
 function buildFilterElement(id, mapUrl, optics, scale, spectral) {
   const filter = document.createElementNS(SVG_NS, "filter");
   filter.setAttribute("id", id);
@@ -1892,6 +1913,7 @@ function withSpectral(filter, spectral) {
   product.setAttribute("in2", "hue");
   product.setAttribute("operator", "arithmetic");
   product.setAttribute("k1", String(spectral.headroom));
+  product.setAttribute("data-vireglass-headroom", String(spectral.headroom));
   product.setAttribute("k2", "0");
   product.setAttribute("k3", "0");
   product.setAttribute("k4", "0");
@@ -1949,6 +1971,7 @@ function attachGlass(el, opts = {}) {
   let filterEl = null;
   let destroyed = false;
   let mapKey = "";
+  let shownGeometry = null;
   let interim = false;
   let settling = false;
   let lastSample = null;
@@ -2011,31 +2034,46 @@ function attachGlass(el, opts = {}) {
     settling = true;
     apply();
   }
-  function retarget(f, map, hue) {
+  function retarget(f, map, hue, geometry) {
     const images = f.querySelectorAll("feImage");
     images[0]?.setAttribute("href", map.url);
     if (hue) images[1]?.setAttribute("href", hue.url);
+    shownGeometry = geometry;
+    present(f);
+  }
+  function present(f) {
+    if (!shownGeometry) return;
+    const o = optics();
+    const scale = displacementScale(o, shownGeometry);
     for (const pass of f.querySelectorAll("feDisplacementMap")) {
       const ratio = Number(pass.getAttribute("data-vireglass-ratio") ?? 1);
-      pass.setAttribute("scale", String(map.scale * (Number.isFinite(ratio) ? ratio : 1)));
+      writeAttr(pass, "scale", String(scale * (Number.isFinite(ratio) ? ratio : 1)));
+    }
+    const frost = f.querySelector("feGaussianBlur");
+    if (frost) writeAttr(frost, "stdDeviation", String(Math.max(o.blur, 0)));
+    const hue = f.querySelector('feComposite[in2="hue"]');
+    if (hue) {
+      const headroom = Number(hue.getAttribute("data-vireglass-headroom") ?? 1);
+      writeAttr(hue, "k1", String(headroom * appear));
+      writeAttr(hue, "k2", String(1 - appear));
     }
   }
   function requestInterimMap() {
     if (!svgSupported || !filterEl || destroyed) return;
     const geometry = opts.geometry ?? measureGeometry(el);
     if (isEmpty(geometry)) return;
-    const opticsNow = optics();
+    const full = settledOptics();
     const key = interimKey(
       geometry.width,
       geometry.height,
       geometry.cornerRadius,
       JSON.stringify([morph?.smoothing, morph?.shape, morph?.shape2, morph?.shapes]),
-      `a${appear.toFixed(3)}:${opticsNow.refraction}:${opticsNow.refractionScale}:${opticsNow.bevelDp}`
+      `${full.refraction}:${full.refractionScale}:${full.bevelDp}`
     );
     let rec = interimMaps.get(key);
     if (!rec) {
       bump("reducedBakes");
-      rec = { map: buildDisplacementMap(opticsNow, geometry, Math.min(1, devicePixelRatio()), morphState()), ready: false };
+      rec = { map: buildDisplacementMap(full, geometry, Math.min(1, devicePixelRatio()), morphState()), ready: false, geometry };
       interimMaps.set(key, rec);
     }
     const mine = seq += 1;
@@ -2044,7 +2082,7 @@ function attachGlass(el, opts = {}) {
     const show = () => {
       if (destroyed || filterEl !== forFilter || mine <= shownSeq) return;
       shownSeq = mine;
-      retarget(forFilter, record.map, null);
+      retarget(forFilter, record.map, null, record.geometry);
     };
     if (record.ready) {
       show();
@@ -2066,17 +2104,18 @@ function attachGlass(el, opts = {}) {
     wasLight = light;
     const body = opts.body === false ? null : bodyCss(settledOptics(), sample, light ? 1 : 0, accent, appear);
     if (svgSupported) {
-      const key = `a${appear.toFixed(3)}|m${morphKey()}|${geometry.width}x${geometry.height}r${geometry.cornerRadius}@${devicePixelRatio()}:${opticsNow.refraction}:${opticsNow.refractionScale}:${opticsNow.bevelDp}:${opticsNow.blur}`;
+      const full = settledOptics();
+      const key = `m${morphKey()}|${geometry.width}x${geometry.height}r${geometry.cornerRadius}@${devicePixelRatio()}:${full.refraction}:${full.refractionScale}:${full.bevelDp}:${full.blur}:${full.thicknessDp}:${full.film}:${full.iridescence}:${full.diffraction}`;
       if (interim && filterEl) ; else if (isEmpty(geometry)) ; else if (key !== mapKey || !filterEl) {
         const map = cached(`d|${key}`, () => {
           bump("fullBakes");
-          return buildDisplacementMap(opticsNow, geometry, devicePixelRatio(), morphState());
+          return buildDisplacementMap(full, geometry, devicePixelRatio(), morphState());
         });
-        const hue = hasSpectralEdge(opticsNow) ? cached(`h|${key}`, () => {
+        const hue = hasSpectralEdge(full) ? cached(`h|${key}`, () => {
           bump("fullBakes");
-          return buildSpectralMap(opticsNow, geometry, devicePixelRatio());
+          return buildSpectralMap(full, geometry, devicePixelRatio());
         }) : null;
-        const signature = filterSignature(opticsNow.blur, opticsNow.ior, opticsNow.iorSpread, !!hue);
+        const signature = filterSignature(full.blur, full.ior, full.iorSpread, !!hue);
         if (settling && filterEl?.getAttribute("data-vireglass-signature") === signature) {
           settling = false;
           const mine = seq += 1;
@@ -2085,21 +2124,23 @@ function attachGlass(el, opts = {}) {
           void Promise.all([decoded(map.url), hue ? decoded(hue.url) : void 0]).then(() => {
             if (destroyed || filterEl !== forFilter || mapKey !== forKey || mine <= shownSeq) return;
             shownSeq = mine;
-            retarget(forFilter, map, hue);
+            retarget(forFilter, map, hue, geometry);
           });
         } else {
           settling = false;
           invalidate();
           const defs = getFilterHost(host).querySelector("defs");
-          const next = buildFilterElement(id, map.url, opticsNow, map.scale, hue);
+          const next = buildFilterElement(id, map.url, full, map.scale, hue);
           next.setAttribute("data-vireglass-signature", signature);
           if (filterEl?.parentNode) defs.replaceChild(next, filterEl);
           else defs.appendChild(next);
           bump("filterSwaps");
           filterEl = next;
+          shownGeometry = geometry;
         }
         mapKey = key;
       }
+      if (filterEl) present(filterEl);
       el.style.setProperty("backdrop-filter", `url(#${id})`);
       el.style.setProperty("-webkit-backdrop-filter", `url(#${id})`);
     } else {
@@ -2300,7 +2341,6 @@ function attachGlass(el, opts = {}) {
       if (next === appear) return;
       appear = next;
       apply();
-      if (interim) requestInterimMap();
     },
     setAccent(next) {
       accent = next ?? void 0;
@@ -2363,6 +2403,7 @@ exports.clearMapCache = clearMapCache;
 exports.compositeLayers = compositeLayers;
 exports.contrastRimCss = contrastRimCss;
 exports.createGlassGroup = createGlassGroup;
+exports.displacementScale = displacementScale;
 exports.hasSpectralEdge = hasSpectralEdge;
 exports.lightConicAngle = lightConicAngle;
 exports.mapCacheSize = mapCacheSize;