无需登录 数据私有 本地保存

WebGPU 计算着色器演示 - 并行矩阵乘法

11
0
0
0

WebGPU 计算着色器演示

并行矩阵乘法 · Compute Shader · GPU加速计算

GPU Parallel
您的浏览器不支持 WebGPU

请使用 Chrome 113+、Edge 113+ 或其他支持 WebGPU 的浏览器。下方仍可使用 CPU 进行矩阵乘法对比。

矩阵配置
256
就绪

矩阵元素为随机浮点数 (0~1)，使用 Tile-based 并行算法

点击"开始计算"查看 GPU vs CPU 性能对比
--
GPU 耗时
--
CPU 耗时
--
加速比
--
GPU GFLOPS
--
常见问题与知识点
WebGPU 是新一代的 Web 图形和计算 API，为浏览器提供对现代 GPU 的低级访问能力。相比 WebGL（基于 OpenGL ES），WebGPU 支持计算着色器（Compute Shader）、更高效的命令记录、多线程提交和更低的驱动开销。它借鉴了 Vulkan、Metal 和 DirectX 12 的设计理念，能够更好地利用现代 GPU 的并行计算能力，不仅用于渲染，还能进行通用 GPU 计算（GPGPU），如本工具演示的矩阵乘法。
计算着色器是一种在 GPU 上运行的通用并行计算程序，不限于图形渲染。它将大量计算任务分配到成千上万个线程中同时执行。在本工具中，每个线程负责计算结果矩阵的一个元素，通过 Tile-based（分块）算法利用工作组的共享内存来减少全局内存访问，显著提升矩阵乘法的计算效率。计算着色器使用 WGSL（WebGPU Shading Language）编写。
矩阵乘法 C = A × B 中，结果矩阵 C 的每个元素可以独立计算（C[i][j] = Σ A[i][k] × B[k][j]），不存在数据依赖。这种"embarrassingly parallel"的特性使其非常适合 GPU 的 SIMT（单指令多线程）架构。对于 N×N 的矩阵，计算复杂度为 O(N³)，但 GPU 可以同时运行数千个线程，将时间复杂度在实际上大幅降低。例如，1024×1024 矩阵乘法涉及约 21 亿次浮点运算，GPU 可在毫秒级完成。
朴素的 GPU 矩阵乘法中，每个线程直接从全局内存读取数据，导致大量重复的全局内存访问。Tile-based 算法将矩阵分成小块（tile，本工具使用 16×16），每个工作组先将 tile 加载到共享内存（Workgroup Shared Memory）中，工作组内的线程从高速共享内存读取数据进行计算。这大幅减少了全局内存带宽压力，通常可带来 5-20 倍的性能提升。
截至 2024 年，Google Chrome 113+、Microsoft Edge 113+、Opera 99+ 默认启用 WebGPU。Firefox 和 Safari 正在积极开发中（可通过实验性标志启用）。WebGPU 也需要操作系统和硬件支持：Windows（DirectX 12）、macOS（Metal）、Linux（Vulkan）。移动端支持正在逐步推进，Chrome for Android 已开始支持。
加速比取决于矩阵大小和硬件配置。对于1024×1024的矩阵，现代 GPU 通常比单线程 CPU 快 50-200 倍。本工具同时运行 GPU（WebGPU Compute Shader）和 CPU（JavaScript）版本，您可以直观地看到加速效果。注意，JavaScript CPU 版本的性能受限于 JS 引擎，实际原生 C++ CPU 实现会更快，但 GPU 的并行优势依然显著。
🔧 相关工具