@fjandin/react-shader 0.0.4 → 0.0.5

package/README.md

@@ -53,6 +53,8 @@ function App() {
 | `fullscreen` | `boolean` | No | `false` | Render as fixed fullscreen overlay |
 | `timeScale` | `number` | No | `1` | Scale factor for elapsed time |
 | `onFrame` | `(info: FrameInfo) => void` | No | - | Callback invoked on each frame |
+| `onClick` | `(info: FrameInfo) => void` | No | - | Callback invoked on canvas click |
+| `onMouseMove` | `(info: FrameInfo) => void` | No | - | Callback invoked on mouse move |
 
 ## Built-in Uniforms
 
@@ -62,6 +64,7 @@ These uniforms are automatically provided to your shader every frame:
 |---------|-----------|-------------|
 | `iTime` | `float` | Elapsed time in seconds (scaled by `timeScale` prop) |
 | `iMouse` | `vec2` | Mouse position in pixels (Y=0 at bottom) |
+| `iMouseNormalized` | `vec2` | Mouse position normalized with aspect correction (shorter axis -0.5 to 0.5, center is 0,0) |
 | `iMouseLeftDown` | `float` | `1.0` when left mouse button is pressed, `0.0` otherwise |
 | `iResolution` | `vec2` | Canvas resolution in pixels (includes high-DPI scaling) |
 
@@ -73,10 +76,14 @@ Pass custom uniform values via the `uniforms` prop:
 <ReactShader
   fragment={fragment}
   uniforms={{
-    scale: 2.0,                    // float
-    offset: [0.5, 0.5],            // vec2
-    color: [1.0, 0.5, 0.2],        // vec3
-    transform: [1, 0, 0, 1],       // vec4
+    scale: 2.0,                              // float
+    offset: [0.5, 0.5],                      // vec2
+    color: [1.0, 0.5, 0.2],                  // vec3
+    transform: [1, 0, 0, 1],                 // vec4
+    weights: [0.1, 0.2, 0.3, 0.25, 0.15],   // float array
+    points: [[0, 0], [1, 0], [0.5, 1]],     // vec2 array
+    colors: [[1, 0, 0], [0, 1, 0]],         // vec3 array
+    ripples: [[0, 0, 0.5, 0.1]],            // vec4 array
   }}
 />
 ```
@@ -86,6 +93,62 @@ Supported types:
 - `[number, number]` → `vec2`
 - `[number, number, number]` → `vec3`
 - `[number, number, number, number]` → `vec4`
+- `number[]` (length > 4) → `float[N]`
+- `[number, number][]` → `vec2[N]`
+- `[number, number, number][]` → `vec3[N]`
+- `[number, number, number, number][]` → `vec4[N]`
+
+### Array Count Uniforms
+
+For array uniforms, an additional `_count` uniform is automatically created and set:
+
+```tsx
+uniforms={{ points: [[0, 0], [1, 0], [0.5, 1]] }}
+```
+
+This generates both `uniform vec2 points[3]` and `uniform int points_count` (set to `3`), allowing you to loop over arrays in your shader:
+
+```glsl
+for (int i = 0; i < points_count; i++) {
+  // Use points[i]...
+}
+```
+
+## Automatic Uniform Injection
+
+Instead of manually declaring uniforms in your shader, you can use the `// @UNIFORM_VALUES` marker to automatically inject all uniform declarations:
+
+```tsx
+const fragment = `#version 300 es
+precision highp float;
+
+// @UNIFORM_VALUES
+
+out vec4 fragColor;
+
+void main() {
+  vec2 uv = gl_FragCoord.xy / iResolution;
+  vec3 col = baseColor * (sin(iTime) * 0.5 + 0.5);
+  fragColor = vec4(col, 1.0);
+}
+`
+
+<ReactShader
+  fragment={fragment}
+  uniforms={{ baseColor: [1.0, 0.5, 0.2] }}
+/>
+```
+
+The marker gets replaced with declarations for both built-in uniforms (`iTime`, `iMouse`, `iMouseNormalized`, `iMouseLeftDown`, `iResolution`) and your custom uniforms:
+
+```glsl
+uniform float iTime;
+uniform vec2 iMouse;
+uniform vec2 iMouseNormalized;
+uniform float iMouseLeftDown;
+uniform vec2 iResolution;
+uniform vec3 baseColor;
+```
 
 ## Frame Callback
 
@@ -112,6 +175,7 @@ The `FrameInfo` object contains:
 - `time` - Total elapsed time in seconds
 - `resolution` - Canvas resolution as `[width, height]`
 - `mouse` - Mouse position as `[x, y]`
+- `mouseLeftDown` - Whether left mouse button is pressed
 
 ## TypeScript
 
@@ -122,6 +186,10 @@ import type {
   Vec2,
   Vec3,
   Vec4,
+  FloatArray,
+  Vec2Array,
+  Vec3Array,
+  Vec4Array,
   UniformValue,
   DefaultUniforms,
   FrameInfo,
@@ -129,6 +197,21 @@ import type {
 } from "@fjandin/react-shader"
 ```
 
+A utility function for generating uniform declarations is also exported:
+
+```tsx
+import { generateUniformDeclarations } from "@fjandin/react-shader"
+
+const declarations = generateUniformDeclarations({
+  scale: 1.0,
+  points: [[0, 0], [1, 1]],
+})
+// Returns:
+// uniform float scale;
+// uniform vec2 points[2];
+// uniform int points_count;
+```
+
 ## Features
 
 - WebGL2 with WebGL1 fallback

package/dist/ReactShader.d.ts

@@ -1,3 +1,3 @@
 import type { ReactShaderProps } from "./types";
-export declare function ReactShader({ className, fragment, vertex, uniforms, fullscreen, timeScale, onFrame, }: ReactShaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function ReactShader({ className, fragment, vertex, uniforms, fullscreen, timeScale, onFrame, onClick, onMouseMove, }: ReactShaderProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ReactShader.d.ts.map

package/dist/ReactShader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ReactShader.d.ts","sourceRoot":"","sources":["../src/ReactShader.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAU/C,wBAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,QAAQ,EACR,MAAuB,EACvB,QAAQ,EACR,UAAkB,EAClB,SAAa,EACb,OAAO,GACR,EAAE,gBAAgB,2CAwElB"}
+{"version":3,"file":"ReactShader.d.ts","sourceRoot":"","sources":["../src/ReactShader.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAU/C,wBAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,QAAQ,EACR,MAAuB,EACvB,QAAQ,EACR,UAAkB,EAClB,SAAa,EACb,OAAO,EACP,OAAO,EACP,WAAW,GACZ,EAAE,gBAAgB,2CA0ElB"}

package/dist/example/frontend.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"frontend.d.ts","sourceRoot":"","sources":["../../src/example/frontend.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,aAAa,CAAA;AAsBpB,wBAAgB,GAAG,4CA6BlB"}
+{"version":3,"file":"frontend.d.ts","sourceRoot":"","sources":["../../src/example/frontend.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,aAAa,CAAA;AAyBpB,wBAAgB,GAAG,4CAwFlB"}

package/dist/example/glsl/cartesian-to-polar.glsl.d.ts

@@ -0,0 +1,2 @@
+export declare const cartesianToPolar = "\n  vec2 cartesianToPolar(vec2 cartesian, float seamAngleDegrees) {\n    float radius = length(cartesian);\n    // Rotate input to move where the seam appears\n    float rot = radians(seamAngleDegrees);\n    vec2 rotated = vec2(\n      cartesian.x * cos(rot) + cartesian.y * sin(rot),\n      -cartesian.x * sin(rot) + cartesian.y * cos(rot)\n    );\n    float angle = atan(rotated.y, rotated.x);\n    // Map angle from [-PI, PI] to [-0.5, 0.5] range\n    return vec2(angle / 6.28318, radius);\n  }\n";
+//# sourceMappingURL=cartesian-to-polar.glsl.d.ts.map

package/dist/example/glsl/cartesian-to-polar.glsl.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cartesian-to-polar.glsl.d.ts","sourceRoot":"","sources":["../../../src/example/glsl/cartesian-to-polar.glsl.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,gBAAgB,wfAa5B,CAAA"}

package/dist/example/lib/logger.d.ts

@@ -0,0 +1,2 @@
+export declare function log(...args: any[]): void;
+//# sourceMappingURL=logger.d.ts.map

package/dist/example/lib/logger.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"logger.d.ts","sourceRoot":"","sources":["../../../src/example/lib/logger.ts"],"names":[],"mappings":"AACA,wBAAgB,GAAG,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,QAejC"}

package/dist/example/shader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"shader.d.ts","sourceRoot":"","sources":["../../src/example/shader.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,QAAQ,QAsFnB,CAAA"}
+{"version":3,"file":"shader.d.ts","sourceRoot":"","sources":["../../src/example/shader.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,QAAQ,QA4FnB,CAAA"}

package/dist/hooks/useWebGL.d.ts

@@ -4,6 +4,8 @@ export interface FrameInfo {
     time: number;
     resolution: [number, number];
     mouse: [number, number];
+    mouseNormalized: [number, number];
+    mouseLeftDown: boolean;
 }
 interface UseWebGLOptions {
     fragment: string;
@@ -11,6 +13,8 @@ interface UseWebGLOptions {
     uniforms?: Record<string, UniformValue>;
     onError?: (error: Error) => void;
     onFrame?: (info: FrameInfo) => void;
+    onClick?: (info: FrameInfo) => void;
+    onMouseMove?: (info: FrameInfo) => void;
     running?: boolean;
     timeScale?: number;
 }

package/dist/hooks/useWebGL.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useWebGL.d.ts","sourceRoot":"","sources":["../../src/hooks/useWebGL.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAI5C,MAAM,WAAW,SAAS;IACxB,SAAS,EAAE,MAAM,CAAA;IACjB,IAAI,EAAE,MAAM,CAAA;IACZ,UAAU,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAC5B,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;CACxB;AAED,UAAU,eAAe;IACvB,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,CAAA;IACvC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;IAChC,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAA;IACnC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAoDD,wBAAgB,QAAQ,CAAC,OAAO,EAAE,eAAe;;;EAiNhD"}
+{"version":3,"file":"useWebGL.d.ts","sourceRoot":"","sources":["../../src/hooks/useWebGL.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAI5C,MAAM,WAAW,SAAS;IACxB,SAAS,EAAE,MAAM,CAAA;IACjB,IAAI,EAAE,MAAM,CAAA;IACZ,UAAU,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAC5B,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IACvB,eAAe,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IACjC,aAAa,EAAE,OAAO,CAAA;CACvB;AAED,UAAU,eAAe;IACvB,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,CAAA;IACvC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;IAChC,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAA;IACnC,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAA;IACnC,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAA;IACvC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAqED,wBAAgB,QAAQ,CAAC,OAAO,EAAE,eAAe;;;EA+PhD"}

package/dist/index.cjs

@@ -29,6 +29,7 @@ var __export = (target, all) => {
 // src/index.ts
 var exports_src = {};
 __export(exports_src, {
+  generateUniformDeclarations: () => generateUniformDeclarations,
   ReactShader: () => ReactShader
 });
 module.exports = __toCommonJS(exports_src);
@@ -84,14 +85,30 @@ function createShaderProgram(gl, vertexSource, fragmentSource) {
 }
 
 // src/utils/uniforms.ts
+var MAX_ARRAY_LENGTH = 100;
 function isVec2(value) {
-  return Array.isArray(value) && value.length === 2;
+  return Array.isArray(value) && value.length === 2 && typeof value[0] === "number";
 }
 function isVec3(value) {
-  return Array.isArray(value) && value.length === 3;
+  return Array.isArray(value) && value.length === 3 && typeof value[0] === "number";
 }
 function isVec4(value) {
-  return Array.isArray(value) && value.length === 4;
+  return Array.isArray(value) && value.length === 4 && typeof value[0] === "number";
+}
+function isFloatArray(value) {
+  return Array.isArray(value) && value.length > 4 && typeof value[0] === "number";
+}
+function isVec2Array(value) {
+  return Array.isArray(value) && value.length > 0 && Array.isArray(value[0]) && value[0].length === 2;
+}
+function isVec3Array(value) {
+  return Array.isArray(value) && value.length > 0 && Array.isArray(value[0]) && value[0].length === 3;
+}
+function isVec4Array(value) {
+  return Array.isArray(value) && value.length > 0 && Array.isArray(value[0]) && value[0].length === 4;
+}
+function isArrayUniform(value) {
+  return isFloatArray(value) || isVec2Array(value) || isVec3Array(value) || isVec4Array(value);
 }
 function setUniform(gl, location, value) {
   if (location === null) {
@@ -99,6 +116,14 @@ function setUniform(gl, location, value) {
   }
   if (typeof value === "number") {
     gl.uniform1f(location, value);
+  } else if (isVec4Array(value)) {
+    gl.uniform4fv(location, value.flat());
+  } else if (isVec3Array(value)) {
+    gl.uniform3fv(location, value.flat());
+  } else if (isVec2Array(value)) {
+    gl.uniform2fv(location, value.flat());
+  } else if (isFloatArray(value)) {
+    gl.uniform1fv(location, value);
   } else if (isVec4(value)) {
     gl.uniform4f(location, value[0], value[1], value[2], value[3]);
   } else if (isVec3(value)) {
@@ -118,19 +143,90 @@ function setUniforms(gl, program, uniforms, locationCache) {
       locationCache.set(name, location);
     }
     setUniform(gl, location, value);
+    if (isArrayUniform(value)) {
+      const countName = `${name}_count`;
+      let countLocation = locationCache.get(countName);
+      if (countLocation === undefined) {
+        countLocation = getUniformLocation(gl, program, countName);
+        locationCache.set(countName, countLocation);
+      }
+      if (countLocation !== null) {
+        gl.uniform1i(countLocation, value.length);
+      }
+    }
   }
 }
 function createUniformLocationCache() {
   return new Map;
 }
+function getUniformType(value) {
+  if (typeof value === "number") {
+    return "float";
+  }
+  if (isVec4Array(value)) {
+    return `vec4[${MAX_ARRAY_LENGTH}]`;
+  }
+  if (isVec3Array(value)) {
+    return `vec3[${MAX_ARRAY_LENGTH}]`;
+  }
+  if (isVec2Array(value)) {
+    return `vec2[${MAX_ARRAY_LENGTH}]`;
+  }
+  if (isFloatArray(value)) {
+    return `float[${MAX_ARRAY_LENGTH}]`;
+  }
+  if (isVec4(value)) {
+    return "vec4";
+  }
+  if (isVec3(value)) {
+    return "vec3";
+  }
+  if (isVec2(value)) {
+    return "vec2";
+  }
+  return "float";
+}
+function generateUniformDeclarations(uniforms) {
+  const lines = [];
+  for (const [name, value] of Object.entries(uniforms)) {
+    const type = getUniformType(value);
+    if (type.includes("[")) {
+      const [baseType, arrayPart] = type.split("[");
+      lines.push(`uniform ${baseType} ${name}[${arrayPart};`);
+      lines.push(`uniform int ${name}_count;`);
+    } else {
+      lines.push(`uniform ${type} ${name};`);
+    }
+  }
+  return lines.join(`
+`);
+}
+var UNIFORM_MARKER = "// @UNIFORM_VALUES";
+function injectUniformDeclarations(shaderSource, customUniforms, defaultUniforms) {
+  if (!shaderSource.includes(UNIFORM_MARKER)) {
+    return shaderSource;
+  }
+  const allUniforms = { ...defaultUniforms, ...customUniforms };
+  const declarations = generateUniformDeclarations(allUniforms);
+  return shaderSource.replace(UNIFORM_MARKER, declarations);
+}
 
 // src/hooks/useWebGL.ts
-function initializeWebGL(canvas, vertexSource, fragmentSource) {
+var DEFAULT_UNIFORM_TYPES = {
+  iTime: 0,
+  iMouse: [0, 0],
+  iMouseNormalized: [0, 0],
+  iMouseLeftDown: 0,
+  iResolution: [0, 0]
+};
+function initializeWebGL(canvas, vertexSource, fragmentSource, customUniforms) {
   const gl = canvas.getContext("webgl2") || canvas.getContext("webgl");
   if (!gl) {
     throw new Error("WebGL not supported");
   }
-  const program = createShaderProgram(gl, vertexSource, fragmentSource);
+  const processedVertex = injectUniformDeclarations(vertexSource, customUniforms, DEFAULT_UNIFORM_TYPES);
+  const processedFragment = injectUniformDeclarations(fragmentSource, customUniforms, DEFAULT_UNIFORM_TYPES);
+  const program = createShaderProgram(gl, processedVertex, processedFragment);
   const positionBuffer = gl.createBuffer();
   if (!positionBuffer) {
     throw new Error("Failed to create position buffer");
@@ -161,18 +257,23 @@ function useWebGL(options) {
   const elapsedTimeRef = import_react.useRef(0);
   const lastFrameTimeRef = import_react.useRef(0);
   const mouseRef = import_react.useRef([0, 0]);
+  const mouseNormalizedRef = import_react.useRef([0, 0]);
   const mouseLeftDownRef = import_react.useRef(false);
   const canvasRectRef = import_react.useRef(null);
   const contextLostRef = import_react.useRef(false);
   const uniformsRef = import_react.useRef(options.uniforms);
   const onErrorRef = import_react.useRef(options.onError);
   const onFrameRef = import_react.useRef(options.onFrame);
+  const onClickRef = import_react.useRef(options.onClick);
+  const onMouseMoveRef = import_react.useRef(options.onMouseMove);
   const timeScaleRef = import_react.useRef(options.timeScale ?? 1);
   const vertexRef = import_react.useRef(options.vertex);
   const fragmentRef = import_react.useRef(options.fragment);
   uniformsRef.current = options.uniforms;
   onErrorRef.current = options.onError;
   onFrameRef.current = options.onFrame;
+  onClickRef.current = options.onClick;
+  onMouseMoveRef.current = options.onMouseMove;
   timeScaleRef.current = options.timeScale ?? 1;
   vertexRef.current = options.vertex;
   fragmentRef.current = options.fragment;
@@ -208,9 +309,15 @@ function useWebGL(options) {
     gl.enableVertexAttribArray(positionAttributeLocation);
     gl.bindBuffer(gl.ARRAY_BUFFER, state.positionBuffer);
     gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);
+    const minDimension = Math.min(canvas.width, canvas.height) || 1;
+    mouseNormalizedRef.current = [
+      (mouseRef.current[0] - canvas.width / 2) / minDimension,
+      (mouseRef.current[1] - canvas.height / 2) / minDimension
+    ];
     const defaultUniforms = {
       iTime: elapsedTime,
       iMouse: mouseRef.current,
+      iMouseNormalized: mouseNormalizedRef.current,
       iMouseLeftDown: mouseLeftDownRef.current ? 1 : 0,
       iResolution: [canvas.width, canvas.height]
     };
@@ -224,7 +331,9 @@ function useWebGL(options) {
         deltaTime,
         time: elapsedTime,
         resolution: [canvas.width, canvas.height],
-        mouse: mouseRef.current
+        mouse: mouseRef.current,
+        mouseNormalized: mouseNormalizedRef.current,
+        mouseLeftDown: mouseLeftDownRef.current
       });
     }
     animationFrameRef.current = requestAnimationFrame(render);
@@ -235,7 +344,7 @@ function useWebGL(options) {
       return;
     const initialize = () => {
       try {
-        stateRef.current = initializeWebGL(canvas, vertexRef.current, fragmentRef.current);
+        stateRef.current = initializeWebGL(canvas, vertexRef.current, fragmentRef.current, uniformsRef.current);
         elapsedTimeRef.current = 0;
         lastFrameTimeRef.current = 0;
         contextLostRef.current = false;
@@ -290,6 +399,19 @@ function useWebGL(options) {
       const x = (event.clientX - rect.left) * dpr;
       const y = (rect.height - (event.clientY - rect.top)) * dpr;
       mouseRef.current = [x, y];
+      const minDimension = Math.min(canvas.width, canvas.height) || 1;
+      mouseNormalizedRef.current = [
+        (mouseRef.current[0] - canvas.width / 2) / minDimension,
+        (mouseRef.current[1] - canvas.height / 2) / minDimension
+      ];
+      onMouseMoveRef.current?.({
+        deltaTime: 0,
+        time: elapsedTimeRef.current,
+        resolution: [canvas.width, canvas.height],
+        mouse: mouseRef.current,
+        mouseNormalized: mouseNormalizedRef.current,
+        mouseLeftDown: mouseLeftDownRef.current
+      });
     };
     const handleMouseDown = (event) => {
       if (event.button === 0) {
@@ -301,15 +423,29 @@ function useWebGL(options) {
         mouseLeftDownRef.current = false;
       }
     };
+    const handleClick = () => {
+      if (!onClickRef.current)
+        return;
+      onClickRef.current({
+        deltaTime: 0,
+        time: elapsedTimeRef.current,
+        resolution: [canvas.width, canvas.height],
+        mouse: mouseRef.current,
+        mouseNormalized: mouseNormalizedRef.current,
+        mouseLeftDown: mouseLeftDownRef.current
+      });
+    };
     window.addEventListener("mousemove", handleMouseMove);
     window.addEventListener("mousedown", handleMouseDown);
     window.addEventListener("mouseup", handleMouseUp);
+    canvas.addEventListener("click", handleClick);
     return () => {
       resizeObserver.disconnect();
       window.removeEventListener("scroll", updateRect);
       window.removeEventListener("mousemove", handleMouseMove);
       window.removeEventListener("mousedown", handleMouseDown);
       window.removeEventListener("mouseup", handleMouseUp);
+      canvas.removeEventListener("click", handleClick);
     };
   }, []);
   return { canvasRef, mouseRef };
@@ -331,7 +467,9 @@ function ReactShader({
   uniforms,
   fullscreen = false,
   timeScale = 1,
-  onFrame
+  onFrame,
+  onClick,
+  onMouseMove
 }) {
   const [error, setError] = import_react2.useState(null);
   const handleError = import_react2.useCallback((err) => {
@@ -352,6 +490,8 @@ function ReactShader({
     uniforms,
     onError: handleError,
     onFrame: handleFrame,
+    onClick,
+    onMouseMove,
     timeScale
   });
   const containerStyle = fullscreen ? {

package/dist/index.d.ts

@@ -1,3 +1,4 @@
 export { ReactShader } from "./ReactShader";
-export type { DefaultUniforms, ReactShaderProps, UniformValue, Vec2, Vec3, Vec4, } from "./types";
+export type { DefaultUniforms, FloatArray, ReactShaderProps, UniformValue, Vec2, Vec2Array, Vec3, Vec3Array, Vec4, Vec4Array, } from "./types";
+export { generateUniformDeclarations } from "./utils/uniforms";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,YAAY,EACV,eAAe,EACf,gBAAgB,EAChB,YAAY,EACZ,IAAI,EACJ,IAAI,EACJ,IAAI,GACL,MAAM,SAAS,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,YAAY,EACV,eAAe,EACf,UAAU,EACV,gBAAgB,EAChB,YAAY,EACZ,IAAI,EACJ,SAAS,EACT,IAAI,EACJ,SAAS,EACT,IAAI,EACJ,SAAS,GACV,MAAM,SAAS,CAAA;AAChB,OAAO,EAAE,2BAA2B,EAAE,MAAM,kBAAkB,CAAA"}

package/dist/index.js

@@ -49,14 +49,30 @@ function createShaderProgram(gl, vertexSource, fragmentSource) {
 }
 
 // src/utils/uniforms.ts
+var MAX_ARRAY_LENGTH = 100;
 function isVec2(value) {
-  return Array.isArray(value) && value.length === 2;
+  return Array.isArray(value) && value.length === 2 && typeof value[0] === "number";
 }
 function isVec3(value) {
-  return Array.isArray(value) && value.length === 3;
+  return Array.isArray(value) && value.length === 3 && typeof value[0] === "number";
 }
 function isVec4(value) {
-  return Array.isArray(value) && value.length === 4;
+  return Array.isArray(value) && value.length === 4 && typeof value[0] === "number";
+}
+function isFloatArray(value) {
+  return Array.isArray(value) && value.length > 4 && typeof value[0] === "number";
+}
+function isVec2Array(value) {
+  return Array.isArray(value) && value.length > 0 && Array.isArray(value[0]) && value[0].length === 2;
+}
+function isVec3Array(value) {
+  return Array.isArray(value) && value.length > 0 && Array.isArray(value[0]) && value[0].length === 3;
+}
+function isVec4Array(value) {
+  return Array.isArray(value) && value.length > 0 && Array.isArray(value[0]) && value[0].length === 4;
+}
+function isArrayUniform(value) {
+  return isFloatArray(value) || isVec2Array(value) || isVec3Array(value) || isVec4Array(value);
 }
 function setUniform(gl, location, value) {
   if (location === null) {
@@ -64,6 +80,14 @@ function setUniform(gl, location, value) {
   }
   if (typeof value === "number") {
     gl.uniform1f(location, value);
+  } else if (isVec4Array(value)) {
+    gl.uniform4fv(location, value.flat());
+  } else if (isVec3Array(value)) {
+    gl.uniform3fv(location, value.flat());
+  } else if (isVec2Array(value)) {
+    gl.uniform2fv(location, value.flat());
+  } else if (isFloatArray(value)) {
+    gl.uniform1fv(location, value);
   } else if (isVec4(value)) {
     gl.uniform4f(location, value[0], value[1], value[2], value[3]);
   } else if (isVec3(value)) {
@@ -83,19 +107,90 @@ function setUniforms(gl, program, uniforms, locationCache) {
       locationCache.set(name, location);
     }
     setUniform(gl, location, value);
+    if (isArrayUniform(value)) {
+      const countName = `${name}_count`;
+      let countLocation = locationCache.get(countName);
+      if (countLocation === undefined) {
+        countLocation = getUniformLocation(gl, program, countName);
+        locationCache.set(countName, countLocation);
+      }
+      if (countLocation !== null) {
+        gl.uniform1i(countLocation, value.length);
+      }
+    }
   }
 }
 function createUniformLocationCache() {
   return new Map;
 }
+function getUniformType(value) {
+  if (typeof value === "number") {
+    return "float";
+  }
+  if (isVec4Array(value)) {
+    return `vec4[${MAX_ARRAY_LENGTH}]`;
+  }
+  if (isVec3Array(value)) {
+    return `vec3[${MAX_ARRAY_LENGTH}]`;
+  }
+  if (isVec2Array(value)) {
+    return `vec2[${MAX_ARRAY_LENGTH}]`;
+  }
+  if (isFloatArray(value)) {
+    return `float[${MAX_ARRAY_LENGTH}]`;
+  }
+  if (isVec4(value)) {
+    return "vec4";
+  }
+  if (isVec3(value)) {
+    return "vec3";
+  }
+  if (isVec2(value)) {
+    return "vec2";
+  }
+  return "float";
+}
+function generateUniformDeclarations(uniforms) {
+  const lines = [];
+  for (const [name, value] of Object.entries(uniforms)) {
+    const type = getUniformType(value);
+    if (type.includes("[")) {
+      const [baseType, arrayPart] = type.split("[");
+      lines.push(`uniform ${baseType} ${name}[${arrayPart};`);
+      lines.push(`uniform int ${name}_count;`);
+    } else {
+      lines.push(`uniform ${type} ${name};`);
+    }
+  }
+  return lines.join(`
+`);
+}
+var UNIFORM_MARKER = "// @UNIFORM_VALUES";
+function injectUniformDeclarations(shaderSource, customUniforms, defaultUniforms) {
+  if (!shaderSource.includes(UNIFORM_MARKER)) {
+    return shaderSource;
+  }
+  const allUniforms = { ...defaultUniforms, ...customUniforms };
+  const declarations = generateUniformDeclarations(allUniforms);
+  return shaderSource.replace(UNIFORM_MARKER, declarations);
+}
 
 // src/hooks/useWebGL.ts
-function initializeWebGL(canvas, vertexSource, fragmentSource) {
+var DEFAULT_UNIFORM_TYPES = {
+  iTime: 0,
+  iMouse: [0, 0],
+  iMouseNormalized: [0, 0],
+  iMouseLeftDown: 0,
+  iResolution: [0, 0]
+};
+function initializeWebGL(canvas, vertexSource, fragmentSource, customUniforms) {
   const gl = canvas.getContext("webgl2") || canvas.getContext("webgl");
   if (!gl) {
     throw new Error("WebGL not supported");
   }
-  const program = createShaderProgram(gl, vertexSource, fragmentSource);
+  const processedVertex = injectUniformDeclarations(vertexSource, customUniforms, DEFAULT_UNIFORM_TYPES);
+  const processedFragment = injectUniformDeclarations(fragmentSource, customUniforms, DEFAULT_UNIFORM_TYPES);
+  const program = createShaderProgram(gl, processedVertex, processedFragment);
   const positionBuffer = gl.createBuffer();
   if (!positionBuffer) {
     throw new Error("Failed to create position buffer");
@@ -126,18 +221,23 @@ function useWebGL(options) {
   const elapsedTimeRef = useRef(0);
   const lastFrameTimeRef = useRef(0);
   const mouseRef = useRef([0, 0]);
+  const mouseNormalizedRef = useRef([0, 0]);
   const mouseLeftDownRef = useRef(false);
   const canvasRectRef = useRef(null);
   const contextLostRef = useRef(false);
   const uniformsRef = useRef(options.uniforms);
   const onErrorRef = useRef(options.onError);
   const onFrameRef = useRef(options.onFrame);
+  const onClickRef = useRef(options.onClick);
+  const onMouseMoveRef = useRef(options.onMouseMove);
   const timeScaleRef = useRef(options.timeScale ?? 1);
   const vertexRef = useRef(options.vertex);
   const fragmentRef = useRef(options.fragment);
   uniformsRef.current = options.uniforms;
   onErrorRef.current = options.onError;
   onFrameRef.current = options.onFrame;
+  onClickRef.current = options.onClick;
+  onMouseMoveRef.current = options.onMouseMove;
   timeScaleRef.current = options.timeScale ?? 1;
   vertexRef.current = options.vertex;
   fragmentRef.current = options.fragment;
@@ -173,9 +273,15 @@ function useWebGL(options) {
     gl.enableVertexAttribArray(positionAttributeLocation);
     gl.bindBuffer(gl.ARRAY_BUFFER, state.positionBuffer);
     gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);
+    const minDimension = Math.min(canvas.width, canvas.height) || 1;
+    mouseNormalizedRef.current = [
+      (mouseRef.current[0] - canvas.width / 2) / minDimension,
+      (mouseRef.current[1] - canvas.height / 2) / minDimension
+    ];
     const defaultUniforms = {
       iTime: elapsedTime,
       iMouse: mouseRef.current,
+      iMouseNormalized: mouseNormalizedRef.current,
       iMouseLeftDown: mouseLeftDownRef.current ? 1 : 0,
       iResolution: [canvas.width, canvas.height]
     };
@@ -189,7 +295,9 @@ function useWebGL(options) {
         deltaTime,
         time: elapsedTime,
         resolution: [canvas.width, canvas.height],
-        mouse: mouseRef.current
+        mouse: mouseRef.current,
+        mouseNormalized: mouseNormalizedRef.current,
+        mouseLeftDown: mouseLeftDownRef.current
       });
     }
     animationFrameRef.current = requestAnimationFrame(render);
@@ -200,7 +308,7 @@ function useWebGL(options) {
       return;
     const initialize = () => {
       try {
-        stateRef.current = initializeWebGL(canvas, vertexRef.current, fragmentRef.current);
+        stateRef.current = initializeWebGL(canvas, vertexRef.current, fragmentRef.current, uniformsRef.current);
         elapsedTimeRef.current = 0;
         lastFrameTimeRef.current = 0;
         contextLostRef.current = false;
@@ -255,6 +363,19 @@ function useWebGL(options) {
       const x = (event.clientX - rect.left) * dpr;
       const y = (rect.height - (event.clientY - rect.top)) * dpr;
       mouseRef.current = [x, y];
+      const minDimension = Math.min(canvas.width, canvas.height) || 1;
+      mouseNormalizedRef.current = [
+        (mouseRef.current[0] - canvas.width / 2) / minDimension,
+        (mouseRef.current[1] - canvas.height / 2) / minDimension
+      ];
+      onMouseMoveRef.current?.({
+        deltaTime: 0,
+        time: elapsedTimeRef.current,
+        resolution: [canvas.width, canvas.height],
+        mouse: mouseRef.current,
+        mouseNormalized: mouseNormalizedRef.current,
+        mouseLeftDown: mouseLeftDownRef.current
+      });
     };
     const handleMouseDown = (event) => {
       if (event.button === 0) {
@@ -266,15 +387,29 @@ function useWebGL(options) {
         mouseLeftDownRef.current = false;
       }
     };
+    const handleClick = () => {
+      if (!onClickRef.current)
+        return;
+      onClickRef.current({
+        deltaTime: 0,
+        time: elapsedTimeRef.current,
+        resolution: [canvas.width, canvas.height],
+        mouse: mouseRef.current,
+        mouseNormalized: mouseNormalizedRef.current,
+        mouseLeftDown: mouseLeftDownRef.current
+      });
+    };
     window.addEventListener("mousemove", handleMouseMove);
     window.addEventListener("mousedown", handleMouseDown);
     window.addEventListener("mouseup", handleMouseUp);
+    canvas.addEventListener("click", handleClick);
     return () => {
       resizeObserver.disconnect();
       window.removeEventListener("scroll", updateRect);
       window.removeEventListener("mousemove", handleMouseMove);
       window.removeEventListener("mousedown", handleMouseDown);
       window.removeEventListener("mouseup", handleMouseUp);
+      canvas.removeEventListener("click", handleClick);
     };
   }, []);
   return { canvasRef, mouseRef };
@@ -296,7 +431,9 @@ function ReactShader({
   uniforms,
   fullscreen = false,
   timeScale = 1,
-  onFrame
+  onFrame,
+  onClick,
+  onMouseMove
 }) {
   const [error, setError] = useState(null);
   const handleError = useCallback2((err) => {
@@ -317,6 +454,8 @@ function ReactShader({
     uniforms,
     onError: handleError,
     onFrame: handleFrame,
+    onClick,
+    onMouseMove,
     timeScale
   });
   const containerStyle = fullscreen ? {
@@ -362,5 +501,6 @@ function ReactShader({
   }, undefined, false, undefined, this);
 }
 export {
+  generateUniformDeclarations,
   ReactShader
 };

package/dist/types.d.ts

@@ -2,7 +2,11 @@ import type { FrameInfo } from "./hooks/useWebGL";
 export type Vec2 = [number, number];
 export type Vec3 = [number, number, number];
 export type Vec4 = [number, number, number, number];
-export type UniformValue = number | Vec2 | Vec3 | Vec4;
+export type FloatArray = number[];
+export type Vec2Array = Vec2[];
+export type Vec3Array = Vec3[];
+export type Vec4Array = Vec4[];
+export type UniformValue = number | Vec2 | Vec3 | Vec4 | FloatArray | Vec2Array | Vec3Array | Vec4Array;
 export interface ReactShaderProps {
     className?: string;
     fragment: string;
@@ -11,10 +15,13 @@ export interface ReactShaderProps {
     fullscreen?: boolean;
     timeScale?: number;
     onFrame?: (info: FrameInfo) => void;
+    onClick?: (info: FrameInfo) => void;
+    onMouseMove?: (info: FrameInfo) => void;
 }
 export interface DefaultUniforms {
     iTime: number;
     iMouse: Vec2;
+    iMouseNormalized: Vec2;
     iMouseLeftDown: number;
     iResolution: Vec2;
 }

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAEjD,MAAM,MAAM,IAAI,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;AACnC,MAAM,MAAM,IAAI,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAA;AAC3C,MAAM,MAAM,IAAI,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAA;AAEnD,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAEtD,MAAM,WAAW,gBAAgB;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,CAAA;IACvC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAA;CACpC;AAED,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,IAAI,CAAA;IACZ,cAAc,EAAE,MAAM,CAAA;IACtB,WAAW,EAAE,IAAI,CAAA;CAClB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAEjD,MAAM,MAAM,IAAI,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;AACnC,MAAM,MAAM,IAAI,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAA;AAC3C,MAAM,MAAM,IAAI,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAA;AAEnD,MAAM,MAAM,UAAU,GAAG,MAAM,EAAE,CAAA;AACjC,MAAM,MAAM,SAAS,GAAG,IAAI,EAAE,CAAA;AAC9B,MAAM,MAAM,SAAS,GAAG,IAAI,EAAE,CAAA;AAC9B,MAAM,MAAM,SAAS,GAAG,IAAI,EAAE,CAAA;AAE9B,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,UAAU,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAAA;AAEvG,MAAM,WAAW,gBAAgB;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,CAAA;IACvC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAA;IACnC,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAA;IACnC,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAA;CACxC;AAED,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,IAAI,CAAA;IACZ,gBAAgB,EAAE,IAAI,CAAA;IACtB,cAAc,EAAE,MAAM,CAAA;IACtB,WAAW,EAAE,IAAI,CAAA;CAClB"}

package/dist/utils/uniforms.d.ts

@@ -1,8 +1,11 @@
 import type { UniformValue } from "../types";
 type WebGLContext = WebGLRenderingContext | WebGL2RenderingContext;
+export declare const MAX_ARRAY_LENGTH = 100;
 export declare function setUniform(gl: WebGLContext, location: WebGLUniformLocation | null, value: UniformValue): void;
 export declare function getUniformLocation(gl: WebGLContext, program: WebGLProgram, name: string): WebGLUniformLocation | null;
 export declare function setUniforms(gl: WebGLContext, program: WebGLProgram, uniforms: Record<string, UniformValue>, locationCache: Map<string, WebGLUniformLocation | null>): void;
 export declare function createUniformLocationCache(): Map<string, WebGLUniformLocation | null>;
+export declare function generateUniformDeclarations(uniforms: Record<string, UniformValue>): string;
+export declare function injectUniformDeclarations(shaderSource: string, customUniforms: Record<string, UniformValue> | undefined, defaultUniforms: Record<string, UniformValue>): string;
 export {};
 //# sourceMappingURL=uniforms.d.ts.map

package/dist/utils/uniforms.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"uniforms.d.ts","sourceRoot":"","sources":["../../src/utils/uniforms.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAoB,MAAM,UAAU,CAAA;AAE9D,KAAK,YAAY,GAAG,qBAAqB,GAAG,sBAAsB,CAAA;AAclE,wBAAgB,UAAU,CAAC,EAAE,EAAE,YAAY,EAAE,QAAQ,EAAE,oBAAoB,GAAG,IAAI,EAAE,KAAK,EAAE,YAAY,GAAG,IAAI,CAc7G;AAED,wBAAgB,kBAAkB,CAAC,EAAE,EAAE,YAAY,EAAE,OAAO,EAAE,YAAY,EAAE,IAAI,EAAE,MAAM,GAAG,oBAAoB,GAAG,IAAI,CAErH;AAED,wBAAgB,WAAW,CACzB,EAAE,EAAE,YAAY,EAChB,OAAO,EAAE,YAAY,EACrB,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,EACtC,aAAa,EAAE,GAAG,CAAC,MAAM,EAAE,oBAAoB,GAAG,IAAI,CAAC,GACtD,IAAI,CASN;AAED,wBAAgB,0BAA0B,IAAI,GAAG,CAAC,MAAM,EAAE,oBAAoB,GAAG,IAAI,CAAC,CAErF"}
+{"version":3,"file":"uniforms.d.ts","sourceRoot":"","sources":["../../src/utils/uniforms.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAc,YAAY,EAAqD,MAAM,UAAU,CAAA;AAE3G,KAAK,YAAY,GAAG,qBAAqB,GAAG,sBAAsB,CAAA;AAElE,eAAO,MAAM,gBAAgB,MAAM,CAAA;AAkCnC,wBAAgB,UAAU,CAAC,EAAE,EAAE,YAAY,EAAE,QAAQ,EAAE,oBAAoB,GAAG,IAAI,EAAE,KAAK,EAAE,YAAY,GAAG,IAAI,CAsB7G;AAED,wBAAgB,kBAAkB,CAAC,EAAE,EAAE,YAAY,EAAE,OAAO,EAAE,YAAY,EAAE,IAAI,EAAE,MAAM,GAAG,oBAAoB,GAAG,IAAI,CAErH;AAED,wBAAgB,WAAW,CACzB,EAAE,EAAE,YAAY,EAChB,OAAO,EAAE,YAAY,EACrB,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,EACtC,aAAa,EAAE,GAAG,CAAC,MAAM,EAAE,oBAAoB,GAAG,IAAI,CAAC,GACtD,IAAI,CAsBN;AAED,wBAAgB,0BAA0B,IAAI,GAAG,CAAC,MAAM,EAAE,oBAAoB,GAAG,IAAI,CAAC,CAErF;AA8BD,wBAAgB,2BAA2B,CAAC,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,GAAG,MAAM,CAa1F;AAID,wBAAgB,yBAAyB,CACvC,YAAY,EAAE,MAAM,EACpB,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,GAAG,SAAS,EACxD,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,GAC5C,MAAM,CAQR"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fjandin/react-shader",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "React component for rendering WebGL shaders",
   "type": "module",
   "main": "./dist/index.cjs",