Skip to content

Commit

Permalink
In EXT_disjoint_timer_query examples, delete query objects. (KhronosG…
Browse files Browse the repository at this point in the history 
…roup#3272)

Follows best practices for WebGL objects. Also modernize the
JavaScript in these examples (var -> let).
  • Loading branch information
@kenrussell
kenrussell authored Apr 2, 2021
1 parent bcd0701 commit a0b8774
Show file tree
Hide file tree
Showing 2 changed files with 189 additions and 102 deletions.
145 changes: 94 additions & 51 deletions extensions/EXT_disjoint_timer_query/extension.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -214,8 +214,8 @@ interface EXT_disjoint_timer_query {
<samplecode xml:space="preserve">
<pre>
// Example (1) -- uses beginQueryEXT/endQueryEXT.
var ext = gl.getExtension('EXT_disjoint_timer_query');
var query = ext.createQueryEXT();
let ext = gl.getExtension('EXT_disjoint_timer_query');
let query = ext.createQueryEXT();
ext.beginQueryEXT(ext.TIME_ELAPSED_EXT, query);

// Draw object
Expand All @@ -224,25 +224,35 @@ interface EXT_disjoint_timer_query {
ext.endQueryEXT(ext.TIME_ELAPSED_EXT);

// ...at some point in the future, after returning control to the browser and being called again:
var available = ext.getQueryObjectEXT(query, ext.QUERY_RESULT_AVAILABLE_EXT);
var disjoint = gl.getParameter(ext.GPU_DISJOINT_EXT);
// (Note that this code might be called multiple times)
if (query) {
let available = ext.getQueryObjectEXT(query, ext.QUERY_RESULT_AVAILABLE_EXT);
let disjoint = gl.getParameter(ext.GPU_DISJOINT_EXT);

if (available &amp;&amp; !disjoint) {
// See how much time the rendering of the object took in nanoseconds.
var timeElapsed = ext.getQueryObjectEXT(query, ext.QUERY_RESULT_EXT);
if (available &amp;&amp; !disjoint) {
// See how much time the rendering of the object took in nanoseconds.
let timeElapsed = ext.getQueryObjectEXT(query, ext.QUERY_RESULT_EXT);

// Do something useful with the time. Note that care should be
// taken to use all significant bits of the result, not just the
// least significant 32 bits.
adjustObjectLODBasedOnDrawTime(timeElapsed);
// Do something useful with the time. Note that care should be
// taken to use all significant bits of the result, not just the
// least significant 32 bits.
adjustObjectLODBasedOnDrawTime(timeElapsed);
}

if (available || disjoint) {
// Clean up the query object.
ext.deleteQueryEXT(query);
// Don't re-enter this polling loop.
query = null;
}
}

//----------------------------------------------------------------------

// Example (2) -- same as the example above, but uses queryCounterEXT instead.
var ext = gl.getExtension('EXT_disjoint_timer_query');
var startQuery = ext.createQueryEXT();
var endQuery = ext.createQueryEXT();
let ext = gl.getExtension('EXT_disjoint_timer_query');
let startQuery = ext.createQueryEXT();
let endQuery = ext.createQueryEXT();
ext.queryCounterEXT(startQuery, ext.TIMESTAMP_EXT);

// Draw object
Expand All @@ -251,30 +261,43 @@ interface EXT_disjoint_timer_query {
ext.queryCounterEXT(endQuery, ext.TIMESTAMP_EXT);

// ...at some point in the future, after returning control to the browser and being called again:
var available = ext.getQueryObjectEXT(endQuery, ext.QUERY_RESULT_AVAILABLE_EXT);
var disjoint = gl.getParameter(ext.GPU_DISJOINT_EXT);

if (available &amp;&amp; !disjoint) {
// See how much time the rendering of the object took in nanoseconds.
var timeStart = ext.getQueryObjectEXT(startQuery, ext.QUERY_RESULT_EXT);
var timeEnd = ext.getQueryObjectEXT(endQuery, ext.QUERY_RESULT_EXT);

// Do something useful with the time. Note that care should be
// taken to use all significant bits of the result, not just the
// least significant 32 bits.
adjustObjectLODBasedOnDrawTime(timeEnd - timeStart);
// (Note that this code might be called multiple times)
if (startQuery) {
let available = ext.getQueryObjectEXT(endQuery, ext.QUERY_RESULT_AVAILABLE_EXT);
let disjoint = gl.getParameter(ext.GPU_DISJOINT_EXT);

if (available &amp;&amp; !disjoint) {
// See how much time the rendering of the object took in nanoseconds.
let timeStart = ext.getQueryObjectEXT(startQuery, ext.QUERY_RESULT_EXT);
let timeEnd = ext.getQueryObjectEXT(endQuery, ext.QUERY_RESULT_EXT);

// Do something useful with the time. Note that care should be
// taken to use all significant bits of the result, not just the
// least significant 32 bits.
adjustObjectLODBasedOnDrawTime(timeEnd - timeStart);
}

if (available || disjoint) {
// Clean up the query objects.
ext.deleteQueryEXT(startQuery);
ext.deleteQueryEXT(endQuery);

// Don't re-enter this polling loop.
startQuery = null;
endQuery = null;
}
}

//----------------------------------------------------------------------

// Example (3) -- check the number of timestamp bits to determine how to best
// measure elapsed time.
var ext = gl.getExtension('EXT_disjoint_timer_query');
var timeElapsedQuery;
var startQuery;
var endQuery;
let ext = gl.getExtension('EXT_disjoint_timer_query');
let timeElapsedQuery;
let startQuery;
let endQuery;

var useTimestamps = false;
let useTimestamps = false;

if (ext.getQueryEXT(ext.TIMESTAMP_EXT, ext.QUERY_COUNTER_BITS_EXT) > 0) {
useTimestamps = true;
Expand Down Expand Up @@ -303,32 +326,49 @@ interface EXT_disjoint_timer_query {
}

// ...at some point in the future, after returning control to the browser and being called again:
var disjoint = gl.getParameter(ext.GPU_DISJOINT_EXT);
if (disjoint) {
// Have to redo all of the measurements.
} else {
var available;
if (useTimestamps) {
available = ext.getQueryObjectEXT(endQuery, ext.QUERY_RESULT_AVAILABLE_EXT);
// (Note that this code might be called multiple times)
if (startQuery || endQuery || timeElapsedQuery) {
let disjoint = gl.getParameter(ext.GPU_DISJOINT_EXT);
let available;
if (disjoint) {
// Have to redo all of the measurements.
} else {
available = ext.getQueryObjectEXT(timeElapsedQuery, ext.QUERY_RESULT_AVAILABLE_EXT);
if (useTimestamps) {
available = ext.getQueryObjectEXT(endQuery, ext.QUERY_RESULT_AVAILABLE_EXT);
} else {
available = ext.getQueryObjectEXT(timeElapsedQuery, ext.QUERY_RESULT_AVAILABLE_EXT);
}

if (available) {
let timeElapsed;
if (useTimestamps) {
// See how much time the rendering of the object took in nanoseconds.
let timeStart = ext.getQueryObjectEXT(startQuery, ext.QUERY_RESULT_EXT);
let timeEnd = ext.getQueryObjectEXT(endQuery, ext.QUERY_RESULT_EXT);
timeElapsed = timeEnd - timeStart;
} else {
timeElapsed = ext.getQueryObjectEXT(query, ext.QUERY_RESULT_EXT);
}

// Do something useful with the time. Note that care should be
// taken to use all significant bits of the result, not just the
// least significant 32 bits.
adjustObjectLODBasedOnDrawTime(timeElapsed);
}
}

if (available) {
var timeElapsed;
if (available || disjoint) {
// Clean up the query objects.
if (useTimestamps) {
// See how much time the rendering of the object took in nanoseconds.
var timeStart = ext.getQueryObjectEXT(startQuery, ext.QUERY_RESULT_EXT);
var timeEnd = ext.getQueryObjectEXT(endQuery, ext.QUERY_RESULT_EXT);
timeElapsed = timeEnd - timeStart;
ext.deleteQueryEXT(startQuery);
ext.deleteQueryEXT(endQuery);
// Don't re-enter the polling loop above.
startQuery = null;
endQuery = null;
} else {
timeElapsed = ext.getQueryObjectEXT(query, ext.QUERY_RESULT_EXT);
ext.deleteQueryEXT(timeElapsedQuery);
timeElapsedQuery = null;
}

// Do something useful with the time. Note that care should be
// taken to use all significant bits of the result, not just the
// least significant 32 bits.
adjustObjectLODBasedOnDrawTime(timeElapsed);
}
}
</pre>
Expand Down Expand Up @@ -359,5 +399,8 @@ interface EXT_disjoint_timer_query {
<revision date="2016/09/30">
<change>Added clarifying note that this document only applies to WebGL 1.0. Minor reformatting and typo fixes.</change>
</revision>
<revision date="2021/04/01">
<change>Clean up query objects via deleteQueryEXT. Modernize examples' JavaScript code.</change>
</revision>
</history>
</extension>
146 changes: 95 additions & 51 deletions extensions/EXT_disjoint_timer_query_webgl2/extension.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,8 +109,8 @@ interface EXT_disjoint_timer_query_webgl2 {
<samplecode xml:space="preserve">
<pre>
// Example (1) -- uses beginQuery/endQuery.
var ext = gl.getExtension('EXT_disjoint_timer_query_webgl2');
var query = gl.createQuery();
let ext = gl.getExtension('EXT_disjoint_timer_query_webgl2');
let query = gl.createQuery();
gl.beginQuery(ext.TIME_ELAPSED_EXT, query);

// Draw object
Expand All @@ -119,25 +119,35 @@ interface EXT_disjoint_timer_query_webgl2 {
gl.endQuery(ext.TIME_ELAPSED_EXT);

// ...at some point in the future, after returning control to the browser and being called again:
var available = gl.getQueryParameter(query, gl.QUERY_RESULT_AVAILABLE);
var disjoint = gl.getParameter(ext.GPU_DISJOINT_EXT);
// (Note that this code might be called multiple times)
if (query) {
let available = gl.getQueryParameter(query, gl.QUERY_RESULT_AVAILABLE);
let disjoint = gl.getParameter(ext.GPU_DISJOINT_EXT);

if (available &amp;&amp; !disjoint) {
// See how much time the rendering of the object took in nanoseconds.
var timeElapsed = gl.getQueryParameter(query, gl.QUERY_RESULT);
if (available &amp;&amp; !disjoint) {
// See how much time the rendering of the object took in nanoseconds.
let timeElapsed = gl.getQueryParameter(query, gl.QUERY_RESULT);

// Do something useful with the time. Note that care should be
// taken to use all significant bits of the result, not just the
// least significant 32 bits.
adjustObjectLODBasedOnDrawTime(timeElapsed);
// Do something useful with the time. Note that care should be
// taken to use all significant bits of the result, not just the
// least significant 32 bits.
adjustObjectLODBasedOnDrawTime(timeElapsed);
}

if (available || disjoint) {
// Clean up the query object.
gl.deleteQuery(query);
// Don't re-enter this polling loop.
query = null;
}
}

//----------------------------------------------------------------------

// Example (2) -- same as the example above, but uses queryCounterEXT instead.
var ext = gl.getExtension('EXT_disjoint_timer_query_webgl2');
var startQuery = gl.createQuery();
var endQuery = gl.createQuery();
let ext = gl.getExtension('EXT_disjoint_timer_query_webgl2');
let startQuery = gl.createQuery();
let endQuery = gl.createQuery();
ext.queryCounterEXT(startQuery, ext.TIMESTAMP_EXT);

// Draw object
Expand All @@ -146,30 +156,43 @@ interface EXT_disjoint_timer_query_webgl2 {
ext.queryCounterEXT(endQuery, ext.TIMESTAMP_EXT);

// ...at some point in the future, after returning control to the browser and being called again:
var available = gl.getQueryParameter(endQuery, gl.QUERY_RESULT_AVAILABLE);
var disjoint = gl.getParameter(ext.GPU_DISJOINT_EXT);

if (available &amp;&amp; !disjoint) {
// See how much time the rendering of the object took in nanoseconds.
var timeStart = gl.getQueryParameter(startQuery, gl.QUERY_RESULT);
var timeEnd = gl.getQueryParameter(endQuery, gl.QUERY_RESULT);

// Do something useful with the time. Note that care should be
// taken to use all significant bits of the result, not just the
// least significant 32 bits.
adjustObjectLODBasedOnDrawTime(timeEnd - timeStart);
// (Note that this code might be called multiple times)
if (startQuery) {
let available = gl.getQueryParameter(endQuery, gl.QUERY_RESULT_AVAILABLE);
let disjoint = gl.getParameter(ext.GPU_DISJOINT_EXT);

if (available &amp;&amp; !disjoint) {
// See how much time the rendering of the object took in nanoseconds.
let timeStart = gl.getQueryParameter(startQuery, gl.QUERY_RESULT);
let timeEnd = gl.getQueryParameter(endQuery, gl.QUERY_RESULT);

// Do something useful with the time. Note that care should be
// taken to use all significant bits of the result, not just the
// least significant 32 bits.
adjustObjectLODBasedOnDrawTime(timeEnd - timeStart);
}

if (available || disjoint) {
// Clean up the query objects.
gl.deleteQuery(startQuery);
gl.deleteQuery(endQuery);

// Don't re-enter this polling loop.
startQuery = null;
endQuery = null;
}
}

//----------------------------------------------------------------------

// Example (3) -- check the number of timestamp bits to determine how to best
// measure elapsed time.
var ext = gl.getExtension('EXT_disjoint_timer_query_webgl2');
var timeElapsedQuery;
var startQuery;
var endQuery;
let ext = gl.getExtension('EXT_disjoint_timer_query_webgl2');
let timeElapsedQuery;
let startQuery;
let endQuery;

var useTimestamps = false;
let useTimestamps = false;

if (gl.getQuery(ext.TIMESTAMP_EXT, ext.QUERY_COUNTER_BITS_EXT) > 0) {
useTimestamps = true;
Expand Down Expand Up @@ -198,32 +221,50 @@ interface EXT_disjoint_timer_query_webgl2 {
}

// ...at some point in the future, after returning control to the browser and being called again:
var disjoint = gl.getParameter(ext.GPU_DISJOINT_EXT);
if (disjoint) {
// Have to redo all of the measurements.
} else {
var available;
if (useTimestamps) {
available = gl.getQueryParameter(endQuery, gl.QUERY_RESULT_AVAILABLE);
// (Note that this code might be called multiple times)
if (startQuery || endQuery || timeElapsedQuery) {
let disjoint = gl.getParameter(ext.GPU_DISJOINT_EXT);
let available;
if (disjoint) {
// Have to redo all of the measurements.
} else {
available = gl.getQueryParameter(timeElapsedQuery, gl.QUERY_RESULT_AVAILABLE);
if (useTimestamps) {
available = gl.getQueryParameter(endQuery, gl.QUERY_RESULT_AVAILABLE);
} else {
available = gl.getQueryParameter(timeElapsedQuery, gl.QUERY_RESULT_AVAILABLE);
}

if (available) {
let timeElapsed;
if (useTimestamps) {
// See how much time the rendering of the object took in nanoseconds.
let timeStart = gl.getQueryParameter(startQuery, gl.QUERY_RESULT);
let timeEnd = gl.getQueryParameter(endQuery, gl.QUERY_RESULT);
timeElapsed = timeEnd - timeStart;
} else {
timeElapsed = gl.getQueryParameter(query, gl.QUERY_RESULT);
}

// Do something useful with the time. Note that care should be
// taken to use all significant bits of the result, not just the
// least significant 32 bits.
adjustObjectLODBasedOnDrawTime(timeElapsed);
}
}

if (available) {
var timeElapsed;
if (available || disjoint) {
// Clean up the query objects.
if (useTimestamps) {
// See how much time the rendering of the object took in nanoseconds.
var timeStart = gl.getQueryParameter(startQuery, gl.QUERY_RESULT);
var timeEnd = gl.getQueryParameter(endQuery, gl.QUERY_RESULT);
timeElapsed = timeEnd - timeStart;
gl.deleteQuery(startQuery);
gl.deleteQuery(endQuery);
// Don't re-enter the polling loop above.
startQuery = null;
endQuery = null;
} else {
timeElapsed = gl.getQueryParameter(query, gl.QUERY_RESULT);
gl.deleteQuery(timeElapsedQuery);
// Don't re-enter the polling loop above.
timeElapsedQuery = null;
}

// Do something useful with the time. Note that care should be
// taken to use all significant bits of the result, not just the
// least significant 32 bits.
adjustObjectLODBasedOnDrawTime(timeElapsed);
}
}
</pre>
Expand All @@ -237,5 +278,8 @@ interface EXT_disjoint_timer_query_webgl2 {
<revision date="2016/10/11">
<change>Fixed errors in sample code pointed out by @juj.</change>
</revision>
<revision date="2021/04/01">
<change>Clean up query objects via deleteQuery. Modernize examples' JavaScript code.</change>
</revision>
</history>
</extension>

0 comments on commit a0b8774

Please sign in to comment.