Beginning WebGL - HTML5 Games Most Wanted - page 145

GLSL types Description

varying Vertex shader write, fragment shader read

vec N Vector of size 1 × N

mat N Matrix of size N × N

sampler Used for textures

So the modelview and projection matrices are uniform throughout the vertex shader, while the position and
colors are vertex attributes and change.

The initBuffers method in Listing 7-8 defines the vertex position and color data of our square in buffers.

In Listing 7-8, we create a buffer by calling the WebGL method createBuffer and than bind the current
buffer with a bindBuffer call. Next we define the four vertex points of the cube as (x, y, z) coordinates in
the vertices array and set the squareVerticesBuffer data with a bufferData call. Similarly, we set the
color of each vertex in (red, green, blue, alpha) quartets (RGBA) in the colors array, and then create and
bind this data to the squareVerticesColorBuffer buffer.

Listing 7-8. Vertex Buffer Assignment
function initBuffers() {
squareVerticesBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesBuffer);

var vertices = [
1.0, 1.0, 0.0,
-1.0, 1.0, 0.0,
1.0, -1.0, 0.0,
-1.0, -1.0, 0.0
];

gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

var colors = [
1.0, 1.0, 1.0, 1.0, // white
0.05, 0.05, 0.7, 1.0, // dark blue
0.0, 1.0, 1.0, 1.0, // cyan
0.0, 0.0, 1.0, 1.0 // blue
];

squareVerticesColorBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesColorBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
}