@fjandin/react-shader 0.0.20 → 0.0.21

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,eAAe,EAAoB,SAAS,EAAE,MAAM,UAAU,CAAA;AAEvF,UAAU,gBAAgB;IACxB,QAAQ,EAAE,MAAM,CAAA;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,CAAA;IAC1C,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,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;AAgYD,wBAAgB,SAAS,CAAC,OAAO,EAAE,gBAAgB;;;EA8SlD"}
+{"version":3,"file":"useWebGPU.d.ts","sourceRoot":"","sources":["../../src/hooks/useWebGPU.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,eAAe,EAAoB,SAAS,EAAE,MAAM,UAAU,CAAA;AAEvF,UAAU,gBAAgB;IACxB,QAAQ,EAAE,MAAM,CAAA;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,CAAA;IAC1C,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,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;AAkXD,wBAAgB,SAAS,CAAC,OAAO,EAAE,gBAAgB;;;EAiTlD"}

package/dist/index.cjs

@@ -394,10 +394,11 @@ function createStorageBuffer(device, name, binding, data) {
     packingArray[off + 3] = data[i][3];
   }
   device.queue.writeBuffer(buffer, 0, packingArray);
-  return { name, binding, buffer, currentLength: length, dataLength: data.length, packingArray };
+  return { name, binding, buffer, currentLength: length, packingArray };
 }
 function packAndUploadStorageBuffer(device, entry, data) {
   const arr = entry.packingArray;
+  arr.fill(0);
   for (let i = 0;i < data.length; i++) {
     const off = i * 4;
     arr[off] = data[i][0];
@@ -405,8 +406,7 @@ function packAndUploadStorageBuffer(device, entry, data) {
     arr[off + 2] = data[i][2];
     arr[off + 3] = data[i][3];
   }
-  const uploadLength = Math.max(entry.dataLength, 1);
-  device.queue.writeBuffer(entry.buffer, 0, arr, 0, uploadLength * 4);
+  device.queue.writeBuffer(entry.buffer, 0, arr);
 }
 function rebuildBindGroup(state) {
   const entries = [{ binding: 0, resource: { buffer: state.uniformBuffer } }];
@@ -523,18 +523,7 @@ async function initializeWebGPU(canvas, fragmentSource, customUniforms, storageB
     uniformBindGroup,
     uniformLayout,
     bindGroupLayout,
-    storageBuffers,
-    renderPassDescriptor: {
-      colorAttachments: [
-        {
-          view: undefined,
-          clearValue: { r: 0, g: 0, b: 0, a: 1 },
-          loadOp: "clear",
-          storeOp: "store"
-        }
-      ]
-    },
-    submitArray: [null]
+    storageBuffers
   };
 }
 function cleanupWebGPU(state) {
@@ -552,7 +541,6 @@ function useWebGPU(options) {
   const lastFrameTimeRef = import_react2.useRef(0);
   const mouseRef = import_react2.useRef([0, 0]);
   const mouseNormalizedRef = import_react2.useRef([0, 0]);
-  const resolutionRef = import_react2.useRef([0, 0]);
   const mouseLeftDownRef = import_react2.useRef(false);
   const canvasRectRef = import_react2.useRef(null);
   const onErrorRef = import_react2.useRef(options.onError);
@@ -625,18 +613,16 @@ function useWebGPU(options) {
     const allValues = allValuesRef.current;
     allValues.iTime = elapsedTimeRef.current;
     allValues.iMouseLeftDown = mouseLeftDownRef.current ? 1 : 0;
-    resolutionRef.current[0] = canvas.width;
-    resolutionRef.current[1] = canvas.height;
-    allValues.iResolution = resolutionRef.current;
+    allValues.iResolution = [canvas.width, canvas.height];
     allValues.iMouse = mouseRef.current;
     allValues.iMouseNormalized = mouseNormalizedRef.current;
-    const customs = uniformsRef.current;
-    if (customs) {
-      for (const name in customs) {
-        allValues[name] = customs[name];
+    if (uniformsRef.current) {
+      for (const [name, value] of Object.entries(uniformsRef.current)) {
+        allValues[name] = value;
       }
     }
     const uniformData = uniformDataRef.current;
+    uniformData.fill(0);
     for (const field of uniformLayout.fields) {
       const value = allValues[field.name];
       if (value === undefined) {
@@ -651,20 +637,18 @@ function useWebGPU(options) {
       if (!data)
         continue;
       const requiredLength = Math.max(data.length, 1);
-      if (requiredLength > entry.currentLength || requiredLength < entry.currentLength / 2) {
-        const allocLength = Math.max(Math.ceil(requiredLength * 1.5), 1);
+      if (requiredLength !== entry.currentLength) {
         entry.buffer.destroy();
-        const byteSize = allocLength * 16;
+        const byteSize = requiredLength * 16;
         entry.buffer = device.createBuffer({
           label: `storage: ${entry.name}`,
           size: byteSize,
           usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST
         });
-        entry.packingArray = new Float32Array(allocLength * 4);
-        entry.currentLength = allocLength;
+        entry.packingArray = new Float32Array(requiredLength * 4);
+        entry.currentLength = requiredLength;
         needsBindGroupRebuild = true;
       }
-      entry.dataLength = data.length;
       packAndUploadStorageBuffer(device, entry, data);
     }
     if (needsBindGroupRebuild) {
@@ -672,14 +656,21 @@ function useWebGPU(options) {
     }
     const commandEncoder = device.createCommandEncoder();
     const textureView = context.getCurrentTexture().createView();
-    state.renderPassDescriptor.colorAttachments[0].view = textureView;
-    const renderPass = commandEncoder.beginRenderPass(state.renderPassDescriptor);
+    const renderPass = commandEncoder.beginRenderPass({
+      colorAttachments: [
+        {
+          view: textureView,
+          clearValue: { r: 0, g: 0, b: 0, a: 1 },
+          loadOp: "clear",
+          storeOp: "store"
+        }
+      ]
+    });
     renderPass.setPipeline(pipeline);
     renderPass.setBindGroup(0, state.uniformBindGroup);
     renderPass.draw(3);
     renderPass.end();
-    state.submitArray[0] = commandEncoder.finish();
-    device.queue.submit(state.submitArray);
+    device.queue.submit([commandEncoder.finish()]);
     animationFrameRef.current = requestAnimationFrame(render);
   }, []);
   import_react2.useEffect(() => {

package/dist/index.js

@@ -348,10 +348,11 @@ function createStorageBuffer(device, name, binding, data) {
     packingArray[off + 3] = data[i][3];
   }
   device.queue.writeBuffer(buffer, 0, packingArray);
-  return { name, binding, buffer, currentLength: length, dataLength: data.length, packingArray };
+  return { name, binding, buffer, currentLength: length, packingArray };
 }
 function packAndUploadStorageBuffer(device, entry, data) {
   const arr = entry.packingArray;
+  arr.fill(0);
   for (let i = 0;i < data.length; i++) {
     const off = i * 4;
     arr[off] = data[i][0];
@@ -359,8 +360,7 @@ function packAndUploadStorageBuffer(device, entry, data) {
     arr[off + 2] = data[i][2];
     arr[off + 3] = data[i][3];
   }
-  const uploadLength = Math.max(entry.dataLength, 1);
-  device.queue.writeBuffer(entry.buffer, 0, arr, 0, uploadLength * 4);
+  device.queue.writeBuffer(entry.buffer, 0, arr);
 }
 function rebuildBindGroup(state) {
   const entries = [{ binding: 0, resource: { buffer: state.uniformBuffer } }];
@@ -477,18 +477,7 @@ async function initializeWebGPU(canvas, fragmentSource, customUniforms, storageB
     uniformBindGroup,
     uniformLayout,
     bindGroupLayout,
-    storageBuffers,
-    renderPassDescriptor: {
-      colorAttachments: [
-        {
-          view: undefined,
-          clearValue: { r: 0, g: 0, b: 0, a: 1 },
-          loadOp: "clear",
-          storeOp: "store"
-        }
-      ]
-    },
-    submitArray: [null]
+    storageBuffers
   };
 }
 function cleanupWebGPU(state) {
@@ -506,7 +495,6 @@ function useWebGPU(options) {
   const lastFrameTimeRef = useRef2(0);
   const mouseRef = useRef2([0, 0]);
   const mouseNormalizedRef = useRef2([0, 0]);
-  const resolutionRef = useRef2([0, 0]);
   const mouseLeftDownRef = useRef2(false);
   const canvasRectRef = useRef2(null);
   const onErrorRef = useRef2(options.onError);
@@ -579,18 +567,16 @@ function useWebGPU(options) {
     const allValues = allValuesRef.current;
     allValues.iTime = elapsedTimeRef.current;
     allValues.iMouseLeftDown = mouseLeftDownRef.current ? 1 : 0;
-    resolutionRef.current[0] = canvas.width;
-    resolutionRef.current[1] = canvas.height;
-    allValues.iResolution = resolutionRef.current;
+    allValues.iResolution = [canvas.width, canvas.height];
     allValues.iMouse = mouseRef.current;
     allValues.iMouseNormalized = mouseNormalizedRef.current;
-    const customs = uniformsRef.current;
-    if (customs) {
-      for (const name in customs) {
-        allValues[name] = customs[name];
+    if (uniformsRef.current) {
+      for (const [name, value] of Object.entries(uniformsRef.current)) {
+        allValues[name] = value;
       }
     }
     const uniformData = uniformDataRef.current;
+    uniformData.fill(0);
     for (const field of uniformLayout.fields) {
       const value = allValues[field.name];
       if (value === undefined) {
@@ -605,20 +591,18 @@ function useWebGPU(options) {
       if (!data)
         continue;
       const requiredLength = Math.max(data.length, 1);
-      if (requiredLength > entry.currentLength || requiredLength < entry.currentLength / 2) {
-        const allocLength = Math.max(Math.ceil(requiredLength * 1.5), 1);
+      if (requiredLength !== entry.currentLength) {
         entry.buffer.destroy();
-        const byteSize = allocLength * 16;
+        const byteSize = requiredLength * 16;
         entry.buffer = device.createBuffer({
           label: `storage: ${entry.name}`,
           size: byteSize,
           usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST
         });
-        entry.packingArray = new Float32Array(allocLength * 4);
-        entry.currentLength = allocLength;
+        entry.packingArray = new Float32Array(requiredLength * 4);
+        entry.currentLength = requiredLength;
         needsBindGroupRebuild = true;
       }
-      entry.dataLength = data.length;
       packAndUploadStorageBuffer(device, entry, data);
     }
     if (needsBindGroupRebuild) {
@@ -626,14 +610,21 @@ function useWebGPU(options) {
     }
     const commandEncoder = device.createCommandEncoder();
     const textureView = context.getCurrentTexture().createView();
-    state.renderPassDescriptor.colorAttachments[0].view = textureView;
-    const renderPass = commandEncoder.beginRenderPass(state.renderPassDescriptor);
+    const renderPass = commandEncoder.beginRenderPass({
+      colorAttachments: [
+        {
+          view: textureView,
+          clearValue: { r: 0, g: 0, b: 0, a: 1 },
+          loadOp: "clear",
+          storeOp: "store"
+        }
+      ]
+    });
     renderPass.setPipeline(pipeline);
     renderPass.setBindGroup(0, state.uniformBindGroup);
     renderPass.draw(3);
     renderPass.end();
-    state.submitArray[0] = commandEncoder.finish();
-    device.queue.submit(state.submitArray);
+    device.queue.submit([commandEncoder.finish()]);
     animationFrameRef.current = requestAnimationFrame(render);
   }, []);
   useEffect(() => {

package/package.json

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