WebGL 2.0. Rotation animation

by Ivan Enzhaev

HTML

<canvas id="renderCanvas" width="250" height="250"></canvas>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.4.0/gl-matrix-min.js"></script>

CSS

#renderCanvas {
    border: 5px solid #a8bdc4;
}

JavaScript

var vertexShaderSource =
    `#version 300 es

    in vec2 a_Position;
    uniform mat4 u_ModelMatrix;

    void main()
    {
        gl_Position = u_ModelMatrix * vec4(a_Position, 0.0, 1.0);
    }`;

var fragmentShaderSource =
    `#version 300 es
    
    precision mediump float;
    uniform vec3 u_Color;
    out vec4 fragColor;

    void main()
    {
        fragColor = vec4(u_Color, 1.0);
    }`;

var canvas = document.getElementById("renderCanvas");
var gl = canvas.getContext("webgl2");

var vShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vShader, vertexShaderSource);
gl.compileShader(vShader);

var fShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fShader, fragmentShaderSource);
gl.compileShader(fShader);

var program = gl.createProgram();
gl.attachShader(program, vShader);
gl.attachShader(program, fShader);
gl.linkProgram(program);
gl.useProgram(program);

var vertices = new Float32Array([
    -0.5, 0.5, -0.5, -0.5, 0.5, 0.5, 0.5, -0.5
]);

var vbo = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

var a_Position = gl.getAttribLocation(program, "a_Position");
gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(a_Position);

var u_Color = gl.getUniformLocation(program, "u_Color");
gl.uniform3f(u_Color, 0.207, 0.635, 0.125);

var u_ModelMatrix = gl.getUniformLocation(program, "u_ModelMatrix");

gl.clearColor(0.894, 0.976, 0.886, 1.0);

var ANGLE_STEP = 45.0; // Rotation angle (degrees/second)
var g_last = Date.now();

var currentAngle = 0.0;
var modelMatrix = mat4.create();

var tick = function ()
{
    currentAngle = animate(currentAngle);  // Update the rotation angle
    draw(4, currentAngle, modelMatrix, u_ModelMatrix);   // Draw the triangle
    requestAnimationFrame(tick, canvas); // Request that the browser calls tick
};
tick();

function draw(n, currentAngle, modelMatrix, u_ModelMatrix)
{
    mat4.identity(modelMatrix);
   ...