使用 WebGPU 解锁 GPU 计算能力

大家好 我叫 Mike 是 Safari 浏览器团队的工程师 今天我将向大家展示 WebGPU 如何 让你从网页端解锁 GPU 的并行计算能力 在 3D 图形方面 WebGPU 具备 WebGL 的所有功能 但性能和灵活性要高得多 它是网页图形处理的最佳选择 除此之外 它还是直接在浏览器中 利用 GPU 执行通用计算的 唯一方法 如果你熟悉 Metal 使用起来会非常顺手 大多数调用都与 Metal 框架的调用一一对应 事实上所有支持 Metal 的平台 都支持 WebGPU 具体包括 Mac、iPhone、 iPad 和 Apple Vision Pro 作为 Web API 使用 WebGPU 的 网站和网页 App 可在所有支持它的设备上运行 在非 Apple 系统上 WebGPU 通过 类似 Metal 的 API 实现 如果你不熟悉底层图形编程 有许多支持 WebGPU 的 网页图形库可供使用 让你能够利用它提供的 所有性能和功能 实际上 你可以使用 在底层运行 WebGPU 的 threeJS 实时为这些精美的 3D 水母添加动画效果 我认为这是一个很棒的例子 而且 在 Safari 浏览器中运行得非常流畅 这要归功于 WebGPU 从设计之初 就充分利用了 当今的现代硬件 首先我将探讨这个 API 以及 WebGPU 如何映射到 Metal 这将带大家了解任何 WebGPU 应用程序所需的大部分代码 然后 我将介绍如何创建 WebGPU 着色器程序 即直接在 GPU 上运行的代码 我将介绍着色语言 以及为什么 网页需要新的着色语言

在介绍完基础知识后 我将讨论如何通过 这个 API 获得最佳性能 如果你已经熟悉 WebGPU 当我讲解针对 Apple 平台的 特定优化时 这部分内容会特别有趣 首先让我们快速 了解一下图形管道

管道可以看作是 从左到右流动的 它从你的网站或 网页 App 开始 加载各种内容 例如图像、 视频或二进制数据

这些内容随后 会传递给 WebKit 由后者负责将它们 准备好供 GPU 使用

WebKit 会调用 Metal 框架 来创建资源和程序 这些资源和程序稍后会 直接在图形硬件上运行

现在让我们详细分析一下 在 WebGPU 中 Metal 会生成 三种类型的资源： 缓冲区、纹理和采样器 这些资源由 WebKit 组织成 GPU 绑定组 基本上 这是一种 将资源分组在一起的结构化方式 以便 GPU 可以 高效地使用它们 在底层实现中 这些资源都被打包 到一个参数缓冲区中 这个缓冲区只是一个 Metal 缓冲区 用于保存对实际 GPU 资源的引用 程序本身来自代码字符串 并被编译成三种主要类型： 计算程序、顶点程序和片段程序 这些是在 GPU 上 运行的实际指令 负责从计算到在屏幕上 渲染像素的所有工作 那么在深入理解资源和程序 如何融入管道后 我将简要介绍 WebGPU 如何在它的 API 中定义不同的接口

WebGPU 是一个扁平的 API 但它有很多接口 层次结构的最顶层 是 GPU 对象 和 GPU 适配器接口

Canvas 通常与 WebGPU 一起使用 Canvas 现在可以通过查询 WebGPU 上下文来返回 GPUCanvasContext

设备是大多数 API 调用的主要入口点 它用于创建大多数其他接口

尽管这个 API 中 有很多不同的接口 但它们可以简化为几个类别 即纹理、缓冲区和采样器等资源

编码器 用于对资源发出命令 管道 用于告知编码器如何 解释各种资源 绑定组 用于将相关资源分组在一起 以及着色器模块 其中包含 用于在 GPU 上运行计算的指令 现在 在了解了 WebGPU 的整体结构后 让我通过展示 如何创建设备和资源 来介绍如何使用这个 API

设备是大多数 API 调用的入口点 如果你熟悉 Metal 会发现它与 MTLDevice 非常相似

假设你的页面有一个 canvas 首先获取 canvas 元素 然后 使用 navigator.gpu.requestAdapter() 创建适配器并调用 requestDevice 来创建 GPU 设备

WebGPU 支持多种扩展 一个是 shader-f16 扩展 它让你可以使用半精度浮点数

它们通过减少内存带宽 来帮助提高性能 虽然所有 Apple 设备都支持 这个扩展 但它是一项可选功能 因此在其他平台上使用之前 请务必检查支持情况

接下来 通过调用 configure 将 canvas 上下文与设备设置在一起 这会将 canvas 链接到 GPU 可以实际写入的内存

现在设备已准备好 我可以开始创建一些资源了 在 WebGPU 中 你将大量使用 缓冲区和纹理等资源 在 Metal 中 它们由 MTLBuffer 和 MTLTexture 表示

缓冲区非常灵活 你可以用它们来存储各种数据 从浮点向量等简单数据 到你自己定义的 更复杂的自定数据类型 例如 你可能有一个缓冲区 其中包含多个 粒子类型的实例 想象一下 三个粒子就 储存在那个缓冲区中

缓冲区是通过在设备上 调用 createBuffer 来创建的 传递缓冲区大小和使用模式 使用模式使 WebGPU 能够避免数据争用 而不会增加 API 复杂性

设备有一个名为 queue 的属性 用于对缓冲区和纹理执行操作

创建缓冲区后 通过调用 writeBuffer 来填充缓冲区的内容 传递缓冲区、偏移量 和 JavaScript arrayBuffer

与缓冲区类似 纹理本质上也是内存块 但它们会与 GPU 上的 特殊纹理寄存器 和指令相关联 它们通常表示某些图像数据 可以是一维、二维的 二维纹理数组、 立方体贴图 即六个二维纹理的数组 或者三维纹理

创建纹理的方式是调用 device.createTexture 并传入纹理的宽度和高度、 2D 纹理格式以及使用模式

创建 GPUTexture 后 可以使用 device.queue.copyExternalImageToTexture 加载图像数据 传递图像位图、 我们刚创建的 2D 纹理 以及图像大小

纹理通常由图像数据创建 并在 GPU 上表示图像 创建设备和资源后 让我们看看如何创建管道

管道指定 GPU 上将如何 使用纹理和缓冲区 管道分为两种类型： 渲染管道 用于顶点程序和片段程序 计算管道 用于计算程序 它们对应 Metal 中的 MTLRenderPipelineState 和 MTLComputePipelineState 对象

要创建计算管道 只需调用 device.createComputePipeline 传递绑定组布局 或常量自动标识符 后者会从着色器生成布局

布局是缓冲区、纹理和采样器 从 API 传递到 GPU 程序的结构化方式

创建管道需要着色器模块 它由字符串创建

渲染管道的创建方式与之类似 需要自动布局、顶点着色器模块 以及片段着色器模块

创建设备、 资源和管道后 任何 WebGPU 应用程序的 基本设置就完成了

现在我们已经了解了 WebGPU API 的架构 我们来看看如何开发着色器

WebGPU 着色语言称为 WGSL 它让网站能够轻松编写 直接在 GPU 上运行的程序 Apple 深度参与了 WGSL 着色语言的设计和实现 WGSL 从构建之初 就考虑了网页安全性 WGSL 支持三种类型的程序： 顶点程序、 片段程序和计算程序

我将逐步介绍如何创建 这个简单的 WebGPU 示例 它由以下部分组成：一个顶点程序 用于从 JavaScript 获取缓冲区数据 并在屏幕上创建三角形 一个片段程序 用于计算纹理的 单个颜色和深度值 以及一个计算程序 可用于执行任何常规计算 但在这个例子中 我们将执行物理模拟

顶点程序计算三角形 在屏幕上的显示位置

在这里 我们可以看到 这个示例中使用的 100,000 个三角形的轮廓

要编写三角形的输出位置 需使用 @builtin position 属性

这是 main 函数的定义 以及顶点着色器的输入 它只是写入位置和颜色 现在 我们来看看片段着色器

获取我们在顶点阶段生成的颜色 并将这个颜色储存在纹理中 这是一个简单的例子 但你可以在这里插入任何逻辑 来计算颜色和深度值 你还可以写入存储纹理、缓冲区 执行原子操作等等 WGSL 非常灵活 现在让我们来看看更灵活的东西： 计算着色器

与其他程序类型一样 计算着色器可以包含许多绑定 这些绑定是 从 JavaScript 到着色器的输入

计算着色器非常酷 因为你可以执行所需的任何计算 将结果存储在缓冲区中 并将缓冲区读回 JavaScript 代码中 屏幕上不一定需要任何可视化效果 WebGL 不支持计算着色器 这也是在任何新应用程序中 使用 WebGPU 的另一个原因

计算程序需要指定一个工作组大小 它定义了计算着色器将执行的 网格大小

我们还使用 global_invocation_id 这是整个网格中的位置 这是一个内置变量 无需从 JavaScript 传递任何内容即可使用

计算着色器的主体会 更新粒子模拟 应用重力、速度和经过的时间

你可以在计算着色器中 执行所需的任何计算 并在 GPU 上 以惊人的性能并行执行

在粒子完全淡出后 通过在概率图上调用 textureLoad 并为粒子选择新位置 以便选择一个新点来重新生成粒子

最后 粒子的其余属性 会重置为初始值 并将粒子存储在缓冲区中

将所有这些相结合 我们就得到了 这个带有 WebGPU 标志的精美动画 通过利用 GPU 的并行处理功能 你可以执行以前从网页端 无法实现的、任意规模的计算 同时仍能实现实时性能

这很棒 不是吗？

以上简要介绍了如何为 WebGPU 应用程序开发着色器 现在 我将展示如何 从 WebGPU 获得最佳性能

只需牢记几个准则 就可以帮助你在 Apple 平台上提供最佳体验 获得出色性能的关键是 关注内存的使用情况 这意味着： 使用节省内存的数据类型 记录一次渲染命令 然后重复使用它们 并保持资源数量较低 好了 现在我们来更详细地了解

有几种方法可以 最大限度地减少内存使用 首先你可以使用半精度浮点数 它们是 IEEE 标准 在 WGSL 中 数据类型称为 f16 它们确实有助于减少 内存使用并提高性能 也就是说 它们并不总是实用的 你需要确保算法在精度降低的情况下 保持稳定 并且要记住 算法的值上限略高于 65,000 不像 32 位浮点数 可以处理大得多的值 特别是在 iOS 和 visionOS 上 以 f16 或压缩格式存储数据 确实可以帮助你避免程序 因内存压力而终止 要使用半精度浮点数 你需要在创建设备时启用它们 并在 WGSL 代码中声明 下面通过一个简单的代码示例 来展示如何做到这一点

首先 在调用 requestDevice 时 启用 shader-f16 扩展 然后在着色器中 添加“enable f16”语句

这样你就可以使用 f16 标量和向量类型 以及像之前一样使用所有 32 位类型 即使只是将数据以半精度存储 并立即解压为 f32 仍能大幅减少内存占用 避免 App 因内存压力而终止

另一种尽可能减少内存使用的方法 是避免不必要的缓冲区 和纹理更新调用 这些操作需要将数据从 JavaScript 拷贝到为 Metal 资源 提供支持的内存中 使用索引和间接 使用模式更新缓冲区 成本尤其高昂 因为再次使用 缓冲区之前需要执行验证 这些缓冲区直接或间接 索引到顶点缓冲区 WebGPU 必须确保 这些缓冲区的所有偏移量 在执行任何绘制命令前 都在有效范围内

仅在必要时更新这类缓冲区 这也适用于在绑定组中 使用具有写入或读写访问权限 的缓冲区 如代码示例所示 除非在着色器中 通过资源写入数据 否则应优先使用只读访问 尤其是当资源是索引或间接缓冲区时 遵循这些内存使用建议 可能会对性能产生很大影响 不仅适用于 Apple 平台 还适用于所有移动和桌面设备 接下来 我想详细介绍一下 如何重用渲染命令

渲染捆绑包是实现这一点的绝佳方式 让你能够对命令进行一次编码 并根据需要多次重放 WebGPU 必须确保所有读写操作 定义明确且在有效范围内 这通常意味着每帧都需要大量验证 但使用渲染捆绑包时 这种验证仅在创建捆绑包时执行一次 而不是每次运行时都执行 这样可以节省时间 使 App 性能更接近原生 App 为实际逻辑留出更多空间 创建渲染捆绑包非常简单 首先创建渲染捆绑包编码器 然后对绘制调用进行编码 就像使用渲染通道编码器一样 调用 finish() 会创建捆绑包 以供重用

现在有了捆绑包 只需调用 executeBundles() 就可以根据需要 多次执行所有这些绘制命令

在后台 渲染捆绑包会映射到 Metal 的间接命令缓冲区 并提供类似的性能优势 现在我们已经解决了 内存使用问题并减少了验证开销 让我们看看如何减少资源数量

具体来说 命令缓冲区、 渲染和计算通道 绑定组布局以及绑定组

命令缓冲区边界 需要在高速片上内存 和统一设备端内存之间进行同步 如有可能 每个更新循环 使用单个命令缓冲区 如果不可行 一般的经验法则是 尽可能少地使用 命令缓冲区 请记住 仅在需要 将数据写回统一内存时 才需要拆分命令缓冲区 这种情况通常很少见

与命令缓冲区不同 通道不需要与统一内存同步 但它们仍然会消耗大量内存带宽 具体取决于渲染目标和计算调度大小 因此 最好尽可能少地 使用通道以节省内存带宽

像许多手机一样 Apple 设备中的 GPU 以基于图块的延迟渲染器为基础 遵循合并通道并节省 内存带宽方面的最佳做法 将帮助你的网站或网页 App 在 Apple 硬件上表现出色 如需进一步了解基于图块的渲染器 请观看 WWDC 2020“为搭载 Apple 芯片的 Mac 优化 Metal 性能” 以及“利用 Metal 驾驭 Apple GPU”

接下来 我来重点介绍绑定组 它们通过 Metal 参数缓冲区实现 因此创建绑定组 也会创建新的 MTLBuffer 通过使用动态偏移量 可以创建单个绑定组 这个绑定组共享相同的布局 但在运行时使用 不同的资源 要使用动态偏移量 必须创建自定绑定组布局 而不是使用着色器模块的自动布局

调用 createBindGroupLayout 并 设置 hasDynamicOffset 来创建布局 然后传递新创建的布局 以创建绑定组 调用 setBindGroup 时 会用到动态偏移量 绑定组中的每个动态缓冲区 需要一个偏移量

在这种情况下 绑定组有一个 使用动态偏移量的缓冲区 因此会向 setBindGroup 传递一个偏移量

例如 不建议创建 10 个绑定组 每个内部有一个 64 字节的缓冲区

更好的方法是 创建一个 640 字节的缓冲区 来表示 10 个 64 字节的对象 这样就避免了 创建 9 个 Metal 缓冲区

通过在更少的内存中 存储相似数据、避免重复验证 并最大限度地减少 创建的 Metal 对象总数 你可以使用 WebGPU 创建 出色、高效的网站和网页 App 希望你在使用 WebGPU 时 考虑这些性能因素 WebGPU 允许直接 在 GPU 上运行自定算法 这是以前从网页端无法实现的 强烈建议你立即开始 在 Mac、iPhone、iPad 和 Apple Vision Pro 上使用 WebGPU 并考虑最佳使用指南

我对网页 GPU 编程的未来 感到非常兴奋