Colors and Shading Languages - WebGL Game Development - page 42

Understanding normal transformation
The normal is often used in 3D rendering to determine a surface's orientation
towards a light source. The following diagram demonstrates the use of the normal
to calculate the angle of reflection. We have the direction of light and the surface
normal and we need to calculate the direction of the reflected light:

Vertex Normal

N

Incoming Light Ray

Reflected Light Ray

L

R

Camera

β α

γ

C

In the upcoming sections, we will discuss how normals are used in reflection/
illumination models. These models will be used to calculate color values of the
individual fragments of an object.

Like vertices, normals have to be transformed. The normals we calculated in the
preceding section are in object space. If the model is translated or rotated, we have to
transform the vertices to world space. Similarly, normals have to be transformed to
world space as well. To transform normals, we first need to find the transpose of the
inverse of the ModelView matrix with the help of the following code:

var normalMatrix = mat3.create();
mat4.toInverseMat3(mvMatrix, normalMatrix);
mat3.transpose(normalMatrix);
gl.uniformMatrix3fv(shaderProgram.nMatrixUniform, false,
normalMatrix);//Pass the normal(of the MV matrix) to the shader
as a uniform

Then, we multiply the ModelView matrix with the normals of the object in the vertex
shader using the following code:

vec3 transformedNormal = nMatrix * aVertexNormal;