Normal Map Generator

How the Normal Map Generator works

Normal map generator: detail without polygons

A normal map stores the direction a surface faces at every pixel, so a renderer can light a flat polygon as if it were covered in bumps, grooves, rivets or grain. A 2048 × 2048 map carries about 4.2 million surface directions. Modelling the same detail as geometry would take millions of triangles, and a phone or a browser tab cannot draw that at 60 frames a second. That is why almost every real-time 3D material, from game walls to product viewers on shop pages, ships with one.

The map is only a lighting trick. It changes how light falls across the surface, not its outline, so a brick wall with a normal map still has a perfectly straight edge. Where the silhouette has to change, use real geometry or displacement. The heightmap terrain preview shows the difference by displacing a mesh from the same kind of image.

Where normal maps are used

• Game engines. Unity, Godot and Blender read OpenGL-style maps with Y pointing up. Unreal Engine and CryEngine expect DirectX style with Y pointing down.
• The web. The glTF 2.0 format, used by three.js, Babylon.js and most online 3D viewers, defines its normal texture with Y up, the OpenGL convention.
• Product and architectural visualisation. Fabric weave, leather grain, brushed metal and plaster are nearly always normal maps over simple meshes.
• Photogrammetry and scanning. Detail from a dense scan is often baked into a normal map on a lighter model so it loads quickly.

What happens to your image

The tool reads each pixel's brightness with the Rec. 601 weights (0.299 red, 0.587 green, 0.114 blue), so white is high and black is low, and a colour photo is treated as its greyscale. Blur, if set, softens the image before anything is measured. A Sobel filter then measures the slope across and down at every pixel from its eight neighbours. Strength multiplies those slopes, and each result is normalised to a unit vector and packed into colour as (direction × 0.5 + 0.5) × 255.

A perfectly flat pixel therefore comes out as 128, 128, 255, the familiar lavender blue. Red rises and falls with slope across the image and green with slope up and down. Blue stays above the midpoint, because a surface never faces away from the viewer. The filter wraps around the edges, so a seamless height image gives a seamless normal map.

How to read the result

• Source is the file name, or the built-in stud sample until you drop an image.
• Size is the pixel size of the source. The downloaded map is exactly the same size, so it lines up with a colour texture of that size.
• Convention shows OpenGL (Y up) or DirectX (Y down), the only difference being that the green channel is flipped.

In the preview, the plane shows the map as a wall or floor would use it. The sphere and cube show how it reads at grazing angles, where weak maps disappear and over-strong ones look like crumpled foil. Plain grey is the clearest surface for judging relief. Height image puts the source back on as a colour map. Tiles across repeats the texture, which exposes any seam at the edges, and auto-rotate turns the shape under the light.

Expert tips and common pitfalls

• Wrong convention is the classic mistake. If bumps look like dents when lit from above, or light seems to come from below, switch the convention and download again. You can also invert the green channel in the engine.
• Tell the engine it is a normal map. In Blender set the image node to Non-Color. In Unity set the texture type to Normal map. In Unreal use the Normalmap compression setting. Treated as an ordinary colour image, the map is gamma-corrected and the lighting goes flat and wrong.
• Save and keep PNG. JPEG blocks become visible facets once they are turned into slopes. If the source is a JPEG, 0.5–2 px of blur removes most of that noise before it becomes sparkle.
• Photos lie about height. A photo of stone includes shadows and colour changes, and the tool reads darker as lower. A dark lichen patch becomes a pit, and a shadow becomes a groove. Photos taken in soft, overcast light work best. A true height or bump map, painted or baked, always gives a cleaner result.
• Start with modest strength. Values between 2 and 6 suit most materials. Fine grain such as skin pores or paper wants 1–2. Chunky stonework or tread plate can take 10 or more. Judge on the sphere, not the plane.
• Use power-of-two sizes. Engines build mipmaps most efficiently from 512, 1024, 2048 or 4096 pixel squares. Resize the height image first with the image resizer so the map matches.
• Make the height tile first. The wrap-around filter keeps a seamless source seamless, but it cannot hide a seam that is already there. A procedural source from the Perlin noise texture tool tiles by design.

Downloading

Download normal map saves the map itself as a PNG at the source size. Download PNG saves a picture of the lit preview, at up to 4K, for a portfolio or a product listing. To check the map on a real model, load a glTF file into the glTF viewer. Make the source tile first with the seamless texture maker, and generate the matching maps with the roughness and AO map generator.

Related tools