Separate CPU and GPU timings in debug window

client/index.html

@@ -32,7 +32,10 @@
 
         <div class="debug-window dhide">
             <div id="debug-stats" class="flexcol"></div>
-            <div id="debug-timings" class="flexcol"></div>
+            <div class="debug-timings flexcol">
+                <div class="cpu"></div>
+                <div class="gpu"></div>
+            </div>
 
             <label><input type="checkbox" id="debug-red">Simple shader</label>
             <label><input type="checkbox" id="debug-do-prepass">Depth prepass</label>

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 = `
-    <span>Segments onscreen: ${index_count}</span>
+    <span>Segments onscreen: ${do_clip ? index_count : '-' }</span>
     <span>Canvas offset: (${state.canvas.offset.x}, ${state.canvas.offset.y})</span>
     <span>Canvas zoom: ${Math.round(state.canvas.zoom * 100) / 100}</span>`;
 
@@ -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';
 }