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) {