Safari 26 刚发布,WebGPU 计算着色器正式集齐了四大浏览器。4096×4096 矩阵乘法,RTX 3060 上比 WebGL 快 8 倍,原生 CUDA 追到 82%——这件事把浏览器端机器学习的格局彻底变了
Safari 26 刚发布,WebGPU 计算着色器正式集齐了四大浏览器。4096×4096 矩阵乘法,RTX 3060 上比 WebGL 快 8 倍,原生 CUDA 追到 82%——这件事把浏览器端机器学习的格局彻底变了
你在做一个在线图像处理的 Web 应用。用户上传一张图片,你要跑一个风格迁移模型。常见的解法是什么?把图片 Base64 编码,发到服务器,服务器 GPU 跑完,返回结果。延迟高,数据要出设备,还有隐私风险。
WebAssembly 帮了一些,SIMD 优化后一些场景比原生 JS 快 5-10 倍。但真正的矩阵乘法——机器学习模型的核心计算——WASM 的 CPU 执行很快就碰到天花板。你在用的是消费级 CPU,和 GPU 的数千核心并行比起来,差了不止一个量级。
这个问题在 2026 年有了根本性的答案。
WebGPU 计算着色器:从显卡接口到通用并行计算
WebGPU 最早被当成「浏览器里的 DirectX」——给 3D 游戏用的。但它的设计者从一开始就把 GPU 的两种能力都装了进来:渲染管线,和通用计算。
计算着色器(Compute Shader)是另一套东西。它本质上是一个函数,GPU 上千个核心并行跑同一段逻辑,处理不同的数据。没有任何图形输出,只有纯粹的数学运算。
“`javascript
const shader = device.createShaderModule({
code: `
@group(0) @binding(0) var input: array<f32>;
@group(0) @binding(1) var output: array<f32>;
@compute @workgroup_size(64) fn main(
@builtin(global_invocation_id) id: vec3
) {
let i = id.x;
output[i] = input[i] * 2.0;
}
`
});
“`
@compute 声明这是一个计算函数,@workgroup_size(64) 表示每组 64 个工作线程。上面的代码里,每个 GPU 核心同时执行 `*2.0`,一百万个数字并行处理,时间只相当于处理一个数字。
真实性能数据:WebGPU vs WebGL
实测矩阵乘法(SitePoint + Johal 基准测试):
| 矩阵规模 | 硬件 | WebGL | WebGPU | 提速 |
|---|---|---|---|---|
| 512×512 | M2 | 4.2ms | 2.6ms | 1.6× |
| 1024×1024 | RTX 3060 | 15.3ms | 3.9ms | 3.9× |
| 2048×2048 | RTX 3060 | 98ms | 14.2ms | 6.9× |
| 4096×4096 | RTX 3060 | 720ms | 89ms | 8.1× |
从 1024×1024 开始,WebGPU 优势突破 3 倍。和原生 CUDA 相比,WebGPU 1.2 在 RTX 4090 上达到了原生 CUDA 12.4 吞吐量的 82%。
2026 年:四大浏览器全部稳定
Safari 26(2026 年)正式完成支持后:
- Chrome 113+ ✅
- Firefox 125+ ✅
- Safari 26+ ✅(完整支持)
- Edge 113+ ✅
到了 2026 年,WebGPU 不再是问「浏览器支不支持」的问题,而是问「你的用户里还有谁没支持」的问题。
真正改变的是什么:AI 推理在浏览器里跑了
Google 的 WebLLM 项目已经在生产环境跑了:Mistral 7B、LLaMA 3、Phi-3,这些模型直接跑在你的笔记本电脑的 GPU 上,不需要服务器。数据不离开用户设备,延迟从几百毫秒的网络往返变成了本地 GPU 的微秒级计算。
下一步:判断 WebGPU 是否适合你的场景
不是所有计算都该往 GPU 上搬。256×256 以下的小矩阵,API overhead 可能抵消收益;内存密集型操作(如 FFT),WebGPU 比原生 CUDA 慢 37-41%。
适合 WebGPU 的场景:
- 机器学习推理:矩阵乘法、注意力计算,数据量越大优势越明显
- 大规模数据可视化:GPU 并行渲染,百万级数据点无压力
- 物理模拟:粒子系统、流体仿真
- 图像/音视频处理:滤镜、编码
- 来源:SitePoint(2026-02)、Johal(2026-05)*
评论区
登录后可评论。