Learn Three.js - Third Edition

Achieving more detailed bumps and wrinkles with a normal map

In a normal map, the height (displacement) is not stored, but the direction of the normal for each picture is stored. Without going into too much detail, with normal maps, you can create very detailed-looking models that use only a small number of vertices and faces. For instance, take a look at the 09-normal-map.html example:

In preceding screenshot, you can see a very detailed plastered cube on the right. The light source moves around the cubes, and you can see that the texture responds to the light source. This provides a very realistic-looking model, naturally and only requires ...