gpu服务器性能测试用例,WebGPU性能测试分析

大家好，本文对WebGPU进行性能测试和分析，目的是为了对比WebGL和WebGPU在“渲染”和“计算”两个维度的性能差异，具体表现为CPU性能和FPS性能两个方面的性能数据差异。

我们会分别在苹果笔记本和配备RTX显卡的台式机上，对WebGL和WebGPU分别进行性能测试。

本文对于WebGPU使用了“reuse render command buffer”和“dynamic uniform buffer offset”两种优化，相关介绍可以参考WebGPU学习(十一)：学习两个优化：“reuse render command buffer”和“dynamic uniform buffer offset”。

本文只使用了WebGPU的基础能力，还没有使用更高级的特性(如draw indirect、多线程渲染等)，所以理论上WebGPU相比WebGL的性能优势还可以进一步地扩大。

测试的代码

测试的代码在Github上

测试结论

这里先给出最后的测试结论：

在“渲染”性能上，WebGPU比WebGL快3倍以上

在“计算”性能上，WebGPU比WebGL快50倍以上

测试环境

设备一：13“MacBook M1 Pro

操作系统：Mac OS Big Sur

设备二：配备RTX显卡的台式机(i7-4790+ RTX 2060 Super)

操作系统：Win10 64位

WebGL运行的浏览器：Chrome(版本 91.0.4472.114(正式版本))

WebGPU运行的浏览器：Chrome Canary(v93.0)

测试“渲染”的性能

场景描述

该场景的设计思路为：

在固定分辨率的屏幕当中，用WebGL和WebGPU去渲染相同个数的固定大小的三角形，三角形个数从小到大进行递增，三角形颜色都为随机的灰度颜色；

每一帧提交对应三角形个数的DrawCall进行重绘(一个三角形对应一次DrawCall)(这里的每个三角形可看为场景中的一个物体。实际场景中的物体通常由几百上千个三角形组成，但是此处为了简化和突出性能测试的重点，所以一个物体只由一个三角形组成)。

为了能更好的体现重绘的效果，我们在距离+Z轴方向(指向屏幕的方向)的最近的1000个三角形中，随机选取了100个，进行Z轴方向的移动，表现效果为三角形的闪烁。这也符合实际的渲染场景中的情况：大部分物体并不是在每一帧都进行数据改变，只有部分会发生数据变化(这个场景中体现为三角形在Z轴方向的位置移动)。

具体的场景效果如下图：

渲染场景

结果分析

1)硬件环境为13”MacBook M1：

影响CPU性能的因素： CPU传递DrawCall时间

WebGL：5000个DrawCall命令以内时，CPU在10ms以内可以将其全部发送给GPU进行绘制。可以看出CPU并没有进行等待，原因是GPU在绘制5000个DrawCall命令以内时，完成速度很高，并不需要CPU等待。但是超过5000个DrawCall命令时，CPU的耗时明显增加