Time for action – normal mapping in action
Open the file
ch10_NormalMap.htmlin an HTML5 browser.
Rotate the cube to see the effect that the normal map has on how the cube is lit. Also observe how the profile of the cube has not changed. Let's examine how this effect is achieved.
First, we need to add a new attribute to our vertex buffers. There are actually three vectors that are needed to calculate the tangent space coordinates that the lighting is calculated in: the normal, the tangent, and bitangent.
We already know what the normal represents, so let's look at the other two vectors. The tangent essentially represents the up (positive Y) vector for the texture relative to the polygon surface. Likewise, the bitangent represents the left (positive X) vector for the texture relative to the polygon surface.
We only need to provide two of the three vectors as vertex attributes, traditionally the normal and tangent. The third vector can be calculated as the cross-product of the other two in the...
