Height & Bump to Normal Map Converter
Convert grayscale height or bump data into a tangent-space normal map with explicit slope and Y-orientation controls.
Height or bump source to Converted normal map
Convert a grayscale height or bump image into an OpenGL or DirectX tangent-space normal map, preview the result, and download a PNG locally.
Privacy: image decoding, pixel processing, preview, and PNG download run locally in the browser.
How do you convert a height map to a normal map?
Height-to-normal conversion calculates the change in neighboring grayscale values. Horizontal change becomes the tangent-space X component, vertical change becomes Y, and Z points away from the surface. The three components are normalized and encoded into RGB. This route converts height and bump sources; use Normal Map Fixer to flip or repair an existing normal map.
- Expected input
- Grayscale height or bump
- Output
- Normalized tangent vectors
- Orientation
- OpenGL Y+ or DirectX Y-
- Existing normal fixes
- Use Normal Map Fixer
How to use the Height to Normal Map Converter
Use height, not lighting
White should represent one elevation direction and black the other. Remove cast shadows or color variation that does not describe relief.
Control the derivative
Strength sets slope response. Blur and detail decide how much small grayscale variation becomes surface direction.
Match the renderer
Choose the green-channel convention required by the final engine or interchange format.
Check the final mesh
Test the converted map with the shipping UVs, tangents, compression, and lighting before approving it.
Height conversion and normal repair are different jobs
Choose the route by the data already stored in the file.
| Input you have | Correct operation | Use this page |
|---|---|---|
| Grayscale height map | Calculate X/Y gradients and encode tangent normals. | Yes |
| Legacy bump map | Treat brightness as relative elevation, then calculate tangent normals. | Yes |
| Existing purple-blue normal map | Flip green or normalize the vectors without deriving new relief. | Use Normal Map Fixer |
| Object-space normal map | Convert with mesh-aware tangent-basis data. | No; this browser tool targets tangent space |
Height to Normal Map Converter FAQ
Is a bump map the same as a normal map?
No. A bump or height map stores one scalar value per pixel. A tangent-space normal map stores a three-component direction in RGB.
Does white mean raised or recessed?
This converter treats brighter source values as higher relative elevation before applying the selected orientation. If the source uses the opposite height convention, invert it before conversion.
Can this page convert DirectX normals to OpenGL?
Use Normal Map Fixer for an existing normal map. That operation inverts the green component and can normalize invalid vectors without rebuilding them from grayscale.
Does conversion change the source dimensions?
No. Preview processing is reduced for speed, while the downloaded PNG is generated at the source image dimensions.