javascript - WebGL/OpenGL : comparing the performance

Question

出于教育目的，我需要比较 WebGL 与 OpenGL 的性能。我有两个用 WebGL 和 OpenGL 编写的等效程序，现在我需要获取它们的帧速率并进行比较。

在 Javascript 中，我使用 requestAnimationFrame 来制作动画，我注意到它会导致帧率始终保持在 60 FPS，并且只有在我切换选项卡或窗口时它才会下降。另一方面，如果我总是以递归方式调用渲染函数，则窗口会因显而易见的原因而卡住。

这就是我使用 FPS 的方式:

var stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '450px';
stats.domElement.style.top = '750px';

document.body.appendChild( stats.domElement );

setInterval( function () {

    stats.begin();
    stats.end();
}, 1000 / 60 );

            
var render= function() {
    requestAnimationFrame(render);
    renderer.render(scene,camera);
}

render();

现在，如果场景总是以 60 FPS 的帧速率运行，那么问题在于我实际上无法将它与 OpenGL 的帧速率进行比较，因为 OpenGL 仅在以某种方式修改场景(例如，如果我旋转对象)时才重绘场景，并且 glutPostRedisplay() 被调用。

所以我猜 WebGL 是否有一种方法只在必要时才重绘场景，例如当对象旋转或着色器中的某些属性发生变化时。

Answer 1

您无法通过推送帧来直接比较 WebGL 中 GPU 的帧率。相反，您需要弄清楚您可以在一个框架内完成多少工作。

所以，基本上选择一些目标帧率，然后继续做越来越多的工作，直到超过目标。当您达到目标时，这就是您可以做的工作量。您可以将其与使用相同技术的其他机器或 GPU 进行比较。

有些人会建议使用glFinish 来检查时间。不幸的是，这实际上不起作用，因为它会拖延图形管道，而拖延本身并不是真实应用程序中通常发生的事情。这就像计算汽车从 A 点到 B 点的速度，但不是在 A 之前很久就开始，在 B 之后很久就结束，而是在到达 B 之前猛踩刹车并测量到达 B 的时间。时间包括减速所花费的所有时间，这在每个 GPU 上都是不同的，在 WebGL 和 OpenGL 之间是不同的，甚至在每个浏览器上也是不同的。您无法知道有多少时间花在放慢速度上，以及有多少时间花在做您真正想要衡量的事情上。

因此，您需要全程全速前进。就像汽车一样，您会在到达 A 点之前加速到最高速度，并保持最高速度直到通过 B 点。这与他们在排位赛圈计时的方式相同。

您通常不会通过猛击中断 (glFinish) 来停止 GPU，因此将停止时间添加到您的计时测量中是无关紧要的，并且不会为您提供有用的信息。使用 glFinish 你会计时绘图+停止。如果一个 GPU 在 1 秒内绘制并在 2 秒内停止，而另一个 GPU 在 2 秒内绘制并在 1 秒内停止，那么两个 GPU 的计时将为 3 秒。但是如果你不停地运行它们，一个 GPU 每秒会绘制 3 个东西，另一个 GPU 每秒只能绘制 1.5 个东西。一个 GPU 显然更快，但使用 glFinish 你永远不会知道这一点。

相反，您通过尽可能多地绘制来全速运行，然后测量您能够完成多少并保持全速。

举个例子: http://webglsamples.org/lots-o-objects/lots-o-objects-draw-elements.html

它基本上绘制每一帧。如果帧速率为 60fps，它会在下一帧再绘制 10 个对象。如果帧速率低于 60fps，则绘制较少。

由于浏览器计时并不完美，您可能会选择一个稍低的目标，例如 57fps，以了解它可以运行多快。

最重要的是，WebGL 和 OpenGL 实际上只是与 GPU 对话，而 GPU 负责实际工作。无论 WebGL 要求 GPU 还是 OpenGL 完成，GPU 完成的工作将花费完全相同的时间。唯一的区别在于设置 GPU 的开销。这意味着你真的不想画任何沉重的东西。理想情况下，你几乎什么都不画。将 Canvas 设置为 1x1 像素，绘制一个三 Angular 形，然后检查时间(例如在 WebGL 与 OpenGL 中以 60fps 一次可以绘制多少个三 Angular 形)。

但情况变得更糟。一个真正的应用程序会经常切换着色器、切换缓冲区、切换纹理、更新属性和制服。那么，你的时间是什么时候？您可以以 60fps 调用多少次 gl.drawBuffers？您可以在 60fps 下调用多少次 gl.enable 或 gl.vertexAttribPointer 或 gl.uniform4fv？一些组合？什么是合理的组合？ 10% 调用 gl.verterAttribPointer + 5% 调用 gl.bindBuffer + 10% 调用 gl.uniform。这些调用的时间是 WebGL 和 OpenGL 之间唯一不同的地方，因为最终它们是在与同一个 GPU 对话，并且无论如何 GPU 都将以相同的速度运行。