Normal Map Generator — Image to Normal, Height, AO & Specular
Drop in a texture and get the four maps a material needs. The normal map is generated by measuring how fast brightness changes across the image and turning each pair of slopes into a surface direction, with a strength control that behaves like depth rather than like contrast. The green channel can be flipped between the OpenGL and DirectX conventions, which is the difference between bumps reading as bumps and bumps reading as dents in your engine. Everything runs on canvas in this tab.
Private by design. Your texture is read straight from disk into this browser tab and converted with canvas — it is never uploaded to a server.
How to make a normal map from an image
- Load a texture or height map. Any image works. A greyscale height map gives the cleanest result because brightness already means height; a photo works too, but its colours are being read as height whether that was intended or not.
- Set the strength. Strength scales the measured slope before it becomes an angle, so it reads as depth. Start around 4 and go up until the detail is visible at the size the texture will actually be seen — a value tuned at 100% zoom is usually far too strong in-game.
- Pick the green channel convention. OpenGL (+Y up) for Blender, Godot and Unity. DirectX (+Y down) for Unreal Engine and 3ds Max. Choose wrong and the lighting comes from the opposite side, which is the classic "my normal map is inside-out" bug.
- Export the maps you need. Normal is the one your shader wants. Height feeds displacement or parallax, AO darkens the crevices, and specular is a starting layer to paint over. Each downloads as a PNG named after your source file with a suffix.
Use Cases
Frequently Asked Questions
How does a normal map get made from a flat image?
The image is collapsed to one height value per pixel using perceptual luminance, a Sobel operator measures how fast that height changes in x and y, and the two slopes are turned into a unit vector packed into RGB. Flat areas come out as the familiar (128, 128, 255) lavender because a straight-up normal encodes to exactly that.
What is the difference between OpenGL and DirectX normal maps?
Only the green channel is inverted. OpenGL expects +Y pointing up (Blender, Godot, Unity); DirectX expects +Y pointing down (Unreal, 3ds Max, most Substance exports). Read a map with the wrong convention and every raised detail appears recessed — if your surface looks inside-out, flip the green channel before you touch anything else.
Why does my normal map look flat?
Either the strength is too low, or the source has very little tonal variation for the Sobel to find. Raising strength helps up to a point; past that you want more contrast in the height map itself, because you cannot extract detail the source does not contain.
Can it make seamless tiling normal maps?
Yes — turn on seamless edges and the Sobel wraps around the image instead of clamping at the border. That removes the visible seam a tiling material otherwise shows along its edges. The source texture still has to tile; this only stops the conversion from adding a new seam.
Is the ambient occlusion map a real AO bake?
No, and the page says so rather than implying otherwise. It is a cavity map: the height field compared against a blurred copy of itself, which darkens crevices convincingly but cannot see anything the height field does not encode. Good enough to seat a tiling material, not a substitute for baking from real geometry.
Is my texture uploaded to a server?
No. The image is read straight from disk into this tab, converted with canvas, and downloaded locally. Unreleased game art never leaves your machine, which is the whole reason to use a browser tool rather than an upload-based one.
Related tools
More free, in-browser tools from the Image Tools set — every one runs locally, with no sign-up and no upload.