Normal Map Generator

A normal map stores, for every pixel of a texture, which way its surface faces. Game engines and 3D programs use it to light flat polygons as if they had bumps, grooves and scratches. This generator reads a height map — or a photo whose brightness stands in for height — measures the slope at each pixel and writes a tangent-space normal map in the OpenGL or DirectX convention, with optional seamless edges for tiling textures. It runs in your browser.

How to use this tool

1. Choose a height map (white = high) or a texture photo.
2. Pick where the height comes from, and invert it if dark areas should stick out.
3. Set smoothing, the edge filter and the strength; tick seamless edges for tiling textures.
4. Choose the green-channel convention of your engine and download the normal map.

Formula

n = normalize(−s × ∂h/∂x, ±s × ∂h/∂y, 1); RGB = (n + 1) ÷ 2 × 255

h is the height from 0 to 1 and s the strength. The slopes come from a Sobel (1, 2, 1) ÷ 8 or Scharr (3, 10, 3) ÷ 32 filter, or a central difference ÷ 2. Image rows run downwards, so the OpenGL (Y+ up) convention uses +∂h/∂y and DirectX (Y− down) uses −∂h/∂y. Smoothing is a Gaussian blur with σ = radius ÷ 2. With seamless edges, the filters wrap around the borders so the map tiles without a seam.

Example

On a flat area the slope is 0, so n = (0, 0, 1) and the colour is (128, 128, 255) — the familiar light blue. Where the height rises by 0.38 across one pixel, Sobel gives a slope of 0.19; at strength 2 that is 0.38, so n = (−0.38, 0, 1) ÷ 1.07 and the red channel drops to 82.