10 ms·

Show HN: Free e-book about WebGPU Programming

471 points by billconan 2y ago

I am excited to announce the launch of my e-book on Graphics/WebGPU programming! This project has consumed much of my spare time, during which I developed various tools to facilitate the publishing process, including a code playground and a static site generator that can reference sample codes. However, I'm feeling burnt out and ready to call it finished, even though it may not feel completely done. Avoiding another abandoned side project has been my primary motivation in reaching this point.

sramam 2y ago
This looks fantastic. Just the notion of a hyperlinked code-playground is fantastic. Not to mention the content of the book. And a side project at that? Wow. Congratulations and thanks for sharing.
ssahoo 2y ago
Great book, thanks for writing it. Just a low hanging issue. The rendering on mobile viewport especially on Firefox is not ideal. Navigation is broke and content does not scroll well.
dylanhu 2y ago
This is super impressive and really exciting as I am looking to get deeper into WebGPU. Two quick notes on the playground before I dive into the content soon: 1. The playground code does not seem to fully work on Safari. The code is there and selectable but the glyphs are invisible. EDIT: My Safari was just bugged, had to restart it and it works 2. Is the cover of the book on the right of the playground supposed to change depending on which example you are looking at? I think it could be nice if the book contents were rendered alongside the code if the user wanted instead of the cover which does not change.
- nox101 2y ago
  Safari has not shipped WebGPU. Why would you expect it to work. Until Safari officially ship WebGPU it's guaranteed to be buggy and missing features.
  - dylanhu 2y ago
    I was referring to the code editor in the playground which I assume is not powered by WebGPU. I noticed the issue on other sites as well which prompted me to restart, fixing the issue. I have WebGPU enabled in Safari through a preview flag, and running the playground examples worked fine.
shmerl 2y ago
What's the story with WebGPU in Firefox? Why is it still not enabled by default?
- nox101 2y ago
  Because they haven't finished implementing it and lots of functionality is missing. Neither has Safari ship it. Same reason. They aren't done.
  - Joel_Mckay 2y ago
    We investigated this many years ago: https://github.com/BabylonJS/Babylon.js/ https://github.com/BabylonJS/Babylon.js/ 1. It works just fine for basic 3D functionality, but has limited support for tricks like fog FX etc. WebGL is actually quite capable when combined with simplified physics engines, and animated mesh packing formats. 2. In a business context it fails to check all the boxes, as people are not going to invest in a platform with near zero IP protection. 3. Steam + Unreal has all the advantages, and none of the problems/overhead of a Browser. i.e. peoples game pads, spacial audio, and shader cache buffers will work properly. WebGL is just hitting the same VRML market that failed decades ago for the same reasons. =3
    - nox101 2y ago
      WebGL powers both Google Maps and Figma. maybe you're thinking too small as for ip protection. Which platforms do that? https://www.models-resource.com/ https://www.models-resource.com/
      - Joel_Mckay 2y ago
        Then Google Maps is still in App form because... just kidding... we both already know why. =3
        nox101 2y ago
        confused . There is no native desktop app for google maps. And it does full 3d. maybe you meant on mobile? But you brought up Steam so clearly not mobile Earth is WebGL now too https://earth.google.com https://earth.google.com
jay-barronville 2y ago
Congratulations and well done!!! > However, I'm feeling burnt out and ready to call it finished, even though it may not feel completely done. Avoiding another abandoned side project has been my primary motivation in reaching this point. Thank you for spending your time to produce this excellent resource and releasing it to us. Don’t feel too bad about it not being all the way where you’d like it to be. You can always improve it later, or even allow the community to help you improve it.
erichdongubler 2y ago
I haven't had time to dig into all of these demos, but the material looks _delightful_. In case it's interesting to anyone, I did just go on a big bug-filing spree for Firefox. There are a handful of issues (that were already on the Firefox team's radar) to resolve before all of these playgrounds work as-is: https://bugzilla.mozilla.org/show_bug.cgi?id=webgpu-unleashed https://bugzilla.mozilla.org/show_bug.cgi?id=webgpu-unleashe...
j45 2y ago
This is a lot of good content for putting out there for free, thank you so much. I know a young person who was quite interested in this and looking for a resource like this. I love the focus you've place on video, and actually making it engaging. Subject Matter Experts who undertake this are my favourite audience to be around and help. If you might be interested in exploring this content of yours into aligned educational content and delivery including videos that could support your work financially, I'd be happy to chat an share what I do as I like magnifying subject matter experts doing things like this. All knowledge is yours, strictly to add value.
mistercow 2y ago
This is great to see. I’ve been working on a WebGPU project for a couple months now, learning as I go, and it’s rough how many things there are that take tons of digging to find even remotely straight answers about. There’s the basic WGSL language and JS API, which are, strictly speaking, well documented, and then there’s the stuff where you have to skip past documentation and find the one post answering a tangentially related question by someone with a singleminded interest in GPU programming.
- pjmlp 2y ago
  This has been the state of the Web3D since WebGL 1.0, worse that after 10 years, browser vendors still don't see a need to have proper debugging in place.
  - mistercow 2y ago
    Yes, and not to mention automated testing. Apparently, deno has headless WebGPU support, which I might look into. Right now, I have this hacky build mode in my project which launches my Electron app, and sends IPC messages to launch tests (using my own, terrible minimal test framework), and then send the results back to the terminal. On the plus side, it makes me appreciate how wonderful it is to have modern dev tooling when I’m working on literally anything else.
- jamesu 2y ago
  My biggest problem with WebGPU is the documentation, especially if you delve into the native or emscripten variants. Not even fancy AI tools will save you - in fact in a lot of cases they make it worse as they often suggest solutions based on older webgpu variants or they make grossly inaccurate assumptions about how your particular webgpu implementation works. Figuring out how to properly setup the "native" version was a nightmare, I had to find a random github project where someone thankfully made a SDL2 example. I didn't really feel there was an active community that was interested in pointing me in the right direction either, more like a bunch of people too absorbed with building an API than actually caring about who is using it. Maybe things will improve in the future but I remain skeptical.
pjmlp 2y ago
It looks quite nice, great efforts.
DrMiaow 2y ago
Nice. I was just about to embark on a small game prototype in WebGPU to learn it. I'm going to start by rampaging through this book.
decodingchris 2y ago
Exactly what I was looking for! Thanks
pedrolins 2y ago
This is awesome! I’ve given up learning graphics programming in the past due to the fragmented ecosystem of libraries. It just felt overwhelming. This seems exactly what I’ve been missing.
MalcolmDwyer 2y ago
This looks great. I can't wait to dive in. Thank you very much for sharing. Formatting nitpick for the site: when viewed on mobile, the text width is set to screen width minus 1 margin, but the page is fixed at text width plus both margins, so the scrolling has a lot of sloppy side-to-side play and it's irritating to get the content lined up in the middle.
- deleted 2y ago
  [deleted]
koolala 2y ago
WebGPU burned me out too when the Firefox developers got let go. WebGPU is super slow on GPU and all the official benchmarks only care about CPU performance.
- FragmentShader 2y ago
  > WebGPU is super slow on GPU and all the official benchmarks only care about CPU performance. omg I thought I was the only one that found that. I tried webgpu (On a native context) and it was slowwwww. Only 10k non-overlapping triangles can bring my RTX GPU to its knees. It's not the shader because it was only a color. It's not the overlapping (And I tried a depth prepass as well). It's not the draw calls. The API is slow, straight up. In fact, you can try to open a WebGPU demo in your browser and check the GPU usage in the Task Manager. Close it, open a random webgl Unity game and you'll see how much a single WebGPU triangle takes compared to a full-fledged game. On my computer, the average Unity game with shadows, shaders 'n stuff takes 5% GPU and a simple WebGPU demo takes 7%.
  - grovesNL 2y ago
    > Only 10k non-overlapping triangles can bring my RTX GPU to its knees Your benchmark doesn't match the experience of people building games and applications on top of WebGPU, so something else is probably going on there. If your benchmark is set up well, you should be limited by the fill rate of your GPU, at which point you should see roughly the same performance across all APIs. > On my computer, the average Unity game with shadows, shaders 'n stuff takes 5% GPU and a simple WebGPU demo takes 7%. GPU usage isn't a great metric for performance comparisons in general because it can actually imply the inverse depending on the test case. For example, if the scenes were exactly the same, a lower GPU usage could actually suggest that you're bottlenecked by the CPU, so you can't submit commands fast enough to the GPU and the GPU is sitting idle for longer while it waits.
    - FragmentShader 2y ago
      > Your benchmark doesn't match the experience of people building games and applications on top of WebGPU Here's an example of Bevy WebGL vs Bevy WebGPU: I get 50 fps on 78k birds with WebGPU: https://bevyengine.org/examples-webgpu/stress-tests/bevymark/ https://bevyengine.org/examples-webgpu/stress-tests/bevymark... I get 50 fps on 90k birds with WebGL: https://bevyengine.org/examples/stress-tests/bevymark/ https://bevyengine.org/examples/stress-tests/bevymark/ So you test the difference between them with technically the same code. (They can get 78k birds, which is way better than my triangles, because they batch 'em. I know 10k drawcalls doesn't seem good, but any 2024 computer can handle that load with ease.) Older frameworks will get x10 better results , such as Kha (https://lemon07r.github.io/kha-html5-bunnymark/ https://lemon07r.github.io/kha-html5-bunnymark/) or OpenFL (https://lemon07r.github.io/openfl-bunnymark/ https://lemon07r.github.io/openfl-bunnymark/), but they run at lower res and this is a very CPU based benchmark, so I'm not gonna count them. > be limited by the fill rate of your GPU They're 10k triangles and they're not overlapping... There are no textures per se. No passes except the main one, with a 1080p render texture. No microtriangles. And I bet the shader is less than 0.25 ALU. > at which point you should see roughly the same performance across all APIs. Nah, ANGLE (OpenGL) does just fine. Unity as well. > a lower GPU usage could actually suggest that you're bottlenecked by the CPU No. I have yet to see a game on my computer that uses more than 0.5% of my CPU. Games are usually GPU bound.
danroc 2y ago
Nice work! Thank you for sharing. I'd like to get excited about WebGPU as well, but I am lacking enough imagination here. Games? 3D animations? What else beyond these obvious applications? Those who are excited about it: why? what are you planning to build with it?
- gizmo 2y ago
  Webgpu makes sense for anything that needs to render quickly or that needs a lot of control over how things get rendered. A slideshow program with custom font rendering & line wrapping and nice shader based transitions between slides for instance. Even something like a terminal/tty is much nicer when it renders at > 60fps with smooth scrolling. Very hard to do with DOM nodes. Because of the web a generation of programmers has forgotten how fast and responsive applications can be. Webgpu can make the web feel fast again.
- beardyw 2y ago
  I got interested in 3D animation so I took a look at this stuff. I quickly retreated to the safety of three.js!
nickpsecurity 2y ago
Many of us are non-graphics programmers interested in learning to benefit from CUDA-style parallelization. I’ve read they’re mostly incompatible, though. I know there’s vendors supporting OpenCL and Vulkan. I didn’t see many AI projects using them, though. Makes me think cross-platform approaches aren’t great for some reason. My questions: are there good, native implementations of WebGPU where learning it can replace learning CUDA or ROC for good, GPU utilization? If not, would a book like this teach us enough to easily pick up CUDA etc? Or are they very different to the point we’re better off learning the GPU-specific libraries?
- raphlinus 2y ago
  WebGPU is not yet performance competitive with CUDA, in part because the cooperative matrix multiplication ("tensor cores" in Nvidia-speak) extension is not done yet. That in turn depends on subgroups, which are pretty far along (but not yet shipping). That said, you can do machine learning in WebGPU, and, if your goal is to ship in a browser, it is viable. I personally think the performance gap can be closed with some engineering effort, and that WebGPU has the potential to become a real contender, but it's too early to say for sure. Certainly CUDA has a major head-start.
kallistisoft 2y ago
This is very well polished! Obviously took a lot of hard work and it shows in the results. Well done! Question: I see the that the code for the examples can be pulled from github, but I don't see anywhere to download the text of the book for offline reading??
Confirm2754 2y ago
A rare gem of a book! I've tried using many books to get started with GPUs, but I always ended up giving up quickly. This book is the most in-depth yet easy-to-understand one I've ever come across.

471 points by billconan 2y ago

sramam 2y ago

This looks fantastic. Just the notion of a hyperlinked code-playground is fantastic. Not to mention the content of the book. And a side project at that? Wow. Congratulations and thanks for sharing.

ssahoo 2y ago

Great book, thanks for writing it. Just a low hanging issue. The rendering on mobile viewport especially on Firefox is not ideal. Navigation is broke and content does not scroll well.

dylanhu 2y ago

This is super impressive and really exciting as I am looking to get deeper into WebGPU. Two quick notes on the playground before I dive into the content soon: 1. The playground code does not seem to fully work on Safari. The code is there and selectable but the glyphs are invisible. EDIT: My Safari was just bugged, had to restart it and it works 2. Is the cover of the book on the right of the playground supposed to change depending on which example you are looking at? I think it could be nice if the book contents were rendered alongside the code if the user wanted instead of the cover which does not change.

nox101 2y ago
Safari has not shipped WebGPU. Why would you expect it to work. Until Safari officially ship WebGPU it's guaranteed to be buggy and missing features.
- dylanhu 2y ago
  I was referring to the code editor in the playground which I assume is not powered by WebGPU. I noticed the issue on other sites as well which prompted me to restart, fixing the issue. I have WebGPU enabled in Safari through a preview flag, and running the playground examples worked fine.

shmerl 2y ago

What's the story with WebGPU in Firefox? Why is it still not enabled by default?

nox101 2y ago
Because they haven't finished implementing it and lots of functionality is missing. Neither has Safari ship it. Same reason. They aren't done.
- Joel_Mckay 2y ago
  We investigated this many years ago: https://github.com/BabylonJS/Babylon.js/ https://github.com/BabylonJS/Babylon.js/ 1. It works just fine for basic 3D functionality, but has limited support for tricks like fog FX etc. WebGL is actually quite capable when combined with simplified physics engines, and animated mesh packing formats. 2. In a business context it fails to check all the boxes, as people are not going to invest in a platform with near zero IP protection. 3. Steam + Unreal has all the advantages, and none of the problems/overhead of a Browser. i.e. peoples game pads, spacial audio, and shader cache buffers will work properly. WebGL is just hitting the same VRML market that failed decades ago for the same reasons. =3
  - nox101 2y ago
    WebGL powers both Google Maps and Figma. maybe you're thinking too small as for ip protection. Which platforms do that? https://www.models-resource.com/ https://www.models-resource.com/
    - Joel_Mckay 2y ago
      Then Google Maps is still in App form because... just kidding... we both already know why. =3
      - nox101 2y ago
        confused . There is no native desktop app for google maps. And it does full 3d. maybe you meant on mobile? But you brought up Steam so clearly not mobile Earth is WebGL now too https://earth.google.com https://earth.google.com

jay-barronville 2y ago

Congratulations and well done!!! > However, I'm feeling burnt out and ready to call it finished, even though it may not feel completely done. Avoiding another abandoned side project has been my primary motivation in reaching this point. Thank you for spending your time to produce this excellent resource and releasing it to us. Don’t feel too bad about it not being all the way where you’d like it to be. You can always improve it later, or even allow the community to help you improve it.

erichdongubler 2y ago

I haven't had time to dig into all of these demos, but the material looks _delightful_. In case it's interesting to anyone, I did just go on a big bug-filing spree for Firefox. There are a handful of issues (that were already on the Firefox team's radar) to resolve before all of these playgrounds work as-is: https://bugzilla.mozilla.org/show_bug.cgi?id=webgpu-unleashed https://bugzilla.mozilla.org/show_bug.cgi?id=webgpu-unleashe...

j45 2y ago

This is a lot of good content for putting out there for free, thank you so much. I know a young person who was quite interested in this and looking for a resource like this. I love the focus you've place on video, and actually making it engaging. Subject Matter Experts who undertake this are my favourite audience to be around and help. If you might be interested in exploring this content of yours into aligned educational content and delivery including videos that could support your work financially, I'd be happy to chat an share what I do as I like magnifying subject matter experts doing things like this. All knowledge is yours, strictly to add value.

mistercow 2y ago

This is great to see. I’ve been working on a WebGPU project for a couple months now, learning as I go, and it’s rough how many things there are that take tons of digging to find even remotely straight answers about. There’s the basic WGSL language and JS API, which are, strictly speaking, well documented, and then there’s the stuff where you have to skip past documentation and find the one post answering a tangentially related question by someone with a singleminded interest in GPU programming.

pjmlp 2y ago
This has been the state of the Web3D since WebGL 1.0, worse that after 10 years, browser vendors still don't see a need to have proper debugging in place.
- mistercow 2y ago
  Yes, and not to mention automated testing. Apparently, deno has headless WebGPU support, which I might look into. Right now, I have this hacky build mode in my project which launches my Electron app, and sends IPC messages to launch tests (using my own, terrible minimal test framework), and then send the results back to the terminal. On the plus side, it makes me appreciate how wonderful it is to have modern dev tooling when I’m working on literally anything else.
jamesu 2y ago
My biggest problem with WebGPU is the documentation, especially if you delve into the native or emscripten variants. Not even fancy AI tools will save you - in fact in a lot of cases they make it worse as they often suggest solutions based on older webgpu variants or they make grossly inaccurate assumptions about how your particular webgpu implementation works. Figuring out how to properly setup the "native" version was a nightmare, I had to find a random github project where someone thankfully made a SDL2 example. I didn't really feel there was an active community that was interested in pointing me in the right direction either, more like a bunch of people too absorbed with building an API than actually caring about who is using it. Maybe things will improve in the future but I remain skeptical.

pjmlp 2y ago

It looks quite nice, great efforts.

DrMiaow 2y ago

Nice. I was just about to embark on a small game prototype in WebGPU to learn it. I'm going to start by rampaging through this book.

decodingchris 2y ago

Exactly what I was looking for! Thanks

pedrolins 2y ago

This is awesome! I’ve given up learning graphics programming in the past due to the fragmented ecosystem of libraries. It just felt overwhelming. This seems exactly what I’ve been missing.

MalcolmDwyer 2y ago

This looks great. I can't wait to dive in. Thank you very much for sharing. Formatting nitpick for the site: when viewed on mobile, the text width is set to screen width minus 1 margin, but the page is fixed at text width plus both margins, so the scrolling has a lot of sloppy side-to-side play and it's irritating to get the content lined up in the middle.

deleted 2y ago
[deleted]

koolala 2y ago

WebGPU burned me out too when the Firefox developers got let go. WebGPU is super slow on GPU and all the official benchmarks only care about CPU performance.

FragmentShader 2y ago
> WebGPU is super slow on GPU and all the official benchmarks only care about CPU performance. omg I thought I was the only one that found that. I tried webgpu (On a native context) and it was slowwwww. Only 10k non-overlapping triangles can bring my RTX GPU to its knees. It's not the shader because it was only a color. It's not the overlapping (And I tried a depth prepass as well). It's not the draw calls. The API is slow, straight up. In fact, you can try to open a WebGPU demo in your browser and check the GPU usage in the Task Manager. Close it, open a random webgl Unity game and you'll see how much a single WebGPU triangle takes compared to a full-fledged game. On my computer, the average Unity game with shadows, shaders 'n stuff takes 5% GPU and a simple WebGPU demo takes 7%.
- grovesNL 2y ago
  > Only 10k non-overlapping triangles can bring my RTX GPU to its knees Your benchmark doesn't match the experience of people building games and applications on top of WebGPU, so something else is probably going on there. If your benchmark is set up well, you should be limited by the fill rate of your GPU, at which point you should see roughly the same performance across all APIs. > On my computer, the average Unity game with shadows, shaders 'n stuff takes 5% GPU and a simple WebGPU demo takes 7%. GPU usage isn't a great metric for performance comparisons in general because it can actually imply the inverse depending on the test case. For example, if the scenes were exactly the same, a lower GPU usage could actually suggest that you're bottlenecked by the CPU, so you can't submit commands fast enough to the GPU and the GPU is sitting idle for longer while it waits.
  - FragmentShader 2y ago
    > Your benchmark doesn't match the experience of people building games and applications on top of WebGPU Here's an example of Bevy WebGL vs Bevy WebGPU: I get 50 fps on 78k birds with WebGPU: https://bevyengine.org/examples-webgpu/stress-tests/bevymark/ https://bevyengine.org/examples-webgpu/stress-tests/bevymark... I get 50 fps on 90k birds with WebGL: https://bevyengine.org/examples/stress-tests/bevymark/ https://bevyengine.org/examples/stress-tests/bevymark/ So you test the difference between them with technically the same code. (They can get 78k birds, which is way better than my triangles, because they batch 'em. I know 10k drawcalls doesn't seem good, but any 2024 computer can handle that load with ease.) Older frameworks will get x10 better results , such as Kha (https://lemon07r.github.io/kha-html5-bunnymark/ https://lemon07r.github.io/kha-html5-bunnymark/) or OpenFL (https://lemon07r.github.io/openfl-bunnymark/ https://lemon07r.github.io/openfl-bunnymark/), but they run at lower res and this is a very CPU based benchmark, so I'm not gonna count them. > be limited by the fill rate of your GPU They're 10k triangles and they're not overlapping... There are no textures per se. No passes except the main one, with a 1080p render texture. No microtriangles. And I bet the shader is less than 0.25 ALU. > at which point you should see roughly the same performance across all APIs. Nah, ANGLE (OpenGL) does just fine. Unity as well. > a lower GPU usage could actually suggest that you're bottlenecked by the CPU No. I have yet to see a game on my computer that uses more than 0.5% of my CPU. Games are usually GPU bound.

danroc 2y ago

Nice work! Thank you for sharing. I'd like to get excited about WebGPU as well, but I am lacking enough imagination here. Games? 3D animations? What else beyond these obvious applications? Those who are excited about it: why? what are you planning to build with it?

gizmo 2y ago
Webgpu makes sense for anything that needs to render quickly or that needs a lot of control over how things get rendered. A slideshow program with custom font rendering & line wrapping and nice shader based transitions between slides for instance. Even something like a terminal/tty is much nicer when it renders at > 60fps with smooth scrolling. Very hard to do with DOM nodes. Because of the web a generation of programmers has forgotten how fast and responsive applications can be. Webgpu can make the web feel fast again.
beardyw 2y ago
I got interested in 3D animation so I took a look at this stuff. I quickly retreated to the safety of three.js!

nickpsecurity 2y ago

Many of us are non-graphics programmers interested in learning to benefit from CUDA-style parallelization. I’ve read they’re mostly incompatible, though. I know there’s vendors supporting OpenCL and Vulkan. I didn’t see many AI projects using them, though. Makes me think cross-platform approaches aren’t great for some reason. My questions: are there good, native implementations of WebGPU where learning it can replace learning CUDA or ROC for good, GPU utilization? If not, would a book like this teach us enough to easily pick up CUDA etc? Or are they very different to the point we’re better off learning the GPU-specific libraries?

raphlinus 2y ago
WebGPU is not yet performance competitive with CUDA, in part because the cooperative matrix multiplication ("tensor cores" in Nvidia-speak) extension is not done yet. That in turn depends on subgroups, which are pretty far along (but not yet shipping). That said, you can do machine learning in WebGPU, and, if your goal is to ship in a browser, it is viable. I personally think the performance gap can be closed with some engineering effort, and that WebGPU has the potential to become a real contender, but it's too early to say for sure. Certainly CUDA has a major head-start.

kallistisoft 2y ago

This is very well polished! Obviously took a lot of hard work and it shows in the results. Well done! Question: I see the that the code for the examples can be pulled from github, but I don't see anywhere to download the text of the book for offline reading??

Confirm2754 2y ago

A rare gem of a book! I've tried using many books to get started with GPUs, but I always ended up giving up quickly. This book is the most in-depth yet easy-to-understand one I've ever come across.