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 article"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
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)
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
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
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
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.
- 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.
> 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.
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...
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.
WebGPU is super slow on GPU and all the official benchmarks only care about CPU performance.
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.
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.
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?
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.
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??
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?
I'm going to start by rampaging through this book.
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.
Related
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)
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
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
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
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.