added compute shader

[Rishab87]

Resolves #7345

Changes:

I have added a class for compute shader.

Screenshots of the change:

PR Checklist

• npm run lint passes
• Inline documentation is included / updated
• Unit tests are included / updated

[davepagurek]

Hi! Have you tried running this in a test sketch (e.g. by editing preview/index.html and running npm run dev) to see how this works and where it fails? If not, that could be a good way to start, and it will also help reviewers see what the intention of the code is and where issues might lie.

Some unit tests would also be helpful, e.g. ensuring that the struct is parsed into sizes correctly after creating a shader.

[Rishab87]

@davepagurek , I've added tests last 2 tests, ComputeShader setParticles and getParticles and ComputeShader compute function are failing I'm just seeing this:

For sketch:

let computeShader;
let particleCount = 1000;

function setup() {
  createCanvas(800, 600, WEBGL);
  
  computeShader = createComputeShader({
    particleCount: particleCount,
    particleStruct: {
      position: 'vec3',
      velocity: 'vec3',
      color: 'vec3',
      lifetime: 'float'
    },
    computeFunction: `
      #define PI 3.1415926535897932384626433832795

      vec3 curlNoise(vec3 p) {
        const float e = 0.1;
        vec3 dx = vec3(e, 0.0, 0.0);
        vec3 dy = vec3(0.0, e, 0.0);
        vec3 dz = vec3(0.0, 0.0, e);
        
        vec3 p_x0 = sin(p - dx);
        vec3 p_x1 = sin(p + dx);
        vec3 p_y0 = sin(p - dy);
        vec3 p_y1 = sin(p + dy);
        vec3 p_z0 = sin(p - dz);
        vec3 p_z1 = sin(p + dz);
        
        float x = p_y1.z - p_y0.z - p_z1.y + p_z0.y;
        float y = p_z1.x - p_z0.x - p_x1.z + p_x0.z;
        float z = p_x1.y - p_x0.y - p_y1.x + p_y0.x;
        
        return normalize(vec3(x, y, z));
      }

      Particle compute(Particle p) {
        // Apply curl noise to velocity
        vec3 noise = curlNoise(p.position * 0.1);
        p.velocity += noise * 0.01;

        // Update position
        p.position += p.velocity;

        // Decrease lifetime
        p.lifetime -= 0.01;

        // Reset particle if lifetime is over
        if (p.lifetime <= 0.0) {
          p.position = vec3(rand(vTexCoord) * 2.0 - 1.0, rand(vTexCoord.yx) * 2.0 - 1.0, rand(vTexCoord.xy) * 2.0 - 1.0);
          p.velocity = vec3(0.0);
          p.color = vec3(rand(vTexCoord), rand(vTexCoord.yx), rand(vTexCoord.xy));
          p.lifetime = 5.0 + rand(vTexCoord.xy) * 5.0;
        }

        // Wrap around boundaries
        p.position = mod(p.position + vec3(1.0), vec3(2.0)) - vec3(1.0);
        
        return p;
      }
    `
  });

  // Initialize particles
  let initialParticles = [];
  for (let i = 0; i < particleCount; i++) {
    initialParticles.push({
      position: [random(-1, 1), random(-1, 1), random(-1, 1)],
      velocity: [0, 0, 0],
      color: [random(), random(), random()],
      lifetime: random(5, 10)
    });
  }
  computeShader.setParticles(initialParticles);
}

function draw() {
  background(0);
  
  // Compute particle positions
  computeShader.compute();
  
  // Get updated particles
  let particles = computeShader.getParticles();
  
  // Render particles
  push();
  noStroke();
  for (let p of particles) {
    push();
    translate(p.position[0] * width/2, p.position[1] * height/2, p.position[2] * 100);
    fill(p.color[0] * 255, p.color[1] * 255, p.color[2] * 255, map(p.lifetime, 0, 10, 0, 255));
    sphere(2);
    pop();
  }
  pop();
}

Honestly, I'm very new to shaders so dont know much about them and I'm a bit confused at this point, can you suggest me a great starting point to look into this issue, it will help me a lot!

[Rishab87]

Hi @davepagurek , anything else I need to provide?