vireglass 3.2.0 → 3.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vireglass",
-  "version": "3.2.0",
+  "version": "3.2.1",
   "description": "A physically-derived liquid glass material for interfaces. One material model, three render targets: WebGL2, live DOM, and Android AGSL.",
   "license": "Apache-2.0",
   "author": "Danil Kotlaev",

package/src/dom/index.ts

@@ -642,7 +642,7 @@ export function attachGlass(el: HTMLElement, opts: AttachGlassOptions = {}): Gla
       // it on every scroll would re-run a per-pixel loop and a PNG encode for a picture that did
       // not change; the refraction itself updates in the compositor with no JS at all.
       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) {
         // The filter keeps its map; feImage stretches it over the live box.
       } else if (isEmpty(geometry)) {

package/src/dom/spectral-map.ts

@@ -32,6 +32,25 @@ function mapDensity(bevel: number, dpr: number): number {
   return Math.min(dpr, BEVEL_SAMPLES / bevel);
 }
 
+/** Intervals of the hue table along the depth, read with linear interpolation. */
+const DEPTH_STEPS = 2048;
+
+/**
+ * `spectralHue` is a function of the depth alone for one element, so it is tabled along the depth.
+ * The nodes sit at `(k / DEPTH_STEPS)²` of the bevel: the rim's slope turns fastest at the silhouette.
+ */
+function hueAlongDepth(bevel: number, rim: number, thick: number, optics: VireGlassOptics): Float64Array {
+  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;
+}
+
 export function renderSpectralPixels(
   optics: VireGlassOptics,
   geometry: VireGlassGeometry,
@@ -48,26 +67,31 @@ export function renderSpectralPixels(
   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;
+  // Past the bevel the glass is plain: a neutral multiplier, not a missing one.
+  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);
+    // Where |x| is within this, the rounded rect's distance field puts the point at least a bevel deep.
+    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) {
-        // Past the bevel the glass is plain: a neutral multiplier, not a missing one.
-        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;
     }
   }