Normal Map Generator

Generate normal maps from any texture image for 3D rendering, game assets, and PBR workflows. The Sobel filter extracts surface gradients and maps them to RGB normals.

🔒 Your image is processed entirely in your browser. Nothing is uploaded to any server.

1. Upload Image

📷Drop an image here or click to uploadPNG, JPG, or WebP up to 4096px

2. Adjust & Preview

Strength: 2

Controls how pronounced the surface detail appears. Higher values exaggerate depth; lower values produce subtler normals.

Flip Y (DirectX)

Inverts the green channel. Enable for DirectX-style engines like Unreal Engine or 3ds Max; leave off for OpenGL-style tools like Blender, Unity, or Godot.

Normal Map Preview

Upload an image to generate a normal map

Complete PBR Map Set

Generated from the same image: grayscale height, ambient occlusion, and roughness maps to pair with the normal map in any PBR material.

Upload an image to generate a normal map

How It Works

The Normal Map Generator converts your texture to a grayscale heightmap, then applies a Sobel filter to compute horizontal and vertical gradients at each pixel. These gradients are combined into a 3D normal vector and mapped to the standard tangent-space RGB encoding where R = X, G = Y, and B = Z. The result can be used directly in game engines like Unity, Unreal Engine, Godot, or any PBR rendering pipeline.

Edge pixels wrap around to the opposite side, so the generated normal map tiles seamlessly if your source texture also tiles. Increase the strength for highly detailed surfaces like brick or stone, and use lower values for smoother materials like fabric or paper.

Tips for Better Normal Maps

Feed the generator a flat-lit, shadow-free image. Height is derived from luminance, so baked-in highlights and shadows read as bumps and dents instead of lighting.
Strength 1–3 suits subtle materials like paper, plaster, or fabric; 4–7 works for brick, stone, and bark; anything above 7 is best reserved for stylized, exaggerated relief.
Make the source seamless first — edge pixels wrap to the opposite side, so a tileable input produces a tileable normal map with no lighting seam.
Match your engine's convention with the Flip Y toggle: off for OpenGL-style tools (Blender, Unity, Godot), on for DirectX-style engines (Unreal Engine, 3ds Max).
Judge the result on an actual mesh, not just the preview — the render shows whether the depth reads correctly, and whether bumps appear pushed out rather than carved in.

Normal Map Generator — FAQ

What is a normal map?

A normal map is an RGB texture that stores a surface direction in every pixel. Renderers use it to fake fine 3D detail — cracks, pores, weave — in the lighting calculation without adding geometry. Tangent-space maps look mostly blue-purple because the blue channel encodes the outward direction.

OpenGL vs DirectX — when should I enable Flip Y?

The two conventions disagree on the sign of the green channel. OpenGL-style tools (Blender, Unity, Godot) treat green as up; DirectX-style engines (Unreal Engine, 3ds Max) treat it as down. If your bumps look carved into the surface instead of raised, toggle Flip Y and re-download.

How do I use the normal map in Unity or Unreal?

Unity: import the PNG, set its Texture Type to Normal map in the inspector, then assign it to the material's Normal Map slot. Unreal: enable Flip Y before downloading, import, and confirm the texture's compression is set to Normalmap so it is sampled correctly.

Why does my normal map look flat or noisy?

Flat means the source has little luminance contrast — raise the strength or use an image with clearer light-dark structure. Noisy usually means JPG compression artifacts or photo grain are being amplified by the edge-detection filter; use a cleaner source or downscale it slightly.

Is the generated normal map seamless?

Yes, when the input tiles. The filter samples across image edges with wrap-around, so a seamless source yields a normal map that tiles without a lighting discontinuity.

Is it free, and is my image uploaded anywhere?

Completely free, no account, no watermark. Processing happens in your browser with the Canvas API — the image never leaves your device, and maps you generate from your own images are yours to use commercially.

What are the height, AO, and roughness maps for?

Together with the normal map they form a basic PBR material. The height map drives displacement or parallax, ambient occlusion darkens crevices where light is trapped, and roughness controls how sharp or diffuse reflections are. Plug each into the matching slot of your engine's material.

How are the extra PBR maps derived?

All three come from the same luminance heightfield as the normal map: height is the grayscale field itself, ambient occlusion darkens pixels that sit below their blurred neighbourhood (cavities), and roughness measures local surface detail. They are approximations from a single photo — good for previz, stylized work, and quick materials.

Next steps: make your source image tileable first with the Make Seamless tool, then see the guides on PBR materials, Unity, and Unreal Engine for wiring the map into your workflow.

Normal Map Generator

Generate normal maps from any texture image for 3D rendering, game assets, and PBR workflows. The Sobel filter extracts surface gradients and maps them to RGB normals.

🔒 Your image is processed entirely in your browser. Nothing is uploaded to any server.

1. Upload Image

📷Drop an image here or click to uploadPNG, JPG, or WebP up to 4096px

2. Adjust & Preview

Strength: 2

Controls how pronounced the surface detail appears. Higher values exaggerate depth; lower values produce subtler normals.

Flip Y (DirectX)

Inverts the green channel. Enable for DirectX-style engines like Unreal Engine or 3ds Max; leave off for OpenGL-style tools like Blender, Unity, or Godot.

Normal Map Preview

Upload an image to generate a normal map

Complete PBR Map Set

Generated from the same image: grayscale height, ambient occlusion, and roughness maps to pair with the normal map in any PBR material.

Upload an image to generate a normal map

How It Works

Tips for Better Normal Maps

Feed the generator a flat-lit, shadow-free image. Height is derived from luminance, so baked-in highlights and shadows read as bumps and dents instead of lighting.
Strength 1–3 suits subtle materials like paper, plaster, or fabric; 4–7 works for brick, stone, and bark; anything above 7 is best reserved for stylized, exaggerated relief.
Make the source seamless first — edge pixels wrap to the opposite side, so a tileable input produces a tileable normal map with no lighting seam.
Match your engine's convention with the Flip Y toggle: off for OpenGL-style tools (Blender, Unity, Godot), on for DirectX-style engines (Unreal Engine, 3ds Max).
Judge the result on an actual mesh, not just the preview — the render shows whether the depth reads correctly, and whether bumps appear pushed out rather than carved in.

Normal Map Generator — FAQ

What is a normal map?

OpenGL vs DirectX — when should I enable Flip Y?

How do I use the normal map in Unity or Unreal?

Why does my normal map look flat or noisy?

Is the generated normal map seamless?

Yes, when the input tiles. The filter samples across image edges with wrap-around, so a seamless source yields a normal map that tiles without a lighting discontinuity.

Is it free, and is my image uploaded anywhere?

What are the height, AO, and roughness maps for?

How are the extra PBR maps derived?

Next steps: make your source image tileable first with the Make Seamless tool, then see the guides on PBR materials, Unity, and Unreal Engine for wiring the map into your workflow.