@fjandin/react-shader 0.0.18 → 0.0.19

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,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"}
+{"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;AAmXD,wBAAgB,SAAS,CAAC,OAAO,EAAE,gBAAgB;;;EAgRlD"}

package/dist/index.cjs

@@ -455,6 +455,9 @@ async function initializeWebGPU(canvas, fragmentSource, customUniforms) {
     throw new Error("Failed to get WebGPU adapter");
   }
   const device = await adapter.requestDevice();
+  device.lost.then((info) => {
+    console.error(`WebGPU device lost: ${info.message}`);
+  });
   const context = canvas.getContext("webgpu");
   if (!context) {
     throw new Error("Failed to get WebGPU context");
@@ -547,6 +550,14 @@ function useWebGPU(options) {
   const fragmentRef = import_react2.useRef(options.fragment);
   const uniformsRef = import_react2.useRef(options.uniforms);
   const dprRef = import_react2.useRef(window.devicePixelRatio || 1);
+  const frameInfoRef = import_react2.useRef({
+    deltaTime: 0,
+    time: 0,
+    resolution: [0, 0],
+    mouse: [0, 0],
+    mouseNormalized: [0, 0],
+    mouseLeftDown: false
+  });
   onErrorRef.current = options.onError;
   onFrameRef.current = options.onFrame;
   onClickRef.current = options.onClick;
@@ -557,17 +568,6 @@ function useWebGPU(options) {
   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;
@@ -577,8 +577,16 @@ function useWebGPU(options) {
     const deltaTime = lastFrameTimeRef.current === 0 ? 0 : (time - lastFrameTimeRef.current) / 1000;
     lastFrameTimeRef.current = time;
     elapsedTimeRef.current += deltaTime * timeScaleRef.current;
+    frameInfoRef.current = {
+      deltaTime,
+      time: elapsedTimeRef.current,
+      resolution: [canvas.width, canvas.height],
+      mouse: mouseRef.current,
+      mouseNormalized: mouseNormalizedRef.current,
+      mouseLeftDown: mouseLeftDownRef.current
+    };
     if (onFrameRef.current) {
-      onFrameRef.current(buildFrameInfo(deltaTime));
+      onFrameRef.current(frameInfoRef.current);
     }
     const { device, context, pipeline, uniformBuffer, uniformBindGroup, uniformLayout } = state;
     const dpr = dprRef.current;
@@ -636,7 +644,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)
@@ -704,25 +712,25 @@ function useWebGPU(options) {
         (mouseRef.current[0] - canvas.width / 2) / minDimension,
         (mouseRef.current[1] - canvas.height / 2) / minDimension
       ];
-      onMouseMoveRef.current?.(buildFrameInfo(0));
+      onMouseMoveRef.current?.(frameInfoRef.current);
     };
     const handleMouseDown = (event) => {
       if (event.button === 0) {
         mouseLeftDownRef.current = true;
       }
-      onMouseDownRef.current?.(buildFrameInfo(0));
+      onMouseDownRef.current?.(frameInfoRef.current);
     };
     const handleMouseUp = (event) => {
       if (event.button === 0) {
         mouseLeftDownRef.current = false;
       }
-      onMouseUpRef.current?.(buildFrameInfo(0));
+      onMouseUpRef.current?.(frameInfoRef.current);
     };
     const handleClick = () => {
-      onClickRef.current?.(buildFrameInfo(0));
+      onClickRef.current?.(frameInfoRef.current);
     };
     const handleMouseWheel = (event) => {
-      onMouseWheelRef.current?.(buildFrameInfo(0), event.deltaY);
+      onMouseWheelRef.current?.(frameInfoRef.current, event.deltaY);
     };
     window.addEventListener("mousemove", handleMouseMove);
     window.addEventListener("mousedown", handleMouseDown);
@@ -738,7 +746,7 @@ function useWebGPU(options) {
       canvas.removeEventListener("click", handleClick);
       window.removeEventListener("wheel", handleMouseWheel);
     };
-  }, [buildFrameInfo]);
+  }, []);
   return { canvasRef, mouseRef };
 }
 

package/dist/index.js

@@ -409,6 +409,9 @@ async function initializeWebGPU(canvas, fragmentSource, customUniforms) {
     throw new Error("Failed to get WebGPU adapter");
   }
   const device = await adapter.requestDevice();
+  device.lost.then((info) => {
+    console.error(`WebGPU device lost: ${info.message}`);
+  });
   const context = canvas.getContext("webgpu");
   if (!context) {
     throw new Error("Failed to get WebGPU context");
@@ -501,6 +504,14 @@ function useWebGPU(options) {
   const fragmentRef = useRef2(options.fragment);
   const uniformsRef = useRef2(options.uniforms);
   const dprRef = useRef2(window.devicePixelRatio || 1);
+  const frameInfoRef = useRef2({
+    deltaTime: 0,
+    time: 0,
+    resolution: [0, 0],
+    mouse: [0, 0],
+    mouseNormalized: [0, 0],
+    mouseLeftDown: false
+  });
   onErrorRef.current = options.onError;
   onFrameRef.current = options.onFrame;
   onClickRef.current = options.onClick;
@@ -511,17 +522,6 @@ function useWebGPU(options) {
   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;
@@ -531,8 +531,16 @@ function useWebGPU(options) {
     const deltaTime = lastFrameTimeRef.current === 0 ? 0 : (time - lastFrameTimeRef.current) / 1000;
     lastFrameTimeRef.current = time;
     elapsedTimeRef.current += deltaTime * timeScaleRef.current;
+    frameInfoRef.current = {
+      deltaTime,
+      time: elapsedTimeRef.current,
+      resolution: [canvas.width, canvas.height],
+      mouse: mouseRef.current,
+      mouseNormalized: mouseNormalizedRef.current,
+      mouseLeftDown: mouseLeftDownRef.current
+    };
     if (onFrameRef.current) {
-      onFrameRef.current(buildFrameInfo(deltaTime));
+      onFrameRef.current(frameInfoRef.current);
     }
     const { device, context, pipeline, uniformBuffer, uniformBindGroup, uniformLayout } = state;
     const dpr = dprRef.current;
@@ -590,7 +598,7 @@ function useWebGPU(options) {
     renderPass.end();
     device.queue.submit([commandEncoder.finish()]);
     animationFrameRef.current = requestAnimationFrame(render);
-  }, [buildFrameInfo]);
+  }, []);
   useEffect(() => {
     const canvas = canvasRef.current;
     if (!canvas)
@@ -658,25 +666,25 @@ function useWebGPU(options) {
         (mouseRef.current[0] - canvas.width / 2) / minDimension,
         (mouseRef.current[1] - canvas.height / 2) / minDimension
       ];
-      onMouseMoveRef.current?.(buildFrameInfo(0));
+      onMouseMoveRef.current?.(frameInfoRef.current);
     };
     const handleMouseDown = (event) => {
       if (event.button === 0) {
         mouseLeftDownRef.current = true;
       }
-      onMouseDownRef.current?.(buildFrameInfo(0));
+      onMouseDownRef.current?.(frameInfoRef.current);
     };
     const handleMouseUp = (event) => {
       if (event.button === 0) {
         mouseLeftDownRef.current = false;
       }
-      onMouseUpRef.current?.(buildFrameInfo(0));
+      onMouseUpRef.current?.(frameInfoRef.current);
     };
     const handleClick = () => {
-      onClickRef.current?.(buildFrameInfo(0));
+      onClickRef.current?.(frameInfoRef.current);
     };
     const handleMouseWheel = (event) => {
-      onMouseWheelRef.current?.(buildFrameInfo(0), event.deltaY);
+      onMouseWheelRef.current?.(frameInfoRef.current, event.deltaY);
     };
     window.addEventListener("mousemove", handleMouseMove);
     window.addEventListener("mousedown", handleMouseDown);
@@ -692,7 +700,7 @@ function useWebGPU(options) {
       canvas.removeEventListener("click", handleClick);
       window.removeEventListener("wheel", handleMouseWheel);
     };
-  }, [buildFrameInfo]);
+  }, []);
   return { canvasRef, mouseRef };
 }
 

package/package.json

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