Further tune LOD levels to optimize triangle counts. Removed LOD level 7

client/config.js

@@ -33,6 +33,7 @@ const config = {
         offset: { x: 654, y: 372 },
         frames: 500,
     },
+    debug_force_lod: null,
 
     /*
      * points of interest (desk/zoomlevel/x/y 

client/wasm/lod.c

@@ -323,10 +323,25 @@ do_lod(int *clipped_indices, int clipped_count, float zoom,
         int segment_count = to - from;
 
         // Compute recommended LOD level, add to current batch or start new batch
-        float sqrt_width = __builtin_sqrtf(width[stroke_index]); 
-        int lod = __builtin_roundeven(sqrt_zoom * sqrt_width); // NOTE: there is no regular round, but is shouldn't matt:er 
-
-        if (lod > 7) lod = 7;
+        int lod;
+        // The LOD levels have been picked manually based on "COM" (Careful Observation Method)
+        float perceptual_width = width[stroke_index] * zoom;
+        // The LOD levels have been picked manually based on "COM" (Careful Observation Method)
+        if (perceptual_width < 1.9f) {
+            lod = 0;
+        } else if (perceptual_width < 4.56f) {
+            lod = 1;
+        } else if (perceptual_width < 6.12f) {
+            lod = 2;
+        } else if (perceptual_width < 25.08f) {
+            lod = 3;
+        } else if (perceptual_width < 122.74f) {
+            lod = 4;
+        } else if (perceptual_width < 1710.0f) {
+            lod = 5;
+        } else {
+            lod = 6;
+        }
 
         if (batch_size > 0 && lod != last_lod) {
             // Start new batch

client/webgl_draw.js

@@ -278,7 +278,7 @@ async function draw(state, context, animate, ts) {
     let total_lod_floats = 0;
     let total_lod_indices = 0;
     let stat_total_vertices = 0;
-    for (let i = 0; i <= 7; ++i) {
+    for (let i = 0; i <= 6; ++i) {
         const d = geometry_good_circle_and_dummy(i);
         lod_levels.push({
             'data': d,
@@ -353,12 +353,23 @@ async function draw(state, context, animate, ts) {
         for (let b = 0; b < context.instance_data_batches.size - 2; b += 2) {
             const batch_from = context.instance_data_batches.data[b + 0];
             const batch_size = context.instance_data_batches.data[b + 2] - batch_from;
-            const level = lod_levels[context.instance_data_batches.data[b + 1]];
+            let lod_level = context.instance_data_batches.data[b + 1];
+
+            if (config.debug_force_lod !== null) {
+                lod_level = config.debug_force_lod;  
+            }
+
+            const level = lod_levels[lod_level];
 
             if (batch_size > 0) {
                 stat_total_vertices += batch_size * level.data.indices.size;
 
                 gl.uniform1i(pr.locations['u_circle_points'], level.data.points.size / 2 - 4);
+                gl.uniform3f(pr.locations['u_debug_color'], 
+                    (lod_level * 785892 + 125127) % 8 / 7,
+                    (lod_level * 901824 + 985835) % 8 / 7,
+                    (lod_level * 232181 + 838533) % 8 / 7,
+                );
 
                 // Points (a, b) and stroke ids are stored in separate cpu buffers so that points can be reused (look at stride and offset values)
                 gl.vertexAttribPointer(pr.locations['a_a'], 2, gl.FLOAT, false, 2 * 4, batch_from * 2 * 4);

client/webgl_shaders.js

@@ -76,6 +76,7 @@ const sdf_fs_src = `#version 300 es
     precision highp float;
 
     uniform int u_debug_mode;
+    uniform vec3 u_debug_color;
 
     in vec3 v_color;
 
@@ -86,7 +87,7 @@ const sdf_fs_src = `#version 300 es
             float alpha = 0.75;
             FragColor = vec4(v_color * alpha, alpha);
         } else {
-            FragColor = vec4(0.2, 0.0, 0.0, 0.2);
+            FragColor = vec4(u_debug_color, 0.8);
         }
     }
 `;