Taos: Building a Modern WebGPU Game Engine

Brendan Duncan#

This book explores real-time graphics programming through the lens of Taos, an open-source WebGPU game engine written in TypeScript.

Taos Game Engine

Status#

This book is a work in progress. Chapters are added as the engine evolves.

Who this is for#

You are comfortable with TypeScript or a C-family language and have a basic understanding of linear algebra. You do not need prior WebGPU experience — we cover the API from the ground up.

How the book is organized#

The first half of the book builds the engine: a reusable WebGPU foundation that is not tied to any particular game. The second half walks through Crafty: voxel sandbox game — the first game built on that engine — as the concrete worked example. Engine theory comes first; game-specific implementation follows.

Topic	What we build
WebGPU fundamentals	Device, queue, buffers, textures, bind groups
Shader authoring	WGSL — vertex, fragment, compute
Render graph architecture	Multi-pass deferred rendering
PBR lighting	Directional + point + spot, IBL, BRDF
Shadow algorithms	Cascade shadow maps, VSM, spot shadows
GPU particle systems	Compute-based spawn/update/compact, billboard rendering
Post-processing	Bloom, TAA, SSAO, DOF, tone-mapping
Game engine design	Component/entity system, scene graph, input, physics, audio, UI
Networking	WebSocket transport, message protocol, authoritative server
Crafty: voxel sandbox game	Block voxel terrain, NPC AI, biome weather, multiplayer gameplay
Performance & tools	GPU timestamps, async compilation, culling, sample framework, asset pipeline

How to read this book#

The canonical companion is the Taos Engine source tree at https://github.com/brendan-duncan/TaosEngine. Each chapter cross-references the relevant source files — you are encouraged to open them side-by-side.

Code blocks are either annotated excerpts (showing the key logic) or complete listings (the entire file). Excerpts use // ── ... ── markers to indicate elided boilerplate.

// ── from src/block/chunk.ts ──
class Chunk {
  readonly cx: number;       // Chunk X index
  readonly cz: number;       // Chunk Z index
  readonly blocks: Uint8Array; // 16 × 256 × 16 = 65,536 blocks

  getBlock(x: number, y: number, z: number): BlockType;
  setBlock(x: number, y: number, z: number, type: BlockType): void;
}

The Taos philosophy#

No black boxes. Every system is built from scratch — we import only the WebGPU API and the standard library. If we use a third-party tool (e.g. a texture compressor), we explain why and how it fits.