August 4th, 2024

Show HN: Free e-book about WebGPU Programming

"WebGPU Unleashed" is a tutorial for beginners in graphics programming using the WebGPU API, covering foundational concepts, basic tasks, and advanced techniques like Gaussian splatting in an interactive format.

Read original articleLink Icon
ExcitementFrustrationAppreciation
Show HN: Free e-book about WebGPU Programming

"WebGPU Unleashed" is a practical tutorial designed to teach graphics programming in JavaScript using the WebGPU API. The author, Shi Yan, created this resource to guide beginners in understanding modern graphics programming, particularly in light of the evolution of graphics APIs like Vulkan, Metal, and DirectX 12. WebGPU serves as a wrapper for these APIs, making it a more accessible entry point for learners, as it is available across all platforms and simplifies the complexities of other graphics APIs.

The tutorial begins with foundational concepts such as GPU drivers and the GPU pipeline, which are often overlooked in other resources. It progresses to basic graphics tasks like drawing triangles, essential for grasping more advanced topics. The book also covers 2D rendering techniques, 3D scene control, and advanced rendering methods, including GPU computing, which was previously unavailable in WebGL.

The final tutorial focuses on Gaussian splatting, a sophisticated rendering technique that allows for realistic 3D scene representation. The book is presented in an interactive web format, enhancing the learning experience through videos, links, and an online playground for code samples. This format encourages reader engagement and feedback, making it a dynamic resource for those interested in exploring the capabilities of WebGPU in web graphics development.

Related

20x Faster Background Removal in the Browser Using ONNX Runtime with WebGPU

20x Faster Background Removal in the Browser Using ONNX Runtime with WebGPU

Using ONNX Runtime with WebGPU and WebAssembly in browsers achieves 20x speedup for background removal, reducing server load, enhancing scalability, and improving data security. ONNX models run efficiently with WebGPU support, offering near real-time performance. Leveraging modern technology, IMG.LY aims to enhance design tools' accessibility and efficiency.

Eight million pixels and counting: improving texture atlas allocation in Firefox (2021)

Eight million pixels and counting: improving texture atlas allocation in Firefox (2021)

Improving texture atlas allocation in WebRender with the guillotiere crate reduces texture memory usage. The guillotine algorithm was replaced due to fragmentation issues, leading to a more efficient allocator. Visualizing the atlas in SVG aids debugging. Rust's simplicity and Cargo fuzz testing are praised for code development and robustness. Enhancements in draw call batching and texture upload aim to boost performance on low-end Intel GPUs by optimizing texture atlases.

GPU profiling for WebGPU workloads on Windows with Chrome

GPU profiling for WebGPU workloads on Windows with Chrome

Challenges of GPU profiling for WebGPU in Chrome on Windows are addressed. A workaround using a custom DLL enables GPU profiling with tools like AMD's Radeon GPU Profiler and Nvidia's Nsight, enhancing performance metrics for WebGPU applications.

gpu.cpp: A lightweight library for portable low-level GPU computation

gpu.cpp: A lightweight library for portable low-level GPU computation

The GitHub repository features gpu.cpp, a lightweight C++ library for portable GPU compute using WebGPU. It offers fast cycles, minimal dependencies, and examples like GELU kernel and matrix multiplication for easy integration.

Show HN: Plain Vanilla – a tutorial website for vanilla web development

Show HN: Plain Vanilla – a tutorial website for vanilla web development

The article discusses web development using only HTML, CSS, and JavaScript, emphasizing Web Components and modern CSS. It encourages experienced developers to explore this simpler, standards-based approach for building applications.

AI: What people are saying
The comments on "WebGPU Unleashed" reflect a mix of enthusiasm and concerns regarding the WebGPU API and the tutorial itself.
  • Many users express excitement about the potential of WebGPU for projects like games and 3D animations.
  • Some commenters share frustrations with the current state of WebGPU, citing performance issues and documentation challenges.
  • Several users appreciate the tutorial's content and format, noting its accessibility for beginners.
  • There are suggestions for improving the mobile viewing experience and addressing specific technical issues.
  • Users are eager to engage with the material and contribute to the WebGPU community.
Link Icon 18 comments
By @mistercow - 2 months
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.
By @jay-barronville - 2 months
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.

By @erichdongubler - 2 months
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-unleashe...

By @dylanhu - 2 months
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.

By @koolala - 2 months
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.

By @j45 - 2 months
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.

By @sramam - 2 months
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.

By @shmerl - 2 months
What's the story with WebGPU in Firefox? Why is it still not enabled by default?
By @nickpsecurity - 2 months
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?

By @ssahoo - 2 months
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.

By @kallistisoft - 2 months
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??

By @danroc - 2 months
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?

By @Confirm2754 - 2 months
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.
By @pedrolins - 2 months
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.
By @DrMiaow - 2 months
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.

By @pjmlp - 2 months
It looks quite nice, great efforts.
By @decodingchris - 2 months
Exactly what I was looking for! Thanks
By @MalcolmDwyer - 2 months
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.