Colors and Shading Languages - WebGL Game Development - page 36

• We assign the value of the aVertexColor attribute to the varying

variable vColor .

Two changes in the fragment shader are as follows:

• We create a varying variable, vColor , whose value we will receive from the

fragment shader.

• We assign the value to the predefined gl_FragColor variable.

The control code for the vertex color is as follows:

function initBuffers() {
...
...
// Array of color values, one for each vertex
var colors = [
1.0, 1.0, 1.0, 1.0, // white
1.0, 0.0, 0.0, 1.0, // red
0.0, 1.0, 0.0, 1.0, // green
0.0, 0.0, 1.0, 1.0 // blue
];
...
...
...
//New Buffer to hold colors
colorBuffer = gl.createBuffer();
//Created reference to the new buffer, made it the active buffer
for further operations
gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
//Allocated memory for the buffer and stored color values
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors),
gl.STATIC_DRAW);
}

The preceding code denotes changes to the initBuffer() function. In the earlier
initBuffer() function, we created and allocated a buffer for indices and the vertex
positions. In the new initBuffer() function, we allocated memory to store the color
data as well. Also, note that the buffer type is ARRAY_BUFFER to store color values; we
use ELEMENT_ARRAY_BUFFER to store only indices.