shaders-oneshot 0.0.81-shared.1

package/dist/shaders/voronoi.d.ts

@@ -0,0 +1,65 @@
+import type { vec4 } from '../types.js';
+import type { ShaderMotionParams } from '../shader-mount.js';
+import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';
+export declare const voronoiMeta: {
+    readonly maxColorCount: 5;
+};
+/**
+ * Anti-aliased animated Voronoi pattern with smooth and customizable edges.
+ *
+ * Double-pass Voronoi pattern cell edges.
+ * Original algorithm: https://www.shadertoy.com/view/ldl3W8
+ *
+ * Note: gaps can't be removed completely due to natural artifacts of Voronoi cells borders
+ *
+ * Fragment shader uniforms:
+ * - u_time (float): Animation time
+ * - u_scale (float): Overall zoom level, used for anti-aliasing calculations
+ * - u_colors (vec4[]): Up to 5 base cell colors in RGBA
+ * - u_colorsCount (float): Number of active colors
+ * - u_stepsPerColor (float): Number of extra colors between base colors, 1 = N colors, 2 = 2×N, etc., needs 2+ colors (1 to 3)
+ * - u_colorGlow (vec4): Color tint for radial inner shadow inside cells in RGBA, needs glow > 0
+ * - u_colorGap (vec4): Color used for cell borders/gaps in RGBA
+ * - u_distortion (float): Strength of noise-driven displacement of cell centers (0 to 0.5)
+ * - u_gap (float): Width of the border/gap between cells (0 to 0.1)
+ * - u_glow (float): Strength of the radial inner shadow inside cells, needs colorGlow alpha > 0 (0 to 1)
+ * - u_noiseTexture (sampler2D): Pre-computed randomizer source texture
+ *
+ * Vertex shader outputs (used in fragment shader):
+ * - v_patternUV (vec2): UV coordinates for pattern with global sizing (rotation, scale, offset, etc) applied
+ *
+ * Vertex shader uniforms:
+ * - u_resolution (vec2): Canvas resolution in pixels
+ * - u_pixelRatio (float): Device pixel ratio
+ * - u_originX (float): Reference point for positioning world width in the canvas (0 to 1)
+ * - u_originY (float): Reference point for positioning world height in the canvas (0 to 1)
+ * - u_worldWidth (float): Virtual width of the graphic before it's scaled to fit the canvas
+ * - u_worldHeight (float): Virtual height of the graphic before it's scaled to fit the canvas
+ * - u_fit (float): How to fit the rendered shader into the canvas dimensions (0 = none, 1 = contain, 2 = cover)
+ * - u_scale (float): Overall zoom level of the graphics (0.01 to 4)
+ * - u_rotation (float): Overall rotation angle of the graphics in degrees (0 to 360)
+ * - u_offsetX (float): Horizontal offset of the graphics center (-1 to 1)
+ * - u_offsetY (float): Vertical offset of the graphics center (-1 to 1)
+ *
+ */
+export declare const voronoiFragmentShader: string;
+export interface VoronoiUniforms extends ShaderSizingUniforms {
+    u_colors: vec4[];
+    u_colorsCount: number;
+    u_stepsPerColor: number;
+    u_colorGap: [number, number, number, number];
+    u_colorGlow: [number, number, number, number];
+    u_distortion: number;
+    u_gap: number;
+    u_glow: number;
+    u_noiseTexture?: HTMLImageElement;
+}
+export interface VoronoiParams extends ShaderSizingParams, ShaderMotionParams {
+    colors?: string[];
+    stepsPerColor?: number;
+    colorGap?: string;
+    colorGlow?: string;
+    distortion?: number;
+    gap?: number;
+    glow?: number;
+}

package/dist/shaders/voronoi.js

@@ -0,0 +1,139 @@
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *                    Paper Shaders                    *
+ *       https://github.com/paper-design/shaders       *
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+import {} from "../shader-sizing.js";
+import { declarePI, textureRandomizerGB } from "../shader-utils.js";
+const voronoiMeta = {
+  maxColorCount: 5
+};
+const voronoiFragmentShader = `#version 300 es
+precision mediump float;
+
+uniform float u_time;
+
+uniform float u_scale;
+
+uniform sampler2D u_noiseTexture;
+
+uniform vec4 u_colors[${voronoiMeta.maxColorCount}];
+uniform float u_colorsCount;
+
+uniform float u_stepsPerColor;
+uniform vec4 u_colorGlow;
+uniform vec4 u_colorGap;
+uniform float u_distortion;
+uniform float u_gap;
+uniform float u_glow;
+
+in vec2 v_patternUV;
+
+out vec4 fragColor;
+
+${declarePI}
+${textureRandomizerGB}
+
+vec4 voronoi(vec2 x, float t) {
+  vec2 ip = floor(x);
+  vec2 fp = fract(x);
+
+  vec2 mg, mr;
+  float md = 8.;
+  float rand = 0.;
+
+  for (int j = -1; j <= 1; j++) {
+    for (int i = -1; i <= 1; i++) {
+      vec2 g = vec2(float(i), float(j));
+      vec2 o = randomGB(ip + g);
+      float raw_hash = o.x;
+      o = .5 + u_distortion * sin(t + TWO_PI * o);
+      vec2 r = g + o - fp;
+      float d = dot(r, r);
+
+      if (d < md) {
+        md = d;
+        mr = r;
+        mg = g;
+        rand = raw_hash;
+      }
+    }
+  }
+
+  md = 8.;
+  for (int j = -2; j <= 2; j++) {
+    for (int i = -2; i <= 2; i++) {
+      vec2 g = mg + vec2(float(i), float(j));
+      vec2 o = randomGB(ip + g);
+      o = .5 + u_distortion * sin(t + TWO_PI * o);
+      vec2 r = g + o - fp;
+      if (dot(mr - r, mr - r) > .00001) {
+        md = min(md, dot(.5 * (mr + r), normalize(r - mr)));
+      }
+    }
+  }
+
+  return vec4(md, mr, rand);
+}
+
+void main() {
+  vec2 shape_uv = v_patternUV;
+  shape_uv *= 1.25;
+
+  float t = u_time;
+
+  vec4 voronoiRes = voronoi(shape_uv, t);
+
+  float shape = clamp(voronoiRes.w, 0., 1.);
+  float mixer = shape * (u_colorsCount - 1.);
+  mixer = (shape - .5 / u_colorsCount) * u_colorsCount;
+  float steps = max(1., u_stepsPerColor);
+
+  vec4 gradient = u_colors[0];
+  gradient.rgb *= gradient.a;
+  for (int i = 1; i < ${voronoiMeta.maxColorCount}; i++) {
+    if (i >= int(u_colorsCount)) break;
+    float localT = clamp(mixer - float(i - 1), 0.0, 1.0);
+    localT = round(localT * steps) / steps;
+    vec4 c = u_colors[i];
+    c.rgb *= c.a;
+    gradient = mix(gradient, c, localT);
+  }
+
+  if ((mixer < 0.) || (mixer > (u_colorsCount - 1.))) {
+    float localT = mixer + 1.;
+    if (mixer > (u_colorsCount - 1.)) {
+      localT = mixer - (u_colorsCount - 1.);
+    }
+    localT = round(localT * steps) / steps;
+    vec4 cFst = u_colors[0];
+    cFst.rgb *= cFst.a;
+    vec4 cLast = u_colors[int(u_colorsCount - 1.)];
+    cLast.rgb *= cLast.a;
+    gradient = mix(cLast, cFst, localT);
+  }
+
+  vec3 cellColor = gradient.rgb;
+  float cellOpacity = gradient.a;
+
+  float glows = length(voronoiRes.yz * u_glow);
+  glows = pow(glows, 1.5);
+
+  vec3 color = mix(cellColor, u_colorGlow.rgb * u_colorGlow.a, u_colorGlow.a * glows);
+  float opacity = cellOpacity + u_colorGlow.a * glows;
+
+  float edge = voronoiRes.x;
+  float smoothEdge = .02 / (2. * u_scale) * (1. + .5 * u_gap);
+  edge = smoothstep(u_gap - smoothEdge, u_gap + smoothEdge, edge);
+
+  color = mix(u_colorGap.rgb * u_colorGap.a, color, edge);
+  opacity = mix(u_colorGap.a, opacity, edge);
+
+  fragColor = vec4(color, opacity);
+}
+`;
+export {
+  voronoiFragmentShader,
+  voronoiMeta
+};
+//# sourceMappingURL=voronoi.js.map

package/dist/shaders/voronoi.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/shaders/voronoi.ts"],
+  "sourcesContent": ["import type { vec4 } from '../types.js';\r\nimport type { ShaderMotionParams } from '../shader-mount.js';\r\nimport { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';\r\nimport { declarePI, textureRandomizerGB } from '../shader-utils.js';\r\n\r\nexport const voronoiMeta = {\r\n  maxColorCount: 5,\r\n} as const;\r\n\r\n/**\r\n * Anti-aliased animated Voronoi pattern with smooth and customizable edges.\r\n *\r\n * Double-pass Voronoi pattern cell edges.\r\n * Original algorithm: https://www.shadertoy.com/view/ldl3W8\r\n *\r\n * Note: gaps can't be removed completely due to natural artifacts of Voronoi cells borders\r\n *\r\n * Fragment shader uniforms:\r\n * - u_time (float): Animation time\r\n * - u_scale (float): Overall zoom level, used for anti-aliasing calculations\r\n * - u_colors (vec4[]): Up to 5 base cell colors in RGBA\r\n * - u_colorsCount (float): Number of active colors\r\n * - u_stepsPerColor (float): Number of extra colors between base colors, 1 = N colors, 2 = 2\u00D7N, etc., needs 2+ colors (1 to 3)\r\n * - u_colorGlow (vec4): Color tint for radial inner shadow inside cells in RGBA, needs glow > 0\r\n * - u_colorGap (vec4): Color used for cell borders/gaps in RGBA\r\n * - u_distortion (float): Strength of noise-driven displacement of cell centers (0 to 0.5)\r\n * - u_gap (float): Width of the border/gap between cells (0 to 0.1)\r\n * - u_glow (float): Strength of the radial inner shadow inside cells, needs colorGlow alpha > 0 (0 to 1)\r\n * - u_noiseTexture (sampler2D): Pre-computed randomizer source texture\r\n *\r\n * Vertex shader outputs (used in fragment shader):\r\n * - v_patternUV (vec2): UV coordinates for pattern with global sizing (rotation, scale, offset, etc) applied\r\n *\r\n * Vertex shader uniforms:\r\n * - u_resolution (vec2): Canvas resolution in pixels\r\n * - u_pixelRatio (float): Device pixel ratio\r\n * - u_originX (float): Reference point for positioning world width in the canvas (0 to 1)\r\n * - u_originY (float): Reference point for positioning world height in the canvas (0 to 1)\r\n * - u_worldWidth (float): Virtual width of the graphic before it's scaled to fit the canvas\r\n * - u_worldHeight (float): Virtual height of the graphic before it's scaled to fit the canvas\r\n * - u_fit (float): How to fit the rendered shader into the canvas dimensions (0 = none, 1 = contain, 2 = cover)\r\n * - u_scale (float): Overall zoom level of the graphics (0.01 to 4)\r\n * - u_rotation (float): Overall rotation angle of the graphics in degrees (0 to 360)\r\n * - u_offsetX (float): Horizontal offset of the graphics center (-1 to 1)\r\n * - u_offsetY (float): Vertical offset of the graphics center (-1 to 1)\r\n *\r\n */\r\n\r\n// language=GLSL\r\nexport const voronoiFragmentShader: string = `#version 300 es\r\nprecision mediump float;\r\n\r\nuniform float u_time;\r\n\r\nuniform float u_scale;\r\n\r\nuniform sampler2D u_noiseTexture;\r\n\r\nuniform vec4 u_colors[${ voronoiMeta.maxColorCount }];\r\nuniform float u_colorsCount;\r\n\r\nuniform float u_stepsPerColor;\r\nuniform vec4 u_colorGlow;\r\nuniform vec4 u_colorGap;\r\nuniform float u_distortion;\r\nuniform float u_gap;\r\nuniform float u_glow;\r\n\r\nin vec2 v_patternUV;\r\n\r\nout vec4 fragColor;\r\n\r\n${ declarePI }\r\n${ textureRandomizerGB }\r\n\r\nvec4 voronoi(vec2 x, float t) {\r\n  vec2 ip = floor(x);\r\n  vec2 fp = fract(x);\r\n\r\n  vec2 mg, mr;\r\n  float md = 8.;\r\n  float rand = 0.;\r\n\r\n  for (int j = -1; j <= 1; j++) {\r\n    for (int i = -1; i <= 1; i++) {\r\n      vec2 g = vec2(float(i), float(j));\r\n      vec2 o = randomGB(ip + g);\r\n      float raw_hash = o.x;\r\n      o = .5 + u_distortion * sin(t + TWO_PI * o);\r\n      vec2 r = g + o - fp;\r\n      float d = dot(r, r);\r\n\r\n      if (d < md) {\r\n        md = d;\r\n        mr = r;\r\n        mg = g;\r\n        rand = raw_hash;\r\n      }\r\n    }\r\n  }\r\n\r\n  md = 8.;\r\n  for (int j = -2; j <= 2; j++) {\r\n    for (int i = -2; i <= 2; i++) {\r\n      vec2 g = mg + vec2(float(i), float(j));\r\n      vec2 o = randomGB(ip + g);\r\n      o = .5 + u_distortion * sin(t + TWO_PI * o);\r\n      vec2 r = g + o - fp;\r\n      if (dot(mr - r, mr - r) > .00001) {\r\n        md = min(md, dot(.5 * (mr + r), normalize(r - mr)));\r\n      }\r\n    }\r\n  }\r\n\r\n  return vec4(md, mr, rand);\r\n}\r\n\r\nvoid main() {\r\n  vec2 shape_uv = v_patternUV;\r\n  shape_uv *= 1.25;\r\n\r\n  float t = u_time;\r\n\r\n  vec4 voronoiRes = voronoi(shape_uv, t);\r\n\r\n  float shape = clamp(voronoiRes.w, 0., 1.);\r\n  float mixer = shape * (u_colorsCount - 1.);\r\n  mixer = (shape - .5 / u_colorsCount) * u_colorsCount;\r\n  float steps = max(1., u_stepsPerColor);\r\n\r\n  vec4 gradient = u_colors[0];\r\n  gradient.rgb *= gradient.a;\r\n  for (int i = 1; i < ${ voronoiMeta.maxColorCount }; i++) {\r\n    if (i >= int(u_colorsCount)) break;\r\n    float localT = clamp(mixer - float(i - 1), 0.0, 1.0);\r\n    localT = round(localT * steps) / steps;\r\n    vec4 c = u_colors[i];\r\n    c.rgb *= c.a;\r\n    gradient = mix(gradient, c, localT);\r\n  }\r\n\r\n  if ((mixer < 0.) || (mixer > (u_colorsCount - 1.))) {\r\n    float localT = mixer + 1.;\r\n    if (mixer > (u_colorsCount - 1.)) {\r\n      localT = mixer - (u_colorsCount - 1.);\r\n    }\r\n    localT = round(localT * steps) / steps;\r\n    vec4 cFst = u_colors[0];\r\n    cFst.rgb *= cFst.a;\r\n    vec4 cLast = u_colors[int(u_colorsCount - 1.)];\r\n    cLast.rgb *= cLast.a;\r\n    gradient = mix(cLast, cFst, localT);\r\n  }\r\n\r\n  vec3 cellColor = gradient.rgb;\r\n  float cellOpacity = gradient.a;\r\n\r\n  float glows = length(voronoiRes.yz * u_glow);\r\n  glows = pow(glows, 1.5);\r\n\r\n  vec3 color = mix(cellColor, u_colorGlow.rgb * u_colorGlow.a, u_colorGlow.a * glows);\r\n  float opacity = cellOpacity + u_colorGlow.a * glows;\r\n\r\n  float edge = voronoiRes.x;\r\n  float smoothEdge = .02 / (2. * u_scale) * (1. + .5 * u_gap);\r\n  edge = smoothstep(u_gap - smoothEdge, u_gap + smoothEdge, edge);\r\n\r\n  color = mix(u_colorGap.rgb * u_colorGap.a, color, edge);\r\n  opacity = mix(u_colorGap.a, opacity, edge);\r\n\r\n  fragColor = vec4(color, opacity);\r\n}\r\n`;\r\n\r\nexport interface VoronoiUniforms extends ShaderSizingUniforms {\r\n  u_colors: vec4[];\r\n  u_colorsCount: number;\r\n  u_stepsPerColor: number;\r\n  u_colorGap: [number, number, number, number];\r\n  u_colorGlow: [number, number, number, number];\r\n  u_distortion: number;\r\n  u_gap: number;\r\n  u_glow: number;\r\n  u_noiseTexture?: HTMLImageElement;\r\n}\r\n\r\nexport interface VoronoiParams extends ShaderSizingParams, ShaderMotionParams {\r\n  colors?: string[];\r\n  stepsPerColor?: number;\r\n  colorGap?: string;\r\n  colorGlow?: string;\r\n  distortion?: number;\r\n  gap?: number;\r\n  glow?: number;\r\n}\r\n"],
+  "mappings": ";;;;;AAEA,eAAmE;AACnE,SAAS,WAAW,2BAA2B;AAExC,MAAM,cAAc;AAAA,EACzB,eAAe;AACjB;AA0CO,MAAM,wBAAgC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBASpB,YAAY,aAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAchD,SAAU;AAAA,EACV,mBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBA2DE,YAAY,aAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}

package/dist/shaders/warp.d.ts

@@ -0,0 +1,70 @@
+import type { vec4 } from '../types.js';
+import type { ShaderMotionParams } from '../shader-mount.js';
+import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';
+export declare const warpMeta: {
+    readonly maxColorCount: 10;
+};
+/**
+ * Animated color fields warped by noise and swirls, applied over base patterns
+ * (checks, stripes, or split edge). Blends up to 10 colors with adjustable distribution,
+ * softness, distortion, and swirl. Great for fluid, smoky, or marbled effects.
+ *
+ * Fragment shader uniforms:
+ * - u_time (float): Animation time
+ * - u_colors (vec4[]): Up to 10 gradient colors in RGBA
+ * - u_colorsCount (float): Number of active colors
+ * - u_proportion (float): Blend point between colors, 0.5 = equal distribution (0 to 1)
+ * - u_softness (float): Color transition sharpness, 0 = hard edge, 1 = smooth gradient (0 to 1)
+ * - u_shape (float): Base pattern type (0 = checks, 1 = stripes, 2 = edge)
+ * - u_shapeScale (float): Zoom level of the base pattern (0 to 1)
+ * - u_distortion (float): Strength of noise-based distortion (0 to 1)
+ * - u_swirl (float): Strength of the swirl distortion, needs swirlIterations > 1 (0 to 1)
+ * - u_swirlIterations (float): Number of layered swirl passes as an integer, needs swirl > 0 (2 to 20)
+ * - u_noiseTexture (sampler2D): Pre-computed randomizer source texture
+ *
+ * Vertex shader outputs (used in fragment shader):
+ * - v_patternUV (vec2): UV coordinates for pattern with global sizing (rotation, scale, offset, etc) applied
+ *
+ * Vertex shader uniforms:
+ * - u_resolution (vec2): Canvas resolution in pixels
+ * - u_pixelRatio (float): Device pixel ratio
+ * - u_originX (float): Reference point for positioning world width in the canvas (0 to 1)
+ * - u_originY (float): Reference point for positioning world height in the canvas (0 to 1)
+ * - u_worldWidth (float): Virtual width of the graphic before it's scaled to fit the canvas
+ * - u_worldHeight (float): Virtual height of the graphic before it's scaled to fit the canvas
+ * - u_fit (float): How to fit the rendered shader into the canvas dimensions (0 = none, 1 = contain, 2 = cover)
+ * - u_scale (float): Overall zoom level of the graphics (0.01 to 4)
+ * - u_rotation (float): Overall rotation angle of the graphics in degrees (0 to 360)
+ * - u_offsetX (float): Horizontal offset of the graphics center (-1 to 1)
+ * - u_offsetY (float): Vertical offset of the graphics center (-1 to 1)
+ *
+ */
+export declare const warpFragmentShader: string;
+export interface WarpUniforms extends ShaderSizingUniforms {
+    u_colors: vec4[];
+    u_colorsCount: number;
+    u_proportion: number;
+    u_softness: number;
+    u_shape: (typeof WarpPatterns)[WarpPattern];
+    u_shapeScale: number;
+    u_distortion: number;
+    u_swirl: number;
+    u_swirlIterations: number;
+    u_noiseTexture?: HTMLImageElement;
+}
+export interface WarpParams extends ShaderSizingParams, ShaderMotionParams {
+    colors?: string[];
+    proportion?: number;
+    softness?: number;
+    shape?: WarpPattern;
+    shapeScale?: number;
+    distortion?: number;
+    swirl?: number;
+    swirlIterations?: number;
+}
+export declare const WarpPatterns: {
+    readonly checks: 0;
+    readonly stripes: 1;
+    readonly edge: 2;
+};
+export type WarpPattern = keyof typeof WarpPatterns;

package/dist/shaders/warp.js

@@ -0,0 +1,130 @@
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *                    Paper Shaders                    *
+ *       https://github.com/paper-design/shaders       *
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+import {} from "../shader-sizing.js";
+import { declarePI, rotation2, colorBandingFix } from "../shader-utils.js";
+const warpMeta = {
+  maxColorCount: 10
+};
+const warpFragmentShader = `#version 300 es
+precision mediump float;
+
+uniform float u_time;
+
+uniform sampler2D u_noiseTexture;
+
+uniform vec4 u_colors[${warpMeta.maxColorCount}];
+uniform float u_colorsCount;
+uniform float u_proportion;
+uniform float u_softness;
+uniform float u_shape;
+uniform float u_shapeScale;
+uniform float u_distortion;
+uniform float u_swirl;
+uniform float u_swirlIterations;
+
+in vec2 v_patternUV;
+
+out vec4 fragColor;
+
+${declarePI}
+${rotation2}
+float randomG(vec2 p) {
+  vec2 uv = floor(p) / 100. + .5;
+  return texture(u_noiseTexture, fract(uv)).g;
+}
+float valueNoise(vec2 st) {
+  vec2 i = floor(st);
+  vec2 f = fract(st);
+  float a = randomG(i);
+  float b = randomG(i + vec2(1.0, 0.0));
+  float c = randomG(i + vec2(0.0, 1.0));
+  float d = randomG(i + vec2(1.0, 1.0));
+  vec2 u = f * f * (3.0 - 2.0 * f);
+  float x1 = mix(a, b, u.x);
+  float x2 = mix(c, d, u.x);
+  return mix(x1, x2, u.y);
+}
+
+
+void main() {
+  vec2 uv = v_patternUV;
+  uv *= .5;
+
+  const float firstFrameOffset = 118.;
+  float t = 0.0625 * (u_time + firstFrameOffset);
+
+  float n1 = valueNoise(uv * 1. + t);
+  float n2 = valueNoise(uv * 2. - t);
+  float angle = n1 * TWO_PI;
+  uv.x += 4. * u_distortion * n2 * cos(angle);
+  uv.y += 4. * u_distortion * n2 * sin(angle);
+
+  float swirl = u_swirl;
+  for (int i = 1; i <= 20; i++) {
+    if (i >= int(u_swirlIterations)) break;
+    float iFloat = float(i);
+    uv.x += swirl / iFloat * cos(t + iFloat * 1.5 * uv.y);
+    uv.y += swirl / iFloat * cos(t + iFloat * 1. * uv.x);
+  }
+
+  float proportion = clamp(u_proportion, 0., 1.);
+
+  float shape = 0.;
+  if (u_shape < .5) {
+    vec2 checksShape_uv = uv * (.5 + 3.5 * u_shapeScale);
+    shape = .5 + .5 * sin(checksShape_uv.x) * cos(checksShape_uv.y);
+    shape += .48 * sign(proportion - .5) * pow(abs(proportion - .5), .5);
+  } else if (u_shape < 1.5) {
+    vec2 stripesShape_uv = uv * (2. * u_shapeScale);
+    float f = fract(stripesShape_uv.y);
+    shape = smoothstep(.0, .55, f) * (1.0 - smoothstep(.45, 1., f));
+    shape += .48 * sign(proportion - .5) * pow(abs(proportion - .5), .5);
+  } else {
+    float shapeScaling = 5. * (1. - u_shapeScale);
+    float e0 = 0.45 - shapeScaling;
+    float e1 = 0.55 + shapeScaling;
+    shape = smoothstep(min(e0, e1), max(e0, e1), 1.0 - uv.y + 0.3 * (proportion - 0.5));
+  }
+
+  float mixer = shape * (u_colorsCount - 1.);
+  vec4 gradient = u_colors[0];
+  gradient.rgb *= gradient.a;
+  float aa = fwidth(shape);
+  for (int i = 1; i < ${warpMeta.maxColorCount}; i++) {
+    if (i >= int(u_colorsCount)) break;
+    float m = clamp(mixer - float(i - 1), 0.0, 1.0);
+
+    float localMixerStart = floor(m);
+    float softness = .5 * u_softness + fwidth(m);
+    float smoothed = smoothstep(max(0., .5 - softness - aa), min(1., .5 + softness + aa), m - localMixerStart);
+    float stepped = localMixerStart + smoothed;
+
+    m = mix(stepped, m, u_softness);
+
+    vec4 c = u_colors[i];
+    c.rgb *= c.a;
+    gradient = mix(gradient, c, m);
+  }
+
+  vec3 color = gradient.rgb;
+  float opacity = gradient.a;
+
+  ${colorBandingFix}
+
+  fragColor = vec4(color, opacity);
+}
+`;
+const WarpPatterns = {
+  checks: 0,
+  stripes: 1,
+  edge: 2
+};
+export {
+  WarpPatterns,
+  warpFragmentShader,
+  warpMeta
+};
+//# sourceMappingURL=warp.js.map

package/dist/shaders/warp.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/shaders/warp.ts"],
+  "sourcesContent": ["import type { vec4 } from '../types.js';\r\nimport type { ShaderMotionParams } from '../shader-mount.js';\r\nimport { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';\r\nimport { declarePI, rotation2, colorBandingFix } from '../shader-utils.js';\r\n\r\nexport const warpMeta = {\r\n  maxColorCount: 10,\r\n} as const;\r\n\r\n/**\r\n * Animated color fields warped by noise and swirls, applied over base patterns\r\n * (checks, stripes, or split edge). Blends up to 10 colors with adjustable distribution,\r\n * softness, distortion, and swirl. Great for fluid, smoky, or marbled effects.\r\n *\r\n * Fragment shader uniforms:\r\n * - u_time (float): Animation time\r\n * - u_colors (vec4[]): Up to 10 gradient colors in RGBA\r\n * - u_colorsCount (float): Number of active colors\r\n * - u_proportion (float): Blend point between colors, 0.5 = equal distribution (0 to 1)\r\n * - u_softness (float): Color transition sharpness, 0 = hard edge, 1 = smooth gradient (0 to 1)\r\n * - u_shape (float): Base pattern type (0 = checks, 1 = stripes, 2 = edge)\r\n * - u_shapeScale (float): Zoom level of the base pattern (0 to 1)\r\n * - u_distortion (float): Strength of noise-based distortion (0 to 1)\r\n * - u_swirl (float): Strength of the swirl distortion, needs swirlIterations > 1 (0 to 1)\r\n * - u_swirlIterations (float): Number of layered swirl passes as an integer, needs swirl > 0 (2 to 20)\r\n * - u_noiseTexture (sampler2D): Pre-computed randomizer source texture\r\n *\r\n * Vertex shader outputs (used in fragment shader):\r\n * - v_patternUV (vec2): UV coordinates for pattern with global sizing (rotation, scale, offset, etc) applied\r\n *\r\n * Vertex shader uniforms:\r\n * - u_resolution (vec2): Canvas resolution in pixels\r\n * - u_pixelRatio (float): Device pixel ratio\r\n * - u_originX (float): Reference point for positioning world width in the canvas (0 to 1)\r\n * - u_originY (float): Reference point for positioning world height in the canvas (0 to 1)\r\n * - u_worldWidth (float): Virtual width of the graphic before it's scaled to fit the canvas\r\n * - u_worldHeight (float): Virtual height of the graphic before it's scaled to fit the canvas\r\n * - u_fit (float): How to fit the rendered shader into the canvas dimensions (0 = none, 1 = contain, 2 = cover)\r\n * - u_scale (float): Overall zoom level of the graphics (0.01 to 4)\r\n * - u_rotation (float): Overall rotation angle of the graphics in degrees (0 to 360)\r\n * - u_offsetX (float): Horizontal offset of the graphics center (-1 to 1)\r\n * - u_offsetY (float): Vertical offset of the graphics center (-1 to 1)\r\n *\r\n */\r\n\r\n// language=GLSL\r\nexport const warpFragmentShader: string = `#version 300 es\r\nprecision mediump float;\r\n\r\nuniform float u_time;\r\n\r\nuniform sampler2D u_noiseTexture;\r\n\r\nuniform vec4 u_colors[${ warpMeta.maxColorCount }];\r\nuniform float u_colorsCount;\r\nuniform float u_proportion;\r\nuniform float u_softness;\r\nuniform float u_shape;\r\nuniform float u_shapeScale;\r\nuniform float u_distortion;\r\nuniform float u_swirl;\r\nuniform float u_swirlIterations;\r\n\r\nin vec2 v_patternUV;\r\n\r\nout vec4 fragColor;\r\n\r\n${ declarePI }\r\n${ rotation2 }\r\nfloat randomG(vec2 p) {\r\n  vec2 uv = floor(p) / 100. + .5;\r\n  return texture(u_noiseTexture, fract(uv)).g;\r\n}\r\nfloat valueNoise(vec2 st) {\r\n  vec2 i = floor(st);\r\n  vec2 f = fract(st);\r\n  float a = randomG(i);\r\n  float b = randomG(i + vec2(1.0, 0.0));\r\n  float c = randomG(i + vec2(0.0, 1.0));\r\n  float d = randomG(i + vec2(1.0, 1.0));\r\n  vec2 u = f * f * (3.0 - 2.0 * f);\r\n  float x1 = mix(a, b, u.x);\r\n  float x2 = mix(c, d, u.x);\r\n  return mix(x1, x2, u.y);\r\n}\r\n\r\n\r\nvoid main() {\r\n  vec2 uv = v_patternUV;\r\n  uv *= .5;\r\n\r\n  const float firstFrameOffset = 118.;\r\n  float t = 0.0625 * (u_time + firstFrameOffset);\r\n\r\n  float n1 = valueNoise(uv * 1. + t);\r\n  float n2 = valueNoise(uv * 2. - t);\r\n  float angle = n1 * TWO_PI;\r\n  uv.x += 4. * u_distortion * n2 * cos(angle);\r\n  uv.y += 4. * u_distortion * n2 * sin(angle);\r\n\r\n  float swirl = u_swirl;\r\n  for (int i = 1; i <= 20; i++) {\r\n    if (i >= int(u_swirlIterations)) break;\r\n    float iFloat = float(i);\r\n    uv.x += swirl / iFloat * cos(t + iFloat * 1.5 * uv.y);\r\n    uv.y += swirl / iFloat * cos(t + iFloat * 1. * uv.x);\r\n  }\r\n\r\n  float proportion = clamp(u_proportion, 0., 1.);\r\n\r\n  float shape = 0.;\r\n  if (u_shape < .5) {\r\n    vec2 checksShape_uv = uv * (.5 + 3.5 * u_shapeScale);\r\n    shape = .5 + .5 * sin(checksShape_uv.x) * cos(checksShape_uv.y);\r\n    shape += .48 * sign(proportion - .5) * pow(abs(proportion - .5), .5);\r\n  } else if (u_shape < 1.5) {\r\n    vec2 stripesShape_uv = uv * (2. * u_shapeScale);\r\n    float f = fract(stripesShape_uv.y);\r\n    shape = smoothstep(.0, .55, f) * (1.0 - smoothstep(.45, 1., f));\r\n    shape += .48 * sign(proportion - .5) * pow(abs(proportion - .5), .5);\r\n  } else {\r\n    float shapeScaling = 5. * (1. - u_shapeScale);\r\n    float e0 = 0.45 - shapeScaling;\r\n    float e1 = 0.55 + shapeScaling;\r\n    shape = smoothstep(min(e0, e1), max(e0, e1), 1.0 - uv.y + 0.3 * (proportion - 0.5));\r\n  }\r\n\r\n  float mixer = shape * (u_colorsCount - 1.);\r\n  vec4 gradient = u_colors[0];\r\n  gradient.rgb *= gradient.a;\r\n  float aa = fwidth(shape);\r\n  for (int i = 1; i < ${ warpMeta.maxColorCount }; i++) {\r\n    if (i >= int(u_colorsCount)) break;\r\n    float m = clamp(mixer - float(i - 1), 0.0, 1.0);\r\n\r\n    float localMixerStart = floor(m);\r\n    float softness = .5 * u_softness + fwidth(m);\r\n    float smoothed = smoothstep(max(0., .5 - softness - aa), min(1., .5 + softness + aa), m - localMixerStart);\r\n    float stepped = localMixerStart + smoothed;\r\n\r\n    m = mix(stepped, m, u_softness);\r\n\r\n    vec4 c = u_colors[i];\r\n    c.rgb *= c.a;\r\n    gradient = mix(gradient, c, m);\r\n  }\r\n\r\n  vec3 color = gradient.rgb;\r\n  float opacity = gradient.a;\r\n\r\n  ${ colorBandingFix }\r\n\r\n  fragColor = vec4(color, opacity);\r\n}\r\n`;\r\n\r\nexport interface WarpUniforms extends ShaderSizingUniforms {\r\n  u_colors: vec4[];\r\n  u_colorsCount: number;\r\n  u_proportion: number;\r\n  u_softness: number;\r\n  u_shape: (typeof WarpPatterns)[WarpPattern];\r\n  u_shapeScale: number;\r\n  u_distortion: number;\r\n  u_swirl: number;\r\n  u_swirlIterations: number;\r\n  u_noiseTexture?: HTMLImageElement;\r\n}\r\n\r\nexport interface WarpParams extends ShaderSizingParams, ShaderMotionParams {\r\n  colors?: string[];\r\n  proportion?: number;\r\n  softness?: number;\r\n  shape?: WarpPattern;\r\n  shapeScale?: number;\r\n  distortion?: number;\r\n  swirl?: number;\r\n  swirlIterations?: number;\r\n}\r\n\r\nexport const WarpPatterns = {\r\n  checks: 0,\r\n  stripes: 1,\r\n  edge: 2,\r\n} as const;\r\n\r\nexport type WarpPattern = keyof typeof WarpPatterns;\r\n"],
+  "mappings": ";;;;;AAEA,eAAmE;AACnE,SAAS,WAAW,WAAW,uBAAuB;AAE/C,MAAM,WAAW;AAAA,EACtB,eAAe;AACjB;AAuCO,MAAM,qBAA6B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAOjB,SAAS,aAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAc7C,SAAU;AAAA,EACV,SAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBA+DY,SAAS,aAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAmB3C,eAAgB;AAAA;AAAA;AAAA;AAAA;AA8Bd,MAAM,eAAe;AAAA,EAC1B,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,MAAM;AACR;",
+  "names": []
+}

package/dist/shaders/water.d.ts

@@ -0,0 +1,59 @@
+import type { ShaderMotionParams } from '../shader-mount.js';
+import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';
+/**
+ * Water-like surface distortion with natural caustic realism. Works as an image filter or standalone animated texture.
+ *
+ * Fragment shader uniforms:
+ * - u_time (float): Animation time
+ * - u_image (sampler2D): Optional source image texture
+ * - u_imageAspectRatio (float): Aspect ratio of the source image
+ * - u_colorBack (vec4): Background color in RGBA
+ * - u_colorHighlight (vec4): Highlight color in RGBA, needs highlights > 0
+ * - u_highlights (float): Coloring added over image/background following caustic shape, needs colorHighlight alpha > 0 (0 to 1)
+ * - u_layering (float): Power of 2nd layer of caustic distortion, needs caustic or highlights > 0 (0 to 1)
+ * - u_edges (float): Caustic distortion power on the image edges, needs image and caustic > 0 (0 to 1)
+ * - u_waves (float): Additional distortion based on simplex noise, independent from caustic (0 to 1)
+ * - u_caustic (float): Power of caustic distortion, needs image (0 to 1)
+ * - u_size (float): Pattern scale relative to the image (0.01 to 7)
+ *
+ * Vertex shader outputs (used in fragment shader):
+ * - v_imageUV (vec2): UV coordinates for sampling the source image, with fit, scale, rotation, and offset applied
+ *
+ * Vertex shader uniforms:
+ * - u_resolution (vec2): Canvas resolution in pixels
+ * - u_pixelRatio (float): Device pixel ratio
+ * - u_originX (float): Reference point for positioning world width in the canvas (0 to 1)
+ * - u_originY (float): Reference point for positioning world height in the canvas (0 to 1)
+ * - u_worldWidth (float): Virtual width of the graphic before it's scaled to fit the canvas
+ * - u_worldHeight (float): Virtual height of the graphic before it's scaled to fit the canvas
+ * - u_fit (float): How to fit the rendered shader into the canvas dimensions (0 = none, 1 = contain, 2 = cover)
+ * - u_scale (float): Overall zoom level of the graphics (0.1 to 4)
+ * - u_rotation (float): Overall rotation angle of the graphics in degrees (0 to 360)
+ * - u_offsetX (float): Horizontal offset of the graphics center (-1 to 1)
+ * - u_offsetY (float): Vertical offset of the graphics center (-1 to 1)
+ * - u_imageAspectRatio (float): Aspect ratio of the source image
+ *
+ */
+export declare const waterFragmentShader: string;
+export interface WaterUniforms extends ShaderSizingUniforms {
+    u_image: HTMLImageElement | string | undefined;
+    u_colorBack: [number, number, number, number];
+    u_colorHighlight: [number, number, number, number];
+    u_highlights: number;
+    u_layering: number;
+    u_edges: number;
+    u_caustic: number;
+    u_waves: number;
+    u_size: number;
+}
+export interface WaterParams extends ShaderSizingParams, ShaderMotionParams {
+    image?: HTMLImageElement | string;
+    colorBack?: string;
+    colorHighlight?: string;
+    highlights?: number;
+    layering?: number;
+    edges?: number;
+    caustic?: number;
+    waves?: number;
+    size?: number;
+}

package/dist/shaders/water.js

@@ -0,0 +1,122 @@
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *                    Paper Shaders                    *
+ *       https://github.com/paper-design/shaders       *
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+import {} from "../shader-sizing.js";
+import { declarePI, rotation2, simplexNoise } from "../shader-utils.js";
+const waterFragmentShader = `#version 300 es
+precision mediump float;
+
+uniform float u_time;
+
+uniform vec4 u_colorBack;
+uniform vec4 u_colorHighlight;
+
+uniform sampler2D u_image;
+uniform float u_imageAspectRatio;
+
+uniform float u_size;
+uniform float u_highlights;
+uniform float u_layering;
+uniform float u_edges;
+uniform float u_caustic;
+uniform float u_waves;
+
+in vec2 v_imageUV;
+
+out vec4 fragColor;
+
+${declarePI}
+${rotation2}
+${simplexNoise}
+
+float getUvFrame(vec2 uv) {
+  float aax = 2. * fwidth(uv.x);
+  float aay = 2. * fwidth(uv.y);
+
+  float left   = smoothstep(0., aax, uv.x);
+  float right = 1.0 - smoothstep(1. - aax, 1., uv.x);
+  float bottom = smoothstep(0., aay, uv.y);
+  float top = 1.0 - smoothstep(1. - aay, 1., uv.y);
+
+  return left * right * bottom * top;
+}
+
+mat2 rotate2D(float r) {
+  return mat2(cos(r), sin(r), -sin(r), cos(r));
+}
+
+float getCausticNoise(vec2 uv, float t, float scale) {
+  vec2 n = vec2(.1);
+  vec2 N = vec2(.1);
+  mat2 m = rotate2D(.5);
+  for (int j = 0; j < 6; j++) {
+    uv *= m;
+    n *= m;
+    vec2 q = uv * scale + float(j) + n + (.5 + .5 * float(j)) * (mod(float(j), 2.) - 1.) * t;
+    n += sin(q);
+    N += cos(q) / scale;
+    scale *= 1.1;
+  }
+  return (N.x + N.y + 1.);
+}
+
+void main() {
+  vec2 imageUV = v_imageUV;
+  vec2 patternUV = v_imageUV - .5;
+  patternUV = (patternUV * vec2(u_imageAspectRatio, 1.));
+  patternUV /= (.01 + .09 * u_size);
+
+  float t = u_time;
+
+  float wavesNoise = snoise((.3 + .1 * sin(t)) * .1 * patternUV + vec2(0., .4 * t));
+
+  float causticNoise = getCausticNoise(patternUV + u_waves * vec2(1., -1.) * wavesNoise, 2. * t, 1.5);
+
+  if (u_layering > 0.) {
+    causticNoise += u_layering * getCausticNoise(patternUV + 2. * u_waves * vec2(1., -1.) * wavesNoise, 1.5 * t, 2.);
+  }
+  causticNoise = causticNoise * causticNoise;
+
+  float edgesDistortion = smoothstep(0., .1, imageUV.x);
+  edgesDistortion *= smoothstep(0., .1, imageUV.y);
+  edgesDistortion *= (smoothstep(1., 1.1, imageUV.x) + (1.0 - smoothstep(.8, .95, imageUV.x)));
+  edgesDistortion *= (1.0 - smoothstep(.9, 1., imageUV.y));
+  edgesDistortion = mix(edgesDistortion, 1., u_edges);
+
+  float causticNoiseDistortion = .02 * causticNoise * edgesDistortion;
+
+  float wavesDistortion = .1 * u_waves * wavesNoise;
+
+  imageUV += vec2(wavesDistortion, -wavesDistortion);
+  imageUV += (u_caustic * causticNoiseDistortion);
+
+  float frame = getUvFrame(imageUV);
+
+  vec4 image = texture(u_image, imageUV);
+  vec4 backColor = u_colorBack;
+  backColor.rgb *= backColor.a;
+
+  vec3 color = mix(backColor.rgb, image.rgb, image.a * frame);
+  float opacity = backColor.a + image.a * frame;
+
+  causticNoise = max(-.2, causticNoise);
+
+  float hightlight = .025 * u_highlights * causticNoise;
+  hightlight *= u_colorHighlight.a;
+  color = mix(color, u_colorHighlight.rgb, .05 * u_highlights * causticNoise * u_colorHighlight.a);
+  opacity += hightlight;
+
+  color += hightlight * (.5 + .5 * wavesNoise);
+  opacity += hightlight * (.5 + .5 * wavesNoise);
+
+  opacity = clamp(opacity, 0., 1.);
+
+  fragColor = vec4(color, opacity);
+}
+`;
+export {
+  waterFragmentShader
+};
+//# sourceMappingURL=water.js.map

package/dist/shaders/water.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/shaders/water.ts"],
+  "sourcesContent": ["import type { ShaderMotionParams } from '../shader-mount.js';\r\nimport { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';\r\nimport { declarePI, rotation2, simplexNoise } from '../shader-utils.js';\r\n\r\n/**\r\n * Water-like surface distortion with natural caustic realism. Works as an image filter or standalone animated texture.\r\n *\r\n * Fragment shader uniforms:\r\n * - u_time (float): Animation time\r\n * - u_image (sampler2D): Optional source image texture\r\n * - u_imageAspectRatio (float): Aspect ratio of the source image\r\n * - u_colorBack (vec4): Background color in RGBA\r\n * - u_colorHighlight (vec4): Highlight color in RGBA, needs highlights > 0\r\n * - u_highlights (float): Coloring added over image/background following caustic shape, needs colorHighlight alpha > 0 (0 to 1)\r\n * - u_layering (float): Power of 2nd layer of caustic distortion, needs caustic or highlights > 0 (0 to 1)\r\n * - u_edges (float): Caustic distortion power on the image edges, needs image and caustic > 0 (0 to 1)\r\n * - u_waves (float): Additional distortion based on simplex noise, independent from caustic (0 to 1)\r\n * - u_caustic (float): Power of caustic distortion, needs image (0 to 1)\r\n * - u_size (float): Pattern scale relative to the image (0.01 to 7)\r\n *\r\n * Vertex shader outputs (used in fragment shader):\r\n * - v_imageUV (vec2): UV coordinates for sampling the source image, with fit, scale, rotation, and offset applied\r\n *\r\n * Vertex shader uniforms:\r\n * - u_resolution (vec2): Canvas resolution in pixels\r\n * - u_pixelRatio (float): Device pixel ratio\r\n * - u_originX (float): Reference point for positioning world width in the canvas (0 to 1)\r\n * - u_originY (float): Reference point for positioning world height in the canvas (0 to 1)\r\n * - u_worldWidth (float): Virtual width of the graphic before it's scaled to fit the canvas\r\n * - u_worldHeight (float): Virtual height of the graphic before it's scaled to fit the canvas\r\n * - u_fit (float): How to fit the rendered shader into the canvas dimensions (0 = none, 1 = contain, 2 = cover)\r\n * - u_scale (float): Overall zoom level of the graphics (0.1 to 4)\r\n * - u_rotation (float): Overall rotation angle of the graphics in degrees (0 to 360)\r\n * - u_offsetX (float): Horizontal offset of the graphics center (-1 to 1)\r\n * - u_offsetY (float): Vertical offset of the graphics center (-1 to 1)\r\n * - u_imageAspectRatio (float): Aspect ratio of the source image\r\n *\r\n */\r\n\r\n// language=GLSL\r\nexport const waterFragmentShader: string = `#version 300 es\r\nprecision mediump float;\r\n\r\nuniform float u_time;\r\n\r\nuniform vec4 u_colorBack;\r\nuniform vec4 u_colorHighlight;\r\n\r\nuniform sampler2D u_image;\r\nuniform float u_imageAspectRatio;\r\n\r\nuniform float u_size;\r\nuniform float u_highlights;\r\nuniform float u_layering;\r\nuniform float u_edges;\r\nuniform float u_caustic;\r\nuniform float u_waves;\r\n\r\nin vec2 v_imageUV;\r\n\r\nout vec4 fragColor;\r\n\r\n${ declarePI }\r\n${ rotation2 }\r\n${ simplexNoise }\r\n\r\nfloat getUvFrame(vec2 uv) {\r\n  float aax = 2. * fwidth(uv.x);\r\n  float aay = 2. * fwidth(uv.y);\r\n\r\n  float left   = smoothstep(0., aax, uv.x);\r\n  float right = 1.0 - smoothstep(1. - aax, 1., uv.x);\r\n  float bottom = smoothstep(0., aay, uv.y);\r\n  float top = 1.0 - smoothstep(1. - aay, 1., uv.y);\r\n\r\n  return left * right * bottom * top;\r\n}\r\n\r\nmat2 rotate2D(float r) {\r\n  return mat2(cos(r), sin(r), -sin(r), cos(r));\r\n}\r\n\r\nfloat getCausticNoise(vec2 uv, float t, float scale) {\r\n  vec2 n = vec2(.1);\r\n  vec2 N = vec2(.1);\r\n  mat2 m = rotate2D(.5);\r\n  for (int j = 0; j < 6; j++) {\r\n    uv *= m;\r\n    n *= m;\r\n    vec2 q = uv * scale + float(j) + n + (.5 + .5 * float(j)) * (mod(float(j), 2.) - 1.) * t;\r\n    n += sin(q);\r\n    N += cos(q) / scale;\r\n    scale *= 1.1;\r\n  }\r\n  return (N.x + N.y + 1.);\r\n}\r\n\r\nvoid main() {\r\n  vec2 imageUV = v_imageUV;\r\n  vec2 patternUV = v_imageUV - .5;\r\n  patternUV = (patternUV * vec2(u_imageAspectRatio, 1.));\r\n  patternUV /= (.01 + .09 * u_size);\r\n\r\n  float t = u_time;\r\n\r\n  float wavesNoise = snoise((.3 + .1 * sin(t)) * .1 * patternUV + vec2(0., .4 * t));\r\n\r\n  float causticNoise = getCausticNoise(patternUV + u_waves * vec2(1., -1.) * wavesNoise, 2. * t, 1.5);\r\n\r\n  if (u_layering > 0.) {\r\n    causticNoise += u_layering * getCausticNoise(patternUV + 2. * u_waves * vec2(1., -1.) * wavesNoise, 1.5 * t, 2.);\r\n  }\r\n  causticNoise = causticNoise * causticNoise;\r\n\r\n  float edgesDistortion = smoothstep(0., .1, imageUV.x);\r\n  edgesDistortion *= smoothstep(0., .1, imageUV.y);\r\n  edgesDistortion *= (smoothstep(1., 1.1, imageUV.x) + (1.0 - smoothstep(.8, .95, imageUV.x)));\r\n  edgesDistortion *= (1.0 - smoothstep(.9, 1., imageUV.y));\r\n  edgesDistortion = mix(edgesDistortion, 1., u_edges);\r\n\r\n  float causticNoiseDistortion = .02 * causticNoise * edgesDistortion;\r\n\r\n  float wavesDistortion = .1 * u_waves * wavesNoise;\r\n\r\n  imageUV += vec2(wavesDistortion, -wavesDistortion);\r\n  imageUV += (u_caustic * causticNoiseDistortion);\r\n\r\n  float frame = getUvFrame(imageUV);\r\n\r\n  vec4 image = texture(u_image, imageUV);\r\n  vec4 backColor = u_colorBack;\r\n  backColor.rgb *= backColor.a;\r\n\r\n  vec3 color = mix(backColor.rgb, image.rgb, image.a * frame);\r\n  float opacity = backColor.a + image.a * frame;\r\n\r\n  causticNoise = max(-.2, causticNoise);\r\n\r\n  float hightlight = .025 * u_highlights * causticNoise;\r\n  hightlight *= u_colorHighlight.a;\r\n  color = mix(color, u_colorHighlight.rgb, .05 * u_highlights * causticNoise * u_colorHighlight.a);\r\n  opacity += hightlight;\r\n\r\n  color += hightlight * (.5 + .5 * wavesNoise);\r\n  opacity += hightlight * (.5 + .5 * wavesNoise);\r\n\r\n  opacity = clamp(opacity, 0., 1.);\r\n\r\n  fragColor = vec4(color, opacity);\r\n}\r\n`;\r\n\r\nexport interface WaterUniforms extends ShaderSizingUniforms {\r\n  u_image: HTMLImageElement | string | undefined;\r\n  u_colorBack: [number, number, number, number];\r\n  u_colorHighlight: [number, number, number, number];\r\n  u_highlights: number;\r\n  u_layering: number;\r\n  u_edges: number;\r\n  u_caustic: number;\r\n  u_waves: number;\r\n  u_size: number;\r\n}\r\n\r\nexport interface WaterParams extends ShaderSizingParams, ShaderMotionParams {\r\n  image?: HTMLImageElement | string;\r\n  colorBack?: string;\r\n  colorHighlight?: string;\r\n  highlights?: number;\r\n  layering?: number;\r\n  edges?: number;\r\n  caustic?: number;\r\n  waves?: number;\r\n  size?: number;\r\n}\r\n"],
+  "mappings": ";;;;;AACA,eAAmE;AACnE,SAAS,WAAW,WAAW,oBAAoB;AAsC5C,MAAM,sBAA8B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAsBxC,SAAU;AAAA,EACV,SAAU;AAAA,EACV,YAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}