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';
}