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

Question

I am trying to measure the time it takes for an image in webgl to load.

I was thinking about using gl.finish() to get a timestamp before and after the image has load

Answer 1

It is now possible to time WebGL2 executions with the EXT_disjoint_timer_query_webgl2 extension.

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 sometime later, you can get the elapsed time for your query:

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

A couple things to be aware of:

• only one timing query may be in progress at once.
• results may become available asynchronously. If you have more than one call to time per frame, you may consider using a query pool.