vireglass 2.3.0 → 3.0.0

package/src/dom/rim.ts

@@ -1,15 +1,20 @@
-// Rim light (docs/reference.md §2): a hairline along the silhouette — "not a band and not a
-// bevel" — carrying two opposing arcs, the rest of it outlined by a thin dark line, and its colour
-// taken from the environment.
+// Rim light (docs/reference.md §2): a hairline along the whole silhouette — "not a band and not a
+// bevel" — brighter toward the key light, with a second, weaker arc opposite it, outlined by a thin
+// dark line, its colour taken from the environment and its strength from how light that is.
 //
-// Every number here is the lens shader's own. The key-light lobe is `lens-shader.ts` line 375
-// verbatim (exponent 3, opposing arc at 0.45), and the dark edge is its line 528 (a 0.22
-// darkening at the silhouette). The only thing that differs is the primitive: a conic gradient
-// sampled at fixed angles instead of a per-pixel normal.
+// Every number here is the lens shader's own, read from the law. The only thing that differs is
+// the primitive: a conic gradient sampled at fixed angles instead of a per-pixel normal.
 import { RIM } from '../law';
 import type { VireGlassOptics } from '../material';
 
-const { lobeExponent: LOBE_EXPONENT, opposingArc: OPPOSING_ARC, darkEdge: DARK_EDGE } = RIM;
+const {
+  lobeExponent: LOBE_EXPONENT,
+  opposingArc: OPPOSING_ARC,
+  darkEdge: DARK_EDGE,
+  contour: CONTOUR,
+  whiteShare: WHITE_SHARE,
+  reflectanceRef: REFLECTANCE_REF,
+} = RIM;
 
 /** One stop every 7.5°. Fine enough that a cubic lobe reads as a smooth arc rather than a fan. */
 const STOPS = 48;
@@ -39,13 +44,45 @@ const to255 = (v: number) => Math.round(clamp01(v) * 255);
 
 export type RimAmbient = readonly [number, number, number];
 
+const mixTo = (a: number, b: number, t: number) => a + (b - a) * t;
+
+function smoothstep(edge0: number, edge1: number, x: number): number {
+  const t = clamp01((x - edge0) / (edge1 - edge0));
+  return t * t * (3 - 2 * t);
+}
+
+/** Lightness of an ambient colour, the weights the lens uses. */
+export function ambientLuma(ambient: RimAmbient): number {
+  return 0.2126 * ambient[0] + 0.7152 * ambient[1] + 0.0722 * ambient[2];
+}
+
+/** How strongly the line is drawn over a surround of this lightness (§2, §6). */
+export function rimStrength(luma: number): number {
+  return mixTo(RIM.strengthDark, RIM.strengthLight, smoothstep(RIM.ambientFrom, RIM.ambientTo, luma));
+}
+
 /**
- * The gradient for the hairline. Colour comes from the environment — "over a yellow flower the rim
- * is yellow, over sky it is blue" (§2) — lifted toward white where the key light lands. Away from
- * both arcs only the dark edge remains.
+ * The line's opacity where the rim's normal sits `deltaDeg` from the light: a floor all the way
+ * round and the key-light lobe on top of it, all of it scaled by the medium's reflectance up to
+ * the reference material's.
+ */
+export function rimLineAlpha(deltaDeg: number, optics: VireGlassOptics, luma: number): number {
+  const reflect = Math.min(optics.fresnel / REFLECTANCE_REF, 1);
+  const damping = optics.fresnel > 0 ? optics.specular / optics.fresnel : 0;
+  const lobe = rimLobe(deltaDeg, damping);
+  return clamp01(rimStrength(luma) * reflect * (CONTOUR + (1 - CONTOUR) * lobe));
+}
+
+/**
+ * The gradient for the hairline: a light line round the whole contour, brighter toward the key
+ * light, drawn over the dark edge. Its colour comes from the environment — "over a yellow flower
+ * the rim is yellow, over sky it is blue" (§2) — lifted toward white, and its strength follows how
+ * light the environment is.
  *
  * The opposing arc carries an iridescent fringe (§2), so `iridescence` pulls its channels apart
  * rather than lifting them together.
+ *
+ * Two layers, the line first: `--vireglass-rim` is a background list and paints as one.
  */
 export function rimGradientCss(
   optics: VireGlassOptics,
@@ -56,31 +93,29 @@ export function rimGradientCss(
   const present = clamp01(appear);
   const start = lightConicAngle(light);
   const [ar, ag, ab] = ambient;
-  const stops: string[] = [];
+  const luma = ambientLuma(ambient);
+  const line: string[] = [];
 
   for (let i = 0; i <= STOPS; i += 1) {
     const angle = (i / STOPS) * 360;
-    const key = rimLobe(angle, optics.specular);
     const facing = Math.cos((angle * Math.PI) / 180);
     // The far arc is where dispersion shows as a fringe; the near one is a clean specular.
     const fringe = facing < 0 ? optics.iridescence * OPPOSING_ARC : 0;
-    const lift = clamp01(key * optics.fresnel);
-
-    const r = ar + (1 - ar) * clamp01(lift + fringe);
-    const g = ag + (1 - ag) * lift;
-    const b = ab + (1 - ab) * clamp01(lift - fringe);
-
-    // Scaled, not floored: the dark edge is the one part of the rim that survives facing away from
-    // the light, so leaving it unscaled leaves a hairline drawn around an element that is not there.
-    const alpha = clamp01(DARK_EDGE + lift * (1 - DARK_EDGE)) * present;
-    // Below the arcs the line is the dark edge itself, not a dim copy of the environment.
-    const colour = lift > 0.001
-      ? `rgba(${to255(r)},${to255(g)},${to255(b)},${alpha.toFixed(3)})`
-      : `rgba(0,0,0,${alpha.toFixed(3)})`;
-    stops.push(`${colour} ${angle.toFixed(1)}deg`);
+
+    const r = ar + (1 - ar) * clamp01(WHITE_SHARE + fringe);
+    const g = ag + (1 - ag) * WHITE_SHARE;
+    const b = ab + (1 - ab) * clamp01(WHITE_SHARE - fringe);
+    const alpha = rimLineAlpha(angle, optics, luma) * present;
+    line.push(`rgba(${to255(r)},${to255(g)},${to255(b)},${alpha.toFixed(3)}) ${angle.toFixed(1)}deg`);
   }
 
-  return `conic-gradient(from ${start.toFixed(1)}deg, ${stops.join(', ')})`;
+  // Scaled by presence, not floored: the dark edge would otherwise outline an element that is not
+  // there yet.
+  const dark = `rgba(0,0,0,${(DARK_EDGE * present).toFixed(3)})`;
+  return (
+    `conic-gradient(from ${start.toFixed(1)}deg, ${line.join(', ')}), ` +
+    `conic-gradient(${dark} 0deg, ${dark} 360deg)`
+  );
 }
 
 export const RIM_WIDTH_PX = RIM.widthPx;

package/src/dom/style-hold.ts

@@ -0,0 +1,8 @@
+/** The inline value an element had for a property before the glass took it over, as a way back. */
+export function holdProperty(style: Pick<CSSStyleDeclaration, 'getPropertyValue' | 'setProperty' | 'removeProperty'>, name: string): () => void {
+  const saved = style.getPropertyValue(name);
+  return () => {
+    if (saved) style.setProperty(name, saved);
+    else style.removeProperty(name);
+  };
+}

package/src/law.ts

@@ -39,6 +39,46 @@ export const RIM = {
   darkEdge: 0.22,
   /** Width of the hairline, CSS px. "About a point, not a band and not a bevel" (§2). */
   widthPx: 1,
+  /**
+   * How strongly the line is drawn, by the lightness around the element. The rim is a reflection
+   * of the surroundings, so it is faint over a dark one and plain over a bright one, not white at
+   * full strength everywhere (§2, §6).
+   *
+   * MEASURED off the controls of A 2:17 (over dark video), M 2:52 (over sky) and A 2:18 (over
+   * grass), as the brightest rim bin's OKLab lightness over the surround's: 0.24 to 0.27 over dark,
+   * 0.25 over sky, 0.37 over grass. Through the DOM path onto the same backdrops these land within
+   * 0.08 of the smooth rows (docs/dom.md); a line white at full strength reads 0.70 to 0.80 over the
+   * dark frames.
+   */
+  strengthDark: 0.37,
+  strengthLight: 0.95,
+  /**
+   * The surround lightness between which the strength moves from one to the other. UNMEASURED: the
+   * two ends are, and the controls in between were not looked for.
+   */
+  ambientFrom: 0.15,
+  ambientTo: 0.45,
+  /**
+   * The share of the line's width, from the silhouette inward, that the light line leaves to the
+   * dark edge. UNMEASURED: without it the line covers the dark edge and an element over a bright
+   * flat backdrop loses the one mark that holds it there.
+   */
+  lineInset: 0.3,
+  /**
+   * The share of the peak that the line keeps along the whole contour, away from the key light.
+   * MEASURED: the reference line goes all the way round. Its dimmest bin sits 0.06 to 0.12 of
+   * lightness over the surround on the dark frames, against a peak of 0.24 to 0.27 (A 2:17).
+   */
+  contour: 0.3,
+  /** How far the line's colour is lifted from the surroundings' toward white. UNMEASURED: the
+   *  lens always had 0.75 here, and this is that figure with a name. */
+  whiteShare: 0.75,
+  /**
+   * The reflectance (`fresnelStrength`) at which the line is drawn at the strengths above: that
+   * of ordinary glass, index 1.5. A denser medium does not draw it brighter than they say; a
+   * thinner one draws it fainter. UNMEASURED.
+   */
+  reflectanceRef: 0.7,
 } as const;
 
 /** How the medium stands between the backdrop and the eye (§3). */
@@ -54,10 +94,14 @@ export const BODY = {
   busyEdge: 0.75,
   /** Fine texture the body has to stop being a window for. */
   groundSpan: 0.06,
-  /** Where the tint flips direction, by the element's AVERAGE lightness — a local threshold cuts
-   *  a diagonal step across the body on a gradient. */
-  darkSideFrom: 0.42,
-  darkSideTo: 0.58,
+  /**
+   * The spread under the element at which the ink's legibility requirement starts to bind, and the
+   * spread where it binds fully. Over a flat backdrop polarity flips before the ink drowns, so
+   * the body does not darken under a light glyph there; over texture it does. UNMEASURED: the
+   * reference shows a lighter body under a white glyph over sky, nothing about texture.
+   */
+  inkBusyFrom: 0.02,
+  inkBusyTo: 0.12,
   /** Ceiling on any single demand, so one requirement cannot make the glass opaque on its own. */
   maxDemand: 0.92,
   /**
@@ -67,6 +111,12 @@ export const BODY = {
    * separate as far as transparency allows and no further. UNMEASURED.
    */
   presenceDemand: 0.5,
+  /**
+   * The density at which the body is wholly the ink's own pole. Between `presenceDemand` and this
+   * the body moves from the light a thin body carries to the pole: a density no presence floor
+   * reaches is one the ink's legibility, or a system setting, has asked for. UNMEASURED.
+   */
+  inkPoleTo: 0.8,
 } as const;
 
 /** Shadow (§4). The density law lives in `geometry.ts`; these are its measured ends. */

package/src/lens-shader.ts

@@ -378,7 +378,11 @@ half4 main(float2 xy) {
   float rimKey = u_specular * (pow(max(rimFacing, 0.0), ${RIM.lobeExponent}.0) + ${RIM.opposingArc} * pow(max(-rimFacing, 0.0), ${RIM.lobeExponent}.0));
   // Wherever the key light doesn't fall, the face reflects its shaded surroundings — hence the
   // dark outline.
-  float3 env = refl * (0.55 + 0.45 * min(key, 1.0)) + float3(1.2 * key);
+  // The key light's glint is a reflection of the surroundings too: it is scaled by the same
+  // ambient strength as the rim line, so it is not white at full strength over a dark backdrop.
+  float rimStrength = mix(${RIM.strengthDark}, ${RIM.strengthLight},
+    smoothstep(${RIM.ambientFrom}, ${RIM.ambientTo}, vgLuma(ambient)));
+  float3 env = refl * (0.55 + 0.45 * min(key, 1.0)) + float3(1.2 * key * rimStrength / ${RIM.strengthLight});
 
   // Interference and diffraction live in the reflected ray at a grazing angle — a single hue
   // multiplier applied to the reflection, no extra samples.
@@ -454,12 +458,10 @@ half4 main(float2 xy) {
   // transparent glass by the model.
   float demand = clamp(u_legibility * 4.0, 0.0, 1.0);
 
-  // Where there's no ink, the glass tints away from the backdrop. The direction is chosen by the
-  // average lightness under the element, not the local spot's lightness: otherwise on a gradient
-  // the threshold cuts across the body as a diagonal step.
-  float darkSide = smoothstep(${BODY.darkSideFrom}, ${BODY.darkSideTo}, mean);
-  float away = mix(VG_TINT_LIGHT, VG_TINT_DARK, darkSide);
-  float tintLuma = mix(away, mix(VG_TINT_LIGHT, VG_TINT_DARK, pol), demand);
+  // The body is lighter than its surroundings whatever the glyph on it is: glass concentrates
+  // light (M 2:29), and the reference keeps a lighter body under a white glyph over sky as much as
+  // over dark. Only a requirement of the ink pulls it to the ink's own pole, below.
+  float inkPole = mix(VG_TINT_LIGHT, VG_TINT_DARK, pol);
 
   // How much medium it takes to push lightness under the ink past the threshold — locally.
   // Computed from whichever edge of the backdrop's spread is closer to the ink: a light ink
@@ -474,32 +476,22 @@ half4 main(float2 xy) {
   float needForDark = inkLo < floorDark
     ? clamp((floorDark - inkLo) / max(VG_TINT_LIGHT - inkLo, 1e-4), 0.0, ${BODY.maxDemand})
     : 0.0;
-  float needForInk = mix(needForDark, needForLight, pol) * demand;
+  // Over a flat backdrop the ink asks for nothing: polarity flips before it drowns. It is spread
+  // under the ink that the body has to answer.
+  float structured = smoothstep(${BODY.inkBusyFrom}, ${BODY.inkBusyTo}, busy);
+  float needForInk = mix(needForDark, needForLight, pol) * demand * structured;
 
   float ground = structure * u_legibility * VG_GROUND_SPAN;
   float density = max(max(u_bodyDensity, ground), needForInk);
 
   // PRESENCE (§3). Over a uniform backdrop there is nothing to refract, and an element that is
-  // only a rim honestly disappears — right for a piece of background, wrong for a control.
-  //
-  // This used to live on the rim line alone, as lit = max(rimKey, u_presence x 2), while the
-  // DOM path has always implemented it as a floor on the BODY. Two renderers, one field, two
-  // meanings. Measured on Apple's own control over a flat page (frames/verify/m-707), the body
-  // carries 16 levels of separation there and the rim 11.6 — so the body is where it belongs,
-  // and the rim's reading was the wrong one.
-  // The separation asked for is capped by the range that is left: over a backdrop at 0.96 there
-  // is no room to go 0.05 lighter. And what it is DIVIDED by is the distance to the tint's own
-  // end, not to the tint the body currently sits at — dividing by the latter explodes wherever
-  // the two are close, which is how the first version of this drove density to its ceiling at
-  // both extremes and took the window down to 7%.
-  bool lighter = local < 0.5;
-  float target = lighter ? min(local + u_presence, 1.0) : max(local - u_presence, 0.0);
-  float separation = abs(target - local);
-  float reached = abs(tintLuma - local) * density;
-  if (u_presence > 0.0 && reached < separation) {
-    float toEnd = abs((lighter ? VG_TINT_LIGHT : VG_TINT_DARK) - local);
-    density = max(density, min(separation / max(toEnd, 1e-4), ${BODY.maxDemand}));
+  // only a rim honestly disappears — right for a piece of background, wrong for a control. A floor
+  // on the density, toward light: the lift it gives is presence times the room left under the
+  // light pole, so it fades out as the room does and has no step anywhere on the scale.
+  if (u_presence > 0.0) {
+    density = max(density, min(u_presence / VG_TINT_LIGHT, ${BODY.presenceDemand}));
   }
+  float tintLuma = mix(VG_TINT_LIGHT, inkPole, max(clamp(needForInk / max(density, 1e-4), 0.0, 1.0), smoothstep(${BODY.presenceDemand}, ${BODY.inkPoleTo}, density)));
 
   // Glass has no color of its own — only the color of what's beneath it (HIG "Color").
   float3 tintHue = mix(float3(1.0), vgHue(wide * 0.5 + ambient * 0.5), u_colorPickup);
@@ -539,17 +531,18 @@ half4 main(float2 xy) {
   }
 
   // RIM LIGHT — a separate layer, a line about 1 pt wide along the silhouette (M 2:36, 11:04):
-  // brighter where the face faces the key light, weaker opposite it; where no light falls, a
-  // dark outline. This line is what holds the element's presence, not a fill on the body: over a
-  // flat backdrop a control is visible along its whole silhouette because of it.
-  float line = (1.0 - smoothstep(0.0, lineW, e)) * lens;
+  // brighter where the face faces the key light, weaker opposite it, and never absent: the line
+  // runs the whole contour. It is a reflection of the surroundings, so it is faint over a dark
+  // one and plain over a bright one (§2, §6).
+  float line = smoothstep(0.0, lineW * ${RIM.lineInset}, e) * (1.0 - smoothstep(lineW * ${RIM.lineInset}, lineW, e)) * lens;
   float outline = (1.0 - smoothstep(0.0, lineW * 0.6, e)) * lens;
-  float lit = clamp(max(rimKey * 1.4, u_presence * 2.0), 0.0, 1.0);
+  float reflectN = min(u_fresnel / ${RIM.reflectanceRef}, 1.0);
+  float lit = clamp(rimStrength * reflectN * (${RIM.contour} + (1.0 - ${RIM.contour}) * rimKey / max(u_fresnel, 0.001)), 0.0, 1.0);
   // The dark rim is its own layer around the whole silhouette, and the highlight sits ON TOP of
   // it (iOS 27). While the outline used to fade via a (1 − lit) multiplier, the silhouette read
   // as a single arc: highlight OR shadow.
   rgb *= 1.0 - ${RIM.darkEdge} * outline;
-  rgb = mix(rgb, mix(refl, float3(1.0), 0.75), line * lit);
+  rgb = mix(rgb, mix(refl, float3(1.0), ${RIM.whiteShare}), line * lit);
 
   if (u_debug > 9.5 && u_debug < 10.5) { rgb = spectral * 0.5; }
   if (u_debug > 10.5 && u_debug < 11.5) { rgb = float3(density, needForInk, structure); }

package/src/material.ts

@@ -63,14 +63,17 @@ export type VireGlassMaterial = {
   /** Lightness of what the app draws OVER the glass: 1 is light icons and text, 0 is dark. A
    *  cause, not a knob: the calling screen knows it. */
   ink: number;
-  /** Minimum PRESENCE of the element itself: how far its body must stand off in lightness from
-   *  the backdrop behind it. Not the same as `legibility` — that's about the ink OVER the glass,
+  /** Minimum PRESENCE of the element itself: a floor on its body density, tinted toward light and
+   *  fading as the backdrop nears the light pole. Not the same as `legibility` — that's about the ink OVER the glass,
    *  this is about the element itself. Over a uniform backdrop the glass has nothing to refract,
    *  and the element disappears; for a control that's unacceptable. 0 means no presence is
    *  required.
    *
-   *  The sign is taken FROM THE BACKDROP, not from ink polarity: over dark the body lightens,
-   *  over light it darkens. So the requirement works the same way on any backdrop. */
+   *  The direction is always toward light, whatever the ink: the reference body is lighter than
+   *  its surroundings from dark video to sky, under a white glyph as much as a dark one, and only
+   *  as far as the range allows. It never darkens the element on its own account. What can send
+   *  the body to the ink's pole is the ink's legibility over texture, a system setting (reduced
+   *  transparency, increased contrast) or a density past `BODY.inkPoleTo`. */
   presence: number;
   /** Surface film thickness, nm. This is where interference comes from: the optical path
    *  difference in the film becomes comparable to the wavelength, and the reflection picks up
@@ -229,8 +232,8 @@ export const VIREGLASS_LYRICS_MATERIAL: VireGlassMaterial = {
  * a native lens that sets body density: there the element is denser by 2.4 percentage points. On
  * the web the surface has no body at all; the effect only shows on Android below 13.
  *
- * `presence` is raised for the same reason: a piece of background is allowed to disappear over a
- * uniform canvas, a control isn't — it has to be visible before it's been tapped.
+ * `presence` is left at none: the medium's own lift already separates the body from a uniform
+ * backdrop as far as the reference does (docs/dom.md), and the rim carries the silhouette.
  *
  * IMPORTANT about size. The bevel is specified by the medium in dp and doesn't depend on the
  * element's size, but the geometry clamps it to half the smaller half-size (`MAX_BEVEL_FRACTION`).
@@ -244,7 +247,7 @@ export const VIREGLASS_CONTROL_MATERIAL: VireGlassMaterial = {
   thickness: 44,
   bevel: 8,
   roughness: 0.035,
-  presence: 0.176,
+  presence: 0,
 };
 
 export const VIREGLASS_MATERIAL = VIREGLASS_MATERIAL_V5;

package/src/targets/glsl.ts

@@ -67,11 +67,36 @@ export function convertEvalCalls(src: string): string {
   return out;
 }
 
+/** Comments are prose, and the rewrites here are regexes over raw text: a comment mentioning
+ *  "return" became one, and a brace in a comment ended the entry point early. Newlines inside
+ *  block comments survive, so a compile error still points at the source line. */
+export function stripComments(src: string): string {
+  let out = '';
+  let i = 0;
+  while (i < src.length) {
+    if (src.startsWith('//', i)) {
+      const end = src.indexOf('\n', i);
+      i = end < 0 ? src.length : end;
+    } else if (src.startsWith('/*', i)) {
+      const end = src.indexOf('*/', i + 2);
+      if (end < 0) throw new Error('vireglass/targets/glsl: unterminated block comment');
+      const stop = end + 2;
+      out += src.slice(i, stop).replace(/[^\n]/g, '');
+      i = stop;
+    } else {
+      out += src[i];
+      i += 1;
+    }
+  }
+  return out;
+}
+
 /**
  * Early `return <expression>;` inside `main` → `fragColor = <expression>; return;`. Takes ONLY
  * the body of main (see `convertEntryPoint`) — ordinary `return`s in helper functions live
  * outside this text and are untouched. Expressions never contain a `;` of their own (shaders have
- * none — the only `;` lives inside `for(...)`, which isn't a return), so `[^;]+` is safe.
+ * none — the only `;` lives inside `for(...)`, which isn't a return), so `[^;]+` is safe once
+ * comments are gone (`stripComments`).
  */
 export function convertReturns(mainBody: string): string {
   return mainBody.replace(/\breturn\s+([^;]+);/g, 'fragColor = $1; return;');
@@ -133,7 +158,7 @@ export function addPrologue(src: string): string {
  *  literal AGSL signature BEFORE type conversion, otherwise `half4 main(float2 xy)` can't be
  *  found. */
 export function toGLSL(shaderSource: string): string {
-  let out = shaderSource;
+  let out = stripComments(shaderSource);
   out = convertEntryPoint(out);
   out = convertShaderUniforms(out);
   out = convertEvalCalls(out);