WebGl不相干的定时器查询峰值。

Question

当我试图使用disjoint timer查询扩展对一些WebGL进行计时时，我看到了一些奇怪的结果。我写了一些简单的WebGL代码来重现我们在这里看到的问题。https:/jsfiddle.netd79q3mag2.

const texImage2DQuery = gl.createQuery();
gl.beginQuery(ext.TIME_ELAPSED_EXT, texImage2DQuery);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA32F, 512, 512, 0, gl.RGBA, gl.FLOAT, buffer);
gl.endQuery(ext.TIME_ELAPSED_EXT);
tex2dQuerys.push(texImage2DQuery);

const drawQuery = gl.createQuery();
gl.beginQuery(ext.TIME_ELAPSED_EXT, drawQuery);
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); 
gl.endQuery(ext.TIME_ELAPSED_EXT);
drawQuerys.push(drawQuery);

tryGetNextQueryResult(tex2dQuerys, tex2dQueryResults);
tryGetNextQueryResult(drawQuerys, drawQueryResults);

渲染函数使用定时器扩展来单独为texImage2D调用和drawArrays调用计时。如果我把绘制调用的结果画成图表，我看到一些相当大的尖峰（有些高达12ms！但大多数尖峰在2ms到4ms范围内）。

然而，如果我把帧率从30fps提高到60fps，结果就会改善（最大的峰值1.8ms，大部分峰值在1ms到0.4ms之间）。

我还注意到，如果我不给texImage2D函数计时的话(https:/jsfiddle.netq01aejnv2)，然后在30FPS时，drawArrays调用的时间峰值也消失了（峰值在1.6ms和0.2ms之间）。

我使用的是Quadro P4000与chrome 81.在Nvidia控制面板中，低延迟模式设置为Ultra，电源管理模式设置为Prefer最大性能。这些结果是在chrome中使用D3D11作为ANGLE图形后端收集的。

这里似乎有2个令人困惑的地方。首先是更高的帧率似乎可以改善绘制时间。第二是texImage2D的定时似乎会影响绘制时间。

Answer 1

在做计时事情的时候，你可能需要 gl.flush 之后 gl.endQuery

说明：WebGL函数向命令缓冲区添加命令。WebGL函数向命令缓冲区添加命令。其他进程会读取该缓冲区，但在告诉其他进程 "嘿！我为你添加了一些命令！"时会有开销。因此，一般来说，WebGL命令并不总是做 "嘿！"的部分，它们只是插入命令。WebGL会在不同的时间点自动进行自动刷新（"Hey！Execute this！"），但在进行计时时，您可能需要添加一个 "Hey！Execute this！"。gl.flush.

注意：就像我上面说的，刷新是有开销的。在一个正常的程序中，很少有必要做一次 flush.