Awesome WebGPU

Lovely curated list of WebGPU resources, libraries and tools.

WebGPU is a work in progress Web standard from W3C for modern 3D and GPU computing. Its purpose is to get the best performances on recent GPUs from desktop to mobile. Unlike WebGL, WebGPU is not a port of an existing native API. It borrows concepts from Metal, Vulkan and Direct3D12.

Contents

• Websites
• Browser support
• Articles
• Tutorials
• Books
• Libraries
• Debuggers and Profilers
• Gists
• Demos
• Videos
• Presentations
• Community
• Bug reporting

Websites

Official websites

• GPUWeb - Official GitHub repository.
• WebGPU - Twitter - Official X/Twitter account.
• Official WebGPU Explainer

WebGPU Specifications

• History
• Editor’s Draft ### WGSL (WebGPU Shading Language) Specifications
• Working Draft
• Editor’s Draft

API documentations

• API quick reference and documentation - WebGPU.rocks.
• MDN - MDN WebGPU API references.

Misc

• Google Developers Site
• 107 WebGPU Projects on GitHub - AwesomeOpenSource.com.
• r/WebGPU - Reddit - WebGPU Subreddit.
• compute.toys - Compute shader playground (like shadertoy).
• Shadeup - Language/website that makes experimenting with WebGPU easier.
• Tour of WGSL - A quick introduction to the WebGPU Shading Language.
• WebGPU Experts Blog - Monthly news about WebGPU.

Browser support

This is an experimental technology - Implementation status - Official W3C Group. - WebGPU browser support overview - CanIUse.com WebGPU.

Chrome

Chrome and Blink/Chromium based browsers support WebGPU - Desktop - WebGPU supported by default on Windows and macOS. - Android - WebGPU is supported by default. - Edge - WebGPU is supported by default.

Firefox

WebGPU support is still experimental - Firefox Nightly - Go to about:config and set dom.webgpu.enabled to true.

Safari

WebGPU support is still experimental - macOS Safari TP - WebGPU is enabled by default since 190. - macOS Safari - Soon available. - iOS - You can enable WebGPU in Settings → Safari → Advanced → Feature Flags → WebGPU.

Articles

• WebGPU - Wikipedia article.
• A Taste of WebGPU in Firefox - Mozilla.org article by Dzmitry Malyshau.
• Point of WebGPU native - By Dzmitry Malyshau.
• Graphics on the web and beyond with WebGPU - By Damien Seguin.
• Implementing WebGPU in Gecko - By Dzmitry Malyshau.
• From WebGL to WebGPU in Construct - By Ashley Gullen.
• A brief history of graphics on the web and WebGPU - By Ashley Gullen.
• WebGPU texture best practices - By Brandon Jones.
• WebGPU Buffer upload best practices - By Brandon Jones.
• wgpu-rs on the web - Rust Graphics Mages.
• Compiling Machine Learning to WASM and WebGPU with Apache TVM - By Tianqi Chen & Jared Roesch.
• The WebAssembly App Gap - By Paul Butler.
• Next-generation 3D Graphics on the web - Webkit.org article by Dean Jackson.
• Efficently rendering glTF models - A WebGPU Case Study - By Brandon Jones.
• WebGPU - All of the cores, none of the canvas - By Surma.
• WebGPU Fundamentals - A set of articles to help learn WebGPU.
• PBR in WebGPU: implementation details - By Tomasz Czajecki.
• I want to talk about WebGPU - By Andi.
• From WebGL to WebGPU - By Google.
• WebGPU for Dummies - By Amir Sojoodi.
• WebGPU Timestamps - By Amir Sojoodi.
• WebAssembly and WebGPU - Learn how WebAssembly and WebGPU improve ml performance on the web Part2.

Tutorials

• Raw WebGPU - An overview on how to write a WebGPU application, by Alain Galvan.
• Basic WebGPU Rendering - Summary of the steps to render a scene, by @ndesmic.
• Get started with GPU Compute on the Web - Tutorial on how to use WebGPU for non-graphical applications, by François Beaufort.
• WebGPU for Metal Developers Part 1 and Part 2 - Introduction to WebGPU from Apple’s GPU API, Metal, by Warren Moore.
• From 0 to glTF with WebGPU: Series (repository) - A tutorial to create a glTF model viewer, by Will Usher.
• Learn wgpu - Tutorial and examples on wgpu, a Rust implementation of WebGPU, by @sotrh
• LearningWebGPU 教程 (Chinese) - By @hjlld.
• Real-Time Ray-Tracing in WebGPU - Building a Ray tracer using a modified version of WebGPU implementation with Vulkan and DX12 ray tracing extensions, by Felix Maier.
• Build a compute rasterizer in WebGPU - How to build a complete rasterizer using compute shaders, by Omar Shehata.
• WebGPU Engine Development (Chinese/English) - Development process of WebGPU Engine (C++ and TypeScript).
• Learn WebGPU for native C++ development - A tutorial on WebGPU for Desktop applications using wgpu or Dawn, by @eliemichel.

Books

• Practical WebGPU Graphics - by Jack Xu

Libraries

• Babylon.js - Open game and rendering engine.
• Three.js - Easy-to-use, lightweight, general-purpose 3D library.
• Dawn - Google implementation that powers WebGPU in Chromium, can be used as a standalone package.
• wgpu - Mozilla implementation used in Firefox. Like Dawn, can be used as a standalone package.
• webgpu-headers - C/C++ headers.
• sokol - Simple STB-style cross-platform libraries for C and C++.
• RedGPU - JavaScript WbeGPU library, by @redcamel.
• WebGPU .NET - .NET bindings, built on top of wgpu.
• Deno - Runtime for JavaScript, TypeScript, and WebAssembly based on the V8 engine.
• RedCube - glTF viewer based on a WebGPU backend.
• hwoa-rang-gpu - Micro WebGPU rendering & compute library.
• wgsl_reflect - A WebGPU Shading Language parser and reflection library for JavaScript.
• Arche Graphics - WebGPU Graphics Engine.
• WebGPU-C++ - A single-file zero-overhead C++ idiomatic wrapper, by @eliemichel.
• Use.GPU - Reactive/declarative WebGPU runtime.
• GEngine - A basic rendering engine based on WebGPU, by junwei.gu.
• Thimbleberry - Reusuable WebGPU shaders and support functions.
• WebRTX - WebGPU Ray Tracing Extension.
• SWGPU - A Simple WebGPU Game Engine.
• React Native WebGPU - React Native implementation of WebGPU using Dawn.
• TypeGPU - TypeScript API for constructing, writing to and reading from GPU buffers with inferred type-safety.
• WESL - WGSL extensions for import, @if, and more.
• WebGpGpu.ts - A WebGPU framework to access compute shaders, browser or server-side, without the steep learning curve.

Debuggers and Profilers

• webgpu-devtools - Web browser extention.
• webgpu-recorder - A WebGPU playback recorder.
• webgpu-profiler - A profiler for Rust + WebGPU.
• webgpu-debugger - Early stage debugger.

Gists

• 2D and 3D SDF Primitives - Signed distance field primitives in WGSL, by @munrocket.

Demos

Right now, demos work best on Chrome/Edge.

• WebGPU Samples - A set of samples and demos demonstrating the use of the WebGPU API - Repository
• WebGPU first-person exploration of the Sponza Palace - Scene render comparison between WebGL, WebGL 2.0 and WebGPU, by Brandon Jones - Repository
• WebGPU Clustered Shading - By Brandon Jones - Repository
• WebGPU Metaballs - By Brandon Jones - Repository
• WebGPU External Texture Test - By Brandon Jones - Repository
• Online WGSL Editor - By Takahiro - Repository
• Three.js WebGPU examples - A collection of examples from three.js using the WebGPU renderer - Repository
• Spookyball - A Halloween-themed, open source Breakout clone, by Brandon Jones - Repository
• Babylon.js Playground - By Babylon.js (Note: Select WebGPU in the top right corner).
• WebGPU Particles - Calculate and render particles, by Daniel Toplak - Repository
• An online WebGPU calculator - An online calculator, but you can only use it on your remote friend’s GPU (via WebRTC) - Repository
• WebGPU Examples - A few examples of rendering algorithms implemented in WebGPU, by Tarek Sherif - Repository
• wgpu examples - Official list of examples from the wgpu library - Repository
• Forest WebGPU - A scene built with Babylon.js.
• WebGPU-Playground - A playground to experiment with WebGPU, by @06wj - Repository
• Dawn RT - A fork of dawn with Ray tracing extensions, by Felix Maier.
• wgpu-load-test - A wgpu stress test, by Alexis Andre.
• WebGPU Compute 101 Demo - A simple example using compute shaders. source
• WebGPU 2D Fluid Simulation - An implementation of “Real-Time Fluid Dynamics for Games” paper, by kishimisu - Repository
• WebGPU-Lab - Demos and experiments, focused on compute shaders, by Sebastian Macke - Repository
• WebGPU Live Demo Editor - A collection of WebGPU examples by Hepp Maccoy - Repository
• Thimbleberry Image Transform Demo - An Image processing app built using Thimbleberry, by mighdoll - Repository
• Shadowray Playground - Demo of WebRTX, an extension of the WebGPU API with ray tracing capabilities, implemented with compute shaders, by codedhead.
• Web Stable Diffusion - An implementation of the image generator AI model, by CMU, OctoML, Catalyst et al - Repository
• WebLLM - LLM inference engine, by CMU, University of Washington, OctoML, et al - Repository
• Shader Graph WGSL - A node based shader editor, by deepkolos - Repository
• WebGPU Memory Model Testing - Memory models testing suite, by Reese Levine et al., UC Santa Cruz - Repository
• Marching Cubes WebGPU - Marching cubes implementation, by Conor O’Malley - Repository
• WebGPU Path Tracing - A path tracer powered by WebGPU compute shaders, by Fermin Lozano - Repository

Videos

• From WebGL to WebGPU: A perspective from Babylon js by David Catuhe
• Next-Generation 3D Graphics on the Web (Google I/O 2019)
• WebGL to WebGPU (playlist) - By SketchpunkLabs
• WebGPU (playlist) - By Genka
• WebGPU Graphics Programming Step-by-Step (playlist) - By Practical Programming with Dr. Xu
• Introducing WebGPU: Unlocking modern GPU access for JavaScript - By Google.
• A proper look at WebGPU for native games - By Madrigal

Presentations

• Building WebGPU with Rust - By Dzmitry Malyshau from Mozilla.

Community

• GPU for the web community group - W3C Community.
• Public GPU - W3C Mailing list.
• Matrix WebGPU - Unofficial channel.
• YC Point of WebGPU on native - Discussion regarding this article.

Bug reporting

• Webkit
• Firefox
• Chromium

To the extent possible under law, Mik Bry has waived all copyright and related or neighboring rights to this work.

Contributions welcome! Read the contribution guidelines first.

webgpu.md Github