dots parameters to pixel values + shape variation fix

example/src/shaders/dots-grid-example.tsx

@@ -8,10 +8,9 @@ import { useEffect } from 'react';
 const DotsGridExample = () => {
   return (
     <DotsGrid
-      scale={11}
-      dotSize={0.15}
-      gridSpacingX={2}
-      gridSpacingY={1}
+      dotSize={4}
+      gridSpacingX={50}
+      gridSpacingY={50}
       style={{ position: 'fixed', width: '100%', height: '100%' }}
     />
   );
@@ -31,10 +30,9 @@ export const DotsGridWithControls = () => {
     return {
       Parameters: folder(
         {
-          scale: { value: defaults.scale, order: 1, min: 1, max: 80 },
-          dotSize: { value: defaults.dotSize, order: 2, min: 0.001, max: 0.5 },
-          gridSpacingX: { value: defaults.gridSpacingX, order: 3, min: .1, max: 2 },
-          gridSpacingY: { value: defaults.gridSpacingY, order: 4, min: .1, max: 2 },
+          dotSize: { value: defaults.dotSize, order: 2, min: .1, max: 50 },
+          gridSpacingX: { value: defaults.gridSpacingX, order: 3, min: 2, max: 500 },
+          gridSpacingY: { value: defaults.gridSpacingY, order: 4, min: 2, max: 500 },
         },
         { order: 1 }
       ),

packages/shaders-react/src/shaders/dots-grid.tsx

@@ -6,7 +6,6 @@ export type DotsGridParams = {
   dotSize?: number;
   gridSpacingX?: number;
   gridSpacingY?: number;
-  scale?: number;
 };
 
 export type DotsGridProps = Omit<ShaderMountProps, 'fragmentShader'> & DotsGridParams;
@@ -16,10 +15,9 @@ type DotsGridPreset = { name: string; params: Required<DotsGridParams> };
 export const defaultPreset: DotsGridPreset = {
   name: 'Default',
   params: {
-    dotSize: 0.15,
-    gridSpacingX: 2,
-    gridSpacingY: 1,
-    scale: 10,
+    dotSize: 2,
+    gridSpacingX: 75,
+    gridSpacingY: 75,
   },
 } as const;
 
@@ -31,13 +29,11 @@ export const DotsGrid = (props: DotsGridProps): JSX.Element => {
       u_dotSize: props.dotSize ?? defaultPreset.params.dotSize,
       u_gridSpacingX: props.gridSpacingX ?? defaultPreset.params.gridSpacingX,
       u_gridSpacingY: props.gridSpacingY ?? defaultPreset.params.gridSpacingY,
-      u_scale: props.scale ?? defaultPreset.params.scale,
     };
   }, [
     props.dotSize,
     props.gridSpacingX,
     props.gridSpacingY,
-    props.scale,
   ]);
 
   return <ShaderMount {...props} fragmentShader={dotsGridFragmentShader} uniforms={uniforms} />;

packages/shaders/src/shader-mount.ts

@@ -74,6 +74,7 @@ export class ShaderMount {
   private setupUniforms = () => {
     this.uniformLocations = {
       u_time: this.gl.getUniformLocation(this.program!, 'u_time'),
+      u_pxRatio: this.gl.getUniformLocation(this.program!, 'u_pxRatio'),
       u_resolution: this.gl.getUniformLocation(this.program!, 'u_resolution'),
       ...Object.fromEntries(
         Object.keys(this.providedUniforms).map((key) => [key, this.gl.getUniformLocation(this.program!, key)])
@@ -89,7 +90,8 @@ export class ShaderMount {
   };
 
   private handleResize = () => {
-    const pxRatio = Math.min(2, window.devicePixelRatio);
+    const pxRatio = window.devicePixelRatio;
+    this.gl.uniform1f(this.uniformLocations.u_pxRatio!, pxRatio);
     const newWidth = this.canvas.clientWidth * pxRatio;
     const newHeight = this.canvas.clientHeight * pxRatio;
     if (this.canvas.width !== newWidth || this.canvas.height !== newHeight) {

packages/shaders/src/shaders/dots-grid.ts

@@ -1,55 +1,37 @@
 export type DotsGridUniforms = {
-  u_scale: number;
   u_dotSize: number;
   u_gridSpacingX: number;
   u_gridSpacingY: number;
 };
 
 /**
- * Dots Pattern with dots moving around their grid position
- * The artwork by Ksenia Kondrashova
- * Renders a dot pattern with dots placed in the center of each cell of animated Voronoi diagram
+ * Dots Pattern
  *
  * Uniforms include:
- * u_color1: The first dots color
- * u_color2: The second dots color
- * u_color3: The third dots color
- * u_color4: The fourth dots color
- * u_scale: The scale applied to pattern
- * u_dotSize: The base dot radius (relative to cell size)
- * u_dotSizeRange: Dot radius to vary between the cells
- * u_spreading: How far dots are moving around the straight grid
+ * u_dotSize: The base dot radius, px
+ * u_gridSpacingX: Horizontal grid spacing, px
+ * u_gridSpacingY: Vertical grid spacing, px
  */
 
 export const dotsGridFragmentShader = `#version 300 es
-precision mediump float;
-
-// uniform vec4 u_color1;
-// uniform vec4 u_color2;
-// uniform vec4 u_color3;
-// uniform vec4 u_color4;
-// uniform float u_dotSizeRange;
-// uniform float u_spreading;
-// uniform float u_ratio;
+precision highp float;
 
 uniform float u_dotSize;
 uniform float u_gridSpacingX;
 uniform float u_gridSpacingY;
-uniform float u_scale;
 uniform vec2 u_resolution;
+uniform float u_pxRatio;
 
 out vec4 fragColor;
 
 void main() {
-    vec2 uv = gl_FragCoord.xy / u_resolution.xy;
-    uv -= .5;
-    uv *= (.001 * u_scale * u_resolution);
-    uv += .5;
-    
-    uv /= vec2(u_gridSpacingX, u_gridSpacingY);
-    
-    vec2 grid = fract(uv);
-    vec2 center = vec2(.5);
+    vec2 uv = gl_FragCoord.xy;
+
+    uv /= u_pxRatio;
+
+    vec2 grid = fract(uv / vec2(u_gridSpacingX, u_gridSpacingY)) + 1e-4;
+
+    vec2 center = vec2(.5) - 1e-3;
     float dist = length((grid - center) * vec2(u_gridSpacingX, u_gridSpacingY));
     float radius = u_dotSize;