Best way to render a buffer generated by a computer shader?

[OmarShehata]

I'm trying to understand Markus Schütz's technique for rendering point clouds efficiently with compute shaders (which he gave an excellent talk about in the May WebGL meetup: https://www.youtube.com/watch?v=OIfqWD5NlNc). One thing I'm stuck on is, how do you efficiently take a buffer generated by a compute shader and draw that to the screen?

Do you treat that buffer as an input to a simple frag shader that just reads it in and outputs each value as a pixel color? Or is there a way to more "directly" use the output of a compute shader onto the screen?

For context, the general idea of this technique as I understand it is that in some cases when rendering point clouds, it can be faster to output pixel values from a compute shader compared to rendering the points directly as point-list primitives. There's more detail on this here: https://github.com/m-schuetz/compute_rasterizer#compute-shader-based-point-cloud-rendering

The paper talks about doing a "resolve pass" to copy the contents of the compute shader buffer to a texture. I'm not sure if that's special terminology or if that's the same as a frag shader that draws pixels from that input buffer into a render target?

[ben-clayton]

Hi @OmarShehata,

If each point is a single texel, it might be more efficient to skip the typical rasterization stages and write directly to a storage texture or buffer. Point and line primitives can have poor performance on some hardware, and currently WGSL does not support point sizes greater than one.

If the points are all single texels, and you want to accumulate the values (two points projected to the same coordinate result in twice the value), it might make sense to use atomicAdd() on a storage buffer, and then use that for presentation.

If the points need to be larger than a single texel, be nicely rounded, or have more advanced blending, it might be better to render them as instanced quads. I wrote a particle sample last week that you might find interesting:
https://austin-eng.com/webgpu-samples/samples/particles

Cheers,
Ben

[OmarShehata]

Thanks a lot @ben-clayton ! This example you provided sounds like exactly what I'm looking for. One thing I'm having a hard time seeing in the code is where exactly do you take the storage texture created by the compute shader and use it in the render pass? I'm looking for where tex_out is passed to the fragment shader (assuming that is where the compute shader outputs)

EDIT: actually it looks like it's particlesBuffer that is written to in the compute shader, and then it's set as the vertex buffer in the render pass (and then those particles are drawn as quads) ?

[ben-clayton]

Hi Omar,

EDIT: actually it looks like it's particlesBuffer that is written to in the compute shader, and then it's set as the vertex buffer in the render pass (and then those particles are drawn as quads) ?

That's right. The texture is only used as a probability map for picking the location of where to spawn new particles, along with the RGB values for setting the particle colors. While the particles are still 'alive', the texture is not used. The particles are simulated each frame, where their positions and colors are adjusted due to gravity and aging, and the updated positions and colors are used as by the vertex shader for drawing the screen-aligned quads.

[kvark]

One thing I'm stuck on is, how do you efficiently take a buffer generated by a compute shader and draw that to the screen?

I think this is a general question about graphics APIs. There isn't such a thing as "draw buffer to screen" at all.
You can draw points, lines, or triangles. And your vertex shader, which generates positions for them, can use any buffers as input.
For example, you can bind that buffer as a vertex buffer, potentially at instance rate. Or you can bind it as a read-only storage buffer and read directly in the vertex shader.

[OmarShehata]

I think this is a general question about graphics APIs. There isn't such a thing as "draw buffer to screen" at all.

Right, I guess to clarify, I meant to ask what is the most efficient way to transfer memory for this use case. If my compute shader writes to a buffer, can I read that buffer then directly as a texture in my frag shader, without copying it to the CPU then back to the GPU?

[kvark]

You definitely don't need to copy it to CPU. You can't read it as a texture (although a feature for this was proposed earlier), but you can bind it as a storage buffer to fragment shaders, just like you bound it for compute. You'd probably need a read-only storage binding.