WebGPU Examples

Rendering algorithms implemented in WebGPU.

• Triangle: Creating vertex buffers and drawing a triangle.
• Cube: Creating a texture from an ImageBitmap, setting up vertex and uniform buffers, and animating a 3D cube.
• Particles: Simulating gravity on instanced particles using a compute shader.
• Multiple Canvases: Rendering to multiple canvases with a single device instance.
• Picking: Interact with rendered objects using color picking.
• Deferred Rendering: Rendering mesh data to a multisampled gBuffer then lighting in a separate pass.
• Depth of Field: Simulating camera depth of field effects as a postprocessing pass.

Examples currently only run without special flags in Chrome. See the Implementation Status page for updates on support.

All examples are implemented in a single HTML file with minimal use of functions, modules, classes or other abstractions. The goal is to allow the reader to easily see, in sequential order, all WebGPU calls that are made. They can be run locally by serving them from a local HTTP server, e.g. python -m http.server.