Normal map generator
Turn any image or heightmap into a full PBR set — normal, height, ambient-occlusion and roughness — with a live 3D preview under studio lighting. Free, private, and nothing is uploaded.
Capabilities
What it generates
- Generate a tangent-space normal map from any photo, texture or grayscale heightmap using a Scharr/Sobel gradient.
- Also outputs height/displacement, ambient-occlusion (cavity) and an estimated roughness map — a full PBR set from one image.
- Live studio-lit 3D preview on a sphere: normal, roughness, AO and displacement all react to light so you can tune before exporting.
- OpenGL (+Y) or DirectX (−Y) green-channel convention, adjustable strength and smoothing, and a tileable/seamless mode.
- Export each map as a PNG or grab all of them in one .zip — at 512, 1024 or 2048 px.
- 100% client-side: your image is processed in the browser with no upload, no watermark and no account.
Process
How it works
- Drop an imageDrag a photo, texture or grayscale heightmap onto the tool. It’s processed locally — nothing is uploaded.
- Dial in the mapsSet strength, smoothing, OpenGL/DirectX and tileable, and watch the material update live on the 3D sphere.
- ExportDownload each map as a PNG, or all of them as a .zip, ready for three.js, Blender, Unity or Unreal.
Notes
Good to know
- Normal, height and AO are derived from image luminance — they read surface detail from lightness, not from true depth, so lighting baked into the photo can bleed into the relief.
- Roughness is an estimate from color, not a physical measurement — it’s a good starting point to hand-tune, not ground truth.
- Ambient occlusion uses a fast cavity approximation, not full horizon-based visibility; it darkens crevices convincingly but isn’t a bake.
- Pick the right green-channel convention for your engine: OpenGL (+Y) for three.js/Blender/Unity, DirectX (−Y) for Unreal — the wrong one makes relief look inverted.
- Everything runs on your device, so very large images depend on your machine; maps are generated up to 2048 px.
FAQ
Questions, answered
How do I make a normal map from an image?
Drop the image in, and the tool reads its luminance as a height field and computes a tangent-space normal map with a Scharr/Sobel gradient. Adjust the strength and preview it live on a 3D sphere, then download the PNG.
OpenGL or DirectX — which normal map do I need?
three.js, Blender and Unity expect OpenGL (+Y green). Unreal expects DirectX (−Y green). Choose the matching option; if your relief looks lit from the wrong side, flip it.
Can it make roughness, AO and displacement maps too?
Yes — from one image you get normal, height/displacement, ambient-occlusion and an estimated roughness map, and you can download the whole PBR set as a .zip.
Are tileable / seamless normal maps supported?
Yes. Turn on “Tileable” and the edges wrap so the maps repeat seamlessly — useful for terrain and material textures.
Is my image uploaded to a server?
No. The image never leaves your browser — all the map generation happens locally on your device.
Next