WebGL / OpenGL：比较性能

Question

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

在Javascript中，我使用requestAnimationFrame了动画效果，并且注意到它使帧频始终为60 FPS，并且只有在切换标签页或窗口时才会降低。另一方面，如果我总是递归地调用render函数，则由于明显的原因，窗口会冻结。

这就是我采用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的开销。这意味着您真的不想画任何东西。理想情况下，您几乎不会画任何东西。使您的画布为1x1像素，绘制一个三角形，然后检查时间（例如，在WebGL与OpenGL中以60fps的速度一次可以绘制多少个三角形）。

不过，情况甚至更糟。一个真正的应用程序将经常切换着色器，切换缓冲区，切换纹理，更新属性和统一。那么，您的时间是什么？您可以gl.drawBuffers60fps 呼叫多少次？你可以有多少次打电话gl.enable或gl.vertexAttribPointer或gl.uniform4fv以60fps？一些组合？什么是合理的组合？10％的通话gl.verterAttribPointer+ 5％的通话gl.bindBuffer+ 10％的通话gl.uniform。这些调用的时间安排是WebGL和OpenGL之间唯一的区别，因为最终它们使用的是同一个GPU，并且无论如何GPU都将以相同的速度运行。