From 5273902811ea85785e7d628eaad382d8f9d094ee Mon Sep 17 00:00:00 2001 From: Ksenia Kondrashova Date: Wed, 18 Dec 2024 13:16:52 +0400 Subject: [PATCH] dots parameters to pixel values + shape variation fix --- example/src/shaders/dots-grid-example.tsx | 14 +++--- .../shaders-react/src/shaders/dots-grid.tsx | 10 ++--- packages/shaders/src/shader-mount.ts | 4 +- packages/shaders/src/shaders/dots-grid.ts | 44 ++++++------------- 4 files changed, 25 insertions(+), 47 deletions(-) diff --git a/example/src/shaders/dots-grid-example.tsx b/example/src/shaders/dots-grid-example.tsx index 3b97a1f..5f6ad58 100644 --- a/example/src/shaders/dots-grid-example.tsx +++ b/example/src/shaders/dots-grid-example.tsx @@ -8,10 +8,9 @@ import { useEffect } from 'react'; const DotsGridExample = () => { return ( ); @@ -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 } ), diff --git a/packages/shaders-react/src/shaders/dots-grid.tsx b/packages/shaders-react/src/shaders/dots-grid.tsx index c4744d6..4deb37f 100644 --- a/packages/shaders-react/src/shaders/dots-grid.tsx +++ b/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 & DotsGridParams; @@ -16,10 +15,9 @@ type DotsGridPreset = { name: string; params: Required }; 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 ; diff --git a/packages/shaders/src/shader-mount.ts b/packages/shaders/src/shader-mount.ts index 22e5228..b73cc05 100644 --- a/packages/shaders/src/shader-mount.ts +++ b/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) { diff --git a/packages/shaders/src/shaders/dots-grid.ts b/packages/shaders/src/shaders/dots-grid.ts index f2d4d96..2efe9db 100644 --- a/packages/shaders/src/shaders/dots-grid.ts +++ b/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;