vireglass 0.1.0

package/dist/web/index.js

@@ -0,0 +1,657 @@
+import { toGLSL, LENS_SHADER, SURFACE_SHADER, REFERENCE_SURROUND, lensPadDp, surfacePadDp, toLensProps, toSurfaceUniforms, shadowOpacity, toDeviceSurfaceUniforms, DYNAMIC_UNIFORMS, ICON_UNIFORMS, OVERLAY_UNIFORMS, REFERENCE_SCENE_HEIGHT, refGradientSteps, refGray, refCheckerCells, REFERENCE_SCENE_WIDTH } from '../chunk-HF2AWZEZ.js';
+
+// src/web/gl.ts
+var FULLSCREEN_TRIANGLE_VERTEX_SOURCE = `#version 300 es
+const vec2 VG_POS[3] = vec2[3](vec2(-1.0, -1.0), vec2(3.0, -1.0), vec2(-1.0, 3.0));
+void main() {
+  gl_Position = vec4(VG_POS[gl_VertexID], 0.0, 1.0);
+}
+`;
+function compileShader(gl, type, source) {
+  const shader = gl.createShader(type);
+  if (!shader) throw new Error("vireglass/web: gl.createShader returned null");
+  gl.shaderSource(shader, source);
+  gl.compileShader(shader);
+  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+    const log = gl.getShaderInfoLog(shader) ?? "(no log)";
+    gl.deleteShader(shader);
+    throw new Error(`vireglass/web: shader failed to compile:
+${log}`);
+  }
+  return shader;
+}
+function createProgram(gl, vertexSource, fragmentSource) {
+  const vertex = compileShader(gl, gl.VERTEX_SHADER, vertexSource);
+  const fragment = compileShader(gl, gl.FRAGMENT_SHADER, fragmentSource);
+  const program = gl.createProgram();
+  if (!program) throw new Error("vireglass/web: gl.createProgram returned null");
+  gl.attachShader(program, vertex);
+  gl.attachShader(program, fragment);
+  gl.linkProgram(program);
+  gl.deleteShader(vertex);
+  gl.deleteShader(fragment);
+  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+    const log = gl.getProgramInfoLog(program) ?? "(no log)";
+    gl.deleteProgram(program);
+    throw new Error(`vireglass/web: program failed to link:
+${log}`);
+  }
+  return program;
+}
+function drawFullscreenTriangle(gl) {
+  gl.drawArrays(gl.TRIANGLES, 0, 3);
+}
+function createTexture(gl, options) {
+  const texture = gl.createTexture();
+  if (!texture) throw new Error("vireglass/web: gl.createTexture returned null");
+  const internalFormat = options.internalFormat ?? gl.RGBA8;
+  const format = options.format ?? gl.RGBA;
+  const type = options.type ?? gl.UNSIGNED_BYTE;
+  gl.bindTexture(gl.TEXTURE_2D, texture);
+  gl.texImage2D(
+    gl.TEXTURE_2D,
+    0,
+    internalFormat,
+    options.width,
+    options.height,
+    0,
+    format,
+    type,
+    null
+  );
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+  gl.bindTexture(gl.TEXTURE_2D, null);
+  return texture;
+}
+function createFramebuffer(gl, texture) {
+  const fbo = gl.createFramebuffer();
+  if (!fbo) throw new Error("vireglass/web: gl.createFramebuffer returned null");
+  gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);
+  gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);
+  const status = gl.checkFramebufferStatus(gl.FRAMEBUFFER);
+  gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+  if (status !== gl.FRAMEBUFFER_COMPLETE) {
+    throw new Error(`vireglass/web: FBO incomplete, status ${status}`);
+  }
+  return fbo;
+}
+function bindTextureAt(gl, unit, texture, program, uniformName) {
+  gl.activeTexture(gl.TEXTURE0 + unit);
+  gl.bindTexture(gl.TEXTURE_2D, texture);
+  const loc = gl.getUniformLocation(program, uniformName);
+  gl.uniform1i(loc, unit);
+}
+
+// src/web/probe.ts
+var PROBE_GRID_WIDTH = 48;
+var PROBE_GRID_HEIGHT = 96;
+var DOWNSAMPLE_FRAGMENT_SOURCE = `#version 300 es
+precision highp float;
+out vec4 fragColor;
+uniform sampler2D u_content;
+uniform vec2 u_contentSize;
+uniform vec2 u_gridSize;
+
+// Cell \u2192 content UV mapping. Does NOT correspond to the canvas's visible top/bottom \u2014 this is an
+// internal pass, its buffer is never displayed, only read back on the CPU with the same formula
+// (see rectStats below). It doesn't need to match the blit pass's orientation.
+void main() {
+  vec2 uv = gl_FragCoord.xy / u_gridSize;
+  vec3 sum = vec3(0.0);
+  const int N = 5;
+  vec2 block = u_contentSize / u_gridSize;
+  vec2 origin = uv * u_contentSize;
+  for (int y = 0; y < N; y++) {
+    for (int x = 0; x < N; x++) {
+      vec2 p = origin + (vec2(float(x), float(y)) + 0.5) * (block / float(N));
+      sum += texture(u_content, p / u_contentSize).rgb;
+    }
+  }
+  fragColor = vec4(sum / float(N * N), 1.0);
+}
+`;
+function pickDownsampleFormat(gl) {
+  const hasFloat = gl.getExtension("EXT_color_buffer_float") !== null;
+  return hasFloat ? { internalFormat: gl.RGBA32F, type: gl.FLOAT, floatPrecision: true } : { internalFormat: gl.RGBA8, type: gl.UNSIGNED_BYTE, floatPrecision: false };
+}
+function luma(r, g, b) {
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+function rectStats(buffer, floatPrecision, gridW, gridH, contentWidth, contentHeight, rect) {
+  const x0 = rect.centerX - rect.halfWidth;
+  const x1 = rect.centerX + rect.halfWidth;
+  const y0 = rect.centerY - rect.halfHeight;
+  const y1 = rect.centerY + rect.halfHeight;
+  const lumas = [];
+  const nx = [];
+  const ny = [];
+  let sr = 0;
+  let sg = 0;
+  let sb = 0;
+  const norm = floatPrecision ? 1 : 255;
+  for (let row = 0; row < gridH; row++) {
+    const cy = (row + 0.5) / gridH * contentHeight;
+    if (cy < y0 || cy > y1) continue;
+    for (let col = 0; col < gridW; col++) {
+      const cx = (col + 0.5) / gridW * contentWidth;
+      if (cx < x0 || cx > x1) continue;
+      const i = (row * gridW + col) * 4;
+      const r = buffer[i] / norm;
+      const g = buffer[i + 1] / norm;
+      const b = buffer[i + 2] / norm;
+      lumas.push(luma(r, g, b));
+      nx.push((cx - rect.centerX) / Math.max(rect.halfWidth, 1));
+      ny.push((cy - rect.centerY) / Math.max(rect.halfHeight, 1));
+      sr += r;
+      sg += g;
+      sb += b;
+    }
+  }
+  const n = lumas.length;
+  if (n === 0) return null;
+  let mean = 0;
+  for (const v of lumas) mean += v;
+  mean /= n;
+  let busy = 0;
+  for (const v of lumas) busy += Math.abs(v - mean);
+  busy = busy / n * 2;
+  const sorted = [...lumas].sort((a, b) => a - b);
+  const percentile = (p) => {
+    const idx = p * (n - 1);
+    const lo = Math.floor(idx);
+    const hi = Math.ceil(idx);
+    return sorted[lo] + (sorted[hi] - sorted[lo]) * (idx - lo);
+  };
+  const slope = (xs) => {
+    let mx = 0;
+    for (const v of xs) mx += v;
+    mx /= n;
+    let sxx = 0;
+    let sxl = 0;
+    for (let i = 0; i < n; i++) {
+      const dx = xs[i] - mx;
+      sxx += dx * dx;
+      sxl += dx * (lumas[i] - mean);
+    }
+    return sxx > 1e-6 ? sxl / sxx : 0;
+  };
+  return {
+    luma: mean,
+    busy: Math.min(busy, 1),
+    lo: percentile(0.1),
+    hi: percentile(0.9),
+    slopeX: slope(nx),
+    slopeY: slope(ny),
+    r: sr / n,
+    g: sg / n,
+    b: sb / n
+  };
+}
+function createProbe(gl, vertexSource) {
+  const program = createProgram(gl, vertexSource, DOWNSAMPLE_FRAGMENT_SOURCE);
+  const format = pickDownsampleFormat(gl);
+  const texture = gl.createTexture();
+  if (!texture) throw new Error("vireglass/web/probe: gl.createTexture returned null");
+  gl.bindTexture(gl.TEXTURE_2D, texture);
+  gl.texImage2D(
+    gl.TEXTURE_2D,
+    0,
+    format.internalFormat,
+    PROBE_GRID_WIDTH,
+    PROBE_GRID_HEIGHT,
+    0,
+    gl.RGBA,
+    format.type,
+    null
+  );
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+  gl.bindTexture(gl.TEXTURE_2D, null);
+  const fbo = createFramebuffer(gl, texture);
+  const byteSize = PROBE_GRID_WIDTH * PROBE_GRID_HEIGHT * 4 * (format.floatPrecision ? 4 : 1);
+  const slots = [0, 1].map(() => {
+    const buffer = gl.createBuffer();
+    if (!buffer) throw new Error("vireglass/web/probe: gl.createBuffer returned null");
+    gl.bindBuffer(gl.PIXEL_PACK_BUFFER, buffer);
+    gl.bufferData(gl.PIXEL_PACK_BUFFER, byteSize, gl.STREAM_READ);
+    gl.bindBuffer(gl.PIXEL_PACK_BUFFER, null);
+    return { buffer, sync: null, pending: false };
+  });
+  let cursor = 0;
+  let latestRaw = null;
+  const contentLoc = gl.getUniformLocation(program, "u_content");
+  const contentSizeLoc = gl.getUniformLocation(program, "u_contentSize");
+  const gridSizeLoc = gl.getUniformLocation(program, "u_gridSize");
+  function pollReady(slot) {
+    if (!slot.pending || !slot.sync) return;
+    const status = gl.clientWaitSync(slot.sync, gl.SYNC_FLUSH_COMMANDS_BIT, 0);
+    if (status === gl.TIMEOUT_EXPIRED || status === gl.WAIT_FAILED) return;
+    gl.deleteSync(slot.sync);
+    slot.sync = null;
+    slot.pending = false;
+    gl.bindBuffer(gl.PIXEL_PACK_BUFFER, slot.buffer);
+    const out = format.floatPrecision ? new Float32Array(PROBE_GRID_WIDTH * PROBE_GRID_HEIGHT * 4) : new Uint8Array(PROBE_GRID_WIDTH * PROBE_GRID_HEIGHT * 4);
+    gl.getBufferSubData(gl.PIXEL_PACK_BUFFER, 0, out);
+    gl.bindBuffer(gl.PIXEL_PACK_BUFFER, null);
+    latestRaw = out;
+  }
+  function sample(contentTexture, contentWidth, contentHeight, rect) {
+    for (const slot2 of slots) pollReady(slot2);
+    gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);
+    gl.viewport(0, 0, PROBE_GRID_WIDTH, PROBE_GRID_HEIGHT);
+    gl.useProgram(program);
+    bindTextureAt(gl, 0, contentTexture, program, "u_content");
+    gl.uniform1i(contentLoc, 0);
+    gl.uniform2f(contentSizeLoc, contentWidth, contentHeight);
+    gl.uniform2f(gridSizeLoc, PROBE_GRID_WIDTH, PROBE_GRID_HEIGHT);
+    gl.disable(gl.BLEND);
+    drawFullscreenTriangle(gl);
+    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+    const slot = slots[cursor];
+    cursor = (cursor + 1) % slots.length;
+    if (!slot.pending) {
+      gl.bindFramebuffer(gl.READ_FRAMEBUFFER, fbo);
+      gl.bindBuffer(gl.PIXEL_PACK_BUFFER, slot.buffer);
+      gl.readPixels(0, 0, PROBE_GRID_WIDTH, PROBE_GRID_HEIGHT, gl.RGBA, format.type, 0);
+      gl.bindBuffer(gl.PIXEL_PACK_BUFFER, null);
+      gl.bindFramebuffer(gl.READ_FRAMEBUFFER, null);
+      slot.sync = gl.fenceSync(gl.SYNC_GPU_COMMANDS_COMPLETE, 0);
+      slot.pending = true;
+    }
+    return statsFor(contentWidth, contentHeight, rect);
+  }
+  function statsFor(contentWidth, contentHeight, rect) {
+    if (!latestRaw) return null;
+    return rectStats(
+      latestRaw,
+      format.floatPrecision,
+      PROBE_GRID_WIDTH,
+      PROBE_GRID_HEIGHT,
+      contentWidth,
+      contentHeight,
+      rect
+    );
+  }
+  function destroy() {
+    for (const slot of slots) {
+      if (slot.sync) gl.deleteSync(slot.sync);
+      gl.deleteBuffer(slot.buffer);
+    }
+    gl.deleteFramebuffer(fbo);
+    gl.deleteTexture(texture);
+    gl.deleteProgram(program);
+  }
+  return { sample, statsFor, destroy };
+}
+
+// src/web/renderer.ts
+var BLIT_FRAGMENT_SOURCE = `#version 300 es
+precision highp float;
+out vec4 fragColor;
+uniform sampler2D u_content;
+uniform vec2 u_resolution;
+void main() {
+  // The same Y flip the transpiler does for the lens/surface (targets/glsl.ts): content is
+  // uploaded from the 2D canvas WITHOUT flipping, so its V=0 is the scene's top row. This keeps
+  // the same order here, otherwise the backdrop and what the lens refracts through it drift
+  // apart vertically.
+  vec2 uv = gl_FragCoord.xy / u_resolution;
+  uv.y = 1.0 - uv.y;
+  fragColor = texture(u_content, uv);
+}
+`;
+function locationCache(gl, program) {
+  const cache = /* @__PURE__ */ new Map();
+  return (name) => {
+    let loc = cache.get(name);
+    if (loc === void 0) {
+      loc = gl.getUniformLocation(program, name);
+      cache.set(name, loc);
+    }
+    return loc;
+  };
+}
+function setUniform(gl, loc, value) {
+  if (!loc) return;
+  if (typeof value === "number") {
+    gl.uniform1f(loc, value);
+    return;
+  }
+  switch (value.length) {
+    case 1:
+      gl.uniform1f(loc, value[0]);
+      break;
+    case 2:
+      gl.uniform2f(loc, value[0], value[1]);
+      break;
+    case 3:
+      gl.uniform3f(loc, value[0], value[1], value[2]);
+      break;
+    case 4:
+      gl.uniform4f(loc, value[0], value[1], value[2], value[3]);
+      break;
+    default:
+      throw new Error(`vireglass/web: unsupported uniform size (${value.length})`);
+  }
+}
+function applyChannel(gl, get, names, sizes, values) {
+  let cursor = 0;
+  for (let i = 0; i < names.length; i += 1) {
+    const size = sizes[i];
+    setUniform(gl, get(names[i]), values.slice(cursor, cursor + size));
+    cursor += size;
+  }
+}
+function applyObject(gl, get, values) {
+  for (const name of Object.keys(values)) setUniform(gl, get(name), values[name]);
+}
+function createVireGlassRenderer(canvas) {
+  const context = canvas.getContext("webgl2", {
+    preserveDrawingBuffer: true,
+    alpha: false,
+    antialias: false
+  });
+  if (!context) throw new Error("vireglass/web: WebGL2 unavailable");
+  const gl = context;
+  const blitProgram = createProgram(gl, FULLSCREEN_TRIANGLE_VERTEX_SOURCE, BLIT_FRAGMENT_SOURCE);
+  const lensProgram = createProgram(gl, FULLSCREEN_TRIANGLE_VERTEX_SOURCE, toGLSL(LENS_SHADER));
+  const surfaceProgram = createProgram(
+    gl,
+    FULLSCREEN_TRIANGLE_VERTEX_SOURCE,
+    toGLSL(SURFACE_SHADER)
+  );
+  const probe = createProbe(gl, FULLSCREEN_TRIANGLE_VERTEX_SOURCE);
+  const blitLoc = locationCache(gl, blitProgram);
+  const lensLoc = locationCache(gl, lensProgram);
+  const surfaceLoc = locationCache(gl, surfaceProgram);
+  let width = canvas.width;
+  let height = canvas.height;
+  let sceneCanvas = document.createElement("canvas");
+  let sceneCtx = sceneCanvas.getContext("2d");
+  if (!sceneCtx) throw new Error("vireglass/web: scene 2D context unavailable");
+  const settled = /* @__PURE__ */ new Map();
+  const SETTLE = 0.12;
+  function settleStats(index, fresh) {
+    const prev = settled.get(index);
+    if (!prev) {
+      settled.set(index, fresh);
+      return fresh;
+    }
+    const mix = (a, b) => a + (b - a) * SETTLE;
+    const next = {
+      luma: mix(prev.luma, fresh.luma),
+      busy: mix(prev.busy, fresh.busy),
+      lo: mix(prev.lo, fresh.lo),
+      hi: mix(prev.hi, fresh.hi),
+      slopeX: mix(prev.slopeX, fresh.slopeX),
+      slopeY: mix(prev.slopeY, fresh.slopeY),
+      r: mix(prev.r, fresh.r),
+      g: mix(prev.g, fresh.g),
+      b: mix(prev.b, fresh.b)
+    };
+    settled.set(index, next);
+    return next;
+  }
+  let contentTexture = createTexture(gl, {
+    width: Math.max(width, 1),
+    height: Math.max(height, 1)
+  });
+  const iconTexture = createTexture(gl, { width: 1, height: 1 });
+  const colorTexture = createTexture(gl, { width: 1, height: 1 });
+  gl.bindTexture(gl.TEXTURE_2D, iconTexture);
+  gl.texSubImage2D(
+    gl.TEXTURE_2D,
+    0,
+    0,
+    0,
+    1,
+    1,
+    gl.RGBA,
+    gl.UNSIGNED_BYTE,
+    new Uint8Array([0, 0, 0, 0])
+  );
+  gl.bindTexture(gl.TEXTURE_2D, null);
+  function resize(widthPx, heightPx) {
+    width = Math.max(1, Math.round(widthPx));
+    height = Math.max(1, Math.round(heightPx));
+    canvas.width = width;
+    canvas.height = height;
+    gl.viewport(0, 0, width, height);
+    sceneCanvas = document.createElement("canvas");
+    sceneCanvas.width = width;
+    sceneCanvas.height = height;
+    sceneCtx = sceneCanvas.getContext("2d");
+    if (!sceneCtx) throw new Error("vireglass/web: scene 2D context unavailable");
+    gl.deleteTexture(contentTexture);
+    contentTexture = createTexture(gl, { width, height });
+  }
+  function render(options) {
+    if (!sceneCtx) throw new Error("vireglass/web: renderer not initialized (resize was never called)");
+    sceneCtx.clearRect(0, 0, width, height);
+    options.scene(sceneCtx, width, height, options.offsetX ?? 0, options.offsetY ?? 0, options.density);
+    gl.bindTexture(gl.TEXTURE_2D, contentTexture);
+    gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, gl.RGBA, gl.UNSIGNED_BYTE, sceneCanvas);
+    gl.bindTexture(gl.TEXTURE_2D, null);
+    if (options.colorLayer) {
+      gl.bindTexture(gl.TEXTURE_2D, colorTexture);
+      gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, options.colorLayer);
+    }
+    if (options.iconMask) {
+      gl.bindTexture(gl.TEXTURE_2D, iconTexture);
+      gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, options.iconMask);
+      gl.bindTexture(gl.TEXTURE_2D, null);
+    }
+    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+    gl.viewport(0, 0, width, height);
+    gl.disable(gl.BLEND);
+    gl.disable(gl.SCISSOR_TEST);
+    gl.useProgram(blitProgram);
+    bindTextureAt(gl, 0, contentTexture, blitProgram, "u_content");
+    setUniform(gl, blitLoc("u_resolution"), [width, height]);
+    drawFullscreenTriangle(gl);
+    const probes = [];
+    for (let index = 0; index < options.pieces.length; index += 1) {
+      const piece = options.pieces[index];
+      const halfWidth = piece.geometry.width * options.density / 2;
+      const halfHeight = piece.geometry.height * options.density / 2;
+      const rect = {
+        centerX: piece.centerX,
+        centerY: piece.centerY,
+        halfWidth,
+        halfHeight
+      };
+      const fresh = index === 0 ? probe.sample(contentTexture, width, height, rect) : probe.statsFor(width, height, rect);
+      const stats = fresh ? settleStats(index, fresh) : null;
+      probes.push(stats);
+      gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+      gl.viewport(0, 0, width, height);
+      gl.enable(gl.BLEND);
+      gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
+      const reachOf = (m) => m ? Math.hypot(m.offsetX, m.offsetY) + Math.max(m.width, m.height) / 2 + m.smoothing : 0;
+      const morphReach = Math.max(reachOf(piece.morph), reachOf(piece.morph2));
+      const touchReach = piece.touch ? Math.hypot(piece.touch.pullX, piece.touch.pullY) + piece.touch.waveAmp * 2 + Math.max(piece.geometry.width, piece.geometry.height) * 0.05 * piece.touch.press : 0;
+      const padPx = (lensPadDp(piece.geometry, piece.optics) + surfacePadDp(piece.geometry, 0) + morphReach + touchReach) * options.density;
+      const left = Math.max(0, Math.floor(piece.centerX - halfWidth - padPx));
+      const right = Math.min(width, Math.ceil(piece.centerX + halfWidth + padPx));
+      const top = Math.max(0, Math.floor(height - (piece.centerY + halfHeight + padPx)));
+      const bottom = Math.min(height, Math.ceil(height - (piece.centerY - halfHeight - padPx)));
+      gl.enable(gl.SCISSOR_TEST);
+      gl.scissor(left, top, Math.max(0, right - left), Math.max(0, bottom - top));
+      gl.useProgram(lensProgram);
+      bindTextureAt(gl, 0, contentTexture, lensProgram, "content");
+      setUniform(gl, lensLoc("u_contentSize"), [width, height]);
+      setUniform(gl, lensLoc("u_resolution"), [width, height]);
+      setUniform(gl, lensLoc("u_center"), [piece.centerX, piece.centerY]);
+      setUniform(gl, lensLoc("u_reach"), Math.max(width, height));
+      setUniform(gl, lensLoc("u_contentMin"), [1, 1]);
+      setUniform(gl, lensLoc("u_contentMax"), [width - 1, height - 1]);
+      if (stats) {
+        setUniform(gl, lensLoc("u_probeLuma"), stats.luma);
+        setUniform(gl, lensLoc("u_probeBusy"), stats.busy);
+        setUniform(gl, lensLoc("u_probeRange"), [stats.lo, stats.hi]);
+        setUniform(gl, lensLoc("u_probeSlope"), [stats.slopeX, stats.slopeY]);
+        setUniform(gl, lensLoc("u_probe"), [stats.r, stats.g, stats.b]);
+      } else {
+        setUniform(gl, lensLoc("u_probeLuma"), -1);
+      }
+      const lens = toLensProps(piece.optics, piece.geometry, options.density, {
+        debug: options.debug,
+        morph: piece.morph,
+        morph2: piece.morph2,
+        touch: piece.touch,
+        progress: piece.progress,
+        light: piece.light,
+        appear: piece.appear,
+        accent: piece.accent
+      });
+      applyChannel(gl, lensLoc, lens.uniformNames, lens.uniformSizes, lens.uniformValues);
+      drawFullscreenTriangle(gl);
+      gl.useProgram(surfaceProgram);
+      const rawSurface = toSurfaceUniforms(piece.optics, piece.geometry, {
+        debug: options.debug,
+        morph: piece.morph,
+        morph2: piece.morph2,
+        bodyInLens: true,
+        touch: piece.touch,
+        progress: piece.progress,
+        // The shadow is denser over text, weaker over a flat backdrop (M 11:47). The rule lives
+        // in the core: while it lived here, Android didn't have it at all.
+        shadow: stats ? shadowOpacity(stats.busy) : 1,
+        // The probe has already computed the ambient color — the shadow gets it for free. Taken
+        // as-is: `settleStats` has already smoothed it, and rounding would bring back exactly the
+        // steps the smoothing was written to remove.
+        ambient: stats ? [stats.r, stats.g, stats.b] : void 0,
+        appear: piece.appear,
+        lift: piece.lift
+      });
+      applyObject(gl, surfaceLoc, {
+        ...toDeviceSurfaceUniforms(rawSurface, options.density),
+        u_center: [piece.centerX, piece.centerY]
+      });
+      setUniform(gl, surfaceLoc(DYNAMIC_UNIFORMS[0]), piece.press ?? 0);
+      setUniform(gl, surfaceLoc(DYNAMIC_UNIFORMS[1]), piece.active ?? 0);
+      const hasIcon = Boolean(piece.icon && options.iconMask);
+      setUniform(gl, surfaceLoc(ICON_UNIFORMS[0]), hasIcon ? 1 : 0);
+      setUniform(gl, surfaceLoc(ICON_UNIFORMS[1]), 1);
+      setUniform(gl, surfaceLoc(ICON_UNIFORMS[2]), piece.inkIdle ?? [1, 1, 1, 1]);
+      setUniform(gl, surfaceLoc(ICON_UNIFORMS[3]), piece.inkActive ?? [1, 1, 1, 1]);
+      bindTextureAt(gl, 1, iconTexture, surfaceProgram, "u_icon");
+      setUniform(gl, surfaceLoc("u_iconSize"), hasIcon ? [width, height] : [1, 1]);
+      const hasColor = Boolean(piece.overlay && options.colorLayer);
+      setUniform(gl, surfaceLoc(OVERLAY_UNIFORMS[0]), hasColor ? 1 : 0);
+      bindTextureAt(gl, 2, colorTexture, surfaceProgram, "u_overlay");
+      setUniform(gl, surfaceLoc("u_overlaySize"), hasColor ? [width, height] : [1, 1]);
+      setUniform(gl, surfaceLoc("u_resolution"), [width, height]);
+      drawFullscreenTriangle(gl);
+    }
+    gl.disable(gl.SCISSOR_TEST);
+    return { probes };
+  }
+  function destroy() {
+    probe.destroy();
+    gl.deleteProgram(blitProgram);
+    gl.deleteProgram(lensProgram);
+    gl.deleteProgram(surfaceProgram);
+    gl.deleteTexture(contentTexture);
+    gl.deleteTexture(iconTexture);
+    gl.deleteTexture(colorTexture);
+  }
+  return { resize, render, destroy };
+}
+
+// src/web/reference-draw.ts
+function drawLayer(ctx, layer, x, y, w, h, d) {
+  switch (layer.kind) {
+    case "flat": {
+      ctx.fillStyle = refGray(layer.level);
+      ctx.fillRect(x, y, w, h);
+      return;
+    }
+    case "stripes": {
+      ctx.fillStyle = refGray(layer.level);
+      ctx.fillRect(x, y, w, h);
+      ctx.fillStyle = refGray(layer.other);
+      for (let at = 0; at < w; at += layer.periodDp * d) {
+        ctx.fillRect(x + at, y, layer.widthDp * d, h);
+      }
+      return;
+    }
+    case "checker": {
+      for (const cell of refCheckerCells(layer, w / d, h / d)) {
+        ctx.fillStyle = refGray(cell.level);
+        ctx.fillRect(x + cell.xDp * d, y + cell.yDp * d, layer.cellDp * d + 1, layer.cellDp * d + 1);
+      }
+      return;
+    }
+    case "step": {
+      ctx.fillStyle = refGray(layer.left);
+      ctx.fillRect(x, y, w / 2, h);
+      ctx.fillStyle = refGray(layer.right);
+      ctx.fillRect(x + w / 2, y, w - w / 2, h);
+      return;
+    }
+    case "bar": {
+      ctx.fillStyle = refGray(layer.level);
+      ctx.fillRect(x, y, w, h);
+      const t = layer.thicknessDp * d;
+      ctx.fillStyle = refGray(layer.barLevel);
+      ctx.fillRect(x, y + Math.round((h - t) / 2), w, t);
+      return;
+    }
+    case "grid": {
+      ctx.fillStyle = refGray(layer.level);
+      ctx.fillRect(x, y, w, h);
+      const thin = 1;
+      const step = layer.stepDp * d;
+      ctx.fillStyle = refGray(layer.lineLevel);
+      for (let at = 0; at <= w; at += step) ctx.fillRect(x + Math.round(at), y, thin, h);
+      for (let at = 0; at <= h; at += step) ctx.fillRect(x, y + Math.round(at), w, thin);
+      return;
+    }
+    case "gradient": {
+      const steps = refGradientSteps(layer);
+      const band = h / steps.length;
+      for (let i = 0; i < steps.length; i += 1) {
+        ctx.fillStyle = refGray(steps[i]);
+        ctx.fillRect(x, y + Math.round(i * band), w, Math.ceil(band) + 1);
+      }
+      return;
+    }
+  }
+}
+function drawReferenceScene(ctx, scene, width, height, options) {
+  const d = options.density;
+  const bands = scene.bands(options.level ?? scene.level);
+  const fill = options.fit !== "band";
+  let x;
+  let y;
+  let w;
+  let scale;
+  if (fill) {
+    x = 0;
+    y = 0;
+    w = width;
+    scale = height / (REFERENCE_SCENE_HEIGHT * d);
+  } else {
+    ctx.fillStyle = REFERENCE_SURROUND;
+    ctx.fillRect(0, 0, width, height);
+    w = Math.round(REFERENCE_SCENE_WIDTH * d);
+    x = Math.round((width - w) / 2);
+    y = Math.round((height - REFERENCE_SCENE_HEIGHT * d) / 2);
+    scale = 1;
+  }
+  for (const band of bands) {
+    const h = Math.round(band.heightDp * d * scale);
+    drawLayer(ctx, band.layer, x, y, w, h, d);
+    y += h;
+  }
+}
+
+export { PROBE_GRID_HEIGHT, PROBE_GRID_WIDTH, createProbe, createVireGlassRenderer, drawReferenceScene };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map