WebGL 1.0. Drawing lines with different colors

by Ivan Enzhaev

HTML

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

CSS

#renderCanvas {
    border: 5px solid #9dbdda;
}

JavaScript

var vertexShaderSource =
    `
    attribute vec2 a_Position;
    attribute vec3 a_Color;
    varying vec3 v_Color;

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

var fragmentShaderSource =
    `
    precision mediump float;
    varying vec3 v_Color;

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

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

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 verticesAndColors = new Float32Array([
    // First line
    -0.9, 0.0,              // Coordinate
    0.850, 0.109, 0.184,    // Color
    0.9, 0.0,               // Coordinate
    0.850, 0.109, 0.184,    // Color
    // Second line
    0.0, 0.9,               // Coordinate
    0.298, 0.850, 0.109,    // Color
    0.0, -0.9,              // Coordinate
    0.298, 0.850, 0.109     // Color
]);

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

var FSIZE = verticesAndColors.BYTES_PER_ELEMENT;

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

var a_Color = gl.getAttribLocation(program, "a_Color");
gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, 5 * FSIZE, 2 * FSIZE);
gl.enableVertexAttribArray(a_Color);

gl.clearColor(0.968, 0.968, 0.972, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);

gl.drawArrays(gl.LINES, 0, 4);