WebGL HOTSHOT

Creating surfaces – depth, non-smooth, natural, and realistic with normal maps

Few things in life are smooth and reflect light predictably, such as plastic—a modern invention—and a glass-smooth lake. We know how to render such smooth meshes based on the angle between the light source at that pixel and the normal using the dot product. The dot product is calculated by multiplying the two normalized vectors (each having a length of 1 unit), N_x * L_x + N_y * L_y + N_z * L_z, where N is the vertex normal (N_x, N_y, N_z) and L is the light direction (L_x, L_y, L_z).

However, most objects in nature have a bumpy, irregular surface, for example, oranges, tree bark, or a choppy lake. Man-made objects also have rough surfaces, for example, fabric or brick walls. Early ...