时间戳

首页 > 解决方案 > 如何知道 WebGL 何时完成绘制？

javascript - 如何知道 WebGL 何时完成绘制？

问题描述

我想测量 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()但这似乎不是一个适当的解决方案。我还从 WebGL2 API 听说过WebGLSync，但首先我使用的是 WebGL1，其次它感觉不是一个复杂的问题......

标签： javascriptperformancewebgllatency

解决方案

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

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

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

推荐阅读