lines_hex.html

<!-- vim: sw=4 ts=4 expandtab smartindent ft=javascript
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>WebGL Demo</title>
    <style> document, body { margin: 0px; padding: 0px; overflow: hidden; } </style>
  </head>

  <body>
    <canvas id="glcanvas"></canvas>
    <script>
const canvas = document.getElementById('glcanvas');
const gl = canvas.getContext('webgl2', {antialias: true});
if (!gl) { alert('Failed to initialize WebGL'); }

(window.onresize = () => {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    /* account for e.g. high-retina macbook screens */
    if (window.devicePixelRatio > 1) {
        canvas.style.width = `${canvas.width}px`;
        canvas.style.height = `${canvas.height}px`;
        canvas.width *= window.devicePixelRatio;
        canvas.height *= window.devicePixelRatio;
    }

    gl.viewport(
        0,
        0,
        canvas.width,
        canvas.height
    );
})();

const geo_vbuf_pos = gl.createBuffer();
const geo_vbuf_col = gl.createBuffer();
const geo_ibuf = gl.createBuffer();

let shaders = {};
/* compile shaders */
{
    const vs_geo = `
        attribute vec3 a_pos;
        attribute vec4 a_col;

        varying vec4 v_col;

        uniform vec2  u_camera_pos;
        uniform float u_camera_zoom;

        void main() {
            gl_Position = vec4(a_pos.xy*u_camera_zoom + u_camera_pos, a_pos.z, 1);
            v_col = a_col;
        }`;

    const fs_geo = `
        precision mediump float;

        varying vec4 v_col;

        void main() {
            gl_FragColor = v_col;
        }`;

    shaders.geo = {};
    {
        const program = shaders.geo.program = gl.createProgram();

        const vertexShader = gl.createShader(gl.VERTEX_SHADER);
        gl.shaderSource(vertexShader, vs_geo);
        gl.compileShader(vertexShader);
        gl.attachShader(program, vertexShader);

        const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
        gl.shaderSource(fragmentShader, fs_geo);
        gl.compileShader(fragmentShader);
        gl.attachShader(program, fragmentShader);

        gl.linkProgram(program);
    }

    shaders.geo.inputs = {
        a_col: gl.getAttribLocation(shaders.geo.program, 'a_col'),
        a_pos: gl.getAttribLocation(shaders.geo.program, 'a_pos'),
        u_camera_pos:  gl.getUniformLocation(shaders.geo.program, 'u_camera_pos'),
        u_camera_zoom: gl.getUniformLocation(shaders.geo.program, 'u_camera_zoom')
    };
}

let camera = {
    pos: { x: 0, y: 0 },
    zoom: 1
}

let input = {
    mouseDown: false,
    mouseDownX: 0,
    mouseDownY: 0,
    mouseDownCameraX: 0,
    mouseDownCameraY: 0,

    mouseWorldX: 0,
    mouseWorldY: 0,
    mouseScreenX: 0,
    mouseScreenY: 0,
    updateMouseWorld() {
        input.mouseWorldX = (input.mouseScreenX - camera.pos.x)/camera.zoom;
        input.mouseWorldY = (input.mouseScreenY - camera.pos.y)/camera.zoom;
    }
};

{
    canvas.onmousedown = e => {
        e.preventDefault();
        input.mouseScreenX = input.mouseDownX = e.offsetX;
        input.mouseScreenY = input.mouseDownY = e.offsetY;
        input.updateMouseWorld();
        input.mouseDownCameraX = camera.pos.x;
        input.mouseDownCameraY = camera.pos.y;
        input.mouseDown = true;
    };
    canvas.onmouseup = canvas.onmouseleave = e => {
        e.preventDefault();
        input.mouseDown = false;
    };
    canvas.onmousemove = e => {
        input.mouseScreenX = e.offsetX;
        input.mouseScreenY = e.offsetY;
        input.updateMouseWorld();
        if (!input.mouseDown) { return; }

        e.preventDefault();
        const deltaX = e.offsetX - input.mouseDownX;
        const deltaY = e.offsetY - input.mouseDownY;
        camera.pos.x = input.mouseDownCameraX + deltaX;
        camera.pos.y = input.mouseDownCameraY + deltaY;
        input.updateMouseWorld();
    }
    canvas.onwheel = e => {
        e.preventDefault();

        let nextZoom = camera.zoom * (1 - e.deltaY * 0.0004);
        nextZoom = Math.max(0.15, nextZoom);

        /* offset camera.x such that it stays centered around the mouse,
         * accounting for the new zoom */
        {
            const x_t = input.mouseWorldX / canvas.width;
            const  nowSizeX = canvas.width * camera.zoom;
            const nextSizeX = canvas.width * nextZoom;
            const deltaX = nextSizeX - nowSizeX;
            camera.pos.x -= deltaX * x_t;
        }

        /* ditto on the Y axis; keep the mouse as the focal point */
        {
            const y_t = input.mouseWorldY / canvas.height;
            const  nowSizeY = canvas.height * camera.zoom;
            const nextSizeY = canvas.height * nextZoom;
            const deltaY = nextSizeY - nowSizeY;
            camera.pos.y -= deltaY * y_t;
        }

        camera.zoom = nextZoom;
        input.updateMouseWorld();
    }
}

requestAnimationFrame(function frame(timestamp) {
    requestAnimationFrame(frame);

    const geo_idx = [];
    const geo_pos = [];
    const geo_col = [];

    function drawLine(x0, y0, x1, y1, thickness) {
        geo_col.push(
            255, 165, 50, 255,
            255, 165, 50, 255,
            255, 165, 50, 255,
            255, 165, 50, 255,
        );

        const ar = canvas.width / canvas.height;

        const dx = x0 - x1
        const dy = y0 - y1
        const dlen = Math.sqrt(dx*dx + dy*dy)
        const px = -dy / dlen * thickness*0.5
        const py =  dx / dlen * thickness*0.5

        const vbuf_i = geo_pos.length / 3;
        geo_pos.push(x0 + px, (y0 + py)*ar, 0.1);
        geo_pos.push(x0 - px, (y0 - py)*ar, 0.1);
        geo_pos.push(x1 + px, (y1 + py)*ar, 0.1);
        geo_pos.push(x1 - px, (y1 - py)*ar, 0.1);

        geo_idx.push(
            vbuf_i + 0, vbuf_i + 1, vbuf_i + 2,
            vbuf_i + 2, vbuf_i + 3, vbuf_i + 1
        );
    }

    function drawHex(px, py, size, thickness) {
        let vbuf_i = geo_pos.length / 3;

        const outer_radius = size + thickness * 0.5;
        const inner_radius = size - thickness * 0.5;
        for (let i = 0; i < 7; i++) {
            const x = Math.cos((i + 0) / 6 * Math.PI * 2);
            const y = Math.sin((i + 0) / 6 * Math.PI * 2);

            const ar = canvas.width / canvas.height;
            geo_pos.push(px + x * inner_radius, py + y * inner_radius * ar, 0.1);
            geo_pos.push(px + x * outer_radius, py + y * outer_radius * ar, 0.1);
            geo_col.push(
                255, 165, 50, 255,
                255, 165, 50, 255,
            );
        }

        for (let i = 0; i < 6; i++) {
            geo_idx.push(
                vbuf_i + 0, vbuf_i + 1, vbuf_i + 2,
                vbuf_i + 2, vbuf_i + 3, vbuf_i + 1
            );
            vbuf_i += 2;
        }
    }
    // drawHex(0, 0, 0.15, 0.01);
    drawLine(0.095, 0.095, 0.6, 0.41, 0.01)
    // drawHex(
    //      2*(input.mouseWorldX / canvas.width ),
    //     -2*(input.mouseWorldY / canvas.height),
    //     0.015, 0.003
    // );
    // drawHex(
    //      2*((canvas.width * 0.5) / canvas.width ),
    //     -2*((canvas.height * 0.5) / canvas.height),
    //     0.15, 0.01
    // );

    {
        /* set up premultiplied alpha */
        gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
        gl.enable(gl.BLEND);

        gl.enable(gl.DEPTH_TEST);
        gl.depthFunc(gl.LEQUAL);

        /* clear all */
        gl.clearColor(30/255, 40/255, 50/255, 255);
        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

        /* geo pass */
        {
            gl.useProgram(shaders.geo.program);
            gl.enableVertexAttribArray(shaders.geo.inputs.a_pos);
            gl.enableVertexAttribArray(shaders.geo.inputs.a_col);

            /* upload camera position */
            {
                gl.uniform2f(
                    shaders.geo.inputs.u_camera_pos,
                    0, // 2*(0 + camera.pos.x / canvas.width ) - 1,
                    0  // 2*(1 - camera.pos.y / canvas.height) - 1
                );
                gl.uniform1f(shaders.geo.inputs.u_camera_zoom, camera.zoom);
            }

            /* upload/bind geometry */
            {
                gl.bindBuffer(gl.ARRAY_BUFFER, geo_vbuf_pos);
                gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(geo_pos), gl.STATIC_DRAW);
                gl.vertexAttribPointer(shaders.geo.inputs.a_pos, 3, gl.FLOAT, false, 0, 0);

                gl.bindBuffer(gl.ARRAY_BUFFER, geo_vbuf_col);
                gl.bufferData(gl.ARRAY_BUFFER, new Uint8Array(geo_col), gl.STATIC_DRAW);
                gl.vertexAttribPointer(shaders.geo.inputs.a_col, 4, gl.UNSIGNED_BYTE, true, 0, 0);

                gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, geo_ibuf);
                gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(geo_idx), gl.STATIC_DRAW);
            }

            gl.drawElements(gl.TRIANGLES, geo_idx.length, gl.UNSIGNED_SHORT, 0);
        }
    }
})


    </script>
  </body>
</html>