vireglass 3.2.0 → 3.2.1

package/dist/dom.cjs

@@ -711,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);
@@ -722,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;
     }
   }
@@ -2089,7 +2105,7 @@ function attachGlass(el, opts = {}) {
     const body = opts.body === false ? null : bodyCss(settledOptics(), sample, light ? 1 : 0, accent, appear);
     if (svgSupported) {
       const full = settledOptics();
-      const key = `m${morphKey()}|${geometry.width}x${geometry.height}r${geometry.cornerRadius}@${devicePixelRatio()}:${full.refraction}:${full.refractionScale}:${full.bevelDp}:${full.blur}`;
+      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");