By Shi Yan
Welcome to "WebGPU Unleashed" - your gateway to the dynamic world of graphics programming. This free book will teach you graphics programming in JavaScript using WebGPU, drawing from my own learning journey.
Why did I write this book? Recently, a friend asked me what his child should learn to get started with graphics programming. A few years ago, OpenGL was the go-to API for beginners, with DirectX as an alternative for those interested in game development.
However, the graphics API landscape has evolved significantly in recent years. A new generation of APIs has emerged, including Vulkan, Metal, and DirectX 12. These APIs are more lightweight and performant but require more verbose code. While similar in concept, they're more fragmented than OpenGL, with some only available on specific platforms. This fragmentation often confuses beginners, leaving them unsure which API to start with.
Enter WebGPU, a new graphics API conceptually similar to others but with a different goal: bringing native graphics capabilities to the web. Unlike other APIs with native implementations in graphics drivers, WebGPU is essentially a wrapper for the aforementioned APIs. This makes WebGPU appealing as a first API for several reasons:
As a wrapper, WebGPU aims to be a common denominator of other APIs, making it relatively simpler.
As the web graphics API standard, WebGPU is available on all platforms.
For those interested in native development, there are WebGPU implementations available in C++ and Rust.
With WebGPU's recent release, now is an ideal time to learn it.
We'll begin with an overview of GPU drivers and the GPU pipeline - topics often overlooked in other graphics API books. Many students who can implement simple graphics applications lack understanding of GPU drivers and how graphics software interacts with underlying hardware. I believe covering these topics is essential.
Following this overview, we'll explore the simplest usage of WebGPU: drawing triangles, the basic elements of 3D graphics. While this might sound basic, mastering it is crucial for understanding more complex concepts. We'll then cover 2D rendering techniques and 3D scene control, necessary skills for implementing full graphics applications for the web.
In the advanced chapters, we'll look into GPU computing using WebGPU and explore advanced rendering techniques beyond simple triangles. GPU compute on the web, previously unavailable through WebGL, is now possible with WebGPU. This opens up exciting possibilities, including potential GPU AI inference for web applications.
As the book's final tutorial, we'll implement Gaussian splatting rendering - a complex example combining GPU compute and rendering. At the time of writing, Gaussian splatting is a cutting-edge scene representation and rendering technique, capable of capturing and rendering 3D scenes from real life with a high degree of realism and real-time performance.
I've put considerable effort into presenting this book's content. Initially planned as a traditional book, I realized that an interactive web format would be more effective for a tech book. This approach allows for:
Better explanation of concepts through videos
Easy citation of references via links
An online playground hosting all code samples, where you can run demos and modify code
All code snippets in the book are cross-referenced from the playground samples. To avoid overwhelming readers with verbose code, I've included only relevant code segments in the articles. navigation between the text and the playground is very easy .
Another advantage of this online format is the ability to receive reader feedback. If you have suggestions or improvements, please feel free to share them through GitHub discussions and issues.
Let's embark on this WebGPU journey together!