如何知道 WebGL 何时完成绘制？答案

【问题标题】：How to know when WebGL has finished drawing?如何知道 WebGL 何时完成绘制？
【发布时间】：2020-07-21 06:50:49
【问题描述】：

我想测量 Web 应用程序中的往返时间，以了解发送、回答和解释请求所需的时间。我向数据库服务器发送一个请求，它向我发回一些数据，我想使用 WebGL 可视化这些数据。 WebGL 部分仅包括设置纹理并将其绘制到四边形上。

我希望我的测量在发送请求时开始，并在渲染完成后立即停止。目前，我的（也许是幼稚的）方法是这样的：

ws.send(JSON.stringify(request));
start = performance.now();

ws.onmessage = (d) => {
   ...
   render(d); // here goes some typical plain WebGL code for preparing and plotting a 2D texture on a quad
   end = performance.now();
}
roundtrip = end - start;

但我不确定这是否是一个准确的测量值以及end 是否真的指的是最终绘制的画布。 有什么方法可以获取帧渲染的确切时刻？ 目前，我没有典型的渲染循环，而是在有新请求时使用新帧更新视图被触发。我知道gl.finish() 但这是doesn't seem to be an adequate solution。我还从 WebGL2 API 中听说了 WebGLSync，但首先我使用的是 WebGL1，其次它感觉不是一个复杂的问题......

【问题讨论】：

标签： javascript performance webgl latency

【解决方案1】：

“渲染”是什么意思？您的意思是“对用户可见”还是“像素放入后缓冲区”或其他什么？

对于“对用户可见”，除了在另一台机器上设置摄像头来查看您的屏幕之外，没有任何办法。基于 WebGL 和用户之间的所有事情，可能会有几帧延迟。组合事物的浏览器，无论浏览器是单缓冲、双缓冲还是三缓冲。操作系统以及它如何合成窗口、显示器或电视的图像处理，用户是否使用 HDMI、DisplayPort、VGA、DisplayLink、Airplay、Chromecast

对于像the other answer you linked to says 使用gl.finish 或类似gl.readPixels 之类的“像素放入后缓冲区”，不会告诉您花费了多长时间。相反，它会告诉您某件事花费了多长时间 + 停止图形管道花费了多长时间，并且没有简单的方法可以减去最后一部分。另一方面，您也许可以使用它来判断一种做事方式是否比另一种做事方式更快。

【讨论】：