超棒的WebGPU

WebGPU资源、库和工具的精心策划列表。

WebGPU是一个正在进行中的W3C Web标准，用于现代3D和GPU计算。其目的是在从桌面到移动设备的最新GPU上获得最佳性能。与WebGL不同，WebGPU不是现有原生API的移植。它借鉴了Metal、Vulkan和Direct3D12的概念。

目录

• 网站
• 浏览器支持
• 文章
• 教程
• 书籍
• 库
• 代码片段
• 演示
• 视频
• 演讲
• 社区
• 错误报告
• 贡献
• 许可证

网站

• GPU for the Web社区组 - 官方网站
• GPUWeb - 官方GitHub仓库
• WebGPU - Twitter - 官方Twitter账号
• 官方WebGPU规范：工作草案 / 编辑草案
• 官方WGSL（WebGPU着色语言）规范：工作草案 / 编辑草案
• 官方WebGPU解释器
• API快速参考和文档 - WebGPU.rocks
• GitHub上的107个WebGPU项目 - AwesomeOpenSource.com
• r/WebGPU - Reddit - WebGPU子版块
• compute.toys - 计算着色器游乐场（类似shadertoy）
• Shadeup - 使WebGPU实验更容易的语言/网站

浏览器支持

• 实现状态 - 官方W3C小组
• 注册Google Chrome原始试用 - Chrome开发者
• WebGPU浏览器支持概述 - CanIUse.com
• Chrome平台状态 - Chrome开发者
• Safari中的WebGPU和WSL - WebKit
• iOS上的WebGPU - 在我的iPhone6+上不工作
• Servo MVP - WebGPU MVP

尝试WebGPU

• Chromium（Chrome Canary、Edge Canary等）：转到about:flags#enable-unsafe-webgpu并启用"不安全WebGPU"标志。
• Firefox Nightly：转到about:config并将dom.webgpu.enabled设置为true。
• Safari Technology Preview：通过转到Safari → 偏好设置 → 高级 → 在菜单栏中显示开发菜单来启用开发菜单。然后转到开发菜单并启用实验性功能 → WebGPU。

文章

• WebGPU - 维基百科
• 使用WebGPU访问现代GPU功能 - web.dev（作者：François Beaufort和Corentin Wallez）
• 在Firefox中体验WebGPU - mozilla.org（作者：Dzmitry Malyshau）
• WebGPU原生的意义 - 作者：Dzmitry Malyshau
• 使用WebGPU在网页及其他平台上进行图形渲染 - medium.com（作者：Damien Seguin）
• 在Gecko中实现WebGPU - 作者：Dzmitry Malyshau
• 在Construct中从WebGL过渡到WebGPU - construct.net（作者：Ashley Gullen）
• Web图形技术简史及WebGPU - construct.net（作者：Ashley Gullen）
• WebGPU纹理最佳实践 - 作者：Brandon Jones
• WebGPU缓冲区上传最佳实践 - 作者：Brandon Jones
• wgpu-rs在Web上的应用 - Rust图形魔法师
• 使用Apache TVM将机器学习编译为WASM和WebGPU - tvm.apache.org（作者：Tianqi Chen和Jared Roesch）
• WebAssembly应用程序的差距 - 作者：Paul Butler
• Web上的下一代3D图形 - webkit.org（作者：Dean Jackson）
• 高效渲染glTF模型 - WebGPU案例研究 - 作者：Brandon Jones
• WebGPU - 所有核心，无需画布 - 作者：Surma
• WebGPU基础 - 一系列帮助学习WebGPU的文章
• WebGPU中的PBR：实现细节 - 作者：Tomasz Czajecki
• 我想谈谈WebGPU - 作者：Andi
• 从WebGL到WebGPU - 谷歌出品
• WebGPU入门 - 作者：Amir Sojoodi
• WebGPU时间戳 - 作者：Amir Sojoodi

教程

• 原始 WebGPU - 作者：Alain Galvan
• 基础 WebGPU 渲染 - 作者：@ndesmic
• Web 上 GPU 计算入门 - web.dev (作者：François Beaufort)
• 面向 Metal 开发者的 WebGPU 教程 第一部分 (第二部分) - 作者：Warren Moore
• 从零开始使用 WebGPU 实现 glTF：第一个三角形 (更新自此文) - 作者：Will Usher
• 从零开始使用 WebGPU 实现 glTF：绑定组 (更新自此文) - 作者：Will Usher
• 学习 Wpgpu：Rust 和 Wgpu 示例与展示 - 作者：@sotrh
• LearningWebGPU 教程 (中文) - 作者：@hjlld
• WebGPU 中的实时光线追踪 - 作者：Felix Maier
• 在 WebGPU 中构建计算光栅化器 - 作者：Omar Shehata
• [未完成] WebGPU 训练 - 作者：@DrawMindmap
• WebGPU 引擎开发 (中文/英文)：WebGPU 引擎开发过程（C++ 和 TypeScript）
• 学习 WebGPU 进行原生 C++ 开发 - 作者：@eliemichel

书籍

• WebGPU 图形实战 - 作者：Jack Xu

库

• Babylon.js - 实验性支持
• Three.js - 实验性支持
• Dawn - Google 实现
• Gfx-rs/wgpu - Mozilla 实现
• Webcore 模块 WebGPU - Webkit / Safari
• bgfx - WebGPU/Dawn 实验性
• webgpu-headers - C/C++ 头文件
• sokol - WebGPU 后端待办
• WebGPU for Node - 基于 Dawn
• RedGPU - 作者：@redcamel
• WebGPU .NET
• Deno 路线图 - GPU API（WebGPU）支持机器学习应用
• RedCube - 基于 WebGPU 后端的 GLTF 实现
• hwoa-rang-gpu - 微型 WebGPU 渲染和计算库
• wgsl_reflect - 一个用于 JavaScript 的 WebGPU 着色语言解析器和反射库
• Arche Graphics - WebGPU 图形引擎
• WebGPU-C++ - 单文件零开销 C++ 惯用包装器 - 作者：@eliemichel
• Use.GPU - 响应式/声明式 WebGPU 运行时
• GEngine - 基于 WebGPU 的基础渲染引擎 - 作者：junwei.gu
• Thimbleberry - 可重用的 WebGPU 着色器和支持函数
• WebRTX - WebGPU 光线追踪扩展
• SWGPU - 一个简单的 WebGPU 游戏引擎

调试器和分析器

• webgpu-devtools - Web浏览器扩展
• webgpu-recorder - WebGPU回放录制器
• webgpu-profiler - Rust + WebGPU的性能分析器
• webgpu-debugger - 早期阶段调试器
• thimbleberry - WebGPU实用工具

代码片段

• 3D SDF基元 - 由@munrocket用WGSL编写
• 2D SDF基元 - 由@munrocket用WGSL编写

演示

演示可能仅在Chrome上运行。Firefox的实现尚未完成。

• WebGPU 示例 - 由 Austin Eng (Google) 开发 - 代码仓库
• WebGPUniverse - 由伦敦帝国理工学院的学生开发
• WebGPU 第一人称探索斯庞扎宫殿 - 由 Brandon Jones 开发 - 代码仓库
• WebGPU 集群着色 - 由 Brandon Jones 开发 - 代码仓库
• WebGPU 元球体 - 由 Brandon Jones 开发 - 代码仓库
• WebGPU 外部纹理测试 - 由 Brandon Jones 开发 - 代码仓库
• 在线 WGSL 编辑器 - 由 Takahiro 开发 - 代码仓库
• Three.js WebGPU 示例 - 由 Three.js 开发 - 代码仓库
• Spookyball：一个基于 WebGPU 的万圣节主题游戏 - 由 Brandon Jones 开发 - 代码仓库
• Babylon.js 游乐场 - 由 Babylon.js 开发（注意：在右上角选择 WebGPU）- 代码仓库
• 使用 WebGPU 计算和渲染粒子 - 由 Daniel Toplak 开发 - 代码仓库
• 在线 WebGPU 计算器：在远程浏览器上使用 WebGPU（通过 WebRTC）- 代码仓库
• WebGPU 学习 - 由 Redcamel 开发 - 代码仓库
• SPIR-V 兼容的 WebGPU 使用小例子 - 由 Tarek Sherif 开发 - 代码仓库
• WebGPU 示例 - 由 wgpu.rs 开发 - 代码仓库
• Three.js WebGPU 渲染器 - 由 Takahiro 开发 - 代码仓库
• WebGPU 点云 - 由 Markus Schütz 开发 - 代码仓库
• 森林 WebGPU - 由 Babylon.js 开发
• WebGPU 游乐场 - 由 @06wj 开发 - 代码仓库
• node-webgpu 示例 - 由 Felix Maier 开发
• Dawn RT（Dawn/WebGPU 的光线追踪扩展） - 由 Felix Maier 开发
• WebGPU 实验 - 由 Will Usher 开发 - 代码仓库
• wgpu-load-test - 由 Alexis Andre 开发
• WGSL-Toy - 由 @HypnosNova 开发 - 代码仓库
• WebGPU 计算 101 演示 - 源代码
• WebGPU：渲染、计算、GPU 实验 - 由 Kevin Masson 开发 - 代码仓库
• WebGPU 草图道场 - 作者：Georgi Nikolov - 代码仓库
• WebGPU 计算元球体 - 作者：Georgi Nikolov - 代码仓库
• WebGPU 2D流体模拟 - 作者：indiana-dev - 代码仓库
• WebGPU实验室 - 作者：Sebastian Macke - 代码仓库
• WebGPU在线演示编辑器 - 作者：Hepp Maccoy - 代码仓库
• Thimbleberry图像变换演示 - 作者：mighdoll - 代码仓库
• Shadowray游乐场 - 作者：codedhead
• Web稳定扩散 - 作者：CMU, OctoML, Catalyst等 - 代码仓库
• WebLLM - 作者：CMU, 华盛顿大学, OctoML等 - 代码仓库
• 着色器图表WGSL - 作者：deepkolos - 代码仓库
• WebGPU内存模型测试 - 作者：Reese Levine等，加州大学圣克鲁兹分校 - 代码仓库
• 行进立方体WebGPU - 作者：Conor O'Malley - 代码仓库
• WebGPU路径追踪 - 作者：Fermin Lozano - 代码仓库

视频

• 从WebGL到WebGPU：Babylon.js的视角，David Catuhe主讲
• 网页上的下一代3D图形技术(Google I/O '19)
• WebGPU (播放列表) - 由 SketchpunkLabs 制作
• WebGPU (播放列表) - 由 Genka 制作
• WebGPU图形编程步骤教程 (播放列表) - 由 徐博士的实用编程 制作
• WebGPU简介：为JavaScript解锁现代GPU访问能力 - 由Google制作
• 深入了解原生游戏中的WebGPU - 由 Madrigal 制作

演示

• Tint - Google提出的文本着色器语言提案
• 使用Rust构建WebGPU - 由Mozilla的Dzmitry Malyshau主讲

社区

• 网页GPU社区组 - W3C社区
• 公共GPU - W3C邮件列表
• Gitter聊天室 - 由Mozilla创建 - 已废弃
• Matrix WebGPU - 非官方频道
• YC关于原生WebGPU的观点 - 关于该文章的讨论
• 将SPIR-V和/或GLSL作为WebGPU扩展的可能性？ - WGSL争议讨论

错误报告

• Webkit
• Firefox
• Chromium

贡献

欢迎贡献！请先阅读贡献指南。

许可证

在法律允许的范围内，Mik BRY已放弃此作品的所有版权和相关或邻接权利。