WebGPU
"Chrome ships WebGPU", announced Google on April 6, 2023. This is one of the most exciting news in computer graphics in recent times. WebGPU is the upcoming modern standard for 3D graphics and general purpose GPU computing for the web. It has been in development since 2017, and is backed by major companies such as Google, Apple, and Microsoft.
The Book of WebGPU is a fun programming book that teaches you the fundamentals of 3D graphics programming and GPU computing using WebGPU and JavaScript.This webpage is a live demonstration of the WebGPU examples in the book. You can study the code by viewing the source in the browser, or by going to the GitHub repo. I will be updating this page as I make progress with the book. Please use the button on the right to pre-order the book from No Starch Press.
Browser Compatibility
The examples in the book work with Google Chrome 113 and above. WebGPU is garnering browser support rapidly, so please check the official implementation status for the latest news.
About Mahesh Venkitachalam
Mahesh Venkitachalam is the author of the bestselling book Python Playground published by No Starch Press, USA. The second edition of this book will be out in October 2023. You can reach him at @mkvenkit on Twitter.
Ch1: Hello WebGPU
|
A simple introduction to WebGPU and WGSL by showing you how to
draw a triangle on the screen.
|
|
Drawing a simple cube with WebGPU. In this example, we learn about
vertex buffers, uniforms, and the render pipeline.
|
|
|
Similar to the previous example, but this time we use indexed
rendering to draw the cube.
|
|
In this example, we draw an interesting fractal called the Menger
sponge using WebGPU. We also look at how to create a simple UI
for the web app to change the sponge level.
|
Ch2: 3D Transforms
|
Demonstration of a problem called gimbal lock that can occur
when you use Euler angles to rotate an object in 3D.
|
|
Animating a cube train on a toroidal helix. Uses
parametric equations, and a bit of vector calculus and numerical methods.
Learn about 3D transformations and bind groups and layouts
in WebGPU.
|
