可以通过计算他在一秒钟内调用这些函数的次数来对常规 JavaScript 函数进行基准测试。但是，在 WebGL 上，gl.drawArrays 等函数是异步的，因此您无法通过对 API 调用进行基准测试来衡量着色器所花费的时间。
有什么方法可以对 WebGL 函数进行基准测试吗？
最佳答案
很难对着色器进行基准测试，因为有大量的上下文，而且它们非常特定于 GPU。
您可以通过使用 performance.now 来判断一个着色器是否比另一个着色器快通过调用 gl.readPixels 获取 GPU。它会告诉你哪个更快。它不会告诉您它们有多快，因为停止 GPU 包括开始和停止时间。
想想赛车。对于高速赛车，您需要时间加速到目的地。对于赛车，您可以全速跑一圈。你让车在计时前先跑一圈，你在第二圈计时，汽车全速冲过起跑线，终点线也全速冲过。因此，您获得汽车的速度，而对于高速赛车，您获得它的加速度(通常与 GPU 无关，因为如果您追求速度，则永远不应该启动和停止它们)。
另一种不添加开始/停止时间的计时方法是在 requestAnimationFrame 帧之间绘制一堆。继续增加数量，直到帧之间的时间跳起一整帧。然后比较着色器之间的数量。
实际使用中还有其他问题。例如，平铺 GPU(如许多移动设备上的 PowerVR)会尝试剔除将被 overdraw 的图元部分。因此，在非分块 GPU 上具有大量 overdraw 的重型着色器在分块 GPU 上可能会非常快。
还要确保您选择了正确的时间。如果您正在为顶点着色器计时，您可能希望将 Canvas 设置为 1x1 像素，并且片段着色器尽可能简单，并在一次绘制调用中传递大量顶点(以消除调用时间)。如果您正在为片段着色器计时，那么您可能需要一个大 Canvas 和一组包含多个完整 Canvas 四边形的顶点。
关于javascript - 如何对 WebGL 着色器进行基准测试？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38710140/