desk2/client/webgl_draw.js

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.uniform1i(locations['u_texture'], 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(context.textures).length;
    let active_image_index = -1;

    gl.uniform1i(locations['u_layer'], 0);
    gl.uniform1i(locations['u_outline'], 0);

    for (let key = 0; key < count; ++key) {
        if (context.textures[key].image_id === context.active_image) {
            active_image_index = key;
            continue;
        }

        gl.bindTexture(gl.TEXTURE_2D, context.textures[key].texture);
        gl.drawArrays(gl.TRIANGLES, key * 6, 6);
    }

    if (active_image_index !== -1) {
        gl.uniform1i(locations['u_layer'], 1);
        gl.uniform1i(locations['u_outline'], 1);
        gl.bindTexture(gl.TEXTURE_2D, context.textures[active_image_index].texture);
        gl.drawArrays(gl.TRIANGLES, active_image_index * 6, 6);
    }

    // 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);

    // Circles
    locations = context.locations['circle'];
    buffers = context.buffers['circle'];

    gl.useProgram(context.programs['circle']);

    gl.enableVertexAttribArray(locations['a_pos']);
    gl.enableVertexAttribArray(locations['a_texcoord']);
    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_circle_pos_size = context.static_circle_positions_f32.byteLength + context.dynamic_circle_positions_f32.byteLength;
    const total_circle_color_size = context.static_circle_colors_u8.byteLength + context.dynamic_circle_colors_u8.byteLength; 
    const total_circle_point_count = (context.static_circle_positions.length + total_dynamic_circle_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_circle_pos_size, gl.DYNAMIC_DRAW);
    gl.bufferSubData(gl.ARRAY_BUFFER, 0, context.static_circle_positions_f32);
    gl.bufferSubData(gl.ARRAY_BUFFER, context.static_circle_positions_f32.byteLength, context.dynamic_circle_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_circle_color_size, gl.DYNAMIC_DRAW);
    gl.bufferSubData(gl.ARRAY_BUFFER, 0, context.static_circle_colors_u8);
    gl.bufferSubData(gl.ARRAY_BUFFER, context.static_circle_colors_u8.byteLength, context.dynamic_circle_colors_u8);

    // TODO: move this somewhere?
    const circle_quad_uv = new Float32Array(total_circle_point_count * 2);

    for (let quad = 0; quad < total_circle_point_count / 6; ++quad) {
        circle_quad_uv[quad * 12 + 0] = 0;
        circle_quad_uv[quad * 12 + 1] = 0;

        circle_quad_uv[quad * 12 + 2] = 0;
        circle_quad_uv[quad * 12 + 3] = 1;

        circle_quad_uv[quad * 12 + 4] = 1;
        circle_quad_uv[quad * 12 + 5] = 0;

        circle_quad_uv[quad * 12 + 6] = 1;
        circle_quad_uv[quad * 12 + 7] = 1;

        circle_quad_uv[quad * 12 + 8] = 1;
        circle_quad_uv[quad * 12 + 9] = 0;

        circle_quad_uv[quad * 12 + 10] = 0;
        circle_quad_uv[quad * 12 + 11] = 1;
    }   

    gl.bindBuffer(gl.ARRAY_BUFFER, buffers['b_texcoord']);
    gl.vertexAttribPointer(locations['a_texcoord'], 2, gl.FLOAT, false, 0, 0);
    gl.bufferData(gl.ARRAY_BUFFER, circle_quad_uv, gl.DYNAMIC_DRAW);

    gl.drawArrays(gl.TRIANGLES, 0, total_circle_point_count);
}