diff --git a/client/index.html b/client/index.html index f947474..369fe7f 100644 --- a/client/index.html +++ b/client/index.html @@ -32,7 +32,10 @@
-
+
+
+
+
diff --git a/client/webgl_draw.js b/client/webgl_draw.js index b97d2a8..a6eaba2 100644 --- a/client/webgl_draw.js +++ b/client/webgl_draw.js @@ -29,6 +29,8 @@ function upload_if_needed(context) { } function draw(state, context) { + const cpu_before = performance.now(); + state.timers.raf = false; const gl = context.gl; @@ -73,7 +75,7 @@ function draw(state, context) { //console.debug('clip', after_clip - before_clip); document.getElementById('debug-stats').innerHTML = ` - Segments onscreen: ${index_count} + Segments onscreen: ${do_clip ? index_count : '-' } Canvas offset: (${state.canvas.offset.x}, ${state.canvas.offset.y}) Canvas zoom: ${Math.round(state.canvas.zoom * 100) / 100}`; @@ -192,7 +194,7 @@ function draw(state, context) { // See how much time the rendering of the object took in nanoseconds. const timeElapsed = gl.getQueryParameter(query, gl.QUERY_RESULT); //console.debug(timeElapsed / 1000000); - document.getElementById('debug-timings').innerHTML = 'Frametime: ' + Math.round(timeElapsed / 10000) / 100 + 'ms'; + document.querySelector('.debug-timings .gpu').innerHTML = 'Last GPU Frametime: ' + Math.round(timeElapsed / 10000) / 100 + 'ms'; } if (available || disjoint) { @@ -253,4 +255,9 @@ function draw(state, context) { // gl.bindTexture(gl.TEXTURE_2D, textures[active_image_index].texture); // gl.drawArrays(gl.TRIANGLES, active_image_index * 6, 6); // } + // + const cpu_after = performance.now(); + + + document.querySelector('.debug-timings .cpu').innerHTML = 'Last CPU Frametime: ' + Math.round((cpu_after - cpu_before) * 100) / 100 + 'ms'; }