Colors and Shading Languages - WebGL Game Development - page 71

gl.enableVertexAttribArray(shaderProgram.vertexNormalAttribute);
...
shaderProgram.nMatrixUniform =
gl.getUniformLocation(shaderProgram, "nMatrix");
shaderProgram.ambientColorUniform =
gl.getUniformLocation(shaderProgram, "uAmbientColor");
shaderProgram.lightingDirectionUniform =
gl.getUniformLocation(shaderProgram, "uLightingDirection");
shaderProgram.directionalColorUniform =
gl.getUniformLocation(shaderProgram, "uDirectionalColor");
shaderProgram.materialDiffuseColor =
gl.getUniformLocation(shaderProgram, "materialDiffuseColor");
shaderProgram.materialAmbientColor =
gl.getUniformLocation(shaderProgram, "materialAmbientColor");
...
}
In the preceding code, we activate another vertex buffer, aVertexNormal , to store the
normal of our vertices. We also get a reference to various uniforms, such as nMatrix ,
to hold the normal matrix and other uniform variables of light direction, material
colors, and light colors.
function initBuffers() {
...
vertexNormalBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexNormalBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(normals),
gl.STATIC_DRAW);
vertexNormalBuffer.itemSize = 3;
vertexNormalBuffer.numItems = 24;
...
}
In the initBuffers() function, we add another buffer to hold the normal data.
We calculated this data using vertices and indices of the model.
function setMatrixUniforms() {
...
var invertMatrix = mat4.create();
mat4.invert(invertMatrix, mvMatrix);
var normalMatrix = mat4.create();
mat4.transpose(normalMatrix, invertMatrix)
gl.uniformMatrix4fv(shaderProgram.nMatrixUniform, false,
normalMatrix);