[SOLVED] Tutorial 4 Draw using Colours

Tutorial 4 Draw using Colours
We explore the use of colour data in this tutorial. In last tutorial, we drew a triangle of constant colour, which means the entire triangle has been drawn using a single colour. The shaders we had used look like:


The colour we used to draw the triangle was specified in the fragment shader:
gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
When different colours for the vertices are required, e.g., one vertex is red, one is green and one blue, as in this tutorial, we need to treat the colour data in the same way as the vertex coordinate data. That is, we need to set up a buffer for them, and bind the buffer to gl.ARRAY_BUFFER and link it to the vertex shader.
In this tutorial, the vertex colours are specified in a buffer called triangleVertexColorBuffer in the setupBuffers() function. In the vertex shader, an attribute aVertexColor is defined to receive the colour data from the bound buffer. The received colour data of a vertex is then assigned to a variable of varying type, vColor,
varying vec4 vColor;
The type varying is a type of OpenGL ES Shading Language that is used for variables that send values from the vertex shader to the fragment shader. Notice that vColor is also declared in the fragment shader.
From the given vertex colours of the triangle, WebGL pipeline gets the colours of the other fragments of the triangle by linearly interpolating the vertex colours.

Exercise 1: Amend last weeks program to accommodate the new features. Pay attention to the statements/functions shown in bold case.