Normal Map Generator
Drop a photo or texture and get a real-time normal map, with a relit preview on a virtual lit plane so you can judge the bump before you export it. Everything runs in your browser — your images never leave your computer.
What is a normal map?
A normal map encodes the direction a surface "leans" at every pixel — instead of color, its R, G and B channels store the X, Y and Z of a surface normal vector. Game engines and 3D renderers use it to fake fine surface detail (bumps, cracks, weave) under real-time lighting, without adding a single extra polygon.
How does the generator work?
It reads your image's brightness as a height field, smooths it a little to cut noise, then runs a Sobel gradient to find how steeply that height changes at every pixel. The Smooth slider trades detail for cleanliness, and Bump strength controls how exaggerated the resulting relief looks.
What does the 3D preview show?
A real-time 3D render of your texture on a plane, with your normal map applied and a light orbiting around it — exactly how a game engine would light it. Watch how the bumps catch the moving light: it's the fastest way to sanity-check a normal map without opening a 3D app. Tune the orbit speed and light height, or switch to Normal map view to see (and download) the raw R/G/B encoded texture.
OpenGL vs DirectX — which one do I need?
They differ only in the green channel's direction. Unity, Godot, Blender and most OpenGL-based tools expect OpenGL (+Y); Unreal Engine and some DirectX-based pipelines expect DirectX (−Y). If your bumps look inverted in your engine, switch it and re-export.
Is it really private?
Yes. There is no upload: all processing happens in your browser using canvas and JavaScript. Close the tab and nothing remains.
☕ The robot runs on caffeine
This tool is free and always will be. If it saved you time, a coffee keeps the robot scary.