function schedule_draw(state, context) { if (!state.timers.raf) { window.requestAnimationFrame(() => { context._DRAW_TO_TEXTURE = true; draw(state, context); context._DRAW_TO_TEXTURE = false; draw(state, context) }); state.timers.raf = true; } } function upload_if_needed(context) { const gl = context.gl; if (context.need_static_allocate) { if (config.debug_print) console.debug('static allocate'); gl.bufferData(gl.ARRAY_BUFFER, context.static_serializer.size, gl.DYNAMIC_DRAW); context.need_static_allocate = false; context.static_upload_from = 0; context.need_static_upload = true; } if (context.need_static_upload) { if (config.debug_print) console.debug('static upload'); const upload_offset = context.static_upload_from; const upload_size = context.static_serializer.offset - upload_offset; gl.bufferSubData(gl.ARRAY_BUFFER, upload_offset, new Uint8Array(context.static_serializer.buffer, upload_offset, upload_size)); context.need_static_upload = false; context.static_upload_from = context.static_serializer.offset; } } function draw(state, context) { state.timers.raf = false; const gl = context.gl; const width = window.innerWidth; const height = window.innerHeight; let query = null; if (context.gpu_timer_ext !== null) { query = gl.createQuery(); gl.beginQuery(context.gpu_timer_ext.TIME_ELAPSED_EXT, query); } let locations; let buffers; buffers = context.buffers['sdf']; gl.bindBuffer(gl.ARRAY_BUFFER, buffers['b_packed_static']); upload_if_needed(context); 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); const before_clip = performance.now(); const index_count = segments_onscreen(state, context); const after_clip = performance.now(); //console.debug('clip', after_clip - before_clip); if (index_count > 0) { gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, buffers['b_packed_static_index']); const index_buffer = new Uint32Array(state.onscreen_segments.buffer, 0, index_count); const static_points = context.static_serializer.offset / config.bytes_per_point; //const dynamic_points = context.dynamic_serializer.offset / config.bytes_per_point; if (static_points > 0) { // DEPTH PREPASS index_buffer.reverse(); if (context.do_prepass) { gl.drawBuffers([gl.NONE]); locations = context.locations['sdf'].opaque; gl.useProgram(context.programs['sdf'].opaque); 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.stroke_count); gl.enableVertexAttribArray(locations['a_pos']); gl.enableVertexAttribArray(locations['a_line']); gl.enableVertexAttribArray(locations['a_stroke_id']); gl.vertexAttribPointer(locations['a_pos'], 3, gl.FLOAT, false, config.bytes_per_point, 0); gl.vertexAttribPointer(locations['a_line'], 4, gl.FLOAT, false, config.bytes_per_point, 4 * 3); gl.vertexAttribIPointer(locations['a_stroke_id'], 1, gl.INT, config.bytes_per_point, 4 * 3 + 4 * 4 + 4); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, index_buffer, gl.DYNAMIC_DRAW); gl.drawElements(gl.TRIANGLES, index_count, gl.UNSIGNED_INT, 0); } // MAIN PASS gl.drawBuffers([gl.BACK]); locations = context.locations['sdf'].main; gl.useProgram(context.programs['sdf'].main); 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.stroke_count); gl.enableVertexAttribArray(locations['a_pos']); gl.enableVertexAttribArray(locations['a_line']); gl.enableVertexAttribArray(locations['a_color']); gl.enableVertexAttribArray(locations['a_stroke_id']); gl.vertexAttribPointer(locations['a_pos'], 3, gl.FLOAT, false, config.bytes_per_point, 0); gl.vertexAttribPointer(locations['a_line'], 4, gl.FLOAT, false, config.bytes_per_point, 4 * 3); gl.vertexAttribPointer(locations['a_color'], 3, gl.UNSIGNED_BYTE, true, config.bytes_per_point, 4 * 3 + 4 * 4); gl.vertexAttribIPointer(locations['a_stroke_id'], 1, gl.INT, config.bytes_per_point, 4 * 3 + 4 * 4 + 4); index_buffer.reverse(); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, index_buffer, gl.DYNAMIC_DRAW); gl.drawElements(gl.TRIANGLES, index_count, gl.UNSIGNED_INT, 0); } } /* if (dynamic_points > 0) { gl.bindBuffer(gl.ARRAY_BUFFER, buffers['b_packed_dynamic']); gl.enableVertexAttribArray(locations['a_pos']); gl.enableVertexAttribArray(locations['a_line']); gl.enableVertexAttribArray(locations['a_color']); gl.vertexAttribPointer(locations['a_pos'], 3, gl.FLOAT, false, config.bytes_per_point, 0); gl.vertexAttribPointer(locations['a_line'], 4, gl.FLOAT, false, config.bytes_per_point, 4 * 3); gl.vertexAttribPointer(locations['a_color'], 3, gl.UNSIGNED_BYTE, true, config.bytes_per_point, 4 * 3 + 4 * 4); if (context.need_dynamic_upload) { gl.bufferData(gl.ARRAY_BUFFER, new Uint8Array(context.dynamic_serializer.buffer, 0, context.dynamic_serializer.offset), gl.STATIC_DRAW); context.need_dynamic_upload = false; } gl.drawArrays(gl.TRIANGLES, 0, dynamic_points); } */ 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); } if (available || disjoint) { // Clean up the query object. gl.deleteQuery(query); // Don't re-enter this polling loop. query = null; } else { setTimeout(next_tick, 0); } } } setTimeout(next_tick, 0); } // Images // locations = context.locations['image']; // buffers = context.buffers['image']; // textures = context.textures['image']; // gl.useProgram(context.programs['image']); // gl.enableVertexAttribArray(locations['a_pos']); // gl.enableVertexAttribArray(locations['a_texcoord']); // 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); // if (context.quad_positions_f32.byteLength > 0) { // gl.bindBuffer(gl.ARRAY_BUFFER, buffers['b_pos']); // gl.vertexAttribPointer(locations['a_pos'], 2, gl.FLOAT, false, 0, 0); // gl.bufferData(gl.ARRAY_BUFFER, context.quad_positions_f32, gl.STATIC_DRAW); // gl.bindBuffer(gl.ARRAY_BUFFER, buffers['b_texcoord']); // gl.vertexAttribPointer(locations['a_texcoord'], 2, gl.FLOAT, false, 0, 0); // gl.bufferData(gl.ARRAY_BUFFER, context.quad_texcoords_f32, gl.STATIC_DRAW); // } // const count = Object.keys(textures).length; // let active_image_index = -1; // gl.uniform1i(locations['u_outline'], 0); // for (let key = 0; key < count; ++key) { // if (textures[key].image_id === context.active_image) { // active_image_index = key; // continue; // } // gl.bindTexture(gl.TEXTURE_2D, textures[key].texture); // gl.drawArrays(gl.TRIANGLES, key * 6, 6); // } // if (active_image_index !== -1) { // gl.uniform1i(locations['u_outline'], 1); // gl.bindTexture(gl.TEXTURE_2D, textures[active_image_index].texture); // gl.drawArrays(gl.TRIANGLES, active_image_index * 6, 6); // } }