1st Edition

The WebGPU Sourcebook High-Performance Graphics and Machine Learning in the Browser

By Matthew Scarpino Copyright 2025
    384 Pages 76 B/W Illustrations
    by CRC Press

    384 Pages 76 B/W Illustrations
    by CRC Press

    The WebGPU Sourcebook: High-Performance Graphics and Machine Learning in the Browser explains how to code web applications that access the client’s graphics processor unit, or GPU. This makes it possible to render graphics in a browser at high speed and perform computationally-intensive tasks such as machine learning. By taking advantage of WebGPU, web developers can harness the same performance available to desktop developers.

     

    The first part of the book introduces WebGPU at a high level, without graphics theory or heavy math. The chapters in the second part are focused on graphical rendering and the rest of the book focuses on compute shaders.

     

    This book walks through several examples of WebGPU usage. It also:

    • Discusses the classes and functions defined in the WebGPU API and shows how they're used in practice.
    • Explains the theory of graphical rendering and shows how to implement rendering inside a web application.
    • Examines the theory of neural networks (machine learning) and shows how to create a web application that trains and executes a neural network.

    Chapter 1: Introduction

    ·         1.1 – The Evolution of WebGPU

    ·         1.2 – Overview of WebGPU Development

    ·         1.3 – Example Code

    ·         1.4 – Summary

    Chapter 2: Fundamental Objects

    ·         2.1 – The Navigator

    ·         2.2 – Promises and GPUAdapters

    ·         2.3 – GPUDevice

    ·         2.4 – GPUCommandEncoder

    ·         2.5 – GPUQueue

    ·         2.6 – Canvas Element

    ·         2.7 – Canvas Context

    ·         2.8 – Example Application: Creating WebGPU Objects

    ·         2.9 – Summary

    Chapter 3: Rendering Graphics

    ·         3.1 – A Gentle Introduction to Graphical Rendering

    ·         3.2 – Render Passes

    ·         3.3 – Example Application: Creating a Blue Canvas

    ·         3.4 – Buffers and Layouts

    ·         3.5 – Summary

    Chapter 4: The WebGPU Shading Language (WGSL)

    ·         4.1 – Fundamentals of WGSL

    ·         4.2 – Vertex Shaders

    ·         4.3 – Fragment Shaders

    ·         4.4 – Shader Modules

    ·         4.5 – Example Application: Drawing an Orange Triangle

    ·         4.6 – Passing Data to the Fragment Shader

    ·         4.7 – Example Application: Drawing a Multi-Colored Triangle

    ·         4.8 – Summary

    Chapter 5: Uniforms and Transformations

    ·         5.1 – Uniform Buffers and Bind Groups

    ·         5.2 – Example Application: Rotating a Square

    ·         5.3 – Storage Buffers

    ·         5.4 – Linear Transformations

    ·         5.5 – Model, View, and Perspective Transformations

    ·         5.6 – Indexed Rendering

    ·         5.7 – Example Application: Drawing Cubes

    ·         5.8 – Summary

    Chapter 6: Lighting, Textures, and Depth

    ·         6.1 – Lighting

    ·         6.2 – Example Application: Drawing a Shiny Sphere

    ·         6.3 – Textures

    ·         6.4 – Example Application: Adding Texture

    ·         6.5 – Depth and Stencil Testing

    ·         6.6 – Summary

    Chapter 7: Advanced Features

    ·         7.1 – Debug Groups

    ·         7.2 – Error Handling

    ·         7.3 – Viewports and Scissor Rectangles

    ·         7.4 – Occlusion Queries

    ·         7.5 – Drawing Text

    ·         7.6 – Example Application: Displaying Text

    ·         7.7 – Animation

    ·         7.8 – Summary

    Chapter 8: Compute Applications

    ·         8.1 – Introducing Compute Applications

    ·         8.2 – Buffer Operations

    ·         8.3 – Work Groups and Invocations

    ·         8.4 – Compute Shaders

    ·         8.5 – Example Application: Simple Computation

    ·         8.6 – Time Stamps

    ·         8.7 – Atomic Variables and Functions

    ·         8.8 – Example Application: Dot Product

    ·         8.9 – Summary

    Chapter 9: Machine Learning with Neural Networks

    ·         9.1 – Iris Classification

    ·         9.2 – Neurons and Perceptrons

    ·         9.3 – Improving the Model

    ·         9.4 – Activation Functions

    ·         9.5 – Layers and Deep Learning

    ·         9.6 – Training

    ·         9.7 – Example Application: Classifying Irises

    ·         9.8 – Summary

    Chapter 10: Image and Video Processing

    ·         10.1 – Storage Textures

    ·         10.2 – Image Filtering

    ·         10.3 – Example Application: Image Sharpening

    ·         10.4 – Video Processing

    ·         10.5 – Example Application: Video Conversion

    ·         10.6 – Summary

    Chapter 11: Matrix Operations

    ·         11.1 – Matrix Transposition

    ·         11.2 – Matrix Multiplication

    ·         11.3 – The Householder Transformation

    ·         11.4 – QR Decomposition

    ·         11.5 – Example Application: Matrix Factorization

    ·         11.6 – Summary

    Chapter 12: Filtering Audio with the Fast Fourier Transform (FFT)

    ·         12.1 – The Web Audio API

    ·         12.2 – Overview of Audio Processing

    ·         12.3 – The Discrete Fourier Transform (DFT)

    ·         12.4 – Example Application: Filtering Audio with the DFT

    ·         12.5 – The Fast Fourier Transform (FFT)

    ·         12.6 – Example Application: Filtering Audio with the FFT

    ·         12.7 – Summary

    Appendix A: Node and TypeScript

    ·         A.1 – The Node Package Manager (npm)

    ·         A.2 – The HyperText Transfer Protocol (HTTP) Server

    ·         A.3 – Getting Started with TypeScript

    ·         A.4 – Example Application: Introduction to TypeScript

    ·         A.5 – Fundamental Data Types of TypeScript

    ·         A.6 – TypeScript Classes

    ·         A.7 – TypeScript Interfaces

    ·         A.8 – Declaration Files

    ·         A.9 – Example Application: WebGPU in TypeScript

    ·         A.10 – Summary

    Appendix B: WebAssembly, Emscripten, and Google Dawn

    ·         B.1 – WebAssembly and Emscripten

    ·         B.2 – Example Application: Simple WebAssembly

    ·         B.3 – Emscripten and Google Dawn

    ·         B.4 – Example Application: Drawing an Orange Triangle

    ·         B.5 – Summary

    Biography

    Matthew Scarpino is a software developer at Purdue University. He has worked on many different types of programming projects, including web applications, graphical rendering, and high-performance computing. He received his Masters in Electrical Engineering in 2002, and has been a professional programmer and author ever since.