WebGPU Unleashed: A Practical Tutorial

By Shi Yan

Welcome to WebGPU Unleashed, your comprehensive entry point into the sophisticated realm of graphics programming. This resource is a free, open-access book designed to guide you through graphics development using JavaScript and the WebGPU API, based on my personal journey of discovery and mastery.

"A friend recently asked me for advice on what his child should study to begin learning graphics programming."

This question highlights a significant shift in the industry. In the past, OpenGL was the standard starting point, with DirectX serving as the primary alternative for aspiring game developers. However, the landscape has shifted toward a new generation of "low-level" APIs.

The Evolution of Graphics APIs

The transition from legacy systems to modern ones has introduced both power and complexity.

While modern APIs offer immense control, their fragmentation (where some only work on specific hardware or OSs) often leaves beginners feeling lost.

Why Choose WebGPU?

WebGPU emerges as the solution to this fragmentation. Rather than being a standalone driver-level API, it acts as a wrapper for the modern APIs mentioned above.

Key Advantages:

• Simplicity: By acting as a common denominator, it streamlines the complexity of native APIs.
• Universality: As a web standard, it functions across all compatible platforms.
• Versatility: While primarily for the web, implementations in C++ and Rust exist for native developers.

Conceptual Architecture

---

The Learning Roadmap

We will not simply jump into coding; we will start by understanding the why and how of the hardware. Many developers can write code but don't understand the interaction between software and the GPU driver.

🗺️ Curriculum Checklist

• Foundations: GPU Drivers & The Pipeline
• The Basics:
  • Creating a canvas $\rightarrow$ Drawing triangles $\rightarrow$ Vertex definition.
  • Handling colors (hardcoded vs. buffer-based).
• Intermediate Techniques:
  • Understanding $\text{Uniforms}$ and $\text{Textures}$.
  • $\text{Transformation Matrices}$ and Camera implementation.
  • Depth testing, Culling, and Index Buffers.
• Advanced Rendering:
  • 3D Model loading & Normals.
  • Lighting, MSAA, and Mipmapping.
  • 2D techniques (Gaussian Blur, Video/Text rendering).
• Compute & Cutting Edge:
  • GPU Compute (Prefix Sum, Radix Sort).
  • Shadow Mapping & Toon Shading.
  • Gaussian Splatting: Real-time, photorealistic 3D scene representation.

The Power of GPU Compute

One of the most exciting aspects of WebGPU is the introduction of Compute Shaders, which were unavailable in WebGL. This allows for:

1. Complex mathematical simulations.
2. Potential AI inference directly within the browser.
3. High-performance data processing.

For example, a simple vertex position in 3D space can be represented as a vector: $\vec{v} = \begin{bmatrix} x \\ y \\ z \end{bmatrix}$

---

An Interactive Learning Experience

I decided against a traditional book format in favor of an interactive web experience. This allows for a more dynamic pedagogical approach:

• Visual Aids: Concepts are reinforced with embedded videos.
• Instant Access: References are linked directly for deep diving.
• Live Playground: An integrated environment to test and tweak code.

How to use the code samples

To keep the articles concise and readable, I only include the most critical code segments. You can find the full implementation in the playground.

Example Workflow:

1. Read the conceptual explanation.
2. View the snippet:

   // Conceptual WebGPU device request
   const adapter = await navigator.gpu.requestAdapter();
   const device = await adapter.requestDevice();
   

3. Click the link to launch the full sample (e.g., 5_06_skeleton_animation) in the playground.

Community and Feedback

Because this is a living document, your input is invaluable. If you find a bug or have a suggestion for improvement, please use the following channels:

• GitHub Discussions
• GitHub Issues