From 8a4e87f4c6ca7949fc3fa43c1d588b4193b5be01 Mon Sep 17 00:00:00 2001 From: "A.Olokhtonov" Date: Sat, 16 Nov 2024 01:12:21 +0300 Subject: [PATCH] Batching of the main instanced drawcall --- client/webgl_draw.js | 31 +++++++++++++++++++++++-------- client/webgl_geometry.js | 4 ++-- client/webgl_shaders.js | 2 ++ 3 files changed, 27 insertions(+), 10 deletions(-) diff --git a/client/webgl_draw.js b/client/webgl_draw.js index 3610f7d..b7f1e74 100644 --- a/client/webgl_draw.js +++ b/client/webgl_draw.js @@ -274,13 +274,21 @@ async function draw(state, context, animate, ts) { } // TODO: what do we do with this - const circle_lod = Math.ceil(Math.min(7, 1 + Math.sqrt(state.canvas.zoom))); + const circle_lod = Math.round(Math.min(7, 3 * Math.sqrt(state.canvas.zoom))); const circle_data = geometry_good_circle_and_dummy(circle_lod); // "Static" data upload if (segment_count > 0) { const pr = programs['main']; + const nbatches = 10; + const batches = []; + + for (let i = 0; i < nbatches; ++i) { + batches.push(Math.floor(segment_count / nbatches * i)); + } + batches.push(segment_count); + gl.clear(gl.DEPTH_BUFFER_BIT); // draw strokes above the images gl.useProgram(pr.program); @@ -319,11 +327,6 @@ async function draw(state, context, animate, ts) { // Circle meshes (shared for all instances) gl.vertexAttribPointer(pr.locations['a_pos'], 2, gl.FLOAT, false, 2 * 4, context.instance_data_points.size * 4 + context.instance_data_ids.size * 4 + round_to_pow2(context.instance_data_pressures.size, 4)); - // 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, 0); - gl.vertexAttribPointer(pr.locations['a_b'], 2, gl.FLOAT, false, 2 * 4, 2 * 4); - gl.vertexAttribIPointer(pr.locations['a_stroke_id'], 1, gl.INT, 4, context.instance_data_points.size * 4); - gl.vertexAttribPointer(pr.locations['a_pressure'], 2, gl.UNSIGNED_BYTE, true, 1, context.instance_data_points.size * 4 + context.instance_data_ids.size * 4); gl.vertexAttribDivisor(pr.locations['a_pos'], 0); gl.vertexAttribDivisor(pr.locations['a_a'], 1); @@ -331,8 +334,18 @@ async function draw(state, context, animate, ts) { gl.vertexAttribDivisor(pr.locations['a_stroke_id'], 1); gl.vertexAttribDivisor(pr.locations['a_pressure'], 1); - // Static draw (everything already bound) - gl.drawElementsInstanced(gl.TRIANGLES, circle_data.indices.size, gl.UNSIGNED_INT, 0, segment_count); + for (let b = 0; b < batches.length - 1; ++b) { + const batch_from = batches[b]; + const batch_size = batches[b + 1] - batch_from; + + // 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); + gl.vertexAttribPointer(pr.locations['a_b'], 2, gl.FLOAT, false, 2 * 4, batch_from * 2 * 4 + 2 * 4); + gl.vertexAttribIPointer(pr.locations['a_stroke_id'], 1, gl.INT, 4, context.instance_data_points.size * 4 + batch_from * 4); + gl.vertexAttribPointer(pr.locations['a_pressure'], 2, gl.UNSIGNED_BYTE, true, 1, context.instance_data_points.size * 4 + context.instance_data_ids.size * 4 + batch_from); + + gl.drawElementsInstanced(gl.TRIANGLES, circle_data.indices.size, gl.UNSIGNED_INT, 0, batch_size); + } // I don't really know why I need to do this, but it // makes background patter drawcall work properly @@ -540,6 +553,8 @@ async function draw(state, context, animate, ts) { document.getElementById('debug-stats').innerHTML = ` Strokes onscreen: ${context.clipped_indices.size} Segments onscreen: ${segment_count} + Total vertices: ${segment_count * circle_data.indices.size} + Circle LOD: ${circle_lod} Canvas offset: (${Math.round(state.canvas.offset.x * 100) / 100}, ${Math.round(state.canvas.offset.y * 100) / 100}) Canvas zoom level: ${state.canvas.zoom_level} Canvas zoom: ${Math.round(state.canvas.zoom * 100) / 100}`; diff --git a/client/webgl_geometry.js b/client/webgl_geometry.js index b5fce3a..b770e37 100644 --- a/client/webgl_geometry.js +++ b/client/webgl_geometry.js @@ -549,7 +549,7 @@ function geometry_line_segments_with_two_circles(circle_segments) { } function geometry_good_circle_and_dummy(lod) { - const total_points = 3 * Math.pow(2, lod - 1) + 4; // 3, 6, 12, 24, ... + Dummy for line segment + const total_points = 3 * Math.pow(2, lod) + 4; // 3, 6, 12, 24, ... + Dummy for line segment const total_indices = 3 * (Math.pow(3, lod + 1) - 1) / 2 + 6; // 3, 3 + 9, 3 + 9 + 18, ... + Dummy for line segment const points = tv_create(Float32Array, total_points * 2); const indices = tv_create(Uint32Array, total_indices); @@ -576,7 +576,7 @@ function geometry_good_circle_and_dummy(lod) { let last_base = 3; let last_offset = 0; - for (let i = 0; i < lod; ++i) { + for (let i = 0; i <= lod; ++i) { // generate 3 * Math.pow(2, i) points on a circle const npoints = 3 * Math.pow(2, i); const base = indices.size; diff --git a/client/webgl_shaders.js b/client/webgl_shaders.js index 27ff5dc..c543f71 100644 --- a/client/webgl_shaders.js +++ b/client/webgl_shaders.js @@ -322,8 +322,10 @@ function init_webgl(state, context) { gl.enable(gl.BLEND); gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA); + /* gl.enable(gl.DEPTH_TEST); gl.depthFunc(gl.NOTEQUAL); + */ context.gpu_timer_ext = gl.getExtension('EXT_disjoint_timer_query_webgl2'); if (context.gpu_timer_ext === null) {