function push_stroke(s, stroke, stroke_index) { const points = stroke.points; if (points.length < 2) { return; } for (let i = 0; i < points.length - 1; ++i) { const from = points[i]; const to = points[i + 1]; ser_f32(s, from.x); ser_f32(s, from.y); ser_f32(s, to.x); ser_f32(s, to.y); ser_u32(s, stroke_index); } } function geometry_prepare_stroke(state) { if (!state.online) { return null; } if (state.players[state.me].points.length === 0) { return null; } const points = process_stroke(state, state.canvas.zoom, state.players[state.me].points); return { 'color': state.players[state.me].color, 'width': state.players[state.me].width, 'points': points, 'user_id': state.me, }; } function geometry_write_instances(state, context) { context.instance_data = ser_ensure(context.instance_data, state.coordinates.count / 2 * config.bytes_per_instance); ser_clear(context.instance_data); state.stats.rdp_max_count = 0; state.stats.rdp_segments = 0; let segment_count = 0; let fast_path_count = 0; let slow_path_count = 0; for (let i = 0; i < context.clipped_indices.count; ++i) { const stroke_index = context.clipped_indices.data[i]; const stroke = state.events[stroke_index]; const lod_indices_count = process_stroke(state, state.canvas.zoom, stroke); segment_count += lod_indices_count - 1; if (lod_indices_count === 2) { fast_path_count++; // Fast path const ax = state.coordinates.data[stroke.coords_from + 0]; const ay = state.coordinates.data[stroke.coords_from + 1]; const bx = state.coordinates.data[stroke.coords_to - 2]; const by = state.coordinates.data[stroke.coords_to - 1]; ser_f32(context.instance_data, ax); ser_f32(context.instance_data, ay); ser_f32(context.instance_data, bx); ser_f32(context.instance_data, by); ser_u32(context.instance_data, stroke_index); } else { slow_path_count++; let base_this = 0; let base_next = 0; for (let j = 0; j < lod_indices_count - 1; ++j) { while (state.rdp_mask[base_this] == 0) base_this++; base_next = base_this + 1; while (state.rdp_mask[base_next] == 0) base_next++; const ax = state.coordinates.data[stroke.coords_from + base_this * 2 + 0]; const ay = state.coordinates.data[stroke.coords_from + base_this * 2 + 1]; const bx = state.coordinates.data[stroke.coords_from + base_next * 2 + 0]; const by = state.coordinates.data[stroke.coords_from + base_next * 2 + 1]; ser_f32(context.instance_data, ax); ser_f32(context.instance_data, ay); ser_f32(context.instance_data, bx); ser_f32(context.instance_data, by); ser_u32(context.instance_data, stroke_index); base_this = base_next; } } } console.debug('fast:', fast_path_count, 'slow:', slow_path_count); console.debug('rdp max:', state.stats.rdp_max_count, 'rdp segments:', state.stats.rdp_segments); return segment_count; } function geometry_add_stroke(state, context, stroke, stroke_index, skip_bvh = false) { if (!state.online || !stroke || stroke.coords_to - stroke.coords_from === 0) return; stroke.bbox = stroke_bbox(state, stroke); stroke.area = box_area(stroke.bbox); stroke.turns_into_straight_line_zoom = -1; context.stroke_data = ser_ensure_by(context.stroke_data, config.bytes_per_stroke); const color_u32 = stroke.color; const r = (color_u32 >> 16) & 0xFF; const g = (color_u32 >> 8) & 0xFF; const b = color_u32 & 0xFF; ser_u16(context.stroke_data, r); ser_u16(context.stroke_data, g); ser_u16(context.stroke_data, b); ser_u16(context.stroke_data, stroke.width); if (!skip_bvh) bvh_add_stroke(state.bvh, stroke_index, stroke); } function geometry_delete_stroke(state, context, stroke_index) { // NEXT: deleted wrong stroke let offset = 0; for (let i = 0; i < stroke_index; ++i) { const event = state.events[i]; if (event.type === EVENT.STROKE) { offset += (event.points.length * 12 + 6) * config.bytes_per_point; } } const stroke = state.events[stroke_index]; for (let i = 0; i < stroke.points.length * 12 + 6; ++i) { context.static_stroke_serializer.view.setUint8(offset + config.bytes_per_point - 1, 125); offset += config.bytes_per_point; } } function recompute_dynamic_data(state, context) { let bytes_needed = 0; for (const player_id in state.players) { const player = state.players[player_id]; if (player.points.length > 0) { bytes_needed += player.points.length * 6 * config.bytes_per_point; } } if (bytes_needed > context.dynamic_serializer.size) { context.dynamic_serializer = serializer_create(Math.ceil(bytes_needed * 1.62)); } else { context.dynamic_serializer.offset = 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) { push_stroke(context.dynamic_serializer, player, 0); } } context.need_dynamic_upload = true; } function geometry_add_point(state, context, player_id, point) { if (!state.online) return; state.players[player_id].points.push(point); recompute_dynamic_data(state, context); } function geometry_clear_player(state, context, player_id) { if (!state.online) return; state.players[player_id].points.length = 0; recompute_dynamic_data(state, context); schedule_draw(state, context); } function add_image(context, image_id, bitmap, p) { return; // TODO const x = p.x; const y = p.y; const gl = context.gl; const id = Object.keys(context.textures['image']).length; context.textures['image'][id] = { 'texture': gl.createTexture(), 'image_id': image_id }; gl.bindTexture(gl.TEXTURE_2D, context.textures['image'][id].texture); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, bitmap); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); context.quad_positions.push(...[ x, y, x, y + bitmap.height, x + bitmap.width, y + bitmap.height, x + bitmap.width, y, x, y, x + bitmap.width, y + bitmap.height, ]); context.quad_texcoords.push(...[ 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 1, 1, ]); context.quad_positions_f32 = new Float32Array(context.quad_positions); context.quad_texcoords_f32 = new Float32Array(context.quad_texcoords); } function move_image(context, image_event) { const x = image_event.x; const y = image_event.y; const count = Object.keys(context.textures['image']).length; for (let id = 0; id < count; ++id) { const image = context.textures['image'][id]; if (image.image_id === image_event.image_id) { context.quad_positions[id * 12 + 0] = x; context.quad_positions[id * 12 + 1] = y; context.quad_positions[id * 12 + 2] = x; context.quad_positions[id * 12 + 3] = y + image_event.height; context.quad_positions[id * 12 + 4] = x + image_event.width; context.quad_positions[id * 12 + 5] = y + image_event.height; context.quad_positions[id * 12 + 6] = x + image_event.width; context.quad_positions[id * 12 + 7] = y; context.quad_positions[id * 12 + 8] = x; context.quad_positions[id * 12 + 9] = y; context.quad_positions[id * 12 + 10] = x + image_event.width; context.quad_positions[id * 12 + 11] = y + image_event.height; context.quad_positions_f32 = new Float32Array(context.quad_positions); break; } } } function image_at(state, x, y) { for (let i = state.events.length - 1; i >= 0; --i) { const event = state.events[i]; if (event.type === EVENT.IMAGE && !event.deleted) { if ('height' in event && 'width' in event) { if (event.x <= x && x <= event.x + event.width && event.y <= y && y <= event.y + event.height) { return event; } } } } return null; }