WebGPU Compute Shader 演示器

展示矩阵加法、向量点积、归约求和三类 GPU 并行计算的 WGSL Shader 源码和 WebGPU JavaScript 调用代码，并在浏览器本地用 JavaScript 计算出对照结果；会检测浏览器是否支持 WebGPU，但不会真正把 Shader 提交到 GPU 执行。

免费在线工具

Loading…

使用说明

页面顶部会自动检测你的浏览器是否支持 WebGPU（navigator.gpu），并给出对应提示（Chrome/Edge 113+ 默认支持）。
在三个标签页（矩阵加法、向量点积、归约求和）之间切换，每个标签页都提供对应的 WGSL Compute Shader 源码和完整的 WebGPU JavaScript API 调用示例。
调整“矩阵尺寸”/“向量长度”/“数组长度”下拉框，或点击“加载示例数据”，工具会在浏览器本地用 JavaScript 生成随机矩阵/向量并计算出结果（矩阵加法、点积、求和），作为与 GPU 版本对照学习用的 CPU 端参考结果。
点击代码块右上角的“复制代码”，可将 WGSL Shader 源码或 JavaScript 调用代码复制到自己的项目中实际接入 WebGPU。

检测浏览器是否真实支持 WebGPU（navigator.gpu），并给出明确的支持/不支持提示。
提供 3 组教学向 WGSL Compute Shader 完整源码：矩阵加法（每线程处理一个矩阵元素）、向量点积（原子加归约思路）、归约求和（工作组共享内存树形归约）。
提供对应的完整 WebGPU JavaScript API 调用代码（创建 device、buffer、pipeline、bindGroup、dispatchWorkgroups、读取结果等全流程），可直接复制到项目中使用。
在浏览器本地用纯 JavaScript（logic.js）计算出矩阵加法/点积/归约求和的真实结果，作为与 GPU 实现对照的 CPU 参考值，会随机生成测试矩阵/向量并展示格式化的计算结果。
矩阵尺寸/向量长度/数组长度可调整，展示不同规模下的输入输出。
所有代码块支持一键复制。
重要边界：本工具并不会把 WGSL Shader 实际提交给 GPU 执行计算——即使检测到浏览器支持 WebGPU，展示的“CPU 计算结果”也是纯 JavaScript 算出来的对照值，不是真实的 GPU 计算结果；WGSL 代码和 WebGPU JS 调用代码仅作为可复制的参考代码展示，不在页面内运行。

学习 WGSL Compute Shader 基础语法

刚接触 WebGPU，想看看矩阵加法、点积、归约求和这类经典并行计算问题用 WGSL 怎么写，直接照着页面上的完整 Shader 源码学习语法结构。

获取 WebGPU JavaScript API 调用的完整样板代码

知道要用 WebGPU 但不熟悉创建 device/buffer/pipeline/bindGroup 的完整流程，复制页面提供的端到端调用代码作为自己项目的起点。

用 CPU 参考结果验证自己实现的 GPU Shader 是否正确

把自己写的 WebGPU 矩阵加法程序跑出的结果，和本工具用相同随机矩阵在 CPU 端算出的参考值做对比，快速定位 Shader 里的逻辑错误。

检查当前浏览器/设备是否支持 WebGPU

在决定是否给项目引入 WebGPU 加速前，先打开本工具看顶部的支持检测提示，确认目标浏览器环境是否已经具备 WebGPU 能力。

这个工具会真的用我的 GPU 跑这些计算吗？

不会。即使你的浏览器检测到支持 WebGPU，本工具展示的“CPU 计算结果”也是用纯 JavaScript 在 CPU 上算出来的对照值；WGSL Shader 代码和 WebGPU API 调用代码只是用于学习和复制的静态文本，页面本身不会创建 GPU device 或提交计算任务。

浏览器提示不支持 WebGPU 还能用这个工具吗？

可以。工具的 WGSL 源码展示、JS 调用代码展示和 CPU 端对照计算都不依赖浏览器是否真的支持 WebGPU，只有顶部的支持提示文案会相应变化。

为什么点积用的是“原子加归约”，注释里还提到“仅限 f32 atomic (需支持)”？

这是提醒你 WGSL 的浮点数原子操作(f32 atomic)并非所有 GPU/驱动都支持，代码注释里也给出了不支持时的替代方案（分步归约），这是 WGSL 实际开发中需要注意的兼容性问题。

矩阵尺寸最大只能选 16x16 吗？

下拉框预设了 4x4/8x8/16x16 三档，这是为了保证在页面上完整可读地展示矩阵内容，并非 WebGPU 本身的尺寸限制。