Normal Mapping: Faking Surface Detail With a Texture

The Core Idea and Its One Invariant

Lighting a surface reduces, at each shaded point, to a dot product: how aligned is the surface normal N with the direction to the light L? Lambert's cosine law gives diffuse intensity as max(0, N·L). If N is constant across a flat triangle, the triangle shades uniformly and looks flat. Normal mapping replaces that single geometric normal with a per-pixel normal fetched from a texture, so N·L varies texel-by-texel and the flat triangle appears to have relief.

The stored texture is a normal map: each RGB texel encodes a unit vector, not a color. The mapping is n = 2·(rgb) − 1, unpacking [0,1] channels back to [−1,1] components. Because most detail bulges toward the viewer, the dominant encoded direction is +Z ≈ (0,0,1), which packs to RGB (0.5, 0.5, 1.0) — the characteristic lavender-blue of a normal map.

The load-bearing invariant: the sampled normal and the light vector must live in the same coordinate space before you dot them. The map stores normals in tangent space (relative to the surface), so you either lift the normal into world space or push the light down into tangent space — but you must do exactly one of them, consistently, for every fragment.

Tangent Space and the TBN Matrix

A normal map is authored in tangent space: a local frame glued to the surface with basis vectors T (tangent, aligned with the U texture axis), B (bitangent, aligned with V), and N (the interpolated geometric normal). Storing detail relative to this frame is what makes a map reusable — the same brick tile works on a wall, a curved column, or an animated character, because the frame rotates with the geometry.

The change-of-basis is the TBN matrix, the 3×3 whose columns are T, B, N. It maps a tangent-space vector into world space; its transpose (an orthonormal matrix's inverse is its transpose) maps world→tangent. T is derived per-triangle from the UVs by solving the edge equations:

// Given edges E1,E2 and UV deltas (Δu1,Δv1),(Δu2,Δv2)
r = 1 / (Δu1·Δv2 − Δu2·Δv1)
T = r · (Δv2·E1 − Δv1·E2)
B = r · (Δu1·E2 − Δu2·E1)

Vertex tangents are accumulated across adjacent triangles and averaged, then Gram–Schmidt orthonormalized against N: T ← normalize(T − (N·T)·N). A fourth value, the sign w = ±1 of (N×T)·B, is stored per vertex so the bitangent can be reconstructed as B = w·(N×T) — this handles mirrored UVs, where the handedness flips.

The Algorithm, Step by Step

Two implementation strategies exist; the choice is a classic vertex-vs-fragment workload trade-off.

• Light-to-tangent (cheaper). In the vertex shader, transform L (and the view vector V) into tangent space using TBNᵀ, then interpolate them across the triangle. The fragment shader samples the map and dots directly. Fewer per-fragment ops; the transform amortizes over the (usually fewer) vertices.
• Normal-to-world (more common in PBR). Pass T, B, N to the fragment shader, rebuild the TBN there, and lift the sampled normal to world space. Slightly costlier per fragment but composes cleanly with world-space lighting, environment reflections, and deferred shading.

The fragment core in the world-space variant:

vec3 n = texture(normalMap, uv).rgb;   // [0,1]
n = normalize(n * 2.0 - 1.0);           // → [-1,1]
mat3 TBN = mat3(normalize(T),
                normalize(B),
                normalize(N));
vec3 Nw = normalize(TBN * n);           // world space
float diff = max(dot(Nw, Lw), 0.0);

Because the interpolated T, B, N drift from orthonormal across a large triangle, re-normalizing (and optionally re-orthogonalizing) in the fragment shader is standard defensive practice.

Complexity: Why It's Effectively Free

Time, per fragment: Θ(1). One texture fetch (a bilinear/trilinear sample, hardware-accelerated and cache-friendly), one scale-and-bias, and one 3×3 matrix–vector product (9 multiplies, 6 adds) plus a normalize. There are no loops and no data dependencies across fragments, so the whole pass is embarrassingly parallel across the GPU's shading cores.

Time, per frame: Θ(F) where F is the number of shaded fragments (pixels × overdraw × lights). Crucially this is decoupled from geometric complexity: F does not grow with the visual detail the map implies. That is the entire economic argument — a 10-million-triangle sculpt is baked once (an offline O(m log m)-ish ray-cast from high-poly to low-poly) into a texture, after which runtime cost tracks the low-poly mesh, not the sculpt.

Space: Θ(w·h) for the texture. Tangent-space maps compress well: with the +Z bulge assumption you can store only the X and Y channels (BC5/3Dc two-channel format) and reconstruct z = √(1 − x² − y²), halving storage. Per-vertex tangents add Θ(V) — typically one vec4 (T.xyz plus the handedness sign) per vertex.

Contrast with brute-force geometry, where matching the same detail needs Θ(m) triangles through the entire vertex-transform, clipping, and rasterization pipeline — orders of magnitude more work and memory bandwidth for the same lit appearance on flat-ish surfaces.

Where It Wins, Where It Loses

Normal mapping is the right tool when detail is high-frequency and shallow relative to viewing distance, and the silhouette can stay flat: pores, fabric weave, brick mortar, scratches, panel seams, bark. It composes with every downstream lighting model — Phong, Blinn–Phong, Cook–Torrance PBR — because it only changes the input N.

• Wins vs. adding geometry: constant per-fragment cost, tiny memory, and the same map tiles/reuses across many meshes.
• Wins vs. bump mapping: stores the full vector directly instead of a heightfield you must differentiate, so it captures asymmetric and steeply-tilted detail and needs no derivative in the shader.
• Loses when depth matters: the surface is still geometrically flat. At grazing angles the illusion collapses — bumps don't occlude each other, don't cast contact shadows, and the outline is a straight edge. Parallax occlusion mapping or real tessellation/displacement is required for depth and silhouette.
• Loses on hard edges: a normal map cannot invent a crease the low-poly mesh doesn't have; it can only reshade within the existing surface.

Real Systems and the Baking Pipeline

Every major engine implements it: Unreal Engine (its material graph exposes a Normal pin feeding the deferred G-buffer), Unity (unpacks DXT5nm/BC5 maps via UnpackNormal), Godot, Frostbite, CryEngine, and every WebGL/WebGPU stack including three.js (normalMap on MeshStandardMaterial). The historical inflection was DOOM 3, which shipped tangent-space normal mapping as a load-bearing feature and forced the pipeline into the mainstream.

The content pipeline is the other half of the technique. Artists sculpt a high-poly mesh in ZBrush/Blender/Mudbox, retopologize a low-poly game mesh, then bake: for each low-poly texel, cast a ray along the low-poly normal, hit the high-poly surface, and record that hit's normal — transformed into the texel's tangent frame. Tools like Substance 3D (Designer/Painter), xNormal, Marmoset Toolbag, and Blender's bake do this. A companion ambient occlusion and curvature bake usually rides along.

In deferred renderers, the world-space normal is written into the G-buffer during the geometry pass and consumed later during lighting, cleanly decoupling normal mapping from the number of lights. This is why the normal-to-world variant dominates modern PBR pipelines.

Pitfalls, Edge Cases, and Variants

Normal mapping is a minefield of coordinate-convention bugs. The failure modes are specific and recur:

• Green-channel (Y) flip. DirectX and OpenGL disagree on whether +V points up or down, so the Y/green channel is inverted between them. A map baked for one lights concave-for-convex in the other — grooves pop out as ridges. Fix by negating n.y or re-exporting.
• Handedness on mirrored UVs. Skip the stored sign w and mirrored parts of the mesh (e.g. a symmetric face) light inverted. The B = w·(N×T) reconstruction is mandatory.
• Non-orthonormal interpolation. Interpolated TBN vectors are neither unit-length nor orthogonal; failing to re-normalize causes energy loss and dark seams. Use MikkTSpace, the de-facto standard tangent basis, so the baker and the shader agree exactly — mismatched tangent bases produce subtle, maddening lighting errors.
• Mip-level normal aliasing. Naive mipmapping averages the vectors and shortens them, over-smoothing specular. Toksvig factors and LEAN/CLEAN mapping fold the lost variance into a widened roughness, preserving the glinty look at distance.

Variants: object-space normal maps store world-relative normals (rainbow-colored, no per-vertex tangents needed, but not reusable and awkward to animate); bump/height maps store scalar displacement and derive the normal; detail normal maps blend a tiled high-frequency map over a base using reoriented normal blending (RNM) to add pore-level micro-detail without extra texels.

Surface-detail techniques compared: cost, what they fake, and where they fail

Technique	Per-fragment cost	Fakes	Silhouette / occlusion
Bump mapping (Blinn 1978)	O(1), derivative sample	Perturbed normal from heightfield	No — flat
Normal mapping	O(1), one texel + TBN mul	Full normal vector directly	No — flat
Parallax mapping	O(1) single step	Normal + UV shift for depth	Weak, breaks at grazing
Parallax occlusion	O(k) ray-march, k≈8–64	Normal + depth + self-occlusion	Partial, still no silhouette
Real geometry / tessellation	O(triangles)	Actual displaced surface	Yes — true silhouette