@fjandin/react-shader 0.0.9 → 0.0.10

package/README.md

@@ -48,8 +48,7 @@ function App() {
 | `fragment` | `string` | Yes | - | GLSL fragment shader source code |
 | `vertex` | `string` | No | Default quad shader | GLSL vertex shader source code |
 | `uniforms` | `Record<string, UniformValue>` | No | `{}` | Custom uniform values |
-| `className` | `string` | No | - | CSS class name for the container |
-| `debug` | `boolean` | No | `false` | Show debug overlay with resolution and mouse info |
+| `className` | `string` | No | - | CSS class name for the canvas |
 | `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 |
@@ -175,6 +174,7 @@ The `FrameInfo` object contains:
 - `time` - Total elapsed time in seconds
 - `resolution` - Canvas resolution as `[width, height]`
 - `mouse` - Mouse position as `[x, y]`
+- `mouseNormalized` - Aspect-corrected mouse position as `[x, y]`
 - `mouseLeftDown` - Whether left mouse button is pressed
 
 ## TypeScript
@@ -215,11 +215,12 @@ const declarations = generateUniformDeclarations({
 ## Features
 
 - WebGL2 with WebGL1 fallback
-- High-DPI display support via `devicePixelRatio`
+- High-DPI display support with automatic DPR change detection
 - Automatic canvas resizing
 - Shader compilation error display
 - Context loss/restoration handling
 - Mouse tracking with WebGL coordinate convention
+- Optimized render loop with minimal per-frame allocations
 
 ## Requirements
 

package/dist/ReactShader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ReactShader.d.ts","sourceRoot":"","sources":["../src/ReactShader.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAa,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAU1D,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"}
+{"version":3,"file":"ReactShader.d.ts","sourceRoot":"","sources":["../src/ReactShader.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAgC/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,2CAuDlB"}

package/dist/hooks/useWebGL.d.ts

@@ -7,7 +7,6 @@ interface UseWebGLOptions {
     onFrame?: (info: FrameInfo) => void;
     onClick?: (info: FrameInfo) => void;
     onMouseMove?: (info: FrameInfo) => void;
-    running?: boolean;
     timeScale?: number;
 }
 export declare function useWebGL(options: UseWebGLOptions): {

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,SAAS,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAIvD,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"}
+{"version":3,"file":"useWebGL.d.ts","sourceRoot":"","sources":["../../src/hooks/useWebGL.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAIvD,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,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAqED,wBAAgB,QAAQ,CAAC,OAAO,EAAE,eAAe;;;EAmQhD"}

package/dist/index.cjs

@@ -273,6 +273,14 @@ function useWebGL(options) {
   const timeScaleRef = import_react.useRef(options.timeScale ?? 1);
   const vertexRef = import_react.useRef(options.vertex);
   const fragmentRef = import_react.useRef(options.fragment);
+  const dprRef = import_react.useRef(window.devicePixelRatio || 1);
+  const defaultUniformsRef = import_react.useRef({
+    iTime: 0,
+    iMouse: [0, 0],
+    iMouseNormalized: [0, 0],
+    iMouseLeftDown: 0,
+    iResolution: [0, 0]
+  });
   uniformsRef.current = options.uniforms;
   onErrorRef.current = options.onError;
   onFrameRef.current = options.onFrame;
@@ -290,10 +298,9 @@ function useWebGL(options) {
       return;
     const deltaTime = lastFrameTimeRef.current === 0 ? 0 : (time - lastFrameTimeRef.current) / 1000;
     lastFrameTimeRef.current = time;
-    elapsedTimeRef.current += deltaTime * timeScaleRef.current;
     const { gl, program, positionAttributeLocation, uniformLocationCache } = state;
     const elapsedTime = elapsedTimeRef.current;
-    const dpr = window.devicePixelRatio || 1;
+    const dpr = dprRef.current;
     const displayWidth = canvas.clientWidth;
     const displayHeight = canvas.clientHeight;
     if (displayWidth === 0 || displayHeight === 0) {
@@ -313,22 +320,13 @@ 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]
-    };
-    setUniforms(gl, program, defaultUniforms, uniformLocationCache);
-    if (uniformsRef.current) {
-      setUniforms(gl, program, uniformsRef.current, uniformLocationCache);
-    }
+    const defaultUniforms = defaultUniformsRef.current;
+    defaultUniforms.iTime = elapsedTime;
+    defaultUniforms.iMouse = mouseRef.current;
+    defaultUniforms.iMouseNormalized = mouseNormalizedRef.current;
+    defaultUniforms.iMouseLeftDown = mouseLeftDownRef.current ? 1 : 0;
+    defaultUniforms.iResolution = [canvas.width, canvas.height];
+    setUniforms(gl, program, { ...defaultUniforms, ...uniformsRef.current }, uniformLocationCache);
     gl.drawArrays(gl.TRIANGLES, 0, 6);
     if (onFrameRef.current) {
       onFrameRef.current({
@@ -371,10 +369,16 @@ function useWebGL(options) {
     const handleContextRestored = () => {
       initialize();
     };
+    const dprMediaQuery = window.matchMedia(`(resolution: ${dprRef.current}dppx)`);
+    const handleDprChange = () => {
+      dprRef.current = window.devicePixelRatio || 1;
+    };
+    dprMediaQuery.addEventListener("change", handleDprChange);
     canvas.addEventListener("webglcontextlost", handleContextLost);
     canvas.addEventListener("webglcontextrestored", handleContextRestored);
     initialize();
     return () => {
+      dprMediaQuery.removeEventListener("change", handleDprChange);
       canvas.removeEventListener("webglcontextlost", handleContextLost);
       canvas.removeEventListener("webglcontextrestored", handleContextRestored);
       cancelAnimationFrame(animationFrameRef.current);
@@ -399,7 +403,7 @@ function useWebGL(options) {
       const rect = canvasRectRef.current;
       if (!rect)
         return;
-      const dpr = window.devicePixelRatio || 1;
+      const dpr = dprRef.current;
       const x = (event.clientX - rect.left) * dpr;
       const y = (rect.height - (event.clientY - rect.top)) * dpr;
       mouseRef.current = [x, y];
@@ -464,6 +468,24 @@ void main() {
   gl_Position = vec4(a_position, 0.0, 1.0);
 }
 `;
+var FULLSCREEN_CONTAINER_STYLE = {
+  position: "fixed",
+  top: 0,
+  left: 0,
+  width: "100vw",
+  height: "100vh",
+  zIndex: 9000
+};
+var DEFAULT_CONTAINER_STYLE = {
+  position: "relative",
+  width: "100%",
+  height: "100%"
+};
+var CANVAS_STYLE = {
+  display: "block",
+  width: "100%",
+  height: "100%"
+};
 function ReactShader({
   className,
   fragment,
@@ -480,11 +502,6 @@ function ReactShader({
     setError(err.message);
     console.error("ReactShader error:", err);
   }, []);
-  const handleFrame = import_react2.useCallback((info) => {
-    if (onFrame) {
-      onFrame(info);
-    }
-  }, [onFrame]);
   import_react2.useEffect(() => {
     setError(null);
   }, [fragment, vertex]);
@@ -493,23 +510,12 @@ function ReactShader({
     vertex,
     uniforms,
     onError: handleError,
-    onFrame: handleFrame,
+    onFrame,
     onClick,
     onMouseMove,
     timeScale
   });
-  const containerStyle = fullscreen ? {
-    position: "fixed",
-    top: 0,
-    left: 0,
-    width: "100vw",
-    height: "100vh",
-    zIndex: 9000
-  } : {
-    position: "relative",
-    width: "100%",
-    height: "100%"
-  };
+  const containerStyle = import_react2.useMemo(() => fullscreen ? FULLSCREEN_CONTAINER_STYLE : DEFAULT_CONTAINER_STYLE, [fullscreen]);
   if (error) {
     return /* @__PURE__ */ jsx_dev_runtime.jsxDEV("div", {
       className,
@@ -537,7 +543,7 @@ function ReactShader({
   return /* @__PURE__ */ jsx_dev_runtime.jsxDEV("canvas", {
     ref: canvasRef,
     className,
-    style: { display: "block", width: "100%", height: "100%" }
+    style: CANVAS_STYLE
   }, undefined, false, undefined, this);
 }
 // src/shaders/color-palette.ts

package/dist/index.js

@@ -1,5 +1,5 @@
 // src/ReactShader.tsx
-import { useCallback as useCallback2, useEffect as useEffect2, useState } from "react";
+import { useCallback as useCallback2, useEffect as useEffect2, useMemo, useState } from "react";
 
 // src/hooks/useWebGL.ts
 import { useCallback, useEffect, useRef } from "react";
@@ -233,6 +233,14 @@ function useWebGL(options) {
   const timeScaleRef = useRef(options.timeScale ?? 1);
   const vertexRef = useRef(options.vertex);
   const fragmentRef = useRef(options.fragment);
+  const dprRef = useRef(window.devicePixelRatio || 1);
+  const defaultUniformsRef = useRef({
+    iTime: 0,
+    iMouse: [0, 0],
+    iMouseNormalized: [0, 0],
+    iMouseLeftDown: 0,
+    iResolution: [0, 0]
+  });
   uniformsRef.current = options.uniforms;
   onErrorRef.current = options.onError;
   onFrameRef.current = options.onFrame;
@@ -250,10 +258,9 @@ function useWebGL(options) {
       return;
     const deltaTime = lastFrameTimeRef.current === 0 ? 0 : (time - lastFrameTimeRef.current) / 1000;
     lastFrameTimeRef.current = time;
-    elapsedTimeRef.current += deltaTime * timeScaleRef.current;
     const { gl, program, positionAttributeLocation, uniformLocationCache } = state;
     const elapsedTime = elapsedTimeRef.current;
-    const dpr = window.devicePixelRatio || 1;
+    const dpr = dprRef.current;
     const displayWidth = canvas.clientWidth;
     const displayHeight = canvas.clientHeight;
     if (displayWidth === 0 || displayHeight === 0) {
@@ -273,22 +280,13 @@ 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]
-    };
-    setUniforms(gl, program, defaultUniforms, uniformLocationCache);
-    if (uniformsRef.current) {
-      setUniforms(gl, program, uniformsRef.current, uniformLocationCache);
-    }
+    const defaultUniforms = defaultUniformsRef.current;
+    defaultUniforms.iTime = elapsedTime;
+    defaultUniforms.iMouse = mouseRef.current;
+    defaultUniforms.iMouseNormalized = mouseNormalizedRef.current;
+    defaultUniforms.iMouseLeftDown = mouseLeftDownRef.current ? 1 : 0;
+    defaultUniforms.iResolution = [canvas.width, canvas.height];
+    setUniforms(gl, program, { ...defaultUniforms, ...uniformsRef.current }, uniformLocationCache);
     gl.drawArrays(gl.TRIANGLES, 0, 6);
     if (onFrameRef.current) {
       onFrameRef.current({
@@ -331,10 +329,16 @@ function useWebGL(options) {
     const handleContextRestored = () => {
       initialize();
     };
+    const dprMediaQuery = window.matchMedia(`(resolution: ${dprRef.current}dppx)`);
+    const handleDprChange = () => {
+      dprRef.current = window.devicePixelRatio || 1;
+    };
+    dprMediaQuery.addEventListener("change", handleDprChange);
     canvas.addEventListener("webglcontextlost", handleContextLost);
     canvas.addEventListener("webglcontextrestored", handleContextRestored);
     initialize();
     return () => {
+      dprMediaQuery.removeEventListener("change", handleDprChange);
       canvas.removeEventListener("webglcontextlost", handleContextLost);
       canvas.removeEventListener("webglcontextrestored", handleContextRestored);
       cancelAnimationFrame(animationFrameRef.current);
@@ -359,7 +363,7 @@ function useWebGL(options) {
       const rect = canvasRectRef.current;
       if (!rect)
         return;
-      const dpr = window.devicePixelRatio || 1;
+      const dpr = dprRef.current;
       const x = (event.clientX - rect.left) * dpr;
       const y = (rect.height - (event.clientY - rect.top)) * dpr;
       mouseRef.current = [x, y];
@@ -424,6 +428,24 @@ void main() {
   gl_Position = vec4(a_position, 0.0, 1.0);
 }
 `;
+var FULLSCREEN_CONTAINER_STYLE = {
+  position: "fixed",
+  top: 0,
+  left: 0,
+  width: "100vw",
+  height: "100vh",
+  zIndex: 9000
+};
+var DEFAULT_CONTAINER_STYLE = {
+  position: "relative",
+  width: "100%",
+  height: "100%"
+};
+var CANVAS_STYLE = {
+  display: "block",
+  width: "100%",
+  height: "100%"
+};
 function ReactShader({
   className,
   fragment,
@@ -440,11 +462,6 @@ function ReactShader({
     setError(err.message);
     console.error("ReactShader error:", err);
   }, []);
-  const handleFrame = useCallback2((info) => {
-    if (onFrame) {
-      onFrame(info);
-    }
-  }, [onFrame]);
   useEffect2(() => {
     setError(null);
   }, [fragment, vertex]);
@@ -453,23 +470,12 @@ function ReactShader({
     vertex,
     uniforms,
     onError: handleError,
-    onFrame: handleFrame,
+    onFrame,
     onClick,
     onMouseMove,
     timeScale
   });
-  const containerStyle = fullscreen ? {
-    position: "fixed",
-    top: 0,
-    left: 0,
-    width: "100vw",
-    height: "100vh",
-    zIndex: 9000
-  } : {
-    position: "relative",
-    width: "100%",
-    height: "100%"
-  };
+  const containerStyle = useMemo(() => fullscreen ? FULLSCREEN_CONTAINER_STYLE : DEFAULT_CONTAINER_STYLE, [fullscreen]);
   if (error) {
     return /* @__PURE__ */ jsxDEV("div", {
       className,
@@ -497,7 +503,7 @@ function ReactShader({
   return /* @__PURE__ */ jsxDEV("canvas", {
     ref: canvasRef,
     className,
-    style: { display: "block", width: "100%", height: "100%" }
+    style: CANVAS_STYLE
   }, undefined, false, undefined, this);
 }
 // src/shaders/color-palette.ts

package/package.json

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