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 page is a list of the WebGPU examples developed in the book. You can study the code 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 Python Playground published by No Starch Press, USA. The second edition of this book came out in October 2023. You can reach him at @mkvenkit on Twitter.
Ch1: Hello WebGPU
Hello Triangle
A simple introduction to WebGPU and WGSL by showing you how to draw a triangle on the screen.
Cube
Drawing a simple cube with WebGPU. In this example, we learn about vertex buffers, uniforms, and the render pipeline.
Indexed Cube
Similar to the previous example, but this time we use indexed rendering to draw the cube.
The Menger Sponge
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
Gimbal Lock Demo
Demonstration of a problem called gimbal lock that can occur when you use Euler angles to rotate an object in 3D.
Cubes on a Toroidal Helix
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.
Ch3: Lighting
Lighting App
In this app we build an app that renders a torus and a plane, and demonstrates various lighting techniques with WebGPU.
Ch4: Texturing
Texturing
This example explores a whole bunch of texturing techniques in WebGPU – including image textures, normal mapping, procedural textures, projective textures, billboards, cubemaps, skyboxes, and environment mapping.