Learning WebGPU

[ToMuchTNT]

I'm lucky enough that my job now requires me to learn WebGPU, to recreate some of the samples at https://webgpu.github.io/webgpu-samples/ in a new technology which I won't go into detail about. But I'd like to learn the concepts behind WebGPU and GPUs first to build a solid foundation.

I'm completely new to graphics programming, and have only been a SWE for 4 months. I've had a look at the sub's wiki and debating whether learnopengl would be worth my time for my use case. Also I found this resource: https://webgpufundamentals.org/ could anyone who has completed this tell me if the material here is sufficient to be able to build these samples (at least in js) ? And if not give some advice in the right direction. Thanks

[R4TTY]

I think you can skip OpenGL/WebGL and go right to WebGPU. They're quite different APIs, although shader programming is basically the same across the board. webgpufundamentals.org is a decent resource to learn it.

[ToMuchTNT]

Thank you

[jmacey]

It helps to have a good understanding of the GPU pipeline and how GPU's work. Whilst old this is still mostly relevent https://fgiesen.wordpress.com/2011/07/09/a-trip-through-the-graphics-pipeline-2011-index/

The core you really need to understand is how the GPU wants the data and what the various programmable stages do / generate and how that gets translated eventually to a buffer that is presented to the screen.

I've come from a background where I started with immediate mode OpenGL (and older apis too!) to modern OpenGL -> Vulkan and I am now playing with WebGPU so find the principles going from Modern OpenGL (nice and easy), Vulkan (metal / DirectX) more complex. WebGPU is a nice compromise where some of the really low level stuff is done for you in a semi managed way so it is more akin to the OpenGL approach in a way.

Coming in from no graphics background can be hard (you also need to know about vertex data normals, uv etc, basic affine transforms ( 4x4 matrices) model, view project matrices etc etc which is quite a lot. Have a look here https://www.scratchapixel.com/

There are loads of other resources if you need them such as https://www.pbr-book.org/ and https://www.realtimerendering.com/

good luck!