WebGPU 计算管线、计算着色器（通用计算）入门案例：2D 物理模拟

最新推荐文章于 2025-03-04 21:39:44 发布
最新推荐文章于 2025-03-04 21:39:44 发布
阅读量544 收藏
点赞数
分类专栏： 漫谈 WebGPU 文章标签： webgpu compute gpgpu 计算着色 通用计算
原文链接：https://surma.dev/things/webgpu
版权
本文详细介绍了WebGPU的计算管线、计算着色器，通过一个2D物理模拟案例，帮助理解WebGPU如何进行通用计算。WebGPU作为底层图形API，相比WebGL提供了更底层的接口，支持计算管线和渲染管线。文中还探讨了适配器、设备、着色器、管线、工作组等核心概念，并讨论了数据交换中的挑战，如绑定组布局、暂存缓冲区。文章适合对WebGPU感兴趣的开发者阅读。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

文章目录

原文译名：WebGPU - 专注于处理核心（GPU Cores），而不是绘图画布（Canvas）

原文发布于 2022年3月8日，传送门 https://surma.dev/things/webgpu

这篇东西非常长，不计代码字符也有1w字，能比较好理解 WebGPU 的计算管线中的各个概念，并使用一个简单的 2D 物理模拟程序来理解它，本篇重点是在计算管线和计算着色器，绘图部分使用 Canvas2D 来完成。

WebGPU 是即将推出的 WebAPI，你可以用它访问图形处理器（GPU），它是一种底层接口。

原作者对图形编程没有多少经验，他是通过研究 OpenGL 构建游戏引擎的教程来学习 WebGL 的，还在 ShaderToy 上学习 Inigo Quilez 的例子来研究着色器。因此，他能在 PROXX 中创建背景动画之类的效果，但是他表示对 WebGL 并不太满意。别急，下文马上会解释。

当作者开始注意 WebGPU 后，大多数人告诉他 WebGPU 这东西比 WebGL 多很多条条框框。他没考虑这些，已经预见了最坏的

了解本专栏 订阅专栏 解锁全文 超级会员免费看
WebGPU 通用计算（计算管线、计算着色器）入门：矩阵相乘
树后树前
09-12 429
文章出处：https://web.dev/gpu-compute/ 文章发布时间 文章最后更新 翻译时间 翻译人 2019年8月28日 2021年9月6日 2021年9月12日 四季留歌 版权原作者所有。转载翻译稿请带连接与翻译者。 文章目录1 背景2 访问 GPU3 写入缓存4 读取缓存5 着色器编程6 GPUBuffer 对象的创建7 绑定组及其布局对象8 计算着色器代码译者注9 创建、配置管线10 指令的提交译者插入语：为什么要除以811 读取结果矩阵12 收尾13 性能对比译者建
Vulkan入门系列18 - 计算着色器（Compute Shader）
GPU全栈博主-程序哥
08-27 795
在这一章节中，我们将探讨计算着色器。到目前为止，之前的所有章节都涉及了Vulkan管线的传统图形部分。但与OpenGL等传统API不同，Vulkan中中计算着色器的支持是强制性的。这意味着我们可以在每个可用的Vulkan实现上使用计算着色器，无论是高端桌面GPU还是低功耗嵌入式设备。这为图形处理单元（GPGPU）上的通用计算打开了新世界，无论您的应用程序运行在哪里。GPGPU意味着您可以在GPU上进行通用计算，这在传统上是CPU的领域。
如何用WebGPU流畅渲染千万级2D物体：基于光追管线
m0_56069948的博客
08-07 902
本文主要使用光追管线，优化了内存占用，将2D物体数量提升到了千万级不需要实现BVH，实现和维护更加简单因为是硬件加速射线相交计算，遍历的性能更好兼容性更差需要Nodejs环境和RTX显卡不能使用最新的WebGPU标准WebGPU Node项目使用的是2020年版本的WebGPU标准，不是最新的标准所以，我们可以考虑在Web版产品中使用浏览器的WebGPU标准（基于计算管线）来实现，而在桌面版产品中基于光追管线来实现。...
WebGPU：前端图形性能的新纪元——开启浏览器高性能计算新时代
最新发布
我是 二川兄，对Web开发、GIS开发、3D模型、机器学习、面试技巧等方面都有一些涉猎~ 欢迎您加入技术交流圈！你可以在我的文章末尾找到我~
03-04 1万+
WebGPU：前端图形性能的新纪元——开启浏览器高性能计算新时代
WebGPU 计算管线
weixin_44938311的博客
12-27 560
计算管线（ComputePipeline）是 WebGPU 中控制计算着色器阶段的管线，它适用于各种 GPU 通用计算场景，这是 WebGL 所不具备的。我们能通过绑定的存储缓冲区及存储纹理来获得管线计算输出。
webgpu示例解析1
WEEKEND_WOW的博客
10-09 400
device,navigator,presentationFormat，commandEncoder，textureView 基本都是这么创建。首先是commandEncoder开始一个pass的绘制，而pass的绘制描述在前面设置好，此时传入。然后是设置渲染管线，这个例子中管线设置了着色器，图元绘制模式为triangle-list。然后encoder finish之后，把这一系列记录的操作submit，即可绘制出三角形。看frame函数，可以看见要绘制一个三角形，需要做这么一些事情。
18. WebGPU 计算着色器
xuejianxinokok的专栏
06-29 493
缺省时每个维度默认为 1，因此 @workgroup_size(1) 等同于 @workgroup_size(1, 1, 1)。如果将工作组定义为 @workgroup_size(3, 4, 2) ，那么将定义 3 * 4 * 2 个线程，或者换句话说，每个工作组有 24 线程。如果随后调用。
webgpu
李卓书
06-18 1582
WebGPU 是下一代 Web 上的图形标准。与当前 Web 上的 3D 图形标准 WebGL 相比，WebGPU 旨在充分发挥现代 GPU 架构的能力，进一步降低 CPU 端的开销，优化多线程的应用，以及增加对 GPU 通用计算（GPGPU）的直接支持。与CPU不同，GPU具有更强大的并行计算能力，可以快速处理大量的图像和视频数据。因此，GPU在许多领域，包括游戏、图像处理、科学计算、人工智能等方面发挥着非常重要的作用。
SIGGRAPH2015技术报告-Unity计算着色器渲染管线
10-14
在SIGGRAPH2015技术报告中，主题内容是关于Unity计算着色器渲染管线的研究，该报告由Ubisoft Montreal的首席3D程序员Ulrich Haar和Ubisoft工作室RedLynx的高级首席程序员Sebastian Aaltonen联合发表。报告详细探讨了...
19. WebGPU —计算着色器(compute shader)
xuejianxinokok的专栏
07-04 1027
WebGPU 是即将推出的 Web API，可提供对GPU的底层控制并用于通用目的计算任务。我对计算机图形不是很有经验。我通过阅读有关如何使用 OpenGL 构建游戏引擎的教程了解了 WebGL 的点点滴滴，并通过观看 Inigo Quilez 在 ShaderToy 上仅使用着色器而不使用任何 3D 网格或模型来完成令人惊叹的事情，从而了解了有关着色器的更多信息。这让我足以在 PROXX 中构建诸如背景动画之类的东西，但我对 WebGL 一直不满意，我将很快解释原因。
WebGPU-6
caxieyou的专栏
07-14 650
再来看看第三个例子，textured_cube
webgpu-compute-rasterizer:一个简单的基于计算的光栅化器
05-26
WebGPU计算光栅器 本实验不使用硬件光栅化器，而是使用计算着色器执行光栅化。 请注意，软件光栅化程序比具有硬件加速功能的光栅化程序要慢得多。 我没有花时间优化它，如果您对此主题感兴趣，可以将其视为准系统示例。 参考
WebGPU 规范篇 08 管线
树后树前
09-22 169
系列博客总目录：https://blog.youkuaiyun.com/cRGBc/article/details/120412614 文章目录管线1 基础管线1.1 基础管线的 getBindGroupLayout 方法1.2 默认管线布局1.3 可编程阶段：GPUProgrammableStage1.4 补充资料：管线和着色阶段1.5 如何验证可编程阶段对象的合规性1.6 如何验证某个着色器中被绑定的变量的合规性2 渲染管线2.1 管线的创建2.1.1 异步创建管线2.1.2 如何验证 GPURenderPipel
WebGPU教程—第一个三角形案例
u014291990的博客
06-15 377
webgpu第一个三角形案例，不用配置开发环境，直接把代码复制到html文件，浏览器打开就能看到
webgpu示例解析4
WEEKEND_WOW的博客
10-28 317
这个片源部分，直接读到从顶点输出的俩变量，哦不 只读了fragpos，直接输出了。然后定义了一个结构体用于输出 有builtin变量 location变量。这个在Vulkan里叫set binding 我理解为他是个二维数组。uniforms就需要注意两个值一个binding 一个group。builtin的是position 就是MVP。这个fragpos是随便的一个变量。接下来我们看下这个wgsl部分。
【WebGPU】WebGPU 中的反应扩散计算着色器
05-11 1168
在本教程中，我们将使用 WebGPU 技术中的计算着色器实现图像效果。更多精彩内容尽在。
WebGPU-1
caxieyou的专栏
07-14 6200
初衷：一直在从事Web端的3D相关工作，主要集中在3D渲染的研发。偶然间在YouTube看到了一段谷歌发布的介绍WebGPU的视频。觉得这是个很有意思的新技术。而且解决了很多现有的WebGL渲染中的痛点，所以就想跟着这套东西一起把仔细看一下。 WebGL出来已经十几年了，大概有个12年了。网上关于这套API接口的资料和教程浩如烟海，配上很多成熟的在线渲染引擎和游戏。做的比较好的有ThreeJS，...
WebGPU：下一代 Web 图形和计算 API
音视频开发进阶
05-30 839
WebGPU 是一种新兴的 Web 标准，旨在为现代图形和计算应用提供高性能、低功耗的 API。本文将介绍 WebGPU 的背景、特点、用途以及和 WebGL 的对比。一、背景 随着 Web 技术的不断发展，越来越多的高性能图形和计算应用开始出现在浏览器中。WebGL 是迄今为止最广泛使用的 Web 图形 API，但随着硬件和软件技术的进步，WebGL 已经逐渐暴露出性能和功能的局限性。为了满足现...
I want to talk about WebGPU我想谈谈WebGPU
栗少的博客
05-03 571
WebGPU is the new WebGL. That means it is the new way to draw 3D in web browsers. It is, in my opinion, very good actually. It is so good I think it will also replace Canvas and become the new way to draw 2D in web browsers. In fact it issogood I t
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值