pulling_buffer_lines.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
    );
})();

let shaders;
/* compile shaders */
{
    const vs_geo = `#version 300 es

        in vec2 a_instance_y;

        uniform float u_point_count;
        uniform float u_thickness;
        uniform float u_aspect_ratio;

        float x_from_index(int index) {
            return float(index) / u_point_count * 2.0 - 1.0;
        }

        void main() {
            float inv_points = 1.0 / u_point_count;

            vec2 a = vec2(
                x_from_index(gl_InstanceID  ),
                a_instance_y[0]
            );
            vec2 b = vec2(
                x_from_index(gl_InstanceID+1),
                a_instance_y[1]
            );
            vec2 delta  = b - a;
            vec2 normal = vec2(-delta.y, delta.x);
            normal.y *= u_aspect_ratio;
            normal = normalize(normal) * u_thickness * 0.5;
            normal.x /= u_aspect_ratio;
            if ((gl_VertexID % 2) == 1) normal *= -1.0;

            gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
            gl_Position.xy = ((gl_VertexID < 2) ? a : b) + normal;
        }`;

    const fs_geo = `#version 300 es
        precision mediump float;

        uniform vec4 u_color;

        out vec4 color;

        void main() {
            color = u_color;
        }`;

    function createProgram(gl, vertexSource, fragmentSource) {
        function createShader(gl, type, source) {
            const shader = gl.createShader(type);
            gl.shaderSource(shader, source);
            gl.compileShader(shader);
            if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
                throw new Error(gl.getShaderInfoLog(shader));
            }
            return shader;
        }

        const program = gl.createProgram();

        const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexSource);
        const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentSource);

        gl.attachShader(program, vertexShader);
        gl.attachShader(program, fragmentShader);

        gl.linkProgram(program);
        if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
            throw new Error(gl.getProgramInfoLog(program));
        }

        const wrapper = {program};

        const numAttributes = gl.getProgramParameter(program, gl.ACTIVE_ATTRIBUTES);
        for (let i = 0; i < numAttributes; i++) {
            const attribute = gl.getActiveAttrib(program, i);
            wrapper[attribute.name] = gl.getAttribLocation(program, attribute.name);
        }
        const numUniforms = gl.getProgramParameter(program, gl.ACTIVE_UNIFORMS);
        for (let i = 0; i < numUniforms; i++) {
            const uniform = gl.getActiveUniform(program, i);
            wrapper[uniform.name] = gl.getUniformLocation(program, uniform.name);
        }

        return wrapper;
    }


    shaders = {
        geo: createProgram(gl, vs_geo, fs_geo)
    }
}

/* generate/upload geometry */
const geo_vbuf_instance_y = gl.createBuffer();
const geo_vbuf_pos        = gl.createBuffer();
const geo_ibuf            = gl.createBuffer();

let idx_count, instance_count;
{
    const geo_idx   = [];

    instance_count = 1 << 10;
    const instance_data = new Float32Array(instance_count + 1);
    for (let i = 0; i < instance_count; i++) {
        instance_data[i] = 0.1*Math.sin((i/instance_count) * Math.PI*2 * 2);
    }

    /* generate geometry */
    geo_idx.push(0, 1, 2, 2, 1, 3);
    idx_count = geo_idx.length;

    /* upload geometry */
    {
        const BYTES_PER_FLOAT = 4;
        gl.enableVertexAttribArray(shaders.geo.a_instance_y);
        gl.bindBuffer(gl.ARRAY_BUFFER, geo_vbuf_instance_y);
        gl.bufferData(gl.ARRAY_BUFFER, instance_data, gl.STATIC_DRAW);

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

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

    {
        /* 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(0, 0, 0, 1);
        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

        /* geo pass */
        {
            gl.useProgram(shaders.geo.program);

            /* bind geometry */
            {
                gl.bindBuffer(gl.ARRAY_BUFFER, geo_vbuf_instance_y);
                gl.vertexAttribPointer(shaders.geo.a_instance_y, 2, gl.FLOAT, false, 4, 0);
                gl.vertexAttribDivisor(shaders.geo.a_instance_y, 1);

                gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, geo_ibuf);
            }

            gl. uniform1f(shaders.geo.u_point_count , instance_count);
            gl. uniform1f(shaders.geo.u_aspect_ratio, gl.canvas.clientWidth / gl.canvas.clientHeight);
            gl. uniform1f(shaders.geo.u_thickness   , 0.005);//  + 0.005*Math.sin(Date.now()/500));
            gl.uniform4fv(shaders.geo.u_color       , [0.3, 0.1, 0.9, 1.0]);

            gl.drawElementsInstanced(gl.TRIANGLES, idx_count, gl.UNSIGNED_SHORT, 0, instance_count);
        }
    }
})


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