Как нарисовать два состыкованных треугольника?

window.onload = main;
 
function main()
{
    // Retrieve <canvas> element
    var canvas = document.getElementById("webgl");
    if (canvas == null)
    {
        console.log("Failed to retrieve the canvas element");
        return;
    }
 
    // Get the rendering context for WebGL
    var gl = getWebGLContext(canvas);
    if (gl == null)
    {
        console.log("Failed to get the rendering context for WebGL");
        return;
    }
 
    // Get shaders
    var vShaderElement = document.getElementById("VertexShader");
    var fShaderElement = document.getElementById("FragmentShader");
    if (vShaderElement == null || fShaderElement == null)
    {
        console.log("Failed to get the vShaderElement or fShaderElement");
        return;
    }
    var vShaserSource = vShaderElement.firstChild.textContent;
    var fShaserSource = fShaderElement.firstChild.textContent;
 
    // Initialize shaders
    if (!initShaders(gl, vShaserSource, fShaserSource))
    {
        console.log("Failed to initialize the shaders");
        return;
    }
 
    // Write the positions of vertices to a vertex shader
    var n = initVertexBuffer(gl);
    if (n < 0)
    {
        console.log("Failed to initialize the vertex buffer");
        return;
    }
 
    // Specify the color for clearing <canvas>
    gl.clearColor(0.95, 0.95, 0.95, 1.0);
 
    // Clear <canvas>
    gl.clear(gl.COLOR_BUFFER_BIT);
 
    // Draw the blue triangle
    gl.drawArrays(gl.TRIANGLES, 0, 3);
 
    // Draw the red triangle
    gl.drawArrays(gl.TRIANGLES, 3, 3);
}
 
function initVertexBuffer(gl)
{
    var vertices = new Float32Array([
        -1, 1, 0, 0, 1,
        -1, 0, 0, 0, 1,
        0, 0, 0, 0, 1,
        -1, 1, 1, 0, 0,
        0, 0, 1, 0, 0,
        0, 1, 1, 0, 0,
    ]);
    var n = 6; // The number of vertices
 
    // Create a buffer object
    var vertexBuffer = new gl.createBuffer();
    if (vertexBuffer == null)
    {
        console.log("Failed to get the buffer object");
        return -1;
    }
 
    // Bind the buffer object to target
    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
    // Write date into the buffer object
    gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
 
    var FSIZE = vertices.BYTES_PER_ELEMENT;
 
    // Get the storage location of a_Color, assign buffer and enable
    var a_Position = gl.getAttribLocation(gl.program, "a_Position");
    if (a_Position < 0)
    {
        console.log("Failed to get the storage location of a_Position");
        return;
    }
    gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, FSIZE * 5, 0);
    gl.enableVertexAttribArray(a_Position);
 
    // Get the storage location of a_Color, assign buffer and enable
    var a_Color = gl.getAttribLocation(gl.program, 'a_Color');
    if (a_Color < 0)
    {
        console.log('Failed to get the storage location of a_Color');
        return -1;
    }
    gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, FSIZE * 5, FSIZE * 2);
    gl.enableVertexAttribArray(a_Color);  // Enable the assignment of the buffer object
 
    return n;
}