Normal Map Generator
Convert heightmaps into tangent-space normal maps
About this tool
Convert any heightmap or grayscale image into a tangent-space normal map right in your browser. Uses a Sobel gradient operator on the luminance channel, with adjustable strength, smoothing, and OpenGL/DirectX Y-axis conventions. Ideal for game engines, shader work, and pairs naturally with the aukimi Matter module for procedural material design. Part of aukimi Matter.
Features
- Sobel-based gradient detection on luminance
- OpenGL (Y+) and DirectX (Y-) conventions
- Adjustable strength and smoothing
- Invert X / Y channels independently
- Side-by-side heightmap and normal preview
- Images never leave your browser
Use cases
Share this tool
Help others discover it
Create a free account to remove watermarks
Save your work, access the full creative suite, and export without watermarks.
Want more power?
Try aukimi Matter
Node-based procedural texture editor for creating PBR materials with real-time 3D preview.
How to convert a heightmap to a normal map
Turn a grayscale heightmap into a tangent-space normal map using Sobel gradient detection, entirely in your browser.
- 1
Drop your heightmap anywhere on the tool
Drag a PNG/JPG onto the workspace. The image is auto-downscaled to 1024 px max edge for real-time preview.
- 2
Adjust Strength
Higher Strength deepens the surface slope — good for subtle inputs, too high for already-contrasty ones.
- 3
Add Smoothing if needed
A 1–3 px box blur removes single-pixel noise that would otherwise create speckles in the normal map.
- 4
Pick OpenGL or DirectX
Unity/Godot/Blender → OpenGL. Unreal → DirectX.
- 5
Download the PNG
The output is a standard tangent-space normal map that any PBR material slot accepts.
Frequently Asked Questions
What is the difference between a heightmap and a normal map?
A heightmap stores elevation at each pixel (single-channel grayscale). A normal map stores a 3D surface direction (X, Y, Z) encoded in the RGB channels. GPUs can compute lighting far more cheaply from a normal map than by re-integrating a heightmap every frame.
Is this OpenGL or DirectX convention?
Both. The Convention selector switches the Y axis: OpenGL (Y+) is the default, used by Unity, Godot, Blender Cycles/Eevee. DirectX (Y-) is used by Unreal Engine and older Direct3D titles. If your lighting looks inverted in Unreal, flip to DirectX.
Does the color of the source matter, or only the luminance?
Only luminance. We compute Rec. 601 luminance (0.299·R + 0.587·G + 0.114·B) then run a Sobel gradient on that single channel. Feeding a color image works, but grayscale heightmaps give the cleanest result.
How does the Sobel operator work here?
Sobel convolves two 3×3 kernels over the luminance to estimate the gradient dx/dy at each pixel. We treat that gradient as the surface slope, build the normal vector (−dx·s, −dy·s, 1), normalize, and pack into RGB as (n·0.5 + 0.5)·255. Strength scales the gradient before normalization.
Can I use this output directly in Blender / Unity / Unreal?
Yes. Drop the PNG into your material's Normal slot. In Unity and Blender keep OpenGL; in Unreal switch to DirectX (or flip Y with the "Flip Green Channel" import option).
Why does the Smoothing slider help?
Real heightmaps often have 1-pixel noise that becomes amplified by Sobel. A mild box blur (1–3 px) removes that noise without losing large-scale detail. Zero is fine for clean procedural inputs.