diff --git a/client/webgl_draw.js b/client/webgl_draw.js
index 35185a3..39a9b5a 100644
--- a/client/webgl_draw.js
+++ b/client/webgl_draw.js
@@ -78,160 +78,156 @@ function draw_html(state) {
async function draw(state, context) {
const cpu_before = performance.now();
- try {
- const gl = context.gl;
- const width = window.innerWidth;
- const height = window.innerHeight;
+ const gl = context.gl;
+ const width = window.innerWidth;
+ const height = window.innerHeight;
- locations = context.locations['sdf'].main;
- buffers = context.buffers['sdf'];
+ locations = context.locations['sdf'].main;
+ buffers = context.buffers['sdf'];
- bvh_clip(state, context);
+ bvh_clip(state, context);
- const segment_count = await geometry_write_instances(state, context);
- const dynamic_segment_count = context.dynamic_segment_count;
- const dynamic_stroke_count = context.dynamic_stroke_count;
+ const segment_count = await geometry_write_instances(state, context);
+ const dynamic_segment_count = context.dynamic_segment_count;
+ const dynamic_stroke_count = context.dynamic_stroke_count;
- let query = null;
+ let query = null;
- if (context.gpu_timer_ext !== null) {
- query = gl.createQuery();
- gl.beginQuery(context.gpu_timer_ext.TIME_ELAPSED_EXT, query);
- }
+ if (context.gpu_timer_ext !== null) {
+ query = gl.createQuery();
+ gl.beginQuery(context.gpu_timer_ext.TIME_ELAPSED_EXT, query);
+ }
- // Only clear once we have the data, this might not always be on the same frame?
- gl.viewport(0, 0, context.canvas.width, context.canvas.height);
- gl.clearColor(context.bgcolor.r, context.bgcolor.g, context.bgcolor.b, 1);
- gl.clearDepth(0.0);
- gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
-
- gl.useProgram(context.programs['sdf'].main);
-
- // "Static" data upload
- if (segment_count > 0) {
- const total_static_size = context.instance_data_points.size * 4 +
- context.instance_data_ids.size * 4 +
- context.instance_data_pressures.size;
-
- gl.bindBuffer(gl.ARRAY_BUFFER, buffers['b_instance']);
- gl.bufferData(gl.ARRAY_BUFFER, total_static_size, gl.STREAM_DRAW);
- gl.bufferSubData(gl.ARRAY_BUFFER, 0, tv_data(context.instance_data_points));
- gl.bufferSubData(gl.ARRAY_BUFFER, context.instance_data_points.size * 4, tv_data(context.instance_data_ids));
- gl.bufferSubData(gl.ARRAY_BUFFER, context.instance_data_points.size * 4 + context.instance_data_ids.size * 4,
- tv_data(context.instance_data_pressures));
- gl.bindTexture(gl.TEXTURE_2D, context.textures['stroke_data']);
- upload_square_rgba16ui_texture(gl, context.stroke_data, config.stroke_texture_size);
-
- gl.uniform2f(locations['u_res'], context.canvas.width, context.canvas.height);
- gl.uniform2f(locations['u_scale'], state.canvas.zoom, state.canvas.zoom);
- gl.uniform2f(locations['u_translation'], state.canvas.offset.x, state.canvas.offset.y);
- gl.uniform1i(locations['u_stroke_count'], state.events.length);
- gl.uniform1i(locations['u_debug_mode'], state.debug.red);
- gl.uniform1i(locations['u_stroke_data'], 0);
- gl.uniform1i(locations['u_stroke_texture_size'], config.stroke_texture_size);
-
- gl.enableVertexAttribArray(locations['a_a']);
- gl.enableVertexAttribArray(locations['a_b']);
- gl.enableVertexAttribArray(locations['a_stroke_id']);
- gl.enableVertexAttribArray(locations['a_pressure']);
-
- // 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(locations['a_a'], 2, gl.FLOAT, false, 2 * 4, 0);
- gl.vertexAttribPointer(locations['a_b'], 2, gl.FLOAT, false, 2 * 4, 2 * 4);
- gl.vertexAttribIPointer(locations['a_stroke_id'], 1, gl.INT, 4, context.instance_data_points.size * 4);
- gl.vertexAttribPointer(locations['a_pressure'], 2, gl.UNSIGNED_BYTE, true, 1, context.instance_data_points.size * 4 + context.instance_data_ids.size * 4);
-
- gl.vertexAttribDivisor(locations['a_a'], 1);
- gl.vertexAttribDivisor(locations['a_b'], 1);
- gl.vertexAttribDivisor(locations['a_stroke_id'], 1);
- gl.vertexAttribDivisor(locations['a_pressure'], 1);
-
- // Static draw (everything already bound)
- gl.drawArraysInstanced(gl.TRIANGLES, 0, 6, segment_count);
- }
+ // Only clear once we have the data, this might not always be on the same frame?
+ gl.viewport(0, 0, context.canvas.width, context.canvas.height);
+ gl.clearColor(context.bgcolor.r, context.bgcolor.g, context.bgcolor.b, 1);
+ gl.clearDepth(0.0);
+ gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+
+ gl.useProgram(context.programs['sdf'].main);
+
+ // "Static" data upload
+ if (segment_count > 0) {
+ const total_static_size = context.instance_data_points.size * 4 +
+ context.instance_data_ids.size * 4 +
+ context.instance_data_pressures.size;
+
+ gl.bindBuffer(gl.ARRAY_BUFFER, buffers['b_instance']);
+ gl.bufferData(gl.ARRAY_BUFFER, total_static_size, gl.STREAM_DRAW);
+ gl.bufferSubData(gl.ARRAY_BUFFER, 0, tv_data(context.instance_data_points));
+ gl.bufferSubData(gl.ARRAY_BUFFER, context.instance_data_points.size * 4, tv_data(context.instance_data_ids));
+ gl.bufferSubData(gl.ARRAY_BUFFER, context.instance_data_points.size * 4 + context.instance_data_ids.size * 4,
+ tv_data(context.instance_data_pressures));
+ gl.bindTexture(gl.TEXTURE_2D, context.textures['stroke_data']);
+ upload_square_rgba16ui_texture(gl, context.stroke_data, config.stroke_texture_size);
+
+ gl.uniform2f(locations['u_res'], context.canvas.width, context.canvas.height);
+ gl.uniform2f(locations['u_scale'], state.canvas.zoom, state.canvas.zoom);
+ gl.uniform2f(locations['u_translation'], state.canvas.offset.x, state.canvas.offset.y);
+ gl.uniform1i(locations['u_stroke_count'], state.events.length);
+ gl.uniform1i(locations['u_debug_mode'], state.debug.red);
+ gl.uniform1i(locations['u_stroke_data'], 0);
+ gl.uniform1i(locations['u_stroke_texture_size'], config.stroke_texture_size);
+
+ gl.enableVertexAttribArray(locations['a_a']);
+ gl.enableVertexAttribArray(locations['a_b']);
+ gl.enableVertexAttribArray(locations['a_stroke_id']);
+ gl.enableVertexAttribArray(locations['a_pressure']);
+
+ // 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(locations['a_a'], 2, gl.FLOAT, false, 2 * 4, 0);
+ gl.vertexAttribPointer(locations['a_b'], 2, gl.FLOAT, false, 2 * 4, 2 * 4);
+ gl.vertexAttribIPointer(locations['a_stroke_id'], 1, gl.INT, 4, context.instance_data_points.size * 4);
+ gl.vertexAttribPointer(locations['a_pressure'], 2, gl.UNSIGNED_BYTE, true, 1, context.instance_data_points.size * 4 + context.instance_data_ids.size * 4);
+
+ gl.vertexAttribDivisor(locations['a_a'], 1);
+ gl.vertexAttribDivisor(locations['a_b'], 1);
+ gl.vertexAttribDivisor(locations['a_stroke_id'], 1);
+ gl.vertexAttribDivisor(locations['a_pressure'], 1);
+
+ // Static draw (everything already bound)
+ gl.drawArraysInstanced(gl.TRIANGLES, 0, 6, segment_count);
+ }
- // Dynamic strokes should be drawn above static strokes
- gl.clear(gl.DEPTH_BUFFER_BIT);
-
- // Dynamic draw (strokes currently being drawn)
- if (dynamic_segment_count > 0) {
- gl.uniform1i(locations['u_stroke_count'], dynamic_stroke_count);
- gl.uniform1i(locations['u_stroke_data'], 0);
- gl.uniform1i(locations['u_stroke_texture_size'], config.dynamic_stroke_texture_size);
-
- gl.bindBuffer(gl.ARRAY_BUFFER, buffers['b_dynamic_instance']);
-
- // Dynamic data upload
- const total_dynamic_size =
- context.dynamic_instance_points.size * 4 + context.dynamic_instance_ids.size * 4 +
- context.dynamic_instance_pressure.size;
-
- gl.bufferData(gl.ARRAY_BUFFER, total_dynamic_size, gl.STREAM_DRAW);
- gl.bufferSubData(gl.ARRAY_BUFFER, 0, tv_data(context.dynamic_instance_points));
- gl.bufferSubData(gl.ARRAY_BUFFER, context.dynamic_instance_points.size * 4, tv_data(context.dynamic_instance_ids));
- gl.bufferSubData(gl.ARRAY_BUFFER, context.dynamic_instance_points.size * 4 + context.dynamic_instance_ids.size * 4,
- tv_data(context.dynamic_instance_pressure));
- gl.bindTexture(gl.TEXTURE_2D, context.textures['dynamic_stroke_data']);
- upload_square_rgba16ui_texture(gl, context.dynamic_stroke_data, config.dynamic_stroke_texture_size);
-
- gl.enableVertexAttribArray(locations['a_a']);
- gl.enableVertexAttribArray(locations['a_b']);
- gl.enableVertexAttribArray(locations['a_stroke_id']);
- gl.enableVertexAttribArray(locations['a_pressure']);
-
- // 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(locations['a_a'], 2, gl.FLOAT, false, 2 * 4, 0);
- gl.vertexAttribPointer(locations['a_b'], 2, gl.FLOAT, false, 2 * 4, 2 * 4);
- gl.vertexAttribIPointer(locations['a_stroke_id'], 1, gl.INT, 4, context.dynamic_instance_points.size * 4);
- gl.vertexAttribPointer(locations['a_pressure'], 2, gl.UNSIGNED_BYTE, true, 1, context.dynamic_instance_points.size * 4 + context.dynamic_instance_ids.size * 4);
-
- gl.vertexAttribDivisor(locations['a_a'], 1);
- gl.vertexAttribDivisor(locations['a_b'], 1);
- gl.vertexAttribDivisor(locations['a_stroke_id'], 1);
- gl.vertexAttribDivisor(locations['a_pressure'], 1);
-
- gl.drawArraysInstanced(gl.TRIANGLES, 0, 6, dynamic_segment_count);
- }
+ // Dynamic strokes should be drawn above static strokes
+ gl.clear(gl.DEPTH_BUFFER_BIT);
+
+ // Dynamic draw (strokes currently being drawn)
+ if (dynamic_segment_count > 0) {
+ gl.uniform1i(locations['u_stroke_count'], dynamic_stroke_count);
+ gl.uniform1i(locations['u_stroke_data'], 0);
+ gl.uniform1i(locations['u_stroke_texture_size'], config.dynamic_stroke_texture_size);
+
+ gl.bindBuffer(gl.ARRAY_BUFFER, buffers['b_dynamic_instance']);
+
+ // Dynamic data upload
+ const total_dynamic_size =
+ context.dynamic_instance_points.size * 4 + context.dynamic_instance_ids.size * 4 +
+ context.dynamic_instance_pressure.size;
+
+ gl.bufferData(gl.ARRAY_BUFFER, total_dynamic_size, gl.STREAM_DRAW);
+ gl.bufferSubData(gl.ARRAY_BUFFER, 0, tv_data(context.dynamic_instance_points));
+ gl.bufferSubData(gl.ARRAY_BUFFER, context.dynamic_instance_points.size * 4, tv_data(context.dynamic_instance_ids));
+ gl.bufferSubData(gl.ARRAY_BUFFER, context.dynamic_instance_points.size * 4 + context.dynamic_instance_ids.size * 4,
+ tv_data(context.dynamic_instance_pressure));
+ gl.bindTexture(gl.TEXTURE_2D, context.textures['dynamic_stroke_data']);
+ upload_square_rgba16ui_texture(gl, context.dynamic_stroke_data, config.dynamic_stroke_texture_size);
+
+ gl.enableVertexAttribArray(locations['a_a']);
+ gl.enableVertexAttribArray(locations['a_b']);
+ gl.enableVertexAttribArray(locations['a_stroke_id']);
+ gl.enableVertexAttribArray(locations['a_pressure']);
+
+ // 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(locations['a_a'], 2, gl.FLOAT, false, 2 * 4, 0);
+ gl.vertexAttribPointer(locations['a_b'], 2, gl.FLOAT, false, 2 * 4, 2 * 4);
+ gl.vertexAttribIPointer(locations['a_stroke_id'], 1, gl.INT, 4, context.dynamic_instance_points.size * 4);
+ gl.vertexAttribPointer(locations['a_pressure'], 2, gl.UNSIGNED_BYTE, true, 1, context.dynamic_instance_points.size * 4 + context.dynamic_instance_ids.size * 4);
+
+ gl.vertexAttribDivisor(locations['a_a'], 1);
+ gl.vertexAttribDivisor(locations['a_b'], 1);
+ gl.vertexAttribDivisor(locations['a_stroke_id'], 1);
+ gl.vertexAttribDivisor(locations['a_pressure'], 1);
+
+ gl.drawArraysInstanced(gl.TRIANGLES, 0, 6, dynamic_segment_count);
+ }
- document.getElementById('debug-stats').innerHTML = `
+ document.getElementById('debug-stats').innerHTML = `
Segments onscreen: ${segment_count}
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}`;
- if (context.gpu_timer_ext) {
- gl.endQuery(context.gpu_timer_ext.TIME_ELAPSED_EXT);
-
- const next_tick = () => {
- if (query) {
- // At some point in the future, after returning control to the browser
- const available = gl.getQueryParameter(query, gl.QUERY_RESULT_AVAILABLE);
- const disjoint = gl.getParameter(context.gpu_timer_ext.GPU_DISJOINT_EXT);
-
- if (available && !disjoint) {
- // See how much time the rendering of the object took in nanoseconds.
- const timeElapsed = gl.getQueryParameter(query, gl.QUERY_RESULT);
- //console.debug(timeElapsed / 1000000);
- document.querySelector('.debug-timings .gpu').innerHTML = 'Last GPU Frametime: ' + Math.round(timeElapsed / 10000) / 100 + 'ms';
- }
-
- if (available || disjoint) {
- // Clean up the query object.
- gl.deleteQuery(query);
- // Don't re-enter this polling loop.
- query = null;
- } else if (!available) {
- setTimeout(next_tick, 0);
- }
+ if (context.gpu_timer_ext) {
+ gl.endQuery(context.gpu_timer_ext.TIME_ELAPSED_EXT);
+
+ const next_tick = () => {
+ if (query) {
+ // At some point in the future, after returning control to the browser
+ const available = gl.getQueryParameter(query, gl.QUERY_RESULT_AVAILABLE);
+ const disjoint = gl.getParameter(context.gpu_timer_ext.GPU_DISJOINT_EXT);
+
+ if (available && !disjoint) {
+ // See how much time the rendering of the object took in nanoseconds.
+ const timeElapsed = gl.getQueryParameter(query, gl.QUERY_RESULT);
+ //console.debug(timeElapsed / 1000000);
+ document.querySelector('.debug-timings .gpu').innerHTML = 'Last GPU Frametime: ' + Math.round(timeElapsed / 10000) / 100 + 'ms';
}
- }
- setTimeout(next_tick, 0);
+ if (available || disjoint) {
+ // Clean up the query object.
+ gl.deleteQuery(query);
+ // Don't re-enter this polling loop.
+ query = null;
+ } else if (!available) {
+ setTimeout(next_tick, 0);
+ }
+ }
}
- } catch (e) {
- console.error('Draw failed:', e);
+
+ setTimeout(next_tick, 0);
}
-
+
const cpu_after = performance.now();
state.timers.raf = false;