Real-Time 3D Graphics with WebGL 2 - Second Edition

Time for Action: Normal Mapping in Action

Let's cover an example showcasing normal mapping in action:

1. Open the ch10_03_normal-map.html file in a browser:

2. Rotate the cube to see the effect that the normal map has on the lit cube. Keep in mind that the profile of the cube has not changed. Let's examine how this effect is achieved.
3. First, we need to add a new attribute to our vertex buffers. There are three vectors needed to calculate the tangent space coordinates for lighting: the normal, the tangent, and the bitangent:

4. We have already covered ...