p5 2.2.3 → 2.3.0-rc.1

package/dist/webgpu/p5.RendererWebGPU.js

@@ -1,4 +1,4 @@
-import { W as WEBGPU, T as TRIANGLE_STRIP, L as LIGHTEST, D as DARKEST, S as SUBTRACT, R as REPLACE, E as EXCLUSION, a as SCREEN, M as MULTIPLY, b as REMOVE, A as ADD, B as BLEND, c as TRIANGLES, U as UNSIGNED_BYTE, F as FLOAT, H as HALF_FLOAT, d as UNSIGNED_INT, e as MIRROR, f as REPEAT, C as CLAMP, g as LINEAR, N as NEAREST } from '../constants-BdTiYOQI.js';
+import { W as WEBGPU, T as TRIANGLE_STRIP, L as LIGHTEST, D as DARKEST, S as SUBTRACT, R as REPLACE, E as EXCLUSION, a as SCREEN, M as MULTIPLY, b as REMOVE, A as ADD, B as BLEND, c as TRIANGLES, U as UNSIGNED_BYTE, F as FLOAT, H as HALF_FLOAT, d as UNSIGNED_INT, e as MIRROR, f as REPEAT, C as CLAMP, g as LINEAR, N as NEAREST } from '../constants-0wkVUfqa.js';
 import { getStrokeDefs } from '../webgl/enums.js';
 import { DataType } from '../strands/ir_types.js';
 import { colorVertexShader, colorFragmentShader } from './shaders/color.js';
@@ -7,15 +7,26 @@ import { materialVertexShader, materialFragmentShader } from './shaders/material
 import { fontVertexShader, fontFragmentShader } from './shaders/font.js';
 import { blitVertexShader, blitFragmentShader } from './shaders/blit.js';
 import { wgslBackend } from './strands_wgslBackend.js';
-import noiseWGSL from './shaders/functions/noise3DWGSL.js';
 import { baseFilterVertexShader, baseFilterFragmentShader } from './shaders/filters/base.js';
 import { imageLightVertexShader, imageLightDiffusedFragmentShader, imageLightSpecularFragmentShader } from './shaders/imageLight.js';
+import { baseComputeShader } from './shaders/compute.js';
+import './shaders/functions/noise3DWGSL.js';
+import './shaders/functions/randomWGSL.js';
+import './shaders/functions/randomVertWGSL.js';
+import './shaders/functions/randomComputeWGSL.js';
 import '../strands/ir_dag.js';
 import '../strands/strands_FES.js';
-import '../ir_builders-Cd6rU9Vm.js';
+import '../ir_builders-C2ebb6Lu.js';
 import '../strands/ir_cfg.js';
 import '../strands/strands_builtins.js';
 
+/**
+ * @module 3D
+ * @submodule p5.strands
+ * @for p5
+ */
+
+
 const FRAME_STATE = {
   PENDING: 0,
   UNPROMOTED: 1,
@@ -37,6 +48,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);
@@ -88,6 +431,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;
@@ -164,7 +510,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
@@ -298,9 +644,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();
@@ -503,7 +861,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) :
@@ -514,9 +873,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;
@@ -544,6 +903,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() });
 
@@ -568,25 +952,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',
-              },
-              stencilBack: {
-                compare: clipping ? 'always' : (clipApplied ? 'not-equal' : 'always'),
-                failOp: 'keep',
-                depthFailOp: 'keep',
-                passOp: clipping ? 'replace' : 'keep',
+            ...(depthFormat ? {
+              depthStencil: {
+                format: depthFormat,
+                depthWriteEnabled: !clipping,
+                depthCompare: 'less-equal',
+                stencilFront: {
+                  compare: clipping ? 'always' : (clipApplied ? 'not-equal' : 'always'),
+                  failOp: 'keep',
+                  depthFailOp: 'keep',
+                  passOp: clipping ? 'replace' : 'keep',
+                },
+                stencilBack: {
+                  compare: clipping ? 'always' : (clipApplied ? 'not-equal' : 'always'),
+                  failOp: 'keep',
+                  depthFailOp: 'keep',
+                  passOp: clipping ? 'replace' : 'keep',
+                },
+                stencilReadMask: 0xFF,
+                stencilWriteMask: clipping ? 0xFF : 0x00,
               },
-              stencilReadMask: 0xFF,
-              stencilWriteMask: clipping ? 0xFF : 0x00,
-            },
+            } : {}),
           });
           shader._pipelineCache.set(key, pipeline);
         }
@@ -642,7 +1028,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);
@@ -676,6 +1064,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) {
@@ -694,6 +1100,7 @@ function rendererWebGPU(p5, fn) {
       shader._pipelineLayout = this.device.createPipelineLayout({
         bindGroupLayouts: shader._bindGroupLayouts,
       });
+      shader._compiled = true;
     }
 
     _getBlendState(mode) {
@@ -940,8 +1347,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();
@@ -1052,6 +1462,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();
@@ -1060,6 +1472,11 @@ function rendererWebGPU(p5, fn) {
     }
 
     _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) {
@@ -1074,6 +1491,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
@@ -1387,7 +1806,6 @@ function rendererWebGPU(p5, fn) {
         }
         this.flushDraw();
 
-        // this._pInst.background('red');
         this._pInst.push();
         this.states.setValue('enableLighting', false);
         this.states.setValue('activeImageLight', null);
@@ -1452,25 +1870,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;
@@ -1478,6 +1880,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
@@ -1530,6 +1984,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) {
@@ -1559,6 +2020,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,
@@ -1592,84 +2066,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);
       }
     }
 
@@ -1816,10 +2277,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),
@@ -1830,7 +2292,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)');
       }
 
@@ -1857,6 +2319,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 = {};
@@ -1866,8 +2332,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;
@@ -1902,21 +2371,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));
@@ -1931,7 +2430,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);
@@ -2038,7 +2537,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": "() {}",
             },
           }
@@ -2063,7 +2562,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": "() {}",
             },
           }
@@ -2089,7 +2588,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": "() {}",
             },
@@ -2248,11 +2747,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
@@ -2272,6 +2847,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
@@ -2282,8 +2858,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
@@ -2349,10 +2931,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;
@@ -2360,12 +2941,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) {
@@ -2389,11 +3014,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`;
@@ -2402,40 +3023,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;
@@ -2494,6 +3120,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}!`);
       }
@@ -2625,7 +3255,7 @@ ${hookUniformFields}}
     }
 
     defaultFramebufferAntialias() {
-      return true;
+      return this._pInst._webgpuAttributes?.antialias !== false;
     }
 
     supportsFramebufferAntialias() {
@@ -2818,6 +3448,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';
@@ -3114,10 +4005,6 @@ ${hookUniformFields}}
       return super.filter(...args);
     }
 
-    getNoiseShaderSnippet() {
-      return noiseWGSL;
-    }
-
 
     baseFilterShader() {
       if (!this._baseFilterShader) {
@@ -3141,6 +4028,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
      */
@@ -3240,6 +4142,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;
@@ -3250,6 +4215,7 @@ ${hookUniformFields}}
   fn.setAttributes = async function (key, value) {
     return this._renderer._setAttributes(key, value);
   };
+
 }
 
 if (typeof p5 !== "undefined") {