WebGL 2.0. Drawing multiple triangles with random colors

by Ivan Enzhaev

HTML

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

CSS

#renderCanvas {
    border: 1px solid #aaaafa;
}

JavaScript

var vertexShaderSource =
    `#version 300 es

    in vec2 a_Position;
    in vec3 a_Color;
    out vec3 v_Color;

    void main()
    {
        gl_Position = vec4(a_Position, 0.0, 1.0);
        v_Color = a_Color;
    }`;

var fragmentShaderSource =
    `#version 300 es

    precision mediump float;

    in vec3 v_Color;
    out vec4 outColor;

    void main()
    {
        outColor = vec4(v_Color, 1.0);
    }`;

var gl = document.getElementById("renderCanvas").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);

function getColorArray(num)
{
    var arr = [];
    var r = Math.random();
    var g = Math.random();
    var b = Math.random();
    for (var i = 0; i < num; i++)
    {
        arr.push(r, g, b);
    }
    return arr;
}

var firstTriangleCoords = [0.0, 0.5, -0.5, -0.5, 0.5, -0.5];
var secondTriangleCoords = [-0.9, -0.9, -0.5, -0.9, -0.9, -0.5];
var thirdTriangleCoords = [0.9, -0.9, 0.9, -0.5, 0.5, -0.9];
var fourthTriangleCoords = [0.9, 0.9, 0.5, 0.9, 0.9, 0.5];
var fifthTriangleCoords = [-0.9, 0.9, -0.9, 0.5, -0.5, 0.9];

var firstTriangleRandomColors = getColorArray(3);
var secondTriangleRandomColors = getColorArray(3);
var thirdTriangleRandomColors = getColorArray(3);
var fourthTriangleRandomColors = getColorArray(3);
var fifthTriangleRandomColors = getColorArray(3);

var verticesAndColors = firstTriangleCoords
    .concat(secondTriangleCoords)
    .concat(thirdTriangleCoords)
    .concat(fourthTriangleCoords)
    .concat(fifthTriangleCoords)
    .concat(firstTriangleRandomColors)
    .concat(secondTriangleRandomColors)
    .concat(thirdTriangleRandomColors)
   ...