@paper-design/shaders 0.0.19 → 0.0.21

package/README.md

@@ -24,6 +24,4 @@ const meshGradient = new ShaderMount(
   meshGradientFragmentShader,
   shaderParams
 );
-
-meshGradient.setUniforms(shaderParams);
 ```

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 /** The core Shader Mounting class. Pass it a canvas element and a fragment shader to get started. */
-export { ShaderMount } from './shader-mount';
+export { ShaderMount, type ShaderMountUniforms } from './shader-mount';
 export { grainCloudsFragmentShader, type GrainCloudsUniforms } from './shaders/grain-clouds';
 /** A shader that renders a mesh gradient with a rotating noise pattern and several layers of fractal noise */
 export { meshGradientFragmentShader, type MeshGradientUniforms } from './shaders/mesh-gradient';
@@ -7,10 +7,10 @@ export { meshGradientFragmentShader, type MeshGradientUniforms } from './shaders
 export { smokeRingFragmentShader, type SmokeRingUniforms } from './shaders/smoke-ring';
 /** A shader rendering a fractal-like structure made of several layers of since-arches */
 export { neuroNoiseFragmentShader, type NeuroNoiseUniforms } from './shaders/neuro-noise';
-/** A shader rendering an animated dots pattern based on Voronoi diagram */
-export { dotsOrbitFragmentShader, type DotsOrbitUniforms } from './shaders/dots-orbit';
-/** A shader rendering a static dots pattern */
-export { dotsGridFragmentShader, DotsGridShapes, type DotsGridShape, type DotsGridUniforms } from './shaders/dots-grid';
+/** A shader rendering an animated dot pattern based on Voronoi diagram */
+export { dotOrbitFragmentShader, type DotOrbitUniforms } from './shaders/dot-orbit';
+/** A shader rendering a static dot pattern */
+export { dotGridFragmentShader, DotGridShapes, type DotGridShape, type DotGridUniforms } from './shaders/dot-grid';
 /** A shader that calculates a combination of 2 simplex noises with result rendered as a stepped gradient */
 export { steppedSimplexNoiseFragmentShader, type SteppedSimplexNoiseUniforms } from './shaders/stepped-simplex-noise';
 /** A number of circlular shapes blened in a gooey way */

package/dist/index.js

@@ -1,11 +1,11 @@
 /***** Paper Shaders: https://github.com/paper-design/shaders *****/
-var x=class{canvas;gl;program=null;uniformLocations={};fragmentShader;rafId=null;lastFrameTime=0;totalAnimationTime=0;speed=1;providedUniforms;hasBeenDisposed=!1;resolutionChanged=!0;constructor(o,r,t={},a,i=1,s=0){this.canvas=o,this.fragmentShader=r,this.providedUniforms=t,this.totalAnimationTime=s;let n=o.getContext("webgl2",a);if(!n)throw new Error("WebGL not supported");this.gl=n,this.initWebGL(),this.setupResizeObserver(),this.setSpeed(i),this.canvas.setAttribute("data-paper-shaders","true")}initWebGL=()=>{let o=S(this.gl,y,this.fragmentShader);o&&(this.program=o,this.setupPositionAttribute(),this.setupUniforms())};setupPositionAttribute=()=>{let o=this.gl.getAttribLocation(this.program,"a_position"),r=this.gl.createBuffer();this.gl.bindBuffer(this.gl.ARRAY_BUFFER,r);let t=[-1,-1,1,-1,-1,1,-1,1,1,-1,1,1];this.gl.bufferData(this.gl.ARRAY_BUFFER,new Float32Array(t),this.gl.STATIC_DRAW),this.gl.enableVertexAttribArray(o),this.gl.vertexAttribPointer(o,2,this.gl.FLOAT,!1,0,0)};setupUniforms=()=>{this.uniformLocations={u_time:this.gl.getUniformLocation(this.program,"u_time"),u_pixelRatio:this.gl.getUniformLocation(this.program,"u_pixelRatio"),u_resolution:this.gl.getUniformLocation(this.program,"u_resolution"),...Object.fromEntries(Object.keys(this.providedUniforms).map(o=>[o,this.gl.getUniformLocation(this.program,o)]))}};resizeObserver=null;setupResizeObserver=()=>{this.resizeObserver=new ResizeObserver(()=>this.handleResize()),this.resizeObserver.observe(this.canvas),this.handleResize()};handleResize=()=>{let o=this.canvas.clientWidth,r=this.canvas.clientHeight;(this.canvas.width!==o||this.canvas.height!==r)&&(this.canvas.width=o,this.canvas.height=r,this.resolutionChanged=!0,this.gl.viewport(0,0,this.gl.canvas.width,this.gl.canvas.height),this.render(performance.now()))};render=o=>{if(this.hasBeenDisposed)return;let r=o-this.lastFrameTime;this.lastFrameTime=o,this.speed!==0&&(this.totalAnimationTime+=r*this.speed),this.gl.clear(this.gl.COLOR_BUFFER_BIT),this.gl.useProgram(this.program),this.gl.uniform1f(this.uniformLocations.u_time,this.totalAnimationTime*.001),this.resolutionChanged&&(this.gl.uniform2f(this.uniformLocations.u_resolution,this.gl.canvas.width,this.gl.canvas.height),this.gl.uniform1f(this.uniformLocations.u_pixelRatio,window.devicePixelRatio),this.resolutionChanged=!1),this.gl.drawArrays(this.gl.TRIANGLES,0,6),this.speed!==0?this.requestRender():this.rafId=null};requestRender=()=>{this.rafId!==null&&cancelAnimationFrame(this.rafId),this.rafId=requestAnimationFrame(this.render)};updateProvidedUniforms=()=>{this.gl.useProgram(this.program),Object.entries(this.providedUniforms).forEach(([o,r])=>{let t=this.uniformLocations[o];if(t)if(Array.isArray(r))switch(r.length){case 2:this.gl.uniform2fv(t,r);break;case 3:this.gl.uniform3fv(t,r);break;case 4:this.gl.uniform4fv(t,r);break;default:r.length===9?this.gl.uniformMatrix3fv(t,!1,r):r.length===16?this.gl.uniformMatrix4fv(t,!1,r):console.warn(`Unsupported uniform array length: ${r.length}`)}else typeof r=="number"?this.gl.uniform1f(t,r):typeof r=="boolean"?this.gl.uniform1i(t,r?1:0):console.warn(`Unsupported uniform type for ${o}: ${typeof r}`)})};setSeed=o=>{let r=8.333333333333334;this.totalAnimationTime=o*r,this.lastFrameTime=performance.now(),this.render(performance.now())};setSpeed=(o=1)=>{this.speed=o,this.rafId===null&&o!==0&&(this.lastFrameTime=performance.now(),this.rafId=requestAnimationFrame(this.render)),this.rafId!==null&&o===0&&(cancelAnimationFrame(this.rafId),this.rafId=null)};setUniforms=o=>{this.providedUniforms={...this.providedUniforms,...o},this.updateProvidedUniforms(),this.render(performance.now())};dispose=()=>{this.hasBeenDisposed=!0,this.rafId!==null&&(cancelAnimationFrame(this.rafId),this.rafId=null),this.gl&&this.program&&(this.gl.deleteProgram(this.program),this.program=null,this.gl.bindBuffer(this.gl.ARRAY_BUFFER,null),this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER,null),this.gl.bindRenderbuffer(this.gl.RENDERBUFFER,null),this.gl.bindFramebuffer(this.gl.FRAMEBUFFER,null),this.gl.getError()),this.resizeObserver&&(this.resizeObserver.disconnect(),this.resizeObserver=null),this.uniformLocations={}}},y=`#version 300 es
+var x=class{canvas;gl;program=null;uniformLocations={};fragmentShader;rafId=null;lastRenderTime=0;totalFrameTime=0;speed=1;providedUniforms;hasBeenDisposed=!1;resolutionChanged=!0;textures=new Map;constructor(e,t,r={},i,a=1,u=0){this.canvas=e,this.fragmentShader=t,this.providedUniforms=r,this.totalFrameTime=u;let n=e.getContext("webgl2",i);if(!n)throw new Error("WebGL not supported");this.gl=n,this.initProgram(),this.setupPositionAttribute(),this.setupUniforms(),this.setUniformValues(this.providedUniforms),this.setupResizeObserver(),this.setSpeed(a),this.canvas.setAttribute("data-paper-shaders","true")}initProgram=()=>{let e=S(this.gl,y,this.fragmentShader);e&&(this.program=e)};setupPositionAttribute=()=>{let e=this.gl.getAttribLocation(this.program,"a_position"),t=this.gl.createBuffer();this.gl.bindBuffer(this.gl.ARRAY_BUFFER,t);let r=[-1,-1,1,-1,-1,1,-1,1,1,-1,1,1];this.gl.bufferData(this.gl.ARRAY_BUFFER,new Float32Array(r),this.gl.STATIC_DRAW),this.gl.enableVertexAttribArray(e),this.gl.vertexAttribPointer(e,2,this.gl.FLOAT,!1,0,0)};setupUniforms=()=>{let e={u_time:this.gl.getUniformLocation(this.program,"u_time"),u_pixelRatio:this.gl.getUniformLocation(this.program,"u_pixelRatio"),u_resolution:this.gl.getUniformLocation(this.program,"u_resolution")};Object.entries(this.providedUniforms).forEach(([t,r])=>{if(e[t]=this.gl.getUniformLocation(this.program,t),r instanceof HTMLImageElement){let i=`${t}_aspect_ratio`;e[i]=this.gl.getUniformLocation(this.program,i)}}),this.uniformLocations=e};resizeObserver=null;setupResizeObserver=()=>{this.resizeObserver=new ResizeObserver(()=>this.handleResize()),this.resizeObserver.observe(this.canvas),this.handleResize()};handleResize=()=>{let e=this.canvas.clientWidth,t=this.canvas.clientHeight,r=window.devicePixelRatio,i=e*r,a=t*r;if(this.canvas.width!==i||this.canvas.height!==a){if(this.canvas.width=i,this.canvas.height=a,r!==1){let u=window.getComputedStyle(this.canvas).width,n=window.getComputedStyle(this.canvas).height;parseFloat(u)===i&&parseFloat(n)===a&&(this.canvas.style.width=`${e}px`,this.canvas.style.height=`${t}px`)}this.resolutionChanged=!0,this.gl.viewport(0,0,this.gl.canvas.width,this.gl.canvas.height),this.render(performance.now())}};render=e=>{if(this.hasBeenDisposed)return;if(this.program===null){console.warn("Tried to render before program or gl was initialized");return}let t=e-this.lastRenderTime;this.lastRenderTime=e,this.speed!==0&&(this.totalFrameTime+=t*this.speed),this.gl.clear(this.gl.COLOR_BUFFER_BIT),this.gl.useProgram(this.program),this.gl.uniform1f(this.uniformLocations.u_time,this.totalFrameTime*.001),this.resolutionChanged&&(this.gl.uniform2f(this.uniformLocations.u_resolution,this.gl.canvas.width,this.gl.canvas.height),this.gl.uniform1f(this.uniformLocations.u_pixelRatio,window.devicePixelRatio),this.resolutionChanged=!1),this.gl.drawArrays(this.gl.TRIANGLES,0,6),this.speed!==0?this.requestRender():this.rafId=null};requestRender=()=>{this.rafId!==null&&cancelAnimationFrame(this.rafId),this.rafId=requestAnimationFrame(this.render)};setTextureUniform=(e,t)=>{if(!t.complete||t.naturalWidth===0)throw new Error(`Image for uniform ${e} must be fully loaded`);let r=this.textures.get(e);r&&this.gl.deleteTexture(r);let i=this.gl.createTexture();this.gl.bindTexture(this.gl.TEXTURE_2D,i),this.gl.texParameteri(this.gl.TEXTURE_2D,this.gl.TEXTURE_WRAP_S,this.gl.CLAMP_TO_EDGE),this.gl.texParameteri(this.gl.TEXTURE_2D,this.gl.TEXTURE_WRAP_T,this.gl.CLAMP_TO_EDGE),this.gl.texParameteri(this.gl.TEXTURE_2D,this.gl.TEXTURE_MIN_FILTER,this.gl.LINEAR),this.gl.texParameteri(this.gl.TEXTURE_2D,this.gl.TEXTURE_MAG_FILTER,this.gl.LINEAR),this.gl.texImage2D(this.gl.TEXTURE_2D,0,this.gl.RGBA,this.gl.RGBA,this.gl.UNSIGNED_BYTE,t);let a=this.gl.getError();if(a!==this.gl.NO_ERROR||i===null){console.error("WebGL error when uploading texture:",a);return}this.textures.set(e,i);let u=this.uniformLocations[e];if(u){let n=this.textures.size-1;this.gl.useProgram(this.program),this.gl.activeTexture(this.gl.TEXTURE0+n),this.gl.bindTexture(this.gl.TEXTURE_2D,i),this.gl.uniform1i(u,n);let c=`${e}_aspect_ratio`,l=this.uniformLocations[c];if(l){let m=t.naturalWidth/t.naturalHeight;this.gl.uniform1f(l,m)}}};setUniformValues=e=>{this.gl.useProgram(this.program),Object.entries(e).forEach(([t,r])=>{let i=this.uniformLocations[t];if(!i){console.warn(`Uniform location for ${t} not found`);return}if(r instanceof HTMLImageElement)this.setTextureUniform(t,r);else if(Array.isArray(r))switch(r.length){case 2:this.gl.uniform2fv(i,r);break;case 3:this.gl.uniform3fv(i,r);break;case 4:this.gl.uniform4fv(i,r);break;default:r.length===9?this.gl.uniformMatrix3fv(i,!1,r):r.length===16?this.gl.uniformMatrix4fv(i,!1,r):console.warn(`Unsupported uniform array length: ${r.length}`)}else typeof r=="number"?this.gl.uniform1f(i,r):typeof r=="boolean"?this.gl.uniform1i(i,r?1:0):console.warn(`Unsupported uniform type for ${t}: ${typeof r}`)})};getCurrentFrameTime=()=>this.totalFrameTime;setFrame=e=>{this.totalFrameTime=e,this.lastRenderTime=performance.now(),this.render(performance.now())};setSpeed=(e=1)=>{this.speed=e,this.rafId===null&&e!==0&&(this.lastRenderTime=performance.now(),this.rafId=requestAnimationFrame(this.render)),this.rafId!==null&&e===0&&(cancelAnimationFrame(this.rafId),this.rafId=null)};setUniforms=e=>{this.providedUniforms={...this.providedUniforms,...e},this.setUniformValues(e),this.render(performance.now())};dispose=()=>{this.hasBeenDisposed=!0,this.rafId!==null&&(cancelAnimationFrame(this.rafId),this.rafId=null),this.gl&&this.program&&(this.textures.forEach(e=>{this.gl.deleteTexture(e)}),this.textures.clear(),this.gl.deleteProgram(this.program),this.program=null,this.gl.bindBuffer(this.gl.ARRAY_BUFFER,null),this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER,null),this.gl.bindRenderbuffer(this.gl.RENDERBUFFER,null),this.gl.bindFramebuffer(this.gl.FRAMEBUFFER,null),this.gl.getError()),this.resizeObserver&&(this.resizeObserver.disconnect(),this.resizeObserver=null),this.uniformLocations={}}},y=`#version 300 es
 layout(location = 0) in vec4 a_position;
 
 void main() {
   gl_Position = a_position;
 }
-`;function g(e,o,r){let t=e.createShader(o);return t?(e.shaderSource(t,r),e.compileShader(t),e.getShaderParameter(t,e.COMPILE_STATUS)?t:(console.error("An error occurred compiling the shaders: "+e.getShaderInfoLog(t)),e.deleteShader(t),null)):null}function S(e,o,r){let t=g(e,e.VERTEX_SHADER,o),a=g(e,e.FRAGMENT_SHADER,r);if(!t||!a)return null;let i=e.createProgram();return i?(e.attachShader(i,t),e.attachShader(i,a),e.linkProgram(i),e.getProgramParameter(i,e.LINK_STATUS)?(e.detachShader(i,t),e.detachShader(i,a),e.deleteShader(t),e.deleteShader(a),i):(console.error("Unable to initialize the shader program: "+e.getProgramInfoLog(i)),e.deleteProgram(i),e.deleteShader(t),e.deleteShader(a),null)):null}var w=`#version 300 es
+`;function b(o,e,t){let r=o.createShader(e);return r?(o.shaderSource(r,t),o.compileShader(r),o.getShaderParameter(r,o.COMPILE_STATUS)?r:(console.error("An error occurred compiling the shaders: "+o.getShaderInfoLog(r)),o.deleteShader(r),null)):null}function S(o,e,t){let r=b(o,o.VERTEX_SHADER,e),i=b(o,o.FRAGMENT_SHADER,t);if(!r||!i)return null;let a=o.createProgram();return a?(o.attachShader(a,r),o.attachShader(a,i),o.linkProgram(a),o.getProgramParameter(a,o.LINK_STATUS)?(o.detachShader(a,r),o.detachShader(a,i),o.deleteShader(r),o.deleteShader(i),a):(console.error("Unable to initialize the shader program: "+o.getProgramInfoLog(a)),o.deleteProgram(a),o.deleteShader(r),o.deleteShader(i),null)):null}var R=`#version 300 es
 precision highp float;
 
 uniform vec2 u_resolution;
@@ -93,7 +93,7 @@ void main() {
 
   fragColor = vec4(color * opacity, opacity);
 }
-`;var z=`#version 300 es
+`;var w=`#version 300 es
 precision highp float;
 
 uniform float u_pixelRatio;
@@ -171,7 +171,7 @@ void main() {
     
     fragColor = vec4(color, opacity);
 }
-`;var C=`#version 300 es
+`;var z=`#version 300 es
 precision highp float;
 
 uniform float u_pixelRatio;
@@ -194,15 +194,23 @@ out vec4 fragColor;
 float random(in vec2 st) {
   return fract(sin(dot(st.xy, vec2(12.9898, 78.233))) * 43758.5453123);
 }
-float noise(in vec2 st) {
+float noise(vec2 st) {
   vec2 i = floor(st);
   vec2 f = fract(st);
   float a = random(i);
   float b = random(i + vec2(1.0, 0.0));
   float c = random(i + vec2(0.0, 1.0));
   float d = random(i + vec2(1.0, 1.0));
+
+  // Smoothstep for interpolation
   vec2 u = f * f * (3.0 - 2.0 * f);
-  return mix(a, b, u.x) + (c - a) * u.y * (1.0 - u.x) + (d - b) * u.x * u.y;
+
+  // Do the interpolation as two nested mix operations
+  // If you try to do this in one big operation, there's enough precision loss to be off by 1px at cell boundaries
+  float x1 = mix(a, b, u.x);
+  float x2 = mix(c, d, u.x);
+  return mix(x1, x2, u.y);
+
 }
 float fbm(in vec2 n) {
   float total = 0.0, amplitude = .4;
@@ -227,10 +235,9 @@ void main() {
   float ratio = u_resolution.x / u_resolution.y;
 
   uv -= .5;
-  uv /= u_pixelRatio;
   float scale = .5 * u_scale + 1e-4;
   uv *= (1. - step(1. - scale, 1.) / scale);
-  uv *= 3.;
+  uv *= 1.5;
   uv.x *= ratio;
 
   float t = u_time;
@@ -241,9 +248,9 @@ void main() {
   vec2 polar_uv = vec2(atg, .1 * t - (.5 * length(uv)) + 1. / pow(length(uv), .5));
   polar_uv *= u_noiseScale;
 
-  float noise_left = fbm(polar_uv + .05 * t);
+  float noise_left = fbm(polar_uv + mod(.05 * t, 35.));
   polar_uv.x = mod(polar_uv.x, u_noiseScale * TWO_PI);
-  float noise_right = fbm(polar_uv + .05 * t);
+  float noise_right = fbm(polar_uv + mod(.05 * t, 35.));
   float noise = mix(noise_right, noise_left, smoothstep(-.2, .2, uv.x));
 
   float center_shape = 1. - pow(smoothstep(2., .0, length(uv)), 50.);
@@ -275,7 +282,7 @@ void main() {
 
   fragColor = vec4(color, opacity);
 }
-`;var k=`#version 300 es
+`;var C=`#version 300 es
 precision highp float;
 
 uniform float u_time;
@@ -332,7 +339,7 @@ void main() {
 
   fragColor = vec4(color, opacity);
 }
-`;var R=`#version 300 es
+`;var k=`#version 300 es
 precision highp float;
 
 uniform float u_time;
@@ -419,7 +426,7 @@ void main() {
 
   fragColor = vec4(color * opacity, opacity);
 }
-`;var F={Circle:0,Diamond:1,Square:2,Triangle:3},I=`#version 300 es
+`;var T={Circle:0,Diamond:1,Square:2,Triangle:3},F=`#version 300 es
 precision highp float;
 
 uniform vec2 u_resolution;
@@ -442,97 +449,99 @@ out vec4 fragColor;
 #define PI 3.14159265358979323846
 
 float hash(vec2 st) {
-    return fract(sin(dot(st.xy, vec2(12.9898, 78.233))) * 43758.5453123);
+  return fract(sin(dot(st.xy, vec2(12.9898, 78.233))) * 43758.5453123);
 }
 
-vec3 permute(vec3 x) { return mod(((x*34.0)+1.0)*x, 289.0); }
-
-  float snoise(vec2 v) {
-    const vec4 C = vec4(0.211324865405187, 0.366025403784439,
-                        -0.577350269189626, 0.024390243902439);
-    vec2 i  = floor(v + dot(v, C.yy));
-    vec2 x0 = v -   i + dot(i, C.xx);
-    vec2 i1;
-    i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);
-    vec4 x12 = x0.xyxy + C.xxzz;
-    x12.xy -= i1;
-    i = mod(i, 289.0);
-    vec3 p = permute( permute( i.y + vec3(0.0, i1.y, 1.0))
+vec3 permute(vec3 x) { return mod(((x * 34.0) + 1.0) * x, 289.0); }
+
+float snoise(vec2 v) {
+  const vec4 C = vec4(0.211324865405187, 0.366025403784439,
+    -0.577350269189626, 0.024390243902439);
+  vec2 i = floor(v + dot(v, C.yy));
+  vec2 x0 = v - i + dot(i, C.xx);
+  vec2 i1;
+  i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);
+  vec4 x12 = x0.xyxy + C.xxzz;
+  x12.xy -= i1;
+  i = mod(i, 289.0);
+  vec3 p = permute(permute(i.y + vec3(0.0, i1.y, 1.0))
     + i.x + vec3(0.0, i1.x, 1.0));
-    vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy),
-      dot(x12.zw,x12.zw)), 0.0);
-    m = m*m ;
-    m = m*m ;
-    vec3 x = 2.0 * fract(p * C.www) - 1.0;
-    vec3 h = abs(x) - 0.5;
-    vec3 ox = floor(x + 0.5);
-    vec3 a0 = x - ox;
-    m *= 1.79284291400159 - 0.85373472095314 * (a0*a0 + h*h);
-    vec3 g;
-    g.x = a0.x * x0.x + h.x * x0.y;
-    g.yz = a0.yz * x12.xz + h.yz * x12.yw;
-    return 130.0 * dot(m, g);
-  }
+  vec3 m = max(0.5 - vec3(dot(x0, x0), dot(x12.xy, x12.xy),
+      dot(x12.zw, x12.zw)), 0.0);
+  m = m * m;
+  m = m * m;
+  vec3 x = 2.0 * fract(p * C.www) - 1.0;
+  vec3 h = abs(x) - 0.5;
+  vec3 ox = floor(x + 0.5);
+  vec3 a0 = x - ox;
+  m *= 1.79284291400159 - 0.85373472095314 * (a0 * a0 + h * h);
+  vec3 g;
+  g.x = a0.x * x0.x + h.x * x0.y;
+  g.yz = a0.yz * x12.xz + h.yz * x12.yw;
+  return 130.0 * dot(m, g);
+}
 float polygon(vec2 p, float N, float rot) {
-    float a = atan(p.x, p.y) + rot;
-    float r = TWO_PI / float(N);
+  float a = atan(p.x, p.y) + rot;
+  float r = TWO_PI / float(N);
 
-    return cos(floor(.5 + a/r) * r - a) * length(p);
+  return cos(floor(.5 + a / r) * r - a) * length(p);
 }
 
 void main() {
-    vec2 uv = gl_FragCoord.xy;
-    uv.y = u_resolution.y - uv.y;
-
-    uv /= u_pixelRatio;
-
-    vec2 grid = fract(uv / vec2(u_gridSpacingX, u_gridSpacingY)) + 1e-4;
-    vec2 grid_idx = floor(uv / vec2(u_gridSpacingX, u_gridSpacingY));
-    float size_randomizer = .5 + .5 * snoise(2. * vec2(grid_idx.x * 100., grid_idx.y));
-    float opacity_randomizer = .5 + .5 * snoise(2. * vec2(grid_idx.y, grid_idx.x));
+  vec2 uv = gl_FragCoord.xy;
+  uv.y = u_resolution.y - uv.y;
 
-    vec2 center = vec2(0.5) - 1e-3;
-    vec2 p = (grid - center) * vec2(u_gridSpacingX, u_gridSpacingY);
-
-    float base_size = u_dotSize * (1. - size_randomizer * clamp(u_sizeRange, 0., 1.));
-    float stroke_width = u_strokeWidth;
+  uv /= u_pixelRatio;
 
-    float dist;
-    if (u_shape < 0.5) {
-        // Circle
-        dist = length(p);
-    } else if (u_shape < 1.5) {
-        // Diamond
-        dist = polygon(1.5 * p, 4., .25 * PI);
-    } else if (u_shape < 2.5) {
-        // Square
-        dist = polygon(1.5 * p, 4., 1e-3);
-    } else {
-        // Triangle
-        p = p * 2. - 1.;
-        p.y -= .75 * base_size;
-        stroke_width *= 2.;
-        dist = polygon(p, 3., 1e-3);
-    }
+  vec2 grid = fract(uv / vec2(u_gridSpacingX, u_gridSpacingY)) + 1e-4;
+  vec2 grid_idx = floor(uv / vec2(u_gridSpacingX, u_gridSpacingY));
+  float sizeRandomizer = .5 + .8 * snoise(2. * vec2(grid_idx.x * 100., grid_idx.y));
+  float opacity_randomizer = .5 + .7 * snoise(2. * vec2(grid_idx.y, grid_idx.x));
+
+  vec2 center = vec2(0.5) - 1e-3;
+  vec2 p = (grid - center) * vec2(u_gridSpacingX, u_gridSpacingY);
+
+  float baseSize = u_dotSize * (1. - sizeRandomizer * u_sizeRange);
+  float strokeWidth = u_strokeWidth;
+
+  float dist;
+  if (u_shape < 0.5) {
+    // Circle
+    dist = length(p);
+  } else if (u_shape < 1.5) {
+    // Diamond
+    strokeWidth *= 1.5;
+    dist = polygon(1.5 * p, 4., .25 * PI);
+  } else if (u_shape < 2.5) {
+    // Square
+    dist = polygon(1.03 * p, 4., 1e-3);
+  } else {
+    // Triangle
+    strokeWidth *= 1.5;
+    p = p * 2. - 1.;
+    p *= .9;
+    p.y -= .75 * baseSize;
+    dist = polygon(p, 3., 1e-3);
+  }
 
-    float edge_width = fwidth(dist);
-    float shape_outer = smoothstep(base_size + edge_width, base_size - edge_width, dist);
-    float shape_inner = smoothstep(base_size - u_strokeWidth + edge_width, base_size - u_strokeWidth - edge_width, dist);
-    float stroke = clamp(shape_outer - shape_inner, 0., 1.);
+  float edgeWidth = fwidth(dist);
+  float shapeOuter = smoothstep(baseSize + edgeWidth + strokeWidth, baseSize - edgeWidth + strokeWidth, dist);
+  float shapeInner = smoothstep(baseSize + edgeWidth, baseSize - edgeWidth, dist);
+  float stroke = clamp(shapeOuter - shapeInner, 0., 1.);
 
-    float dot_opacity = max(0., 1. - opacity_randomizer * clamp(u_opacityRange, 0., 1.));
+  float dot_opacity = max(0., 1. - opacity_randomizer * u_opacityRange);
 
-    vec3 color = u_colorBack.rgb * u_colorBack.a;
-    color = mix(color, u_colorFill.rgb, u_colorFill.a * dot_opacity * shape_inner);
-    color = mix(color, u_colorStroke.rgb, u_colorStroke.a * dot_opacity * stroke);
+  vec3 color = u_colorBack.rgb * u_colorBack.a;
+  color = mix(color, u_colorFill.rgb, u_colorFill.a * dot_opacity * shapeInner);
+  color = mix(color, u_colorStroke.rgb, u_colorStroke.a * dot_opacity * stroke);
 
-    float opacity = u_colorBack.a;
-    opacity += u_colorFill.a * shape_inner * dot_opacity;
-    opacity += u_colorStroke.a * stroke * dot_opacity;
+  float opacity = u_colorBack.a;
+  opacity += u_colorFill.a * shapeInner * dot_opacity;
+  opacity += u_colorStroke.a * stroke * dot_opacity;
 
-    fragColor = vec4(color, opacity);
+  fragColor = vec4(color, opacity);
 }
-`;var P=`#version 300 es
+`;var I=`#version 300 es
 precision highp float;
 
 uniform float u_time;
@@ -619,7 +628,7 @@ void main() {
   }
   fragColor = vec4(color, opacity);
 }
-`;var U=`#version 300 es
+`;var P=`#version 300 es
 precision highp float;
 
 uniform float u_time;
@@ -662,9 +671,8 @@ void main() {
   float ratio = u_resolution.x / u_resolution.y;
 
   uv -= .5;
-  uv /= u_pixelRatio;
   float scale = .5 * u_scale + 1e-4;
-  uv *= (18. * (1. - step(1. - scale, 1.) / scale));
+  uv *= (9. * (1. - step(1. - scale, 1.) / scale));
   uv += .5;
   uv.x *= ratio;
 
@@ -716,7 +724,7 @@ void main() {
 
   fragColor = vec4(color, opacity);
 }
-`;var W=`#version 300 es
+`;var U=`#version 300 es
 precision highp float;
 
 uniform float u_time;
@@ -727,7 +735,7 @@ uniform float u_scale;
 uniform vec4 u_color1;
 uniform vec4 u_color2;
 uniform float u_proportion;
-uniform float u_contour;
+uniform float u_softness;
 uniform float u_octaveCount;
 uniform float u_persistence;
 uniform float u_lacunarity;
@@ -887,7 +895,7 @@ void main() {
     
     float max_amp = get_max_amp(persistence, oct_count);
     float noise_normalized = (noise + max_amp) / (2. * max_amp) + (u_proportion - .5);
-    float sharpness = clamp(1. - u_contour, 0., 1.);
+    float sharpness = clamp(u_softness, 0., 1.);
     float smooth_w = 0.5 * fwidth(noise_normalized);
     float sharp_noise = smoothstep(
         .5 - .5 * sharpness - smooth_w, 
@@ -900,7 +908,7 @@ void main() {
 
     fragColor = vec4(color, opacity);
 }
-`;var T=`#version 300 es
+`;var E=`#version 300 es
 precision highp float;
 
 uniform float u_time;
@@ -918,9 +926,9 @@ uniform vec4 u_colorMid;
 uniform float u_colorGradient;
 uniform float u_distance;
 uniform float u_edgesSize;
-uniform float u_edgesSharpness;
+uniform float u_edgesSoftness;
 uniform float u_middleSize;
-uniform float u_middleSharpness;
+uniform float u_middleSoftness;
 
 #define TWO_PI 6.28318530718
 
@@ -992,12 +1000,12 @@ void main() {
 
   float dot_shape = pow(distance.x, 2.) / (2. * clamp(u_middleSize, 0., 1.) + 1e-4);
   float dot_edge_width = fwidth(dot_shape);
-  float dotSharp = clamp(u_middleSharpness, 0., 1.);
+  float dotSharp = clamp(1. - u_middleSoftness, 0., 1.);
   dot_shape = 1. - smoothstep(.5 * dotSharp - dot_edge_width, 1. - .5 * dotSharp, dot_shape);
 
   float cell_edge_width = fwidth(distance.x);
   float w = .7 * (clamp(u_edgesSize, 0., 1.) - .1);
-  float edgeSharp = clamp(u_edgesSharpness, 0., 1.);
+  float edgeSharp = clamp(u_edgesSoftness, 0., 1.);
   cell_shape = smoothstep(w - cell_edge_width, w + edgeSharp, cell_shape);
 
   dot_shape *= cell_shape;
@@ -1014,7 +1022,7 @@ void main() {
 
   fragColor = vec4(color, opacity);
 }
-`;var O=`#version 300 es
+`;var W=`#version 300 es
 precision highp float;
 
 uniform float u_pixelRatio;
@@ -1030,7 +1038,7 @@ uniform float u_frequency;
 uniform float u_amplitude;
 uniform float u_spacing;
 uniform float u_dutyCycle;
-uniform float u_edgeBlur;
+uniform float u_softness;
 
 #define TWO_PI 6.28318530718
 #define PI 3.14159265358979323846
@@ -1064,7 +1072,7 @@ void main() {
   float shape = .5 + .5 * sin((uv.y + offset) * PI / spacing);
   
   float edge_width = .02 / (1. + abs(shape)) * (.001 + u_scale);
-  edge_width += .5 * max(0., u_edgeBlur);
+  edge_width += .5 * max(0., u_softness);
   float dc = clamp(u_dutyCycle, 0., 1.);
   float t = smoothstep(dc - edge_width, dc + edge_width, shape);
 
@@ -1073,7 +1081,7 @@ void main() {
   
   fragColor = vec4(color, opacity);
 }
-`;var A={Checks:0,Stripes:1,Edge:2},B=`#version 300 es
+`;var O={Checks:0,Stripes:1,Edge:2},A=`#version 300 es
 precision highp float;
 
 uniform float u_time;
@@ -1194,7 +1202,7 @@ void main() {
 
     fragColor = vec4(color_mix.rgb, color_mix.a);
 }
-`;var q=`#version 300 es
+`;var L=`#version 300 es
 precision highp float;
 
 uniform float u_time;
@@ -1307,7 +1315,7 @@ void main() {
   
   fragColor = vec4(color, opacity);
 }
-`;var G=`#version 300 es
+`;var B=`#version 300 es
 precision highp float;
 
 uniform float u_scale;
@@ -1324,7 +1332,7 @@ uniform float u_strokeTaper;
 
 uniform float u_noiseFreq;
 uniform float u_noisePower;
-uniform float u_blur;
+uniform float u_softness;
 
 uniform float u_time;
 uniform float u_pixelRatio;
@@ -1371,8 +1379,7 @@ void main() {
   uv -= .5;
   uv += vec2(-u_offsetX, u_offsetY);
 
-  uv *= (.4 + 30. * u_scale);
-  uv /= u_pixelRatio;
+  uv *= (.4 + 15. * u_scale);
   uv.x *= ratio;
 
   float t = u_time;
@@ -1383,7 +1390,7 @@ void main() {
 
   angle_norm += .125 * u_noisePower * snoise(.5 * u_noiseFreq * uv);
 
-  float offset = pow(l, 1. - clamp(0., 1., u_spiralDensity)) + angle_norm;
+  float offset = pow(l, 1. - clamp(u_spiralDensity, 0., 1.)) + angle_norm;
   
   float stripe_map = fract(offset);
   stripe_map -= .5 * u_strokeTaper * l;
@@ -1402,12 +1409,12 @@ void main() {
   mid = pow(mid, 2.);
   shape -= .5 * u_strokeCap * mid;
   
-  shape = smoothstep(stroke_width - edge_width - u_blur, stroke_width + edge_width + u_blur, shape);
+  shape = smoothstep(stroke_width - edge_width - u_softness, stroke_width + edge_width + u_softness, shape);
 
   vec3 color = mix(u_color1.rgb * u_color1.a, u_color2.rgb * u_color2.a, shape);
   float opacity = mix(u_color1.a, u_color2.a, shape);
 
   fragColor = vec4(color, opacity);
 }
-`;function f(e,o=[0,0,0,1]){if(Array.isArray(e))return e.length===4?e:e.length===3?[...e,1]:f(o);if(typeof e!="string")return f(o);let r,t,a,i=1;if(e.startsWith("#"))[r,t,a,i]=L(e);else if(e.startsWith("rgb"))[r,t,a,i]=D(e);else if(e.startsWith("hsl"))[r,t,a,i]=N(E(e));else return console.error("Unsupported color format",e),f(o);return[m(r,0,1),m(t,0,1),m(a,0,1),m(i,0,1)]}function L(e){e=e.replace(/^#/,""),e.length===3&&(e=e.split("").map(i=>i+i).join("")),e.length===6&&(e=e+"ff");let o=parseInt(e.slice(0,2),16)/255,r=parseInt(e.slice(2,4),16)/255,t=parseInt(e.slice(4,6),16)/255,a=parseInt(e.slice(6,8),16)/255;return[o,r,t,a]}function D(e){let o=e.match(/^rgba?\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*([0-9.]+))?\s*\)$/i);return o?[parseInt(o[1]??"0")/255,parseInt(o[2]??"0")/255,parseInt(o[3]??"0")/255,o[4]===void 0?1:parseFloat(o[4])]:[0,0,0,1]}function E(e){let o=e.match(/^hsla?\s*\(\s*(\d+)\s*,\s*(\d+)%\s*,\s*(\d+)%\s*(?:,\s*([0-9.]+))?\s*\)$/i);return o?[parseInt(o[1]??"0"),parseInt(o[2]??"0"),parseInt(o[3]??"0"),o[4]===void 0?1:parseFloat(o[4])]:[0,0,0,1]}function N(e){let[o,r,t,a]=e,i=o/360,s=r/100,n=t/100,_,p,d;if(r===0)_=p=d=n;else{let v=(l,b,u)=>(u<0&&(u+=1),u>1&&(u-=1),u<.16666666666666666?l+(b-l)*6*u:u<.5?b:u<.6666666666666666?l+(b-l)*(.6666666666666666-u)*6:l),c=n<.5?n*(1+s):n+s-n*s,h=2*n-c;_=v(h,c,i+1/3),p=v(h,c,i),d=v(h,c,i-1/3)}return[_,p,d,a]}var m=(e,o,r)=>Math.min(Math.max(e,o),r);export{F as DotsGridShapes,A as PatternShapes,x as ShaderMount,I as dotsGridFragmentShader,R as dotsOrbitFragmentShader,f as getShaderColorFromString,q as godRaysFragmentShader,w as grainCloudsFragmentShader,z as meshGradientFragmentShader,U as metaballsFragmentShader,k as neuroNoiseFragmentShader,W as perlinNoiseFragmentShader,C as smokeRingFragmentShader,G as spiralFragmentShader,P as steppedSimplexNoiseFragmentShader,T as voronoiFragmentShader,B as warpFragmentShader,O as wavesFragmentShader};
+`;function p(o,e=[0,0,0,1]){if(Array.isArray(o))return o.length===4?o:o.length===3?[...o,1]:p(e);if(typeof o!="string")return p(e);let t,r,i,a=1;if(o.startsWith("#"))[t,r,i,a]=D(o);else if(o.startsWith("rgb"))[t,r,i,a]=G(o);else if(o.startsWith("hsl"))[t,r,i,a]=M(q(o));else return console.error("Unsupported color format",o),p(e);return[d(t,0,1),d(r,0,1),d(i,0,1),d(a,0,1)]}function D(o){o=o.replace(/^#/,""),o.length===3&&(o=o.split("").map(a=>a+a).join("")),o.length===6&&(o=o+"ff");let e=parseInt(o.slice(0,2),16)/255,t=parseInt(o.slice(2,4),16)/255,r=parseInt(o.slice(4,6),16)/255,i=parseInt(o.slice(6,8),16)/255;return[e,t,r,i]}function G(o){let e=o.match(/^rgba?\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*([0-9.]+))?\s*\)$/i);return e?[parseInt(e[1]??"0")/255,parseInt(e[2]??"0")/255,parseInt(e[3]??"0")/255,e[4]===void 0?1:parseFloat(e[4])]:[0,0,0,1]}function q(o){let e=o.match(/^hsla?\s*\(\s*(\d+)\s*,\s*(\d+)%\s*,\s*(\d+)%\s*(?:,\s*([0-9.]+))?\s*\)$/i);return e?[parseInt(e[1]??"0"),parseInt(e[2]??"0"),parseInt(e[3]??"0"),e[4]===void 0?1:parseFloat(e[4])]:[0,0,0,1]}function M(o){let[e,t,r,i]=o,a=e/360,u=t/100,n=r/100,c,l,m;if(t===0)c=l=m=n;else{let v=(f,g,s)=>(s<0&&(s+=1),s>1&&(s-=1),s<.16666666666666666?f+(g-f)*6*s:s<.5?g:s<.6666666666666666?f+(g-f)*(.6666666666666666-s)*6:f),_=n<.5?n*(1+u):n+u-n*u,h=2*n-_;c=v(h,_,a+1/3),l=v(h,_,a),m=v(h,_,a-1/3)}return[c,l,m,i]}var d=(o,e,t)=>Math.min(Math.max(o,e),t);export{T as DotGridShapes,O as PatternShapes,x as ShaderMount,F as dotGridFragmentShader,k as dotOrbitFragmentShader,p as getShaderColorFromString,L as godRaysFragmentShader,R as grainCloudsFragmentShader,w as meshGradientFragmentShader,P as metaballsFragmentShader,C as neuroNoiseFragmentShader,U as perlinNoiseFragmentShader,z as smokeRingFragmentShader,B as spiralFragmentShader,I as steppedSimplexNoiseFragmentShader,E as voronoiFragmentShader,A as warpFragmentShader,W as wavesFragmentShader};
 //# sourceMappingURL=index.js.map