@fjandin/react-shader 0.0.19 → 0.0.21

package/dist/index.cjs

@@ -266,30 +266,15 @@ function isVec3(value) {
 function isVec4(value) {
   return Array.isArray(value) && value.length === 4 && typeof value[0] === "number";
 }
-function isVec4Array(value) {
-  return Array.isArray(value) && value.length > 0 && Array.isArray(value[0]) && value[0].length === 4;
-}
 function inferWgslType(value) {
-  if (typeof value === "number") {
-    return { wgslType: "f32", baseType: "f32", isArray: false, arrayLength: 0 };
-  }
-  if (isVec4Array(value)) {
-    return {
-      wgslType: `array<vec4f, 100>`,
-      baseType: "vec4f",
-      isArray: true,
-      arrayLength: 100
-    };
-  }
-  if (isVec4(value)) {
-    return { wgslType: "vec4f", baseType: "vec4f", isArray: false, arrayLength: 0 };
-  }
-  if (isVec3(value)) {
-    return { wgslType: "vec3f", baseType: "vec3f", isArray: false, arrayLength: 0 };
-  }
-  if (isVec2(value)) {
-    return { wgslType: "vec2f", baseType: "vec2f", isArray: false, arrayLength: 0 };
-  }
+  if (typeof value === "number")
+    return "f32";
+  if (isVec4(value))
+    return "vec4f";
+  if (isVec3(value))
+    return "vec3f";
+  if (isVec2(value))
+    return "vec2f";
   throw new Error(`Unsupported uniform value type: ${typeof value}`);
 }
 function getTypeAlignment(type) {
@@ -315,7 +300,6 @@ function getTypeSize(type) {
       return 16;
   }
 }
-var UNIFORM_ARRAY_STRIDE = 16;
 var DEFAULT_UNIFORMS = [
   { name: "iTime", baseType: "f32" },
   { name: "iMouseLeftDown", baseType: "f32" },
@@ -330,49 +314,20 @@ function calculateUniformLayout(customUniforms) {
     const alignment = getTypeAlignment(baseType);
     const size = getTypeSize(baseType);
     offset = Math.ceil(offset / alignment) * alignment;
-    fields.push({ name, type: baseType, offset, size, isArray: false });
+    fields.push({ name, type: baseType, offset, size });
     offset += size;
   };
-  const addArrayField = (name, baseType, arrayLength) => {
-    offset = Math.ceil(offset / 16) * 16;
-    const totalSize = arrayLength * UNIFORM_ARRAY_STRIDE;
-    fields.push({
-      name,
-      type: `array<${baseType}, ${arrayLength}>`,
-      offset,
-      size: totalSize,
-      isArray: true,
-      arrayLength,
-      elementStride: UNIFORM_ARRAY_STRIDE
-    });
-    offset += totalSize;
-  };
   for (const u of DEFAULT_UNIFORMS) {
     addField(u.name, u.baseType);
   }
   if (customUniforms) {
-    const scalarEntries = [];
-    const arrayEntries = [];
-    for (const [name, value] of Object.entries(customUniforms)) {
-      const inferred = inferWgslType(value);
-      if (inferred.isArray) {
-        arrayEntries.push({ name, inferred });
-      } else {
-        scalarEntries.push({ name, inferred });
-      }
-    }
-    for (const { name } of arrayEntries) {
-      scalarEntries.push({
-        name: `${name}_count`,
-        inferred: { wgslType: "f32", baseType: "f32", isArray: false, arrayLength: 0 }
-      });
-    }
-    scalarEntries.sort((a, b) => getTypeAlignment(b.inferred.baseType) - getTypeAlignment(a.inferred.baseType));
-    for (const { name, inferred } of scalarEntries) {
-      addField(name, inferred.baseType);
-    }
-    for (const { name, inferred } of arrayEntries) {
-      addArrayField(name, inferred.baseType, inferred.arrayLength);
+    const entries = Object.entries(customUniforms).map(([name, value]) => ({
+      name,
+      baseType: inferWgslType(value)
+    }));
+    entries.sort((a, b) => getTypeAlignment(b.baseType) - getTypeAlignment(a.baseType));
+    for (const { name, baseType } of entries) {
+      addField(name, baseType);
     }
   }
   const bufferSize = Math.ceil(offset / 16) * 16;
@@ -387,21 +342,9 @@ ${members}
 }
 function packUniformValue(field, value, floatData) {
   const floatOffset = field.offset / 4;
-  if (field.isArray && field.elementStride && field.arrayLength) {
-    const stride = field.elementStride / 4;
-    const maxLen = field.arrayLength;
-    if (isVec4Array(value)) {
-      for (let i = 0;i < value.length && i < maxLen; i++) {
-        const elemOffset = floatOffset + i * stride;
-        floatData[elemOffset] = value[i][0];
-        floatData[elemOffset + 1] = value[i][1];
-        floatData[elemOffset + 2] = value[i][2];
-        floatData[elemOffset + 3] = value[i][3];
-      }
-    }
-  } else if (typeof value === "number") {
+  if (typeof value === "number") {
     floatData[floatOffset] = value;
-  } else if (Array.isArray(value) && typeof value[0] === "number") {
+  } else if (Array.isArray(value)) {
     for (let i = 0;i < value.length; i++) {
       floatData[floatOffset + i] = value[i];
     }
@@ -429,11 +372,60 @@ fn main(@builtin(vertex_index) vertexIndex: u32) -> VertexOutput {
   return output;
 }
 `;
-function createFragmentShader(userCode, layout) {
+function getStorageBufferNames(defs) {
+  if (!defs)
+    return [];
+  return Object.keys(defs).sort();
+}
+function createStorageBuffer(device, name, binding, data) {
+  const length = Math.max(data.length, 1);
+  const byteSize = length * 16;
+  const buffer = device.createBuffer({
+    label: `storage: ${name}`,
+    size: byteSize,
+    usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST
+  });
+  const packingArray = new Float32Array(length * 4);
+  for (let i = 0;i < data.length; i++) {
+    const off = i * 4;
+    packingArray[off] = data[i][0];
+    packingArray[off + 1] = data[i][1];
+    packingArray[off + 2] = data[i][2];
+    packingArray[off + 3] = data[i][3];
+  }
+  device.queue.writeBuffer(buffer, 0, 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];
+    arr[off + 1] = data[i][1];
+    arr[off + 2] = data[i][2];
+    arr[off + 3] = data[i][3];
+  }
+  device.queue.writeBuffer(entry.buffer, 0, arr);
+}
+function rebuildBindGroup(state) {
+  const entries = [{ binding: 0, resource: { buffer: state.uniformBuffer } }];
+  for (const sb of state.storageBuffers) {
+    entries.push({ binding: sb.binding, resource: { buffer: sb.buffer } });
+  }
+  return state.device.createBindGroup({
+    layout: state.bindGroupLayout,
+    entries
+  });
+}
+function createFragmentShader(userCode, layout, storageBufferNames) {
+  const storageDeclarations = storageBufferNames.map((name, i) => `@group(0) @binding(${i + 1}) var<storage, read> ${name}: array<vec4f>;`).join(`
+`);
   return `
 ${generateUniformStruct(layout)}
 
 @group(0) @binding(0) var<uniform> uniforms: Uniforms;
+${storageDeclarations}
 
 ${userCode}
 
@@ -446,7 +438,7 @@ fn main(@location(0) uv: vec2f) -> @location(0) vec4f {
 }
 `;
 }
-async function initializeWebGPU(canvas, fragmentSource, customUniforms) {
+async function initializeWebGPU(canvas, fragmentSource, customUniforms, storageBufferDefs) {
   if (!navigator.gpu) {
     throw new Error("WebGPU not supported in this browser");
   }
@@ -469,36 +461,43 @@ async function initializeWebGPU(canvas, fragmentSource, customUniforms) {
     alphaMode: "premultiplied"
   });
   const uniformLayout = calculateUniformLayout(customUniforms);
+  const storageBufferNames = getStorageBufferNames(storageBufferDefs);
   const vertexModule = device.createShaderModule({
     label: "vertex shader",
     code: VERTEX_SHADER
   });
   const fragmentModule = device.createShaderModule({
     label: "fragment shader",
-    code: createFragmentShader(fragmentSource, uniformLayout)
+    code: createFragmentShader(fragmentSource, uniformLayout, storageBufferNames)
   });
   const uniformBuffer = device.createBuffer({
     label: "uniforms",
     size: uniformLayout.bufferSize,
     usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
   });
-  const bindGroupLayout = device.createBindGroupLayout({
-    entries: [
-      {
-        binding: 0,
-        visibility: GPUShaderStage.FRAGMENT,
-        buffer: { type: "uniform" }
-      }
-    ]
-  });
+  const storageBuffers = storageBufferNames.map((name, i) => createStorageBuffer(device, name, i + 1, storageBufferDefs?.[name] ?? []));
+  const layoutEntries = [
+    {
+      binding: 0,
+      visibility: GPUShaderStage.FRAGMENT,
+      buffer: { type: "uniform" }
+    }
+  ];
+  for (const sb of storageBuffers) {
+    layoutEntries.push({
+      binding: sb.binding,
+      visibility: GPUShaderStage.FRAGMENT,
+      buffer: { type: "read-only-storage" }
+    });
+  }
+  const bindGroupLayout = device.createBindGroupLayout({ entries: layoutEntries });
+  const bindGroupEntries = [{ binding: 0, resource: { buffer: uniformBuffer } }];
+  for (const sb of storageBuffers) {
+    bindGroupEntries.push({ binding: sb.binding, resource: { buffer: sb.buffer } });
+  }
   const uniformBindGroup = device.createBindGroup({
     layout: bindGroupLayout,
-    entries: [
-      {
-        binding: 0,
-        resource: { buffer: uniformBuffer }
-      }
-    ]
+    entries: bindGroupEntries
   });
   const pipelineLayout = device.createPipelineLayout({
     bindGroupLayouts: [bindGroupLayout]
@@ -522,10 +521,15 @@ async function initializeWebGPU(canvas, fragmentSource, customUniforms) {
     pipeline,
     uniformBuffer,
     uniformBindGroup,
-    uniformLayout
+    uniformLayout,
+    bindGroupLayout,
+    storageBuffers
   };
 }
 function cleanupWebGPU(state) {
+  for (const sb of state.storageBuffers) {
+    sb.buffer.destroy();
+  }
   state.uniformBuffer.destroy();
   state.device.destroy();
 }
@@ -549,7 +553,10 @@ function useWebGPU(options) {
   const timeScaleRef = import_react2.useRef(options.timeScale ?? 1);
   const fragmentRef = import_react2.useRef(options.fragment);
   const uniformsRef = import_react2.useRef(options.uniforms);
+  const storageBuffersRef = import_react2.useRef(options.storageBuffers);
   const dprRef = import_react2.useRef(window.devicePixelRatio || 1);
+  const uniformDataRef = import_react2.useRef(null);
+  const allValuesRef = import_react2.useRef({});
   const frameInfoRef = import_react2.useRef({
     deltaTime: 0,
     time: 0,
@@ -568,6 +575,7 @@ function useWebGPU(options) {
   timeScaleRef.current = options.timeScale ?? 1;
   fragmentRef.current = options.fragment;
   uniformsRef.current = options.uniforms;
+  storageBuffersRef.current = options.storageBuffers;
   const render = import_react2.useCallback((time) => {
     const state = stateRef.current;
     const canvas = canvasRef.current;
@@ -577,18 +585,18 @@ 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
-    };
+    const info = frameInfoRef.current;
+    info.deltaTime = deltaTime;
+    info.time = elapsedTimeRef.current;
+    info.resolution[0] = canvas.width;
+    info.resolution[1] = canvas.height;
+    info.mouse = mouseRef.current;
+    info.mouseNormalized = mouseNormalizedRef.current;
+    info.mouseLeftDown = mouseLeftDownRef.current;
     if (onFrameRef.current) {
       onFrameRef.current(frameInfoRef.current);
     }
-    const { device, context, pipeline, uniformBuffer, uniformBindGroup, uniformLayout } = state;
+    const { device, context, pipeline, uniformBuffer, uniformLayout } = state;
     const dpr = dprRef.current;
     const displayWidth = canvas.clientWidth;
     const displayHeight = canvas.clientHeight;
@@ -602,22 +610,19 @@ function useWebGPU(options) {
       canvas.width = bufferWidth;
       canvas.height = bufferHeight;
     }
-    const defaultValues = {
-      iTime: elapsedTimeRef.current,
-      iMouseLeftDown: mouseLeftDownRef.current ? 1 : 0,
-      iResolution: [canvas.width, canvas.height],
-      iMouse: mouseRef.current,
-      iMouseNormalized: mouseNormalizedRef.current
-    };
-    const allValues = { ...defaultValues, ...uniformsRef.current };
+    const allValues = allValuesRef.current;
+    allValues.iTime = elapsedTimeRef.current;
+    allValues.iMouseLeftDown = mouseLeftDownRef.current ? 1 : 0;
+    allValues.iResolution = [canvas.width, canvas.height];
+    allValues.iMouse = mouseRef.current;
+    allValues.iMouseNormalized = mouseNormalizedRef.current;
     if (uniformsRef.current) {
       for (const [name, value] of Object.entries(uniformsRef.current)) {
-        if (isVec4Array(value)) {
-          allValues[`${name}_count`] = value.length;
-        }
+        allValues[name] = value;
       }
     }
-    const uniformData = new Float32Array(uniformLayout.bufferSize / 4);
+    const uniformData = uniformDataRef.current;
+    uniformData.fill(0);
     for (const field of uniformLayout.fields) {
       const value = allValues[field.name];
       if (value === undefined) {
@@ -626,6 +631,29 @@ function useWebGPU(options) {
       packUniformValue(field, value, uniformData);
     }
     device.queue.writeBuffer(uniformBuffer, 0, uniformData);
+    let needsBindGroupRebuild = false;
+    for (const entry of state.storageBuffers) {
+      const data = storageBuffersRef.current?.[entry.name];
+      if (!data)
+        continue;
+      const requiredLength = Math.max(data.length, 1);
+      if (requiredLength !== entry.currentLength) {
+        entry.buffer.destroy();
+        const byteSize = requiredLength * 16;
+        entry.buffer = device.createBuffer({
+          label: `storage: ${entry.name}`,
+          size: byteSize,
+          usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST
+        });
+        entry.packingArray = new Float32Array(requiredLength * 4);
+        entry.currentLength = requiredLength;
+        needsBindGroupRebuild = true;
+      }
+      packAndUploadStorageBuffer(device, entry, data);
+    }
+    if (needsBindGroupRebuild) {
+      state.uniformBindGroup = rebuildBindGroup(state);
+    }
     const commandEncoder = device.createCommandEncoder();
     const textureView = context.getCurrentTexture().createView();
     const renderPass = commandEncoder.beginRenderPass({
@@ -639,7 +667,7 @@ function useWebGPU(options) {
       ]
     });
     renderPass.setPipeline(pipeline);
-    renderPass.setBindGroup(0, uniformBindGroup);
+    renderPass.setBindGroup(0, state.uniformBindGroup);
     renderPass.draw(3);
     renderPass.end();
     device.queue.submit([commandEncoder.finish()]);
@@ -652,12 +680,13 @@ function useWebGPU(options) {
     let mounted = true;
     const initialize = async () => {
       try {
-        const state = await initializeWebGPU(canvas, fragmentRef.current, uniformsRef.current);
+        const state = await initializeWebGPU(canvas, fragmentRef.current, uniformsRef.current, storageBuffersRef.current);
         if (!mounted) {
           cleanupWebGPU(state);
           return;
         }
         stateRef.current = state;
+        uniformDataRef.current = new Float32Array(state.uniformLayout.bufferSize / 4);
         elapsedTimeRef.current = 0;
         lastFrameTimeRef.current = 0;
         animationFrameRef.current = requestAnimationFrame(render);
@@ -774,6 +803,7 @@ function ReactGpuShader({
   className,
   fragment,
   uniforms,
+  storageBuffers,
   fullscreen = false,
   timeScale,
   onFrame,
@@ -794,6 +824,7 @@ function ReactGpuShader({
   const { canvasRef } = useWebGPU({
     fragment,
     uniforms,
+    storageBuffers,
     onError: handleError,
     timeScale,
     onFrame,
@@ -1045,11 +1076,11 @@ function isVec2Array(value) {
 function isVec3Array(value) {
   return Array.isArray(value) && value.length > 0 && Array.isArray(value[0]) && value[0].length === 3;
 }
-function isVec4Array2(value) {
+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) || isVec4Array2(value);
+  return isFloatArray(value) || isVec2Array(value) || isVec3Array(value) || isVec4Array(value);
 }
 function setUniform(gl, location, value) {
   if (location === null) {
@@ -1057,7 +1088,7 @@ function setUniform(gl, location, value) {
   }
   if (typeof value === "number") {
     gl.uniform1f(location, value);
-  } else if (isVec4Array2(value)) {
+  } else if (isVec4Array(value)) {
     gl.uniform4fv(location, value.flat());
   } else if (isVec3Array(value)) {
     gl.uniform3fv(location, value.flat());
@@ -1113,7 +1144,7 @@ function getUniformType(value) {
   if (typeof value === "number") {
     return "float";
   }
-  if (isVec4Array2(value)) {
+  if (isVec4Array(value)) {
     return `vec4[${MAX_ARRAY_LENGTH}]`;
   }
   if (isVec3Array(value)) {

package/dist/index.d.ts

@@ -11,5 +11,5 @@ export { generateSceneCirclesFunctionGpu } from "./shaders/scene-circles-gpu";
 export { generateSimplexNoiseFunction } from "./shaders/simplex-noise";
 export { generateSimplexNoiseFunctionGpu } from "./shaders/simplex-noise-gpu";
 export { generateUtilsFunction } from "./shaders/utils";
-export type { AudioConnectionState, AudioLevels, AudioSourceType, DefaultUniforms, FloatArray, FrameInfo, ReactShaderProps, TextureMagFilter, TextureMinFilter, TextureOptions, TextureSource, TextureWrap, UniformValue, UseAudioOptions, UseAudioReturn, Vec2, Vec2Array, Vec3, Vec3Array, Vec4, Vec4Array, } from "./types";
+export type { AudioConnectionState, AudioLevels, AudioSourceType, DefaultUniforms, FloatArray, FrameInfo, GpuStorageBuffers, ReactShaderProps, TextureMagFilter, TextureMinFilter, TextureOptions, TextureSource, TextureWrap, UniformValue, UseAudioOptions, UseAudioReturn, Vec2, Vec2Array, Vec3, Vec3Array, Vec4, Vec4Array, } from "./types";
 //# 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,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAC3C,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AAC3D,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,EAAE,4BAA4B,EAAE,MAAM,yBAAyB,CAAA;AACtE,OAAO,EAAE,+BAA+B,EAAE,MAAM,6BAA6B,CAAA;AAC7E,OAAO,EAAE,gCAAgC,EAAE,MAAM,6BAA6B,CAAA;AAC9E,OAAO,EAAE,mCAAmC,EAAE,MAAM,iCAAiC,CAAA;AACrF,OAAO,EAAE,4BAA4B,EAAE,MAAM,yBAAyB,CAAA;AACtE,OAAO,EAAE,+BAA+B,EAAE,MAAM,6BAA6B,CAAA;AAC7E,OAAO,EAAE,4BAA4B,EAAE,MAAM,yBAAyB,CAAA;AACtE,OAAO,EAAE,+BAA+B,EAAE,MAAM,6BAA6B,CAAA;AAC7E,OAAO,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAA;AACvD,YAAY,EACV,oBAAoB,EACpB,WAAW,EACX,eAAe,EACf,eAAe,EACf,UAAU,EACV,SAAS,EACT,gBAAgB,EAChB,gBAAgB,EAChB,gBAAgB,EAChB,cAAc,EACd,aAAa,EACb,WAAW,EACX,YAAY,EACZ,eAAe,EACf,cAAc,EACd,IAAI,EACJ,SAAS,EACT,IAAI,EACJ,SAAS,EACT,IAAI,EACJ,SAAS,GACV,MAAM,SAAS,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAC3C,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AAC3D,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,EAAE,4BAA4B,EAAE,MAAM,yBAAyB,CAAA;AACtE,OAAO,EAAE,+BAA+B,EAAE,MAAM,6BAA6B,CAAA;AAC7E,OAAO,EAAE,gCAAgC,EAAE,MAAM,6BAA6B,CAAA;AAC9E,OAAO,EAAE,mCAAmC,EAAE,MAAM,iCAAiC,CAAA;AACrF,OAAO,EAAE,4BAA4B,EAAE,MAAM,yBAAyB,CAAA;AACtE,OAAO,EAAE,+BAA+B,EAAE,MAAM,6BAA6B,CAAA;AAC7E,OAAO,EAAE,4BAA4B,EAAE,MAAM,yBAAyB,CAAA;AACtE,OAAO,EAAE,+BAA+B,EAAE,MAAM,6BAA6B,CAAA;AAC7E,OAAO,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAA;AACvD,YAAY,EACV,oBAAoB,EACpB,WAAW,EACX,eAAe,EACf,eAAe,EACf,UAAU,EACV,SAAS,EACT,iBAAiB,EACjB,gBAAgB,EAChB,gBAAgB,EAChB,gBAAgB,EAChB,cAAc,EACd,aAAa,EACb,WAAW,EACX,YAAY,EACZ,eAAe,EACf,cAAc,EACd,IAAI,EACJ,SAAS,EACT,IAAI,EACJ,SAAS,EACT,IAAI,EACJ,SAAS,GACV,MAAM,SAAS,CAAA"}