@fjandin/react-shader 0.0.17 → 0.0.18

package/dist/ReactGpuShader.d.ts

@@ -1,11 +1,18 @@
-import type { Vec2, Vec3, Vec4, Vec4Array } from "./types";
+import type { FrameInfo, Vec2, Vec3, Vec4, Vec4Array } from "./types";
 type GpuUniformValue = number | Vec2 | Vec3 | Vec4 | Vec4Array;
 export interface ReactGpuShaderProps {
     className?: string;
     fragment: string;
     uniforms?: Record<string, GpuUniformValue>;
     fullscreen?: boolean;
+    timeScale?: number;
+    onFrame?: (info: FrameInfo) => void;
+    onClick?: (info: FrameInfo) => void;
+    onMouseMove?: (info: FrameInfo) => void;
+    onMouseDown?: (info: FrameInfo) => void;
+    onMouseUp?: (info: FrameInfo) => void;
+    onMouseWheel?: (info: FrameInfo, wheelDelta: number) => void;
 }
-export declare function ReactGpuShader({ className, fragment, uniforms, fullscreen }: ReactGpuShaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function ReactGpuShader({ className, fragment, uniforms, fullscreen, timeScale, onFrame, onClick, onMouseMove, onMouseDown, onMouseUp, onMouseWheel, }: ReactGpuShaderProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=ReactGpuShader.d.ts.map

package/dist/ReactGpuShader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ReactGpuShader.d.ts","sourceRoot":"","sources":["../src/ReactGpuShader.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAG1D,KAAK,eAAe,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,CAAA;AAE9D,MAAM,WAAW,mBAAmB;IAClC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,MAAM,CAAA;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,CAAA;IAC1C,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB;AAuBD,wBAAgB,cAAc,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAkB,EAAE,EAAE,mBAAmB,2CAkDxG"}
+{"version":3,"file":"ReactGpuShader.d.ts","sourceRoot":"","sources":["../src/ReactGpuShader.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAGrE,KAAK,eAAe,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,CAAA;AAE9D,MAAM,WAAW,mBAAmB;IAClC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,MAAM,CAAA;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,CAAA;IAC1C,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;IACvC,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAA;IACvC,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAA;IACrC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,KAAK,IAAI,CAAA;CAC7D;AAuBD,wBAAgB,cAAc,CAAC,EAC7B,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,UAAkB,EAClB,SAAS,EACT,OAAO,EACP,OAAO,EACP,WAAW,EACX,WAAW,EACX,SAAS,EACT,YAAY,GACb,EAAE,mBAAmB,2CAyDrB"}

package/dist/example/examples/mandelbrot.d.ts

@@ -0,0 +1,2 @@
+export declare function WebGpuMandelbrotDemo(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=mandelbrot.d.ts.map

package/dist/example/examples/mandelbrot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mandelbrot.d.ts","sourceRoot":"","sources":["../../../src/example/examples/mandelbrot.tsx"],"names":[],"mappings":"AA8BA,wBAAgB,oBAAoB,4CAiFnC"}

package/dist/example/examples/mandelbrot2.d.ts

@@ -0,0 +1,2 @@
+export declare function WebGpuMandelbrotDemo2(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=mandelbrot2.d.ts.map

package/dist/example/examples/mandelbrot2.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mandelbrot2.d.ts","sourceRoot":"","sources":["../../../src/example/examples/mandelbrot2.tsx"],"names":[],"mappings":"AA4HA,wBAAgB,qBAAqB,4CAiGpC"}

package/dist/example/examples/webgpu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"webgpu.d.ts","sourceRoot":"","sources":["../../../src/example/examples/webgpu.tsx"],"names":[],"mappings":"AA4CA,wBAAgB,UAAU,4CA8BzB"}
+{"version":3,"file":"webgpu.d.ts","sourceRoot":"","sources":["../../../src/example/examples/webgpu.tsx"],"names":[],"mappings":"AAmDA,wBAAgB,UAAU,4CAgHzB"}

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;AAwBpB,wBAAgB,GAAG,4CAyBlB"}
+{"version":3,"file":"frontend.d.ts","sourceRoot":"","sources":["../../src/example/frontend.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,aAAa,CAAA;AA0BpB,wBAAgB,GAAG,4CAyClB"}

package/dist/hooks/useWebGPU.d.ts

@@ -1,9 +1,16 @@
-import type { Vec2, Vec3, Vec4, Vec4Array } from "../types";
+import type { FrameInfo, Vec2, Vec3, Vec4, Vec4Array } from "../types";
 type GpuUniformValue = number | Vec2 | Vec3 | Vec4 | Vec4Array;
 interface UseWebGPUOptions {
     fragment: string;
     uniforms?: Record<string, GpuUniformValue>;
     onError?: (error: Error) => void;
+    timeScale?: number;
+    onFrame?: (info: FrameInfo) => void;
+    onClick?: (info: FrameInfo) => void;
+    onMouseMove?: (info: FrameInfo) => void;
+    onMouseDown?: (info: FrameInfo) => void;
+    onMouseUp?: (info: FrameInfo) => void;
+    onMouseWheel?: (info: FrameInfo, wheelDelta: number) => void;
 }
 export declare function useWebGPU(options: UseWebGPUOptions): {
     canvasRef: import("react").RefObject<HTMLCanvasElement>;

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

@@ -1 +1 @@
-{"version":3,"file":"useWebGPU.d.ts","sourceRoot":"","sources":["../../src/hooks/useWebGPU.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAG3D,KAAK,eAAe,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,CAAA;AAE9D,UAAU,gBAAgB;IACxB,QAAQ,EAAE,MAAM,CAAA;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,CAAA;IAC1C,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;CACjC;AA+WD,wBAAgB,SAAS,CAAC,OAAO,EAAE,gBAAgB;;;EA0NlD"}
+{"version":3,"file":"useWebGPU.d.ts","sourceRoot":"","sources":["../../src/hooks/useWebGPU.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAGtE,KAAK,eAAe,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,CAAA;AAE9D,UAAU,gBAAgB;IACxB,QAAQ,EAAE,MAAM,CAAA;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,CAAA;IAC1C,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;IAChC,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;IACvC,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAA;IACvC,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAA;IACrC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,KAAK,IAAI,CAAA;CAC7D;AA+WD,wBAAgB,SAAS,CAAC,OAAO,EAAE,gBAAgB;;;EA8QlD"}

package/dist/index.cjs

@@ -275,10 +275,10 @@ function inferWgslType(value) {
   }
   if (isVec4Array(value)) {
     return {
-      wgslType: `array<vec4f, ${value.length}>`,
+      wgslType: `array<vec4f, 100>`,
       baseType: "vec4f",
       isArray: true,
-      arrayLength: value.length
+      arrayLength: 100
     };
   }
   if (isVec4(value)) {
@@ -537,12 +537,37 @@ function useWebGPU(options) {
   const mouseLeftDownRef = import_react2.useRef(false);
   const canvasRectRef = import_react2.useRef(null);
   const onErrorRef = import_react2.useRef(options.onError);
+  const onFrameRef = import_react2.useRef(options.onFrame);
+  const onClickRef = import_react2.useRef(options.onClick);
+  const onMouseDownRef = import_react2.useRef(options.onMouseDown);
+  const onMouseUpRef = import_react2.useRef(options.onMouseUp);
+  const onMouseMoveRef = import_react2.useRef(options.onMouseMove);
+  const onMouseWheelRef = import_react2.useRef(options.onMouseWheel);
+  const timeScaleRef = import_react2.useRef(options.timeScale ?? 1);
   const fragmentRef = import_react2.useRef(options.fragment);
   const uniformsRef = import_react2.useRef(options.uniforms);
   const dprRef = import_react2.useRef(window.devicePixelRatio || 1);
   onErrorRef.current = options.onError;
+  onFrameRef.current = options.onFrame;
+  onClickRef.current = options.onClick;
+  onMouseDownRef.current = options.onMouseDown;
+  onMouseUpRef.current = options.onMouseUp;
+  onMouseMoveRef.current = options.onMouseMove;
+  onMouseWheelRef.current = options.onMouseWheel;
+  timeScaleRef.current = options.timeScale ?? 1;
   fragmentRef.current = options.fragment;
   uniformsRef.current = options.uniforms;
+  const buildFrameInfo = import_react2.useCallback((deltaTime) => {
+    const canvas = canvasRef.current;
+    return {
+      deltaTime,
+      time: elapsedTimeRef.current,
+      resolution: [canvas?.width ?? 0, canvas?.height ?? 0],
+      mouse: mouseRef.current,
+      mouseNormalized: mouseNormalizedRef.current,
+      mouseLeftDown: mouseLeftDownRef.current
+    };
+  }, []);
   const render = import_react2.useCallback((time) => {
     const state = stateRef.current;
     const canvas = canvasRef.current;
@@ -551,7 +576,10 @@ function useWebGPU(options) {
     }
     const deltaTime = lastFrameTimeRef.current === 0 ? 0 : (time - lastFrameTimeRef.current) / 1000;
     lastFrameTimeRef.current = time;
-    elapsedTimeRef.current += deltaTime;
+    elapsedTimeRef.current += deltaTime * timeScaleRef.current;
+    if (onFrameRef.current) {
+      onFrameRef.current(buildFrameInfo(deltaTime));
+    }
     const { device, context, pipeline, uniformBuffer, uniformBindGroup, uniformLayout } = state;
     const dpr = dprRef.current;
     const displayWidth = canvas.clientWidth;
@@ -608,7 +636,7 @@ function useWebGPU(options) {
     renderPass.end();
     device.queue.submit([commandEncoder.finish()]);
     animationFrameRef.current = requestAnimationFrame(render);
-  }, []);
+  }, [buildFrameInfo]);
   import_react2.useEffect(() => {
     const canvas = canvasRef.current;
     if (!canvas)
@@ -676,28 +704,41 @@ function useWebGPU(options) {
         (mouseRef.current[0] - canvas.width / 2) / minDimension,
         (mouseRef.current[1] - canvas.height / 2) / minDimension
       ];
+      onMouseMoveRef.current?.(buildFrameInfo(0));
     };
     const handleMouseDown = (event) => {
       if (event.button === 0) {
         mouseLeftDownRef.current = true;
       }
+      onMouseDownRef.current?.(buildFrameInfo(0));
     };
     const handleMouseUp = (event) => {
       if (event.button === 0) {
         mouseLeftDownRef.current = false;
       }
+      onMouseUpRef.current?.(buildFrameInfo(0));
+    };
+    const handleClick = () => {
+      onClickRef.current?.(buildFrameInfo(0));
+    };
+    const handleMouseWheel = (event) => {
+      onMouseWheelRef.current?.(buildFrameInfo(0), event.deltaY);
     };
     window.addEventListener("mousemove", handleMouseMove);
     window.addEventListener("mousedown", handleMouseDown);
     window.addEventListener("mouseup", handleMouseUp);
+    canvas.addEventListener("click", handleClick);
+    window.addEventListener("wheel", handleMouseWheel);
     return () => {
       resizeObserver.disconnect();
       window.removeEventListener("scroll", updateRect);
       window.removeEventListener("mousemove", handleMouseMove);
       window.removeEventListener("mousedown", handleMouseDown);
       window.removeEventListener("mouseup", handleMouseUp);
+      canvas.removeEventListener("click", handleClick);
+      window.removeEventListener("wheel", handleMouseWheel);
     };
-  }, []);
+  }, [buildFrameInfo]);
   return { canvasRef, mouseRef };
 }
 
@@ -721,7 +762,19 @@ var CANVAS_STYLE = {
   width: "100%",
   height: "100%"
 };
-function ReactGpuShader({ className, fragment, uniforms, fullscreen = false }) {
+function ReactGpuShader({
+  className,
+  fragment,
+  uniforms,
+  fullscreen = false,
+  timeScale,
+  onFrame,
+  onClick,
+  onMouseMove,
+  onMouseDown,
+  onMouseUp,
+  onMouseWheel
+}) {
   const [error, setError] = import_react3.useState(null);
   const handleError = import_react3.useCallback((err) => {
     setError(err.message);
@@ -733,7 +786,14 @@ function ReactGpuShader({ className, fragment, uniforms, fullscreen = false }) {
   const { canvasRef } = useWebGPU({
     fragment,
     uniforms,
-    onError: handleError
+    onError: handleError,
+    timeScale,
+    onFrame,
+    onClick,
+    onMouseMove,
+    onMouseDown,
+    onMouseUp,
+    onMouseWheel
   });
   const containerStyle = import_react3.useMemo(() => fullscreen ? FULLSCREEN_CONTAINER_STYLE : DEFAULT_CONTAINER_STYLE, [fullscreen]);
   if (error) {

package/dist/index.js

@@ -229,10 +229,10 @@ function inferWgslType(value) {
   }
   if (isVec4Array(value)) {
     return {
-      wgslType: `array<vec4f, ${value.length}>`,
+      wgslType: `array<vec4f, 100>`,
       baseType: "vec4f",
       isArray: true,
-      arrayLength: value.length
+      arrayLength: 100
     };
   }
   if (isVec4(value)) {
@@ -491,12 +491,37 @@ function useWebGPU(options) {
   const mouseLeftDownRef = useRef2(false);
   const canvasRectRef = useRef2(null);
   const onErrorRef = useRef2(options.onError);
+  const onFrameRef = useRef2(options.onFrame);
+  const onClickRef = useRef2(options.onClick);
+  const onMouseDownRef = useRef2(options.onMouseDown);
+  const onMouseUpRef = useRef2(options.onMouseUp);
+  const onMouseMoveRef = useRef2(options.onMouseMove);
+  const onMouseWheelRef = useRef2(options.onMouseWheel);
+  const timeScaleRef = useRef2(options.timeScale ?? 1);
   const fragmentRef = useRef2(options.fragment);
   const uniformsRef = useRef2(options.uniforms);
   const dprRef = useRef2(window.devicePixelRatio || 1);
   onErrorRef.current = options.onError;
+  onFrameRef.current = options.onFrame;
+  onClickRef.current = options.onClick;
+  onMouseDownRef.current = options.onMouseDown;
+  onMouseUpRef.current = options.onMouseUp;
+  onMouseMoveRef.current = options.onMouseMove;
+  onMouseWheelRef.current = options.onMouseWheel;
+  timeScaleRef.current = options.timeScale ?? 1;
   fragmentRef.current = options.fragment;
   uniformsRef.current = options.uniforms;
+  const buildFrameInfo = useCallback2((deltaTime) => {
+    const canvas = canvasRef.current;
+    return {
+      deltaTime,
+      time: elapsedTimeRef.current,
+      resolution: [canvas?.width ?? 0, canvas?.height ?? 0],
+      mouse: mouseRef.current,
+      mouseNormalized: mouseNormalizedRef.current,
+      mouseLeftDown: mouseLeftDownRef.current
+    };
+  }, []);
   const render = useCallback2((time) => {
     const state = stateRef.current;
     const canvas = canvasRef.current;
@@ -505,7 +530,10 @@ function useWebGPU(options) {
     }
     const deltaTime = lastFrameTimeRef.current === 0 ? 0 : (time - lastFrameTimeRef.current) / 1000;
     lastFrameTimeRef.current = time;
-    elapsedTimeRef.current += deltaTime;
+    elapsedTimeRef.current += deltaTime * timeScaleRef.current;
+    if (onFrameRef.current) {
+      onFrameRef.current(buildFrameInfo(deltaTime));
+    }
     const { device, context, pipeline, uniformBuffer, uniformBindGroup, uniformLayout } = state;
     const dpr = dprRef.current;
     const displayWidth = canvas.clientWidth;
@@ -562,7 +590,7 @@ function useWebGPU(options) {
     renderPass.end();
     device.queue.submit([commandEncoder.finish()]);
     animationFrameRef.current = requestAnimationFrame(render);
-  }, []);
+  }, [buildFrameInfo]);
   useEffect(() => {
     const canvas = canvasRef.current;
     if (!canvas)
@@ -630,28 +658,41 @@ function useWebGPU(options) {
         (mouseRef.current[0] - canvas.width / 2) / minDimension,
         (mouseRef.current[1] - canvas.height / 2) / minDimension
       ];
+      onMouseMoveRef.current?.(buildFrameInfo(0));
     };
     const handleMouseDown = (event) => {
       if (event.button === 0) {
         mouseLeftDownRef.current = true;
       }
+      onMouseDownRef.current?.(buildFrameInfo(0));
     };
     const handleMouseUp = (event) => {
       if (event.button === 0) {
         mouseLeftDownRef.current = false;
       }
+      onMouseUpRef.current?.(buildFrameInfo(0));
+    };
+    const handleClick = () => {
+      onClickRef.current?.(buildFrameInfo(0));
+    };
+    const handleMouseWheel = (event) => {
+      onMouseWheelRef.current?.(buildFrameInfo(0), event.deltaY);
     };
     window.addEventListener("mousemove", handleMouseMove);
     window.addEventListener("mousedown", handleMouseDown);
     window.addEventListener("mouseup", handleMouseUp);
+    canvas.addEventListener("click", handleClick);
+    window.addEventListener("wheel", handleMouseWheel);
     return () => {
       resizeObserver.disconnect();
       window.removeEventListener("scroll", updateRect);
       window.removeEventListener("mousemove", handleMouseMove);
       window.removeEventListener("mousedown", handleMouseDown);
       window.removeEventListener("mouseup", handleMouseUp);
+      canvas.removeEventListener("click", handleClick);
+      window.removeEventListener("wheel", handleMouseWheel);
     };
-  }, []);
+  }, [buildFrameInfo]);
   return { canvasRef, mouseRef };
 }
 
@@ -675,7 +716,19 @@ var CANVAS_STYLE = {
   width: "100%",
   height: "100%"
 };
-function ReactGpuShader({ className, fragment, uniforms, fullscreen = false }) {
+function ReactGpuShader({
+  className,
+  fragment,
+  uniforms,
+  fullscreen = false,
+  timeScale,
+  onFrame,
+  onClick,
+  onMouseMove,
+  onMouseDown,
+  onMouseUp,
+  onMouseWheel
+}) {
   const [error, setError] = useState2(null);
   const handleError = useCallback3((err) => {
     setError(err.message);
@@ -687,7 +740,14 @@ function ReactGpuShader({ className, fragment, uniforms, fullscreen = false }) {
   const { canvasRef } = useWebGPU({
     fragment,
     uniforms,
-    onError: handleError
+    onError: handleError,
+    timeScale,
+    onFrame,
+    onClick,
+    onMouseMove,
+    onMouseDown,
+    onMouseUp,
+    onMouseWheel
   });
   const containerStyle = useMemo(() => fullscreen ? FULLSCREEN_CONTAINER_STYLE : DEFAULT_CONTAINER_STYLE, [fullscreen]);
   if (error) {

package/package.json

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