p5 2.2.3 → 2.3.0-rc.1

package/lib/p5.webgpu.esm.js

@@ -11,7 +11,7 @@ const _PI = Math.PI;
  * @property {String} VERSION
  * @final
  */
-const VERSION = '2.2.3';
+const VERSION = '2.3.0-rc.1';
 
 // GRAPHICS RENDERER
 /**
@@ -1433,6 +1433,7 @@ const NodeType = {
   STATEMENT: 'statement',
   ASSIGNMENT: 'assignment',
 };
+const INSTANCE_ID_VARYING_NAME = '_p5_instanceID';
 const NodeTypeToName = Object.fromEntries(
   Object.entries(NodeType).map(([key, val]) => [val, key])
 );
@@ -1526,6 +1527,7 @@ const OpCode = {
     LOGICAL_AND: 11,
     LOGICAL_OR: 12,
     MEMBER_ACCESS: 13,
+    ARRAY_ACCESS: 14,
   },
   Unary: {
     LOGICAL_NOT: 100,
@@ -1536,7 +1538,7 @@ const OpCode = {
   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 },
@@ -1699,7 +1701,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;
@@ -2070,7 +2072,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);
@@ -2495,9 +2497,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;
@@ -2849,6 +2851,201 @@ fn main(input: FragmentInput) -> @location(0) vec4<f32> {
 }
 `;
 
+// 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) {
     const prefixedMessage = `[p5.strands internal error]: ${errorMessage}`; 
     throw new Error(prefixedMessage);
@@ -2978,6 +3175,9 @@ class StrandsNode {
     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
@@ -3131,11 +3331,61 @@ class StrandsNode {
 
     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)
   );
 }
 
@@ -3625,6 +3875,14 @@ function swizzleTrap(id, dimension, strandsContext, onRebind) {
       );
 
       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);
@@ -3633,6 +3891,186 @@ function swizzleTrap(id, dimension, strandsContext, onRebind) {
   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;
@@ -3834,10 +4272,10 @@ const wgslBackend = {
     // 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) {
@@ -3854,6 +4292,38 @@ const wgslBackend = {
       }
     }
   },
+  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) {
@@ -3861,6 +4331,19 @@ const wgslBackend = {
     }
     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
@@ -3868,6 +4351,11 @@ const wgslBackend = {
     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) {
@@ -3894,9 +4382,13 @@ const wgslBackend = {
       // 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) {
@@ -3908,6 +4400,17 @@ const wgslBackend = {
     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];
@@ -3965,6 +4468,10 @@ const wgslBackend = {
     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)) {
@@ -4005,9 +4512,15 @@ const wgslBackend = {
         }
       }
 
-      // 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}`;
       }
 
@@ -4026,6 +4539,13 @@ const wgslBackend = {
         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) {
@@ -4047,6 +4567,18 @@ const wgslBackend = {
         }
 
         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) {
@@ -4060,6 +4592,13 @@ const wgslBackend = {
         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);
@@ -4133,12 +4672,25 @@ const wgslBackend = {
     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];
-
-    const { id, dimension } = functionCallNode(strandsContext, 'textureSample', augmentedArgs, {
+    // 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, 'textureSampleLevel', augmentedArgs, {
       overloads: [{
-        params: [DataType.sampler2D, DataType.sampler, DataType.float2],
+        params: [DataType.sampler2D, DataType.sampler, DataType.float2, DataType.float1],
         returnType: DataType.float4
       }]
     });
@@ -4148,114 +4700,11 @@ const wgslBackend = {
   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
@@ -4567,6 +5016,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,
@@ -4588,6 +5075,338 @@ function rendererWebGPU(p5, fn) {
     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;
+    }
+
+    /**
+     * Updates a single element in the buffer at a given index. Use this
+     * when only a small number of elements need to change. If you need to
+     * replace all the data at once, use
+     * <a href="#/p5.StorageBuffer/update">`update()`</a> instead.
+     *
+     * ```js
+     * let buf;
+     *
+     * async function setup() {
+     *   await createCanvas(100, 100, WEBGPU);
+     *
+     *   // Float buffer: update one value by index
+     *   buf = createStorage(new Float32Array([1, 2, 3, 4]));
+     *   buf.set(2, 9.5); // only index 2 changes → [1, 2, 9.5, 4]
+     *
+     *   let result = await buf.read();
+     *   print(result[2]); // 9.5
+     *   describe('Prints 9.5 to the console.');
+     * }
+     * ```
+     *
+     * ```js
+     * let particles;
+     * const numParticles = 100;
+     *
+     * async function setup() {
+     *   await createCanvas(100, 100, WEBGPU);
+     *   particles = createStorage(makeParticles());
+     *
+     *   // Replace particle 42 without touching the others
+     *   particles.set(42, {
+     *     position: createVector(0, 0),
+     *     velocity: createVector(1, 0),
+     *   });
+     *
+     *   // Read back to confirm the update
+     *   let result = await particles.read();
+     *   print(result[42].position.x, result[42].position.y); // 0, 0
+     *   describe('Prints the position of particle 42 after updating it.');
+     * }
+     *
+     * function makeParticles() {
+     *   let data = [];
+     *   for (let i = 0; i < numParticles; i++) {
+     *     data.push({
+     *       position: createVector(random(width), random(height)),
+     *       velocity: createVector(random(-1, 1), random(-1, 1)),
+     *     });
+     *   }
+     *   return data;
+     * }
+     * ```
+     *
+     * @method set
+     * @for p5.StorageBuffer
+     * @beta
+     * @webgpu
+     * @webgpuOnly
+     * @param {Number} index The zero-based index of the element to update.
+     * @param {Number|Object} value The new value. Pass a number for float
+     *   buffers, or a plain object matching the original struct layout for
+     *   struct buffers.
+     */
+    set(index, value) {
+      const device = this._renderer.device;
+
+      if (this._schema !== null) {
+        // buffer was created with an array of structs
+        if (typeof value !== 'object' || value === null || Array.isArray(value)) {
+          throw new Error(
+            'set() expects a plain object matching the original struct format for this buffer'
+          );
+        }
+
+        const { stride } = this._schema;
+        const byteOffset = index * stride;
+
+        if (byteOffset + stride > this.size) {
+          throw new Error(
+            `set() index ${index} is out of bounds for this buffer ` +
+            `(buffer holds ${Math.floor(this.size / stride)} elements)`
+          );
+        }
+
+        // pack just this one element using the same logic as update()
+        const packed = this._renderer._packStructArray([value], this._schema);
+        // use packed.buffer (ArrayBuffer) so the size arg is always in bytes
+        device.queue.writeBuffer(this.buffer, byteOffset, packed.buffer, 0, stride);
+      } else {
+        // buffer was created with a float array
+        if (typeof value !== 'number') {
+          throw new Error(
+            'set() expects a number for this float buffer'
+          );
+        }
+
+        const byteOffset = index * 4;
+
+        if (byteOffset + 4 > this.size) {
+          throw new Error(
+            `set() index ${index} is out of bounds for this buffer ` +
+            `(buffer holds ${Math.floor(this.size / 4)} floats)`
+          );
+        }
+
+        device.queue.writeBuffer(this.buffer, byteOffset, new Float32Array([value]));
+      }
+    }
+  }
+
+  /**
+   * 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);
@@ -4639,6 +5458,9 @@ function rendererWebGPU(p5, fn) {
       // 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;
@@ -4715,7 +5537,7 @@ function rendererWebGPU(p5, fn) {
         }
         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
@@ -4849,9 +5671,21 @@ function rendererWebGPU(p5, fn) {
       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();
@@ -5054,7 +5888,8 @@ function rendererWebGPU(p5, fn) {
       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) :
@@ -5065,9 +5900,9 @@ function rendererWebGPU(p5, fn) {
         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;
@@ -5095,6 +5930,31 @@ function rendererWebGPU(p5, fn) {
     _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() });
 
@@ -5119,25 +5979,27 @@ function rendererWebGPU(p5, fn) {
             },
             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',
+            ...(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,
               },
-              stencilBack: {
-                compare: clipping ? 'always' : (clipApplied ? 'not-equal' : 'always'),
-                failOp: 'keep',
-                depthFailOp: 'keep',
-                passOp: clipping ? 'replace' : 'keep',
-              },
-              stencilReadMask: 0xFF,
-              stencilWriteMask: clipping ? 0xFF : 0x00,
-            },
+            } : {}),
           });
           shader._pipelineCache.set(key, pipeline);
         }
@@ -5193,7 +6055,9 @@ function rendererWebGPU(p5, fn) {
         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);
@@ -5227,6 +6091,24 @@ function rendererWebGPU(p5, fn) {
         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) {
@@ -5245,6 +6127,7 @@ function rendererWebGPU(p5, fn) {
       shader._pipelineLayout = this.device.createPipelineLayout({
         bindGroupLayouts: shader._bindGroupLayouts,
       });
+      shader._compiled = true;
     }
 
     _getBlendState(mode) {
@@ -5491,8 +6374,11 @@ function rendererWebGPU(p5, fn) {
 
     _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();
@@ -5603,6 +6489,8 @@ function rendererWebGPU(p5, fn) {
       // 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();
@@ -5610,7 +6498,12 @@ function rendererWebGPU(p5, fn) {
       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) {
@@ -5625,6 +6518,8 @@ function rendererWebGPU(p5, fn) {
 
       // 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
@@ -5938,7 +6833,6 @@ function rendererWebGPU(p5, fn) {
         }
         this.flushDraw();
 
-        // this._pInst.background('red');
         this._pInst.push();
         this.states.setValue('enableLighting', false);
         this.states.setValue('activeImageLight', null);
@@ -6003,25 +6897,9 @@ function rendererWebGPU(p5, fn) {
 
       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;
@@ -6029,6 +6907,58 @@ function rendererWebGPU(p5, fn) {
         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
@@ -6081,6 +7011,13 @@ function rendererWebGPU(p5, fn) {
           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) {
@@ -6110,6 +7047,19 @@ function rendererWebGPU(p5, fn) {
                   : { 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,
@@ -6143,84 +7093,71 @@ function rendererWebGPU(p5, fn) {
           );
         }
       }
+      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);
       }
     }
 
@@ -6367,10 +7304,11 @@ function rendererWebGPU(p5, fn) {
       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),
@@ -6381,7 +7319,7 @@ function rendererWebGPU(p5, fn) {
         });
       }
 
-      if (uniformGroups.length === 0) {
+      if (uniformGroups.length === 0 && shader.shaderType !== 'compute') {
         throw new Error('Expected at least one uniform struct bound to @group(0)');
       }
 
@@ -6408,6 +7346,10 @@ function rendererWebGPU(p5, fn) {
       // 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 = {};
@@ -6417,8 +7359,11 @@ function rendererWebGPU(p5, fn) {
 
       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;
@@ -6453,21 +7398,51 @@ function rendererWebGPU(p5, fn) {
             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));
@@ -6482,7 +7457,7 @@ function rendererWebGPU(p5, fn) {
       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);
@@ -6589,7 +7564,7 @@ function rendererWebGPU(p5, fn) {
                 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": "() {}",
             },
           }
@@ -6614,7 +7589,7 @@ function rendererWebGPU(p5, fn) {
             },
             fragment: {
               "void beforeFragment": "() {}",
-              "vec4<f32> getFinalColor": "(color: vec4<f32>) { return color; }",
+              "vec4<f32> getFinalColor": "(color: vec4<f32>, texCoord: vec2<f32>) { return color; }",
               "void afterFragment": "() {}",
             },
           }
@@ -6640,7 +7615,7 @@ function rendererWebGPU(p5, fn) {
             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": "() {}",
             },
@@ -6799,11 +7774,87 @@ function rendererWebGPU(p5, fn) {
         }
       );
 
-      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
@@ -6823,6 +7874,7 @@ function rendererWebGPU(p5, fn) {
         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
@@ -6833,8 +7885,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
@@ -6900,10 +7958,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;
@@ -6911,12 +7968,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) {
@@ -6940,11 +8041,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`;
@@ -6953,40 +8050,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;
@@ -7045,6 +8147,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}!`);
       }
@@ -7176,7 +8282,7 @@ ${hookUniformFields}}
     }
 
     defaultFramebufferAntialias() {
-      return true;
+      return this._pInst._webgpuAttributes?.antialias !== false;
     }
 
     supportsFramebufferAntialias() {
@@ -7369,6 +8475,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';
@@ -7665,10 +9032,6 @@ ${hookUniformFields}}
       return super.filter(...args);
     }
 
-    getNoiseShaderSnippet() {
-      return noiseWGSL;
-    }
-
 
     baseFilterShader() {
       if (!this._baseFilterShader) {
@@ -7692,6 +9055,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
      */
@@ -7791,6 +9169,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;
@@ -7801,6 +9242,7 @@ ${hookUniformFields}}
   fn.setAttributes = async function (key, value) {
     return this._renderer._setAttributes(key, value);
   };
+
 }
 
 if (typeof p5 !== "undefined") {