march-attacks-presentation/index.html at master · knutae/march-attacks-presentation · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<html>
    <body>
        <div>
            <canvas id="canvas" width="640" height="480"/>
        </div>
        <div id="error" style="color: brown"></div>
    </body>
    <script>
        const canvas = document.querySelector("#canvas");
        const gl = canvas.getContext("webgl");
        const error = document.querySelector("#error");

        const createShader = (source, type) => {
            const shader = gl.createShader(type);
            gl.shaderSource(shader, source);
            gl.compileShader(shader);
            if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
                throw gl.getShaderInfoLog(shader);
            }
            return shader;
        };

        const screenQuad = () => {
            const vertexPosBuffer = gl.createBuffer();
            gl.bindBuffer(gl.ARRAY_BUFFER, vertexPosBuffer);
            const vertices = [-1, -1, 1, -1, -1, 1, 1, 1];
            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
            vertexPosBuffer.itemSize = 2;
            vertexPosBuffer.numItems = 4;
            return vertexPosBuffer;
        }

        Promise.all([
            fetch('vshader.glsl')
                .then(response => response.text())
                .then(s => createShader(s, gl.VERTEX_SHADER)),
            fetch('fshader.glsl')
                .then(response => response.text())
                .then(s => createShader(s, gl.FRAGMENT_SHADER)),
        ]).then(values => {
            const vshader = values[0];
            const fshader = values[1];
            const program = gl.createProgram();
            gl.attachShader(program, vshader);
            gl.attachShader(program, fshader);
            gl.linkProgram(program);
            if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
                throw gl.getProgramInfoLog(program);
            }
            gl.useProgram(program);
            const vertexPosBuffer = screenQuad();
            program.vertexPosAttrib = gl.getAttribLocation(program, 'aVertexPosition');
            program.offsetUniform = gl.getUniformLocation(program, 'uOffset');
            program.aspectUniform = gl.getUniformLocation(program, 'uAspect');
            program.timeUniform = gl.getUniformLocation(program, 'uTime');
            gl.enableVertexAttribArray(program.vertexPosAttrib);
            gl.vertexAttribPointer(program.vertexPosAttrib, vertexPosBuffer.itemSize, gl.FLOAT, false, 0, 0);
            const offset = [1, 1];
            gl.uniform2f(program.offsetUniform, offset[0], offset[1]);
            gl.uniform1f(program.aspectUniform, 640/480);
            const startTime = new Date().getTime();
            const animate = () => {
                const relTime = (new Date().getTime() - startTime) * 0.001;
                gl.uniform1f(program.timeUniform, relTime);
                gl.drawArrays(gl.TRIANGLE_STRIP, 0, vertexPosBuffer.numItems);
                requestAnimationFrame(animate);
            }
            animate();
        }).catch(e => error.textContent = e);
    </script>
</html>