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

    // SDF
    locations = context.locations['sdf'];
    buffers = context.buffers['sdf'];
    textures = context.textures['sdf'];

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

    gl.bindBuffer(gl.ARRAY_BUFFER, buffers['b_packed']);

    gl.enableVertexAttribArray(locations['a_pos']);
    gl.enableVertexAttribArray(locations['a_color']);

    gl.vertexAttribPointer(locations['a_pos'],   3, gl.FLOAT,         false, 4 * 4, 0);
    gl.vertexAttribPointer(locations['a_color'], 3, gl.UNSIGNED_BYTE, true,  4 * 4, 4 * 3);

    gl.activeTexture(gl.TEXTURE0 + 0);
    gl.bindTexture(gl.TEXTURE_2D, textures['points']);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);

    const npoints  = context.point_serializer.offset / (4 * 2);
    const nstrokes = context.quad_serializer.offset / (6 * 4 * 4);

    if (npoints > 0) {
        // TOOD: if points changed
        if (true) {
            const texture_width = Math.min(npoints, 8192);
            const texture_height = Math.max(1, Math.ceil(npoints / 8192));
            gl.texImage2D(gl.TEXTURE_2D, 0, gl.RG32F, texture_width, texture_height, 0, gl.RG, gl.FLOAT, new Float32Array(context.point_serializer.buffer, 0, context.point_serializer.size / 4));
        }

        gl.activeTexture(gl.TEXTURE0 + 1);
        gl.bindTexture(gl.TEXTURE_2D, textures['indices']);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);

        // TOOD: if points changed
        if (true) {
            gl.texImage2D(gl.TEXTURE_2D, 0, gl.RG32UI, nstrokes, 1, 0, gl.RG_INTEGER, gl.UNSIGNED_INT, new Uint32Array(context.index_serializer.buffer, 0, context.index_serializer.offset / 4));
        }

        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_points'], 0);
        gl.uniform1i(locations['u_texture_indices'], 1);
        gl.uniform1i(locations['u_debug_mode'], context.debug_mode ? 1 : 0);

        gl.bufferData(gl.ARRAY_BUFFER, new Uint8Array(context.quad_serializer.buffer, 0, context.quad_serializer.offset), gl.STATIC_DRAW);
        gl.drawArrays(gl.TRIANGLES, 0, nstrokes * 6);
    }

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