desk2/client/webgl_draw.js

function schedule_draw(state, context) {
    if (!state.timers.raf) {
        window.requestAnimationFrame(() => {
            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) {
    const cpu_before = performance.now();

    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']);
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, buffers['b_packed_static_index']);
    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);

    let index_count;
    const do_clip = true;//(state.canvas.zoom > config.clip_zoom_threshold); 

    if (do_clip) {
        context.need_index_upload = true;
    }

    if (do_clip || context.need_index_upload) {
        const before_clip = performance.now();
        index_count = bvh_clip(state, context); 
        const after_clip = performance.now();
    }

    if (!do_clip && !context.need_index_upload) {
        index_count = context.full_index_count;
    }
    
   
    document.getElementById('debug-stats').innerHTML = `
    <span>Segments onscreen: ${do_clip ? index_count : '-' }</span>
    <span>Canvas offset: (${state.canvas.offset.x}, ${state.canvas.offset.y})</span>
    <span>Canvas zoom: ${Math.round(state.canvas.zoom * 100000) / 100000}</span>`;

    if (index_count > 0) {
        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 (!do_clip) {
            // Almost everything on screen anyways. Only upload indices once
            if (context.need_index_upload) {
                context.full_index_count = index_count;
                gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, index_buffer, gl.STATIC_DRAW); 
                context.need_index_upload = false;
            }
        }

        if (static_points > 0) {
            // DEPTH PREPASS
            if (state.debug.do_prepass && do_clip) {
                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);

                if (do_clip) {
                    index_buffer.reverse();
                    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.uniform1i(locations['u_debug_mode'], state.debug.red);

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

            if (do_clip) {
                if (state.debug.do_prepass) {
                    index_buffer.reverse();
                }

                gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, index_buffer, gl.DYNAMIC_DRAW);
            }

            gl.drawElements(gl.TRIANGLES, index_count, gl.UNSIGNED_INT, 0);
        }
    }

    // Dynamic data (stroke previews that are currently in progress)
    const dynamic_points = context.dynamic_serializer.offset / config.bytes_per_point;

    if (dynamic_points > 0) {
        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.uniform1i(locations['u_debug_mode'], state.debug.red);

        gl.clear(gl.DEPTH_BUFFER_BIT);

        gl.bindBuffer(gl.ARRAY_BUFFER, buffers['b_packed_dynamic']);
        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, buffers['b_packed_dynamic_index']);

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

        const dynamic_indices = [];
        let base = 0;

        for (const player_id in state.players) {
            // player has the same data as their current stroke: points, color, width
            const player = state.players[player_id];
            if (player.points.length > 1) {
                for (let i = 0; i < player.points.length - 1; ++i) {
                    dynamic_indices.push(base + 0);
                    dynamic_indices.push(base + 1);
                    dynamic_indices.push(base + 2);
                    dynamic_indices.push(base + 3);
                    dynamic_indices.push(base + 2);
                    dynamic_indices.push(base + 1);

                    base += 4;
                }
            }
        }


        if (context.need_dynamic_upload) {
            gl.bufferData(gl.ARRAY_BUFFER, new Uint8Array(context.dynamic_serializer.buffer, 0, context.dynamic_serializer.offset), gl.DYNAMIC_DRAW);
            gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint32Array(dynamic_indices), gl.DYNAMIC_DRAW);
            context.need_dynamic_upload = false;
        }

        gl.drawElements(gl.TRIANGLES, dynamic_indices.length, gl.UNSIGNED_INT, 0);
    }


    if (state.debug.draw_bvh) {
        const points = new Float32Array(state.bvh.nodes.length * 6 * 2);

        for (let i = 0; i < state.bvh.nodes.length; ++i) {
            const box = state.bvh.nodes[i].bbox;
            
            points[i * 12 + 0] = box.x1;
            points[i * 12 + 1] = box.y1;
            points[i * 12 + 2] = box.x2;
            points[i * 12 + 3] = box.y1;
            points[i * 12 + 4] = box.x1;
            points[i * 12 + 5] = box.y2;

            points[i * 12 + 6] = box.x2;
            points[i * 12 + 7] = box.y2;
            points[i * 12 + 8] = box.x1;
            points[i * 12 + 9] = box.y2;
            points[i * 12 + 10] = box.x2;
            points[i * 12 + 11] = box.y1;
        }

        locations = context.locations['debug'];
        buffers = context.buffers['debug'];

        gl.useProgram(context.programs['debug']);
        gl.bindBuffer(gl.ARRAY_BUFFER, buffers['b_packed']);

        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.enableVertexAttribArray(locations['a_pos']);
        gl.vertexAttribPointer(locations['a_pos'], 2, gl.FLOAT, false, 8, 0);
       
        gl.clear(gl.DEPTH_BUFFER_BIT);
        gl.bufferData(gl.ARRAY_BUFFER, points, gl.STATIC_DRAW);
        gl.drawArrays(gl.TRIANGLES, 0, points.length / 2);
    }
 
    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);
                    document.querySelector('.debug-timings .gpu').innerHTML = 'Last GPU Frametime: ' + Math.round(timeElapsed / 10000) / 100 + 'ms';
                }

                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);
    // }
    //
    const cpu_after = performance.now();


    document.querySelector('.debug-timings .cpu').innerHTML = 'Last CPU Frametime: ' + Math.round((cpu_after - cpu_before) * 100) / 100 + 'ms';
}