desk2/client/webgl_draw.js

function schedule_draw(state, context, animate = false) {
    if (!state.timers.raf) {
        window.requestAnimationFrame(async (ts) => {
            await draw(state, context, animate, ts);
        });
        state.timers.raf = true;
    }
}

function upload_if_needed(gl, buffer_kind, serializer) {
    if (serializer.need_gpu_allocate) {
        if (config.debug_print) console.debug('gpu allocate');
        gl.bufferData(buffer_kind, serializer.size, gl.DYNAMIC_DRAW);
        serializer.need_gpu_allocate = false;
        serializer.gpu_upload_from = 0;
    }

    if (serializer.gpu_upload_from < serializer.offset) {
        if (config.debug_print) console.debug('gpu upload');
        const upload_offset = serializer.gpu_upload_from;
        const upload_size = serializer.offset - upload_offset;
        gl.bufferSubData(buffer_kind, upload_offset, new Uint8Array(serializer.buffer, upload_offset, upload_size));
        serializer.gpu_upload_from = serializer.offset;
    }
}

function upload_square_rgba16ui_texture(gl, serializer, texture_size) {
    // TODO: only subupload what's needed

    const bpp = 2 * 4;
    const data_size = serializer.offset;
    const data_pixels = data_size / bpp; // data_size % bpp is expected to always be zero here

    const rows = Math.ceil(data_pixels / texture_size);
    const last_row = data_pixels % texture_size;
    const whole_upload = (rows - 1) * texture_size * bpp;

    // Upload whole rows
    if (rows > 1) {
        gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, texture_size, rows - 1, gl.RGBA_INTEGER, gl.UNSIGNED_SHORT, new Uint16Array(serializer.buffer, 0, whole_upload / 2));
    }

    // Upload last row
    if (last_row > 0) {        
        const last_row_upload = last_row * bpp;
        gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, rows - 1, last_row, 1, gl.RGBA_INTEGER, gl.UNSIGNED_SHORT, new Uint16Array(serializer.buffer, whole_upload, last_row_upload / 2));
    }
}

function draw_html(state) {
    // HUD-like things. Player cursors, screens
    for (const player_id in state.players) {
        if (player_id === state.me) continue;

        const player = state.players[player_id];
        let player_cursor_element = document.querySelector(`.player-cursor[data-player-id="${player_id}"]`);
        
        if (player_cursor_element === null && player.online) {
            player_cursor_element = insert_player_cursor(state, player_id);
        }

        if (!player.online && player_cursor_element !== null) {
            player_cursor_element.remove();
            const player_list_item = document.querySelector(`.player-list .player[data-player-id="${player_id}"]`);
            if (player_list_item) player_list_item.remove();
            if (document.querySelector('.player-list').childElementCount === 0) {
                document.querySelector('.player-list').classList.add('vhide');
            }
        }
    
        if (player_cursor_element && player.online) {
            const screenp = canvas_to_screen(state, player.cursor);
            player_cursor_element.style.transform = `translate(${Math.round(screenp.x)}px, ${Math.round(screenp.y)}px) rotate(-30deg)`;
        }
    }
}


async function draw(state, context, animate, ts) {
    const dt = ts - context.last_frame_ts;
    const cpu_before = performance.now();

    context.last_frame_ts = ts;

    const gl = context.gl;
    const width = window.innerWidth;
    const height = window.innerHeight;

    bvh_clip(state, context); 

    const segment_count = await geometry_write_instances(state, context);
    const dynamic_segment_count = context.dynamic_segment_count;
    const dynamic_stroke_count = context.dynamic_stroke_count;

    let query = null;

    if (context.gpu_timer_ext !== null) {
        query = gl.createQuery();
        gl.beginQuery(context.gpu_timer_ext.TIME_ELAPSED_EXT, query);
    }

    // Only clear once we have the data, this might not always be on the same frame?
    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);

    // Draw the background pattern
    if (state.background_pattern === 'dots') {
        gl.useProgram(context.programs['pattern'].dots);
        buffers = context.buffers['pattern'];
        locations = context.locations['pattern'].dots;

        gl.bindBuffer(gl.ARRAY_BUFFER, buffers['b_instance_dot']);
        gl.enableVertexAttribArray(locations['a_center']);
        gl.vertexAttribPointer(locations['a_center'], 2, gl.FLOAT, false, 2 * 4, 0);
        gl.vertexAttribDivisor(locations['a_center'], 1);

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

        const zoom = state.canvas.zoom;
        const zoom_log2 = Math.log2(zoom);
        const zoom_previous = Math.pow(2, Math.floor(zoom_log2));
        const zoom_next = Math.pow(2, Math.ceil(zoom_log2));

        // Previous level
        {
            const one_dot = new Float32Array(geometry_gen_quad(0, 0, 1 / zoom_previous));
            const dot_instances = new Float32Array(geometry_gen_fullscreen_grid(state, context, 32 / zoom_previous, 32 / zoom_previous));
            const t = Math.min(1.0, 1.0 - (zoom / zoom_previous) / 2.0);

            gl.uniform1f(locations['u_fadeout'], t);

            gl.bindBuffer(gl.ARRAY_BUFFER, buffers['b_instance_dot']);
            gl.bufferData(gl.ARRAY_BUFFER, dot_instances, gl.STREAM_DRAW);

            gl.drawArraysInstanced(gl.TRIANGLES, 0, 6, dot_instances.length / 2); 
        }

        // Next level
        if (zoom_previous != zoom_next) {
            const dot_instances = new Float32Array(geometry_gen_fullscreen_grid(state, context, 32 / zoom_next, 32 / zoom_next));
            const t = Math.min(1.0, 1.0 - (zoom_next / zoom) / 2.0);

            gl.uniform1f(locations['u_fadeout'], t);

            gl.bindBuffer(gl.ARRAY_BUFFER, buffers['b_instance_dot']);
            gl.bufferData(gl.ARRAY_BUFFER, dot_instances, gl.STREAM_DRAW);

            gl.drawArraysInstanced(gl.TRIANGLES, 0, 6, dot_instances.length / 2); 
        }
    } else if (state.background_pattern === 'grid') {
        const zoom = state.canvas.zoom;
        const zoom_log10 = Math.log10(zoom);
        const zoom_previous = Math.pow(10, Math.floor(zoom_log10));

        gl.useProgram(context.programs['pattern'].grid);
        buffers = context.buffers['pattern'];
        locations = context.locations['pattern'].grid;

        gl.bindBuffer(gl.ARRAY_BUFFER, buffers['b_instance_grid']);
        gl.enableVertexAttribArray(locations['a_data']);
        gl.vertexAttribPointer(locations['a_data'], 2, gl.FLOAT, false, 2 * 4, 0);
        gl.vertexAttribDivisor(locations['a_data'], 1);

        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.uniform1f(locations['u_fadeout'], 1.0);

        // Previous level
        {
            const grid_instances = new Float32Array(geometry_gen_fullscreen_grid_1d(state, context, 10 / zoom_previous, 10 / zoom_previous));
            const t = Math.min(1.0, (zoom / zoom_previous) / 10.0);

            gl.uniform1f(locations['u_fadeout'], t);

            gl.bindBuffer(gl.ARRAY_BUFFER, buffers['b_instance_grid']);
            gl.bufferData(gl.ARRAY_BUFFER, grid_instances, gl.STREAM_DRAW);

            gl.drawArraysInstanced(gl.TRIANGLES, 0, 6, grid_instances.length / 2); 
        }

        // Next level
        {
            const grid_instances = new Float32Array(geometry_gen_fullscreen_grid_1d(state, context, 100 / zoom_previous, 100 / zoom_previous));
            const t = Math.min(1.0, 1.0 - (zoom / zoom_previous) / 10.0);

            gl.uniform1f(locations['u_fadeout'], t);

            gl.bindBuffer(gl.ARRAY_BUFFER, buffers['b_instance_grid']);
            gl.bufferData(gl.ARRAY_BUFFER, grid_instances, gl.STREAM_DRAW);

            gl.drawArraysInstanced(gl.TRIANGLES, 0, 6, grid_instances.length / 2); 
        }
    }

    gl.clear(gl.DEPTH_BUFFER_BIT); // draw strokes above the background pattern
    gl.useProgram(context.programs['sdf'].main);
    buffers = context.buffers['sdf'];
    locations = context.locations['sdf'].main;

    // "Static" data upload
    if (segment_count > 0) {
        const total_static_size = context.instance_data_points.size * 4 +
            context.instance_data_ids.size * 4 +
            context.instance_data_pressures.size;

        gl.bindBuffer(gl.ARRAY_BUFFER, buffers['b_instance']);
        gl.bufferData(gl.ARRAY_BUFFER, total_static_size, gl.STREAM_DRAW);
        gl.bufferSubData(gl.ARRAY_BUFFER, 0, tv_data(context.instance_data_points)); 
        gl.bufferSubData(gl.ARRAY_BUFFER, context.instance_data_points.size * 4, tv_data(context.instance_data_ids));
        gl.bufferSubData(gl.ARRAY_BUFFER, context.instance_data_points.size * 4 + context.instance_data_ids.size * 4,
            tv_data(context.instance_data_pressures));
        gl.bindTexture(gl.TEXTURE_2D, context.textures['stroke_data']);
        upload_square_rgba16ui_texture(gl, context.stroke_data, config.stroke_texture_size);

        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.events.length);
        gl.uniform1i(locations['u_debug_mode'], state.debug.red);
        gl.uniform1i(locations['u_stroke_data'], 0);
        gl.uniform1i(locations['u_stroke_texture_size'], config.stroke_texture_size);

        gl.enableVertexAttribArray(locations['a_a']);
        gl.enableVertexAttribArray(locations['a_b']);
        gl.enableVertexAttribArray(locations['a_stroke_id']);
        gl.enableVertexAttribArray(locations['a_pressure']);

        // Points (a, b) and stroke ids are stored in separate cpu buffers so that points can be reused (look at stride and offset values)
        gl.vertexAttribPointer(locations['a_a'],          2, gl.FLOAT,         false, 2 * 4, 0);
        gl.vertexAttribPointer(locations['a_b'],          2, gl.FLOAT,         false, 2 * 4, 2 * 4);
        gl.vertexAttribIPointer(locations['a_stroke_id'], 1, gl.INT,                  4, context.instance_data_points.size * 4);
        gl.vertexAttribPointer(locations['a_pressure'],   2, gl.UNSIGNED_BYTE, true,  1, context.instance_data_points.size * 4 + context.instance_data_ids.size * 4);

        gl.vertexAttribDivisor(locations['a_a'], 1);
        gl.vertexAttribDivisor(locations['a_b'], 1);
        gl.vertexAttribDivisor(locations['a_stroke_id'], 1);
        gl.vertexAttribDivisor(locations['a_pressure'], 1);

        // Static draw (everything already bound)
        gl.drawArraysInstanced(gl.TRIANGLES, 0, 6, segment_count); 

        // I don't really know why I need to do this, but it
        // makes background patter drawcall work properly
        gl.vertexAttribDivisor(locations['a_a'], 0);
        gl.vertexAttribDivisor(locations['a_b'], 0);
        gl.vertexAttribDivisor(locations['a_stroke_id'], 0);
        gl.vertexAttribDivisor(locations['a_pressure'], 0);
    }
    // Dynamic strokes should be drawn above static strokes
    gl.clear(gl.DEPTH_BUFFER_BIT);

    // Dynamic draw (strokes currently being drawn)
    if (dynamic_segment_count > 0) {
        gl.uniform1i(locations['u_stroke_count'], dynamic_stroke_count);
        gl.uniform1i(locations['u_stroke_data'], 0);
        gl.uniform1i(locations['u_stroke_texture_size'], config.dynamic_stroke_texture_size);

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

        // Dynamic data upload
        const total_dynamic_size = 
            context.dynamic_instance_points.size * 4 + context.dynamic_instance_ids.size * 4 + 
            context.dynamic_instance_pressure.size;

        gl.bufferData(gl.ARRAY_BUFFER, total_dynamic_size, gl.STREAM_DRAW);
        gl.bufferSubData(gl.ARRAY_BUFFER, 0, tv_data(context.dynamic_instance_points)); 
        gl.bufferSubData(gl.ARRAY_BUFFER, context.dynamic_instance_points.size * 4, tv_data(context.dynamic_instance_ids));
        gl.bufferSubData(gl.ARRAY_BUFFER, context.dynamic_instance_points.size * 4 + context.dynamic_instance_ids.size * 4, 
            tv_data(context.dynamic_instance_pressure));
        gl.bindTexture(gl.TEXTURE_2D, context.textures['dynamic_stroke_data']);
        upload_square_rgba16ui_texture(gl, context.dynamic_stroke_data, config.dynamic_stroke_texture_size);

        gl.enableVertexAttribArray(locations['a_a']);
        gl.enableVertexAttribArray(locations['a_b']);
        gl.enableVertexAttribArray(locations['a_stroke_id']);
        gl.enableVertexAttribArray(locations['a_pressure']);

        // Points (a, b) and stroke ids are stored in separate cpu buffers so that points can be reused (look at stride and offset values)
        gl.vertexAttribPointer(locations['a_a'],          2, gl.FLOAT,         false, 2 * 4, 0);
        gl.vertexAttribPointer(locations['a_b'],          2, gl.FLOAT,         false, 2 * 4, 2 * 4);
        gl.vertexAttribIPointer(locations['a_stroke_id'], 1, gl.INT,                  4, context.dynamic_instance_points.size * 4);
        gl.vertexAttribPointer(locations['a_pressure'],   2, gl.UNSIGNED_BYTE, true,  1, context.dynamic_instance_points.size * 4 + context.dynamic_instance_ids.size * 4);

        gl.vertexAttribDivisor(locations['a_a'], 1);
        gl.vertexAttribDivisor(locations['a_b'], 1);
        gl.vertexAttribDivisor(locations['a_stroke_id'], 1);
        gl.vertexAttribDivisor(locations['a_pressure'], 1);

        gl.drawArraysInstanced(gl.TRIANGLES, 0, 6, dynamic_segment_count);

        gl.vertexAttribDivisor(locations['a_a'], 0);
        gl.vertexAttribDivisor(locations['a_b'], 0);
        gl.vertexAttribDivisor(locations['a_stroke_id'], 0);
        gl.vertexAttribDivisor(locations['a_pressure'], 0);
    }

    document.getElementById('debug-stats').innerHTML = `
    <span>Segments onscreen: ${segment_count}</span>
    <span>Canvas offset: (${Math.round(state.canvas.offset.x * 100) / 100}, ${Math.round(state.canvas.offset.y * 100) / 100})</span>
    <span>Canvas zoom level: ${state.canvas.zoom_level}</span>
    <span>Canvas zoom: ${Math.round(state.canvas.zoom * 100) / 100}</span>`;

    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 if (!available) {
                    setTimeout(next_tick, 0);
                }
            }
        }

        setTimeout(next_tick, 0);
    }

    const cpu_after = performance.now();

    state.timers.raf = false;

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

    if (state.debug.benchmark_mode) {
        const redraw = state.debug.on_benchmark();
        if (redraw) {
            schedule_draw(state, context);
        }
    }

    if (state.canvas.target_zoom != state.canvas.zoom) {
        update_canvas_zoom(state, state.canvas.zoom, state.canvas.target_zoom, animate ? dt : context.last_frame_dt);
        schedule_draw(state, context, true);
    }

    context.last_frame_dt = dt;
}

function update_canvas_zoom(state, current, target, dt) {
    const rate = Math.min(1.0, dt / 16.66 * 0.2);

    if (Math.abs(1.0 - current / target) > 0.01) {
        state.canvas.zoom = current + (target - current) * rate;
    } else {
        state.canvas.zoom = target;
    }

    // https://gist.github.com/aolo2/a373363419bd5a9283977ab9f8841f78
    const zc = state.canvas.zoom_screenp;
    state.canvas.offset.x = zc.x - (zc.x - state.canvas.offset.x) * state.canvas.zoom / current;
    state.canvas.offset.y = zc.y - (zc.y - state.canvas.offset.y) * state.canvas.zoom / current;

    update_cursor(state);
}