GoKawiilWebGPU Unleashed: A Practical Tutorial
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.
... continue reading