function schedule_draw(state, context) { if (!state.timers.raf) { window.requestAnimationFrame(() => draw(state, context)); state.timers.raf = true; } } function draw(state, context) { state.timers.raf = false; const gl = context.gl; const width = window.innerWidth; const height = window.innerHeight; let locations; let buffers; gl.viewport(0, 0, context.canvas.width, context.canvas.height); gl.clearColor(context.bgcolor.r, context.bgcolor.g, context.bgcolor.b, 1); gl.clear(gl.COLOR_BUFFER_BIT); // Draw images locations = context.locations['quad']; buffers = context.buffers['quad']; gl.useProgram(context.programs['quad']); 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_layer'], 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); let tex_index = 0; for (const key in context.textures) { gl.bindTexture(gl.TEXTURE_2D, context.textures[key]); gl.drawArrays(gl.TRIANGLES, tex_index * 6, 6); ++tex_index; } // Draw strokes locations = context.locations['stroke']; buffers = context.buffers['stroke']; gl.useProgram(context.programs['stroke']); gl.enableVertexAttribArray(locations['a_pos']); gl.enableVertexAttribArray(locations['a_color']); 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_layer'], 1); const total_pos_size = context.static_positions_f32.byteLength + context.dynamic_positions_f32.byteLength; const total_color_size = context.static_colors_u8.byteLength + context.dynamic_colors_u8.byteLength; const total_point_count = (context.static_positions.length + total_dynamic_positions(context)) / 2; gl.bindBuffer(gl.ARRAY_BUFFER, buffers['b_pos']); gl.vertexAttribPointer(locations['a_pos'], 2, gl.FLOAT, false, 0, 0); gl.bufferData(gl.ARRAY_BUFFER, total_pos_size, gl.DYNAMIC_DRAW); gl.bufferSubData(gl.ARRAY_BUFFER, 0, context.static_positions_f32); gl.bufferSubData(gl.ARRAY_BUFFER, context.static_positions_f32.byteLength, context.dynamic_positions_f32); gl.bindBuffer(gl.ARRAY_BUFFER, buffers['b_color']); gl.vertexAttribPointer(locations['a_color'], 3, gl.UNSIGNED_BYTE, true, 0, 0); gl.bufferData(gl.ARRAY_BUFFER, total_color_size, gl.DYNAMIC_DRAW); gl.bufferSubData(gl.ARRAY_BUFFER, 0, context.static_colors_u8); gl.bufferSubData(gl.ARRAY_BUFFER, context.static_colors_u8.byteLength, context.dynamic_colors_u8); gl.drawArrays(gl.TRIANGLES, 0, total_point_count); }