@paper-design/shaders 0.0.29 → 0.0.31

package/dist/shaders/grain-gradient.js

@@ -3,18 +3,19 @@
  *       https://github.com/paper-design/shaders       *
  * * * * * * * * * * * * * * * * * * * * * * * * * * * */
 
-import { sizingVariablesDeclaration } from "../shader-sizing";
-import { declareSimplexNoise, declarePI, declareRandom, colorBandingFix } from "../shader-utils";
+import { sizingVariablesDeclaration } from "../shader-sizing.js";
+import { declareSimplexNoise, declarePI, declareRandom, colorBandingFix } from "../shader-utils.js";
 const grainGradientMeta = {
   maxColorCount: 7
 };
 const grainGradientFragmentShader = `#version 300 es
-precision highp float;
+precision mediump float;
 
 uniform float u_time;
 uniform vec2 u_resolution;
 uniform float u_pixelRatio;
 
+uniform vec4 u_colorBack;
 uniform vec4 u_colors[${grainGradientMeta.maxColorCount}];
 uniform float u_colorsCount;
 uniform float u_softness;
@@ -81,24 +82,24 @@ vec2 truchet(vec2 uv, float idx){
 }
 
 void main() {
-  
+
   float t = .1 * u_time;
-  
+
   vec2 grain_uv = (gl_FragCoord.xy - .5 * u_resolution) / u_pixelRatio;
   vec2 shape_uv = v_objectUV;
   if (u_shape < 3.5) {
     shape_uv = v_patternUV * .005;
   }
-  
-  
+
+
   float shape = 0.;
-  
+
   if (u_shape < 1.5) {
     // Sine wave
-    
+
     float wave = cos(.5 * shape_uv.x - 2. * t) * sin(1.5 * shape_uv.x + t) * (.75 + .25 * cos(3. * t));
     shape = 1. - smoothstep(-1., 1., shape_uv.y + wave);
-      
+
   } else if (u_shape < 2.5) {
     // Grid (dots)
 
@@ -106,12 +107,12 @@ void main() {
     float rand = fract(sin(stripeIdx * 12.9898) * 43758.5453);
 
     float speed = sign(rand - .5) * ceil(2. + rand);
-    shape = sin(shape_uv.x) * cos(shape_uv.y + speed * t);  
+    shape = sin(shape_uv.x) * cos(shape_uv.y + speed * t);
     shape = pow(shape, 4.);
-  
+
   } else if (u_shape < 3.5) {
     // Truchet pattern
-    
+
     float n2 = noisenoise(shape_uv * .4 - 2.5 * t);
     shape_uv.x += 10.;
     shape_uv *= .6;
@@ -125,29 +126,29 @@ void main() {
     n2 *= .1;
     shape = smoothstep(.2, .55, distance1 + n2) * smoothstep(.8, .45, distance1 - n2);
     shape += smoothstep(.2, .55, distance2 + n2) * smoothstep(.8, .45, distance2 - n2);
-    
+
     shape = pow(shape, 1.5);
-      
-  } else if (u_shape < 4.5) {  
+
+  } else if (u_shape < 4.5) {
     // Corners
 
     shape_uv *= .6;
     vec2 outer = vec2(.5);
-    
+
     vec2 bl = smoothstep(vec2(0.), outer, shape_uv + vec2(.1 + .1 * sin(2. * t), .2 - .1 * sin(3. * t)));
     vec2 tr = smoothstep(vec2(0.), outer, 1. - shape_uv);
     shape = 1. - bl.x * bl.y * tr.x * tr.y;
-    
+
     shape_uv = -shape_uv;
     bl = smoothstep(vec2(0.), outer, shape_uv + vec2(.1 + .1 * sin(2. * t), .2 - .1 * cos(3. * t)));
     tr = smoothstep(vec2(0.), outer, 1. - shape_uv);
-    shape -= bl.x * bl.y * tr.x * tr.y; 
-    
+    shape -= bl.x * bl.y * tr.x * tr.y;
+
     shape = 1. - smoothstep(0., 1., shape);
-    
-  } else if (u_shape < 5.5) {  
+
+  } else if (u_shape < 5.5) {
     // Ripple
-  
+
     shape_uv *= 2.;
     float dist = length(.4 * shape_uv);
     float waves = sin(pow(dist, 1.2) * 5. - 3. * t) * .5 + .5;
@@ -157,21 +158,21 @@ void main() {
     // Blob
 
     t *= 2.;
-       
+
     vec2 f1_traj = .25 * vec2(1.3 * sin(t), .2 + 1.3 * cos(.6 * t + 4.));
     vec2 f2_traj = .2 * vec2(1.2 * sin(-t), 1.3 * sin(1.6 * t));
     vec2 f3_traj = .25 * vec2(1.7 * cos(-.6 * t), cos(-1.6 * t));
     vec2 f4_traj = .3 * vec2(1.4 * cos(.8 * t), 1.2 * sin(-.6 * t - 3.));
-    
+
     shape = .5 * pow(1. - clamp(0., 1., length(shape_uv + f1_traj)), 5.);
     shape += .5 * pow(1. - clamp(0., 1., length(shape_uv + f2_traj)), 5.);
     shape += .5 * pow(1. - clamp(0., 1., length(shape_uv + f3_traj)), 5.);
     shape += .5 * pow(1. - clamp(0., 1., length(shape_uv + f4_traj)), 5.);
-    
+
     shape = smoothstep(.0, .9, shape);
     float edge = smoothstep(.25, .3, shape);
     shape = mix(.0, shape, edge);
-    
+
   } else {
     // Sphere
 
@@ -184,35 +185,58 @@ void main() {
     float edge = smoothstep(1., .97, d);
     shape = mix(.1, .5 + .5 * lighting, edge);
   }
-  
+
   float snoise05 = snoise(grain_uv * .5);
   float grainDist = snoise(grain_uv * .2) * snoise05 - fbm_4(.002 * grain_uv + 10.) - fbm_4(.003 * grain_uv);
   float noise = clamp(.6 * snoise05 - fbm_4(.4 * grain_uv) - fbm_4(.001 * grain_uv), 0., 1.);
 
   shape += u_intensity * 2. / u_colorsCount * (grainDist + .5);
-  shape += u_noise * 10. / u_colorsCount * noise;  
+  shape += u_noise * 10. / u_colorsCount * noise;
 
   float edge_w = fwidth(shape);
-      
-  float mixer = shape;
-  vec3 gradient = u_colors[0].rgb;
+
+  float mixer = shape * (u_colorsCount + 1.) / u_colorsCount;
+  vec4 gradient = u_colors[0];
+  gradient.rgb *= gradient.a;
+
   for (int i = 1; i < ${grainGradientMeta.maxColorCount}; i++) {
-      if (i >= int(u_colorsCount)) break;
+      if (i > int(u_colorsCount) - 1) break;
 
-      vec2 borders = vec2(float(i) - u_softness, float(i) + u_softness + edge_w) / u_colorsCount;
+      vec2 borders = vec2(float(i + 1) - u_softness - edge_w, float(i + 1) + u_softness + edge_w) / u_colorsCount;
       float localT = smoothstep(borders[0], borders[1], mixer);
-      gradient = mix(gradient, u_colors[i].rgb, localT);
+      vec4 c = u_colors[i];
+      c.rgb *= c.a;
+      gradient = mix(gradient, c, localT);
   }
 
-  vec3 color = gradient;
-  float opacity = 1.;
+  vec2 borders = vec2(2. / (u_colorsCount - 1.));
+  borders = vec2(borders[0] - u_softness - edge_w, borders[1] + u_softness + edge_w) / u_colorsCount;
+  borders[0] = max(0., borders[0]);
+  float gradientShape = smoothstep(borders[0], borders[1], mixer);
+
+  vec3 color = gradient.rgb * gradientShape;
+  float opacity = gradient.a * gradientShape;
+
+  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;
+  color = color + bgColor * (1.0 - opacity);
+  opacity = opacity + u_colorBack.a * (1.0 - opacity);
 
   ${colorBandingFix}
 
   fragColor = vec4(color, opacity);
 }
 `;
+const GrainGradientShapes = {
+  wave: 1,
+  dots: 2,
+  truchet: 3,
+  corners: 4,
+  ripple: 5,
+  blob: 6,
+  sphere: 7
+};
 export {
+  GrainGradientShapes,
   grainGradientFragmentShader,
   grainGradientMeta
 };

package/dist/shaders/grain-gradient.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/shaders/grain-gradient.ts"],
-  "sourcesContent": ["import type { vec4 } from '../types';\nimport type { ShaderMotionParams } from '../shader-mount';\nimport { sizingVariablesDeclaration, type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing';\nimport { declareSimplexNoise, declarePI, declareRandom, colorBandingFix } from '../shader-utils';\n\nexport const grainGradientMeta = {\n  maxColorCount: 7,\n} as const;\n\n/**\n * Grainy Gradient Ksenia Kondrashova\n */\nexport const grainGradientFragmentShader: string = `#version 300 es\nprecision highp float;\n\nuniform float u_time;\nuniform vec2 u_resolution;\nuniform float u_pixelRatio;\n\nuniform vec4 u_colors[${grainGradientMeta.maxColorCount}];\nuniform float u_colorsCount;\nuniform float u_softness;\nuniform float u_intensity;\nuniform float u_noise;\nuniform float u_shape;\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${declarePI}\n${declareSimplexNoise}\n${declareRandom}\n\n\nfloat noisenoise(vec2 st) {\n  vec2 i = floor(st);\n  vec2 f = fract(st);\n  float a = random(i);\n  float b = random(i + vec2(1.0, 0.0));\n  float c = random(i + vec2(0.0, 1.0));\n  float d = random(i + vec2(1.0, 1.0));\n\n  // Smoothstep for interpolation\n  vec2 u = f * f * (3.0 - 2.0 * f);\n\n  // Do the interpolation as two nested mix operations\n  // If you try to do this in one big operation, there's enough precision loss to be off by 1px at cell boundaries\n  float x1 = mix(a, b, u.x);\n  float x2 = mix(c, d, u.x);\n  return mix(x1, x2, u.y);\n}\n\nfloat rand(vec2 n) {\n  return fract(cos(dot(n, vec2(12.9898, 4.1414))) * 43758.5453);\n}\nfloat noise(vec2 n) {\n  const vec2 d = vec2(0.0, 1.0);\n  vec2 b = floor(n), f = smoothstep(vec2(0.0), vec2(1.0), fract(n));\n  return mix(mix(rand(b), rand(b + d.yx), f.x), mix(rand(b + d.xy), rand(b + d.yy), f.x), f.y);\n}\nfloat fbm_4(vec2 n) {\n  float total = 0.0, amplitude = .2;\n  for (int i = 0; i < 4; i++) {\n    total += noise(n) * amplitude;\n    n += n;\n    amplitude *= 0.6;\n  }\n  return total;\n}\n\n\nvec2 truchet(vec2 uv, float idx){\n    idx = fract(((idx - .5) * 2.));\n    if (idx > 0.75) {\n        uv = vec2(1.0) - uv;\n    } else if (idx > 0.5) {\n        uv = vec2(1.0 - uv.x, uv.y);\n    } else if (idx > 0.25) {\n        uv = 1.0 - vec2(1.0 - uv.x, uv.y);\n    }\n    return uv;\n}\n\nvoid main() {\n  \n  float t = .1 * u_time;\n  \n  vec2 grain_uv = (gl_FragCoord.xy - .5 * u_resolution) / u_pixelRatio;\n  vec2 shape_uv = v_objectUV;\n  if (u_shape < 3.5) {\n    shape_uv = v_patternUV * .005;\n  }\n  \n  \n  float shape = 0.;\n  \n  if (u_shape < 1.5) {\n    // Sine wave\n    \n    float wave = cos(.5 * shape_uv.x - 2. * t) * sin(1.5 * shape_uv.x + t) * (.75 + .25 * cos(3. * t));\n    shape = 1. - smoothstep(-1., 1., shape_uv.y + wave);\n      \n  } else if (u_shape < 2.5) {\n    // Grid (dots)\n\n    float stripeIdx = floor(2. * shape_uv.x / TWO_PI);\n    float rand = fract(sin(stripeIdx * 12.9898) * 43758.5453);\n\n    float speed = sign(rand - .5) * ceil(2. + rand);\n    shape = sin(shape_uv.x) * cos(shape_uv.y + speed * t);  \n    shape = pow(shape, 4.);\n  \n  } else if (u_shape < 3.5) {\n    // Truchet pattern\n    \n    float n2 = noisenoise(shape_uv * .4 - 2.5 * t);\n    shape_uv.x += 10.;\n    shape_uv *= .6;\n\n    vec2 tile = truchet(fract(shape_uv), random(floor(shape_uv)));\n\n    float distance1 = length(tile);\n    float distance2 = length(tile - vec2(1.));\n\n    n2 -= .5;\n    n2 *= .1;\n    shape = smoothstep(.2, .55, distance1 + n2) * smoothstep(.8, .45, distance1 - n2);\n    shape += smoothstep(.2, .55, distance2 + n2) * smoothstep(.8, .45, distance2 - n2);\n    \n    shape = pow(shape, 1.5);\n      \n  } else if (u_shape < 4.5) {  \n    // Corners\n\n    shape_uv *= .6;\n    vec2 outer = vec2(.5);\n    \n    vec2 bl = smoothstep(vec2(0.), outer, shape_uv + vec2(.1 + .1 * sin(2. * t), .2 - .1 * sin(3. * t)));\n    vec2 tr = smoothstep(vec2(0.), outer, 1. - shape_uv);\n    shape = 1. - bl.x * bl.y * tr.x * tr.y;\n    \n    shape_uv = -shape_uv;\n    bl = smoothstep(vec2(0.), outer, shape_uv + vec2(.1 + .1 * sin(2. * t), .2 - .1 * cos(3. * t)));\n    tr = smoothstep(vec2(0.), outer, 1. - shape_uv);\n    shape -= bl.x * bl.y * tr.x * tr.y; \n    \n    shape = 1. - smoothstep(0., 1., shape);\n    \n  } else if (u_shape < 5.5) {  \n    // Ripple\n  \n    shape_uv *= 2.;\n    float dist = length(.4 * shape_uv);\n    float waves = sin(pow(dist, 1.2) * 5. - 3. * t) * .5 + .5;\n    shape = waves;\n\n  } else if (u_shape < 6.5) {\n    // Blob\n\n    t *= 2.;\n       \n    vec2 f1_traj = .25 * vec2(1.3 * sin(t), .2 + 1.3 * cos(.6 * t + 4.));\n    vec2 f2_traj = .2 * vec2(1.2 * sin(-t), 1.3 * sin(1.6 * t));\n    vec2 f3_traj = .25 * vec2(1.7 * cos(-.6 * t), cos(-1.6 * t));\n    vec2 f4_traj = .3 * vec2(1.4 * cos(.8 * t), 1.2 * sin(-.6 * t - 3.));\n    \n    shape = .5 * pow(1. - clamp(0., 1., length(shape_uv + f1_traj)), 5.);\n    shape += .5 * pow(1. - clamp(0., 1., length(shape_uv + f2_traj)), 5.);\n    shape += .5 * pow(1. - clamp(0., 1., length(shape_uv + f3_traj)), 5.);\n    shape += .5 * pow(1. - clamp(0., 1., length(shape_uv + f4_traj)), 5.);\n    \n    shape = smoothstep(.0, .9, shape);\n    float edge = smoothstep(.25, .3, shape);\n    shape = mix(.0, shape, edge);\n    \n  } else {\n    // Sphere\n\n    shape_uv *= 2.;\n    float d = length(shape_uv);\n    float z = sqrt(1.0 - clamp(pow(d, 2.0), 0.0, 1.0));\n    vec3 pos = vec3(shape_uv, z);\n    vec3 lightPos = normalize(vec3(cos(3. * t), 0.8, sin(2.5 * t)));\n    float lighting = dot(lightPos, pos);\n    float edge = smoothstep(1., .97, d);\n    shape = mix(.1, .5 + .5 * lighting, edge);\n  }\n  \n  float snoise05 = snoise(grain_uv * .5);\n  float grainDist = snoise(grain_uv * .2) * snoise05 - fbm_4(.002 * grain_uv + 10.) - fbm_4(.003 * grain_uv);\n  float noise = clamp(.6 * snoise05 - fbm_4(.4 * grain_uv) - fbm_4(.001 * grain_uv), 0., 1.);\n\n  shape += u_intensity * 2. / u_colorsCount * (grainDist + .5);\n  shape += u_noise * 10. / u_colorsCount * noise;  \n\n  float edge_w = fwidth(shape);\n      \n  float mixer = shape;\n  vec3 gradient = u_colors[0].rgb;\n  for (int i = 1; i < ${grainGradientMeta.maxColorCount}; i++) {\n      if (i >= int(u_colorsCount)) break;\n\n      vec2 borders = vec2(float(i) - u_softness, float(i) + u_softness + edge_w) / u_colorsCount;\n      float localT = smoothstep(borders[0], borders[1], mixer);\n      gradient = mix(gradient, u_colors[i].rgb, localT);\n  }\n\n  vec3 color = gradient;\n  float opacity = 1.;\n\n  ${colorBandingFix}\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface GrainGradientUniforms extends ShaderSizingUniforms {\n  u_colors: vec4[];\n  u_colorsCount: number;\n  u_softness: number;\n  u_intensity: number;\n  u_noise: number;\n  u_shape: number;\n}\n\nexport interface GrainGradientParams extends ShaderSizingParams, ShaderMotionParams {\n  colors?: string[];\n  softness?: number;\n  intensity?: number;\n  noise?: number;\n  shape?: number;\n}\n"],
-  "mappings": ";;;;;AAEA,SAAS,kCAAsF;AAC/F,SAAS,qBAAqB,WAAW,eAAe,uBAAuB;AAExE,MAAM,oBAAoB;AAAA,EAC/B,eAAe;AACjB;AAKO,MAAM,8BAAsC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAO3B,kBAAkB,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOrD,0BAA0B;AAAA;AAAA;AAAA;AAAA,EAI1B,SAAS;AAAA,EACT,mBAAmB;AAAA,EACnB,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;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,wBAwKS,kBAAkB,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAWnD,eAAe;AAAA;AAAA;AAAA;AAAA;",
+  "sourcesContent": ["import type { vec4 } from '../types.js';\nimport type { ShaderMotionParams } from '../shader-mount.js';\nimport { sizingVariablesDeclaration, type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';\nimport { declareSimplexNoise, declarePI, declareRandom, colorBandingFix } from '../shader-utils.js';\n\nexport const grainGradientMeta = {\n  maxColorCount: 7,\n} as const;\n\n/**\n * Grainy Gradient Ksenia Kondrashova\n */\nexport const grainGradientFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform float u_time;\nuniform vec2 u_resolution;\nuniform float u_pixelRatio;\n\nuniform vec4 u_colorBack;\nuniform vec4 u_colors[${grainGradientMeta.maxColorCount}];\nuniform float u_colorsCount;\nuniform float u_softness;\nuniform float u_intensity;\nuniform float u_noise;\nuniform float u_shape;\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${declarePI}\n${declareSimplexNoise}\n${declareRandom}\n\n\nfloat noisenoise(vec2 st) {\n  vec2 i = floor(st);\n  vec2 f = fract(st);\n  float a = random(i);\n  float b = random(i + vec2(1.0, 0.0));\n  float c = random(i + vec2(0.0, 1.0));\n  float d = random(i + vec2(1.0, 1.0));\n\n  // Smoothstep for interpolation\n  vec2 u = f * f * (3.0 - 2.0 * f);\n\n  // Do the interpolation as two nested mix operations\n  // If you try to do this in one big operation, there's enough precision loss to be off by 1px at cell boundaries\n  float x1 = mix(a, b, u.x);\n  float x2 = mix(c, d, u.x);\n  return mix(x1, x2, u.y);\n}\n\nfloat rand(vec2 n) {\n  return fract(cos(dot(n, vec2(12.9898, 4.1414))) * 43758.5453);\n}\nfloat noise(vec2 n) {\n  const vec2 d = vec2(0.0, 1.0);\n  vec2 b = floor(n), f = smoothstep(vec2(0.0), vec2(1.0), fract(n));\n  return mix(mix(rand(b), rand(b + d.yx), f.x), mix(rand(b + d.xy), rand(b + d.yy), f.x), f.y);\n}\nfloat fbm_4(vec2 n) {\n  float total = 0.0, amplitude = .2;\n  for (int i = 0; i < 4; i++) {\n    total += noise(n) * amplitude;\n    n += n;\n    amplitude *= 0.6;\n  }\n  return total;\n}\n\n\nvec2 truchet(vec2 uv, float idx){\n    idx = fract(((idx - .5) * 2.));\n    if (idx > 0.75) {\n        uv = vec2(1.0) - uv;\n    } else if (idx > 0.5) {\n        uv = vec2(1.0 - uv.x, uv.y);\n    } else if (idx > 0.25) {\n        uv = 1.0 - vec2(1.0 - uv.x, uv.y);\n    }\n    return uv;\n}\n\nvoid main() {\n\n  float t = .1 * u_time;\n\n  vec2 grain_uv = (gl_FragCoord.xy - .5 * u_resolution) / u_pixelRatio;\n  vec2 shape_uv = v_objectUV;\n  if (u_shape < 3.5) {\n    shape_uv = v_patternUV * .005;\n  }\n\n\n  float shape = 0.;\n\n  if (u_shape < 1.5) {\n    // Sine wave\n\n    float wave = cos(.5 * shape_uv.x - 2. * t) * sin(1.5 * shape_uv.x + t) * (.75 + .25 * cos(3. * t));\n    shape = 1. - smoothstep(-1., 1., shape_uv.y + wave);\n\n  } else if (u_shape < 2.5) {\n    // Grid (dots)\n\n    float stripeIdx = floor(2. * shape_uv.x / TWO_PI);\n    float rand = fract(sin(stripeIdx * 12.9898) * 43758.5453);\n\n    float speed = sign(rand - .5) * ceil(2. + rand);\n    shape = sin(shape_uv.x) * cos(shape_uv.y + speed * t);\n    shape = pow(shape, 4.);\n\n  } else if (u_shape < 3.5) {\n    // Truchet pattern\n\n    float n2 = noisenoise(shape_uv * .4 - 2.5 * t);\n    shape_uv.x += 10.;\n    shape_uv *= .6;\n\n    vec2 tile = truchet(fract(shape_uv), random(floor(shape_uv)));\n\n    float distance1 = length(tile);\n    float distance2 = length(tile - vec2(1.));\n\n    n2 -= .5;\n    n2 *= .1;\n    shape = smoothstep(.2, .55, distance1 + n2) * smoothstep(.8, .45, distance1 - n2);\n    shape += smoothstep(.2, .55, distance2 + n2) * smoothstep(.8, .45, distance2 - n2);\n\n    shape = pow(shape, 1.5);\n\n  } else if (u_shape < 4.5) {\n    // Corners\n\n    shape_uv *= .6;\n    vec2 outer = vec2(.5);\n\n    vec2 bl = smoothstep(vec2(0.), outer, shape_uv + vec2(.1 + .1 * sin(2. * t), .2 - .1 * sin(3. * t)));\n    vec2 tr = smoothstep(vec2(0.), outer, 1. - shape_uv);\n    shape = 1. - bl.x * bl.y * tr.x * tr.y;\n\n    shape_uv = -shape_uv;\n    bl = smoothstep(vec2(0.), outer, shape_uv + vec2(.1 + .1 * sin(2. * t), .2 - .1 * cos(3. * t)));\n    tr = smoothstep(vec2(0.), outer, 1. - shape_uv);\n    shape -= bl.x * bl.y * tr.x * tr.y;\n\n    shape = 1. - smoothstep(0., 1., shape);\n\n  } else if (u_shape < 5.5) {\n    // Ripple\n\n    shape_uv *= 2.;\n    float dist = length(.4 * shape_uv);\n    float waves = sin(pow(dist, 1.2) * 5. - 3. * t) * .5 + .5;\n    shape = waves;\n\n  } else if (u_shape < 6.5) {\n    // Blob\n\n    t *= 2.;\n\n    vec2 f1_traj = .25 * vec2(1.3 * sin(t), .2 + 1.3 * cos(.6 * t + 4.));\n    vec2 f2_traj = .2 * vec2(1.2 * sin(-t), 1.3 * sin(1.6 * t));\n    vec2 f3_traj = .25 * vec2(1.7 * cos(-.6 * t), cos(-1.6 * t));\n    vec2 f4_traj = .3 * vec2(1.4 * cos(.8 * t), 1.2 * sin(-.6 * t - 3.));\n\n    shape = .5 * pow(1. - clamp(0., 1., length(shape_uv + f1_traj)), 5.);\n    shape += .5 * pow(1. - clamp(0., 1., length(shape_uv + f2_traj)), 5.);\n    shape += .5 * pow(1. - clamp(0., 1., length(shape_uv + f3_traj)), 5.);\n    shape += .5 * pow(1. - clamp(0., 1., length(shape_uv + f4_traj)), 5.);\n\n    shape = smoothstep(.0, .9, shape);\n    float edge = smoothstep(.25, .3, shape);\n    shape = mix(.0, shape, edge);\n\n  } else {\n    // Sphere\n\n    shape_uv *= 2.;\n    float d = length(shape_uv);\n    float z = sqrt(1.0 - clamp(pow(d, 2.0), 0.0, 1.0));\n    vec3 pos = vec3(shape_uv, z);\n    vec3 lightPos = normalize(vec3(cos(3. * t), 0.8, sin(2.5 * t)));\n    float lighting = dot(lightPos, pos);\n    float edge = smoothstep(1., .97, d);\n    shape = mix(.1, .5 + .5 * lighting, edge);\n  }\n\n  float snoise05 = snoise(grain_uv * .5);\n  float grainDist = snoise(grain_uv * .2) * snoise05 - fbm_4(.002 * grain_uv + 10.) - fbm_4(.003 * grain_uv);\n  float noise = clamp(.6 * snoise05 - fbm_4(.4 * grain_uv) - fbm_4(.001 * grain_uv), 0., 1.);\n\n  shape += u_intensity * 2. / u_colorsCount * (grainDist + .5);\n  shape += u_noise * 10. / u_colorsCount * noise;\n\n  float edge_w = fwidth(shape);\n\n  float mixer = shape * (u_colorsCount + 1.) / u_colorsCount;\n  vec4 gradient = u_colors[0];\n  gradient.rgb *= gradient.a;\n\n  for (int i = 1; i < ${grainGradientMeta.maxColorCount}; i++) {\n      if (i > int(u_colorsCount) - 1) break;\n\n      vec2 borders = vec2(float(i + 1) - u_softness - edge_w, float(i + 1) + u_softness + edge_w) / u_colorsCount;\n      float localT = smoothstep(borders[0], borders[1], mixer);\n      vec4 c = u_colors[i];\n      c.rgb *= c.a;\n      gradient = mix(gradient, c, localT);\n  }\n\n  vec2 borders = vec2(2. / (u_colorsCount - 1.));\n  borders = vec2(borders[0] - u_softness - edge_w, borders[1] + u_softness + edge_w) / u_colorsCount;\n  borders[0] = max(0., borders[0]);\n  float gradientShape = smoothstep(borders[0], borders[1], mixer);\n\n  vec3 color = gradient.rgb * gradientShape;\n  float opacity = gradient.a * gradientShape;\n\n  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;\n  color = color + bgColor * (1.0 - opacity);\n  opacity = opacity + u_colorBack.a * (1.0 - opacity);\n\n  ${colorBandingFix}\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface GrainGradientUniforms extends ShaderSizingUniforms {\n  u_colorBack: [number, number, number, number];\n  u_colors: vec4[];\n  u_colorsCount: number;\n  u_softness: number;\n  u_intensity: number;\n  u_noise: number;\n  u_shape: (typeof GrainGradientShapes)[GrainGradientShape];\n}\n\nexport interface GrainGradientParams extends ShaderSizingParams, ShaderMotionParams {\n  colorBack?: string;\n  colors?: string[];\n  softness?: number;\n  intensity?: number;\n  noise?: number;\n  shape?: GrainGradientShape;\n}\n\nexport const GrainGradientShapes = {\n  wave: 1,\n  dots: 2,\n  truchet: 3,\n  corners: 4,\n  ripple: 5,\n  blob: 6,\n  sphere: 7,\n};\n\nexport type GrainGradientShape = keyof typeof GrainGradientShapes;\n"],
+  "mappings": ";;;;;AAEA,SAAS,kCAAsF;AAC/F,SAAS,qBAAqB,WAAW,eAAe,uBAAuB;AAExE,MAAM,oBAAoB;AAAA,EAC/B,eAAe;AACjB;AAKO,MAAM,8BAAsC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAQ3B,kBAAkB,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOrD,0BAA0B;AAAA;AAAA;AAAA;AAAA,EAI1B,SAAS;AAAA,EACT,mBAAmB;AAAA,EACnB,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;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,wBA0KS,kBAAkB,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAsBnD,eAAe;AAAA;AAAA;AAAA;AAAA;AAyBZ,MAAM,sBAAsB;AAAA,EACjC,MAAM;AAAA,EACN,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,QAAQ;AACV;",
   "names": []
 }

package/dist/shaders/liquid-metal.d.ts

@@ -1,19 +1,34 @@
-import type { ShaderMotionParams } from '../shader-mount';
-import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing';
+import type { ShaderMotionParams } from '../shader-mount.js';
+import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';
 /**
  */
 export declare const liquidMetalFragmentShader: string;
 export interface LiquidMetalUniforms extends ShaderSizingUniforms {
-    u_patternBlur: number;
-    u_patternScale: number;
-    u_dispersion: number;
-    u_liquid: number;
-    u_shape: number;
+    u_colorBack: [number, number, number, number];
+    u_colorTint: [number, number, number, number];
+    u_softness: number;
+    u_repetition: number;
+    u_shiftRed: number;
+    u_shiftBlue: number;
+    u_distortion: number;
+    u_contour: number;
+    u_shape: (typeof LiquidMetalShapes)[LiquidMetalShape];
 }
 export interface LiquidMetalParams extends ShaderSizingParams, ShaderMotionParams {
-    patternBlur?: number;
-    patternScale?: number;
-    dispersion?: number;
-    liquid?: number;
-    shape?: number;
+    colorBack?: string;
+    colorTint?: string;
+    softness?: number;
+    repetition?: number;
+    shiftRed?: number;
+    shiftBlue?: number;
+    distortion?: number;
+    contour?: number;
+    shape?: LiquidMetalShape;
 }
+export declare const LiquidMetalShapes: {
+    readonly none: 0;
+    readonly circle: 1;
+    readonly daisy: 2;
+    readonly metaballs: 3;
+};
+export type LiquidMetalShape = keyof typeof LiquidMetalShapes;

package/dist/shaders/liquid-metal.js

@@ -3,17 +3,22 @@
  *       https://github.com/paper-design/shaders       *
  * * * * * * * * * * * * * * * * * * * * * * * * * * * */
 
-import { sizingVariablesDeclaration } from "../shader-sizing";
-import { declarePI, declareRotate, declareSimplexNoise, colorBandingFix } from "../shader-utils";
+import { sizingVariablesDeclaration } from "../shader-sizing.js";
+import { declarePI, declareRotate, declareSimplexNoise, colorBandingFix } from "../shader-utils.js";
 const liquidMetalFragmentShader = `#version 300 es
-precision highp float;
+precision mediump float;
 
 uniform float u_time;
 
-uniform float u_patternBlur;
-uniform float u_patternScale;
-uniform float u_dispersion;
-uniform float u_liquid;
+uniform vec4 u_colorBack;
+uniform vec4 u_colorTint;
+
+uniform float u_softness;
+uniform float u_repetition;
+uniform float u_shiftRed;
+uniform float u_shiftBlue;
+uniform float u_distortion;
+uniform float u_contour;
 uniform float u_shape;
 
 ${sizingVariablesDeclaration}
@@ -24,22 +29,13 @@ ${declarePI}
 ${declareRotate}
 ${declareSimplexNoise}
 
-float get_color_channel(float c1, float c2, float stripe_p, vec3 w, float extra_blur, float bump) {
-
-  float ch = c2;
-  float border = 0.;
-  float blur = u_patternBlur + extra_blur;
-  
-  if (u_shape < 1.) {
-    blur += .1 * smoothstep(-.4, -.6, v_responsiveUV.y);
-  }
+float getColorChanges(float c1, float c2, float stripe_p, vec3 w, float blur, float bump, float tint) {
 
-  ch = mix(ch, c1, smoothstep(.0, blur, stripe_p));
+  float ch = mix(c2, c1, smoothstep(.0, blur, stripe_p));
 
-  border = w[0];
+  float border = w[0];
   ch = mix(ch, c2, smoothstep(border - blur, border + blur, stripe_p));
 
-  bump = smoothstep(.2, .8, bump);
   border = w[0] + .4 * (1. - bump) * w[1];
   ch = mix(ch, c1, smoothstep(border - blur, border + blur, stripe_p));
 
@@ -53,22 +49,26 @@ float get_color_channel(float c1, float c2, float stripe_p, vec3 w, float extra_
   float gradient = mix(c1, c2, smoothstep(0., 1., gradient_t));
   ch = mix(ch, gradient, smoothstep(border - blur, border + blur, stripe_p));
 
+  // ch = 1. - min(1., (1. - ch) / max(tint, .0001));
+  ch = mix(ch, 1. - min(1., (1. - ch) / max(tint, 0.0001)), u_colorTint.a);
   return ch;
 }
 
 void main() {
-  
+
   float t = .1 * u_time;
 
   vec2 uv = v_objectUV;
   uv += .5;
   uv.y = 1. - uv.y;
 
-  float cycleWidth = .5 * u_patternScale; 
-  
+  float cycleWidth = .5 * u_repetition;
+
   float mask = 1.;
+  float contOffset = 1.;
+
   if (u_shape < 1.) {
-  
+
     vec2 borderUV = v_responsiveUV + .5;
     float ratio = v_responsiveBoxGivenSize.x / v_responsiveBoxGivenSize.y;
     vec2 edge = min(borderUV, 1. - borderUV);
@@ -78,7 +78,7 @@ void main() {
     maskX = pow(maskX, .25);
     maskY = pow(maskY, .25);
     mask = clamp(1. - maskX * maskY, 0., 1.);
-    
+
     uv = v_responsiveUV;
     if (ratio > 1.) {
       uv.y /= ratio;
@@ -87,25 +87,25 @@ void main() {
     }
     uv += .5;
     uv.y = 1. - uv.y;
-    
+
     cycleWidth *= 2.;
+    contOffset = 1.5;
 
-  } else if (u_shape < 2.) {  
+  } else if (u_shape < 2.) {
     vec2 shapeUV = uv - .5;
     shapeUV *= .67;
-    mask = pow(clamp(3. * length(shapeUV), 0., 1.), 8.);
-    
-    uv *= 1.3;
+    mask = pow(clamp(3. * length(shapeUV), 0., 1.), 18.);
   } else if (u_shape < 3.) {
     vec2 shapeUV = uv - .5;
     shapeUV *= 1.68;
-    
+
     float r = length(shapeUV) * 2.;
     float a = atan(shapeUV.y, shapeUV.x) + .2;
     r *= (1. + .05 * sin(3. * a + 2. * t));
     float f = abs(cos(a * 3.));
     mask = smoothstep(f, f + .7, r);
-    
+    mask = pow(mask, 2.);
+
     uv *= .8;
     cycleWidth *= 1.6;
 
@@ -123,26 +123,25 @@ void main() {
       float d = length(shapeUV + traj);
       mask += pow(1.0 - clamp(d, 0.0, 1.0), 4.0);
     }
-    mask = 1. - smoothstep(.85, 1., mask);
-    
-    uv *= 1.3;
-    uv.y += .2;
+    mask = 1. - smoothstep(.65, .9, mask);
+    mask = pow(mask, 4.);
   }
 
-  float contour = smoothstep(0., 1., mask) * smoothstep(1., 0., mask);
+  float opacity = 1. - smoothstep(.8, .82, mask);
 
+  float ridge = .15 * (smoothstep(.0, .15, uv.y) * smoothstep(.4, .15, uv.y));
+  ridge += .05 * (smoothstep(.1, .2, 1. - uv.y) * smoothstep(.4, .2, 1. - uv.y));
+  mask += ridge;
 
-  float diagBLtoTR = uv.x - uv.y;    
+  float diagBLtoTR = uv.x - uv.y;
   float diagTLtoBR = uv.x + uv.y;
 
   vec3 color = vec3(0.);
-  float opacity = 1.;
-
   vec3 color1 = vec3(.98, 0.98, 1.);
   vec3 color2 = vec3(.1, .1, .1 + .1 * smoothstep(.7, 1.3, diagTLtoBR));
 
   vec2 grad_uv = uv - .5;
-  
+
   float dist = length(grad_uv + vec2(0., .2 * diagBLtoTR));
   grad_uv = rotate(grad_uv, (.25 - .2 * diagBLtoTR) * PI);
   float direction = grad_uv.x;
@@ -159,66 +158,64 @@ void main() {
   float thin_strip_1_width = cycleWidth * thin_strip_1_ratio;
   float thin_strip_2_width = cycleWidth * thin_strip_2_ratio;
 
-  opacity = 1. - smoothstep(.9, .92, mask);
-
   float noise = snoise(uv - t);
 
-  mask += (1. - mask) * u_liquid * noise;
-
-  float colorDispersion = 0.;
-  colorDispersion += (1. - bump);
-  colorDispersion = clamp(colorDispersion, 0., 1.);
+  mask += (1. - mask) * u_distortion * noise;
 
   direction += diagBLtoTR;
 
-  direction -= 2. * noise * contour;
+  float contour = u_contour * smoothstep(0., contOffset, mask) * smoothstep(contOffset, 0., mask);
+  direction -= 14. * noise * contour;
 
   bump *= clamp(pow(uv.y, .1), .3, 1.);
   direction *= (.1 + (1.1 - mask) * bump);
-  direction *= smoothstep(1., .7, mask);
+  direction *= smoothstep(1., .2, mask);
 
-  float ridge = .2 * (smoothstep(.0, .15, uv.y) * smoothstep(.4, .15, uv.y));
-  ridge += .03 * (smoothstep(.1, .2, 1. - uv.y) * smoothstep(.4, .2, 1. - uv.y));
-  direction += ridge;
 
   direction *= (.5 + .5 * pow(uv.y, 2.));
-
   direction *= cycleWidth;
-
   direction -= t;
 
-  float dispersionRed = colorDispersion;
-  dispersionRed += .03 * bump * noise;
-  float dispersionBlue = 1.3 * colorDispersion;
 
-  dispersionRed += 5. * (smoothstep(-.1, .2, uv.y) * smoothstep(.5, .1, uv.y)) * (smoothstep(.4, .6, bump) * smoothstep(1., .4, bump));
-  dispersionRed -= diagBLtoTR;
+  float colorDispersion = (1. - bump);
+  float dispersionRed = colorDispersion;
+  dispersionRed += bump * noise;
+  float dispersionBlue = colorDispersion;
 
-  dispersionBlue += (smoothstep(0., .4, uv.y) * smoothstep(.8, .1, uv.y)) * (smoothstep(.4, .6, bump) * smoothstep(.8, .4, bump));
-  dispersionBlue -= .2 * mask;
+  dispersionRed *= (u_shiftRed / 20.);
+  dispersionBlue *= (u_shiftBlue / 20.);
 
-  dispersionRed *= u_dispersion;
-  dispersionBlue *= u_dispersion;
+  float blur = u_softness / 15. + .3 * contour;
 
   vec3 w = vec3(thin_strip_1_width, thin_strip_2_width, wide_strip_ratio);
   w[1] -= .02 * smoothstep(.0, 1., mask + bump);
-  float extraBlur = bump;
   float stripe_r = mod(direction + dispersionRed, 1.);
-  float r = get_color_channel(color1.r, color2.r, stripe_r, w, 0.02 + .03 * u_dispersion * bump, extraBlur);
+  float r = getColorChanges(color1.r, color2.r, stripe_r, w, blur, bump, u_colorTint.r);
   float stripe_g = mod(direction, 1.);
-  float g = get_color_channel(color1.g, color2.g, stripe_g, w, 0.01 / (1. - 0. * diagBLtoTR), extraBlur);
+  float g = getColorChanges(color1.g, color2.g, stripe_g, w, blur, bump, u_colorTint.g);
   float stripe_b = mod(direction - dispersionBlue, 1.);
-  float b = get_color_channel(color1.b, color2.b, stripe_b, w, .01, extraBlur);
+  float b = getColorChanges(color1.b, color2.b, stripe_b, w, blur, bump, u_colorTint.b);
 
   color = vec3(r, g, b);
   color *= opacity;
 
+  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;
+  color = color + bgColor * (1. - opacity);
+  opacity = opacity + u_colorBack.a * (1. - opacity);
+
   ${colorBandingFix}
 
   fragColor = vec4(color, opacity);
 }
 `;
+const LiquidMetalShapes = {
+  none: 0,
+  circle: 1,
+  daisy: 2,
+  metaballs: 3
+};
 export {
+  LiquidMetalShapes,
   liquidMetalFragmentShader
 };
 //# sourceMappingURL=liquid-metal.js.map

package/dist/shaders/liquid-metal.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/shaders/liquid-metal.ts"],
-  "sourcesContent": ["import type { ShaderMotionParams } from '../shader-mount';\nimport { sizingVariablesDeclaration, type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing';\nimport { declarePI, declareRotate, declareSimplexNoise, colorBandingFix } from '../shader-utils';\n\n/**\n */\n\nexport const liquidMetalFragmentShader: string = `#version 300 es\nprecision highp float;\n\nuniform float u_time;\n\nuniform float u_patternBlur;\nuniform float u_patternScale;\nuniform float u_dispersion;\nuniform float u_liquid;\nuniform float u_shape;\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${declarePI}\n${declareRotate}\n${declareSimplexNoise}\n\nfloat get_color_channel(float c1, float c2, float stripe_p, vec3 w, float extra_blur, float bump) {\n\n  float ch = c2;\n  float border = 0.;\n  float blur = u_patternBlur + extra_blur;\n  \n  if (u_shape < 1.) {\n    blur += .1 * smoothstep(-.4, -.6, v_responsiveUV.y);\n  }\n\n  ch = mix(ch, c1, smoothstep(.0, blur, stripe_p));\n\n  border = w[0];\n  ch = mix(ch, c2, smoothstep(border - blur, border + blur, stripe_p));\n\n  bump = smoothstep(.2, .8, bump);\n  border = w[0] + .4 * (1. - bump) * w[1];\n  ch = mix(ch, c1, smoothstep(border - blur, border + blur, stripe_p));\n\n  border = w[0] + .5 * (1. - bump) * w[1];\n  ch = mix(ch, c2, smoothstep(border - blur, border + blur, stripe_p));\n\n  border = w[0] + w[1];\n  ch = mix(ch, c1, smoothstep(border - blur, border + blur, stripe_p));\n\n  float gradient_t = (stripe_p - w[0] - w[1]) / w[2];\n  float gradient = mix(c1, c2, smoothstep(0., 1., gradient_t));\n  ch = mix(ch, gradient, smoothstep(border - blur, border + blur, stripe_p));\n\n  return ch;\n}\n\nvoid main() {\n  \n  float t = .1 * u_time;\n\n  vec2 uv = v_objectUV;\n  uv += .5;\n  uv.y = 1. - uv.y;\n\n  float cycleWidth = .5 * u_patternScale; \n  \n  float mask = 1.;\n  if (u_shape < 1.) {\n  \n    vec2 borderUV = v_responsiveUV + .5;\n    float ratio = v_responsiveBoxGivenSize.x / v_responsiveBoxGivenSize.y;\n    vec2 edge = min(borderUV, 1. - borderUV);\n    vec2 pixel_thickness = 250. / v_responsiveBoxGivenSize;\n    float maskX = smoothstep(0.0, pixel_thickness.x, edge.x);\n    float maskY = smoothstep(0.0, pixel_thickness.y, edge.y);\n    maskX = pow(maskX, .25);\n    maskY = pow(maskY, .25);\n    mask = clamp(1. - maskX * maskY, 0., 1.);\n    \n    uv = v_responsiveUV;\n    if (ratio > 1.) {\n      uv.y /= ratio;\n    } else {\n      uv.x *= ratio;\n    }\n    uv += .5;\n    uv.y = 1. - uv.y;\n    \n    cycleWidth *= 2.;\n\n  } else if (u_shape < 2.) {  \n    vec2 shapeUV = uv - .5;\n    shapeUV *= .67;\n    mask = pow(clamp(3. * length(shapeUV), 0., 1.), 8.);\n    \n    uv *= 1.3;\n  } else if (u_shape < 3.) {\n    vec2 shapeUV = uv - .5;\n    shapeUV *= 1.68;\n    \n    float r = length(shapeUV) * 2.;\n    float a = atan(shapeUV.y, shapeUV.x) + .2;\n    r *= (1. + .05 * sin(3. * a + 2. * t));\n    float f = abs(cos(a * 3.));\n    mask = smoothstep(f, f + .7, r);\n    \n    uv *= .8;\n    cycleWidth *= 1.6;\n\n  } else if (u_shape < 4.) {\n    vec2 shapeUV = uv - .5;\n    shapeUV *= 1.3;\n    mask = 0.;\n    for (int i = 0; i < 5; i++) {\n      float fi = float(i);\n      float speed = 4.5 + 2. * sin(fi * 12.345);\n      float angle = -fi * 1.5;\n      vec2 dir1 = vec2(cos(angle), sin(angle));\n      vec2 dir2 = vec2(cos(angle + 1.57), sin(angle + 1.));\n      vec2 traj = .4 * (dir1 * sin(t * speed + fi * 1.23) + dir2 * cos(t * (speed * 0.7) + fi * 2.17));\n      float d = length(shapeUV + traj);\n      mask += pow(1.0 - clamp(d, 0.0, 1.0), 4.0);\n    }\n    mask = 1. - smoothstep(.85, 1., mask);\n    \n    uv *= 1.3;\n    uv.y += .2;\n  }\n\n  float contour = smoothstep(0., 1., mask) * smoothstep(1., 0., mask);\n\n\n  float diagBLtoTR = uv.x - uv.y;    \n  float diagTLtoBR = uv.x + uv.y;\n\n  vec3 color = vec3(0.);\n  float opacity = 1.;\n\n  vec3 color1 = vec3(.98, 0.98, 1.);\n  vec3 color2 = vec3(.1, .1, .1 + .1 * smoothstep(.7, 1.3, diagTLtoBR));\n\n  vec2 grad_uv = uv - .5;\n  \n  float dist = length(grad_uv + vec2(0., .2 * diagBLtoTR));\n  grad_uv = rotate(grad_uv, (.25 - .2 * diagBLtoTR) * PI);\n  float direction = grad_uv.x;\n\n  float bump = pow(1.8 * dist, 1.2);\n  bump = 1. - bump;\n  bump *= pow(uv.y, .3);\n\n\n  float thin_strip_1_ratio = .12 / cycleWidth * (1. - .4 * bump);\n  float thin_strip_2_ratio = .07 / cycleWidth * (1. + .4 * bump);\n  float wide_strip_ratio = (1. - thin_strip_1_ratio - thin_strip_2_ratio);\n\n  float thin_strip_1_width = cycleWidth * thin_strip_1_ratio;\n  float thin_strip_2_width = cycleWidth * thin_strip_2_ratio;\n\n  opacity = 1. - smoothstep(.9, .92, mask);\n\n  float noise = snoise(uv - t);\n\n  mask += (1. - mask) * u_liquid * noise;\n\n  float colorDispersion = 0.;\n  colorDispersion += (1. - bump);\n  colorDispersion = clamp(colorDispersion, 0., 1.);\n\n  direction += diagBLtoTR;\n\n  direction -= 2. * noise * contour;\n\n  bump *= clamp(pow(uv.y, .1), .3, 1.);\n  direction *= (.1 + (1.1 - mask) * bump);\n  direction *= smoothstep(1., .7, mask);\n\n  float ridge = .2 * (smoothstep(.0, .15, uv.y) * smoothstep(.4, .15, uv.y));\n  ridge += .03 * (smoothstep(.1, .2, 1. - uv.y) * smoothstep(.4, .2, 1. - uv.y));\n  direction += ridge;\n\n  direction *= (.5 + .5 * pow(uv.y, 2.));\n\n  direction *= cycleWidth;\n\n  direction -= t;\n\n  float dispersionRed = colorDispersion;\n  dispersionRed += .03 * bump * noise;\n  float dispersionBlue = 1.3 * colorDispersion;\n\n  dispersionRed += 5. * (smoothstep(-.1, .2, uv.y) * smoothstep(.5, .1, uv.y)) * (smoothstep(.4, .6, bump) * smoothstep(1., .4, bump));\n  dispersionRed -= diagBLtoTR;\n\n  dispersionBlue += (smoothstep(0., .4, uv.y) * smoothstep(.8, .1, uv.y)) * (smoothstep(.4, .6, bump) * smoothstep(.8, .4, bump));\n  dispersionBlue -= .2 * mask;\n\n  dispersionRed *= u_dispersion;\n  dispersionBlue *= u_dispersion;\n\n  vec3 w = vec3(thin_strip_1_width, thin_strip_2_width, wide_strip_ratio);\n  w[1] -= .02 * smoothstep(.0, 1., mask + bump);\n  float extraBlur = bump;\n  float stripe_r = mod(direction + dispersionRed, 1.);\n  float r = get_color_channel(color1.r, color2.r, stripe_r, w, 0.02 + .03 * u_dispersion * bump, extraBlur);\n  float stripe_g = mod(direction, 1.);\n  float g = get_color_channel(color1.g, color2.g, stripe_g, w, 0.01 / (1. - 0. * diagBLtoTR), extraBlur);\n  float stripe_b = mod(direction - dispersionBlue, 1.);\n  float b = get_color_channel(color1.b, color2.b, stripe_b, w, .01, extraBlur);\n\n  color = vec3(r, g, b);\n  color *= opacity;\n\n  ${colorBandingFix}\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface LiquidMetalUniforms extends ShaderSizingUniforms {\n  u_patternBlur: number;\n  u_patternScale: number;\n  u_dispersion: number;\n  u_liquid: number;\n  u_shape: number;\n}\n\nexport interface LiquidMetalParams extends ShaderSizingParams, ShaderMotionParams {\n  patternBlur?: number;\n  patternScale?: number;\n  dispersion?: number;\n  liquid?: number;\n  shape?: number;\n}\n"],
-  "mappings": ";;;;;AACA,SAAS,kCAAsF;AAC/F,SAAS,WAAW,eAAe,qBAAqB,uBAAuB;AAKxE,MAAM,4BAAoC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAW/C,0BAA0B;AAAA;AAAA;AAAA;AAAA,EAI1B,SAAS;AAAA,EACT,aAAa;AAAA,EACb,mBAAmB;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;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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IA+LjB,eAAe;AAAA;AAAA;AAAA;AAAA;",
+  "sourcesContent": ["import type { ShaderMotionParams } from '../shader-mount.js';\nimport { sizingVariablesDeclaration, type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';\nimport { declarePI, declareRotate, declareSimplexNoise, colorBandingFix } from '../shader-utils.js';\n\n/**\n */\n\nexport const liquidMetalFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform float u_time;\n\nuniform vec4 u_colorBack;\nuniform vec4 u_colorTint;\n\nuniform float u_softness;\nuniform float u_repetition;\nuniform float u_shiftRed;\nuniform float u_shiftBlue;\nuniform float u_distortion;\nuniform float u_contour;\nuniform float u_shape;\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${declarePI}\n${declareRotate}\n${declareSimplexNoise}\n\nfloat getColorChanges(float c1, float c2, float stripe_p, vec3 w, float blur, float bump, float tint) {\n\n  float ch = mix(c2, c1, smoothstep(.0, blur, stripe_p));\n\n  float border = w[0];\n  ch = mix(ch, c2, smoothstep(border - blur, border + blur, stripe_p));\n\n  border = w[0] + .4 * (1. - bump) * w[1];\n  ch = mix(ch, c1, smoothstep(border - blur, border + blur, stripe_p));\n\n  border = w[0] + .5 * (1. - bump) * w[1];\n  ch = mix(ch, c2, smoothstep(border - blur, border + blur, stripe_p));\n\n  border = w[0] + w[1];\n  ch = mix(ch, c1, smoothstep(border - blur, border + blur, stripe_p));\n\n  float gradient_t = (stripe_p - w[0] - w[1]) / w[2];\n  float gradient = mix(c1, c2, smoothstep(0., 1., gradient_t));\n  ch = mix(ch, gradient, smoothstep(border - blur, border + blur, stripe_p));\n\n  // ch = 1. - min(1., (1. - ch) / max(tint, .0001));\n  ch = mix(ch, 1. - min(1., (1. - ch) / max(tint, 0.0001)), u_colorTint.a);\n  return ch;\n}\n\nvoid main() {\n\n  float t = .1 * u_time;\n\n  vec2 uv = v_objectUV;\n  uv += .5;\n  uv.y = 1. - uv.y;\n\n  float cycleWidth = .5 * u_repetition;\n\n  float mask = 1.;\n  float contOffset = 1.;\n\n  if (u_shape < 1.) {\n\n    vec2 borderUV = v_responsiveUV + .5;\n    float ratio = v_responsiveBoxGivenSize.x / v_responsiveBoxGivenSize.y;\n    vec2 edge = min(borderUV, 1. - borderUV);\n    vec2 pixel_thickness = 250. / v_responsiveBoxGivenSize;\n    float maskX = smoothstep(0.0, pixel_thickness.x, edge.x);\n    float maskY = smoothstep(0.0, pixel_thickness.y, edge.y);\n    maskX = pow(maskX, .25);\n    maskY = pow(maskY, .25);\n    mask = clamp(1. - maskX * maskY, 0., 1.);\n\n    uv = v_responsiveUV;\n    if (ratio > 1.) {\n      uv.y /= ratio;\n    } else {\n      uv.x *= ratio;\n    }\n    uv += .5;\n    uv.y = 1. - uv.y;\n\n    cycleWidth *= 2.;\n    contOffset = 1.5;\n\n  } else if (u_shape < 2.) {\n    vec2 shapeUV = uv - .5;\n    shapeUV *= .67;\n    mask = pow(clamp(3. * length(shapeUV), 0., 1.), 18.);\n  } else if (u_shape < 3.) {\n    vec2 shapeUV = uv - .5;\n    shapeUV *= 1.68;\n\n    float r = length(shapeUV) * 2.;\n    float a = atan(shapeUV.y, shapeUV.x) + .2;\n    r *= (1. + .05 * sin(3. * a + 2. * t));\n    float f = abs(cos(a * 3.));\n    mask = smoothstep(f, f + .7, r);\n    mask = pow(mask, 2.);\n\n    uv *= .8;\n    cycleWidth *= 1.6;\n\n  } else if (u_shape < 4.) {\n    vec2 shapeUV = uv - .5;\n    shapeUV *= 1.3;\n    mask = 0.;\n    for (int i = 0; i < 5; i++) {\n      float fi = float(i);\n      float speed = 4.5 + 2. * sin(fi * 12.345);\n      float angle = -fi * 1.5;\n      vec2 dir1 = vec2(cos(angle), sin(angle));\n      vec2 dir2 = vec2(cos(angle + 1.57), sin(angle + 1.));\n      vec2 traj = .4 * (dir1 * sin(t * speed + fi * 1.23) + dir2 * cos(t * (speed * 0.7) + fi * 2.17));\n      float d = length(shapeUV + traj);\n      mask += pow(1.0 - clamp(d, 0.0, 1.0), 4.0);\n    }\n    mask = 1. - smoothstep(.65, .9, mask);\n    mask = pow(mask, 4.);\n  }\n\n  float opacity = 1. - smoothstep(.8, .82, mask);\n\n  float ridge = .15 * (smoothstep(.0, .15, uv.y) * smoothstep(.4, .15, uv.y));\n  ridge += .05 * (smoothstep(.1, .2, 1. - uv.y) * smoothstep(.4, .2, 1. - uv.y));\n  mask += ridge;\n\n  float diagBLtoTR = uv.x - uv.y;\n  float diagTLtoBR = uv.x + uv.y;\n\n  vec3 color = vec3(0.);\n  vec3 color1 = vec3(.98, 0.98, 1.);\n  vec3 color2 = vec3(.1, .1, .1 + .1 * smoothstep(.7, 1.3, diagTLtoBR));\n\n  vec2 grad_uv = uv - .5;\n\n  float dist = length(grad_uv + vec2(0., .2 * diagBLtoTR));\n  grad_uv = rotate(grad_uv, (.25 - .2 * diagBLtoTR) * PI);\n  float direction = grad_uv.x;\n\n  float bump = pow(1.8 * dist, 1.2);\n  bump = 1. - bump;\n  bump *= pow(uv.y, .3);\n\n\n  float thin_strip_1_ratio = .12 / cycleWidth * (1. - .4 * bump);\n  float thin_strip_2_ratio = .07 / cycleWidth * (1. + .4 * bump);\n  float wide_strip_ratio = (1. - thin_strip_1_ratio - thin_strip_2_ratio);\n\n  float thin_strip_1_width = cycleWidth * thin_strip_1_ratio;\n  float thin_strip_2_width = cycleWidth * thin_strip_2_ratio;\n\n  float noise = snoise(uv - t);\n\n  mask += (1. - mask) * u_distortion * noise;\n\n  direction += diagBLtoTR;\n\n  float contour = u_contour * smoothstep(0., contOffset, mask) * smoothstep(contOffset, 0., mask);\n  direction -= 14. * noise * contour;\n\n  bump *= clamp(pow(uv.y, .1), .3, 1.);\n  direction *= (.1 + (1.1 - mask) * bump);\n  direction *= smoothstep(1., .2, mask);\n\n\n  direction *= (.5 + .5 * pow(uv.y, 2.));\n  direction *= cycleWidth;\n  direction -= t;\n\n\n  float colorDispersion = (1. - bump);\n  float dispersionRed = colorDispersion;\n  dispersionRed += bump * noise;\n  float dispersionBlue = colorDispersion;\n\n  dispersionRed *= (u_shiftRed / 20.);\n  dispersionBlue *= (u_shiftBlue / 20.);\n\n  float blur = u_softness / 15. + .3 * contour;\n\n  vec3 w = vec3(thin_strip_1_width, thin_strip_2_width, wide_strip_ratio);\n  w[1] -= .02 * smoothstep(.0, 1., mask + bump);\n  float stripe_r = mod(direction + dispersionRed, 1.);\n  float r = getColorChanges(color1.r, color2.r, stripe_r, w, blur, bump, u_colorTint.r);\n  float stripe_g = mod(direction, 1.);\n  float g = getColorChanges(color1.g, color2.g, stripe_g, w, blur, bump, u_colorTint.g);\n  float stripe_b = mod(direction - dispersionBlue, 1.);\n  float b = getColorChanges(color1.b, color2.b, stripe_b, w, blur, bump, u_colorTint.b);\n\n  color = vec3(r, g, b);\n  color *= opacity;\n\n  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;\n  color = color + bgColor * (1. - opacity);\n  opacity = opacity + u_colorBack.a * (1. - opacity);\n\n  ${colorBandingFix}\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface LiquidMetalUniforms extends ShaderSizingUniforms {\n  u_colorBack: [number, number, number, number];\n  u_colorTint: [number, number, number, number];\n  u_softness: number;\n  u_repetition: number;\n  u_shiftRed: number;\n  u_shiftBlue: number;\n  u_distortion: number;\n  u_contour: number;\n  u_shape: (typeof LiquidMetalShapes)[LiquidMetalShape];\n}\n\nexport interface LiquidMetalParams extends ShaderSizingParams, ShaderMotionParams {\n  colorBack?: string;\n  colorTint?: string;\n  softness?: number;\n  repetition?: number;\n  shiftRed?: number;\n  shiftBlue?: number;\n  distortion?: number;\n  contour?: number;\n  shape?: LiquidMetalShape;\n}\n\nexport const LiquidMetalShapes = {\n  none: 0,\n  circle: 1,\n  daisy: 2,\n  metaballs: 3,\n} as const;\n\nexport type LiquidMetalShape = keyof typeof LiquidMetalShapes;\n"],
+  "mappings": ";;;;;AACA,SAAS,kCAAsF;AAC/F,SAAS,WAAW,eAAe,qBAAqB,uBAAuB;AAKxE,MAAM,4BAAoC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAgB/C,0BAA0B;AAAA;AAAA;AAAA;AAAA,EAI1B,SAAS;AAAA,EACT,aAAa;AAAA,EACb,mBAAmB;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;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;AAAA;AAAA;AAAA;AAAA,IAgLjB,eAAe;AAAA;AAAA;AAAA;AAAA;AA8BZ,MAAM,oBAAoB;AAAA,EAC/B,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,WAAW;AACb;",
   "names": []
 }

package/dist/shaders/mesh-gradient.d.ts

@@ -1,6 +1,6 @@
-import type { vec4 } from '../types';
-import type { ShaderMotionParams } from '../shader-mount';
-import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing';
+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 meshGradientMeta: {
     readonly maxColorCount: 10;
 };

package/dist/shaders/mesh-gradient.js

@@ -3,13 +3,13 @@
  *       https://github.com/paper-design/shaders       *
  * * * * * * * * * * * * * * * * * * * * * * * * * * * */
 
-import { sizingVariablesDeclaration } from "../shader-sizing";
-import { declarePI, declareRotate, colorBandingFix } from "../shader-utils";
+import { sizingVariablesDeclaration } from "../shader-sizing.js";
+import { declarePI, declareRotate, colorBandingFix } from "../shader-utils.js";
 const meshGradientMeta = {
   maxColorCount: 10
 };
 const meshGradientFragmentShader = `#version 300 es
-precision highp float;
+precision mediump float;
 
 uniform float u_time;
 
@@ -60,14 +60,14 @@ void main() {
   vec3 color = vec3(0.);
   float opacity = 0.;
   float totalWeight = 0.;
-  
+
   for (int i = 0; i < ${meshGradientMeta.maxColorCount}; i++) {
     if (i >= int(u_colorsCount)) break;
-    
+
     vec2 pos = getPosition(i, t);
     vec3 colorFraction = u_colors[i].rgb * u_colors[i].a;
     float opacityFraction = u_colors[i].a;
-      
+
     float dist = 0.;
     if (mod(float(i), 2.) > 1.) {
       dist = length(shape_uv - pos);
@@ -84,7 +84,7 @@ void main() {
 
   color /= totalWeight;
   opacity /= totalWeight;
-  
+
   ${colorBandingFix}
 
   fragColor = vec4(color, opacity);