diff --git a/client/index.js b/client/index.js index 8a82057..de15e72 100644 --- a/client/index.js +++ b/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, diff --git a/client/math.js b/client/math.js index 881ea28..6a2ef52 100644 --- a/client/math.js +++ b/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; } diff --git a/client/webgl_draw.js b/client/webgl_draw.js index 60bee84..db7c470 100644 --- a/client/webgl_draw.js +++ b/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) { Canvas zoom: ${Math.round(state.canvas.zoom * 100000) / 100000}`; 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); } diff --git a/client/webgl_geometry.js b/client/webgl_geometry.js index 4b56b39..367b211 100644 --- a/client/webgl_geometry.js +++ b/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); } }