Simple 2d WebGL sample

by Julien Etienne

HTML

<script src="https://webglfundamentals.org/webgl/resources/webgl-utils.js"></script>
<script id="2d-vertex-shader" type="x-shader/x-vertex">
attribute vec2 a_position;
uniform vec2 u_offset;
uniform vec2 u_mult;
void main() {
    gl_Position = vec4(a_position * u_mult + u_offset, 0, 1);
}
</script>
<script id="2d-fragment-shader" type="x-shader/x-fragment">
precision mediump float;
uniform vec4 u_color;
void main() {
    gl_FragColor = u_color;  
}
</script>
<canvas id="canvas" width="400" height="300"></canvas>

CSS

canvas {
    border: 1px solid black;
}

JavaScript

main();
function main() {
    var canvas = document.getElementById("canvas");
    var gl = canvas.getContext('webgl');
    if (!gl) {
        alert("no WebGL");
        return;
    }
    
    program = webglUtils.createProgramFromScripts(gl, ["2d-vertex-shader", "2d-fragment-shader"]);
    gl.useProgram(program);
    
    var positionLocation = gl.getAttribLocation(program, "a_position");
    var offsetLocation = gl.getUniformLocation(program, "u_offset");
    var multLocation = gl.getUniformLocation(program, "u_mult");
    var colorLocation = gl.getUniformLocation(program, "u_color");

    var buffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
         -1, -1, 1, -1, -1, 1,
         -1,  1, 1, -1,  1, 1]), gl.STATIC_DRAW);
    gl.enableVertexAttribArray(positionLocation);
    gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
    
    var count = 0;
    function render() {
        ++count;
                    
        gl.uniform2f(offsetLocation, Math.sin(count * 0.3), Math.cos(count * 0.1));
        gl.uniform2f(multLocation, 0.1, 0.1);
        gl.uniform4f(colorLocation, Math.random(), Math.random(), Math.random(), 1);
        
        gl.drawArrays(gl.TRIANGLES, 0, 6);
        
        requestAnimationFrame(render, canvas);
    }
    render();
}