Add compute shaders

[RandomGamingDev]

Increasing access

Although WebGL doesn't have official compute shaders, they can be emulated using a few vector shaders, a FBO, and fragment shaders for the actual calculations.

While p5.js's focus isn't computation, this would be perfect for many types of rendering (e.g. raytracing, raymarching, and certain types of culling). It wouldn't provide a speed benefit compared to doing it yourself, but it would mean less boilerplate being required, allow for computations for computation visualizations which are also popular in p5.js, make it easier to create more advanced graphics in p5.js, and also introduce a lot of beginners to the topic of compute shaders (part of p5.js's key principles is to help beginners, which is also part of why shaders, and attempts to make shaders easier, which is why I think this would work well).

Most appropriate sub-area of p5.js?

• Accessibility
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• Build process
• Unit testing
• Internationalization
• Friendly errors
• Other (specify if possible)

Feature request details

Create computer shader equivalents to createShader() and loadShader() (e.g. createComputeShader() and loadComputeShader()). p5.js would handle the boilerplate in terms of setting up the vertex shaders, part of the fragment shader, and FBO, meaning that the user would only get specific variable inputs and outputs, with the output getting written to a TypedArary buffer.

[Vaivaswat2244]

Hey, @RandomGamingDev,
maybe for making the computeShader feature, the following approaching might help,
webgl/p5.Shader.js

initComputeFBO(width, height) {
  const gl = this._renderer.GL;

  this._computeFramebuffer = gl.createFramebuffer();
  gl.bindFramebuffer(gl.FRAMEBUFFER, this._computeFramebuffer);

  // Creating Texture to store compute shader results
  this._computeTexture = gl.createTexture();
  gl.bindTexture(gl.TEXTURE_2D, this._computeTexture);
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);

  // FBO implementation
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);

  
  gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this._computeTexture, 0);

  // Check for FBO completeness
  if (gl.checkFramebufferStatus(gl.FRAMEBUFFER) !== gl.FRAMEBUFFER_COMPLETE) {
    console.error("Failed to initialize compute framebuffer");
  }

  gl.bindFramebuffer(gl.FRAMEBUFFER, null);
}

computeShader(width, height, callback) {
  const gl = this._renderer.GL;

 
  gl.bindFramebuffer(gl.FRAMEBUFFER, this._computeFramebuffer);
  gl.viewport(0, 0, width, height);
  if (callback) callback(this._computeTexture);
  gl.bindFramebuffer(gl.FRAMEBUFFER, null);
}

[Vaivaswat2244]

@davepagurek any advice on this? or something I should change?

[Rishab87]

@davepagurek , if no one's worknig on this can I try solving it?