p5 2.2.3 → 2.3.0-rc.0

package/lib/p5.webgpu.js

@@ -14,7 +14,7 @@
    * @property {String} VERSION
    * @final
    */
-  const VERSION = '2.2.3';
+  const VERSION = '2.3.0-rc.0';
 
   // GRAPHICS RENDERER
   /**
@@ -1436,6 +1436,7 @@
     STATEMENT: 'statement',
     ASSIGNMENT: 'assignment',
   };
+  const INSTANCE_ID_VARYING_NAME = '_p5_instanceID';
   const NodeTypeToName = Object.fromEntries(
     Object.entries(NodeType).map(([key, val]) => [val, key])
   );
@@ -1529,6 +1530,7 @@
       LOGICAL_AND: 11,
       LOGICAL_OR: 12,
       MEMBER_ACCESS: 13,
+      ARRAY_ACCESS: 14,
     },
     Unary: {
       LOGICAL_NOT: 100,
@@ -1539,7 +1541,7 @@
     Nary: {
       FUNCTION_CALL: 200,
       CONSTRUCTOR: 201,
-    }};
+      TERNARY: 202}};
   const OperatorTable = [
     { arity: "unary", boolean: true, name: "not", symbol: "!", opCode: OpCode.Unary.LOGICAL_NOT },
     { arity: "unary", name: "neg", symbol: "-", opCode: OpCode.Unary.NEGATE },
@@ -1702,7 +1704,7 @@ ${uniforms$5}
 @fragment
 fn main(input: FragmentInput) -> @location(0) vec4<f32> {
   HOOK_beforeFragment();
-  var outColor = HOOK_getFinalColor(input.vColor);
+  var outColor = HOOK_getFinalColor(input.vColor, input.vVertTexCoord);
   outColor = vec4<f32>(outColor.rgb * outColor.a, outColor.a);
   HOOK_afterFragment();
   return outColor;
@@ -2073,7 +2075,7 @@ fn main(input: StrokeFragmentInput) -> @location(0) vec4<f32> {
       discard;
     }
   }
-  var col = HOOK_getFinalColor(inputs.color);
+  var col = HOOK_getFinalColor(inputs.color, vec2<f32>(0.0, 0.0));
   col = vec4<f32>(col.rgb, 1.0) * col.a;
   HOOK_afterFragment();
   return vec4<f32>(col);
@@ -2498,9 +2500,9 @@ fn main(input: FragmentInput) -> @location(0) vec4<f32> {
     inputs.emissiveMaterial
   );
 
-  var outColor = HOOK_getFinalColor(
-    HOOK_combineColors(components)
-  );
+   var outColor = HOOK_getFinalColor(
+     HOOK_combineColors(components), input.vTexCoord
+   );
   outColor = vec4<f32>(outColor.rgb * outColor.a, outColor.a);
   HOOK_afterFragment();
   return outColor;
@@ -2850,6 +2852,201 @@ ${uniforms$1}
 fn main(input: FragmentInput) -> @location(0) vec4<f32> {
   return textureSample(uSampler, uSampler_sampler, input.vTexCoord);
 }
+`;
+
+  // Based on https://github.com/stegu/webgl-noise/blob/22434e04d7753f7e949e8d724ab3da2864c17a0f/src/noise3D.glsl
+  // MIT licensed, adapted for p5.strands and converted to WGSL
+
+  var noiseWGSL = `fn mod289Vec3(x: vec3<f32>) -> vec3<f32> {
+  return x - floor(x * (1.0 / 289.0)) * 289.0;
+}
+
+fn mod289Vec4(x: vec4<f32>) -> vec4<f32> {
+  return x - floor(x * (1.0 / 289.0)) * 289.0;
+}
+
+fn permute(x: vec4<f32>) -> vec4<f32> {
+  return mod289Vec4(((x*34.0)+10.0)*x);
+}
+
+fn taylorInvSqrt(r: vec4<f32>) -> vec4<f32> {
+  return vec4<f32>(1.79284291400159) - vec4<f32>(0.85373472095314) * r;
+}
+
+fn baseNoise(v: vec3<f32>) -> f32 {
+  let C = vec2<f32>(1.0/6.0, 1.0/3.0);
+  let D = vec4<f32>(0.0, 0.5, 1.0, 2.0);
+
+  // First corner
+  var i = floor(v + dot(v, C.yyy));
+  let x0 = v - i + dot(i, C.xxx);
+
+  // Other corners
+  let g = step(x0.yzx, x0.xyz);
+  let l = vec3<f32>(1.0) - g;
+  let i1 = min(g.xyz, l.zxy);
+  let i2 = max(g.xyz, l.zxy);
+
+  //   x0 = x0 - 0.0 + 0.0 * C.xxx;
+  //   x1 = x0 - i1  + 1.0 * C.xxx;
+  //   x2 = x0 - i2  + 2.0 * C.xxx;
+  //   x3 = x0 - 1.0 + 3.0 * C.xxx;
+  let x1 = x0 - i1 + C.xxx;
+  let x2 = x0 - i2 + C.yyy; // 2.0*C.x = 1/3 = C.y
+  let x3 = x0 - D.yyy;      // -1.0+3.0*C.x = -0.5 = -D.y
+
+  // Permutations
+  i = mod289Vec3(i);
+  let p = permute( permute( permute(
+          i.z + vec4<f32>(0.0, i1.z, i2.z, 1.0 ))
+        + i.y + vec4<f32>(0.0, i1.y, i2.y, 1.0 ))
+      + i.x + vec4<f32>(0.0, i1.x, i2.x, 1.0 ));
+
+  // Gradients: 7x7 points over a square, mapped onto an octahedron.
+  // The ring size 17*17 = 289 is close to a multiple of 49 (49*6 = 294)
+  let n_ = 0.142857142857; // 1.0/7.0
+  let ns = n_ * D.wyz - D.xzx;
+
+  let j = p - 49.0 * floor(p * ns.z * ns.z);  //  mod(p,7*7)
+
+  let x_ = floor(j * ns.z);
+  let y_ = floor(j - 7.0 * x_ );    // mod(j,N)
+
+  let x = x_ *ns.x + ns.yyyy;
+  let y = y_ *ns.x + ns.yyyy;
+  let h = vec4<f32>(1.0) - abs(x) - abs(y);
+
+  let b0 = vec4<f32>( x.xy, y.xy );
+  let b1 = vec4<f32>( x.zw, y.zw );
+
+  //vec4 s0 = vec4(lessThan(b0,0.0))*2.0 - 1.0;
+  //vec4 s1 = vec4(lessThan(b1,0.0))*2.0 - 1.0;
+  let s0 = floor(b0)*2.0 + vec4<f32>(1.0);
+  let s1 = floor(b1)*2.0 + vec4<f32>(1.0);
+  let sh = -step(h, vec4<f32>(0.0));
+
+  let a0 = b0.xzyw + s0.xzyw*sh.xxyy;
+  let a1 = b1.xzyw + s1.xzyw*sh.zzww;
+
+  let p0 = vec3<f32>(a0.xy, h.x);
+  let p1 = vec3<f32>(a0.zw, h.y);
+  let p2 = vec3<f32>(a1.xy, h.z);
+  let p3 = vec3<f32>(a1.zw, h.w);
+
+  //Normalise gradients
+  let norm = taylorInvSqrt(vec4<f32>(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3)));
+  let p0_norm = p0 * norm.x;
+  let p1_norm = p1 * norm.y;
+  let p2_norm = p2 * norm.z;
+  let p3_norm = p3 * norm.w;
+
+  // Mix final noise value
+  var m = max(vec4<f32>(0.5) - vec4<f32>(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), vec4<f32>(0.0));
+  m = m * m;
+  return 105.0 * dot( m*m, vec4<f32>( dot(p0_norm,x0), dot(p1_norm,x1),
+        dot(p2_norm,x2), dot(p3_norm,x3) ) );
+}
+
+fn noise(st: vec3<f32>, octaves: i32, ampFalloff: f32) -> f32 {
+  var result = 0.0;
+  var amplitude = 1.0;
+  var frequency = 1.0;
+
+  for (var i = 0; i < 8; i++) {
+    if (i >= octaves) { break; }
+    result += amplitude * baseNoise(st * frequency);
+    frequency *= 2.0;
+    amplitude *= ampFalloff;
+  }
+  return (result + 1.0) * 0.5;
+}`;
+
+  // _p5_hash: "Hash without Sine" by Dave Hoskins (https://www.shadertoy.com/view/4djSRW)
+  // Mixing constants: R₂ sequence by Martin Roberts (https://extremelearning.com.au/unreasonable-effectiveness-of-quasirandom-sequences/)
+  //   α₁ = 1/φ₂ = 0.7548776662 (plastic constant reciprocal)
+  //   α₂ = 1/φ₂² = 0.5698402910
+  //   1/φ = 0.6180339887 (golden ratio conjugate)
+  //
+  // Fragment shader version: pixelCoord is passed in from main via @builtin(position).
+
+  var randomWGSL = `
+var<private> _p5_randomCallIndex: i32 = 0;
+
+fn _p5_hash(p: vec3<f32>) -> f32 {
+  var p3 = fract(p * vec3<f32>(0.1031, 0.1030, 0.0973));
+  p3 = p3 + dot(p3, p3.yxz + 33.33);
+  return fract((p3.x + p3.y) * p3.z);
+}
+
+fn random(seed: f32, pixelCoord: vec2<f32>) -> f32 {
+  let callIndex = f32(_p5_randomCallIndex);
+  _p5_randomCallIndex = _p5_randomCallIndex + 1;
+  let s = fract(seed * 0.7548776662);
+  return _p5_hash(vec3<f32>(
+    pixelCoord.x + s,
+    pixelCoord.y + callIndex * 0.5698402910,
+    s + callIndex * 0.6180339887
+  ));
+}
+`;
+
+  // _p5_hash: "Hash without Sine" by Dave Hoskins (https://www.shadertoy.com/view/4djSRW)
+  // Mixing constants: R₂ sequence by Martin Roberts (https://extremelearning.com.au/unreasonable-effectiveness-of-quasirandom-sequences/)
+  //   α₁ = 1/φ₂ = 0.7548776662 (plastic constant reciprocal)
+  //   α₂ = 1/φ₂² = 0.5698402910
+  //   1/φ = 0.6180339887 (golden ratio conjugate)
+  //
+  // Vertex shader version: vertexId is passed in from main via @builtin(vertex_index).
+
+  var randomVertWGSL = `
+var<private> _p5_randomCallIndex: i32 = 0;
+
+fn _p5_hash(p: vec3<f32>) -> f32 {
+  var p3 = fract(p * vec3<f32>(0.1031, 0.1030, 0.0973));
+  p3 = p3 + dot(p3, p3.yxz + 33.33);
+  return fract((p3.x + p3.y) * p3.z);
+}
+
+fn random(seed: f32, vertexId: f32) -> f32 {
+  let callIndex = f32(_p5_randomCallIndex);
+  _p5_randomCallIndex = _p5_randomCallIndex + 1;
+  let s = fract(seed * 0.7548776662);
+  return _p5_hash(vec3<f32>(
+    vertexId + s,
+    vertexId * 0.5698402910 + callIndex * 0.6180339887,
+    s + callIndex * 0.7548776662
+  ));
+}
+`;
+
+  // _p5_hash: "Hash without Sine" by Dave Hoskins (https://www.shadertoy.com/view/4djSRW)
+  // Mixing constants: R₂ sequence by Martin Roberts (https://extremelearning.com.au/unreasonable-effectiveness-of-quasirandom-sequences/)
+  //   α₁ = 1/φ₂ = 0.7548776662 (plastic constant reciprocal)
+  //   α₂ = 1/φ₂² = 0.5698402910
+  //   1/φ = 0.6180339887 (golden ratio conjugate)
+  //
+  // Compute shader version: invocationId is passed in from main via @builtin(global_invocation_id).
+
+  var randomComputeWGSL = `
+var<private> _p5_randomCallIndex: i32 = 0;
+
+fn _p5_hash(p: vec3<f32>) -> f32 {
+  var p3 = fract(p * vec3<f32>(0.1031, 0.1030, 0.0973));
+  p3 = p3 + dot(p3, p3.yxz + 33.33);
+  return fract((p3.x + p3.y) * p3.z);
+}
+
+fn random(seed: f32, invocationId: vec3<u32>) -> f32 {
+  let id = vec3<f32>(invocationId);
+  let callIndex = f32(_p5_randomCallIndex);
+  _p5_randomCallIndex = _p5_randomCallIndex + 1;
+  let s = fract(seed * 0.7548776662);
+  return _p5_hash(vec3<f32>(
+    id.x + s,
+    id.y + callIndex * 0.5698402910,
+    id.z + s + callIndex * 0.6180339887
+  ));
+}
 `;
 
   function internalError(errorMessage) {
@@ -2981,6 +3178,9 @@ fn main(input: FragmentInput) -> @location(0) vec4<f32> {
       this.strandsContext = strandsContext;
       this.dimension = dimension;
       this.structProperties = null;
+      // Schema for struct storage buffers (set by uniformStorage when buffer has a struct layout).
+      // When set, buf.get(idx) returns a field proxy instead of a scalar StrandsNode.
+      this._schema = null;
       this.isStrandsNode = true;
 
       // Store original identifier for varying variables
@@ -3134,11 +3334,61 @@ fn main(input: FragmentInput) -> @location(0) vec4<f32> {
 
       return this;
     }
+
+    get(index) {
+      // Validate baseType is 'storage'
+      const nodeData = getNodeDataFromID(this.strandsContext.dag, this.id);
+      if (nodeData.baseType !== 'storage') {
+        throw new Error('get() can only be used on storage buffers');
+      }
+
+      // For struct storage, return a proxy with per-field getters/setters
+      if (this._schema) {
+        return createStructArrayElementProxy(this.strandsContext, this, index, this._schema);
+      }
+
+      // Create array access node: buffer.get(index) -> buffer[index]
+      const { id, dimension } = arrayAccessNode(
+        this.strandsContext,
+        this,
+        index);
+      return createStrandsNode(id, dimension, this.strandsContext);
+    }
+
+    set(index, value) {
+      // Validate baseType is 'storage' and has _originalIdentifier
+      const nodeData = getNodeDataFromID(this.strandsContext.dag, this.id);
+      if (nodeData.baseType !== 'storage') {
+        throw new Error('set() can only be used on storage buffers');
+      }
+      if (!this._originalIdentifier) {
+        throw new Error('set() can only be used on storage buffers with an identifier');
+      }
+
+      // If value is a plain object (struct literal), expand to per-field assignments
+      // e.g. buf[idx] = { position: pos, velocity: vel }
+      // becomes buf[idx].position = pos; buf[idx].velocity = vel;
+      if (value !== null && typeof value === 'object' && !value.isStrandsNode && this._schema) {
+        const proxy = createStructArrayElementProxy(this.strandsContext, this, index, this._schema);
+        for (const [fieldName, fieldValue] of Object.entries(value)) {
+          proxy[fieldName] = fieldValue;
+        }
+        return this;
+      }
+
+      // Create array assignment node: buffer.set(index, value) -> buffer[index] = value
+      // This creates an ASSIGNMENT node and records it in the CFG basic block
+      // CFG preserves sequential order, preventing reordering of assignments
+      arrayAssignmentNode(this.strandsContext, this, index, value);
+
+      // Return this for chaining
+      return this;
+    }
   }
   function createStrandsNode(id, dimension, strandsContext, onRebind) {
     return new Proxy(
       new StrandsNode(id, dimension, strandsContext),
-      swizzleTrap(id, dimension, strandsContext)
+      swizzleTrap(id, dimension, strandsContext, onRebind)
     );
   }
 
@@ -3628,6 +3878,14 @@ fn main(input: FragmentInput) -> @location(0) vec4<f32> {
         );
 
         target.id = newID;
+
+        // If we swizzle assign on a struct component i.e.
+        //   inputs.position.rg = [1, 2]
+        // The onRebind callback will update the structs components so that it refers to the new values,
+        // and make a new ID for the struct with these new values
+        if (typeof onRebind === 'function') {
+          onRebind(newID);
+        }
         return true;
       }
       return Reflect.set(...arguments);
@@ -3636,6 +3894,186 @@ fn main(input: FragmentInput) -> @location(0) vec4<f32> {
     return trap;
   }
 
+  function arrayAccessNode(strandsContext, bufferNode, indexNode, accessMode) {
+    const { dag, cfg } = strandsContext;
+
+    // Ensure index is a StrandsNode
+    let index;
+    if (indexNode instanceof StrandsNode) {
+      index = indexNode;
+    } else {
+      const { id, dimension } = primitiveConstructorNode(
+        strandsContext,
+        { baseType: BaseType.INT, dimension: 1 },
+        indexNode
+      );
+      index = createStrandsNode(id, dimension, strandsContext);
+    }
+
+    // Array access returns a single float
+    const nodeData = createNodeData({
+      nodeType: NodeType.OPERATION,
+      opCode: OpCode.Binary.ARRAY_ACCESS,
+      dependsOn: [bufferNode.id, index.id],
+      dimension: 1,
+      baseType: BaseType.FLOAT});
+
+    const id = getOrCreateNode(dag, nodeData);
+    recordInBasicBlock(cfg, cfg.currentBlock, id);
+
+    return { id, dimension: 1 };
+  }
+
+  function createStructArrayElementProxy(strandsContext, bufferNode, indexNode, schema) {
+    const { dag, cfg } = strandsContext;
+
+    // Ensure index is a StrandsNode
+    let index;
+    if (indexNode instanceof StrandsNode) {
+      index = indexNode;
+    } else {
+      const { id, dimension } = primitiveConstructorNode(
+        strandsContext,
+        { baseType: BaseType.INT, dimension: 1 },
+        indexNode
+      );
+      index = createStrandsNode(id, dimension, strandsContext);
+    }
+
+    // Create a plain object with getters/setters for each struct field.
+    // When read, a field creates an ARRAY_ACCESS IR node with the field name encoded
+    // in the identifier slot. When written, an ASSIGNMENT IR node is recorded in the CFG.
+    const proxy = {};
+
+    for (const field of schema.fields) {
+      Object.defineProperty(proxy, field.name, {
+        get() {
+          // Encode field name in identifier so WGSL backend can emit buf[idx].field
+          const nodeData = createNodeData({
+            nodeType: NodeType.OPERATION,
+            opCode: OpCode.Binary.ARRAY_ACCESS,
+            dependsOn: [bufferNode.id, index.id],
+            dimension: field.dim,
+            baseType: BaseType.FLOAT,
+            identifier: field.name,
+          });
+          const id = getOrCreateNode(dag, nodeData);
+          recordInBasicBlock(cfg, cfg.currentBlock, id);
+          // When a swizzle assignment fires (e.g. buf[i].vel.y *= -1), onRebind
+          // receives the new vector ID and writes it back to the buffer field,
+          // equivalent to buf[i].vel = newVec.
+          const onRebind = (newFieldID) => {
+            const accessData = createNodeData({
+              nodeType: NodeType.OPERATION,
+              opCode: OpCode.Binary.ARRAY_ACCESS,
+              dependsOn: [bufferNode.id, index.id],
+              dimension: field.dim,
+              baseType: BaseType.FLOAT,
+              identifier: field.name,
+            });
+            const accessID = getOrCreateNode(dag, accessData);
+            const assignData = createNodeData({
+              nodeType: NodeType.ASSIGNMENT,
+              dependsOn: [accessID, newFieldID],
+              phiBlocks: [],
+            });
+            const assignID = getOrCreateNode(dag, assignData);
+            recordInBasicBlock(cfg, cfg.currentBlock, assignID);
+          };
+          return createStrandsNode(id, field.dim, strandsContext, onRebind);
+        },
+        set(val) {
+          // Create access node as assignment target (field name in identifier)
+          const accessData = createNodeData({
+            nodeType: NodeType.OPERATION,
+            opCode: OpCode.Binary.ARRAY_ACCESS,
+            dependsOn: [bufferNode.id, index.id],
+            dimension: field.dim,
+            baseType: BaseType.FLOAT,
+            identifier: field.name,
+          });
+          const accessID = getOrCreateNode(dag, accessData);
+
+          let valueID;
+          if (val?.isStrandsNode) {
+            valueID = val.id;
+          } else {
+            const { id } = primitiveConstructorNode(
+              strandsContext,
+              { baseType: BaseType.FLOAT, dimension: field.dim },
+              val
+            );
+            valueID = id;
+          }
+
+          const assignData = createNodeData({
+            nodeType: NodeType.ASSIGNMENT,
+            dependsOn: [accessID, valueID],
+            phiBlocks: [],
+          });
+          const assignID = getOrCreateNode(dag, assignData);
+          recordInBasicBlock(cfg, cfg.currentBlock, assignID);
+        },
+        configurable: true,
+      });
+    }
+
+    return proxy;
+  }
+
+  function arrayAssignmentNode(strandsContext, bufferNode, indexNode, valueNode) {
+    const { dag, cfg } = strandsContext;
+
+    // Ensure index is a StrandsNode
+    let index;
+    if (indexNode instanceof StrandsNode) {
+      index = indexNode;
+    } else {
+      const { id, dimension } = primitiveConstructorNode(
+        strandsContext,
+        { baseType: BaseType.INT, dimension: 1 },
+        indexNode
+      );
+      index = createStrandsNode(id, dimension, strandsContext);
+    }
+
+    // Ensure value is a StrandsNode
+    let value;
+    if (valueNode instanceof StrandsNode) {
+      value = valueNode;
+    } else {
+      const { id, dimension } = primitiveConstructorNode(
+        strandsContext,
+        { baseType: BaseType.FLOAT, dimension: 1 },
+        valueNode
+      );
+      value = createStrandsNode(id, dimension, strandsContext);
+    }
+
+    // Create array access node as the assignment target
+    const arrayAccessData = createNodeData({
+      nodeType: NodeType.OPERATION,
+      opCode: OpCode.Binary.ARRAY_ACCESS,
+      dependsOn: [bufferNode.id, index.id],
+      dimension: 1,
+      baseType: BaseType.FLOAT
+    });
+    const arrayAccessID = getOrCreateNode(dag, arrayAccessData);
+
+    // Create assignment node: buffer[index] = value
+    const assignmentData = createNodeData({
+      nodeType: NodeType.ASSIGNMENT,
+      dependsOn: [arrayAccessID, value.id],
+      phiBlocks: []
+    });
+    const assignmentID = getOrCreateNode(dag, assignmentData);
+
+    // CRITICAL: Record in CFG to preserve sequential ordering
+    recordInBasicBlock(cfg, cfg.currentBlock, assignmentID);
+
+    return { id: assignmentID };
+  }
+
   function shouldCreateTemp(dag, nodeID) {
     const nodeType = dag.nodeTypes[nodeID];
     if (nodeType !== NodeType.OPERATION) return false;
@@ -3837,10 +4275,10 @@ fn main(input: FragmentInput) -> @location(0) vec4<f32> {
       // Add texture and sampler bindings for sampler2D uniforms to both vertex and fragment declarations
       if (!strandsContext.renderer || !strandsContext.baseShader) return;
 
-      // Get the next available binding index from the renderer
       let bindingIndex = strandsContext.renderer.getNextBindingIndex({
-        vert: strandsContext.baseShader.vertSrc(),
-        frag: strandsContext.baseShader.fragSrc(),
+        vert: strandsContext.baseShader._vertSrc,
+        frag: strandsContext.baseShader._fragSrc,
+        compute: strandsContext.baseShader._computeSrc,
       });
 
       for (const {name, typeInfo} of strandsContext.uniforms) {
@@ -3857,6 +4295,38 @@ fn main(input: FragmentInput) -> @location(0) vec4<f32> {
         }
       }
     },
+    addStorageBufferBindingsToDeclarations(strandsContext) {
+      if (!strandsContext.renderer || !strandsContext.baseShader) return;
+
+      const isComputeShader = strandsContext.baseShader.shaderType === 'compute';
+      let bindingIndex = strandsContext.renderer.getNextBindingIndex({
+        vert: strandsContext.baseShader._vertSrc,
+        frag: strandsContext.baseShader._fragSrc,
+        compute: strandsContext.baseShader._computeSrc,
+      });
+
+      for (const {name, typeInfo} of strandsContext.uniforms) {
+        if (typeInfo.baseType === 'storage') {
+          const accessMode = isComputeShader ? 'read_write' : 'read';
+          let declaration;
+          if (typeInfo.schema) {
+            const structTypeName = `${name}Element`;
+            declaration = `struct ${structTypeName} ${typeInfo.schema.structBody}\n@group(0) @binding(${bindingIndex}) var<storage, ${accessMode}> ${name}: array<${structTypeName}>;`;
+          } else {
+            declaration = `@group(0) @binding(${bindingIndex}) var<storage, ${accessMode}> ${name}: array<f32>;`;
+          }
+
+          if (isComputeShader) {
+            strandsContext.computeDeclarations.add(declaration);
+          } else {
+            strandsContext.vertexDeclarations.add(declaration);
+            strandsContext.fragmentDeclarations.add(declaration);
+          }
+
+          bindingIndex += 1;
+        }
+      }
+    },
     getTypeName(baseType, dimension) {
       const primitiveTypeName = TypeNames[baseType + dimension];
       if (!primitiveTypeName) {
@@ -3864,6 +4334,19 @@ fn main(input: FragmentInput) -> @location(0) vec4<f32> {
       }
       return primitiveTypeName;
     },
+    getNoiseShaderSnippet() {
+      return noiseWGSL;
+    },
+    getRandomFragmentShaderSnippet() {
+      return randomWGSL;
+    },
+    getRandomVertexShaderSnippet() {
+      return randomVertWGSL;
+    },
+    getRandomComputeShaderSnippet() {
+      return randomComputeWGSL;
+    },
+
     generateHookUniformKey(name, typeInfo) {
       // For sampler2D types, we don't add them to the uniform struct,
       // but we still need them in the shader's hooks object so that
@@ -3871,6 +4354,11 @@ fn main(input: FragmentInput) -> @location(0) vec4<f32> {
       if (typeInfo.baseType === 'sampler2D') {
         return `${name}: sampler2D`; // Signal that this should not be added to uniform struct
       }
+      // For storage buffers, we don't add them to the uniform struct
+      // Instead, they become separate storage buffer bindings
+      if (typeInfo.baseType === 'storage') {
+        return null; // Signal that this should not be added to uniform struct
+      }
       return `${name}: ${this.getTypeName(typeInfo.baseType, typeInfo.dimension)}`;
     },
     generateVaryingVariable(varName, typeInfo) {
@@ -3897,9 +4385,13 @@ fn main(input: FragmentInput) -> @location(0) vec4<f32> {
         // Generate just a semicolon (unless suppressed)
         generationContext.write(semicolon);
       } else if (node.statementType === StatementType.EARLY_RETURN) {
-        const exprNodeID = node.dependsOn[0];
-        const expr = this.generateExpression(generationContext, dag, exprNodeID);
-        generationContext.write(`return ${expr}${semicolon}`);
+        if (node.dependsOn && node.dependsOn.length > 0) {
+          const exprNodeID = node.dependsOn[0];
+          const expr = this.generateExpression(generationContext, dag, exprNodeID);
+          generationContext.write(`return ${expr}${semicolon}`);
+        } else {
+          generationContext.write(`return${semicolon}`);
+        }
       }
     },
     generateAssignment(generationContext, dag, nodeID) {
@@ -3911,6 +4403,17 @@ fn main(input: FragmentInput) -> @location(0) vec4<f32> {
       const targetNode = getNodeDataFromID(dag, targetNodeID);
       const semicolon = generationContext.suppressSemicolon ? '' : ';';
 
+      // Check if target is an array access (storage buffer assignment)
+      if (targetNode.opCode === OpCode.Binary.ARRAY_ACCESS) {
+        const [bufferID, indexID] = targetNode.dependsOn;
+        const bufferExpr = this.generateExpression(generationContext, dag, bufferID);
+        const indexExpr = this.generateExpression(generationContext, dag, indexID);
+        const sourceExpr = this.generateExpression(generationContext, dag, sourceNodeID);
+        const fieldSuffix = targetNode.identifier ? `.${targetNode.identifier}` : '';
+        generationContext.write(`${bufferExpr}[i32(${indexExpr})]${fieldSuffix} = ${sourceExpr}${semicolon}`);
+        return;
+      }
+
       // Check if target is a swizzle assignment
       if (targetNode.opCode === OpCode.Unary.SWIZZLE) {
         const parentID = targetNode.dependsOn[0];
@@ -3968,6 +4471,10 @@ fn main(input: FragmentInput) -> @location(0) vec4<f32> {
       return `var ${tmp}: ${typeName} = ${expr};`;
     },
     generateReturnStatement(strandsContext, generationContext, rootNodeID, returnType) {
+      if (!returnType) {
+        generationContext.write('return;');
+        return;
+      }
       const dag = strandsContext.dag;
       const rootNode = getNodeDataFromID(dag, rootNodeID);
       if (isStructType(returnType)) {
@@ -4008,9 +4515,15 @@ fn main(input: FragmentInput) -> @location(0) vec4<f32> {
           }
         }
 
-        // Check if this is a uniform variable (but not a texture)
+        // Detect instanceID usage in fragment context and rewrite to varying name
+        if (node.identifier === this.instanceIdReference() && generationContext.shaderContext === 'fragment') {
+          generationContext.strandsContext._instanceIDUsedInFragment = true;
+          return INSTANCE_ID_VARYING_NAME;
+        }
+
+        // Check if this is a uniform variable (but not a texture or storage buffer)
         const uniform = generationContext.strandsContext?.uniforms?.find(uniform => uniform.name === node.identifier);
-        if (uniform && uniform.typeInfo.baseType !== 'sampler2D') {
+        if (uniform && uniform.typeInfo.baseType !== 'sampler2D' && uniform.typeInfo.baseType !== 'storage') {
           return `hooks.${node.identifier}`;
         }
 
@@ -4029,6 +4542,13 @@ fn main(input: FragmentInput) -> @location(0) vec4<f32> {
           const deps = node.dependsOn.map((dep) => this.generateExpression(generationContext, dag, dep));
           return `${T}(${deps.join(', ')})`;
         }
+        if (node.opCode === OpCode.Nary.TERNARY) {
+          const [condID, trueID, falseID] = node.dependsOn;
+          const cond = this.generateExpression(generationContext, dag, condID);
+          const trueExpr = this.generateExpression(generationContext, dag, trueID);
+          const falseExpr = this.generateExpression(generationContext, dag, falseID);
+          return `select(${falseExpr}, ${trueExpr}, ${cond})`;
+        }
         if (node.opCode === OpCode.Nary.FUNCTION_CALL) {
           // Convert mod() function calls to % operator in WGSL
           if (node.identifier === 'mod' && node.dependsOn.length === 2) {
@@ -4050,6 +4570,18 @@ fn main(input: FragmentInput) -> @location(0) vec4<f32> {
           }
 
           const functionArgs = node.dependsOn.map(arg =>this.generateExpression(generationContext, dag, arg));
+
+          if (node.identifier === 'random') {
+            const ctx = generationContext.shaderContext;
+            if (ctx === 'fragment') {
+              functionArgs.push('_p5FragPos.xy');
+            } else if (ctx === 'vertex') {
+              functionArgs.push('f32(_p5VertexId)');
+            } else if (ctx === 'compute') {
+              functionArgs.push('_p5GlobalId');
+            }
+          }
+
           return `${node.identifier}(${functionArgs.join(', ')})`;
         }
         if (node.opCode === OpCode.Binary.MEMBER_ACCESS) {
@@ -4063,6 +4595,13 @@ fn main(input: FragmentInput) -> @location(0) vec4<f32> {
           const parentExpr = this.generateExpression(generationContext, dag, parentID);
           return `${parentExpr}.${node.swizzle}`;
         }
+        if (node.opCode === OpCode.Binary.ARRAY_ACCESS) {
+          const [bufferID, indexID] = node.dependsOn;
+          const bufferExpr = this.generateExpression(generationContext, dag, bufferID);
+          const indexExpr = this.generateExpression(generationContext, dag, indexID);
+          const fieldSuffix = node.identifier ? `.${node.identifier}` : '';
+          return `${bufferExpr}[i32(${indexExpr})]${fieldSuffix}`;
+        }
         if (node.dependsOn.length === 2) {
           const [lID, rID] = node.dependsOn;
           const left  = this.generateExpression(generationContext, dag, lID);
@@ -4136,12 +4675,25 @@ fn main(input: FragmentInput) -> @location(0) vec4<f32> {
       const samplerVariable = variableNode(strandsContext, { baseType: BaseType.SAMPLER, dimension: 1 }, samplerIdentifier);
       const samplerNode = createStrandsNode(samplerVariable.id, samplerVariable.dimension, strandsContext);
 
-      // Create the augmented args: [texture, sampler, coords]
-      const augmentedArgs = [textureArg, samplerNode, coordsArg];
+      // Create a LOD literal node (0.0) so we can use textureSampleLevel instead
+      // of textureSample. textureSample doesn't let you use uniform values in control
+      // flow, whereas textureSampleLevel does. While we don't have mipmaps, we don't
+      // miss out.
+      // TODO: if we *do* add mipmap support, update this logic -- we'd need to hoist
+      // the texture lookup out of the control flow.
+      const lodLiteral = scalarLiteralNode(
+        strandsContext,
+        { dimension: 1, baseType: BaseType.FLOAT },
+        0.0
+      );
+      const lodNode = createStrandsNode(lodLiteral.id, lodLiteral.dimension, strandsContext);
+
+      // Create the augmented args: [texture, sampler, coords, lod]
+      const augmentedArgs = [textureArg, samplerNode, coordsArg, lodNode];
 
-      const { id, dimension } = functionCallNode(strandsContext, 'textureSample', augmentedArgs, {
+      const { id, dimension } = functionCallNode(strandsContext, 'textureSampleLevel', augmentedArgs, {
         overloads: [{
-          params: [DataType.sampler2D, DataType.sampler, DataType.float2],
+          params: [DataType.sampler2D, DataType.sampler, DataType.float2, DataType.float1],
           returnType: DataType.float4
         }]
       });
@@ -4151,114 +4703,11 @@ fn main(input: FragmentInput) -> @location(0) vec4<f32> {
     instanceIdReference() {
       return 'instanceID';
     },
-  };
-
-  // Based on https://github.com/stegu/webgl-noise/blob/22434e04d7753f7e949e8d724ab3da2864c17a0f/src/noise3D.glsl
-  // MIT licensed, adapted for p5.strands and converted to WGSL
-
-  var noiseWGSL = `fn mod289Vec3(x: vec3<f32>) -> vec3<f32> {
-  return x - floor(x * (1.0 / 289.0)) * 289.0;
-}
-
-fn mod289Vec4(x: vec4<f32>) -> vec4<f32> {
-  return x - floor(x * (1.0 / 289.0)) * 289.0;
-}
-
-fn permute(x: vec4<f32>) -> vec4<f32> {
-  return mod289Vec4(((x*34.0)+10.0)*x);
-}
-
-fn taylorInvSqrt(r: vec4<f32>) -> vec4<f32> {
-  return vec4<f32>(1.79284291400159) - vec4<f32>(0.85373472095314) * r;
-}
-
-fn baseNoise(v: vec3<f32>) -> f32 {
-  let C = vec2<f32>(1.0/6.0, 1.0/3.0);
-  let D = vec4<f32>(0.0, 0.5, 1.0, 2.0);
-
-  // First corner
-  var i = floor(v + dot(v, C.yyy));
-  let x0 = v - i + dot(i, C.xxx);
-
-  // Other corners
-  let g = step(x0.yzx, x0.xyz);
-  let l = vec3<f32>(1.0) - g;
-  let i1 = min(g.xyz, l.zxy);
-  let i2 = max(g.xyz, l.zxy);
-
-  //   x0 = x0 - 0.0 + 0.0 * C.xxx;
-  //   x1 = x0 - i1  + 1.0 * C.xxx;
-  //   x2 = x0 - i2  + 2.0 * C.xxx;
-  //   x3 = x0 - 1.0 + 3.0 * C.xxx;
-  let x1 = x0 - i1 + C.xxx;
-  let x2 = x0 - i2 + C.yyy; // 2.0*C.x = 1/3 = C.y
-  let x3 = x0 - D.yyy;      // -1.0+3.0*C.x = -0.5 = -D.y
-
-  // Permutations
-  i = mod289Vec3(i);
-  let p = permute( permute( permute(
-          i.z + vec4<f32>(0.0, i1.z, i2.z, 1.0 ))
-        + i.y + vec4<f32>(0.0, i1.y, i2.y, 1.0 ))
-      + i.x + vec4<f32>(0.0, i1.x, i2.x, 1.0 ));
-
-  // Gradients: 7x7 points over a square, mapped onto an octahedron.
-  // The ring size 17*17 = 289 is close to a multiple of 49 (49*6 = 294)
-  let n_ = 0.142857142857; // 1.0/7.0
-  let ns = n_ * D.wyz - D.xzx;
-
-  let j = p - 49.0 * floor(p * ns.z * ns.z);  //  mod(p,7*7)
-
-  let x_ = floor(j * ns.z);
-  let y_ = floor(j - 7.0 * x_ );    // mod(j,N)
-
-  let x = x_ *ns.x + ns.yyyy;
-  let y = y_ *ns.x + ns.yyyy;
-  let h = vec4<f32>(1.0) - abs(x) - abs(y);
-
-  let b0 = vec4<f32>( x.xy, y.xy );
-  let b1 = vec4<f32>( x.zw, y.zw );
-
-  //vec4 s0 = vec4(lessThan(b0,0.0))*2.0 - 1.0;
-  //vec4 s1 = vec4(lessThan(b1,0.0))*2.0 - 1.0;
-  let s0 = floor(b0)*2.0 + vec4<f32>(1.0);
-  let s1 = floor(b1)*2.0 + vec4<f32>(1.0);
-  let sh = -step(h, vec4<f32>(0.0));
-
-  let a0 = b0.xzyw + s0.xzyw*sh.xxyy;
-  let a1 = b1.xzyw + s1.xzyw*sh.zzww;
-
-  let p0 = vec3<f32>(a0.xy, h.x);
-  let p1 = vec3<f32>(a0.zw, h.y);
-  let p2 = vec3<f32>(a1.xy, h.z);
-  let p3 = vec3<f32>(a1.zw, h.w);
-
-  //Normalise gradients
-  let norm = taylorInvSqrt(vec4<f32>(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3)));
-  let p0_norm = p0 * norm.x;
-  let p1_norm = p1 * norm.y;
-  let p2_norm = p2 * norm.z;
-  let p3_norm = p3 * norm.w;
-
-  // Mix final noise value
-  var m = max(vec4<f32>(0.5) - vec4<f32>(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), vec4<f32>(0.0));
-  m = m * m;
-  return 105.0 * dot( m*m, vec4<f32>( dot(p0_norm,x0), dot(p1_norm,x1),
-        dot(p2_norm,x2), dot(p3_norm,x3) ) );
-}
-
-fn noise(st: vec3<f32>, octaves: i32, ampFalloff: f32) -> f32 {
-  var result = 0.0;
-  var amplitude = 1.0;
-  var frequency = 1.0;
 
-  for (var i = 0; i < 8; i++) {
-    if (i >= octaves) { break; }
-    result += amplitude * baseNoise(st * frequency);
-    frequency *= 2.0;
-    amplitude *= ampFalloff;
-  }
-  return (result + 1.0) * 0.5;
-}`;
+    generateInstanceIDVarying() {
+      return { name: INSTANCE_ID_VARYING_NAME, declaration: `${INSTANCE_ID_VARYING_NAME}: i32`, source: 'i32(instanceID)', interpolation: 'flat' };
+    },
+  };
 
   const filterUniforms = `
 // Group 0: Filter Properties
@@ -4570,6 +5019,44 @@ fn main(input: FragmentInput) -> @location(0) vec4<f32> {
 }
 `;
 
+  const baseComputeShader = `
+struct ComputeUniforms {
+  uTotalCount: vec3<i32>,
+  uPhysicalCount: vec3<i32>,
+}
+@group(0) @binding(0) var<uniform> uniforms: ComputeUniforms;
+
+@compute @workgroup_size(8, 8, 1)
+fn main(
+  @builtin(global_invocation_id) globalId: vec3<u32>,
+  @builtin(local_invocation_id) localId: vec3<u32>,
+  @builtin(workgroup_id) workgroupId: vec3<u32>,
+  @builtin(local_invocation_index) localIndex: u32
+) {
+  let totalIterations = u32(uniforms.uTotalCount.x) * u32(uniforms.uTotalCount.y) * u32(uniforms.uTotalCount.z);
+  let physicalId = globalId.x + globalId.y * (u32(uniforms.uPhysicalCount.x)) + globalId.z * (u32(uniforms.uPhysicalCount.x) * u32(uniforms.uPhysicalCount.y));
+
+  if (physicalId >= totalIterations) {
+    return;
+  }
+
+  var index = vec3<i32>(0);
+  index.x = i32(physicalId % u32(uniforms.uTotalCount.x));
+  let remainingY = physicalId / u32(uniforms.uTotalCount.x);
+  index.y = i32(remainingY % u32(uniforms.uTotalCount.y));
+  index.z = i32(remainingY / u32(uniforms.uTotalCount.y));
+
+  HOOK_iteration(index);
+}
+`;
+
+  /**
+   * @module 3D
+   * @submodule p5.strands
+   * @for p5
+   */
+
+
   const FRAME_STATE = {
     PENDING: 0,
     UNPROMOTED: 1,
@@ -4591,6 +5078,228 @@ fn main(input: FragmentInput) -> @location(0) vec4<f32> {
       RGBA,
     } = p5;
 
+    class StorageBuffer {
+      constructor(buffer, size, renderer, schema = null) {
+        this._isStorageBuffer = true;
+        this.buffer = buffer;
+        this.size = size;
+        this._renderer = renderer;
+        this._schema = schema;
+      }
+
+      /**
+       * Updates the data in the buffer with new values. The new data must be in
+       * the same format as the data originally passed to
+       * <a href="#/p5/createStorage">`createStorage()`</a>.
+       *
+       * ```js example
+       * let particles;
+       * let computeShader;
+       * let displayShader;
+       * let instance;
+       * const numParticles = 100;
+       *
+       * async function setup() {
+       *   await createCanvas(100, 100, WEBGPU);
+       *   particles = createStorage(makeParticles(width / 2, height / 2));
+       *   computeShader = buildComputeShader(simulate);
+       *   displayShader = buildMaterialShader(display);
+       *   instance = buildGeometry(drawParticle);
+       *   describe('100 orange particles shooting outward.');
+       * }
+       *
+       * function makeParticles(x, y) {
+       *   let data = [];
+       *   for (let i = 0; i < numParticles; i++) {
+       *     let angle = (i / numParticles) * TWO_PI;
+       *     let speed = random(0.5, 2);
+       *     data.push({
+       *       position: createVector(x, y),
+       *       velocity: createVector(cos(angle) * speed, sin(angle) * speed),
+       *     });
+       *   }
+       *   return data;
+       * }
+       *
+       * function drawParticle() {
+       *   sphere(2);
+       * }
+       *
+       * function simulate() {
+       *   let data = uniformStorage(particles);
+       *   let idx = index.x;
+       *   data[idx].position = data[idx].position + data[idx].velocity;
+       * }
+       *
+       * function display() {
+       *   let data = uniformStorage(particles);
+       *   worldInputs.begin();
+       *   let pos = data[instanceID()].position;
+       *   worldInputs.position.xy += pos - [width / 2, height / 2];
+       *   worldInputs.end();
+       * }
+       *
+       * function draw() {
+       *   background(30);
+       *   if (frameCount % 60 === 0) {
+       *     particles.update(makeParticles(random(width), random(height)));
+       *   }
+       *   compute(computeShader, numParticles);
+       *   noStroke();
+       *   fill(255, 200, 50);
+       *   shader(displayShader);
+       *   model(instance, numParticles);
+       * }
+       * ```
+       *
+       * @method update
+       * @for p5.StorageBuffer
+       * @beta
+       * @webgpu
+       * @webgpuOnly
+       * @param {Number[]|Float32Array|Object[]} data The new data to write into the buffer.
+       */
+      update(data) {
+        const device = this._renderer.device;
+
+        if (this._schema !== null) {
+          // Buffer was created with a struct array
+          if (
+            !Array.isArray(data) ||
+            data.length === 0 ||
+            typeof data[0] !== 'object' ||
+            Array.isArray(data[0])
+          ) {
+            throw new Error(
+              'update() expects an array of objects matching the original struct format'
+            );
+          }
+
+          const newSchema = this._renderer._inferStructSchema(data[0]);
+          if (newSchema.structBody !== this._schema.structBody) {
+            throw new Error(
+              `update() data structure doesn't match the original.\n` +
+              `  Expected: ${this._schema.structBody}\n` +
+              `  Got:      ${newSchema.structBody}`
+            );
+          }
+
+          const packed = this._renderer._packStructArray(data, this._schema);
+          if (packed.byteLength > this.size) {
+            throw new Error(
+              `update() data (${packed.byteLength} bytes) exceeds buffer size (${this.size} bytes)`
+            );
+          }
+          device.queue.writeBuffer(this.buffer, 0, packed);
+        } else {
+          // Buffer was created with a float array
+          let floatData;
+          if (data instanceof Float32Array) {
+            floatData = data;
+          } else if (Array.isArray(data)) {
+            floatData = new Float32Array(data);
+          } else {
+            throw new Error(
+              'update() expects a Float32Array or array of numbers for this buffer'
+            );
+          }
+
+          if (floatData.byteLength > this.size) {
+            throw new Error(
+              `update() data (${floatData.byteLength} bytes) exceeds buffer size (${this.size} bytes)`
+            );
+          }
+          device.queue.writeBuffer(this.buffer, 0, floatData);
+        }
+      }
+
+      /**
+       * Reads data from a storage buffer back into JavaScript.
+       *
+       * Copies data from the GPU to the CPU using a temporary buffer,
+       * so it must be awaited. Returns a `Float32Array` for number
+       * buffers, or an array of plain objects for struct buffers.
+       * 
+       * Note: This is a GPU -> CPU read, so calling it often (like every frame)
+       * can be slow.
+       *
+       * ```js example
+       * let data;
+       * let computeShader;
+       *
+       * async function setup() {
+       *   await createCanvas(100, 100, WEBGPU);
+       *
+       *   data = createStorage(new Float32Array([1, 2, 3, 4]));
+       *   computeShader = buildComputeShader(doubleValues);
+       *   compute(computeShader, 4);
+       *
+       *   let result = await data.read();
+       *   // result is Float32Array [2, 4, 6, 8]
+       *   for (let i = 0; i < result.length; i++) {
+       *     print(result[i]);
+       *   }
+       *   describe('Prints the values 2, 4, 6, 8 to the console.');
+       * }
+       *
+       * function doubleValues() {
+       *   let d = uniformStorage(data);
+       *   let idx = index.x;
+       *   d[idx] = d[idx] * 2;
+       * }
+       * ```
+       *
+       * @method read
+       * @for p5.StorageBuffer
+       * @beta
+       * @webgpu
+       * @webgpuOnly
+       * @returns {Promise<Float32Array|Object[]>}
+       */
+      async read() {
+        const device = this._renderer.device;
+        this._renderer.flushDraw();
+
+        const stagingBuffer = device.createBuffer({
+          size: this.size,
+          usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ,
+        });
+
+        const commandEncoder = device.createCommandEncoder();
+        commandEncoder.copyBufferToBuffer(this.buffer, 0, stagingBuffer, 0, this.size);
+        device.queue.submit([commandEncoder.finish()]);
+
+        await stagingBuffer.mapAsync(GPUMapMode.READ, 0, this.size);
+        const mappedRange = stagingBuffer.getMappedRange(0, this.size);
+
+        // Copy before unmapping because mapped memory becomes invalid after unmap
+        const rawCopy = new Float32Array(mappedRange.byteLength / 4);
+        rawCopy.set(new Float32Array(mappedRange));
+
+        stagingBuffer.unmap();
+        stagingBuffer.destroy();
+
+        if (this._schema !== null) {
+          return this._renderer._unpackStructArray(rawCopy, this._schema);
+        }
+        return rawCopy;
+      }
+    }
+
+    /**
+     * A block of data that shaders can read from, and compute shaders can also
+     * write to. This is only available in WebGPU mode.
+     *
+     * Note: <a href="#/p5/createStorage">`createStorage()`</a> is the recommended
+     * way to create an instance of this class.
+     *
+     * @class p5.StorageBuffer
+     * @beta
+     * @webgpu
+     * @webgpuOnly
+     */
+    p5.StorageBuffer = StorageBuffer;
+
     class RendererWebGPU extends Renderer3D {
       constructor(pInst, w, h, isMainCanvas, elt) {
         super(pInst, w, h, isMainCanvas, elt);
@@ -4642,6 +5351,9 @@ fn main(input: FragmentInput) -> @location(0) vec4<f32> {
         // Retired buffers to destroy at end of frame
         this._retiredBuffers = [];
 
+        // Storage buffers for compute shaders
+        this._storageBuffers = new Set();
+
         // 2D canvas for pixel reading fallback
         this._pixelReadCanvas = null;
         this._pixelReadCtx = null;
@@ -4718,7 +5430,7 @@ fn main(input: FragmentInput) -> @location(0) vec4<f32> {
           }
           if (this._pInst._webgpuAttributes[key] !== value) {
             //changing value of previously altered attribute
-            this._webgpuAttributes[key] = value;
+            this._pInst._webgpuAttributes[key] = value;
             unchanged = false;
           }
           //setting all attributes with some change
@@ -4852,9 +5564,21 @@ fn main(input: FragmentInput) -> @location(0) vec4<f32> {
         const _b = args[2] || 0;
         const _a = args[3] || 0;
 
-        // If PENDING and no custom framebuffer, clear means stay UNPROMOTED
-        if (this._frameState === FRAME_STATE.PENDING && !this.activeFramebuffer()) {
-          this._frameState = FRAME_STATE.UNPROMOTED;
+        // If PENDING and no custom framebuffer, clear means stay UNPROMOTED.
+        // However, if we are still in setup (frameCount == 0), we must promote
+        // so that mainFramebuffer gets the cleared content. This ensures that if
+        // draw() later promotes without a copy, it starts from the correct state
+        // rather than a stale mainFramebuffer.
+        // Note: a mid-draw-loop transition from UNPROMOTED back to PROMOTED
+        // (i.e. calling background() some frames but not others) will still
+        // lose intermediate UNPROMOTED frame content.
+        if (this._frameState !== FRAME_STATE.PROMOTED && !this.activeFramebuffer()) {
+          if (this._pInst.frameCount > 0) {
+            this._frameState = FRAME_STATE.UNPROMOTED;
+          } else {
+            this._promoteToFramebufferWithoutCopy();
+            // clear() then targets mainFramebuffer via activeFramebuffer()
+          }
         }
 
         this._finishActiveRenderPass();
@@ -5057,7 +5781,8 @@ fn main(input: FragmentInput) -> @location(0) vec4<f32> {
         return 4; // Cap at 4 for broader compatibility
       }
 
-      _shaderOptions({ mode }) {
+      _shaderOptions({ mode, compute, workgroupSize }) {
+        if (compute) return { compute: true, workgroupSize };
         const activeFramebuffer = this.activeFramebuffer();
         const format = activeFramebuffer ?
           this._getWebGPUColorFormat(activeFramebuffer) :
@@ -5068,9 +5793,9 @@ fn main(input: FragmentInput) -> @location(0) vec4<f32> {
           1;  // No MSAA needed when blitting already-antialiased textures to canvas
         const sampleCount = this._getValidSampleCount(requestedSampleCount);
 
-        const depthFormat = activeFramebuffer && activeFramebuffer.useDepth ?
-          this._getWebGPUDepthFormat(activeFramebuffer) :
-          this.depthFormat;
+        const depthFormat = activeFramebuffer
+          ? (activeFramebuffer.useDepth ? this._getWebGPUDepthFormat(activeFramebuffer) : undefined)
+          : this.depthFormat;
 
         const drawTarget = this.drawTarget();
         const clipping = this._clipping;
@@ -5098,6 +5823,31 @@ fn main(input: FragmentInput) -> @location(0) vec4<f32> {
       _initShader(shader) {
         const device = this.device;
 
+        if (shader.shaderType === 'compute') {
+          // Compute shader initialization
+          shader.computeModule = device.createShaderModule({ code: shader.computeSrc() });
+          shader._computePipelineCache = null;
+          shader._workgroupSize = null;
+
+          // Create compute pipeline (deferred until first compute() call)
+          shader.getPipeline = ({ workgroupSize }) => {
+            if (!shader._computePipelineCache) {
+              shader._computePipelineCache = device.createComputePipeline({
+                layout: shader._pipelineLayout,
+                compute: {
+                  module: shader.computeModule,
+                  entryPoint: 'main'
+                }
+              });
+              shader._workgroupSize = workgroupSize;
+            }
+            return shader._computePipelineCache;
+          };
+
+          return;
+        }
+
+        // Render shader initialization
         shader.vertModule = device.createShaderModule({ code: shader.vertSrc() });
         shader.fragModule = device.createShaderModule({ code: shader.fragSrc() });
 
@@ -5122,25 +5872,27 @@ fn main(input: FragmentInput) -> @location(0) vec4<f32> {
               },
               primitive: { topology },
               multisample: { count: sampleCount },
-              depthStencil: {
-                format: depthFormat,
-                depthWriteEnabled: !clipping,
-                depthCompare: 'less-equal',
-                stencilFront: {
-                  compare: clipping ? 'always' : (clipApplied ? 'not-equal' : 'always'),
-                  failOp: 'keep',
-                  depthFailOp: 'keep',
-                  passOp: clipping ? 'replace' : 'keep',
-                },
-                stencilBack: {
-                  compare: clipping ? 'always' : (clipApplied ? 'not-equal' : 'always'),
-                  failOp: 'keep',
-                  depthFailOp: 'keep',
-                  passOp: clipping ? 'replace' : 'keep',
+              ...(depthFormat ? {
+                depthStencil: {
+                  format: depthFormat,
+                  depthWriteEnabled: !clipping,
+                  depthCompare: 'less-equal',
+                  stencilFront: {
+                    compare: clipping ? 'always' : (clipApplied ? 'not-equal' : 'always'),
+                    failOp: 'keep',
+                    depthFailOp: 'keep',
+                    passOp: clipping ? 'replace' : 'keep',
+                  },
+                  stencilBack: {
+                    compare: clipping ? 'always' : (clipApplied ? 'not-equal' : 'always'),
+                    failOp: 'keep',
+                    depthFailOp: 'keep',
+                    passOp: clipping ? 'replace' : 'keep',
+                  },
+                  stencilReadMask: 0xFF,
+                  stencilWriteMask: clipping ? 0xFF : 0x00,
                 },
-                stencilReadMask: 0xFF,
-                stencilWriteMask: clipping ? 0xFF : 0x00,
-              },
+              } : {}),
             });
             shader._pipelineCache.set(key, pipeline);
           }
@@ -5196,7 +5948,9 @@ fn main(input: FragmentInput) -> @location(0) vec4<f32> {
           entries.push({
             bufferGroup,
             binding: bufferGroup.binding,
-            visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
+            visibility: shader.shaderType === 'compute'
+              ? GPUShaderStage.COMPUTE
+              : GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
             buffer: { type: 'uniform', hasDynamicOffset: bufferGroup.dynamic },
           });
           structEntries.set(bufferGroup.group, entries);
@@ -5230,6 +5984,24 @@ fn main(input: FragmentInput) -> @location(0) vec4<f32> {
           groupEntries.set(group, entries);
         }
 
+        // Add storage buffer bindings
+        for (const storage of shader._storageBuffers || []) {
+          const group = storage.group;
+          const entries = groupEntries.get(group) || [];
+
+          entries.push({
+            binding: storage.binding,
+            visibility: storage.visibility,
+            buffer: {
+              type: storage.accessMode === 'read' ? 'read-only-storage' : 'storage'
+            },
+            storage: storage,
+          });
+
+          entries.sort((a, b) => a.binding - b.binding);
+          groupEntries.set(group, entries);
+        }
+
         // Create layouts and bind groups
         const groupEntriesArr = [];
         for (const [group, entries] of groupEntries) {
@@ -5248,6 +6020,7 @@ fn main(input: FragmentInput) -> @location(0) vec4<f32> {
         shader._pipelineLayout = this.device.createPipelineLayout({
           bindGroupLayouts: shader._bindGroupLayouts,
         });
+        shader._compiled = true;
       }
 
       _getBlendState(mode) {
@@ -5494,8 +6267,11 @@ fn main(input: FragmentInput) -> @location(0) vec4<f32> {
 
       _resetBuffersBeforeDraw() {
         this._finishActiveRenderPass();
+
         // Set state to PENDING - we'll decide on first draw
-        this._frameState = FRAME_STATE.PENDING;
+        if (this._pInst.frameCount > 0) {
+          this._frameState = FRAME_STATE.PENDING;
+        }
 
         // Clear depth buffer but DON'T start any render pass yet
         const activeFramebuffer = this.activeFramebuffer();
@@ -5606,6 +6382,8 @@ fn main(input: FragmentInput) -> @location(0) vec4<f32> {
         // once we're drawing to the framebuffer, because normally
         // those are reset.
         const savedModelMatrix = this.states.uModelMatrix.copy();
+        this.states.uModelMatrix.set(this.states.uModelMatrix.copy());
+        this.states.uModelMatrix.reset();
         this.mainFramebuffer.defaultCamera.set(this.states.curCamera);
 
         this.mainFramebuffer.begin();
@@ -5613,7 +6391,12 @@ fn main(input: FragmentInput) -> @location(0) vec4<f32> {
         this.states.uModelMatrix.set(savedModelMatrix);
       }
 
-      _promoteToFramebufferWithoutCopy() {
+      _promoteToFramebufferWithoutCopy() {
+        // Already promoted this frame
+        if (this._frameState === FRAME_STATE.PROMOTED) {
+          return;
+        }
+
         // Ensure mainFramebuffer matches canvas size
         if (this.mainFramebuffer.width !== this.width ||
             this.mainFramebuffer.height !== this.height) {
@@ -5628,6 +6411,8 @@ fn main(input: FragmentInput) -> @location(0) vec4<f32> {
 
         // Preserve transformation state
         const savedModelMatrix = this.states.uModelMatrix.copy();
+        this.states.uModelMatrix.set(this.states.uModelMatrix.copy());
+        this.states.uModelMatrix.reset();
         this.mainFramebuffer.defaultCamera.set(this.states.curCamera);
 
         // Begin rendering to mainFramebuffer
@@ -5941,7 +6726,6 @@ fn main(input: FragmentInput) -> @location(0) vec4<f32> {
           }
           this.flushDraw();
 
-          // this._pInst.background('red');
           this._pInst.push();
           this.states.setValue('enableLighting', false);
           this.states.setValue('activeImageLight', null);
@@ -6006,25 +6790,9 @@ fn main(input: FragmentInput) -> @location(0) vec4<f32> {
 
         this._beginActiveRenderPass();
         const passEncoder = this.activeRenderPass;
-        const currentShader = this._curShader;
-        const shaderOptions = this._shaderOptions({ mode });
-        if (this.activeShader !== currentShader || this._shaderOptionsDifferent(shaderOptions)) {
-          passEncoder.setPipeline(currentShader.getPipeline(shaderOptions));
-        }
-        this.activeShader = currentShader;
-        this.activeShaderOptions = shaderOptions;
 
-        // Set stencil reference value for clipping
-        const drawTarget = this.drawTarget();
-        if (drawTarget._isClipApplied && !this._clipping) {
-          // When using the clip mask, test against reference value 0 (background)
-          // WebGL uses NOTEQUAL with ref 0, so fragments pass where stencil != 0
-          // In WebGPU with 'not-equal', we need ref 0 to pass where stencil != 0
-          passEncoder.setStencilReference(0);
-        } else if (this._clipping) {
-          // When writing to the clip mask, write reference value 1
-          passEncoder.setStencilReference(1);
-        }
+        const currentShader = this._curShader;
+        this.setupShaderBindGroups(currentShader, passEncoder, { mode, buffers });
         // Bind vertex buffers
         for (const buffer of currentShader._vertexBuffers || this._getVertexBuffers(currentShader)) {
           const location = currentShader.attributes[buffer.attr].location;
@@ -6032,6 +6800,58 @@ fn main(input: FragmentInput) -> @location(0) vec4<f32> {
           passEncoder.setVertexBuffer(location, gpuBuffer, 0);
         }
 
+        if (currentShader.shaderType === "fill") {
+          // Bind index buffer and issue draw
+          if (buffers.indexBuffer) {
+            const indexFormat = buffers.indexFormat || "uint16";
+            passEncoder.setIndexBuffer(buffers.indexBuffer, indexFormat);
+            passEncoder.drawIndexed(geometry.faces.length * 3, count, 0, 0, 0);
+          } else {
+            passEncoder.draw(geometry.vertices.length, count, 0, 0);
+          }
+        } else if (currentShader.shaderType === "text") {
+          if (!buffers.indexBuffer) {
+            throw new Error("Text geometry must have an index buffer");
+          }
+          const indexFormat = buffers.indexFormat || "uint16";
+          passEncoder.setIndexBuffer(buffers.indexBuffer, indexFormat);
+          passEncoder.drawIndexed(geometry.faces.length * 3, count, 0, 0, 0);
+        }
+
+        if (buffers.lineVerticesBuffer && currentShader.shaderType === "stroke") {
+          passEncoder.draw(geometry.lineVertices.length / 3, count, 0, 0);
+        }
+
+        // Mark that we have pending draws that need submission
+        this._hasPendingDraws = true;
+      }
+
+      setupShaderBindGroups(currentShader, passEncoder, shaderOptionsParams) {
+        const shaderOptions = this._shaderOptions(shaderOptionsParams);
+        if (
+          shaderOptions.compute ||
+          this.activeShader !== currentShader ||
+          this._shaderOptionsDifferent(shaderOptions)
+        ) {
+          passEncoder.setPipeline(currentShader.getPipeline(shaderOptions));
+        }
+        if (!shaderOptions.compute) {
+          this.activeShader = currentShader;
+          this.activeShaderOptions = shaderOptions;
+
+          // Set stencil reference value for clipping
+          const drawTarget = this.drawTarget();
+          if (drawTarget._isClipApplied && !this._clipping) {
+            // When using the clip mask, test against reference value 0 (background)
+            // WebGL uses NOTEQUAL with ref 0, so fragments pass where stencil != 0
+            // In WebGPU with 'not-equal', we need ref 0 to pass where stencil != 0
+            passEncoder.setStencilReference(0);
+          } else if (this._clipping) {
+            // When writing to the clip mask, write reference value 1
+            passEncoder.setStencilReference(1);
+          }
+        }
+
         for (const bufferGroup of currentShader._uniformBufferGroups) {
           if (bufferGroup.dynamic) {
             // Bind uniforms into a part of a big dynamic memory block because
@@ -6084,6 +6904,13 @@ fn main(input: FragmentInput) -> @location(0) vec4<f32> {
             currentShader.buffersDirty.delete(key);
           }
         }
+        for (const storage of currentShader._storageBuffers || []) {
+          const key = storage.group * 1000 + storage.binding;
+          if (currentShader.buffersDirty.has(key)) {
+            currentShader._cachedBindGroup[storage.group] = undefined;
+            currentShader.buffersDirty.delete(key);
+          }
+        }
 
         // Bind sampler/texture uniforms and uniform buffers
         for (const iter of currentShader._groupEntries) {
@@ -6113,6 +6940,19 @@ fn main(input: FragmentInput) -> @location(0) vec4<f32> {
                     : { buffer: uniformBufferInfo.buffer },
                 });
               }
+            } else if (entry.storage && !bindGroup) {
+              // Storage buffer binding
+              const uniform = currentShader.uniforms[entry.storage.name];
+              if (!uniform || !uniform._cachedData || !uniform._cachedData._isStorageBuffer) {
+                throw new Error(
+                  `Storage buffer "${entry.storage.name}" not set. ` +
+                  `Use shader.setUniform("${entry.storage.name}", storageBuffer)`
+                );
+              }
+              bgEntries.push({
+                binding: entry.binding,
+                resource: { buffer: uniform._cachedData.buffer },
+              });
             } else if (!bindGroup) {
               bgEntries.push({
                 binding: entry.binding,
@@ -6146,84 +6986,71 @@ fn main(input: FragmentInput) -> @location(0) vec4<f32> {
             );
           }
         }
+        return passEncoder;
+      }
 
-        if (currentShader.shaderType === "fill") {
-          // Bind index buffer and issue draw
-          if (buffers.indexBuffer) {
-            const indexFormat = buffers.indexFormat || "uint16";
-            passEncoder.setIndexBuffer(buffers.indexBuffer, indexFormat);
-            passEncoder.drawIndexed(geometry.faces.length * 3, count, 0, 0, 0);
+      //////////////////////////////////////////////
+      // SHADER
+      //////////////////////////////////////////////
+
+      // Writes a single field's value into a Float32Array+DataView at (baseOffset + field.offset).
+      //
+      // Field interface (shared by uniform fields from _parseStruct and struct storage schema fields):
+      //   baseType:    string  - 'f32', 'i32', 'u32', etc.
+      //   size:        number  - byte size of the field
+      //   offset:      number  - byte offset of the field within its struct
+      //   packInPlace: bool    - true for mat3, written with manual column padding
+      //
+      // value: number or number[] - the data to write
+      _packField(field, value, floatView, dataView, baseOffset) {
+        if (value === undefined) return;
+
+        // Duck typing instead of instanceof to avoid importing a separate
+        // copy of the Color/Vector classes
+        if (value?.isVector) {
+          value = value.values.length !== value.dimensions ? value.values.slice(0, value.dimensions) : value.values;
+        } else if (value?.isColor) {
+          value = value._getRGBA([1, 1, 1, 1]);
+        }
+        const byteOffset = baseOffset + field.offset;
+        if (field.baseType === 'u32') {
+          if (field.size === 4) {
+            dataView.setUint32(byteOffset, value, true);
           } else {
-            passEncoder.draw(geometry.vertices.length, count, 0, 0);
+            for (let i = 0; i < value.length; i++) {
+              dataView.setUint32(byteOffset + i * 4, value[i], true);
+            }
           }
-        } else if (currentShader.shaderType === "text") {
-          if (!buffers.indexBuffer) {
-            throw new Error("Text geometry must have an index buffer");
+        } else if (field.baseType === 'i32') {
+          if (field.size === 4) {
+            dataView.setInt32(byteOffset, value, true);
+          } else {
+            for (let i = 0; i < value.length; i++) {
+              dataView.setInt32(byteOffset + i * 4, value[i], true);
+            }
           }
-          const indexFormat = buffers.indexFormat || "uint16";
-          passEncoder.setIndexBuffer(buffers.indexBuffer, indexFormat);
-          passEncoder.drawIndexed(geometry.faces.length * 3, count, 0, 0, 0);
-        }
-
-        if (buffers.lineVerticesBuffer && currentShader.shaderType === "stroke") {
-          passEncoder.draw(geometry.lineVertices.length / 3, count, 0, 0);
+        } else if (field.packInPlace) {
+          // In-place packing for mat3: write directly to buffer with padding
+          const base = byteOffset / 4;
+          floatView[base + 0] = value[0]; floatView[base + 1] = value[1]; floatView[base + 2] = value[2];
+          floatView[base + 4] = value[3]; floatView[base + 5] = value[4]; floatView[base + 6] = value[5];
+          floatView[base + 8] = value[6]; floatView[base + 9] = value[7]; floatView[base + 10] = value[8];
+        } else if (field.size === 4) {
+          floatView.set([value], byteOffset / 4);
+        } else {
+          floatView.set(value, byteOffset / 4);
         }
-
-        // Mark that we have pending draws that need submission
-        this._hasPendingDraws = true;
       }
 
-      //////////////////////////////////////////////
-      // SHADER
-      //////////////////////////////////////////////
-
       _packUniformGroup(shader, groupUniforms, bufferInfo) {
         // Pack a single group's uniforms into a buffer
         const data = bufferInfo.data;
         const dataView = bufferInfo.dataView;
-
         const offset = bufferInfo.offset || 0;
         for (const uniform of groupUniforms) {
           const fullUniform = shader.uniforms[uniform.name];
           if (!fullUniform || fullUniform.isSampler) continue;
-          const uniformData = fullUniform._mappedData;
-
-          if (fullUniform.baseType === 'u32') {
-            if (fullUniform.size === 4) {
-              dataView.setUint32(offset + fullUniform.offset, uniformData, true);
-            } else {
-              for (let i = 0; i < uniformData.length; i++) {
-                dataView.setUint32(offset + fullUniform.offset + i * 4, uniformData[i], true);
-              }
-            }
-          } else if (fullUniform.baseType === 'i32') {
-            if (fullUniform.size === 4) {
-              dataView.setInt32(offset + fullUniform.offset, uniformData, true);
-            } else {
-              for (let i = 0; i < uniformData.length; i++) {
-                dataView.setInt32(offset + fullUniform.offset + i * 4, uniformData[i], true);
-              }
-            }
-          } else if (fullUniform.packInPlace) {
-            // In-place packing for mat3: write directly to buffer with padding
-            const baseOffset = (offset + fullUniform.offset) / 4;
-            // Column 0
-            data[baseOffset + 0] = uniformData[0];
-            data[baseOffset + 1] = uniformData[1];
-            data[baseOffset + 2] = uniformData[2];
-            // Column 1
-            data[baseOffset + 4] = uniformData[3];
-            data[baseOffset + 5] = uniformData[4];
-            data[baseOffset + 6] = uniformData[5];
-            // Column 2
-            data[baseOffset + 8] = uniformData[6];
-            data[baseOffset + 9] = uniformData[7];
-            data[baseOffset + 10] = uniformData[8];
-          } else if (fullUniform.size === 4) {
-            data.set([uniformData], (offset + fullUniform.offset) / 4);
-          } else if (uniformData !== undefined) {
-            data.set(uniformData, (offset + fullUniform.offset) / 4);
-          }
+          this._packField(fullUniform, fullUniform._mappedData, data, dataView, offset);
         }
       }
 
@@ -6370,10 +7197,11 @@ fn main(input: FragmentInput) -> @location(0) vec4<f32> {
         const uniformVarRegex = /@group\((\d+)\)\s+@binding\((\d+)\)\s+var<uniform>\s+(\w+)\s*:\s*(\w+);/g;
 
         let match;
-        while ((match = uniformVarRegex.exec(shader.vertSrc())) !== null) {
+        const src = shader.shaderType === 'compute' ? shader.computeSrc() : shader.vertSrc();
+        while ((match = uniformVarRegex.exec(src)) !== null) {
           const [_, groupNum, binding, varName, structType] = match;
           const bindingIndex = parseInt(binding);
-          const uniforms = this._parseStruct(shader.vertSrc(), structType);
+          const uniforms = this._parseStruct(src, structType);
 
           uniformGroups.push({
             group: parseInt(groupNum),
@@ -6384,7 +7212,7 @@ fn main(input: FragmentInput) -> @location(0) vec4<f32> {
           });
         }
 
-        if (uniformGroups.length === 0) {
+        if (uniformGroups.length === 0 && shader.shaderType !== 'compute') {
           throw new Error('Expected at least one uniform struct bound to @group(0)');
         }
 
@@ -6411,6 +7239,10 @@ fn main(input: FragmentInput) -> @location(0) vec4<f32> {
         // TODO: support other texture types
         const samplerRegex = /@group\((\d+)\)\s*@binding\((\d+)\)\s*var\s+(\w+)\s*:\s*(texture_2d<f32>|sampler);/g;
 
+        // Extract storage buffers
+        const storageBuffers = {};
+        const storageRegex = /@group\((\d+)\)\s*@binding\((\d+)\)\s*var<storage,\s*(read|read_write)>\s+(\w+)\s*:\s*array<\w+>/g;
+
         // Track which bindings are taken by the struct properties we've parsed
         // (the rest should be textures/samplers)
         const structUniformBindings = {};
@@ -6420,8 +7252,11 @@ fn main(input: FragmentInput) -> @location(0) vec4<f32> {
 
         for (const [src, visibility] of [
           [shader.vertSrc(), GPUShaderStage.VERTEX],
-          [shader.fragSrc(), GPUShaderStage.FRAGMENT]
+          [shader.fragSrc(), GPUShaderStage.FRAGMENT],
+          [shader.computeSrc ? shader.computeSrc() : null, GPUShaderStage.COMPUTE]
         ]) {
+          if (!src) continue; // Skip if shader stage doesn't exist
+
           let match;
           while ((match = samplerRegex.exec(src)) !== null) {
             const [_, group, binding, name, type] = match;
@@ -6456,21 +7291,51 @@ fn main(input: FragmentInput) -> @location(0) vec4<f32> {
               samplerNode.textureSource = sampler;
             }
           }
+
+          // Parse storage buffers
+          while ((match = storageRegex.exec(src)) !== null) {
+            const [_, group, binding, accessMode, name] = match;
+            const groupIndex = parseInt(group);
+            const bindingIndex = parseInt(binding);
+
+            const key = `${groupIndex},${bindingIndex}`;
+            const existing = storageBuffers[key];
+            // If any stage uses read_write, the bind group layout must use read_write
+            const finalAccessMode = (existing?.accessMode === 'read_write' || accessMode === 'read_write')
+              ? 'read_write'
+              : accessMode;
+
+            storageBuffers[key] = {
+              visibility: (existing?.visibility || 0) | visibility,
+              group: groupIndex,
+              binding: bindingIndex,
+              name,
+              accessMode: finalAccessMode, // 'read' or 'read_write'
+              isStorage: true,
+              type: 'storage'
+            };
+          }
         }
-        return [...Object.values(allUniforms).sort((a, b) => a.index - b.index), ...Object.values(samplers)];
+
+        // Store storage buffers on shader for later use
+        shader._storageBuffers = Object.values(storageBuffers);
+
+        return [...Object.values(allUniforms).sort((a, b) => a.index - b.index), ...Object.values(samplers), ...Object.values(storageBuffers)];
       }
 
-      getNextBindingIndex({ vert, frag }, group = 0) {
+      getNextBindingIndex({ vert, frag, compute }, group = 0) {
         // Get the highest binding index in the specified group and return the next available
-        const samplerRegex = /@group\((\d+)\)\s*@binding\((\d+)\)\s*var(?:<uniform>)?\s+(\w+)\s*:\s*(texture_2d<f32>|sampler|uniform|\w+)/g;
+        const bindingRegex = /@group\((\d+)\)\s*@binding\((\d+)\)/g;
         let maxBindingIndex = -1;
 
-        for (const [src, visibility] of [
-          [vert, GPUShaderStage.VERTEX],
-          [frag, GPUShaderStage.FRAGMENT]
-        ]) {
+        const sources = [];
+        if (vert) sources.push([vert, GPUShaderStage.VERTEX]);
+        if (frag) sources.push([frag, GPUShaderStage.FRAGMENT]);
+        if (compute) sources.push([compute, GPUShaderStage.COMPUTE]);
+
+        for (const [src, visibility] of sources) {
           let match;
-          while ((match = samplerRegex.exec(src)) !== null) {
+          while ((match = bindingRegex.exec(src)) !== null) {
             const [_, groupIndex, bindingIndex] = match;
             if (parseInt(groupIndex) === group) {
               maxBindingIndex = Math.max(maxBindingIndex, parseInt(bindingIndex));
@@ -6485,7 +7350,7 @@ fn main(input: FragmentInput) -> @location(0) vec4<f32> {
         if (uniform.isSampler) {
           uniform.texture =
             data instanceof Texture ? data : this.getTexture(data);
-        } else {
+        } else if (!data?._isStorageBuffer) {
           uniform._mappedData = this._mapUniformData(uniform, uniform._cachedData);
         }
         shader.buffersDirty.add(uniform.group * 1000 + uniform.binding);
@@ -6592,7 +7457,7 @@ fn main(input: FragmentInput) -> @location(0) vec4<f32> {
                 rgb += components.emissive;
                 return vec4<f32>(rgb, components.opacity);
               }`,
-                "vec4f getFinalColor": "(color: vec4<f32>) { return color; }",
+                "vec4f getFinalColor": "(color: vec4<f32>, texCoord: vec2<f32>) { return color; }",
                 "void afterFragment": "() {}",
               },
             }
@@ -6617,7 +7482,7 @@ fn main(input: FragmentInput) -> @location(0) vec4<f32> {
               },
               fragment: {
                 "void beforeFragment": "() {}",
-                "vec4<f32> getFinalColor": "(color: vec4<f32>) { return color; }",
+                "vec4<f32> getFinalColor": "(color: vec4<f32>, texCoord: vec2<f32>) { return color; }",
                 "void afterFragment": "() {}",
               },
             }
@@ -6643,7 +7508,7 @@ fn main(input: FragmentInput) -> @location(0) vec4<f32> {
               fragment: {
                 "void beforeFragment": "() {}",
                 "Inputs getPixelInputs": "(inputs: Inputs) { return inputs; }",
-                "vec4<f32> getFinalColor": "(color: vec4<f32>) { return color; }",
+                "vec4<f32> getFinalColor": "(color: vec4<f32>, texCoord: vec2<f32>) { return color; }",
                 "bool shouldDiscard": "(outside: bool) { return outside; };",
                 "void afterFragment": "() {}",
               },
@@ -6802,11 +7667,87 @@ fn main(input: FragmentInput) -> @location(0) vec4<f32> {
           }
         );
 
-        let [preMain, main, postMain] = src.split(/((?:@(?:vertex|fragment)\s*)?fn main[^{]+\{)/);
-        if (shaderType !== 'fragment') {
-          if (!main.match(/\@builtin\s*\(\s*instance_index\s*\)/)) {
-            main = main.replace(/\)\s*(->|\{)/, ', @builtin(instance_index) instanceID: u32) $1');
+        let [preMain, main, postMain] = src.split(/((?:@(?:vertex|fragment|compute)\s*(?:@workgroup_size\([^)]+\)\s*)?)?fn main[^{]+\{)/);
+
+        const getBuiltinParamName = (mainSrc, builtinName) => {
+          const match = new RegExp(`@builtin\\s*\\(\\s*${builtinName}\\s*\\)\\s*(\\w+)\\s*:`).exec(mainSrc);
+          return match ? match[1] : null;
+        };
+
+        const ensureBuiltinParam = (mainSrc, builtinName, fallbackName, typeName) => {
+          const existingName = getBuiltinParamName(mainSrc, builtinName);
+          if (existingName) {
+            return { mainSrc, argName: existingName };
+          }
+
+          const hasParams = /\(\s*\S/.test(mainSrc);
+          const injectedMain = mainSrc.replace(
+            /\)\s*(->|\{)/,
+            `${hasParams ? ', ' : ''}@builtin(${builtinName}) ${fallbackName}: ${typeName}) $1`
+          );
+
+          return { mainSrc: injectedMain, argName: fallbackName };
+        };
+
+        const getMainStructParameter = (mainSrc) => {
+          const match = /fn main\s*\(\s*(\w+)\s*:\s*(\w+)/.exec(mainSrc);
+          if (!match) return null;
+          return { inputName: match[1], structName: match[2] };
+        };
+
+        const getStructBuiltinFieldName = (structName, builtinName) => {
+          const structMatch = new RegExp(`struct\\s+${structName}\\s*\\{([^}]*)\\}`, 's').exec(preMain);
+          if (!structMatch) return null;
+          const fieldMatch = new RegExp(`@builtin\\s*\\(\\s*${builtinName}\\s*\\)\\s*(\\w+)\\s*:`, 's').exec(structMatch[1]);
+          return fieldMatch ? fieldMatch[1] : null;
+        };
+
+        const appendHookParams = (params, additionalParams) => {
+          if (additionalParams.length === 0) return params;
+          const hasParams = !/^\(\s*\)$/.test(params);
+          return `${params.slice(0, -1)}${hasParams ? ', ' : ''}${additionalParams.join(', ')})`;
+        };
+
+        let hookExtraParams = [];
+        let hookExtraArgs = [];
+
+        if (shaderType === 'vertex') {
+          const ensuredInstance = ensureBuiltinParam(main, 'instance_index', 'instanceID', 'u32');
+          main = ensuredInstance.mainSrc;
+
+          const ensuredVertex = ensureBuiltinParam(main, 'vertex_index', '_p5VertexId', 'u32');
+          main = ensuredVertex.mainSrc;
+
+          hookExtraParams = ['instanceID: u32', '_p5VertexId: u32'];
+          hookExtraArgs = [ensuredInstance.argName, ensuredVertex.argName];
+        } else if (shaderType === 'fragment') {
+          const directPositionArg = getBuiltinParamName(main, 'position');
+          let fragmentPositionArg = directPositionArg;
+
+          if (!fragmentPositionArg) {
+            const mainStructParam = getMainStructParameter(main);
+            if (mainStructParam) {
+              const positionField = getStructBuiltinFieldName(mainStructParam.structName, 'position');
+              if (positionField) {
+                fragmentPositionArg = `${mainStructParam.inputName}.${positionField}`;
+              }
+            }
           }
+
+          if (!fragmentPositionArg) {
+            const ensuredPosition = ensureBuiltinParam(main, 'position', '_p5FragPos', 'vec4<f32>');
+            main = ensuredPosition.mainSrc;
+            fragmentPositionArg = ensuredPosition.argName;
+          }
+
+          hookExtraParams = ['_p5FragPos: vec4<f32>'];
+          hookExtraArgs = [fragmentPositionArg];
+        } else if (shaderType === 'compute') {
+          const ensuredGlobalId = ensureBuiltinParam(main, 'global_invocation_id', '_p5GlobalId', 'vec3<u32>');
+          main = ensuredGlobalId.mainSrc;
+
+          hookExtraParams = ['_p5GlobalId: vec3<u32>'];
+          hookExtraArgs = [ensuredGlobalId.argName];
         }
 
         // Inject hook uniforms as a separate struct at a new binding
@@ -6826,6 +7767,7 @@ fn main(input: FragmentInput) -> @location(0) vec4<f32> {
           const nextBinding = this.getNextBindingIndex({
             vert: shaderType === 'vertex' ? preMain + (shader.hooks.vertex?.declarations ?? '') + shader.hooks.declarations : shader._vertSrc,
             frag: shaderType === 'fragment' ? preMain + (shader.hooks.fragment?.declarations ?? '') + shader.hooks.declarations : shader._fragSrc,
+            compute: shaderType === 'compute' ? preMain + (shader.hooks.compute?.declarations ?? '') + shader.hooks.declarations : shader._computeSrc,
           }, 0);
 
           // Create HookUniforms struct and binding
@@ -6836,8 +7778,14 @@ ${hookUniformFields}}
 
 @group(0) @binding(${nextBinding}) var<uniform> hooks: HookUniforms;
 `;
-          // Insert before the first @group binding
-          preMain = preMain.replace(/(@group\(0\)\s+@binding)/, `${hookUniformsDecl}\n$1`);
+          // Insert before the first @group binding, or at the end if there are none
+          const replaced = preMain.replace(/(@group\(0\)\s+@binding)/, `${hookUniformsDecl}\n$1`);
+          if (replaced === preMain) {
+            // No @group bindings found in base shader, append to preMain
+            preMain = preMain + '\n' + hookUniformsDecl;
+          } else {
+            preMain = replaced;
+          }
         }
 
         // Handle varying variables by injecting them into VertexOutput and FragmentInput structs
@@ -6903,10 +7851,9 @@ ${hookUniformFields}}
               initStatements += `  ${varName} = INPUT_VAR.${varName};\n`;
             }
 
-            // Find the input parameter name from the main function signature (anchored to start)
-            const inputMatch = main.match(/fn main\s*\((\w+):\s*\w+\)/);
-            if (inputMatch) {
-              const inputVarName = inputMatch[1];
+            const mainStructParam = getMainStructParameter(main);
+            if (mainStructParam) {
+              const inputVarName = mainStructParam.inputName;
               initStatements = initStatements.replace(/INPUT_VAR/g, inputVarName);
               // Insert after the main function parameter but before any other code (anchored to start)
               postMain = initStatements + postMain;
@@ -6914,12 +7861,56 @@ ${hookUniformFields}}
           }
         }
 
+        // Handle instanceID varying for fragment access
+        if (shader.hooks.instanceIDVarying) {
+          const { name, declaration, source, interpolation } = shader.hooks.instanceIDVarying;
+          const nextLocIndex = this._getNextAvailableLocation(preMain, shaderType);
+          const interpAttr = interpolation ? ` @interpolate(${interpolation})` : '';
+          const [varName, varType] = declaration.split(':').map(s => s.trim());
+          const structMember = `@location(${nextLocIndex})${interpAttr} ${declaration},`;
+
+          if (shaderType === 'vertex') {
+            // Inject into VertexOutput struct
+            preMain = preMain.replace(
+              /struct\s+VertexOutput\s+\{([^}]*)\}/,
+              (match, body) => `struct VertexOutput {${body}\n${structMember}}`
+            );
+            // Add private global
+            preMain += `var<private> ${declaration};\n`;
+            // Assign from built-in instanceID at start of main()
+            postMain = `\n  ${varName} = ${source};\n` + postMain;
+            // Copy to output struct before return
+            const returnMatch = postMain.match(/return\s+(\w+)\s*;/);
+            if (returnMatch) {
+              const outputVarName = returnMatch[1];
+              postMain = postMain.replace(
+                /(return\s+\w+\s*;)/g,
+                `${outputVarName}.${varName} = ${varName};\n  $1`
+              );
+            }
+          } else if (shaderType === 'fragment') {
+            // Inject into FragmentInput struct
+            preMain = preMain.replace(
+              /struct\s+FragmentInput\s+\{([^}]*)\}/,
+              (match, body) => `struct FragmentInput {${body}\n${structMember}}`
+            );
+            // Add private global
+            preMain += `var<private> ${declaration};\n`;
+            // Initialize from input struct at start of main()
+            const mainStructParam = getMainStructParameter(main);
+            if (mainStructParam) {
+              const inputVarName = mainStructParam.inputName;
+              postMain = `\n  ${varName} = ${inputVarName}.${varName};\n` + postMain;
+            }
+          }
+        }
+
         let hooks = '';
         let defines = '';
         if (shader.hooks.declarations) {
           hooks += shader.hooks.declarations + '\n';
         }
-        if (shader.hooks[shaderType].declarations) {
+        if (shader.hooks[shaderType] && shader.hooks[shaderType].declarations) {
           hooks += shader.hooks[shaderType].declarations + '\n';
         }
         for (const hookDef in shader.hooks.helpers) {
@@ -6943,11 +7934,7 @@ ${hookUniformFields}}
 
           let [_, params, body] = /^(\([^\)]*\))((?:.|\n)*)$/.exec(shader.hooks[shaderType][hookDef]);
 
-          if (shaderType !== 'fragment') {
-            // Splice the instance ID in as a final parameter to every WGSL hook function
-            let hasParams = !!params.match(/^\(\s*\S+.*\)$/);
-            params = params.slice(0, -1) + (hasParams ? ', ' : '') + 'instanceID: u32)';
-          }
+          params = appendHookParams(params, hookExtraParams);
 
           if (hookType === 'void') {
             hooks += `fn HOOK_${hookName}${params}${body}\n`;
@@ -6956,40 +7943,45 @@ ${hookUniformFields}}
           }
         }
 
-        // Add the instance ID as a final parameter to each hook call
-        if (shaderType !== 'fragment') {
-          const addInstanceIDParam = (src) => {
-            let result = src;
-            let idx = 0;
-            let match;
-            do {
-              match = /HOOK_\w+\(/.exec(result.slice(idx));
-              if (match) {
-                idx += match.index + match[0].length - 1;
-                let nesting = 0;
-                let hasParams = false;
-                while (idx < result.length) {
-                  if (result[idx] === '(') {
-                    nesting++;
-                  } else if (result[idx] === ')') {
-                    nesting--;
-                  } else if (result[idx].match(/\S/)) {
-                    hasParams = true;
-                  }
-                  idx++;
-                  if (nesting === 0) {
-                    break;
-                  }
+        // Pass stage-specific builtins from main to each hook call.
+        // Collect ALL HOOK_ calls (including nested ones) then insert
+        // extra args from right to left so position shifts don't
+        // invalidate earlier insertion points.
+        if (hookExtraArgs.length > 0) {
+          const addHookArgs = (src) => {
+            const insertions = [];
+            let searchIdx = 0;
+            let m;
+            while ((m = /HOOK_\w+\(/.exec(src.slice(searchIdx))) !== null) {
+              const openParen = searchIdx + m.index + m[0].length - 1;
+              let pos = openParen + 1;
+              let nesting = 1;
+              let hasParams = false;
+              while (pos < src.length && nesting > 0) {
+                if (src[pos] === '(') nesting++;
+                else if (src[pos] === ')') {
+                  nesting--;
+                  if (nesting === 0) break;
+                } else if (/\S/.test(src[pos])) {
+                  hasParams = true;
                 }
-                const insertion = (hasParams ? ', ' : '') + 'instanceID';
-                result = result.slice(0, idx-1) + insertion + result.slice(idx-1);
-                idx += insertion.length;
+                pos++;
               }
-            } while (match);
+              insertions.push({ pos, hasParams });
+              searchIdx = openParen + 1;
+            }
+
+            insertions.sort((a, b) => b.pos - a.pos);
+
+            let result = src;
+            for (const { pos, hasParams } of insertions) {
+              const insertion = (hasParams ? ', ' : '') + hookExtraArgs.join(', ');
+              result = result.slice(0, pos) + insertion + result.slice(pos);
+            }
             return result;
           };
-          preMain = addInstanceIDParam(preMain);
-          postMain = addInstanceIDParam(postMain);
+          preMain = addHookArgs(preMain);
+          postMain = addHookArgs(postMain);
         }
 
         return preMain + '\n' + defines + hooks + main + postMain;
@@ -7048,6 +8040,10 @@ ${hookUniformFields}}
           body = shader.hooks.fragment[hookName];
           fullSrc = shader._fragSrc;
         }
+        if (!body) {
+          body = shader.hooks.compute[hookName];
+          fullSrc = shader._computeSrc;
+        }
         if (!body) {
           throw new Error(`Can't find hook ${hookName}!`);
         }
@@ -7179,7 +8175,7 @@ ${hookUniformFields}}
       }
 
       defaultFramebufferAntialias() {
-        return true;
+        return this._pInst._webgpuAttributes?.antialias !== false;
       }
 
       supportsFramebufferAntialias() {
@@ -7372,6 +8368,267 @@ ${hookUniformFields}}
         };
       }
 
+      // Maps a plain JS value to the WGSL type string that represents it in a struct.
+      _jsValueToWgslType(value) {
+        if (typeof value === 'number') return 'f32';
+        // Duck typing instead of instanceof to avoid importing a separate
+        // copy of the Color/Vector classes
+        if (value?.isVector) {
+          if (value.dimensions === 2) return 'vec2f';
+          if (value.dimensions === 3) return 'vec3f';
+          if (value.dimensions === 4) return 'vec4f';
+          throw new Error(`Unsupported vector dimension ${value.dimensions} for struct storage field`);
+        }
+        if (value?.isColor) {
+          return 'vec4f';
+        }
+        if (Array.isArray(value)) {
+          if (value.length === 2) return 'vec2f';
+          if (value.length === 3) return 'vec3f';
+          if (value.length === 4) return 'vec4f';
+          throw new Error(`Unsupported array length ${value.length} for struct storage field`);
+        }
+        throw new Error(`Unsupported value type ${typeof value} for struct storage field`);
+      }
+
+      // Infers a struct schema from the first element of a struct array.
+      //
+      // Returns { fields, stride, structBody } where:
+      //   fields: field has the _packField interface (baseType, size, offset, packInPlace) plus:
+      //     name: string - JS property name
+      //     dim:  number - float component count, used when creating StrandsNodes
+      //   structBody: everything inside the  { ... } of a WGSL struct definition
+      //   stride: how many bytes are reserved for this struct in the buffer
+      _inferStructSchema(firstElement) {
+        const entries = Object.entries(firstElement);
+
+        if (!p5.disableFriendlyErrors) {
+          for (const [name, value] of entries) {
+            if (
+              value !== null &&
+              typeof value === 'object' &&
+              !Array.isArray(value) &&
+              // Duck typing instead of instanceof to avoid importing a separate
+              // copy of the Color/Vector classes
+              !value?.isVector &&
+              !value?.isColor
+            ) {
+              p5._friendlyError(
+                `The "${name}" property in your storage data contains a nested object. ` +
+                `Make sure you only use properties with numbers, arrays of numbers, or p5.Vector.`,
+                'createStorage'
+              );
+            }
+          }
+        }
+
+        const fieldLines = entries.map(([name, value]) =>
+          `  ${name}: ${this._jsValueToWgslType(value)},`
+        ).join('\n');
+        const structBody = `{\n${fieldLines}\n}`;
+        const elements = this._parseStruct(`struct _Tmp ${structBody}`, '_Tmp');
+
+        let maxEnd = 0;
+        let maxAlign = 1;
+        const fields = entries.map(([name, value]) => {
+          const el = elements[name];
+          maxEnd = Math.max(maxEnd, el.offsetEnd);
+          // Alignment for scalars/vectors: <=4 -> 4, <=8 -> 8, else 16
+          const align = el.size <= 4 ? 4 : el.size <= 8 ? 8 : 16;
+          maxAlign = Math.max(maxAlign, align);
+          // Track original JS type for reconstruction during readback
+          const kind = value?.isVector ? 'vector'
+            : value?.isColor ? 'color'
+            : undefined;
+          return {
+            name,
+            baseType: el.baseType,
+            size: el.size,
+            offset: el.offset,
+            packInPlace: el.packInPlace ?? false,
+            dim: el.size / 4,
+            kind,
+          };
+        });
+
+        const stride = Math.ceil(maxEnd / maxAlign) * maxAlign;
+        return { fields, stride, structBody };
+      }
+
+      // Packs an array of plain objects into a Float32Array using the given struct schema.
+      // Reuses _packField so layout rules match uniform packing exactly.
+      _packStructArray(data, schema) {
+        const { fields, stride } = schema;
+        const totalBytes = Math.max(data.length * stride, 16);
+        const alignedBytes = Math.ceil(totalBytes / 16) * 16;
+        const buffer = new ArrayBuffer(alignedBytes);
+        const floatView = new Float32Array(buffer);
+        const dataView = new DataView(buffer);
+        for (let i = 0; i < data.length; i++) {
+          const item = data[i];
+          const baseOffset = i * stride;
+          for (const field of fields) {
+            this._packField(field, item[field.name], floatView, dataView, baseOffset);
+          }
+        }
+        return floatView;
+      }
+
+      // Inverse of _packStructArray reads packed buffer back into plain JS objects
+      // using the same schema layout - fields, stride and offsets
+      _unpackStructArray(floatView, schema) {
+        const { fields, stride } = schema;
+        const dataView = new DataView(floatView.buffer);
+        const count = Math.floor(floatView.byteLength / stride);
+        const result = [];
+
+        for (let i = 0; i < count; i++) {
+          const item = {};
+          const baseOffset = i * stride;
+          for (const field of fields) {
+            const byteOffset = baseOffset + field.offset;
+            const n = field.size / 4;
+
+            if (field.baseType === 'u32') {
+              if (n === 1) {
+                item[field.name] = dataView.getUint32(byteOffset, true);
+              } else {
+                item[field.name] = Array.from({ length: n }, (_, j) =>
+                  dataView.getUint32(byteOffset + j * 4, true)
+                );
+              }
+            } else if (field.baseType === 'i32') {
+              if (n === 1) {
+                item[field.name] = dataView.getInt32(byteOffset, true);
+              } else {
+                item[field.name] = Array.from({ length: n }, (_, j) =>
+                  dataView.getInt32(byteOffset + j * 4, true)
+                );
+              }
+            } else {
+              const idx = byteOffset / 4;
+              if (n === 1) {
+                item[field.name] = floatView[idx];
+              } else {
+                const values = Array.from(floatView.slice(idx, idx + n));
+                if (field.kind === 'vector') {
+                  item[field.name] = this._pInst.createVector(...values);
+                } else if (field.kind === 'color') {
+                  // Color was packed as normalized RGBA [0-1] via _getRGBA([1,1,1,1])
+                  // Scale back to the current colorMode range
+                  const maxes = this.states.colorMaxes[this.states.colorMode];
+                  item[field.name] = this._pInst.color(
+                    values[0] * maxes[0], values[1] * maxes[1],
+                    values[2] * maxes[2], values[3] * maxes[3]
+                  );
+                } else {
+                  item[field.name] = values;
+                }
+              }
+            }
+          }
+          result.push(item);
+        }
+
+        return result;
+      }
+
+      createStorage(dataOrCount) {
+        const device = this.device;
+
+        // Struct array: an array of plain objects
+        if (Array.isArray(dataOrCount) && dataOrCount.length > 0 &&
+            typeof dataOrCount[0] === 'object' && !Array.isArray(dataOrCount[0])) {
+          if (!p5.disableFriendlyErrors && dataOrCount.length > 1) {
+            const firstKeys = Object.keys(dataOrCount[0]);
+            let warned = false;
+            for (let i = 1; i < dataOrCount.length; i++) {
+              const el = dataOrCount[i];
+              const elKeys = Object.keys(el);
+              const sameKeys = firstKeys.length === elKeys.length &&
+                firstKeys.every((k, j) => k === elKeys[j]);
+              if (!sameKeys) {
+                p5._friendlyError(
+                  `Element ${i} has different fields than element 0. ` +
+                  `All elements should have the same properties.`,
+                  'createStorage'
+                );
+                break;
+              }
+              for (const key of firstKeys) {
+                const firstType = this._jsValueToWgslType(dataOrCount[0][key]);
+                const elType = this._jsValueToWgslType(el[key]);
+                if (firstType !== elType) {
+                  p5._friendlyError(
+                    `The "${key}" property of element ${i} has type ${elType} ` +
+                    `but element 0 has type ${firstType}. Proporties should have the same type across all elements.`,
+                    'createStorage'
+                  );
+                  warned = true;
+                  break;
+                }
+              }
+              if (warned) break;
+            }
+          }
+          const schema = this._inferStructSchema(dataOrCount[0]);
+          const packed = this._packStructArray(dataOrCount, schema);
+          const size = packed.byteLength;
+          const buffer = device.createBuffer({
+            size,
+            usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST | GPUBufferUsage.COPY_SRC,
+            mappedAtCreation: true,
+          });
+          new Float32Array(buffer.getMappedRange()).set(packed);
+          buffer.unmap();
+          const storageBuffer = new StorageBuffer(buffer, size, this, schema);
+          this._storageBuffers.add(storageBuffer);
+          return storageBuffer;
+        }
+
+        // Determine buffer size and initial data
+        let size, initialData;
+        if (typeof dataOrCount === 'number') {
+          // createStorage(count) - zero-initialized
+          size = dataOrCount * 4; // floats are 4 bytes
+          initialData = new Float32Array(dataOrCount);
+        } else {
+          // createStorage(array) - from data
+          if (dataOrCount instanceof Float32Array) {
+            initialData = dataOrCount;
+          } else if (Array.isArray(dataOrCount)) {
+            initialData = new Float32Array(dataOrCount);
+          } else {
+            throw new Error('createStorage expects a number or array/Float32Array');
+          }
+          size = initialData.byteLength;
+        }
+
+        // Align to 16 bytes (WGSL storage buffer alignment requirement)
+        size = Math.ceil(size / 16) * 16;
+
+        // Create storage buffer with STORAGE | COPY_DST | COPY_SRC usage
+        const buffer = device.createBuffer({
+          size,
+          usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST | GPUBufferUsage.COPY_SRC,
+          mappedAtCreation: initialData.length > 0
+        });
+
+        // Write initial data if provided
+        if (initialData.length > 0) {
+          const mapping = new Float32Array(buffer.getMappedRange());
+          mapping.set(initialData);
+          buffer.unmap();
+        }
+
+        const storageBuffer = new StorageBuffer(buffer, size, this);
+
+        // Track for cleanup
+        this._storageBuffers.add(storageBuffer);
+
+        return storageBuffer;
+      }
+
       _getWebGPUColorFormat(framebuffer) {
         if (framebuffer.format === FLOAT) {
           return framebuffer.channels === RGBA ? 'rgba32float' : 'rgba32float';
@@ -7668,10 +8925,6 @@ ${hookUniformFields}}
         return super.filter(...args);
       }
 
-      getNoiseShaderSnippet() {
-        return noiseWGSL;
-      }
-
 
       baseFilterShader() {
         if (!this._baseFilterShader) {
@@ -7695,6 +8948,21 @@ ${hookUniformFields}}
         return this._baseFilterShader;
       }
 
+      baseComputeShader() {
+        if (!this._baseComputeShader) {
+          this._baseComputeShader = new Shader(
+            this,
+            baseComputeShader,
+            {
+              compute: {
+                'void iteration': '(index: vec3<i32>) {}',
+              },
+            }
+          );
+        }
+        return this._baseComputeShader;
+      }
+
       /*
        * WebGPU-specific implementation of imageLight shader creation
        */
@@ -7794,6 +9062,69 @@ ${hookUniformFields}}
           glDataType: dataType || 'uint8'
         };
       }
+
+      compute(shader, x, y = 1, z = 1) {
+        if (shader.shaderType !== 'compute') {
+          throw new Error('compute() can only be called with a compute shader');
+        }
+
+        this._finishActiveRenderPass();
+
+        // Ensure shader is initialized and finalized
+        if (!shader._compiled) {
+          shader.init();
+        }
+
+        // Set default uniforms
+        shader.setDefaultUniforms();
+        shader.setUniform('uTotalCount', [x, y, z]);
+
+        // Calculate optimal workgroup size (8x8x1 = 64 threads per workgroup)
+        const WORKGROUP_SIZE_X = 8;
+        const WORKGROUP_SIZE_Y = 8;
+        const WORKGROUP_SIZE_Z = 1;
+
+        // auto spreading: if any dimension is too large or for performance optimization,
+        // spread total iteration count across dimensions
+        const totalIterations = x * y * z;
+        const MAX_THREADS_PER_DIM = 65535 * 8;
+
+        let px = x;
+        let py = y;
+        let pz = z;
+
+        // we spread if we exceed GPU limits OR if it involves a large 1D dispatch
+        const exceedsLimits = x > MAX_THREADS_PER_DIM || y > MAX_THREADS_PER_DIM || z > MAX_THREADS_PER_DIM;
+        const isLarge1D = totalIterations > 1024 && y === 1 && z === 1;
+
+        if (exceedsLimits || isLarge1D) {
+          // Always use 2D square spreading (√N × √N).
+          // Benchmarks showed 2D square equals or outperforms 3D cube at every
+          // scale tested, with simpler index reconstruction in the shader.
+          px = Math.ceil(Math.sqrt(totalIterations));
+          py = Math.ceil(totalIterations / px);
+          pz = 1;
+        }
+
+        shader.setUniform('uPhysicalCount', [px, py, pz]);
+
+        const workgroupCountX = Math.ceil(px / WORKGROUP_SIZE_X);
+        const workgroupCountY = Math.ceil(py / WORKGROUP_SIZE_Y);
+        const workgroupCountZ = Math.ceil(pz / WORKGROUP_SIZE_Z);
+
+        const commandEncoder = this.device.createCommandEncoder();
+        const passEncoder = commandEncoder.beginComputePass();
+        this.setupShaderBindGroups(shader, passEncoder, {
+          compute: true,
+          workgroupSize: [WORKGROUP_SIZE_X, WORKGROUP_SIZE_Y, WORKGROUP_SIZE_Z],
+        });
+
+        // Dispatch compute workgroups
+        passEncoder.dispatchWorkgroups(workgroupCountX, workgroupCountY, workgroupCountZ);
+
+        passEncoder.end();
+        this.device.queue.submit([commandEncoder.finish()]);
+      }
     }
 
     p5.RendererWebGPU = RendererWebGPU;
@@ -7804,6 +9135,7 @@ ${hookUniformFields}}
     fn.setAttributes = async function (key, value) {
       return this._renderer._setAttributes(key, value);
     };
+
   }
 
   if (typeof p5 !== "undefined") {