Learn modern graphics programming in a real developer environment.
The landing page keeps the canonical WebGPU demos front and center — hello triangle, two cubes, and textured cube. Open the Lab for the full platform: 16 interactive lessons, a WGSL editor, live pipeline visualization, geometry and lighting labs, and GPU diagnostics.
Built like commercial developer software
WGSL Editor
A Monaco-powered editor with syntax highlighting, minimap, and diagnostics built for shader development.
Live Preview
See your WebGPU render update instantly with a professional viewport, metrics overlay, and debug toggles.
Pipeline Visualizer
Follow data from JavaScript through command encoders, shaders, rasterizer, and the framebuffer.
GPU Inspector
Real-time diagnostics for draw calls, buffers, textures, uniforms, memory, and device capabilities.
Geometry Lab
Explore primitives, transformations, normals, and wireframes with interactive controls.
Shader Playground
A gallery of production-grade shaders to preview, modify, download, and learn from.
Ready to dive into the graphics pipeline?
Start with the classic hello triangle and progress through vertex buffers, matrices, lighting, compute shaders, and optimization.
Launch WebGPU Lab