Merge pull request #8531 from processing/compute-shaders

WebGPU compute shaders

Author: davepagurek

docs/parameterData.json

@@ -32,6 +32,14 @@
       let env;
       let instance;
 
+      // Compute shader variables
+      let computeShader;
+      let particleBuffer;
+      let bouncingCirclesShader;
+      let circleGeometry;
+      const NUM_CIRCLES = 100;
+      const RADIUS = 2;
+
       p.setup = async function () {
         await p.createCanvas(400, 400, p.WEBGPU);
         env = await p.loadImage('img/spheremap.jpg');
@@ -41,6 +49,7 @@
         fbo = p.createFramebuffer();
 
         instance = p.buildGeometry(() => p.sphere(5));
+        circleGeometry = p.buildGeometry(() => p.sphere(RADIUS));
 
         redFilter = p.baseFilterShader().modify(() => {
           p.getColor((inputs, canvasContent) => {
@@ -64,22 +73,10 @@
         }
         tex.updatePixels();
         fbo.draw(() => {
-          //p.clear();
-          //p.background('orange');
           p.imageMode(p.CENTER);
           p.image(tex, 0, 0, p.width, p.height);
         });
 
-        /*sh = p.baseMaterialShader().modify({
-          uniforms: {
-            'f32 time': () => p.millis(),
-          },
-          'Vertex getWorldInputs': `(inputs: Vertex) {
-            var result = inputs;
-            result.position.y += 40.0 * sin(uniforms.time * 0.005);
-            return result;
-          }`,
-        })*/
         sh = p.baseMaterialShader().modify(() => {
           const time = p.uniformFloat(() => p.millis());
           p.getWorldInputs((inputs) => {
@@ -93,19 +90,67 @@
             return inputs;
           });
         }, { p })
-	/*ssh = p.baseStrokeShader().modify({
-          uniforms: {
-            'f32 time': () => p.millis(),
-          },
-          'StrokeVertex getWorldInputs': `(inputs: StrokeVertex) {
-            var result = inputs;
-            result.position.y += 40.0 * sin(uniforms.time * 0.005);
-            return result;
-          }`,
-	})*/
+
+        // Initialize storage buffers with random positions and velocities
+        const initialParticles = [];
+        for (let i = 0; i < NUM_CIRCLES; i++) {
+          initialParticles.push({
+            position: [p.random(-150, 150), p.random(-150, 150)],
+            velocity: [
+              0.1 * p.random(1, 3) * (p.random() > 0.5 ? 1 : -1),
+              0.1 * p.random(1, 3) * (p.random() > 0.5 ? 1 : -1)
+            ]
+          })
+        }
+
+        particleBuffer = p.createStorage(initialParticles);
+
+        // Create compute shader for physics simulation
+        computeShader = p.buildComputeShader(() => {
+          const particles = p.uniformStorage('particles', particleBuffer);
+          const bounds = p.uniformVec2(() => [p.width / 2 - RADIUS, p.height / 2 - RADIUS]);
+          const deltaTime = p.uniformFloat(() => p.deltaTime * 0.1);
+
+          const idx = p.index.x;
+
+          // Read current position and velocity
+          let position = particles[idx].position;
+          let velocity = particles[idx].velocity;
+
+          // Update position
+          position += velocity * deltaTime;
+
+          // Bounce off boundaries
+          if (position.x > bounds.x || position.x < -bounds.x) {
+            velocity.x = -velocity.x;
+            position.x = p.clamp(position.x, -bounds.x, bounds.x);
+          }
+          if (position.y > bounds.y || position.y < -bounds.y) {
+            velocity.y = -velocity.y;
+            position.y = p.clamp(position.y, -bounds.y, bounds.y);
+          }
+
+          particles[idx].position = position;
+          particles[idx].velocity = velocity;
+        }, { p, RADIUS, particleBuffer });
+
+        // Shader for rendering bouncing circles from storage buffer
+        bouncingCirclesShader = p.baseMaterialShader().modify(() => {
+          const particles = p.uniformStorage('particles', particleBuffer);
+
+          p.getWorldInputs((inputs) => {
+            const instanceIdx = p.instanceID();
+            inputs.position.xy += particles[instanceIdx].position;
+            return inputs;
+          });
+        }, { p, particleBuffer });
       };
 
       p.draw = function () {
+        // Run compute shader to update physics
+        debugger
+        p.compute(computeShader, NUM_CIRCLES);
+
         p.clear();
         p.rotateY(p.millis() * 0.001);
         p.push();
@@ -168,6 +213,14 @@
         p.model(instance, 10);
         p.pop();
 
+        // Draw compute shader-driven bouncing circles
+        p.push();
+        p.shader(bouncingCirclesShader);
+        p.noStroke();
+        p.fill('#4ECDC4');
+        p.model(circleGeometry, NUM_CIRCLES);
+        p.pop();
+
         // Test beginShape/endShape with immediate mode shapes
         p.push();
         p.translate(0, 100, 0);

preview/index.html

@@ -61,6 +61,13 @@ class Color {
   static #colorjsMaxes = {};
   static #grayscaleMap = {};
 
+  // This property is here where duck typing (checking if obj.isColor) needs
+  // to be used over more standard type checking (obj instanceof Color). This
+  // needs to happen where we are building multiple files, such as in p5.webgpu.js,
+  // where if we `import { Color }` directly, it will be a separate copy of the
+  // Color class from the one imported in the main p5.js bundle.
+  isColor = true;
+
   // Used to add additional color modes to p5.js
   // Uses underlying library's definition
   static addColorMode(mode, definition){
@@ -364,7 +371,7 @@ class Color {
    if (format === undefined && this._defaultStringValue !== undefined) {
       return this._defaultStringValue;
    }
-   
+
     let outputFormat = format;
     if (format === '#rrggbb') {
       outputFormat = 'hex';
@@ -377,10 +384,10 @@ class Color {
       colorString = serialize(this._color, {
         format: outputFormat
       });
-      
+
       if (format === '#rrggbb') {
         colorString = String(colorString);
-        if (colorString.length === 4) { 
+        if (colorString.length === 4) {
             const r = colorString[1];
             const g = colorString[2];
             const b = colorString[3];