UD5工具箱
WebGPU计算着色器常见问题
WebGPU和WebGL有什么区别？为什么要用WebGPU？
WebGPU和WebGL虽然都是Web平台的GPU接口，但有本质区别。WebGL基于OpenGL ES，采用状态机模型，主要针对图形渲染设计，不提供通用计算能力。WebGPU基于Vulkan/Metal/DX12等现代API，采用显式的命令编码模型，同时支持图形渲染和通用计算。WebGPU的优势包括：更低的API开销，更高效的多线程命令提交，更清晰的资源绑定模型，以及计算着色器支持。WebGL的drawcall开销较高且无法利用GPU进行通用计算，而WebGPU可以将GPU作为通用并行处理器使用。对于图形渲染，WebGPU的性能通常优于WebGL；对于通用计算任务（如矩阵运算、机器学习推理、图像处理），WebGPU是唯一可用的Web GPU计算方案。WebGPU目前在Chrome 113+和Firefox Nightly中实现，随着浏览器支持的普及，WebGPU将逐步取代WebGL成为Web GPU编程的标准方案。
什么是计算着色器，它与图形着色器有什么不同？
计算着色器是WebGPU计算管线中执行通用计算任务的程序，它不参与图形渲染流程，而是独立执行数值计算。图形着色器（顶点着色器、片元着色器）是图形渲染管线的一部分，顶点着色器负责处理3D模型的顶点变换，片元着色器负责计算每个像素的最终颜色。计算着色器与图形着色器的主要区别包括：执行模型不同，计算着色器以工作组为单位执行，没有固定的渲染管线流程；输出方式不同，计算着色器通过缓冲区输出结果而不是渲染到帧缓冲区；功能定位不同，计算着色器用于通用计算（GPGPU），图形着色器用于渲染。计算着色器适合的数据并行任务包括矩阵运算、图像处理、物理模拟、密码学计算、排序算法等。计算着色器使用WGSL语言编写，通过WebGPU的Compute Pass提交执行。
为什么矩阵乘法特别适合在GPU上执行？
矩阵乘法之所以特别适合GPU执行，核心原因是其高度的数据并行性。对于两个N*N矩阵的乘法，结果矩阵包含N*N个元素，每个元素的计算都是完全独立的，不依赖于其他元素的计算结果。这意味着理论上所有N*N个元素可以同时并行计算，完美匹配GPU拥有数千个计算核心的硬件特性。具体来说，结果矩阵第(i,j)位置的元素等于矩阵A的第i行与矩阵B的第j列的点积，这个计算过程只涉及A的第i行和B的第j列的数据，与其他行和列无关。GPU可以为每个输出元素分配一个独立的计算线程，所有线程同时执行相同的乘加运算但处理不同的数据。随着矩阵规模增大，计算量以O(N^3)增长而数据量只以O(N^2)增长，计算密度越来越高，GPU的计算资源利用率也随之提升，这解释了为什么大矩阵的GPU加速比远高于小矩阵。
Tile-based算法是如何优化GPU矩阵乘法性能的？
Tile-based矩阵乘法算法通过三个层面的优化提升GPU计算性能。首先是数据复用优化：将大矩阵分割为固定大小的子矩阵块（Tile），每个GPU工作组处理一个输出Tile，工作组内的线程协作加载输入Tile到共享内存中，使每个全局内存数据被多次复用，大幅减少全局显存访问次数。其次是内存访问模式优化：工作组内的线程以合并（Coalesced）方式访问全局内存，确保相邻线程访问相邻内存地址，最大化内存总线带宽利用率。最后是计算流水线优化：通过双重缓冲或预取技术，在计算当前Tile的同时预加载下一个Tile的数据，隐藏内存访问延迟。这三种优化策略的结合使得Tile-based矩阵乘法的实际性能可以达到GPU理论峰值性能的相当比例。Tile大小的选择需要在共享内存占用和数据复用率之间取得平衡，16x16的Tile大小通常是一个经过验证的合理选择。
目前哪些浏览器支持WebGPU？
WebGPU的支持情况随着浏览器版本更新而持续变化。截至2024年底，Chrome 113及以上版本（2023年5月发布）已经完整支持WebGPU的图形和计算功能，是目前最成熟的WebGPU实现。Firefox正在积极开发WebGPU支持，Nightly版本已经可以进行初步测试。Safari从18.0版本开始提供WebGPU的开发者预览功能，但计算着色器的支持可能尚未完整。Edge浏览器继承了Chromium内核的WebGPU支持，与Chrome版本同步。移动端方面，Chrome for Android支持WebGPU，但受限于移动GPU的计算能力，GFLOPS性能可能不如桌面端。要检查当前浏览器是否支持WebGPU，可以在开发者工具控制台中输入navigator.gpu进行检测。如果返回undefined则表示浏览器不支持WebGPU。建议使用Chrome 113+进行本演示工具的体验以获得最佳效果。
GPU计算的加速比通常能达到多少？
GPU计算的加速比取决于任务类型、数据规模、GPU硬件性能和实现优化程度等因素。对于矩阵乘法这一典型数据并行任务，加速比与矩阵规模密切相关。256x256矩阵的GPU加速比通常在5到15倍，因为数据量较小，GPU的并行优势未能充分发挥；512x512矩阵的加速比在15到40倍之间，GPU开始展现显著优势；1024x1024矩阵的加速比在30到80倍之间，GPU的数千个计算核心得到充分利用；2048x2048矩阵的加速比可达80到200倍甚至更高，GPU的并行优势在此规模下达到最大化。实际加速比还受以下因素影响：GPU的具体型号和计算能力、着色器代码的优化程度、内存带宽限制、数据传输开销等。本演示工具使用Tile-based优化算法，能够实现接近GPU硬件能力的高性能计算。不同GPU的绝对GFLOPS性能差异很大，但CPU vs GPU的相对加速比趋势在不同硬件上是相似的。
WebGPU计算着色器可以用于机器学习吗？
WebGPU计算着色器完全可以用于浏览器端的机器学习推理任务，这正是WebGPU计算能力的重要应用场景之一。矩阵乘法是神经网络中计算量最大的操作（如全连接层、注意力机制等），WebGPU对矩阵乘法的高效支持使其成为理想的推理引擎后端。目前已有多个基于WebGPU的机器学习框架，包括TensorFlow.js的WebGPU后端、ONNX Runtime Web的WebGPU执行提供者、以及Whisper等模型的浏览器端实现。这些框架利用WebGPU计算着色器实现卷积、矩阵乘法、激活函数等核心算子，推理性能通常比纯JavaScript实现快3到10倍。WebGPU计算着色器在ML推理中的优势包括：高效的矩阵运算支持、共享内存可以加速权重复用、工作组并行处理多个输入数据。WebGPU的计算管线设计也适合ML训练任务，但目前浏览器端训练仍面临内存限制和精度问题的挑战。