vireuikit 0.3.0 → 0.4.0

package/dist/web/index.cjs

@@ -199,6 +199,51 @@ float2 vgCurlVelocitySeamless(float2 p, float phase, float4 s0, float4 s1, float
   return float2(py1 - py0, -(px1 - px0)) / (2.0 * e);
 }
 `;
+function hash31JS(x, y, z) {
+  const h = x * 127.1 + y * 311.7 + z * 74.7;
+  const s = Math.sin(h) * 43758.5453123;
+  return s - Math.floor(s);
+}
+var smoothstep3JS = (f) => f * f * (3 - 2 * f);
+var glslMod = (x, y) => x - y * Math.floor(x / y);
+function vgValueNoise3PeriodicJS(px, py, pz, period) {
+  const ix = Math.floor(px);
+  const iy = Math.floor(py);
+  const iz = Math.floor(pz);
+  const ux = smoothstep3JS(px - ix);
+  const uy = smoothstep3JS(py - iy);
+  const uz = smoothstep3JS(pz - iz);
+  const z0 = glslMod(iz, period);
+  const z1 = glslMod(iz + 1, period);
+  const n000 = hash31JS(ix, iy, z0);
+  const n100 = hash31JS(ix + 1, iy, z0);
+  const n010 = hash31JS(ix, iy + 1, z0);
+  const n110 = hash31JS(ix + 1, iy + 1, z0);
+  const n001 = hash31JS(ix, iy, z1);
+  const n101 = hash31JS(ix + 1, iy, z1);
+  const n011 = hash31JS(ix, iy + 1, z1);
+  const n111 = hash31JS(ix + 1, iy + 1, z1);
+  const nx00 = n000 + (n100 - n000) * ux;
+  const nx10 = n010 + (n110 - n010) * ux;
+  const nx01 = n001 + (n101 - n001) * ux;
+  const nx11 = n011 + (n111 - n011) * ux;
+  const nxy0 = nx00 + (nx10 - nx00) * uy;
+  const nxy1 = nx01 + (nx11 - nx01) * uy;
+  return (nxy0 + (nxy1 - nxy0) * uz) * 2 - 1;
+}
+function vgPotentialJS(px, py, phase) {
+  const [o0, o1, o2, o3] = MEDIUM_TIME_OCTAVES;
+  let v = vgValueNoise3PeriodicJS(px * o0.scale, py * o0.scale, phase * o0.rate + o0.offset, mediumOctavePeriod(o0.rate)) * 0.5;
+  v += vgValueNoise3PeriodicJS(px * o1.scale, py * o1.scale, phase * o1.rate + o1.offset, mediumOctavePeriod(o1.rate)) * 0.25;
+  v += vgValueNoise3PeriodicJS(px * o2.scale, py * o2.scale, phase * o2.rate + o2.offset, mediumOctavePeriod(o2.rate)) * 0.125;
+  const macro = vgValueNoise3PeriodicJS(
+    px * o3.scale,
+    py * o3.scale,
+    phase * o3.rate + o3.offset,
+    mediumOctavePeriod(o3.rate)
+  );
+  return v * (0.7 + 0.3 * macro);
+}
 var MIN_SPATIAL_PERIOD = 2;
 function computeMediumSpatialPeriods(gridWidth, gridHeight, curlFreq) {
   const freq = Math.max(curlFreq, 1e-6);
@@ -307,9 +352,46 @@ function neutralSpecies(baseColor) {
 }
 
 // src/medium/params.ts
+var MEDIUM_MAX_LIGHTS = 3;
 var BASE_COLOR = [0.07, 0.08, 0.1];
+var normalize2 = (v) => {
+  const len = Math.hypot(v[0], v[1]) || 1;
+  return [v[0] / len, v[1] / len];
+};
+var MEDIUM_DEFAULT_LIGHT_COLOR = [0.78, 0.85, 0.94];
+var MEDIUM_DEFAULT_LIGHTS = [
+  {
+    position: [0.5, 0],
+    direction: [0, 1],
+    coneAngle: Math.PI,
+    falloff: 16,
+    color: MEDIUM_DEFAULT_LIGHT_COLOR,
+    intensity: 0.28
+  },
+  {
+    position: [0.12, 1.45],
+    direction: normalize2([0.38, -1.03]),
+    coneAngle: 9 * Math.PI / 180,
+    falloff: 0.7,
+    color: MEDIUM_DEFAULT_LIGHT_COLOR,
+    intensity: 1.1
+  },
+  {
+    position: [0.9, 1.4],
+    direction: normalize2([-0.4, -0.98]),
+    coneAngle: 8 * Math.PI / 180,
+    falloff: 0.75,
+    color: MEDIUM_DEFAULT_LIGHT_COLOR,
+    intensity: 0.9
+  }
+];
 var MEDIUM_DEFAULTS = {
-  decay: 0.06,
+  // A stamped track has to visibly broaden and fade within the reference's "roughly one to two
+  // seconds", not the ~11s half-life a 0.06 decay gives — measured against check-medium.mjs's track
+  // gate (birth vs +1.5s cross-section width and total density): 1.1 leaves ~30% of the peak at 1s
+  // and ~17% at 1.5s, comfortably faded without dying before MacCormack's own diffusion has time to
+  // visibly broaden the stamp.
+  decay: 1.1,
   curlFreq: 0.045,
   curlSpeed: 0.12,
   advectSpeed: 26,
@@ -324,6 +406,7 @@ var MEDIUM_DEFAULTS = {
   condensateGain: 5,
   condensateColor: [0.94, 0.95, 0.97],
   channelColors: neutralSpecies(BASE_COLOR),
+  channelScatter: [1, 1, 1],
   baseColor: BASE_COLOR,
   baseWeight: 0.9,
   depthFarScale: 1.6,
@@ -332,11 +415,61 @@ var MEDIUM_DEFAULTS = {
   depthFarWeight: 0.5,
   gravityVaporDrift: 0.6,
   gravityBottomBoost: 2,
-  gravityBottomBoostStart: 0.75
+  gravityBottomBoostStart: 0.75,
+  lights: MEDIUM_DEFAULT_LIGHTS,
+  shadowExtinction: 3,
+  trackLightFloor: 0.8,
+  trackLayerAmount: 1
 };
 function depthFarOffsetPx(offsetFrac, gridWidth, gridHeight) {
   return [offsetFrac[0] * gridWidth, offsetFrac[1] * gridHeight];
 }
+var MEDIUM_TRACK_LAYER_LIFE_SECONDS = {
+  alpha: 1.8,
+  electron: 1.4,
+  muon: 2.2
+};
+var MEDIUM_TRACK_LAYER_MAX_TRACKS = 64;
+var MEDIUM_TRACK_LAYER_LOOK = {
+  alpha: {
+    sigmaFrac: 22e-4,
+    endSigmaMul: 1.9,
+    broaden: 3.2,
+    wiggleFrac: 0,
+    beadFrac: 6e-3,
+    dropletFrac: 35e-4,
+    dropletChance: 0.5,
+    startFrac: 0.035,
+    gain: 1.8
+  },
+  electron: {
+    sigmaFrac: 9e-4,
+    endSigmaMul: 1.3,
+    broaden: 6,
+    wiggleFrac: 0.012,
+    beadFrac: 8e-3,
+    dropletFrac: 6e-3,
+    dropletChance: 0.55,
+    startFrac: 0,
+    gain: 2.2
+  },
+  muon: {
+    sigmaFrac: 8e-4,
+    endSigmaMul: 1,
+    broaden: 5,
+    wiggleFrac: 0,
+    beadFrac: 7e-3,
+    dropletFrac: 5e-3,
+    dropletChance: 0.5,
+    startFrac: 0,
+    gain: 2.2
+  }
+};
+var MEDIUM_TRACK_LAYER_BURST_SPREAD = 1.6;
+var MEDIUM_TRACK_LAYER_BURST_ACCENT = 3;
+var MEDIUM_TRACK_LAYER_FADE_GAMMA = 1.6;
+var MEDIUM_TRACK_LAYER_GRAVITY_SAG = 0.018;
+var MEDIUM_TRACK_LAYER_CURL_PUSH = 0.05;
 
 // src/medium/seed-shader.ts
 var MEDIUM_SEED_SHADER = `
@@ -589,10 +722,35 @@ half4 ${fnName}(float2 px) {
 }
 `;
 }
+var VG_LIGHT = `
+float vgLightAmount(float2 xy, float2 lightPosFrac, float2 lightDir, float cosCone, float falloff, float2 resolution, float seed) {
+  float2 rel = xy - lightPosFrac * resolution;
+  // A cone of 180\xB0 or more is an edge strip: light spreads from a line, not a point.
+  if (cosCone <= -0.999) {
+    float depth = max(dot(rel, lightDir), 0.0);
+    return exp(-(depth / max(resolution.y, 1.0)) * falloff);
+  }
+  float dist = length(rel);
+  float2 dirN = dist > 1e-4 ? rel / dist : lightDir;
+  float cosAngle = dot(dirN, lightDir);
+  // A soft lobe with half intensity at the cone angle and no boundary at all: a lamp in haze has
+  // no drawn edge.
+  float lobe = log(0.5) / log(clamp(cosCone, 0.05, 0.999));
+  float edge = pow(max(cosAngle, 0.0), lobe);
+  float atten = exp(-(dist / max(resolution.y, 1.0)) * falloff);
+  if (edge * atten < 0.001) return 0.0;
+  // Static shafts inside the beam: brightness varies with the angle around the lamp, so streaks
+  // fan out from the source the way light through dusty air does.
+  float angle = atan(dirN.x * lightDir.y - dirN.y * lightDir.x, cosAngle);
+  float shafts = 0.6 + 0.32 * vgValueNoise(float2(angle * 14.0, seed)) + 0.18 * vgValueNoise(float2(angle * 33.0, seed + 5.3));
+  return edge * atten * clamp(shafts, 0.0, 1.0);
+}
+`;
 var MEDIUM_COMPOSITE_SHADER = `
 uniform shader u_vapor;
 uniform shader u_condensate;
 uniform shader u_track;
+uniform shader u_shadow;
 uniform float2 u_dyeScale;
 uniform float3 u_lab0;
 uniform float3 u_lab1;
@@ -608,11 +766,33 @@ uniform float  u_farBlurRadius;
 uniform float  u_farWeight;
 uniform float  u_gravityBoost;
 uniform float  u_gravityBoostStart;
+uniform float3 u_channelScatter;
+uniform float2 u_light0Pos;
+uniform float2 u_light0Dir;
+uniform float  u_light0CosCone;
+uniform float  u_light0Falloff;
+uniform float3 u_light0Color;
+uniform float  u_light0Intensity;
+uniform float2 u_light1Pos;
+uniform float2 u_light1Dir;
+uniform float  u_light1CosCone;
+uniform float  u_light1Falloff;
+uniform float3 u_light1Color;
+uniform float  u_light1Intensity;
+uniform float2 u_light2Pos;
+uniform float2 u_light2Dir;
+uniform float  u_light2CosCone;
+uniform float  u_light2Falloff;
+uniform float3 u_light2Color;
+uniform float  u_light2Intensity;
+uniform float  u_trackLightFloor;
 
 ${VG_OKLAB_TO_SRGB}
 ${VG_CUBIC_WEIGHTS}
 ${vgBicubicSampler("vgBicubicVapor", "u_vapor")}
 ${vgBicubicSampler("vgBicubicCondensate", "u_condensate")}
+${VG_VALUE_NOISE}
+${VG_LIGHT}
 
 half4 main(float2 xy) {
   float2 baseSrc = xy * u_dyeScale;
@@ -680,7 +860,34 @@ half4 main(float2 xy) {
   float total = max(w0 + w1 + w2 + wBg + wCondensate, 1e-4);
   float3 mixLab =
     (u_labBg * wBg + u_lab0 * w0 + u_lab1 * w1 + u_lab2 * w2 + condensateLab * wCondensate) / total;
-  float3 rgbLinear = clamp(vgOklabToLinear(mixLab), float3(0.0), float3(1.0));
+  // The dark ambient base \u2014 this is where the OLD mechanism stops (see the file header on
+  // VG_LIGHT): unclamped here, clamped once at the very end, after the lit layer adds in.
+  float3 rgbLinearBase = vgOklabToLinear(mixLab);
+
+  // Spotlights reach this point dimmed by the gas in front of them (shadow-shader.ts).
+  half4 shadow = u_shadow.eval(baseSrc);
+  float light0 = vgLightAmount(xy, u_light0Pos, u_light0Dir, u_light0CosCone, u_light0Falloff, u_resolution, 1.7) * u_light0Intensity;
+  float light1 = vgLightAmount(xy, u_light1Pos, u_light1Dir, u_light1CosCone, u_light1Falloff, u_resolution, 4.1) * u_light1Intensity
+    * float(shadow.r);
+  float light2 = vgLightAmount(xy, u_light2Pos, u_light2Dir, u_light2CosCone, u_light2Falloff, u_resolution, 8.3) * u_light2Intensity
+    * float(shadow.g);
+  float3 illum = u_light0Color * light0 + u_light1Color * light1 + u_light2Color * light2;
+
+  float totalScatter = gasR * u_channelScatter.x + gasG * u_channelScatter.y + gasB * u_channelScatter.z;
+  float fogDensity = totalScatter + wCondensate;
+  float mist = 0.006 + fogDensity * 0.2;
+
+  // TRACKS: lit the same way as the mist, plus a floor so a track already on screen never vanishes
+  // entirely just because it drifted out of a cone (a fresh ionization trail reads brighter than
+  // ambient mist in a real chamber). The floor is added to ITS OWN color, not multiplied into illum:
+  // illum is exactly [0,0,0] in a fully unlit spot (every light's amount is 0 there), so a floor
+  // multiplied by illum would vanish exactly where it exists to help \u2014 it needs a color of its own
+  // (a neutral, self-luminous glow) rather than borrowing whichever light happens to be nearby.
+  float trackDensity = max(float(track.r), max(float(track.g), float(track.b)));
+  float3 trackGlow = (1.0 - exp(-trackDensity * 0.4)) * (illum + float3(u_trackLightFloor)) * 0.08;
+
+  float3 rgbLinear = rgbLinearBase * 0.025 + illum * mist + trackGlow;
+  rgbLinear = float3(1.0) - exp(-rgbLinear * 1.0);
   float3 srgb = vgLinearToSrgb(rgbLinear);
   return half4(half3(srgb), half(1.0));
 }
@@ -698,7 +905,6 @@ uniform float  u_settle;
 uniform float  u_tailDim;
 uniform float  u_intensity;
 uniform float  u_seed;
-uniform float3 u_channelMask;
 
 ${VG_VALUE_NOISE}
 
@@ -721,10 +927,407 @@ half4 main(float2 xy) {
     best = max(best, v);
   }
 
-  float3 dye = u_channelMask * (best * u_intensity);
+  float3 dye = float3(best * u_intensity);
   return half4(half3(dye), half(1.0));
 }
 `;
+
+// src/medium/shadow-shader.ts
+var MEDIUM_SHADOW_SHADER = `
+uniform shader u_vapor;
+uniform shader u_condensate;
+uniform float  u_condensateGain;
+uniform float2 u_light1Grid;
+uniform float2 u_light2Grid;
+uniform float  u_extinction;
+
+float vgOpticalDepth(float2 p, float2 lightP) {
+  float2 toLight = lightP - p;
+  float optical = 0.0;
+  for (int i = 1; i <= 24; i++) {
+    float2 q = p + toLight * (float(i) / 24.0);
+    float inside = step(0.0, q.x) * step(q.x, u_resolution.x) * step(0.0, q.y) * step(q.y, u_resolution.y);
+    half4 v = u_vapor.eval(q);
+    half4 c = u_condensate.eval(q);
+    optical += inside * (float(v.r + v.g + v.b) + float(c.r) * u_condensateGain);
+  }
+  return optical * length(toLight) / 24.0 / max(u_resolution.y, 1.0);
+}
+
+half4 main(float2 xy) {
+  float2 p = float2(xy.x, u_resolution.y - xy.y);
+  float t1 = exp(-vgOpticalDepth(p, u_light1Grid) * u_extinction);
+  float t2 = exp(-vgOpticalDepth(p, u_light2Grid) * u_extinction);
+  return half4(half(t1), half(t2), half(0.0), half(1.0));
+}
+`;
+
+// src/web/track-layer.ts
+function trackLayerFade(age, life) {
+  if (life <= 0) return 0;
+  const t = Math.min(Math.max(age / life, 0), 1);
+  return (1 - t) ** MEDIUM_TRACK_LAYER_FADE_GAMMA;
+}
+function trackLayerSigmaMul(age, broaden) {
+  return Math.sqrt(1 + broaden * Math.max(age, 0));
+}
+function hash01(n) {
+  const s = Math.sin(n * 91.3458) * 47453.5453;
+  return s - Math.floor(s);
+}
+function curlVelocityJS(px, py, phase) {
+  const e = 0.6;
+  const px1 = vgPotentialJS(px + e, py, phase);
+  const px0 = vgPotentialJS(px - e, py, phase);
+  const py1 = vgPotentialJS(px, py + e, phase);
+  const py0 = vgPotentialJS(px, py - e, phase);
+  return [(py1 - py0) / (2 * e), -(px1 - px0) / (2 * e)];
+}
+var CURL_SAMPLE_SCALE = 40;
+var PHASE_WRAP = 1e4;
+function createTrackLayer() {
+  let tracks = [];
+  let phase = 0;
+  function step(dt, emissions) {
+    phase = (phase + dt) % PHASE_WRAP;
+    const next = [];
+    for (const track of tracks) {
+      const life = MEDIUM_TRACK_LAYER_LIFE_SECONDS[track.emission.kind];
+      const age = track.age + dt;
+      if (age >= life) continue;
+      if (age <= 0) {
+        next.push({ ...track, age });
+        continue;
+      }
+      const midX = track.emission.source[0] + Math.cos(track.emission.angle) * track.emission.lengthFrac * 0.5;
+      const midY = track.emission.source[1] + Math.sin(track.emission.angle) * track.emission.lengthFrac * 0.5;
+      const [curlX, curlY] = curlVelocityJS(midX * CURL_SAMPLE_SCALE, midY * CURL_SAMPLE_SCALE, phase);
+      const activeDt = Math.min(dt, age);
+      next.push({
+        emission: track.emission,
+        age,
+        driftX: track.driftX + curlX * MEDIUM_TRACK_LAYER_CURL_PUSH * activeDt,
+        driftY: track.driftY + (curlY * MEDIUM_TRACK_LAYER_CURL_PUSH - MEDIUM_TRACK_LAYER_GRAVITY_SAG) * activeDt
+      });
+    }
+    let burstIndex = 0;
+    for (const emission of emissions) {
+      let age = 0;
+      if (emission.kind === "alpha") {
+        if (burstIndex >= MEDIUM_TRACK_LAYER_BURST_ACCENT) {
+          age = -hash01(emission.seed * 3.17 + burstIndex) * MEDIUM_TRACK_LAYER_BURST_SPREAD;
+        }
+        burstIndex += 1;
+      }
+      next.push({ emission, age, driftX: 0, driftY: 0 });
+    }
+    tracks = next.length > MEDIUM_TRACK_LAYER_MAX_TRACKS ? next.slice(next.length - MEDIUM_TRACK_LAYER_MAX_TRACKS) : next;
+    return tracks;
+  }
+  return { step };
+}
+var TRACK_LAYER_VERTEX_SOURCE = `#version 300 es
+layout(location = 0) in vec2 a_corner;
+layout(location = 1) in vec4 a_geom;
+layout(location = 2) in vec4 a_span;
+layout(location = 3) in vec4 a_path;
+layout(location = 4) in vec4 a_grain;
+
+uniform vec2 u_resolution;
+uniform float u_trackLightFloor;
+uniform sampler2D u_shadow;
+uniform vec2 u_light0Pos;
+uniform vec2 u_light0Dir;
+uniform float u_light0CosCone;
+uniform float u_light0Falloff;
+uniform vec3 u_light0Color;
+uniform float u_light0Intensity;
+uniform vec2 u_light1Pos;
+uniform vec2 u_light1Dir;
+uniform float u_light1CosCone;
+uniform float u_light1Falloff;
+uniform vec3 u_light1Color;
+uniform float u_light1Intensity;
+uniform vec2 u_light2Pos;
+uniform vec2 u_light2Dir;
+uniform float u_light2CosCone;
+uniform float u_light2Falloff;
+uniform vec3 u_light2Color;
+uniform float u_light2Intensity;
+
+out vec2 v_local;
+flat out vec4 v_span;
+flat out vec4 v_path;
+flat out vec4 v_grain;
+flat out float v_reach;
+out vec3 v_illum;
+
+float vgHash21(vec2 p) {
+  float h = dot(p, vec2(127.1, 311.7));
+  return fract(sin(h) * 43758.5453123);
+}
+
+float vgValueNoise(vec2 p) {
+  vec2 i = floor(p);
+  vec2 f = fract(p);
+  float a = vgHash21(i);
+  float b = vgHash21(i + vec2(1.0, 0.0));
+  float c = vgHash21(i + vec2(0.0, 1.0));
+  float d = vgHash21(i + vec2(1.0, 1.0));
+  vec2 u = f * f * (3.0 - 2.0 * f);
+  return mix(mix(a, b, u.x), mix(c, d, u.x), u.y) * 2.0 - 1.0;
+}
+
+// Keep in step with vgLightAmount in composite-shader.ts.
+float vgLightAmount(vec2 xy, vec2 lightPosFrac, vec2 lightDir, float cosCone, float falloff, vec2 resolution, float seed) {
+  vec2 rel = xy - lightPosFrac * resolution;
+  if (cosCone <= -0.999) {
+    float depth = max(dot(rel, lightDir), 0.0);
+    return exp(-(depth / max(resolution.y, 1.0)) * falloff);
+  }
+  float dist = length(rel);
+  vec2 dirN = dist > 1e-4 ? rel / dist : lightDir;
+  float cosAngle = dot(dirN, lightDir);
+  float lobe = log(0.5) / log(clamp(cosCone, 0.05, 0.999));
+  float edge = pow(max(cosAngle, 0.0), lobe);
+  float atten = exp(-(dist / max(resolution.y, 1.0)) * falloff);
+  if (edge * atten < 0.001) return 0.0;
+  float angle = atan(dirN.x * lightDir.y - dirN.y * lightDir.x, cosAngle);
+  float shafts = 0.6 + 0.32 * vgValueNoise(vec2(angle * 14.0, seed)) + 0.18 * vgValueNoise(vec2(angle * 33.0, seed + 5.3));
+  return edge * atten * clamp(shafts, 0.0, 1.0);
+}
+
+void main() {
+  vec2 dir = a_geom.zw;
+  vec2 side = vec2(-dir.y, dir.x);
+  // Beads widen sigma by up to 20%; 3.5 sigma leaves under 1% of the core outside the quad.
+  float reach = max(a_span.z, a_span.w) * 1.2 * 3.5 + 1.5;
+  float margin = reach + a_path.x * 1.7;
+  float u = mix(a_span.y - reach, a_span.x + reach, a_corner.y);
+  float s = a_corner.x * margin;
+  vec2 pos = a_geom.xy + dir * u + side * s;
+  v_local = vec2(u, s);
+  v_span = a_span;
+  v_path = a_path;
+  v_grain = a_grain;
+  v_reach = reach;
+  // Lit per corner: light varies over hundreds of px, a track is a few px wide. The backdrop
+  // target stores the scene top row at y = 0; lights use y up.
+  vec2 xy = vec2(pos.x, u_resolution.y - pos.y);
+  // The same gas shadow the composite applies to the spotlights (shadow-shader.ts, y up).
+  vec4 shadow = texture(u_shadow, xy / u_resolution);
+  float light0 = vgLightAmount(xy, u_light0Pos, u_light0Dir, u_light0CosCone, u_light0Falloff, u_resolution, 1.7) * u_light0Intensity;
+  float light1 = vgLightAmount(xy, u_light1Pos, u_light1Dir, u_light1CosCone, u_light1Falloff, u_resolution, 4.1) * u_light1Intensity * shadow.r;
+  float light2 = vgLightAmount(xy, u_light2Pos, u_light2Dir, u_light2CosCone, u_light2Falloff, u_resolution, 8.3) * u_light2Intensity * shadow.g;
+  v_illum = u_light0Color * light0 + u_light1Color * light1 + u_light2Color * light2 + vec3(u_trackLightFloor);
+  gl_Position = vec4((pos / u_resolution) * 2.0 - 1.0, 0.0, 1.0);
+}
+`;
+var TRACK_LAYER_FRAGMENT_SOURCE = `#version 300 es
+precision highp float;
+
+in vec2 v_local;
+flat in vec4 v_span;
+flat in vec4 v_path;
+flat in vec4 v_grain;
+flat in float v_reach;
+in vec3 v_illum;
+
+out vec4 fragColor;
+
+float vgHash(float a, float b) {
+  uint x = floatBitsToUint(a) * 0x9E3779B1u ^ (floatBitsToUint(b) + 0x7F4A7C15u);
+  x ^= x >> 16;
+  x *= 0x7FEB352Du;
+  x ^= x >> 15;
+  x *= 0x846CA68Bu;
+  x ^= x >> 16;
+  return float(x) * (1.0 / 4294967295.0);
+}
+
+float vgNoise1(float x, float salt) {
+  float i = floor(x);
+  float f = fract(x);
+  float u = f * f * (3.0 - 2.0 * f);
+  return mix(vgHash(i, salt), vgHash(i + 1.0, salt), u);
+}
+
+void main() {
+  float len = v_span.x;
+  float start = v_span.y;
+  float sigma0 = v_span.z;
+  float sigma1 = v_span.w;
+  float wiggleAmp = v_path.x;
+  float wiggleFreq = v_path.y;
+  float amp = v_path.z;
+  float seed = v_path.w;
+  float beadPx = v_grain.x;
+  float dropPx = v_grain.y;
+  float dropChance = v_grain.z;
+  float blur = v_grain.w;
+
+  float u = v_local.x;
+  float s = v_local.y;
+  float t = clamp((u - start) / max(len - start, 1.0), 0.0, 1.0);
+
+  float wiggle = 0.0;
+  if (wiggleAmp > 0.0) {
+    float x = u * wiggleFreq;
+    wiggle = wiggleAmp * smoothstep(0.0, 0.2, t) *
+      ((vgNoise1(x, seed) - 0.5) * 2.0 + (vgNoise1(x * 3.1, seed + 1.0) - 0.5) * 0.7);
+  }
+  float across = s - wiggle;
+  if (abs(across) > v_reach) discard;
+
+  float bead = vgNoise1(u / beadPx, seed + 2.0);
+  // Blur (age, defocus) washes the beads out rather than stretching them into ribs.
+  float sigma = mix(sigma0, sigma1, t * t) * (1.0 + (bead - 0.5) * 0.4 / blur);
+  float beyond = u < start ? start - u : max(u - len, 0.0);
+  float core = exp(-0.5 * (across * across + beyond * beyond) / (sigma * sigma));
+  float along = 1.0 - 0.35 / blur * vgNoise1(u / (beadPx * 2.3), seed + 3.0);
+
+  float drops = 0.0;
+  float cell0 = floor(u / dropPx);
+  for (int k = -1; k <= 1; k++) {
+    float c = cell0 + float(k);
+    if (vgHash(c, seed + 4.0) > dropChance) continue;
+    float cu = (c + vgHash(c, seed + 5.0)) * dropPx;
+    if (cu < start || cu > len) continue;
+    float cs = (vgHash(c, seed + 6.0) + vgHash(c, seed + 7.0) - 1.0) * 1.7 * sigma + wiggle;
+    float r = max(0.7, sigma * mix(0.35, 0.8, vgHash(c, seed + 8.0)));
+    float dx = u - cu;
+    float dy = s - cs;
+    drops += mix(0.35, 1.0, vgHash(c, seed + 9.0)) * exp(-0.5 * (dx * dx + dy * dy) / (r * r));
+  }
+
+  float lum = amp * (core * along + drops * 0.7 / (blur * blur));
+  if (lum < 0.002) discard;
+
+  vec3 glow = lum * v_illum;
+  fragColor = vec4(vec3(1.0) - exp(-glow), 1.0);
+}
+`;
+var FLOATS_PER_INSTANCE = 16;
+var DEFOCUS_FROM_DEPTH = 0.7;
+var DEFOCUS_MAX = 2.4;
+function buildTrackLayerInstances(tracks, contentWidth, contentHeight, amount) {
+  const minDim = Math.min(contentWidth, contentHeight);
+  const data = new Float32Array(tracks.length * FLOATS_PER_INSTANCE);
+  let count = 0;
+  if (amount <= 0) return { data, count };
+  for (const track of tracks) {
+    if (track.age < 0) continue;
+    const e = track.emission;
+    const fade = trackLayerFade(track.age, MEDIUM_TRACK_LAYER_LIFE_SECONDS[e.kind]);
+    if (fade <= 1e-4) continue;
+    const look = MEDIUM_TRACK_LAYER_LOOK[e.kind];
+    const sigmaMul = trackLayerSigmaMul(track.age, look.broaden);
+    const near = Math.max(0, (e.depth - DEFOCUS_FROM_DEPTH) / (1 - DEFOCUS_FROM_DEPTH));
+    const defocus = 1 + (DEFOCUS_MAX - 1) * near * near;
+    const sigma0 = Math.max(look.sigmaFrac * minDim, 0.6) * sigmaMul * defocus;
+    const o = count * FLOATS_PER_INSTANCE;
+    data[o + 0] = e.source[0] * contentWidth + track.driftX * minDim;
+    data[o + 1] = e.source[1] * contentHeight - track.driftY * minDim;
+    data[o + 2] = Math.cos(e.angle);
+    data[o + 3] = Math.sin(e.angle);
+    const len = e.lengthFrac * minDim;
+    data[o + 4] = len;
+    data[o + 5] = Math.min(look.startFrac * minDim, len * 0.5);
+    data[o + 6] = sigma0;
+    data[o + 7] = sigma0 * look.endSigmaMul;
+    data[o + 8] = e.raggedFrac > 0 ? look.wiggleFrac * minDim : 0;
+    data[o + 9] = e.raggedFreq / Math.max(len, 1);
+    data[o + 10] = e.intensity * look.gain * fade * amount / (sigmaMul ** 0.7 * defocus);
+    data[o + 11] = e.seed;
+    data[o + 12] = look.beadFrac * minDim;
+    data[o + 13] = look.dropletFrac * minDim;
+    data[o + 14] = look.dropletChance;
+    data[o + 15] = sigmaMul * defocus;
+    count += 1;
+  }
+  return { data, count };
+}
+function compile(gl, type, source, label) {
+  const shader = gl.createShader(type);
+  if (!shader) throw new Error(`vireuikit: track layer ${label} shader creation failed`);
+  gl.shaderSource(shader, source);
+  gl.compileShader(shader);
+  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+    throw new Error(`vireuikit: track layer ${label} shader failed:
+${gl.getShaderInfoLog(shader) ?? ""}`);
+  }
+  return shader;
+}
+function createTrackLayerProgram(gl) {
+  const vertex = compile(gl, gl.VERTEX_SHADER, TRACK_LAYER_VERTEX_SOURCE, "vertex");
+  const fragment = compile(gl, gl.FRAGMENT_SHADER, TRACK_LAYER_FRAGMENT_SOURCE, "fragment");
+  const program = gl.createProgram();
+  if (!program) throw new Error("vireuikit: track layer program creation failed");
+  gl.attachShader(program, vertex);
+  gl.attachShader(program, fragment);
+  gl.linkProgram(program);
+  gl.deleteShader(vertex);
+  gl.deleteShader(fragment);
+  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+    throw new Error(`vireuikit: track layer program failed to link:
+${gl.getProgramInfoLog(program) ?? ""}`);
+  }
+  const loc = web.locationCache(gl, program);
+  const quadBuffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, quadBuffer);
+  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, 0, 1, 0, -1, 1, 1, 1]), gl.STATIC_DRAW);
+  const instanceBuffer = gl.createBuffer();
+  const vao = gl.createVertexArray();
+  gl.bindVertexArray(vao);
+  gl.bindBuffer(gl.ARRAY_BUFFER, quadBuffer);
+  gl.enableVertexAttribArray(0);
+  gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
+  const stride = FLOATS_PER_INSTANCE * 4;
+  gl.bindBuffer(gl.ARRAY_BUFFER, instanceBuffer);
+  for (let location = 1; location <= 4; location += 1) {
+    gl.enableVertexAttribArray(location);
+    gl.vertexAttribPointer(location, 4, gl.FLOAT, false, stride, (location - 1) * 16);
+    gl.vertexAttribDivisor(location, 1);
+  }
+  gl.bindVertexArray(null);
+  function bindLight(slot, light) {
+    const position = light?.position ?? [0, 0];
+    const direction = light?.direction ?? [0, 1];
+    const dirLen = Math.hypot(direction[0], direction[1]) || 1;
+    web.setUniform(gl, loc(`u_light${slot}Pos`), position);
+    web.setUniform(gl, loc(`u_light${slot}Dir`), [direction[0] / dirLen, direction[1] / dirLen]);
+    web.setUniform(gl, loc(`u_light${slot}CosCone`), Math.cos(light?.coneAngle ?? 0));
+    web.setUniform(gl, loc(`u_light${slot}Falloff`), light?.falloff ?? 0);
+    web.setUniform(gl, loc(`u_light${slot}Color`), light?.color ?? [0, 0, 0]);
+    web.setUniform(gl, loc(`u_light${slot}Intensity`), light?.intensity ?? 0);
+  }
+  function draw(contentWidth, contentHeight, data, count, trackLightFloor, lights, shadow) {
+    if (count <= 0) return;
+    gl.useProgram(program);
+    gl.bindVertexArray(vao);
+    gl.bindBuffer(gl.ARRAY_BUFFER, instanceBuffer);
+    gl.bufferData(gl.ARRAY_BUFFER, data.subarray(0, count * FLOATS_PER_INSTANCE), gl.DYNAMIC_DRAW);
+    web.setUniform(gl, loc("u_resolution"), [contentWidth, contentHeight]);
+    web.setUniform(gl, loc("u_trackLightFloor"), trackLightFloor);
+    for (let slot = 0; slot < 3; slot += 1) bindLight(slot, lights[slot]);
+    web.bindTextureAt(gl, 0, shadow, program, "u_shadow");
+    gl.enable(gl.BLEND);
+    gl.blendFunc(gl.ONE, gl.ONE);
+    gl.disable(gl.DEPTH_TEST);
+    gl.viewport(0, 0, contentWidth, contentHeight);
+    gl.drawArraysInstanced(gl.TRIANGLE_STRIP, 0, 4, count);
+    gl.bindVertexArray(null);
+  }
+  function destroy() {
+    gl.deleteBuffer(quadBuffer);
+    gl.deleteBuffer(instanceBuffer);
+    gl.deleteVertexArray(vao);
+    gl.deleteProgram(program);
+  }
+  return { draw, destroy };
+}
+
+// src/web/medium.ts
 function pickDyeFormat(gl) {
   const hasFloat = gl.getExtension("EXT_color_buffer_float") !== null;
   return hasFloat ? { internalFormat: gl.RGBA16F, type: gl.HALF_FLOAT } : { internalFormat: gl.RGBA8, type: gl.UNSIGNED_BYTE };
@@ -742,6 +1345,10 @@ function createMediumRuntime(gl, vertexSource) {
   const seedProgram = web.createProgram(gl, vertexSource, vireglass.toGLSL(MEDIUM_SEED_SHADER));
   const emitProgram = web.createProgram(gl, vertexSource, vireglass.toGLSL(MEDIUM_EMIT_SHADER));
   const resampleProgram = web.createProgram(gl, vertexSource, vireglass.toGLSL(MEDIUM_RESAMPLE_SHADER));
+  const shadowProgram = web.createProgram(gl, vertexSource, vireglass.toGLSL(MEDIUM_SHADOW_SHADER));
+  const trackLayerProgram = createTrackLayerProgram(gl);
+  const trackLayer = createTrackLayer();
+  let liveTracks = [];
   const vaporForwardLoc = web.locationCache(gl, vaporForwardProgram);
   const vaporCorrectLoc = web.locationCache(gl, vaporCorrectProgram);
   const vaporReactLoc = web.locationCache(gl, vaporReactProgram);
@@ -753,6 +1360,7 @@ function createMediumRuntime(gl, vertexSource) {
   const seedLoc = web.locationCache(gl, seedProgram);
   const emitLoc = web.locationCache(gl, emitProgram);
   const resampleLoc = web.locationCache(gl, resampleProgram);
+  const shadowLoc = web.locationCache(gl, shadowProgram);
   let gridW = 0;
   let gridH = 0;
   let vapor = null;
@@ -762,6 +1370,7 @@ function createMediumRuntime(gl, vertexSource) {
   let vaporCorrected = null;
   let condensateForward = null;
   let condensateCorrected = null;
+  let shadow = null;
   let front = 0;
   function makeTarget(w, h) {
     const texture = web.createTexture(gl, {
@@ -805,6 +1414,7 @@ function createMediumRuntime(gl, vertexSource) {
     destroyTarget(vaporCorrected);
     destroyTarget(condensateForward);
     destroyTarget(condensateCorrected);
+    destroyTarget(shadow);
     vapor = null;
     condensate = null;
     track = null;
@@ -812,6 +1422,7 @@ function createMediumRuntime(gl, vertexSource) {
     vaporCorrected = null;
     condensateForward = null;
     condensateCorrected = null;
+    shadow = null;
   }
   function seed(w, h) {
     if (!vapor || !condensate || !track) return;
@@ -865,6 +1476,7 @@ function createMediumRuntime(gl, vertexSource) {
     vaporCorrected = makeTarget(w, h);
     condensateForward = makeTarget(w, h);
     condensateCorrected = makeTarget(w, h);
+    shadow = makeTarget(w, h);
     front = 0;
     const areaRatio = w * h / (oldW * oldH);
     waterTargetTotal *= areaRatio;
@@ -883,6 +1495,7 @@ function createMediumRuntime(gl, vertexSource) {
       vaporCorrected = makeTarget(w, h);
       condensateForward = makeTarget(w, h);
       condensateCorrected = makeTarget(w, h);
+      shadow = makeTarget(w, h);
       front = 0;
       seed(w, h);
       waterTargetTotal = readTarget(vapor[front]) + readTarget(condensate[front]);
@@ -893,6 +1506,17 @@ function createMediumRuntime(gl, vertexSource) {
     }
     resizeGrid(w, h);
   }
+  function bindLightUniforms(slot, light) {
+    const position = light?.position ?? [0, 0];
+    const direction = light?.direction ?? [0, 1];
+    const dirLen = Math.hypot(direction[0], direction[1]) || 1;
+    web.setUniform(gl, compositeLoc(`u_light${slot}Pos`), position);
+    web.setUniform(gl, compositeLoc(`u_light${slot}Dir`), [direction[0] / dirLen, direction[1] / dirLen]);
+    web.setUniform(gl, compositeLoc(`u_light${slot}CosCone`), Math.cos(light?.coneAngle ?? 0));
+    web.setUniform(gl, compositeLoc(`u_light${slot}Falloff`), light?.falloff ?? 0);
+    web.setUniform(gl, compositeLoc(`u_light${slot}Color`), light?.color ?? [0, 0, 0]);
+    web.setUniform(gl, compositeLoc(`u_light${slot}Intensity`), light?.intensity ?? 0);
+  }
   function bindVelocityUniforms(loc, dt, phase2, p, spatial) {
     web.setUniform(gl, loc("u_dyeSize"), [gridW, gridH]);
     web.setUniform(gl, loc("u_resolution"), [gridW, gridH]);
@@ -918,7 +1542,7 @@ function createMediumRuntime(gl, vertexSource) {
   let timeSinceRenorm = 0;
   let framesSinceRenorm = 0;
   function step(dt, params = {}) {
-    if (!vapor || !condensate || !track || !vaporForward || !vaporCorrected || !condensateForward || !condensateCorrected) {
+    if (!vapor || !condensate || !track || !vaporForward || !vaporCorrected || !condensateForward || !condensateCorrected || !shadow) {
       return;
     }
     const p = { ...MEDIUM_DEFAULTS, ...params };
@@ -992,6 +1616,20 @@ function createMediumRuntime(gl, vertexSource) {
     bindVelocityUniforms(trackAdvectLoc, clampedDt, phase, p, spatial);
     web.setUniform(gl, trackAdvectLoc("u_decay"), p.decay);
     web.drawFullscreenTriangle(gl);
+    gl.bindFramebuffer(gl.FRAMEBUFFER, shadow.fbo);
+    gl.useProgram(shadowProgram);
+    web.bindTextureAt(gl, 0, vapor[back].texture, shadowProgram, "u_vapor");
+    web.bindTextureAt(gl, 1, condensate[back].texture, shadowProgram, "u_condensate");
+    web.setUniform(gl, shadowLoc("u_vaporSize"), gridSize);
+    web.setUniform(gl, shadowLoc("u_condensateSize"), gridSize);
+    web.setUniform(gl, shadowLoc("u_resolution"), gridSize);
+    web.setUniform(gl, shadowLoc("u_condensateGain"), p.condensateGain);
+    web.setUniform(gl, shadowLoc("u_extinction"), p.shadowExtinction);
+    for (const slot of [1, 2]) {
+      const position = p.lights[slot]?.position ?? [0, 0];
+      web.setUniform(gl, shadowLoc(`u_light${slot}Grid`), [position[0] * gridW, position[1] * gridH]);
+    }
+    web.drawFullscreenTriangle(gl);
     gl.bindFramebuffer(gl.FRAMEBUFFER, null);
     front = back;
     framesSinceRenorm += 1;
@@ -1033,14 +1671,16 @@ function createMediumRuntime(gl, vertexSource) {
       web.setUniform(gl, emitLoc("u_tailDim"), e.tailDim);
       web.setUniform(gl, emitLoc("u_intensity"), e.intensity);
       web.setUniform(gl, emitLoc("u_seed"), e.seed);
-      web.setUniform(gl, emitLoc("u_channelMask"), e.channel);
       web.drawFullscreenTriangle(gl);
     }
     gl.disable(gl.BLEND);
     gl.bindFramebuffer(gl.FRAMEBUFFER, null);
   }
+  function stepTrackLayer(dt, emissions) {
+    liveTracks = trackLayer.step(dt, emissions);
+  }
   function composite(contentWidth, contentHeight, params = {}) {
-    if (!vapor || !condensate || !track) return;
+    if (!vapor || !condensate || !track || !shadow) return;
     const p = { ...MEDIUM_DEFAULTS, ...params };
     gl.viewport(0, 0, contentWidth, contentHeight);
     gl.disable(gl.BLEND);
@@ -1048,9 +1688,11 @@ function createMediumRuntime(gl, vertexSource) {
     web.bindTextureAt(gl, 0, vapor[front].texture, compositeProgram, "u_vapor");
     web.bindTextureAt(gl, 1, condensate[front].texture, compositeProgram, "u_condensate");
     web.bindTextureAt(gl, 2, track[front].texture, compositeProgram, "u_track");
+    web.bindTextureAt(gl, 3, shadow.texture, compositeProgram, "u_shadow");
     web.setUniform(gl, compositeLoc("u_vaporSize"), [gridW, gridH]);
     web.setUniform(gl, compositeLoc("u_condensateSize"), [gridW, gridH]);
     web.setUniform(gl, compositeLoc("u_trackSize"), [gridW, gridH]);
+    web.setUniform(gl, compositeLoc("u_shadowSize"), [gridW, gridH]);
     web.setUniform(gl, compositeLoc("u_resolution"), [contentWidth, contentHeight]);
     web.setUniform(gl, compositeLoc("u_dyeScale"), [gridW / contentWidth, gridH / contentHeight]);
     web.setUniform(gl, compositeLoc("u_lab0"), srgbToOklab(p.channelColors[0]));
@@ -1067,7 +1709,12 @@ function createMediumRuntime(gl, vertexSource) {
     web.setUniform(gl, compositeLoc("u_farWeight"), p.depthFarWeight);
     web.setUniform(gl, compositeLoc("u_gravityBoost"), p.gravityBottomBoost);
     web.setUniform(gl, compositeLoc("u_gravityBoostStart"), p.gravityBottomBoostStart);
+    web.setUniform(gl, compositeLoc("u_channelScatter"), p.channelScatter);
+    for (let slot = 0; slot < MEDIUM_MAX_LIGHTS; slot += 1) bindLightUniforms(slot, p.lights[slot]);
+    web.setUniform(gl, compositeLoc("u_trackLightFloor"), p.trackLightFloor);
     web.drawFullscreenTriangle(gl);
+    const { data, count } = buildTrackLayerInstances(liveTracks, contentWidth, contentHeight, p.trackLayerAmount);
+    trackLayerProgram.draw(contentWidth, contentHeight, data, count, p.trackLightFloor, p.lights, shadow.texture);
   }
   function readTarget(target) {
     gl.bindFramebuffer(gl.FRAMEBUFFER, target.fbo);
@@ -1134,6 +1781,23 @@ function createMediumRuntime(gl, vertexSource) {
     gl.bindFramebuffer(gl.FRAMEBUFFER, null);
     return { cols: gridW, rows: gridH, data };
   }
+  function readTrackGrid() {
+    if (!track) return null;
+    gl.bindFramebuffer(gl.FRAMEBUFFER, track[front].fbo);
+    const cells = gridW * gridH;
+    const data = new Array(cells);
+    if (format.type === gl.HALF_FLOAT) {
+      const buf = new Float32Array(cells * 4);
+      gl.readPixels(0, 0, gridW, gridH, gl.RGBA, gl.FLOAT, buf);
+      for (let i = 0; i < cells; i += 1) data[i] = buf[i * 4];
+    } else {
+      const buf = new Uint8Array(cells * 4);
+      gl.readPixels(0, 0, gridW, gridH, gl.RGBA, gl.UNSIGNED_BYTE, buf);
+      for (let i = 0; i < cells; i += 1) data[i] = buf[i * 4] / 255;
+    }
+    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+    return { cols: gridW, rows: gridH, data };
+  }
   function destroy() {
     destroyTargets();
     gl.deleteProgram(vaporForwardProgram);
@@ -1146,9 +1810,22 @@ function createMediumRuntime(gl, vertexSource) {
     gl.deleteProgram(compositeProgram);
     gl.deleteProgram(seedProgram);
     gl.deleteProgram(emitProgram);
+    gl.deleteProgram(shadowProgram);
     gl.deleteProgram(resampleProgram);
+    trackLayerProgram.destroy();
   }
-  return { ensureGrid, step, emit, composite, readTotals, readVaporGrid, readCondensateGrid, destroy };
+  return {
+    ensureGrid,
+    step,
+    emit,
+    stepTrackLayer,
+    composite,
+    readTotals,
+    readVaporGrid,
+    readCondensateGrid,
+    readTrackGrid,
+    destroy
+  };
 }
 function createMediumBackdrop() {
   let runtime = null;
@@ -1161,12 +1838,14 @@ function createMediumBackdrop() {
       runtime.ensureGrid(frame.gridWidth, frame.gridHeight);
       runtime.step(frame.dt, frame.params);
       runtime.emit(frame.emissions ?? []);
+      runtime.stepTrackLayer(frame.dt, frame.emissions ?? []);
       gl.bindFramebuffer(gl.FRAMEBUFFER, target.framebuffer);
       runtime.composite(target.width, target.height, frame.params);
     },
     readTotals: () => runtime?.readTotals() ?? null,
     readVaporGrid: () => runtime?.readVaporGrid() ?? null,
     readCondensateGrid: () => runtime?.readCondensateGrid() ?? null,
+    readTrackGrid: () => runtime?.readTrackGrid() ?? null,
     destroy: () => {
       runtime?.destroy();
       runtime = null;
@@ -1175,7 +1854,12 @@ function createMediumBackdrop() {
   };
 }
 
+exports.buildTrackLayerInstances = buildTrackLayerInstances;
 exports.createMediumBackdrop = createMediumBackdrop;
 exports.createMediumRuntime = createMediumRuntime;
+exports.createTrackLayer = createTrackLayer;
+exports.createTrackLayerProgram = createTrackLayerProgram;
+exports.trackLayerFade = trackLayerFade;
+exports.trackLayerSigmaMul = trackLayerSigmaMul;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map