Beginning WebGL - HTML5 Games Most Wanted - page 144

Next we pass the sources to the setupShaders function. That function then calls makeShader , which is a
helper function to create a shader, set the source, and compile it. This is done by calling the WebGL
functions createShader , shaderSource , and compileShader .

Once the individual shaders have been created, we create our shader program by calling
createShaderProgram . This function calls the WebGL method createProgram and then our function
attachShaders , which in turn calls the WebGL methods attachShader and linkProgram. Finally, we call
the WebGL method useProgram .

Next, we call the executeProgram function. In Listing 7-7, we get uniform and attribute locations from our
shader program and also enable attribute arrays. What are uniform and attributes in WebGL? Well they
are two GLSL types. The GLSL types that we are interested in for this chapter are listed in Table 7-1.

Listing 7-7. The executeProgram Function and First Two Method Calls
function executeProgram(){
getMatrixUniforms();
getVertexAttributes();

initBuffers();

drawScene();
}

function getMatrixUniforms(){
shaderProgram.pMatrixUniform = gl.getUniformLocation(shaderProgram,
"uPMatrix");
shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram,
"uMVMatrix");
}

function getVertexAttributes(){
vertexPositionAttribute = gl.getAttribLocation(shaderProgram,
"aVertexPosition");
gl.enableVertexAttribArray(vertexPositionAttribute);

vertexColorAttribute = gl.getAttribLocation(shaderProgram,
"aVertexColor");
gl.enableVertexAttribArray(vertexColorAttribute);
}

Table 7-1. GLSL types and descriptions

GLSL types Description

const Constant throughout the program

uniform Constant value across an entire primitive

attribute Vertex shader per vertex information