From 4e09c47190eea65aa4919316506bd3f6935ad72e Mon Sep 17 00:00:00 2001 From: "A.Olokhtonov" Date: Sat, 28 Sep 2024 14:55:08 +0300 Subject: [PATCH] Sudden shader refactoring (automatically extract locations a-la tiny-sdf) --- client/config.js | 1 + client/index.html | 1 + client/webgl_draw.js | 280 +++++++++++++++++++++----------------- client/webgl_listeners.js | 5 + client/webgl_shaders.js | 92 ++++--------- 5 files changed, 185 insertions(+), 194 deletions(-) diff --git a/client/config.js b/client/config.js index edd13fe..680bb0d 100644 --- a/client/config.js +++ b/client/config.js @@ -8,6 +8,7 @@ const config = { second_finger_timeout: 500, buffer_first_touchmoves: 5, debug_print: false, + draw_bvh: true, zoom_delta: 0.05, min_zoom_level: -250, max_zoom_level: 100, diff --git a/client/index.html b/client/index.html index 9bc8cbc..c993db4 100644 --- a/client/index.html +++ b/client/index.html @@ -45,6 +45,7 @@ + diff --git a/client/webgl_draw.js b/client/webgl_draw.js index 6352ee7..8c97abb 100644 --- a/client/webgl_draw.js +++ b/client/webgl_draw.js @@ -105,20 +105,24 @@ async function draw(state, context, animate, ts) { gl.clearDepth(0.0); gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); + const locations = context.locations; + const buffers = context.buffers; + const programs = context.programs; + const textures = context.textures; + // Draw the background pattern if (state.background_pattern === 'dots') { - gl.useProgram(context.programs['pattern'].dots); - buffers = context.buffers['pattern']; - locations = context.locations['pattern'].dots; + const pr = programs['dots']; + gl.useProgram(pr.program); gl.bindBuffer(gl.ARRAY_BUFFER, buffers['b_instance_dot']); - gl.enableVertexAttribArray(locations['a_center']); - gl.vertexAttribPointer(locations['a_center'], 2, gl.FLOAT, false, 2 * 4, 0); - gl.vertexAttribDivisor(locations['a_center'], 1); + gl.enableVertexAttribArray(pr.locations['a_center']); + gl.vertexAttribPointer(pr.locations['a_center'], 2, gl.FLOAT, false, 2 * 4, 0); + gl.vertexAttribDivisor(pr.locations['a_center'], 1); - 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.uniform2f(pr.locations['u_res'], context.canvas.width, context.canvas.height); + gl.uniform2f(pr.locations['u_scale'], state.canvas.zoom, state.canvas.zoom); + gl.uniform2f(pr.locations['u_translation'], state.canvas.offset.x, state.canvas.offset.y); const zoom = state.canvas.zoom; const zoom_log2 = Math.log2(zoom); @@ -131,7 +135,7 @@ async function draw(state, context, animate, ts) { const dot_instances = new Float32Array(geometry_gen_fullscreen_grid(state, context, 32 / zoom_previous, 32 / zoom_previous)); const t = Math.min(1.0, 1.0 - (zoom / zoom_previous) / 2.0); - gl.uniform1f(locations['u_fadeout'], t); + gl.uniform1f(pr.locations['u_fadeout'], t); gl.bindBuffer(gl.ARRAY_BUFFER, buffers['b_instance_dot']); gl.bufferData(gl.ARRAY_BUFFER, dot_instances, gl.STREAM_DRAW); @@ -144,7 +148,7 @@ async function draw(state, context, animate, ts) { const dot_instances = new Float32Array(geometry_gen_fullscreen_grid(state, context, 32 / zoom_next, 32 / zoom_next)); const t = Math.min(1.0, 1.0 - (zoom_next / zoom) / 2.0); - gl.uniform1f(locations['u_fadeout'], t); + gl.uniform1f(pr.locations['u_fadeout'], t); gl.bindBuffer(gl.ARRAY_BUFFER, buffers['b_instance_dot']); gl.bufferData(gl.ARRAY_BUFFER, dot_instances, gl.STREAM_DRAW); @@ -152,6 +156,7 @@ async function draw(state, context, animate, ts) { gl.drawArraysInstanced(gl.TRIANGLES, 0, 6, dot_instances.length / 2); } } else if (state.background_pattern === 'grid') { + const pr = programs['grid']; const zoom = state.canvas.zoom; let zoom_log8 = Math.log(zoom) / Math.log(8); @@ -166,19 +171,17 @@ async function draw(state, context, animate, ts) { zoom_next = zoom_previous * 8; } - gl.useProgram(context.programs['pattern'].grid); - buffers = context.buffers['pattern']; - locations = context.locations['pattern'].grid; + gl.useProgram(pr.program); gl.bindBuffer(gl.ARRAY_BUFFER, buffers['b_instance_grid']); - gl.enableVertexAttribArray(locations['a_data']); - gl.vertexAttribPointer(locations['a_data'], 2, gl.FLOAT, false, 2 * 4, 0); - gl.vertexAttribDivisor(locations['a_data'], 1); + gl.enableVertexAttribArray(pr.locations['a_data']); + gl.vertexAttribPointer(pr.locations['a_data'], 2, gl.FLOAT, false, 2 * 4, 0); + gl.vertexAttribDivisor(pr.locations['a_data'], 1); - 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.uniform1f(locations['u_fadeout'], 1.0); + gl.uniform2f(pr.locations['u_res'], context.canvas.width, context.canvas.height); + gl.uniform2f(pr.locations['u_scale'], state.canvas.zoom, state.canvas.zoom); + gl.uniform2f(pr.locations['u_translation'], state.canvas.offset.x, state.canvas.offset.y); + gl.uniform1f(pr.locations['u_fadeout'], 1.0); // Previous level (major lines) { @@ -186,7 +189,7 @@ async function draw(state, context, animate, ts) { let t = (zoom / zoom_previous - 1) / -7 + 1; t = 0.25; - gl.uniform1f(locations['u_fadeout'], t); + gl.uniform1f(pr.locations['u_fadeout'], t); gl.bindBuffer(gl.ARRAY_BUFFER, buffers['b_instance_grid']); gl.bufferData(gl.ARRAY_BUFFER, grid_instances, gl.STREAM_DRAW); @@ -200,7 +203,7 @@ async function draw(state, context, animate, ts) { let t = (zoom_next / zoom - 1) / 7; t = Math.min(0.1, -t + 1); // slight fade-in - gl.uniform1f(locations['u_fadeout'], t); + gl.uniform1f(pr.locations['u_fadeout'], t); gl.bindBuffer(gl.ARRAY_BUFFER, buffers['b_instance_grid']); gl.bufferData(gl.ARRAY_BUFFER, grid_instances, gl.STREAM_DRAW); @@ -209,37 +212,39 @@ async function draw(state, context, animate, ts) { } } - gl.clear(gl.DEPTH_BUFFER_BIT); // draw images above the background pattern - gl.useProgram(context.programs['image']); - buffers = context.buffers['image']; - locations = context.locations['image']; + // Images { + const pr = programs['image']; + + gl.clear(gl.DEPTH_BUFFER_BIT); // draw images above the background pattern + gl.useProgram(pr.program); + let offset = 0; const quads = geometry_image_quads(state, context); - gl.bindBuffer(gl.ARRAY_BUFFER, buffers['b_quads']); + gl.bindBuffer(gl.ARRAY_BUFFER, buffers['b_images']); gl.bufferData(gl.ARRAY_BUFFER, quads, gl.STATIC_DRAW); - gl.vertexAttribDivisor(locations['a_pos'], 0); + gl.vertexAttribDivisor(pr.locations['a_pos'], 0); - gl.enableVertexAttribArray(locations['a_pos']); - gl.vertexAttribPointer(locations['a_pos'], 2, gl.FLOAT, false, 2 * 4, 0); + gl.enableVertexAttribArray(pr.locations['a_pos']); + gl.vertexAttribPointer(pr.locations['a_pos'], 2, gl.FLOAT, false, 2 * 4, 0); for (const entry of context.images) { if (!entry.deleted) { - 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_texture'], 0); // Only 1 active texture for each drawcall - gl.uniform1i(locations['u_solid'], 0); + gl.uniform2f(pr.locations['u_res'], context.canvas.width, context.canvas.height); + gl.uniform2f(pr.locations['u_scale'], state.canvas.zoom, state.canvas.zoom); + gl.uniform2f(pr.locations['u_translation'], state.canvas.offset.x, state.canvas.offset.y); + gl.uniform1i(pr.locations['u_texture'], 0); // Only 1 active texture for each drawcall + gl.uniform1i(pr.locations['u_solid'], 0); gl.bindTexture(gl.TEXTURE_2D, entry.texture); gl.drawArrays(gl.TRIANGLES, offset, 6); // Highlight active image if (entry.key === state.active_image) { - gl.uniform1i(locations['u_solid'], 1); - gl.uniform4f(locations['u_color'], 0.133 * 0.5, 0.545 * 0.5, 0.902 * 0.5, 0.5); + gl.uniform1i(pr.locations['u_solid'], 1); + gl.uniform4f(pr.locations['u_color'], 0.133 * 0.5, 0.545 * 0.5, 0.902 * 0.5, 0.5); gl.drawArrays(gl.TRIANGLES, offset, 6); } } @@ -248,72 +253,76 @@ async function draw(state, context, animate, ts) { } } - gl.clear(gl.DEPTH_BUFFER_BIT); // draw strokes above the images - gl.useProgram(context.programs['sdf'].main); - buffers = context.buffers['sdf']; - locations = context.locations['sdf'].main; // "Static" data upload if (segment_count > 0) { + const pr = programs['main']; + + gl.clear(gl.DEPTH_BUFFER_BIT); // draw strokes above the images + gl.useProgram(pr.program); + 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.bindBuffer(gl.ARRAY_BUFFER, buffers['b_strokes_static']); 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']); + gl.bindTexture(gl.TEXTURE_2D, 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.uniform1f(locations['u_fixed_pixel_width'], 0); + gl.uniform2f(pr.locations['u_res'], context.canvas.width, context.canvas.height); + gl.uniform2f(pr.locations['u_scale'], state.canvas.zoom, state.canvas.zoom); + gl.uniform2f(pr.locations['u_translation'], state.canvas.offset.x, state.canvas.offset.y); + gl.uniform1i(pr.locations['u_stroke_count'], state.events.length); + gl.uniform1i(pr.locations['u_debug_mode'], state.debug.red); + gl.uniform1i(pr.locations['u_stroke_data'], 0); + gl.uniform1i(pr.locations['u_stroke_texture_size'], config.stroke_texture_size); + gl.uniform1f(pr.locations['u_fixed_pixel_width'], 0); - gl.enableVertexAttribArray(locations['a_a']); - gl.enableVertexAttribArray(locations['a_b']); - gl.enableVertexAttribArray(locations['a_stroke_id']); - gl.enableVertexAttribArray(locations['a_pressure']); + gl.enableVertexAttribArray(pr.locations['a_a']); + gl.enableVertexAttribArray(pr.locations['a_b']); + gl.enableVertexAttribArray(pr.locations['a_stroke_id']); + gl.enableVertexAttribArray(pr.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.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(locations['a_a'], 1); - gl.vertexAttribDivisor(locations['a_b'], 1); - gl.vertexAttribDivisor(locations['a_stroke_id'], 1); - gl.vertexAttribDivisor(locations['a_pressure'], 1); + gl.vertexAttribDivisor(pr.locations['a_a'], 1); + gl.vertexAttribDivisor(pr.locations['a_b'], 1); + gl.vertexAttribDivisor(pr.locations['a_stroke_id'], 1); + gl.vertexAttribDivisor(pr.locations['a_pressure'], 1); // Static draw (everything already bound) gl.drawArraysInstanced(gl.TRIANGLES, 0, 6, segment_count); // I don't really know why I need to do this, but it // makes background patter drawcall work properly - gl.vertexAttribDivisor(locations['a_a'], 0); - gl.vertexAttribDivisor(locations['a_b'], 0); - gl.vertexAttribDivisor(locations['a_stroke_id'], 0); - gl.vertexAttribDivisor(locations['a_pressure'], 0); + gl.vertexAttribDivisor(pr.locations['a_a'], 0); + gl.vertexAttribDivisor(pr.locations['a_b'], 0); + gl.vertexAttribDivisor(pr.locations['a_stroke_id'], 0); + gl.vertexAttribDivisor(pr.locations['a_pressure'], 0); } - // 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); + const pr = programs['main']; // same as static - gl.bindBuffer(gl.ARRAY_BUFFER, buffers['b_dynamic_instance']); + // Dynamic strokes should be drawn above static strokes + gl.clear(gl.DEPTH_BUFFER_BIT); + + gl.uniform1i(pr.locations['u_stroke_count'], dynamic_stroke_count); + gl.uniform1i(pr.locations['u_stroke_data'], 0); + gl.uniform1i(pr.locations['u_stroke_texture_size'], config.dynamic_stroke_texture_size); + + gl.bindBuffer(gl.ARRAY_BUFFER, buffers['b_strokes_dynamic']); // Dynamic data upload const total_dynamic_size = @@ -325,92 +334,107 @@ async function draw(state, context, animate, ts) { 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']); + gl.bindTexture(gl.TEXTURE_2D, textures['dynamic_stroke_data']); upload_square_rgba16ui_texture(gl, context.dynamic_stroke_data, config.dynamic_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.uniform2f(pr.locations['u_res'], context.canvas.width, context.canvas.height); + gl.uniform2f(pr.locations['u_scale'], state.canvas.zoom, state.canvas.zoom); + gl.uniform2f(pr.locations['u_translation'], state.canvas.offset.x, state.canvas.offset.y); - gl.uniform1i(locations['u_stroke_count'], context.dynamic_stroke_count); - gl.uniform1i(locations['u_debug_mode'], state.debug.red); - gl.uniform1i(locations['u_stroke_data'], 0); - gl.uniform1i(locations['u_stroke_texture_size'], config.dynamic_stroke_texture_size); - gl.uniform1f(locations['u_fixed_pixel_width'], 0); + gl.uniform1i(pr.locations['u_stroke_count'], context.dynamic_stroke_count); + gl.uniform1i(pr.locations['u_debug_mode'], state.debug.red); + gl.uniform1i(pr.locations['u_stroke_data'], 0); + gl.uniform1i(pr.locations['u_stroke_texture_size'], config.dynamic_stroke_texture_size); + gl.uniform1f(pr.locations['u_fixed_pixel_width'], 0); - gl.enableVertexAttribArray(locations['a_a']); - gl.enableVertexAttribArray(locations['a_b']); - gl.enableVertexAttribArray(locations['a_stroke_id']); - gl.enableVertexAttribArray(locations['a_pressure']); + gl.enableVertexAttribArray(pr.locations['a_a']); + gl.enableVertexAttribArray(pr.locations['a_b']); + gl.enableVertexAttribArray(pr.locations['a_stroke_id']); + gl.enableVertexAttribArray(pr.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.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.dynamic_instance_points.size * 4); + gl.vertexAttribPointer(pr.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.vertexAttribDivisor(pr.locations['a_a'], 1); + gl.vertexAttribDivisor(pr.locations['a_b'], 1); + gl.vertexAttribDivisor(pr.locations['a_stroke_id'], 1); + gl.vertexAttribDivisor(pr.locations['a_pressure'], 1); gl.drawArraysInstanced(gl.TRIANGLES, 0, 6, dynamic_segment_count); - gl.vertexAttribDivisor(locations['a_a'], 0); - gl.vertexAttribDivisor(locations['a_b'], 0); - gl.vertexAttribDivisor(locations['a_stroke_id'], 0); - gl.vertexAttribDivisor(locations['a_pressure'], 0); + gl.vertexAttribDivisor(pr.locations['a_a'], 0); + gl.vertexAttribDivisor(pr.locations['a_b'], 0); + gl.vertexAttribDivisor(pr.locations['a_stroke_id'], 0); + gl.vertexAttribDivisor(pr.locations['a_pressure'], 0); } // HUD: resize handles, etc if (state.active_image !== null) { + const pr = programs['main']; // same as static const handles = geometry_generate_handles(state, context, state.active_image); const ui_segments = 7 * 4 - 1; // each square = 4, each line = 1, square->line = 1, line->square = 1 - gl.bindBuffer(gl.ARRAY_BUFFER, buffers['b_instance']); + gl.bindBuffer(gl.ARRAY_BUFFER, buffers['b_hud']); gl.bufferData(gl.ARRAY_BUFFER, handles.points.byteLength + handles.ids.byteLength + handles.pressures.byteLength, gl.STREAM_DRAW); gl.bufferSubData(gl.ARRAY_BUFFER, 0, handles.points); gl.bufferSubData(gl.ARRAY_BUFFER, handles.points.byteLength, handles.ids); gl.bufferSubData(gl.ARRAY_BUFFER, handles.points.byteLength + handles.ids.byteLength, handles.pressures); - gl.bindTexture(gl.TEXTURE_2D, context.textures['ui']); + gl.bindTexture(gl.TEXTURE_2D, textures['ui']); upload_square_rgba16ui_texture(gl, handles.stroke_data, config.ui_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'], 8); - gl.uniform1i(locations['u_debug_mode'], 0); - gl.uniform1i(locations['u_stroke_data'], 0); - gl.uniform1i(locations['u_stroke_texture_size'], config.ui_texture_size); - gl.uniform1f(locations['u_fixed_pixel_width'], 2); - - gl.enableVertexAttribArray(locations['a_a']); - gl.enableVertexAttribArray(locations['a_b']); - gl.enableVertexAttribArray(locations['a_stroke_id']); - gl.enableVertexAttribArray(locations['a_pressure']); - - 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, handles.points.byteLength); - gl.vertexAttribPointer(locations['a_pressure'], 2, gl.UNSIGNED_BYTE, true, 1, handles.points.byteLength + handles.ids.byteLength); - - 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.uniform2f(pr.locations['u_res'], context.canvas.width, context.canvas.height); + gl.uniform2f(pr.locations['u_scale'], state.canvas.zoom, state.canvas.zoom); + gl.uniform2f(pr.locations['u_translation'], state.canvas.offset.x, state.canvas.offset.y); + gl.uniform1i(pr.locations['u_stroke_count'], 8); + gl.uniform1i(pr.locations['u_debug_mode'], 0); + gl.uniform1i(pr.locations['u_stroke_data'], 0); + gl.uniform1i(pr.locations['u_stroke_texture_size'], config.ui_texture_size); + gl.uniform1f(pr.locations['u_fixed_pixel_width'], 2); + + gl.enableVertexAttribArray(pr.locations['a_a']); + gl.enableVertexAttribArray(pr.locations['a_b']); + gl.enableVertexAttribArray(pr.locations['a_stroke_id']); + gl.enableVertexAttribArray(pr.locations['a_pressure']); + + 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, handles.points.byteLength); + gl.vertexAttribPointer(pr.locations['a_pressure'], 2, gl.UNSIGNED_BYTE, true, 1, handles.points.byteLength + handles.ids.byteLength); + + gl.vertexAttribDivisor(pr.locations['a_a'], 1); + gl.vertexAttribDivisor(pr.locations['a_b'], 1); + gl.vertexAttribDivisor(pr.locations['a_stroke_id'], 1); + gl.vertexAttribDivisor(pr.locations['a_pressure'], 1); // Static draw (everything already bound) gl.drawArraysInstanced(gl.TRIANGLES, 0, 6, ui_segments); // I don't really know why I need to do this, but it // makes background patter drawcall work properly - gl.vertexAttribDivisor(locations['a_a'], 0); - gl.vertexAttribDivisor(locations['a_b'], 0); - gl.vertexAttribDivisor(locations['a_stroke_id'], 0); - gl.vertexAttribDivisor(locations['a_pressure'], 0); + gl.vertexAttribDivisor(pr.locations['a_a'], 0); + gl.vertexAttribDivisor(pr.locations['a_b'], 0); + gl.vertexAttribDivisor(pr.locations['a_stroke_id'], 0); + gl.vertexAttribDivisor(pr.locations['a_pressure'], 0); } + if (config.draw_bvh) { + const bboxes = tv_create(Float32Array, context.clipped_indices.size * 4); + // Debug BVH viz + for (let i = 0; i < context.clipped_indices.size; ++i) { + const stroke_id = context.clipped_indices.data[i]; + const stroke = state.events[stroke_id]; + const stroke_bbox = state.bvh.nodes[stroke.bvh_node].bbox; + tv_add(bboxes, stroke.bbox.x1); + tv_add(bboxes, stroke.bbox.x2); + tv_add(bboxes, stroke.bbox.y1); + tv_add(bboxes, stroke.bbox.y2); + } + } + document.getElementById('debug-stats').innerHTML = ` Strokes onscreen: ${context.clipped_indices.size} Segments onscreen: ${segment_count} diff --git a/client/webgl_listeners.js b/client/webgl_listeners.js index 2c75231..225c002 100644 --- a/client/webgl_listeners.js +++ b/client/webgl_listeners.js @@ -26,6 +26,7 @@ function debug_panel_init(state, context) { document.getElementById('debug-red').checked = state.debug.red; document.getElementById('do-snap').checked = state.snap !== null; document.getElementById('debug-print').checked = config.debug_print; + document.getElementById('draw-bvh').checked = config.draw_bvh; document.getElementById('debug-red').addEventListener('change', (e) => { state.debug.red = e.target.checked; @@ -40,6 +41,10 @@ function debug_panel_init(state, context) { config.debug_print = e.target.checked; }); + document.getElementById('draw-bvh').addEventListener('change', (e) => { + config.draw_bvh = e.target.checked; + }); + document.getElementById('debug-begin-benchmark').addEventListener('click', (e) => { state.canvas.zoom_level = config.benchmark.zoom_level; state.canvas.offset.x = config.benchmark.offset.x; diff --git a/client/webgl_shaders.js b/client/webgl_shaders.js index 65ce282..f4e4e9f 100644 --- a/client/webgl_shaders.js +++ b/client/webgl_shaders.js @@ -303,78 +303,21 @@ function init_webgl(state, context) { const grid_vs = create_shader(gl, gl.VERTEX_SHADER, grid_vs_src); - context.programs['image'] = create_program(gl, quad_vs, quad_fs); - context.programs['sdf'] = { + context.programs = { + 'image': create_program(gl, quad_vs, quad_fs), 'main': create_program(gl, sdf_vs, sdf_fs), - }; - context.programs['pattern'] = { 'dots': create_program(gl, dots_vs, dots_fs), 'grid': create_program(gl, grid_vs, dots_fs), }; - context.locations['image'] = { - 'a_pos': gl.getAttribLocation(context.programs['image'], 'a_pos'), - - 'u_res': gl.getUniformLocation(context.programs['image'], 'u_res'), - 'u_scale': gl.getUniformLocation(context.programs['image'], 'u_scale'), - 'u_translation': gl.getUniformLocation(context.programs['image'], 'u_translation'), - 'u_texture': gl.getUniformLocation(context.programs['image'], 'u_texture'), - 'u_solid': gl.getUniformLocation(context.programs['image'], 'u_solid'), - 'u_color': gl.getUniformLocation(context.programs['image'], 'u_color'), - }; - - context.locations['sdf'] = { - 'main': { - 'a_a': gl.getAttribLocation(context.programs['sdf'].main, 'a_a'), - 'a_b': gl.getAttribLocation(context.programs['sdf'].main, 'a_b'), - 'a_stroke_id': gl.getAttribLocation(context.programs['sdf'].main, 'a_stroke_id'), - 'a_pressure': gl.getAttribLocation(context.programs['sdf'].main, 'a_pressure'), - - 'u_res': gl.getUniformLocation(context.programs['sdf'].main, 'u_res'), - 'u_scale': gl.getUniformLocation(context.programs['sdf'].main, 'u_scale'), - 'u_translation': gl.getUniformLocation(context.programs['sdf'].main, 'u_translation'), - 'u_debug_mode': gl.getUniformLocation(context.programs['sdf'].main, 'u_debug_mode'), - 'u_stroke_count': gl.getUniformLocation(context.programs['sdf'].main, 'u_stroke_count'), - 'u_stroke_data': gl.getUniformLocation(context.programs['sdf'].main, 'u_stroke_data'), - 'u_stroke_texture_size': gl.getUniformLocation(context.programs['sdf'].main, 'u_stroke_texture_size'), - 'u_fixed_pixel_width': gl.getUniformLocation(context.programs['sdf'].main, 'u_fixed_pixel_width'), - } - }; - - context.locations['pattern'] = { - 'dots': { - 'a_xy': gl.getAttribLocation(context.programs['pattern'].dots, 'a_xy'), - 'a_center': gl.getAttribLocation(context.programs['pattern'].dots, 'a_center'), - - 'u_res': gl.getUniformLocation(context.programs['pattern'].dots, 'u_res'), - 'u_scale': gl.getUniformLocation(context.programs['pattern'].dots, 'u_scale'), - 'u_translation': gl.getUniformLocation(context.programs['pattern'].dots, 'u_translation'), - 'u_fadeout': gl.getUniformLocation(context.programs['pattern'].dots, 'u_fadeout'), - }, - - 'grid': { - 'a_data': gl.getAttribLocation(context.programs['pattern'].grid, 'a_data'), - - 'u_res': gl.getUniformLocation(context.programs['pattern'].grid, 'u_res'), - 'u_scale': gl.getUniformLocation(context.programs['pattern'].grid, 'u_scale'), - 'u_translation': gl.getUniformLocation(context.programs['pattern'].grid, 'u_translation'), - 'u_fadeout': gl.getUniformLocation(context.programs['pattern'].grid, 'u_fadeout'), - } - }; - - context.buffers['image'] = { - 'b_quads': gl.createBuffer(), - }; - - context.buffers['sdf'] = { - 'b_instance': gl.createBuffer(), - 'b_dynamic_instance': gl.createBuffer(), - }; - - context.buffers['pattern'] = { + context.buffers = { + 'b_images': gl.createBuffer(), + 'b_strokes_static': gl.createBuffer(), + 'b_strokes_dynamic': gl.createBuffer(), 'b_instance_dot': gl.createBuffer(), 'b_instance_grid': gl.createBuffer(), 'b_dot': gl.createBuffer(), + 'b_hud': gl.createBuffer(), }; context.textures = { @@ -447,9 +390,26 @@ function create_program(gl, vs, fs) { gl.linkProgram(program); if (gl.getProgramParameter(program, gl.LINK_STATUS)) { - return program; + // src: tiny-sdf + // https://github.com/mapbox/tiny-sdf + const wrapper = {program}; + const num_attrs = gl.getProgramParameter(program, gl.ACTIVE_ATTRIBUTES); + const num_uniforms = gl.getProgramParameter(program, gl.ACTIVE_UNIFORMS); + + wrapper.locations = {}; + + for (let i = 0; i < num_attrs; i++) { + const attribute = gl.getActiveAttrib(program, i); + wrapper.locations[attribute.name] = gl.getAttribLocation(program, attribute.name); + } + + for (let i = 0; i < num_uniforms; i++) { + const uniform = gl.getActiveUniform(program, i); + wrapper.locations[uniform.name] = gl.getUniformLocation(program, uniform.name); + } + + return wrapper; } - console.error('link:', gl.getProgramInfoLog(program)); gl.deleteProgram(program);