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

打开演示页面后，在控制面板区域选择要进行矩阵乘法运算的矩阵大小。建议初次使用时选择256x256矩阵，这样CPU和GPU的计算时间都在可接受范围内，便于理解整个演示流程。页面会显示当前选择的矩阵所涉及的数据量（矩阵元素数量和内存占用）和计算复杂度（浮点操作次数）。256x256矩阵包含65536个元素，每个元素为32位单精度浮点数，单个矩阵占用约256KB内存，矩阵乘法的浮点操作次数约为3350万次。选择更大的矩阵会使计算时间延长，但GPU的性能优势也会更加明显。

点击"GPU计算"按钮启动WebGPU计算管线。工具首先会初始化WebGPU设备（Device），创建计算管线（Compute Pipeline），分配GPU缓冲区（Buffer）并将随机生成的输入矩阵数据上传到GPU显存。然后提交计算命令队列，GPU调度计算着色器的执行。着色器使用Tile-based并行算法，将矩阵分割为16x16的子矩阵块，每个工作组处理一个输出Tile。计算完成后，结果矩阵从GPU显存回传到CPU内存。整个过程的耗时以毫秒级精度记录并在结果面板中显示。在计算过程中，页面会显示加载状态指示，防止用户误操作。如果浏览器不支持WebGPU，页面会显示明确的错误提示和浏览器升级引导。

点击"CPU计算"按钮执行JavaScript参考实现。CPU计算使用TypedArray存储矩阵数据，通过三重嵌套循环执行标准矩阵乘法算法。为了保证公平对比，CPU实现同样使用单精度浮点数运算，并避免使用任何非标准的优化技巧。CPU计算的耗时同样精确记录并与GPU结果进行对比。需要注意的是，CPU计算可能会阻塞浏览器主线程，导致页面暂时无响应，这是JavaScript单线程模型的正常现象。计算完成后页面会自动恢复响应并显示结果。对于大矩阵（如1024x1024或2048x2048），CPU计算可能需要数秒甚至数十秒，而GPU通常在几十毫秒内完成，这种鲜明的对比正是GPU并行计算价值的直观体现。

计算完成后，结果面板以多种方式展示GPU和CPU的性能对比。执行时间对比区域以柱状图形式直观展示两种实现的耗时差异。GFLOPS吞吐量区域显示每种实现每秒完成的浮点运算次数。加速比区域显示GPU相对于CPU的性能倍数。对于256x256矩阵，GPU加速比通常在5到15倍之间；对于2048x2048矩阵，加速比可达100倍以上。结果验证区域显示GPU与CPU计算结果的逐元素误差统计，包括最大绝对误差、平均误差和均方根误差。由于GPU和CPU使用不同的浮点运算单元，结果可能存在10^-5到10^-3量级的微小差异，这是正常的浮点精度偏差。误差超过10^-2时工具会发出警告，提示可能存在计算错误。

点击"查看热力图"按钮打开结果矩阵的可视化视图。热力图使用Canvas元素绘制，将矩阵的每个元素映射为一个像素，颜色值根据元素大小从蓝色渐变到红色。矩阵中值较小的区域显示为蓝色，值较大的区域显示为红色，中等值区域显示为绿色和黄色。通过热力图可以直观观察矩阵乘法结果的数值分布特征。工具还提供输入矩阵的热力图查看功能，帮助用户理解输入数据的随机分布特征。热力图支持鼠标滚轮缩放和拖拽平移操作，方便查看大矩阵的局部细节。对于2048x2048的大矩阵，热力图默认以缩小比例显示全貌，用户可以放大到像素级别查看单个元素的数值。对比GPU和CPU计算结果的热力图可以验证两者的一致性，正常情况下两张热力图应该完全相同。