vireuikit 0.2.0 → 0.3.0

package/dist/index.cjs

@@ -285,6 +285,7 @@ var MEDIUM_DEFAULTS = {
   condensationFloor: 0.12,
   evaporationRate: 0.2,
   condensateSettleSpeed: 8,
+  condensateSettleWiggle: 0.4,
   condensateSpreadRate: 0.08,
   condensateTint: 0.2,
   condensateGain: 5,
@@ -484,6 +485,71 @@ float2 vgCurlVelocity(float2 p, float phase) {
   float py0 = vgPotential(p - float2(0.0, e), phase);
   return float2(py1 - py0, -(px1 - px0)) / (2.0 * e);
 }
+
+// vgPotential above is periodic in TIME only: the simulation domain is a torus (gl.REPEAT), but
+// the lattice itself never wraps in x/y, so velocity jumps at the domain seam and dye on either
+// side of it is transported differently \u2014 a straight seam, made worse wherever something re-reads
+// the field at a different scale (the far depth plane's tile boundary). vgValueNoise3Seamless
+// wraps ALL THREE lattice axes: xyPeriod/zPeriod fold BOTH neighbors of a cell into their own
+// period before hashing, so the field is EXACTLY the same one period over, in space exactly as it
+// already was in time.
+//
+// The period has to be an integer number of lattice cells, or the wrap would jump instead of
+// closing seamlessly (the same requirement MEDIUM_TIME_OCTAVES/mediumOctavePeriod enforces for
+// time) \u2014 but unlike time, the spatial period depends on the GRID SIZE, which this shader has no
+// notion of. So xyPeriod travels together with a per-octave spatial frequency the CPU computes to
+// make gridSize * frequency land on that exact integer (see computeMediumSpatialPeriods below);
+// both arrive together as one uniform per octave (u_spatialN.xy = frequency, .zw = period),
+// recomputed by web/medium.ts whenever the grid resizes.
+float vgValueNoise3Seamless(float3 p, float2 xyPeriod, float zPeriod) {
+  float3 i = floor(p);
+  float3 f = fract(p);
+  float3 u = f * f * (3.0 - 2.0 * f);
+  float x0 = mod(i.x, xyPeriod.x);
+  float x1 = mod(i.x + 1.0, xyPeriod.x);
+  float y0 = mod(i.y, xyPeriod.y);
+  float y1 = mod(i.y + 1.0, xyPeriod.y);
+  float z0 = mod(i.z, zPeriod);
+  float z1 = mod(i.z + 1.0, zPeriod);
+  float n000 = vgHash31(float3(x0, y0, z0));
+  float n100 = vgHash31(float3(x1, y0, z0));
+  float n010 = vgHash31(float3(x0, y1, z0));
+  float n110 = vgHash31(float3(x1, y1, z0));
+  float n001 = vgHash31(float3(x0, y0, z1));
+  float n101 = vgHash31(float3(x1, y0, z1));
+  float n011 = vgHash31(float3(x0, y1, z1));
+  float n111 = vgHash31(float3(x1, y1, z1));
+  float nx00 = mix(n000, n100, u.x);
+  float nx10 = mix(n010, n110, u.x);
+  float nx01 = mix(n001, n101, u.x);
+  float nx11 = mix(n011, n111, u.x);
+  float nxy0 = mix(nx00, nx10, u.y);
+  float nxy1 = mix(nx01, nx11, u.y);
+  return mix(nxy0, nxy1, u.z) * 2.0 - 1.0;
+}
+
+// Same four-octave fbm as vgPotential, but every octave reads the seamless lattice above at its
+// OWN (frequency, period) pair \u2014 sN.xy replaces that octave's compile-time \`scale\` constant (it
+// has to be a uniform now: the adjustment depends on the live grid size), sN.zw is the matching
+// integer period. \`p\` is still curlFreq-scaled exactly as vgPotential's caller scales it \u2014 only
+// the per-octave multiplier changed from a constant to a grid-dependent uniform, so the finite
+// difference in vgCurlVelocitySeamless below needs no epsilon change of its own.
+float vgPotentialSeamless(float2 p, float phase, float4 s0, float4 s1, float4 s2, float4 s3) {
+  float v = vgValueNoise3Seamless(float3(p * s0.xy, phase * ${VG_OCT0.rate} + ${VG_OCT0.offset}), s0.zw, ${VG_OCT0.period}) * 0.5;
+  v += vgValueNoise3Seamless(float3(p * s1.xy, phase * ${VG_OCT1.rate} + ${VG_OCT1.offset}), s1.zw, ${VG_OCT1.period}) * 0.25;
+  v += vgValueNoise3Seamless(float3(p * s2.xy, phase * ${VG_OCT2.rate} + ${VG_OCT2.offset}), s2.zw, ${VG_OCT2.period}) * 0.125;
+  float macro = vgValueNoise3Seamless(float3(p * s3.xy, phase * ${VG_OCT3.rate} + ${VG_OCT3.offset}), s3.zw, ${VG_OCT3.period});
+  return v * (0.7 + 0.3 * macro);
+}
+
+float2 vgCurlVelocitySeamless(float2 p, float phase, float4 s0, float4 s1, float4 s2, float4 s3) {
+  float e = 0.6;
+  float px1 = vgPotentialSeamless(p + float2(e, 0.0), phase, s0, s1, s2, s3);
+  float px0 = vgPotentialSeamless(p - float2(e, 0.0), phase, s0, s1, s2, s3);
+  float py1 = vgPotentialSeamless(p + float2(0.0, e), phase, s0, s1, s2, s3);
+  float py0 = vgPotentialSeamless(p - float2(0.0, e), phase, s0, s1, s2, s3);
+  return float2(py1 - py0, -(px1 - px0)) / (2.0 * e);
+}
 `;
 
 // src/medium/seed-shader.ts
@@ -527,15 +593,25 @@ uniform float  u_phase;
 uniform float  u_curlFreq;
 uniform float  u_advectSpeed;
 uniform float  u_turbulence;
+// One float4 per MEDIUM_TIME_OCTAVES entry: xy is that octave's seamless spatial frequency, zw its
+// matching integer lattice period \u2014 both grid-size-dependent, so they can't be compile-time
+// constants (see vgPotentialSeamless/computeMediumSpatialPeriods in noise.ts). Recomputed by
+// web/medium.ts's bindVelocityUniforms every frame from the live grid dimensions.
+uniform float4 u_spatial0;
+uniform float4 u_spatial1;
+uniform float4 u_spatial2;
+uniform float4 u_spatial3;
 
 ${VG_CURL_NOISE}
 `;
 var MEDIUM_ADVECT_VELOCITY = `
-  float2 vel = vgCurlVelocity(xy * u_curlFreq, u_phase) * u_advectSpeed * u_turbulence;
+  float2 curl = vgCurlVelocitySeamless(xy * u_curlFreq, u_phase, u_spatial0, u_spatial1, u_spatial2, u_spatial3);
+  float2 vel = curl * u_advectSpeed * u_turbulence;
 `;
 var MEDIUM_ADVECT_VELOCITY_SETTLE = `
 ${MEDIUM_ADVECT_VELOCITY}
   vel.y += u_settleSpeed;
+  vel.x += curl.x * u_advectSpeed * u_settleWiggle;
 `;
 var MEDIUM_ADVECT_VELOCITY_VAPOR = `
 ${MEDIUM_ADVECT_VELOCITY}
@@ -554,6 +630,7 @@ ${MEDIUM_ADVECT_VELOCITY_VAPOR}
 var MEDIUM_CONDENSATE_FORWARD_SHADER = `
 ${MEDIUM_ADVECT_UNIFORMS}
 uniform float u_settleSpeed;
+uniform float u_settleWiggle;
 
 half4 main(float2 xy) {
 ${MEDIUM_ADVECT_VELOCITY_SETTLE}
@@ -593,6 +670,7 @@ ${MEDIUM_MACCORMACK_CORRECT}
 var MEDIUM_CONDENSATE_CORRECT_SHADER = `
 ${MEDIUM_ADVECT_UNIFORMS}
 uniform float u_settleSpeed;
+uniform float u_settleWiggle;
 uniform shader u_forward;
 
 half4 main(float2 xy) {
@@ -692,6 +770,39 @@ ${MEDIUM_ADVECT_VELOCITY}
 `;
 
 // src/medium/composite-shader.ts
+var VG_CUBIC_WEIGHTS = `
+float4 vgCubicWeights(float v) {
+  float4 n = float4(1.0, 2.0, 3.0, 4.0) - v;
+  float4 s = n * n * n;
+  float x = s.x;
+  float y = s.y - 4.0 * s.x;
+  float z = s.z - 4.0 * s.y + 6.0 * s.x;
+  float w = 6.0 - x - y - z;
+  return float4(x, y, z, w) * (1.0 / 6.0);
+}
+`;
+function vgBicubicSampler(fnName, textureName) {
+  return `
+half4 ${fnName}(float2 px) {
+  float2 shifted = px - 0.5;
+  float2 fxy = fract(shifted);
+  float2 base = shifted - fxy;
+  float4 xw = vgCubicWeights(fxy.x);
+  float4 yw = vgCubicWeights(fxy.y);
+  float2 sx = float2(xw.x + xw.y, xw.z + xw.w);
+  float2 sy = float2(yw.x + yw.y, yw.z + yw.w);
+  float2 offsetX = float2(base.x - 0.5 + xw.y / sx.x, base.x + 1.5 + xw.w / sx.y);
+  float2 offsetY = float2(base.y - 0.5 + yw.y / sy.x, base.y + 1.5 + yw.w / sy.y);
+  half4 s00 = ${textureName}.eval(float2(offsetX.x, offsetY.x));
+  half4 s10 = ${textureName}.eval(float2(offsetX.y, offsetY.x));
+  half4 s01 = ${textureName}.eval(float2(offsetX.x, offsetY.y));
+  half4 s11 = ${textureName}.eval(float2(offsetX.y, offsetY.y));
+  float wx = sx.x / (sx.x + sx.y);
+  float wy = sy.x / (sy.x + sy.y);
+  return mix(mix(s11, s01, wx), mix(s10, s00, wx), wy);
+}
+`;
+}
 var MEDIUM_COMPOSITE_SHADER = `
 uniform shader u_vapor;
 uniform shader u_condensate;
@@ -713,25 +824,44 @@ uniform float  u_gravityBoost;
 uniform float  u_gravityBoostStart;
 
 ${VG_OKLAB_TO_SRGB}
+${VG_CUBIC_WEIGHTS}
+${vgBicubicSampler("vgBicubicVapor", "u_vapor")}
+${vgBicubicSampler("vgBicubicCondensate", "u_condensate")}
 
 half4 main(float2 xy) {
   float2 baseSrc = xy * u_dyeScale;
 
-  // Near plane \u2014 sampled exactly as before the depth work; the calibrated look lives here.
-  half4 vapor = u_vapor.eval(baseSrc);
-  half4 condensate = u_condensate.eval(baseSrc);
+  // Near plane \u2014 the calibrated look lives here. Bicubic (see the file header) on vapor and
+  // condensate; track stays a plain bilinear read.
+  half4 vapor = vgBicubicVapor(baseSrc);
+  half4 condensate = vgBicubicCondensate(baseSrc);
   half4 track = u_track.eval(baseSrc);
 
-  // Far plane \u2014 the identical field, scaled and offset (see the file header). A 4-tap box blur
-  // (no separate center sample, the cheapest isotropic blur available) supplies aerial perspective's
-  // blur and, as a side effect of averaging, its lower contrast too.
+  // Far plane \u2014 the identical field, scaled and offset (see the file header). An 8-tap ring, not
+  // the near plane's \xB1x/\xB1y box: axis-aligned taps read the SAME column/row on both sides of any
+  // residual axis-aligned structure (a seam, a resize artifact), which is exactly how a straight
+  // line gets doubled into four parallel copies instead of softened away \u2014 measured directly via
+  // check-medium.mjs's isotropy gate (see its report). The ring is rotated a half-step (22.5\xB0) off
+  // the axes so no tap direction ever coincides with a grid row or column. Radius stays in the same
+  // far-plane texture-space unit as before (u_farBlurRadius, grid-px) \u2014 only the tap PATTERN
+  // changed, not what it measures in.
   float2 farSrc = baseSrc * u_farScale + u_farOffset;
-  float2 blurX = float2(u_farBlurRadius, 0.0);
-  float2 blurY = float2(0.0, u_farBlurRadius);
-  half4 vaporFar = (u_vapor.eval(farSrc + blurX) + u_vapor.eval(farSrc - blurX) +
-                     u_vapor.eval(farSrc + blurY) + u_vapor.eval(farSrc - blurY)) * half4(0.25);
-  half4 condensateFar = (u_condensate.eval(farSrc + blurX) + u_condensate.eval(farSrc - blurX) +
-                          u_condensate.eval(farSrc + blurY) + u_condensate.eval(farSrc - blurY)) * half4(0.25);
+  float2 ring0 = float2( 0.9238795,  0.3826834) * u_farBlurRadius;
+  float2 ring1 = float2( 0.3826834,  0.9238795) * u_farBlurRadius;
+  float2 ring2 = float2(-0.3826834,  0.9238795) * u_farBlurRadius;
+  float2 ring3 = float2(-0.9238795,  0.3826834) * u_farBlurRadius;
+  float2 ring4 = float2(-0.9238795, -0.3826834) * u_farBlurRadius;
+  float2 ring5 = float2(-0.3826834, -0.9238795) * u_farBlurRadius;
+  float2 ring6 = float2( 0.3826834, -0.9238795) * u_farBlurRadius;
+  float2 ring7 = float2( 0.9238795, -0.3826834) * u_farBlurRadius;
+  half4 vaporFar = (u_vapor.eval(farSrc + ring0) + u_vapor.eval(farSrc + ring1) +
+                     u_vapor.eval(farSrc + ring2) + u_vapor.eval(farSrc + ring3) +
+                     u_vapor.eval(farSrc + ring4) + u_vapor.eval(farSrc + ring5) +
+                     u_vapor.eval(farSrc + ring6) + u_vapor.eval(farSrc + ring7)) * half4(0.125);
+  half4 condensateFar = (u_condensate.eval(farSrc + ring0) + u_condensate.eval(farSrc + ring1) +
+                          u_condensate.eval(farSrc + ring2) + u_condensate.eval(farSrc + ring3) +
+                          u_condensate.eval(farSrc + ring4) + u_condensate.eval(farSrc + ring5) +
+                          u_condensate.eval(farSrc + ring6) + u_condensate.eval(farSrc + ring7)) * half4(0.125);
 
   // Gravity's "denser layer at the bottom of the chamber" \u2014 a compositing-only boost (see
   // MEDIUM_DEFAULTS.gravityBottomBoost): it scales how density already in the conserved buffers is