UD5工具箱
WebGPU计算着色器演示功能特点
矩阵大小选择
支持四种预设矩阵大小：256x256、512x512、1024x1024和2048x2048。每种矩阵大小对应不同的计算复杂度和性能特征。256x256矩阵适合作为入门演示，计算量较小，CPU和GPU的性能差异相对温和；512x512矩阵开始展现GPU的明显优势；1024x1024矩阵是GPU性能释放的关键阈值，加速比通常在30到50倍之间；2048x2048矩阵是最大的可选规模，数据量达到约32MB（单精度浮点），GPU的并行优势在此规模下达到最大化，加速比可达100倍以上。用户可以通过下拉菜单或按钮组选择矩阵大小，每次选择后工具会自动重新初始化缓冲区并执行计算。选择不同矩阵大小时，工具会显示预估的计算复杂度（乘加运算次数），帮助用户建立计算规模的直观感受。
- 256x256矩阵入门演示
- 512x512矩阵中等规模
- 1024x1024矩阵大规规模
- 2048x2048矩阵极限测试
GPU vs CPU性能对比
工具同时在CPU和GPU上执行相同的矩阵乘法运算，精确测量并对比两者的计算性能。CPU参考实现使用JavaScript的TypedArray进行纯数值计算，利用现代JavaScript引擎的JIT编译优化。GPU实现通过WebGPU计算管线执行WGSL着色器，利用GPU的数千个计算核心并行处理。性能对比以多种方式呈现：执行时间对比（毫秒级精度）、加速比（GPU耗时/CPU耗时的比值）、GFLOPS吞吐量（每秒十亿次浮点运算次数）。结果以并排柱状图和数据表格形式展示，帮助用户直观理解GPU的性能优势。每次计算运行多轮取平均值，消除单次运行的随机波动影响，确保测量结果的准确性和可复现性。
- 毫秒级精确计时
- 多轮平均消除波动
- GFLOPS吞吐量计算
- 可视化对比图表
WGSL计算着色器
工具使用WGSL（WebGPU Shading Language）编写GPU计算着色器，这是WebGPU的标准着色语言。计算着色器实现了Tile-based矩阵乘法算法，将大矩阵分割为小块（Tile）进行处理，充分利用GPU的共享内存（Workgroup Memory）提升数据访问效率。着色器代码在工具界面中展示，用户可以查看和学习GPU编程的实现细节。WGSL着色器包含工作组大小（Workgroup Size）的配置、输入输出缓冲区的绑定声明、边界条件检查逻辑、以及矩阵乘法的核心计算循环。着色器代码附带详细的中文注释，解释每一行代码的作用和GPU编程的设计考量。通过阅读和理解着色器代码，开发者可以快速掌握WGSL的基本语法和WebGPU计算管线的编程模式。
Tile-based并行算法
本演示工具实现了GPU计算中经典的Tile-based矩阵乘法算法。该算法将大型矩阵分割为固定大小的子矩阵（Tile），每个GPU工作组（Workgroup）负责计算一个输出Tile。工作组内的线程协作加载输入Tile到共享内存中，然后从共享内存读取数据进行计算，大幅减少对全局显存的访问次数。这种分块处理方式将矩阵乘法的内存访问复杂度从O(N^3)降低到O(N^3/T)，其中T是Tile大小。Tile-based算法是GPU计算优化的基础技术，广泛应用于深度学习框架的矩阵运算、科学计算库的线性代数实现等场景。工具的着色器代码展示了完整的Tile-based实现，包括工作组同步、共享内存管理、边界条件处理等关键细节，为开发者提供了宝贵的GPU编程学习资源。
热力图可视化
将矩阵计算结果以热力图形式可视化展示。颜色映射从蓝色（低值）到红色（高值），直观呈现矩阵元素的数值分布特征。支持切换查看输入矩阵和输出矩阵的热力图。热力图使用Canvas绘制，支持缩放和平移操作，方便查看大矩阵的局部细节。通过热力图可以直观验证GPU和CPU计算结果的一致性。
GFLOPS计算
精确计算GPU和CPU的GFLOPS（Giga Floating-point Operations Per Second）性能指标。矩阵乘法的浮点操作次数为2*N*N*N（N次乘法和N-1次加法，近似为2N）。GFLOPS = 操作次数 / (执行时间 * 10^9)。通过GFLOPS指标可以跨平台、跨硬件对比GPU的计算性能，是GPU性能评估的行业标准。
结果验证
自动验证GPU计算结果与CPU参考结果的一致性。逐元素对比两个结果矩阵，计算最大绝对误差和平均误差。由于浮点精度差异，GPU和CPU的结果可能存在微小偏差，工具会显示误差统计信息帮助用户评估计算精度。验证通过显示绿色成功标记，误差过大显示红色警告。