Correcty complute total point count. Only call glClear once workers have finished LOD. Only allow next draw() call after we finished rendering frame

client/lod_worker.js

@@ -15,6 +15,7 @@ async function init(tid, memory, heap_base) {
 }
 
 function work(indices_base, indices_count, zoom, offsets) {
+    try {
         exports.do_lod(
             indices_base, indices_count, zoom,
             offsets['coords_from'],
@@ -25,6 +26,9 @@ function work(indices_base, indices_count, zoom, offsets) {
             offsets['result_buffers'] + thread_id * 4,
             offsets['result_counts'] + thread_id * 4,
         );
+    } catch (e) {
+        console.error('WASM:', e);
+    }
 
     postMessage({ 'type': 'lod_done' });
 }

client/wasm/lod.c

@@ -211,7 +211,12 @@ do_lod(int *clipped_indices, int clipped_count, float zoom,
 
     int first_stroke = clipped_indices[0];
     int last_stroke = clipped_indices[clipped_count - 1];
-    int total_points = stroke_coords_from[last_stroke + 1] - stroke_coords_from[first_stroke];
+    int total_points = 0;
+
+    for (int i = 0; i < clipped_count; ++i) {
+        int stroke_index = clipped_indices[i];
+        total_points += stroke_coords_from[stroke_index + 1] - stroke_coords_from[stroke_index];
+    }
 
     int *segments_from = alloc_dynamic((clipped_count + 1) * 4);
     int *segments = alloc_dynamic(total_points * 4); // TODO: this is a very conservative estimate, we can lower memory usage if we get this tighter

client/webgl_draw.js

@@ -25,6 +25,8 @@ function upload_if_needed(gl, buffer_kind, serializer) {
 }
 
 function upload_square_rgba16ui_texture(gl, serializer, texture_size) {
+    // TODO: only subupload what's needed
+
     const bpp = 2 * 4;
     const data_size = serializer.offset;
     const data_pixels = data_size / bpp; // data_size % bpp is expected to always be zero here
@@ -76,19 +78,11 @@ function draw_html(state) {
 async function draw(state, context) {
     const cpu_before = performance.now();
 
-    state.timers.raf = false;
 
     const gl = context.gl;
     const width = window.innerWidth;
     const height = window.innerHeight;
     
-    let query = null;
-
-    if (context.gpu_timer_ext !== null) {
-        query = gl.createQuery();
-        gl.beginQuery(context.gpu_timer_ext.TIME_ELAPSED_EXT, query);
-    }
-       
     locations = context.locations['sdf'].main;
     buffers = context.buffers['sdf'];
 
@@ -98,6 +92,13 @@ async function draw(state, context) {
     const dynamic_segment_count = context.dynamic_segment_count;
     const dynamic_stroke_count = context.dynamic_stroke_count;
 
+    let query = null;
+
+    if (context.gpu_timer_ext !== null) {
+        query = gl.createQuery();
+        gl.beginQuery(context.gpu_timer_ext.TIME_ELAPSED_EXT, query);
+    }
+       
     // Only clear once we have the data, this might not always be on the same frame?
     gl.viewport(0, 0, context.canvas.width, context.canvas.height);
     gl.clearColor(context.bgcolor.r, context.bgcolor.g, context.bgcolor.b, 1);
@@ -229,6 +230,7 @@ async function draw(state, context) {
     
     const cpu_after = performance.now();
 
+    state.timers.raf = false;
 
     document.querySelector('.debug-timings .cpu').innerHTML = 'Last CPU Frametime: ' + Math.round((cpu_after - cpu_before) * 100) / 100 + 'ms';