Normal Map Generator
Convert a JPG or PNG height map into a tangent-space normal map. Adjust relief, choose OpenGL or DirectX, and download a PNG locally in your browser.
How to generate a normal map from a height map
- Choose a grayscale height map. Brighter pixels represent higher points. A photo with strong shadows can make the resulting surface appear dented.
- Adjust relief strength and select the green-channel convention used by your material. Changing the convention reverses the Y direction.
- Generate and download the PNG. In Blender, load it as Non-Color data and connect it through a Normal Map node to the shader.
Why is my normal map mostly purple?
A flat height field points straight out of the surface. In a tangent-space normal map this direction is encoded near RGB (128, 128, 255). Color changes along ridges and grooves encode slopes. The map changes surface lighting while preserving the silhouette.
Normal Map vs Bump Map vs Displacement Map
| Map | What it records | When to choose it |
|---|---|---|
| Normal | A surface direction at each pixel, encoded in red, green and blue. | Small details that should catch light as the camera moves, such as leather grain or a shallow engraving. |
| Bump | A grayscale height field from which a shader estimates slopes. | A material you want to tune directly from a height image, with control over the apparent depth. |
| Displacement | Height values used to offset points on the surface. | Relief that should break the outline or cast its own geometric shadow. The mesh or renderer must support that detail. |
OpenGL vs DirectX: Which Green Channel to Use
A tangent-space map describes a direction relative to the textured surface. Red describes tilt along one texture axis, green describes tilt along the other and blue points outward. OpenGL and DirectX normal maps use opposite signs for the green component. Choosing a convention here changes that channel in the downloaded PNG. It leaves the position of every pixel and the height pattern of the source intact.
To check the convention, choose a source with a raised horizontal stripe. Put the material on a plane and move a light above and below the stripe. Watch which edge catches the light. If that edge responds in reverse, switch the convention when generating the file, or flip green once on import. Doing both reverses the correction. A vertical feature alone is a poor test because its strongest slope may lie almost entirely along the red axis.
Using Your Normal Map in Blender, Unity and Unreal
In Blender, add an Image Texture node and load the PNG. Set its color space to Non-Color, connect Color to a Normal Map node and feed its Normal output into the Principled BSDF Normal input. Use tangent space with the UV map that places the texture on the mesh. Start with an OpenGL export. Rotate a light across the material in the preview before increasing the node strength.
In Unity, select the texture asset and set Texture Type to Normal map in the importer. Apply the change and assign the asset to the normal input of a material that supports normal mapping. Compare two identical objects with and without the map under one directional light. If relief looks reversed along one axis, check the importer’s Flip Green Channel setting before adjusting the strength.
In Unreal, start with a DirectX export and check the imported texture uses normal-map compression. Connect the texture sample to the material’s Normal input. A flat purple patch should give essentially the same shading as an unmodified surface. If the entire surface tilts to one side, check the texture import and sampling settings before making changes to the source photograph.
Prepare a reliable height image
A height field gives bright and dark pixels a physical meaning. On a photograph, those pixels might instead be paint, a reflection or a cast shadow. Imagine a black logo printed on smooth white plastic. Running the whole photograph through a height conversion would cut a groove around the lettering. Paint out the logo in your height source if the finished object should feel smooth there.
Inspect the map at the size it will occupy on screen. Increasing relief can make a fine scratch visible close up, but the same setting can make a whole wall look gritty from across a room. Save two strengths and view them on the actual mesh under moving light. Keep the unedited source so you can revise the pattern without repeatedly converting an already encoded normal map.
Frequently asked questions
Can I start with a color photograph?
Yes. The generator uses image brightness as height. A diffuse, evenly lit crop makes a better starting point than a flash photograph. Remove highlights, printed motifs and shadows that should have no depth.
What size is the exported PNG?
Choose a maximum export edge of 1,024, 2,048 or 4,096 pixels. Smaller sources keep their dimensions, and the export label gives the exact pixel size. Check fine grain in the exported file after resizing, especially if it is only one or two pixels wide.
Will it add geometry to my mesh?
The PNG changes how a material responds to light. A side view of a flat card still has a flat outline. Model large grooves or use suitable displacement when the silhouette matters.
Why is there a line at the texture boundary?
The slope calculation samples across opposite edges. If your left and right edges have very different heights, their boundary produces a steep slope. Prepare a repeating height field before you generate its normal map.
Can I process private artwork locally?
This tool reads the chosen image and creates the PNG inside your browser. Save the download before closing the page. The relief control can be changed and the same file processed again without spending a model generation.