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

    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'];

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

    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_debug_mode'], context.debug_mode ? 1 : 0);

    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) {
        gl.bindBuffer(gl.ARRAY_BUFFER, buffers['b_packed_static']);

        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_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;
        }

        const before_clip = performance.now();
        segments_onscreen(state, context); 
        const after_clip = performance.now();
        console.debug('clip', after_clip - before_clip);

        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, buffers['b_packed_static_index']);
        gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint32Array(state.onscreen_segments), gl.DYNAMIC_DRAW);
        const after_index_uploads = performance.now();
        console.debug('index upload', after_index_uploads - after_clip);

        gl.drawElements(gl.TRIANGLES, state.onscreen_segments.length, 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);
    }
/*
    const next_tick = () => {
        const wait_status = gl.clientWaitSync(sync, 0, 0);
        const frame_end = performance.now();
        
        if (wait_status === gl.ALREADY_SIGNALED || wait_status === gl.CONDITION_SATISFIED) {
            const frametime_ms = frame_end - frame_start;
            gl.deleteSync(sync);
            if (config.debug_print) console.debug(frametime_ms);
        } else {
            setTimeout(next_tick, 0);
        }
    }

    setTimeout(next_tick, 0);
    */

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