vireuikit 0.1.0 → 0.2.0

package/dist/web/index.cjs

@@ -109,8 +109,18 @@ var MEDIUM_DEFAULTS = {
   condensateColor: [0.94, 0.95, 0.97],
   channelColors: neutralSpecies(BASE_COLOR),
   baseColor: BASE_COLOR,
-  baseWeight: 0.9
+  baseWeight: 0.9,
+  depthFarScale: 1.6,
+  depthFarOffsetFrac: [0.47, 0.53],
+  depthFarBlurRadius: 5,
+  depthFarWeight: 0.5,
+  gravityVaporDrift: 0.6,
+  gravityBottomBoost: 2,
+  gravityBottomBoostStart: 0.75
 };
+function depthFarOffsetPx(offsetFrac, gridWidth, gridHeight) {
+  return [offsetFrac[0] * gridWidth, offsetFrac[1] * gridHeight];
+}
 
 // src/medium/noise.ts
 var VG_VALUE_NOISE = `
@@ -295,11 +305,16 @@ var MEDIUM_ADVECT_VELOCITY_SETTLE = `
 ${MEDIUM_ADVECT_VELOCITY}
   vel.y += u_settleSpeed;
 `;
+var MEDIUM_ADVECT_VELOCITY_VAPOR = `
+${MEDIUM_ADVECT_VELOCITY}
+  vel.y += u_vaporDrift;
+`;
 var MEDIUM_VAPOR_FORWARD_SHADER = `
 ${MEDIUM_ADVECT_UNIFORMS}
+uniform float u_vaporDrift;
 
 half4 main(float2 xy) {
-${MEDIUM_ADVECT_VELOCITY}
+${MEDIUM_ADVECT_VELOCITY_VAPOR}
   float2 src = xy - vel * u_dt;
   return u_dye.eval(float2(src.x, u_dyeSize.y - src.y));
 }
@@ -335,9 +350,10 @@ var MEDIUM_MACCORMACK_CORRECT = `
 var MEDIUM_VAPOR_CORRECT_SHADER = `
 ${MEDIUM_ADVECT_UNIFORMS}
 uniform shader u_forward;
+uniform float u_vaporDrift;
 
 half4 main(float2 xy) {
-${MEDIUM_ADVECT_VELOCITY}
+${MEDIUM_ADVECT_VELOCITY_VAPOR}
 ${MEDIUM_MACCORMACK_CORRECT}
   return limited;
 }
@@ -457,17 +473,52 @@ uniform float3 u_labCondensate;
 uniform float  u_baseWeight;
 uniform float  u_condensateTint;
 uniform float  u_condensateGain;
+uniform float  u_farScale;
+uniform float2 u_farOffset;
+uniform float  u_farBlurRadius;
+uniform float  u_farWeight;
+uniform float  u_gravityBoost;
+uniform float  u_gravityBoostStart;
 
 ${VG_OKLAB_TO_SRGB}
 
 half4 main(float2 xy) {
-  float2 src = xy * u_dyeScale;
-  half4 vapor = u_vapor.eval(src);
-  half4 condensate = u_condensate.eval(src);
-  half4 track = u_track.eval(src);
-  float w0 = float(vapor.r) + float(track.r);
-  float w1 = float(vapor.g) + float(track.g);
-  float w2 = float(vapor.b) + float(track.b);
+  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);
+  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.
+  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);
+
+  // 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
+  // DISPLAYED, never the buffers themselves, so it can't threaten water conservation. Shared by
+  // both planes: the chamber's floor is denser everywhere along its depth, not just up close.
+  //
+  // Verified with a headless render, not assumed: ramping this with xy.y directly lit up the TOP
+  // of the frame, not the bottom (contentTexture's own orientation contract flips y once more
+  // between this pass and the final scene \u2014 see the file header) \u2014 hence the 1.0 - below.
+  float bottomFrac = 1.0 - xy.y / u_resolution.y;
+  float bottomT = smoothstep(u_gravityBoostStart, 1.0, bottomFrac);
+  float bottomBoost = 1.0 + u_gravityBoost * bottomT;
+
+  float gasR = (float(vapor.r) + float(vaporFar.r) * u_farWeight) * bottomBoost;
+  float gasG = (float(vapor.g) + float(vaporFar.g) * u_farWeight) * bottomBoost;
+  float gasB = (float(vapor.b) + float(vaporFar.b) * u_farWeight) * bottomBoost;
+  float w0 = gasR + float(track.r);
+  float w1 = gasG + float(track.g);
+  float w2 = gasB + float(track.b);
   float wBg = u_baseWeight;
 
   // A faint condensate hint from the LOCAL vapor, not its own color (droplets scatter light
@@ -475,7 +526,8 @@ half4 main(float2 xy) {
   float vaporLocal = max(w0 + w1 + w2, 1e-4);
   float3 vaporHue = (u_lab0 * w0 + u_lab1 * w1 + u_lab2 * w2) / vaporLocal;
   float3 condensateLab = mix(u_labCondensate, vaporHue, u_condensateTint);
-  float wCondensate = float(condensate.r) * u_condensateGain;
+  float wCondensate =
+    (float(condensate.r) + float(condensateFar.r) * u_farWeight) * u_condensateGain * bottomBoost;
 
   float total = max(w0 + w1 + w2 + wBg + wCondensate, 1e-4);
   float3 mixLab =
@@ -701,6 +753,7 @@ function createMediumRuntime(gl, vertexSource) {
     web.setUniform(gl, loc("u_curlFreq"), p.curlFreq);
     web.setUniform(gl, loc("u_advectSpeed"), p.advectSpeed);
     web.setUniform(gl, loc("u_turbulence"), p.turbulence);
+    web.setUniform(gl, loc("u_vaporDrift"), p.gravityVaporDrift);
   }
   let phase = 0;
   function wrapPhase(value) {
@@ -853,6 +906,12 @@ function createMediumRuntime(gl, vertexSource) {
     web.setUniform(gl, compositeLoc("u_baseWeight"), p.baseWeight);
     web.setUniform(gl, compositeLoc("u_condensateTint"), p.condensateTint);
     web.setUniform(gl, compositeLoc("u_condensateGain"), p.condensateGain);
+    web.setUniform(gl, compositeLoc("u_farScale"), p.depthFarScale);
+    web.setUniform(gl, compositeLoc("u_farOffset"), depthFarOffsetPx(p.depthFarOffsetFrac, gridW, gridH));
+    web.setUniform(gl, compositeLoc("u_farBlurRadius"), p.depthFarBlurRadius);
+    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.drawFullscreenTriangle(gl);
   }
   function readTarget(target) {