Fix dynamic draw to use indexed, and thus the same shader as main

client/index.js

@@ -19,7 +19,7 @@ const config = {
     second_finger_timeout: 500,
     buffer_first_touchmoves: 5,
     debug_print: false,
-    min_zoom: 1.0,
+    min_zoom: 0.01,
     max_zoom: 1000,
     initial_offline_timeout: 1000,
     default_color: 0x00,

client/math.js

@@ -86,7 +86,6 @@ function process_ewmv(points, round = false) {
 function process_stroke(state, points) {
     // const result0 = process_ewmv(points);
     const result1 = process_rdp(state, points, true);
-    console.debug('simplified to', points.length, 'points to', result1.length);
     return result1;
 }
 

client/webgl_draw.js

@@ -49,6 +49,7 @@ function draw(state, context) {
 
     buffers = context.buffers['sdf'];
     gl.bindBuffer(gl.ARRAY_BUFFER, buffers['b_packed_static']);
+    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, buffers['b_packed_static_index']);
     upload_if_needed(context);
 
     gl.viewport(0, 0, context.canvas.width, context.canvas.height);
@@ -80,8 +81,6 @@ function draw(state, context) {
     <span>Canvas zoom: ${Math.round(state.canvas.zoom * 100000) / 100000}</span>`;
 
     if (index_count > 0) {
-        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, buffers['b_packed_static_index']);
-
         const index_buffer = new Uint32Array(state.onscreen_segments.buffer, 0, index_count);
         const static_points = context.static_serializer.offset / config.bytes_per_point;
         //const dynamic_points = context.dynamic_serializer.offset / config.bytes_per_point;
@@ -177,7 +176,9 @@ function draw(state, context) {
         gl.uniform1i(locations['u_debug_mode'], state.debug.red);
 
         gl.clear(gl.DEPTH_BUFFER_BIT);
+
         gl.bindBuffer(gl.ARRAY_BUFFER, buffers['b_packed_dynamic']);
+        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, buffers['b_packed_dynamic_index']);
 
         gl.enableVertexAttribArray(locations['a_pos']);
         gl.enableVertexAttribArray(locations['a_line']);
@@ -189,12 +190,34 @@ function draw(state, context) {
         gl.vertexAttribPointer(locations['a_color'],      3, gl.UNSIGNED_BYTE, true,  config.bytes_per_point, 4 * 3 + 4 * 4);
         gl.vertexAttribIPointer(locations['a_stroke_id'], 1, gl.INT,                  config.bytes_per_point, 4 * 3 + 4 * 4 + 4);
 
+        const dynamic_indices = [];
+        let base = 0;
+
+        for (const player_id in state.players) {
+            // player has the same data as their current stroke: points, color, width
+            const player = state.players[player_id];
+            if (player.points.length > 1) {
+                for (let i = 0; i < player.points.length - 1; ++i) {
+                    dynamic_indices.push(base + 0);
+                    dynamic_indices.push(base + 1);
+                    dynamic_indices.push(base + 2);
+                    dynamic_indices.push(base + 3);
+                    dynamic_indices.push(base + 2);
+                    dynamic_indices.push(base + 1);
+
+                    base += 4;
+                }
+            }
+        }
+
+
         if (context.need_dynamic_upload) {
             gl.bufferData(gl.ARRAY_BUFFER, new Uint8Array(context.dynamic_serializer.buffer, 0, context.dynamic_serializer.offset), gl.DYNAMIC_DRAW);
+            gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint32Array(dynamic_indices), gl.DYNAMIC_DRAW);
             context.need_dynamic_upload = false;
         }
 
-        gl.drawArrays(gl.TRIANGLES, 0, dynamic_points);
+        gl.drawElements(gl.TRIANGLES, dynamic_indices.length, gl.UNSIGNED_INT, 0);
     }
 
 

client/webgl_geometry.js

@@ -13,23 +13,14 @@ function push_point(s, x, y, ax, ay, bx, by, thickness, r, g, b, stroke_id) {
     ser_u32(s, stroke_id);
 }
 
-function push_quad(s, p1x, p1y, p2x, p2y, p3x, p3y, p4x, p4y, ax, ay, bx, by, thickness, r, g, b, stroke_id, indexed = true) {
-    if (indexed) {
-        push_point(s, p1x, p1y, ax, ay, bx, by, thickness, r, g, b, stroke_id);
-        push_point(s, p2x, p2y, ax, ay, bx, by, thickness, r, g, b, stroke_id);
-        push_point(s, p3x, p3y, ax, ay, bx, by, thickness, r, g, b, stroke_id);
-        push_point(s, p4x, p4y, ax, ay, bx, by, thickness, r, g, b, stroke_id);
-    } else {
-        push_point(s, p1x, p1y, ax, ay, bx, by, thickness, r, g, b, stroke_id);
-        push_point(s, p2x, p2y, ax, ay, bx, by, thickness, r, g, b, stroke_id);
-        push_point(s, p3x, p3y, ax, ay, bx, by, thickness, r, g, b, stroke_id);
-        push_point(s, p4x, p4y, ax, ay, bx, by, thickness, r, g, b, stroke_id);
-        push_point(s, p3x, p3y, ax, ay, bx, by, thickness, r, g, b, stroke_id);
-        push_point(s, p2x, p2y, ax, ay, bx, by, thickness, r, g, b, stroke_id);
-    }
+function push_quad(s, p1x, p1y, p2x, p2y, p3x, p3y, p4x, p4y, ax, ay, bx, by, thickness, r, g, b, stroke_id) {
+    push_point(s, p1x, p1y, ax, ay, bx, by, thickness, r, g, b, stroke_id);
+    push_point(s, p2x, p2y, ax, ay, bx, by, thickness, r, g, b, stroke_id);
+    push_point(s, p3x, p3y, ax, ay, bx, by, thickness, r, g, b, stroke_id);
+    push_point(s, p4x, p4y, ax, ay, bx, by, thickness, r, g, b, stroke_id);
 }
 
-function push_stroke(s, stroke, stroke_index, indexed = true) {
+function push_stroke(s, stroke, stroke_index) {
     const stroke_width = stroke.width;
     const points = stroke.points;
     const color_u32 = stroke.color;
@@ -78,8 +69,7 @@ function push_stroke(s, stroke, stroke_index, indexed = true) {
             to.x, to.y, 
             stroke_width, 
             r, g, b,
-            stroke_index,
-            indexed
+            stroke_index
         );
     }
 }
@@ -164,7 +154,7 @@ function recompute_dynamic_data(state, context) {
         // player has the same data as their current stroke: points, color, width
         const player = state.players[player_id];
         if (player.points.length > 1) {
-            push_stroke(context.dynamic_serializer, player, 0, false);
+            push_stroke(context.dynamic_serializer, player, 0);
         }
     }