desk2/client/webgl.js

document.addEventListener('DOMContentLoaded', main);

function draw(state, context) {
    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.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);

    let tex_index = 0;

    for (const key in context.textures) {
        gl.bindTexture(gl.TEXTURE_2D, context.textures[key]);
        gl.drawArrays(gl.TRIANGLES, tex_index * 6, 6);
        ++tex_index;
    }

    // Draw 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 + context.dynamic_positions.length) / 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);
}

const config = {
    ws_url: 'ws://192.168.100.2/ws/', 
    image_url: 'http://192.168.100.2/images/',
    sync_timeout: 1000,
    ws_reconnect_timeout: 2000,
    second_finger_timeout: 500,
    buffer_first_touchmoves: 5,
    debug_print: false,
    min_zoom: 0.01,
    max_zoom: 100.0,
};

function main() {
    const state = {
        'canvas': {
            'offset': { 'x': 0, 'y': 0 },
            'zoom': 1.0,
        },

        'cursor': {
            'x': 0,
            'y': 0,
        },

        'touch': {
            'moves': 0,
            'drawing': false,
            'moving': false,
            'waiting_for_second_finger': false,
            'first_finger_position': null,
            'second_finger_position': null,
            'buffered': [],
            'ids': [],
        },

        'moving': false,
        'drawing': false,
        'spacedown': false,
        
        'stroke_width': 8,

        'current_stroke': {
            'color': 0,
            'width': 8,
            'points': [],
        },

        'strokes': [],

        'tools': {
            'active': null,
            'active_element': null,
        },
    };

    const context = {
        'canvas': null,
        'gl': null,
        'programs': {},
        'buffers': {},
        'locations': {},
        'textures': {},
        'static_positions': [],
        'dynamic_positions': [],
        'quad_positions': [],
        'quad_texcoords': [],
        'static_colors': [],
        'dynamic_colors': [],
        'static_positions_f32': new Float32Array(0),
        'dynamic_positions_f32': new Float32Array(0),
        'static_colors_u8': new Uint8Array(0),
        'dynamic_colors_u8': new Uint8Array(0),
        'quad_positions_f32': new Float32Array(0),
        'quad_texcoords_f32': new Float32Array(0),
        'bgcolor': {'r': 1.0, 'g': 1.0, 'b': 1.0},
    };

    init_webgl(state, context);
    init_listeners(state, context);
    init_tools(state, context);

    window.requestAnimationFrame(() => draw(state, context));
}