desk2/client/webgl.js

document.addEventListener('DOMContentLoaded', main);

const vertex_shader_source = `
    attribute vec2 a_pos;
    attribute vec3 a_triangle_color;

    uniform vec2 u_scale;
    uniform vec2 u_res;
    uniform vec2 u_translation;
    uniform int u_layer;

    varying vec3 v_triangle_color;

    void main() {
        vec2 screen01 = (a_pos * u_scale + u_translation) / u_res;
        vec2 screen02 = screen01 * 2.0;
        screen02.y = 2.0 - screen02.y;
        vec2 screen11 = screen02 - 1.0;

        v_triangle_color = a_triangle_color;

        gl_Position = vec4(screen11, u_layer, 1);
    }
`;

const fragment_shader_source = `
    precision mediump float;

    uniform vec3 u_color;

    varying vec3 v_triangle_color;

    void main() {
        gl_FragColor = vec4(v_triangle_color, 1);
    }
`;

function create_shader(gl, type, source) {
    const shader = gl.createShader(type);
    
    gl.shaderSource(shader, source);
    gl.compileShader(shader);
    
    if (gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
        return shader;
    }
     
    console.error(type, ':', gl.getShaderInfoLog(shader));

    gl.deleteShader(shader);
}

function create_program(gl, vs, fs) {
    const program = gl.createProgram();

    gl.attachShader(program, vs);
    gl.attachShader(program, fs);
    gl.linkProgram(program);

    if (gl.getProgramParameter(program, gl.LINK_STATUS)) {
        return program;
    }
    
    console.error('link:', gl.getProgramInfoLog(program));

    gl.deleteProgram(program);
}

function perpendicular(ax, ay, bx, by, width) {
    // Place points at (stroke_width / 2) distance from the line
    const dirx = bx - ax;
    const diry = by - ay;
    
    let pdirx = diry;
    let pdiry = -dirx;

    const pdir_norm = Math.sqrt(pdirx * pdirx + pdiry * pdiry);

    pdirx /= pdir_norm;
    pdiry /= pdir_norm;

    return {
        'p1': {
            'x': ax + pdirx * width / 2,
            'y': ay + pdiry * width / 2,
        },

        'p2': {
            'x': ax - pdirx * width / 2,
            'y': ay - pdiry * width / 2,
        }
    };
}

const canvas_offset = { 'x': 0, 'y': 0 };
let moving = false;
let spacedown = false;
let drawing = false;
let canvas_zoom = 5.0;
let current_stroke = [];
const bgcolor = { 'r': 0, 'g': 0, 'b': 0 };
const stroke_color = { 'r': 0.2, 'g': 0.2, 'b': 0.2 };
let debug_draw = true;

function push_circle_at(positions, c, o) {
    positions.push(c.x + o[0].x,  c.y + o[0].y,  c.x + o[4].x, c.y +  o[4].y, c.x +  o[8].x, c.y +  o[8].y);
    positions.push(c.x + o[4].x,  c.y + o[4].y,  c.x + o[0].x, c.y +  o[0].y, c.x +  o[2].x, c.y +  o[2].y);
    positions.push(c.x + o[8].x,  c.y + o[8].y,  c.x + o[4].x, c.y +  o[4].y, c.x +  o[6].x, c.y +  o[6].y);
    positions.push(c.x + o[0].x,  c.y + o[0].y,  c.x + o[8].x, c.y +  o[8].y, c.x +  o[10].x, c.y + o[10].y);
    positions.push(c.x + o[2].x,  c.y + o[2].y,  c.x + o[0].x, c.y +  o[0].y, c.x +  o[1].x, c.y +  o[1].y);
    positions.push(c.x + o[4].x,  c.y + o[4].y,  c.x + o[2].x, c.y +  o[2].y, c.x +  o[3].x, c.y +  o[3].y);
    positions.push(c.x + o[6].x,  c.y + o[6].y,  c.x + o[4].x, c.y +  o[4].y, c.x +  o[5].x, c.y +  o[5].y);
    positions.push(c.x + o[8].x,  c.y + o[8].y,  c.x + o[6].x, c.y +  o[6].y, c.x +  o[7].x, c.y +  o[7].y);
    positions.push(c.x + o[10].x, c.y + o[10].y, c.x + o[8].x, c.y +  o[8].y, c.x +  o[9].x, c.y +  o[9].y);
    positions.push(c.x + o[0].x,  c.y + o[0].y,  c.x + o[10].x, c.y + o[10].y, c.x + o[11].x, c.y + o[11].y);
}

function push_stroke_positions(stroke, stroke_width, positions) {
    const points = stroke.points;

    if (points.length < 2) {
        // TODO
        return;
    }

    // Simple 12 point circle (store offsets and reuse)
    const POINTS = 12;
    const phi_step = 2 * Math.PI / POINTS;

    const circle_offsets = [];

    for (let i = 0; i < POINTS; ++i) {
        const phi = phi_step * i;
        const ox = stroke_width / 2 * Math.cos(phi);
        const oy = stroke_width / 2 * Math.sin(phi);
        circle_offsets.push({'x': ox, 'y': oy});
    }

    for (let i = 0; i < points.length - 1; ++i) {
        const px = points[i].x;
        const py = points[i].y;

        const nextpx = points[i + 1].x;
        const nextpy = points[i + 1].y;

        const d1x = nextpx - px;
        const d1y = nextpy - py;

        // Perpendicular to (d1x, d1y), points to the LEFT
        let perp1x = -d1y;
        let perp1y = d1x;

        const perpnorm1 = Math.sqrt(perp1x * perp1x + perp1y * perp1y);

        perp1x /= perpnorm1;
        perp1y /= perpnorm1;

        const s1x = px + perp1x * stroke_width / 2;
        const s1y = py + perp1y * stroke_width / 2;
        const s2x = px - perp1x * stroke_width / 2;
        const s2y = py - perp1y * stroke_width / 2;

        const s3x = nextpx + perp1x * stroke_width / 2;
        const s3y = nextpy + perp1y * stroke_width / 2;
        const s4x = nextpx - perp1x * stroke_width / 2;
        const s4y = nextpy - perp1y * stroke_width / 2;

        positions.push(s1x, s1y, s2x, s2y, s4x, s4y);
        positions.push(s1x, s1y, s4x, s4y, s3x, s3y);

        push_circle_at(positions, points[i], circle_offsets);
    }

    push_circle_at(positions, points[points.length - 1], circle_offsets);
}

function draw(gl, program, locations, buffers, strokes) {
    const width = window.innerWidth;
    const height = window.innerHeight;

    if (gl.canvas.width !== width || gl.canvas.height !== height) {
        gl.canvas.width = width;
        gl.canvas.height = height;
        gl.viewport(0, 0, width, height);
    }

    gl.clearColor(bgcolor.r, bgcolor.g, bgcolor.b, 1);
    gl.clear(gl.COLOR_BUFFER_BIT);
    gl.useProgram(program);
    gl.enableVertexAttribArray(locations['a_pos']);
    gl.enableVertexAttribArray(locations['a_triangle_color']);

    gl.uniform2f(locations['u_res'], width, height);
    gl.uniform2f(locations['u_scale'], canvas_zoom, canvas_zoom);
    gl.uniform2f(locations['u_translation'], canvas_offset.x, canvas_offset.y);

    const positions = [];
    const colors = [];
    const stroke_width = 10;

    for (const stroke of strokes) {
        push_stroke_positions(stroke, stroke_width, positions);
    }

    if (current_stroke.length > 0) {
        push_stroke_positions({'points': current_stroke}, stroke_width, positions);
    }

    const npoints = positions.length / 2;

    for (let i = 0; i < npoints; i += 3) {
        if (!debug_draw) {
            positions.push(0, 0, 0);
            positions.push(0, 0, 0);
            positions.push(0, 0, 0);
        } else {
            let r = (i * 761257125 % 255) / 255.0;
            let g = (i * 871295862 % 255) / 255.0;
            let b = (i * 287238767 % 255) / 255.0;

            if (r < 0.3) r = 0.3;
            if (g < 0.3) g = 0.3;
            if (b < 0.3) b = 0.3;

            positions.push(r, g, b);
            positions.push(r, g, b);
            positions.push(r, g, b);
        }
    }

    const posf32 = new Float32Array(positions);
    const pointbytes = 4 * npoints * 2;

    gl.bindBuffer(gl.ARRAY_BUFFER, buffers['in']);
    gl.bufferData(gl.ARRAY_BUFFER, posf32.byteLength, gl.STATIC_DRAW);
    gl.bufferSubData(gl.ARRAY_BUFFER, 0, posf32.slice(0, npoints * 2));
    gl.bufferSubData(gl.ARRAY_BUFFER, pointbytes, posf32.slice(npoints * 2));

    {
        // Tell the attribute how to get data out of positionBuffer (ARRAY_BUFFER)
        const size = 2;          // 2 components per iteration
        const type = gl.FLOAT;   // the data is 32bit floats
        const normalize = false; // don't normalize the data
        const stride = 0;        // 0 = move forward size * sizeof(type) each iteration to get the next position
        const offset = 0;        // start at the beginning of the buffer
        gl.vertexAttribPointer(locations['a_pos'], size, type, normalize, stride, offset);
    }

    {
        // Tell the attribute how to get data out of positionBuffer (ARRAY_BUFFER)
        const size = 3;          // 3 components per iteration
        const type = gl.FLOAT;   // the data is 32bit floats
        const normalize = false; // don't normalize the data
        const stride = 0;        // 0 = move forward size * sizeof(type) each iteration to get the next position
        const offset = pointbytes;        // start at the beginning of the buffer
        gl.vertexAttribPointer(locations['a_triangle_color'], size, type, normalize, stride, offset);
    }

    {
        const offset = 0;
        const count = npoints;
        gl.uniform3f(locations['u_color'], stroke_color.r, stroke_color.g, stroke_color.b);
        gl.uniform1i(locations['u_layer'], 0);
        gl.drawArrays(gl.TRIANGLES, offset, count);
    }

    window.requestAnimationFrame(() => draw(gl, program, locations, buffers, strokes));
}

function main() {
    const canvas = document.querySelector('#c');
    const gl = canvas.getContext('webgl');

    if (!gl) {
        console.error('FUCK!')
        return;
    }

    const vertex_shader = create_shader(gl, gl.VERTEX_SHADER, vertex_shader_source);
    const fragment_shader = create_shader(gl, gl.FRAGMENT_SHADER, fragment_shader_source);
    const program = create_program(gl, vertex_shader, fragment_shader)

    const locations = {};
    const buffers = {};

    locations['a_pos'] = gl.getAttribLocation(program, 'a_pos');
    locations['a_triangle_color'] = gl.getAttribLocation(program, 'a_triangle_color');
    locations['u_res'] = gl.getUniformLocation(program, 'u_res');
    locations['u_scale'] = gl.getUniformLocation(program, 'u_scale');
    locations['u_translation'] = gl.getUniformLocation(program, 'u_translation');
    locations['u_color'] = gl.getUniformLocation(program, 'u_color');
    locations['u_layer'] = gl.getUniformLocation(program, 'u_layer');

    buffers['in'] = gl.createBuffer();

    const strokes = [
        {
            'points': [
                {'x': 100, 'y': 100},
                {'x': 105, 'y': 500},
                {'x': 108, 'y': 140},
                {'x': 508, 'y': 240},
            ]
        }
    ];

    window.addEventListener('keydown', (e) => {
        if (e.code === 'Space') {
            spacedown = true;
        } else if (e.code === 'KeyD') {
            debug_draw = !debug_draw;
            if (debug_draw) {
                stroke_color.r = 0.2;
                stroke_color.g = 0.2;
                stroke_color.b = 0.2;
                bgcolor.r = 0;
                bgcolor.g = 0;
                bgcolor.b = 0;
            } else {
                stroke_color.r = 0;
                stroke_color.g = 0;
                stroke_color.b = 0;
                bgcolor.r = 1;
                bgcolor.g = 1;
                bgcolor.b = 1;
            }
        }
    });

    window.addEventListener('keyup', (e) => {
        if (e.code === 'Space') {
            spacedown = false;
            moving = false;
        }
    });

    canvas.addEventListener('mousedown', (e) => {
        if (spacedown) {
            moving = true;
            return;
        }

        const x = cursor_x = (e.clientX - canvas_offset.x) / canvas_zoom;
        const y = cursor_y = (e.clientY - canvas_offset.y) / canvas_zoom;
        
        current_stroke.length = 0;
        current_stroke.push({'x': x, 'y': y});
        drawing = true;
    });

    canvas.addEventListener('mousemove', (e) => {
        if (moving) {
            canvas_offset.x += e.movementX;
            canvas_offset.y += e.movementY;
            return;
        }

        if (drawing) {
            const x = cursor_x = (e.clientX - canvas_offset.x) / canvas_zoom;
            const y = cursor_y = (e.clientY - canvas_offset.y) / canvas_zoom;

            current_stroke.push({'x': x, 'y': y});
        }
    });

    canvas.addEventListener('mouseup', (e) => {
        if (spacedown) {
            moving = false;
            return;
        }

        if (drawing) {
            strokes.push({'points': process_stroke(current_stroke)});
            current_stroke.length = 0;
            drawing = false;
            return;
        }
    });

    canvas.addEventListener('wheel', (e) => {
        const x = Math.round((e.clientX - canvas_offset.x) / canvas_zoom);
        const y = Math.round((e.clientY - canvas_offset.y) / canvas_zoom);

        const dz = (e.deltaY < 0 ? 0.1 : -0.1);
        const old_zoom = canvas_zoom;

        canvas_zoom *= (1.0 + dz);

        if (canvas_zoom > 100.0) {
            canvas_zoom = old_zoom;
            return;
        }

        if (canvas_zoom < 0.2) {
            canvas_zoom = old_zoom;
            return;
        }

        const zoom_offset_x = Math.round((dz * old_zoom) * x);
        const zoom_offset_y = Math.round((dz * old_zoom) * y);

        canvas_offset.x -= zoom_offset_x;
        canvas_offset.y -= zoom_offset_y;
    });

    window.requestAnimationFrame(() => draw(gl, program, locations, buffers, strokes));
}