Is it possible to measure the rendering time in webgl using gl.finish ()?

Question

I am trying to measure the time it takes to upload an image to webgl.

I was thinking about using gl.finish () to get the timestamp before and after loading the image and subtracting two to get an accurate measurement, however I could not find a good example of such a use.

Is this possible, and if so, can someone provide a sample code?

Answer 1

No, it is not.

In fact, there is only gl.flush in Chrome gl.flush . See the code and search for ":: finish".

Since Chrome is a multiprocessor and actually implements deep protection, the actual GL calls are written in another process from your JavaScript, so even if Chrome did call gl.finish , it will happen in another process, and from POV JavaScript will not be accurate to determine time in any form or form. It seems that Firefox does something similar in different ways for the same reasons.

Even outside of Chrome, each driver handles gl.finish differently. Using gl.finish for synchronization is not useful information because it does not reflect the actual speed, since it involves stopping the GPU pipeline. In other words, the time with gl.finish includes a lot of overhead that would not be realized in real use, and therefore is not an accurate measurement of how quickly something will fulfill ordinary circumstances.

Some GPUs have GL extensions to get time information. Unfortunately, they (a) are not available in WebGL and (b) are unlikely to ever be so, since they are not portable, because they cannot really work on tiled GPUs like those found on many mobile phones.

Instead of asking how GL time calls what exactly are you trying to achieve by synchronizing them? Perhaps people can offer a solution.

Answer 2

Now you can run WebGL2 with the extension EXT_disjoint_timer_query_webgl2 .

 const ext = gl.getExtension('EXT_disjoint_timer_query_webgl2'); const query = gl.createQuery(); gl.beginQuery(ext.TIME_ELAPSED_EXT, query); /* gl.draw*, etc */ gl.endQuery(ext.TIME_ELAPSED_EXT); 

Then after a while you can get the elapsed time for your request:

 const available = this.gl.getQueryParameter(query, this.gl.QUERY_RESULT_AVAILABLE); if (available) { const elapsedNanos = gl.getQueryParameter(query, gl.QUERY_RESULT); } 

A few things to know about:

• only one synchronization request can be executed.
• Results can be accessed asynchronously. If you have more than one call time per frame, you can use the query pool.

Answer 3

Based on clients, WebGL event timings depend on the current client computer load (processor load), GPU load, and client implementation. One way to get a very rough estimate is to measure latency with server-to-client feedback using XmlHttpRequest ( http://en.wikipedia.org/wiki/XMLHttpRequest ). If you find the delay from the measured server time to local time, you can get the measure of loading.