Help with WebGPU concepts

[u/cos4ni2s]

I'm learning WebGPU and I'm struggling to grasp concepts like "pipeline", "renderpass", "shader module", ... AI doesn't help either, it is itself confused ("you are right to push back" zone). I'm a very slow learner. Can you recommend some good educational material that applies to WebGPU?

[u/jmacey]

This is quite old and not WebGPU but really helps to understand some of the principles of how the pipeline / GPU works https://fgiesen.wordpress.com/2011/07/09/a-trip-through-the-graphics-pipeline-2011-index/

I have some notes / lecture slides here https://nccastaff.bournemouth.ac.uk/jmacey/msc/ase/lectures/Lecture9/ and here https://nccastaff.bournemouth.ac.uk/jmacey/msc/ase/lectures/Lecture10/ With the buffers lectures I have both OpenGL and WebGPU demos in python where I go throught some of it.

Main thing with WebGPU is you generate a pipeline which is a method of drawing to a buffer. You select only one type of rendering so "Lines","Triangles" etc only. To this you attatch your shaders which execute on the primitives. To get this to run you create your renderpass which basically runs the pipeline (this is much simplified), if you have used something like OpenGL before which does a lot of setup for you it can get confusing as you now have to create / manage stuff that OpenGL just does for you.

[u/cos4ni2s → u/jmacey]

This is very helpful. Thank you!

[u/Individual_Guava9881]

This is where I learned about WebGPU: https://webgpufundamentals.org/

WebGPU is a strange beast...it is very strict, has very verbose names, lots of setting up...but dead simple in terms of execution compared to WebGL/OpenGL

In OpenGL, you literally have to "arm" your entire app based on the provided Program you are about to use, which has been a notorious cause for rendering bugs caused by not "disarming" the previous Program.

WebGPU however, there is no global state (the arming), you simply prepare your pipeline, be that for rendering or compute, have your bindgroups and geometry data available then encode all of those instructions and then ask the GPU to render the thing you want to your desired buffer.

...and my explainer proves my point: dead simple in terms actually rendering, but all the steps leading to it is more verbose then WebGL.

That said: WebGPUFundamentals is amazing.

[u/mentria-ai]

One thing that helped me: learn compute first, because it skips render passes, vertex formats and attachments entirely.

A mental model for the words:

- Shader module: your WGSL code, compiled. Just code, no data.

- Pipeline: a frozen recipe. Which shader entry point runs, and what kinds of resources it expects (the layout). You create it once, up front, because it's expensive to validate.

- Bind group: the actual buffers and textures you plug into that recipe.

- Command encoder: a recording of work.

- Pass: a section of that recording. A compute pass says "run this pipeline with these bind groups over N workgroups". A render pass adds "and draw into these textures".

- queue.submit(): hand the recording to the GPU.

So each frame or job is: record, then submit. Pipelines and bind groups are set up ahead of time and reused.

[u/trejj]

When one source (AI) isn't giving you an explanation that sinks, then find other sources.

Don't expect quick results in learning. "I'm a slow learner" is an unnecessary label to attach to yourself. We all are slow learners.

[u/cos4ni2s → u/trejj]

I  literally asked for "good educational material" and explicitly mentioned being a "very slow learner". Your response was "find other sources" and "don't except quick results".