@rippleflow/water-distortion 0.1.3 → 0.1.4

package/dist/water-distortion.js

@@ -132,7 +132,6 @@ uniform sampler2D u_background;
 uniform sampler2D u_causticMap;
 uniform vec2 u_texel;
 uniform float u_domMode;
-uniform float u_textureEnabled;
 uniform float u_normalScale;
 uniform float u_refractionStrength;
 uniform float u_specularIntensity;
@@ -144,18 +143,6 @@ const float DOM_CAUSTIC_GAIN = ${fe.causticGain.toFixed(2)};
 const float DOM_SCREEN_COMPENSATION = ${fe.screenCompensation.toFixed(2)};
 const float DOM_MAX_ALPHA = ${fe.maxAlpha.toFixed(2)};
 
-vec3 proceduralBackground(vec2 uv) {
-  vec3 deep = vec3(0.055, 0.075, 0.070);
-  vec3 teal = vec3(0.060, 0.320, 0.310);
-  vec3 coral = vec3(0.680, 0.230, 0.190);
-  vec3 gold = vec3(0.850, 0.710, 0.360);
-  float diagonal = smoothstep(0.05, 0.95, uv.x * 0.72 + uv.y * 0.28);
-  vec3 color = mix(deep, teal, diagonal);
-  color = mix(color, coral, smoothstep(0.18, 0.76, uv.x - uv.y * 0.18) * 0.36);
-  color = mix(color, gold, smoothstep(0.58, 1.0, uv.y + uv.x * 0.16) * 0.24);
-  return color;
-}
-
 vec4 causticLayer(vec2 uv, vec2 bend, mat2 rotation, float scale, vec2 drift) {
   vec2 p = rotation * (uv * scale + drift * u_time);
 
@@ -180,9 +167,7 @@ void main() {
     vec2(0.999)
   );
 
-  vec3 base = u_textureEnabled > 0.5
-    ? texture2D(u_background, refractedUv).rgb
-    : proceduralBackground(refractedUv);
+  vec3 base = texture2D(u_background, refractedUv).rgb;
 
   float gradient = length(vec2(dx, dy)) * u_normalScale;
   float crest = smoothstep(0.012, 0.24, gradient);
@@ -309,8 +294,8 @@ class rt {
     this.cssWidth = Math.max(1, e), this.cssHeight = Math.max(1, n);
     const a = Math.min(2, Math.max(1, t || 1)), l = Math.max(1, Math.round(this.cssWidth * a)), c = Math.max(1, Math.round(this.cssHeight * a));
     (this.canvas.width !== l || this.canvas.height !== c) && (this.canvas.width = l, this.canvas.height = c);
-    const s = Math.max(32, Math.round(i)), d = this.cssWidth / this.cssHeight, E = d >= 1 ? s : Math.max(1, Math.round(s * d)), _ = d >= 1 ? Math.max(1, Math.round(s / d)) : s;
-    E === this.simWidth && _ === this.simHeight || (this.simWidth = E, this.simHeight = _, this.recreateState());
+    const s = Math.max(32, Math.round(i)), d = this.cssWidth / this.cssHeight, E = d >= 1 ? s : Math.max(1, Math.round(s * d)), p = d >= 1 ? Math.max(1, Math.round(s / d)) : s;
+    E === this.simWidth && p === this.simHeight || (this.simWidth = E, this.simHeight = p, this.recreateState());
   }
   setTextureSource(e) {
     if (e === this.textureSource || (this.textureSource = e, this.textureImage = void 0, this.textureReady = !1, this.textureNeedsUpload = !1, !e))
@@ -334,7 +319,7 @@ class rt {
   }
   render(e, n = 0) {
     const t = this.gl;
-    this.stateTextures && (e.texture ? this.setTextureSource(e.texture) : this.setTextureSource(void 0), this.uploadTextureIfNeeded(e), t.useProgram(this.materialProgram.program), t.bindFramebuffer(t.FRAMEBUFFER, null), t.viewport(0, 0, this.canvas.width, this.canvas.height), t.clearColor(0, 0, 0, 0), t.clear(t.COLOR_BUFFER_BIT), !(e.mode !== "dom" && e.texture && !this.textureReady) && (t.activeTexture(t.TEXTURE0), t.bindTexture(t.TEXTURE_2D, this.stateTextures[this.readIndex]), t.activeTexture(t.TEXTURE1), t.bindTexture(t.TEXTURE_2D, this.backgroundTexture), t.activeTexture(t.TEXTURE2), t.bindTexture(t.TEXTURE_2D, this.causticTexture), this.prepareQuad(this.materialProgram), this.setMaterialUniforms(e, n), t.drawArrays(t.TRIANGLE_STRIP, 0, 4)));
+    this.stateTextures && (e.texture ? this.setTextureSource(e.texture) : this.setTextureSource(void 0), this.uploadTextureIfNeeded(e), t.useProgram(this.materialProgram.program), t.bindFramebuffer(t.FRAMEBUFFER, null), t.viewport(0, 0, this.canvas.width, this.canvas.height), t.clearColor(0, 0, 0, 0), t.clear(t.COLOR_BUFFER_BIT), !(e.mode !== "dom" && !this.textureReady) && (t.activeTexture(t.TEXTURE0), t.bindTexture(t.TEXTURE_2D, this.stateTextures[this.readIndex]), t.activeTexture(t.TEXTURE1), t.bindTexture(t.TEXTURE_2D, this.backgroundTexture), t.activeTexture(t.TEXTURE2), t.bindTexture(t.TEXTURE_2D, this.causticTexture), this.prepareQuad(this.materialProgram), this.setMaterialUniforms(e, n), t.drawArrays(t.TRIANGLE_STRIP, 0, 4)));
   }
   hasVisibleActivity() {
     if (!this.framebuffers)
@@ -482,18 +467,15 @@ class rt {
   setSimulationUniforms(e, n, t) {
     const i = this.gl, a = this.simulationProgram.program, l = Math.min(e.length, J), c = this.wakeAUniforms, s = this.wakeBUniforms, d = this.wakeShapeUniforms, E = Math.max(0, e.length - J);
     c.fill(0), s.fill(0), d.fill(0);
-    for (let _ = 0; _ < l; _ += 1) {
-      const m = e[E + _], v = _ * 4;
+    for (let p = 0; p < l; p += 1) {
+      const m = e[E + p], v = p * 4;
       c[v] = m.ax, c[v + 1] = m.ay, c[v + 2] = m.radius, c[v + 3] = m.wakeStrength, s[v] = m.bx, s[v + 1] = m.by, s[v + 2] = m.wakeLength, s[v + 3] = m.velocity, d[v] = m.troughStrength, d[v + 1] = m.ridgeStrength, d[v + 2] = m.ridgeOffset;
     }
-    i.uniform1i(p(i, a, "u_state"), 0), i.uniform2f(p(i, a, "u_texel"), 1 / this.simWidth, 1 / this.simHeight), i.uniform1f(p(i, a, "u_delta"), t), i.uniform1f(p(i, a, "u_damping"), n.damping), i.uniform1f(p(i, a, "u_stiffness"), n.waveSpeed), i.uniform1f(p(i, a, "u_aspect"), this.cssWidth / this.cssHeight), i.uniform1i(p(i, a, "u_wakeCount"), l), i.uniform4fv(p(i, a, "u_wakeA[0]"), c), i.uniform4fv(p(i, a, "u_wakeB[0]"), s), i.uniform4fv(p(i, a, "u_wakeShape[0]"), d);
+    i.uniform1i(S(i, a, "u_state"), 0), i.uniform2f(S(i, a, "u_texel"), 1 / this.simWidth, 1 / this.simHeight), i.uniform1f(S(i, a, "u_delta"), t), i.uniform1f(S(i, a, "u_damping"), n.damping), i.uniform1f(S(i, a, "u_stiffness"), n.waveSpeed), i.uniform1f(S(i, a, "u_aspect"), this.cssWidth / this.cssHeight), i.uniform1i(S(i, a, "u_wakeCount"), l), i.uniform4fv(S(i, a, "u_wakeA[0]"), c), i.uniform4fv(S(i, a, "u_wakeB[0]"), s), i.uniform4fv(S(i, a, "u_wakeShape[0]"), d);
   }
   setMaterialUniforms(e, n) {
-    const t = this.gl, i = this.materialProgram.program, a = e.mode !== "dom";
-    t.uniform1i(p(t, i, "u_state"), 0), t.uniform1i(p(t, i, "u_background"), 1), t.uniform1i(p(t, i, "u_causticMap"), 2), t.uniform2f(p(t, i, "u_texel"), 1 / this.simWidth, 1 / this.simHeight), t.uniform1f(p(t, i, "u_domMode"), e.mode === "dom" ? 1 : 0), t.uniform1f(
-      p(t, i, "u_textureEnabled"),
-      a && this.textureReady ? 1 : 0
-    ), t.uniform1f(p(t, i, "u_normalScale"), e.normalScale), t.uniform1f(p(t, i, "u_refractionStrength"), e.refractionStrength), t.uniform1f(p(t, i, "u_specularIntensity"), e.specularIntensity), t.uniform1f(p(t, i, "u_crestIntensity"), e.crestIntensity), t.uniform1f(p(t, i, "u_causticIntensity"), e.causticIntensity), t.uniform1f(p(t, i, "u_time"), n % 1e3);
+    const t = this.gl, i = this.materialProgram.program;
+    t.uniform1i(S(t, i, "u_state"), 0), t.uniform1i(S(t, i, "u_background"), 1), t.uniform1i(S(t, i, "u_causticMap"), 2), t.uniform2f(S(t, i, "u_texel"), 1 / this.simWidth, 1 / this.simHeight), t.uniform1f(S(t, i, "u_domMode"), e.mode === "dom" ? 1 : 0), t.uniform1f(S(t, i, "u_normalScale"), e.normalScale), t.uniform1f(S(t, i, "u_refractionStrength"), e.refractionStrength), t.uniform1f(S(t, i, "u_specularIntensity"), e.specularIntensity), t.uniform1f(S(t, i, "u_crestIntensity"), e.crestIntensity), t.uniform1f(S(t, i, "u_causticIntensity"), e.causticIntensity), t.uniform1f(S(t, i, "u_time"), n % 1e3);
   }
 }
 function nt() {
@@ -507,13 +489,13 @@ function nt() {
 }
 function ce(r, e, n) {
   const t = Math.sin(se * (e * 2 + n * 0.013)) * 0.12 + Math.sin(se * (r * 3 + e + n * 0.021)) * 0.06, i = Math.cos(se * (r * 2 + n * 0.017)) * 0.12 + Math.sin(se * (e * 3 - r + n * 0.019)) * 0.06, a = r * oe + t, l = e * oe + i, c = Math.floor(a), s = Math.floor(l);
-  let d = Number.POSITIVE_INFINITY, E = Number.POSITIVE_INFINITY, _ = 0, m = 0;
+  let d = Number.POSITIVE_INFINITY, E = Number.POSITIVE_INFINITY, p = 0, m = 0;
   for (let P = -1; P <= 1; P += 1)
-    for (let U = -1; U <= 1; U += 1) {
-      const k = c + U, B = s + P, M = Ie(k, oe), I = Ie(B, oe), z = k + 0.16 + me(M, I, n) * 0.68, N = B + 0.16 + me(M, I, n + 1) * 0.68, D = Math.hypot(a - z, l - N);
-      D < d ? (E = d, d = D, _ = M, m = I) : D < E && (E = D);
+    for (let D = -1; D <= 1; D += 1) {
+      const k = c + D, B = s + P, M = Ie(k, oe), I = Ie(B, oe), z = k + 0.16 + me(M, I, n) * 0.68, N = B + 0.16 + me(M, I, n + 1) * 0.68, U = Math.hypot(a - z, l - N);
+      U < d ? (E = d, d = U, p = M, m = I) : U < E && (E = U);
     }
-  const v = E - d, A = 1 - Fe(0.025, 0.13, v), w = 1 - Fe(0.08, 0.34, v), W = 0.74 + me(_, m, n + 2) * 0.26, H = A * A * 0.58 + w * 0.34;
+  const v = E - d, A = 1 - Fe(0.025, 0.13, v), w = 1 - Fe(0.08, 0.34, v), W = 0.74 + me(p, m, n + 2) * 0.26, H = A * A * 0.58 + w * 0.34;
   return We(Math.pow(H * W, 1.12));
 }
 function me(r, e, n) {
@@ -581,7 +563,7 @@ function ke(r, e, n) {
   }
   return t;
 }
-function p(r, e, n) {
+function S(r, e, n) {
   const t = r.getUniformLocation(e, n);
   if (!t)
     throw new Error(`WaterDistortion could not bind uniform ${n}.`);
@@ -602,8 +584,8 @@ function ot(r, e, n, t = Je) {
   const l = (c, s) => r[(s * i + c) * 4] ?? 0;
   for (let c = 0; c < a; c += 1)
     for (let s = 0; s < i; s += 1) {
-      const d = (c * i + s) * 4, E = r[d] ?? 0, _ = r[d + 1] ?? 0;
-      if (E < -t.trough || Math.abs(_) > t.velocity)
+      const d = (c * i + s) * 4, E = r[d] ?? 0, p = r[d + 1] ?? 0;
+      if (E < -t.trough || Math.abs(p) > t.velocity)
         return !0;
       const m = s > 0 ? l(s - 1, c) : E, v = s < i - 1 ? l(s + 1, c) : E, A = c > 0 ? l(s, c - 1) : E, w = c < a - 1 ? l(s, c + 1) : E, W = Math.hypot(v - m, w - A), H = Math.abs(m + v + A + w - E * 4);
       if (W > t.gradient || H > t.curvature)
@@ -666,7 +648,7 @@ function ge(r) {
     )
   };
 }
-function Ue(r, e, n = r.timeStamp) {
+function De(r, e, n = r.timeStamp) {
   const t = typeof r.getCoalescedEvents == "function" ? r.getCoalescedEvents() : [], i = t.length > 0 ? t : [r], a = n - r.timeStamp;
   return i.map((l) => ({
     x: l.clientX - e.left,
@@ -711,11 +693,11 @@ class ct {
       Math.max(1, Math.ceil(a / this.options.segmentSpacing))
     );
     for (let d = 0; d < s; d += 1) {
-      const E = d / s, _ = (d + 1) / s;
+      const E = d / s, p = (d + 1) / s;
       this.disturbances.push(
         ve(
-          De(t, i, E),
-          De(t, i, _),
+          Ue(t, i, E),
+          Ue(t, i, p),
           this.smoothedVelocity,
           this.options
         )
@@ -759,7 +741,7 @@ function ve(r, e, n, t) {
     velocity: a
   };
 }
-function De(r, e, n) {
+function Ue(r, e, n) {
   return {
     x: O(r.x, e.x, n),
     y: O(r.y, e.y, n),
@@ -946,19 +928,19 @@ const gt = $e(function(e, n) {
     className: l,
     style: c,
     reducedMotion: s = "respect"
-  } = e, d = y(null), E = y(null), _ = y(null), m = y(new ct()), v = y(null), A = y(null), w = y(() => {
+  } = e, d = y(null), E = y(null), p = y(null), m = y(new ct()), v = y(null), A = y(null), w = y(() => {
   }), W = y(() => {
   }), H = y(() => {
-  }), P = y([]), U = y(!0), k = y(!0), B = y(!1), M = y(!1), I = y(null), z = y(0), N = y(0), D = y(0), R = ft(e), g = y(R), $ = y({ width: 1, height: 1 }), Ne = mt(
+  }), P = y([]), D = y(!0), k = y(!0), B = y(!1), M = y(!1), I = y(null), z = y(0), N = y(0), U = y(0), R = ft(e), g = y(R), $ = y({ width: 1, height: 1 }), Ne = mt(
     s === "respect"
   ), ue = s === "disable" || s === "respect" && Ne, Xe = a ?? i;
   g.current = R, Qe(
     n,
     () => ({
-      triggerRipple(S) {
+      triggerRipple(_) {
         B.current || M.current || H.current(
           Ce(
-            S,
+            _,
             g.current,
             $.current
           )
@@ -967,19 +949,19 @@ const gt = $e(function(e, n) {
     }),
     []
   ), V(() => {
-    var S;
-    B.current = ue, ue && (m.current.reset(), I.current = null, P.current = [], z.current = 0, N.current = 0, D.current = 0, (S = _.current) == null || S.clear()), w.current();
+    var _;
+    B.current = ue, ue && (m.current.reset(), I.current = null, P.current = [], z.current = 0, N.current = 0, U.current = 0, (_ = p.current) == null || _.clear()), w.current();
   }, [ue]), V(() => {
-    const S = _.current;
-    if (!S)
+    const _ = p.current;
+    if (!_)
       return;
     const { width: K, height: b } = $.current;
-    S.resize(
+    _.resize(
       K,
       b,
       window.devicePixelRatio,
       R.simulationResolution
-    ), S.setTextureSource(R.texture), w.current();
+    ), _.setTextureSource(R.texture), w.current();
   }, [
     R.mode,
     R.texture,
@@ -992,8 +974,8 @@ const gt = $e(function(e, n) {
     R.causticIntensity,
     R.simulationResolution
   ]), V(() => {
-    const S = d.current, K = E.current;
-    if (!S || !K)
+    const _ = d.current, K = E.current;
+    if (!_ || !K)
       return;
     k.current = typeof document.hasFocus == "function" ? document.hasFocus() : !0;
     let b = null, ie, ee = G, xe = !1, te;
@@ -1022,7 +1004,7 @@ const gt = $e(function(e, n) {
         window.devicePixelRatio,
         g.current.simulationResolution
       );
-    }, pe = () => {
+    }, Ee = () => {
       b == null || b.render(g.current, performance.now() * 1e-3);
     }, X = () => {
       ie = void 0, ee = G;
@@ -1031,19 +1013,19 @@ const gt = $e(function(e, n) {
     }, Q = () => {
       const o = g.current;
       let u = !1;
-      if (!(!B.current && !M.current && U.current && (o.runInBackground || !document.hidden && k.current))) {
+      if (!(!B.current && !M.current && D.current && (o.runInBackground || !document.hidden && k.current))) {
         X();
         return;
       }
       if (te !== void 0) {
         const T = performance.now() - te;
-        z.current += T, N.current += T, D.current += T, te = void 0, u = !0;
+        z.current += T, N.current += T, U.current += T, te = void 0, u = !0;
       }
-      (!o.runInBackground || u) && X(), pe(), w.current();
-    }, Ee = (o) => {
+      (!o.runInBackground || u) && X(), Ee(), w.current();
+    }, pe = (o) => {
       v.current = null;
       const u = g.current;
-      if (!b || M.current || !U.current || !u.runInBackground && (document.hidden || !k.current)) {
+      if (!b || M.current || !D.current || !u.runInBackground && (document.hidden || !k.current)) {
         X();
         return;
       }
@@ -1075,27 +1057,27 @@ const gt = $e(function(e, n) {
         o < N.current ? w.current() : X();
         return;
       }
-      if (o < D.current) {
+      if (o < U.current) {
         w.current();
         return;
       }
       try {
-        b.hasVisibleActivity() ? (D.current = o + ht, w.current()) : X();
+        b.hasVisibleActivity() ? (U.current = o + ht, w.current()) : X();
       } catch {
         xe = !0, o < N.current ? w.current() : X();
       }
     }, le = () => {
       M.current || v.current !== null || A.current !== null || (g.current.runInBackground && document.hidden ? A.current = window.setTimeout(() => {
-        A.current = null, Ee(performance.now());
-      }, G) : v.current = window.requestAnimationFrame(Ee));
+        A.current = null, pe(performance.now());
+      }, G) : v.current = window.requestAnimationFrame(pe));
     };
     w.current = le;
     try {
       b = new rt(K, () => {
         w.current();
-      }), _.current = b, b.setTextureSource(g.current.texture);
+      }), p.current = b, b.setTextureSource(g.current.texture);
     } catch {
-      return K.style.display = "none", _.current = null, w.current = () => {
+      return K.style.display = "none", p.current = null, w.current = () => {
       }, () => {
       };
     }
@@ -1103,7 +1085,7 @@ const gt = $e(function(e, n) {
       const o = K.getBoundingClientRect();
       return He(o.width, o.height), o;
     }, ze = () => {
-      ae(), pe();
+      ae(), Ee();
     }, he = (o) => {
       if (M.current || o.length === 0)
         return;
@@ -1115,15 +1097,15 @@ const gt = $e(function(e, n) {
       z.current = Math.max(z.current, T), N.current = Math.max(
         N.current,
         T + ut(g.current.damping)
-      ), D.current = 0, le();
+      ), U.current = 0, le();
     };
     H.current = he;
     const _e = (o) => {
       const u = g.current;
-      if (B.current || M.current || !U.current || u.interactionMode === "event" || !u.runInBackground && (document.hidden || !k.current) || o.pointerType === "touch" && !o.isPrimary)
+      if (B.current || M.current || !D.current || u.interactionMode === "event" || !u.runInBackground && (document.hidden || !k.current) || o.pointerType === "touch" && !o.isPrimary)
         return;
       m.current.reset();
-      const F = ae(), [T] = Ue(o, F, performance.now());
+      const F = ae(), [T] = De(o, F, performance.now());
       T && ((u.interactionMode === "click" || u.interactionMode === "drag") && he(
         Ce(
           {
@@ -1136,9 +1118,9 @@ const gt = $e(function(e, n) {
       ), u.interactionMode === "drag" ? (I.current = o.pointerId, m.current.addSample(T)) : u.interactionMode === "move" && m.current.addSample(T));
     }, Se = (o) => {
       const u = g.current;
-      if (B.current || M.current || !U.current || u.interactionMode !== "move" && (u.interactionMode !== "drag" || I.current !== o.pointerId) || !u.runInBackground && (document.hidden || !k.current) || o.pointerType === "touch" && !o.isPrimary)
+      if (B.current || M.current || !D.current || u.interactionMode !== "move" && (u.interactionMode !== "drag" || I.current !== o.pointerId) || !u.runInBackground && (document.hidden || !k.current) || o.pointerType === "touch" && !o.isPrimary)
         return;
-      const F = ae(), T = Ue(o, F, performance.now());
+      const F = ae(), T = De(o, F, performance.now());
       for (const Z of T)
         he(m.current.addSample(Z));
     }, j = (o) => {
@@ -1163,20 +1145,20 @@ const gt = $e(function(e, n) {
     let ne;
     return "IntersectionObserver" in window && (ne = new IntersectionObserver((o) => {
       const u = o[0];
-      U.current = u ? u.isIntersecting : !0, U.current ? Q() : re();
-    }), ne.observe(S)), S.addEventListener("pointerdown", _e, {
+      D.current = u ? u.isIntersecting : !0, D.current ? Q() : re();
+    }), ne.observe(_)), _.addEventListener("pointerdown", _e, {
       passive: !0
-    }), S.addEventListener("pointermove", Se, {
+    }), _.addEventListener("pointermove", Se, {
       passive: !0
-    }), S.addEventListener("pointerup", j, {
+    }), _.addEventListener("pointerup", j, {
       passive: !0
-    }), S.addEventListener("pointerleave", j, {
+    }), _.addEventListener("pointerleave", j, {
       passive: !0
-    }), S.addEventListener("pointercancel", j, {
+    }), _.addEventListener("pointercancel", j, {
       passive: !0
     }), window.addEventListener("blur", Re), window.addEventListener("focus", we), document.addEventListener("keydown", Te), document.addEventListener("visibilitychange", ye), () => {
       var o;
-      Y(), Me.disconnect(), ne == null || ne.disconnect(), S.removeEventListener("pointerdown", _e), S.removeEventListener("pointermove", Se), S.removeEventListener("pointerup", j), S.removeEventListener("pointerleave", j), S.removeEventListener("pointercancel", j), window.removeEventListener("blur", Re), window.removeEventListener("focus", we), document.removeEventListener("keydown", Te), document.removeEventListener("visibilitychange", ye), (o = _.current) == null || o.dispose(), _.current = null, w.current = () => {
+      Y(), Me.disconnect(), ne == null || ne.disconnect(), _.removeEventListener("pointerdown", _e), _.removeEventListener("pointermove", Se), _.removeEventListener("pointerup", j), _.removeEventListener("pointerleave", j), _.removeEventListener("pointercancel", j), window.removeEventListener("blur", Re), window.removeEventListener("focus", we), document.removeEventListener("keydown", Te), document.removeEventListener("visibilitychange", ye), (o = p.current) == null || o.dispose(), p.current = null, w.current = () => {
       }, W.current = () => {
       }, H.current = () => {
       };
@@ -1235,9 +1217,9 @@ const gt = $e(function(e, n) {
       }
     )
   ] });
-}), Et = gt;
+}), pt = gt;
 export {
   gt as WaterDistortion,
-  Et as WaterLayer
+  pt as WaterLayer
 };
 //# sourceMappingURL=water-distortion.js.map