Normal Mapping: Principles, Tangent Space, and Applications Explained

What is a Normal Map

A normal map is a texture map used to simulate high-detail surface lighting on low-polygon models. It stores normal direction information per pixel, perturbing the surface normal during shading to alter lighting calculations, making surfaces appear to have rich bump details like wrinkles, scratches, brick gaps, etc. Normal maps are widely used in games, film, and real-time rendering to achieve high visual complexity at low cost.

Principles of Normal Mapping

In 3D rendering, lighting calculations rely on surface normals (vectors perpendicular to the surface). Traditionally, adding detail requires increasing polygon count, but normal maps offer a more efficient method.

Normal maps encode the normal direction of each pixel as a color value. Typically, RGB channels correspond to the X, Y, Z components of the normal vector. By default, the normal (0,0,1) (pointing outward) is encoded as color (128,128,255) (light blue). When the normal deviates, the color changes accordingly. In shaders, the sampled normal map provides the perturbed normal used for lighting, creating the visual effect of surface bumps.

Tangent Space

Normal maps are usually stored in tangent space. Tangent space is a local coordinate system defined by three orthogonal vectors: Tangent, Bitangent, and Normal. The Normal is the original surface normal, the Tangent typically follows the texture U direction, and the Bitangent follows the V direction.

The benefit of tangent space is that normal maps can be applied to surfaces with different orientations and even deforming meshes (like character animations). The normal directions in the map are relative to the surface local coordinates, so the map remains valid when the model rotates or deforms. In shaders, light and view vectors must be transformed from world space to tangent space, or tangent-space normals transformed to world space, for lighting calculations.

Generating and Using Normal Maps

Normal maps can be baked from high-poly to low-poly models, converted from grayscale height maps, or painted directly with tools.

• **Baking Normal Maps**: Use 3D software (like Blender, Substance Painter, xNormal) to project high-resolution model details onto the low-resolution model's UV space, generating a normal map. This is the most common method in game development.
• **Generating from Height Maps**: A height map is a grayscale image where white indicates raised and black indicates recessed areas. By computing height differences between neighboring pixels, normal perturbations are derived to create a normal map.
• **Direct Painting**: In software supporting normal map painting (e.g., Substance Painter, Photoshop plugins), artists can manually paint normal details.

In game engines (like Unity, Unreal), after importing the normal map, assign it as the material's Normal Map property. The shader automatically handles tangent space transformation and lighting.

Common Issues and Considerations

• **Normal Map Colors**: Normal maps typically appear blue-purple because most normals are close to (0,0,1), encoded as (128,128,255). If colors are abnormal (e.g., all red or green), it may indicate a map error or coordinate system mismatch.
• **Tangent Space vs. Object Space**: Normal maps come in tangent space and object space. Tangent space is more flexible, supporting deformation and reuse; object space normal maps store world-space normals and do not support deformation but may have more precise details. Modern engines mostly use tangent space.
• **UV Layout**: Normal maps depend on UV coordinates, so UV unwrapping must avoid overlaps and excessive stretching to prevent artifacts.
• **Compression Formats**: Normal maps require special handling in texture compression, such as using DXT5nm format, keeping only X and Y components, and reconstructing Z in the shader to reduce storage and bandwidth.
• **Performance Impact**: Normal maps increase texture sampling and computation, but compared to adding geometry, the performance cost is relatively low. On mobile platforms, the use of normal maps should be balanced.

FAQ

What is the difference between normal maps and bump maps?

Bump maps typically refer to height maps that store surface height information, and the shader computes normal perturbations by gradients. Normal maps directly store normal directions, offering more precise results and higher computational efficiency.

Why are normal maps blue?

Because the default normal (0,0,1) is encoded as RGB(128,128,255), which is light blue. Most surface normals are close to the default, so the overall map appears blue.

What are the advantages of tangent-space normal maps?

Tangent-space normal maps can be applied to surfaces with different orientations, support deformation and animation, and allow texture reuse.

How to bake normal maps from a high-poly model?

In 3D software, align the high-poly and low-poly models, set baking parameters, and the software computes the normal perturbations of high-poly details in the low-poly UV space to generate the map.

How to optimize normal maps on mobile?

Use compressed texture formats like ASTC or ETC2, consider reducing resolution, and use normal maps only on important surfaces to balance quality and performance.