How to know when WebGL has finished drawing?

Question

I want to measure the roundtrip time in a web application to see how long it takes for a request to be sent, answered, and interpreted. I send a request to a database server, it sends me back some data and I want to visualize that data using WebGL. The WebGL part just consists of setting up a texture and plot it onto a quad.

I want my measurement to start when the request was sent and to stop as soon as the rendering has finished. For now, my (maybe naive) approach was something like this:

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;

But I'm not sure if this is an accurate measurement and if end really refers to the finally drawn canvas. Is there any way to get the exact moment when the frame has been rendered? For now, I don't have a typical render loop, but instead just update the view with a new frame when a new request is triggered. I'm aware of gl.finish() but this doesn't seem to be an adequate solution . I also heard about WebGLSync from the WebGL2 API, but first I'm using WebGL1 and second it doesn't feel like a that much complicated problem...

Answer 1

What do you mean by "rendered"? Do you mean "visible to the user" or do you mean "pixels put in the backbuffer" or something else?

For "visible to the user" there is no way short of setting up a camera on another machine to look at your screen. There could be several frames of latency based on all the things between WebGL and the user. The browser compositing things, whether the browser is single, double, or triple buffered. The OS and how it composites windows, the monitor or TV's image processing, whether the user is using HDMI, DisplayPort, VGA, DisplayLink, Airplay, Chromecast

For "pixels put in the backbuffer" like the other answer you linked to says using gl.finish or similar like gl.readPixels will not tell you how long something took. It will instead tell you how long something took + how long it took to stop the graphics pipeline and there is no easy way to subtract out that last part. On the other hand you might be able to use it to tell if one way of doing things is faster than another way of doing things.