了解 webgpu api 如何为图形和通用计算提供安全访问 gpu 设备的权限。我们还将探讨用来编写 gpu 程序的 wgsl 着色语言。此外，我们将深入探索在台式机和移动设备上实现最优性能同时尽可能降低能耗的最佳实践。

视频封面
视频地址

此文章由AI生成，可能存在错误，如有问题，请联系djs66256@163.com

WebGPU：解锁网页GPU计算与图形新纪元

在WWDC技术分享中，Safari团队工程师Mike详细介绍了WebGPU这一革命性技术，它为网页开发者提供了安全访问GPU设备的全新方式，不仅能够实现高性能图形渲染，还能进行通用GPU计算。

WebGPU技术概览

WebGPU作为WebGL的继任者，在3D图形领域实现了全面超越，具备更高性能和更强灵活性。值得注意的是，WebGPU目前是唯一能在浏览器中直接运行通用GPU计算的解决方案。其API设计与苹果Metal框架高度相似，在Mac、iPhone、iPad和Vision Pro等支持Metal的平台上都能完美运行。

WebGPU的跨平台特性使其成为网页图形处理的理想选择。开发者可以直接使用WebGPU API，也可以借助threeJS等图形库来享受WebGPU带来的性能优势。一个典型的案例是实时渲染的3D水母动画，在Safari中展现出流畅的视觉效果。

WebGPU API架构解析

WebGPU的图形管线可以分为几个关键阶段：内容加载、WebKit预处理、Metal资源创建和GPU硬件执行。在这个过程中，WebGPU通过Metal生成三类核心资源：

  • **缓冲区(buffers)**：存储各类数据
  • **纹理(textures)**：处理图像数据
  • **采样器(samplers)**：控制纹理采样方式

这些资源被组织为GPU绑定组，底层实现则通过Metal的参数缓冲区完成。WebGPU程序由代码字符串编译而来，分为三种类型：

  1. 计算程序(compute)
  2. 顶点程序(vertex)
  3. 片段程序(fragment)

WebGPU API采用扁平化设计，主要接口包括：

  • GPU和GPU适配器接口
  • GPUCanvasContext（与Canvas配合使用）
  • GPUDevice（API主要入口）

这些接口可以简化为五大类：

  • 资源类（纹理、缓冲区、采样器）
  • 编码器（操作资源）
  • 管线（指导资源使用）
  • 绑定组（资源分组关联）
  • 着色器模块（GPU计算指令）

实践WebGPU开发

创建基本的WebGPU应用需要经历几个关键步骤：

// 创建GPUDevice并配置GPUCanvasContext
const canvas = document.querySelector('canvas');
const adapter = await navigator.gpu.requestAdapter();
const f16Supported = adapter?.features.has('shader-f16');
const device = await adapter?.requestDevice(
  requiredFeatures: f16Supported ? ['shader-f16'] : []
);
const context = canvas.getContext('webgpu');
context.configure({ device, format, alphaMode });

这段代码展示了如何初始化WebGPU环境。值得注意的是，WebGPU支持shader-f16等扩展功能，能够使用半精度浮点数来提升性能并降低内存占用。

创建资源方面，WebGPU提供了灵活的缓冲区和纹理系统。缓冲区能够存储各种数据类型，而纹理则专门处理图像数据：

// 创建缓冲区示例
device.createBuffer({
  size: bufferSize,
  usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST
});

// 创建纹理示例
device.createTexture({
  size: [image.width, image.height],
  format: 'rgba8unorm',
  usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST
});

WGSL着色语言详解

WebGPU采用WGSL(WebGPU Shading Language)作为着色语言，这种语言专为网页安全设计，支持三类程序：

  1. 顶点程序：处理几何体位置计算
  2. 片段程序：计算像素颜色和深度
  3. 计算程序：执行通用GPU计算

计算着色器是WebGPU独有的强大功能，能够进行物理模拟等复杂计算，这是WebGL无法实现的。计算程序需要定义工作组尺寸(workgroup size)，并使用global_invocation_id等内置变量。

性能优化关键策略

在苹果平台上优化WebGPU性能需要注意几个关键点：

  1. 内存管理：使用半精度浮点数(f16)可以显著降低内存占用。在iOS和visionOS上，数据压缩格式也能有效避免内存问题。
// 启用f16示例
const device = await adapter?.requestDevice(
  requiredFeatures: ['shader-f16']
);

  1. 命令复用：使用渲染包(render bundles)可以避免重复验证，只需编码一次命令即可多次执行。

  2. 资源精简：尽量减少命令缓冲区、渲染/计算通道、绑定组的数量。动态偏移技术可以帮助减少绑定组的创建。

WebGPU为网页带来了前所未有的GPU计算能力，开发者现在可以在网页上实现以往需要原生应用才能完成的高性能计算和图形渲染。随着WebGPU的普及，网页应用的性能边界将被重新定义。

相关资源

开发者可以通过以下资源深入了解WebGPU：

相关视频：

文档：