Awesome WebGPU

WebGPUを扱う資料や関連プロジェクトをまとめたAwesomeリストです。

目次

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

Web サイト

公式サイト

• GPUWeb - Official GitHub repository.
• Official WebGPU Explainer

WebGPU 仕様

• History
• Editor’s Draft

WGSL（WebGPU Shading Language）仕様

• Working Draft
• Editor’s Draft

API ドキュメント

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

その他

• 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.

ブラウザー対応状況

これは実験的な技術です

• Implementation status - Official W3C Group.
• WebGPU browser support overview - CanIUse.com WebGPU.

Chrome

Chrome および Blink/Chromium ベースのブラウザーは WebGPU をサポートします

• Desktop - WebGPU supported by default on Windows and macOS.
• Android - WebGPU is supported by default.
• Edge - WebGPU is supported by default.

Firefox

WebGPU のサポートはまだ実験的です

• Firefox Nightly - Go to about:config and set dom.webgpu.enabled to true.

Safari

WebGPU のサポートはまだ実験的です

• macOS Safari TP - WebGPU is enabled by default since 190.
• macOS Safari - WebGPU enabled by default on macOS 26 Tahoe or later; earlier versions require the WebGPU feature flag.
• iOS/iPadOS Safari - WebGPU supported by default on iOS/iPadOS 26 or later; earlier versions require Settings → Safari → Advanced → Feature Flags → WebGPU.

記事

• 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.

チュートリアル

• 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.

書籍

• Practical WebGPU Graphics - by Jack Xu

ライブラリ

• Babylon.js - Open game and rendering engine.
• Three.js - Easy-to-use, lightweight, general-purpose 3D library.
• PlayCanvas - Web-based game engine with WebGPU support.
• PixiJS - 2D rendering engine with a WebGPU renderer.
• 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.
• spark.js - A real-time GPU texture compression library for WebGPU.
• zephyr3d - A TypeScript-based 3D rendering engine with WebGPU/WebGL support.
• ChartGPU - High-performance charting library built on WebGPU, handles 1M+ data points at 60fps.

デバッガーとプロファイラー

• webgpu-inspector - Inspection debugger for WebGpu.
• webgpu-profiler - A profiler for Rust + WebGPU.

以下はしばらく更新されていません:

• webgpu-devtools - Web browser extention.
• webgpu-debugger - Early stage debugger.

Gist

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

デモ

現在、デモは 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).
• PlayCanvas WebGPU Demos - By PlayCanvas (Note: Select WebGPU in the top right corner).
• Project Prismatic - Stratton Studios Unity-powered WebGPU experience/demo.
• 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
• WebGPU real-time ray tracer - A real-time ray tracer implementing ReSTIR algorithm - Repository
• Real-Time GPU Texture Compression Demo - Showcases the advantages of real-time texture compression. Compares models using KTX2 textures against AVIF + Spark.

動画

• 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

プレゼンテーション

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

コミュニティ

• 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.

バグ報告

• Webkit
• Firefox
• Chromium

法律で可能な限り、Mik Bry はこの作品に関するすべての著作権および関連・隣接権を放棄しています。

貢献を歓迎します。まず貢献ガイドライン をお読みください。