BaseColor to Normal Map Converter

BaseColor to Normal Map

Generate tangent-space normal maps from your base color images using Sobel edge detection. Adjust strength, smoothing, and coordinate system (OpenGL / DirectX). Real-time 3D preview. All processing happens in your browser.

Drag & drop your base color here or browse
Supports PNG, JPG, WebP, BMP

Generated Maps

Base Color

Normal Map

3D Preview

Click and drag to rotate • Scroll to zoom

Preview Settings

Sphere
Sphere
Rounded Cube
Plane
#ffffff
#1a1a1a

How It Works

1

Upload Base Color

Drag and drop any image file — PNG, JPEG, WebP, or BMP. The tool loads your albedo map for edge detection analysis. Nothing is uploaded to a server.

2

Tune Normal Settings

Adjust strength for depth intensity, smooth to reduce noise, and toggle DirectX Y-inversion for Unity/Unreal Engine compatibility. All changes update instantly in the preview.

3

Preview & Download

Inspect the normal map on a 3D sphere with adjustable lighting. Rotate to see how surface detail reacts to light. Download as PNG for Blender, Unity, Unreal, or any 3D software.

Algorithm Breakdown

The normal map is generated using Sobel-like edge detection on your base color image. Here's how each component works.

Sobel Edge Detection

The tool uses Sobel-like gradient filtering across neighboring pixels to detect edges and color transitions in your image. Luminance differences are converted into tangent-space normal vectors (X, Y, Z direction per pixel).

RGB Encoding

Normal maps store surface direction as RGB values: Red channel = X axis (right/left), Green = Y axis (up/down), Blue = Z axis (facing direction). The characteristic blue-purple color means most normals point outward (Z is dominant).

OpenGL vs DirectX

Use the "Invert Y" toggle for DirectX engines (Unity, Unreal Engine, 3ds Max). Leave unchecked for OpenGL engines (Blender, Godot, Maya). The difference is only in the green channel's vertical direction.

Real-time 3D Preview

The generated normal map is applied to a Three.js mesh alongside your base color. Rotate, zoom, and adjust lighting to verify surface detail and bump direction before downloading.

Tutorial: Creating a Normal Map from a Photo

Follow this quick workflow to turn any photo or base color texture into a usable normal map for PBR materials.

1

Choose Your Source Image

Upload a high-resolution photo or albedo texture. Images with clear edges, patterns, and texture detail produce the best normal maps. Avoid blurry or heavily compressed images. The edge detection algorithm needs sharp contrast transitions to generate meaningful surface normals.

2

Set Strength & Smooth

Set normal strength to 5–10 for subtle surface detail (wood grain, fabric weave), or 12–18 for exaggerated relief (cracked stone, rough terrain). Add smoothing (1–3) if the source image has noise or grain that creates unwanted bump artifacts. Higher smooth values produce cleaner, softer normal maps at the cost of fine detail.

3

Verify in 3D & Export

Check the 3D preview, rotate the mesh and watch how surface detail catches the light. Ensure bumps appear to rise outward, not sink inward (if they look inverted, toggle Invert Y). When satisfied, download the normal map as PNG. For Unreal Engine or Unity, make sure Invert Y (DirectX) is checked before exporting.

Related Texture Tools

The BaseColor to Normal Map converter is one step in a complete PBR material workflow. Combine it with these free tools.

BaseColor to PBR
Generate all PBR maps (roughness, metallic, normal, height, AO) from a single image at once.
Normal from Height
Convert height/displacement maps into normal maps with full control over strength and filtering.
BaseColor to Roughness
Extract roughness maps from base color to pair with your normal map.
Seamless Texture Maker
Make your normal map tileable with edge-blending algorithms and live preview.
Texture Channel Mixer
Pack roughness, metallic, and AO into a single ORM RGB texture for performance.
Color Correction
Adjust brightness, contrast, saturation, and hue on your normal map.
FAQ

Frequently Asked Questions

A normal map is a texture that stores surface direction data to simulate 3D detail on flat surfaces. It tricks lighting calculations into thinking the surface has more geometric detail than it actually does a technique called bump mapping. The RGB color values encode X, Y, and Z surface normals: Red = right/left slope, Green = up/down slope, Blue = facing direction. The characteristic blue-purple color means most surface normals point outward (Z ≈ 1.0), which is normal for flat surfaces.
Start with strength at 10 for subtle surface detail. Increase to 14–17 for more pronounced normal effects on surfaces like cracked stone or rough wood. Very high values (18–20) can create exaggerated, unrealistic lighting. The ideal strength depends on your source texture images with strong color contrast need less strength, while subtle patterns may benefit from higher values to be visible.
The blue-purple color is normal and correct! It means the Z component (facing outward) is dominant, which is expected for most flat surfaces. A purely flat surface would be a uniform blue-purple at RGB (128, 128, 255). Red areas represent surface slopes to the right or left, green areas represent slopes up or down. More color variation in your normal map = more surface detail a map with rich cyan, magenta, and yellow areas has lots of surface variation.
Smoothing reduces noise and grain in the normal map by averaging neighboring pixel gradients. Use it when your source texture has compression artifacts, film grain, or fine noise that creates unwanted surface roughness in the normal map. Higher smoothing values (2–5) produce cleaner, softer results. Zero smoothing preserves all the original edge detail but may also retain texture noise that wasn't meant to be surface detail.
Leave "Invert Y" unchecked for OpenGL normal maps (used by Blender, Godot, Maya). Check "Invert Y" for DirectX normal maps (used by Unity, Unreal Engine, 3ds Max). The difference is in the green channel (Y) direction: OpenGL stores green as pointing upward, DirectX stores green as pointing downward. Using the wrong coordinate system makes surface bumps appear inverted lit surfaces look shadowed and vice versa.
No. All normal map generation happens entirely in your browser using JavaScript and the Canvas API. Your images never leave your computer, ensuring complete privacy and security. The Sobel edge detection runs fully client-side no server processing is involved at any stage.
Yes, this tool is 100% free with no limitations, watermarks, or sign-up requirements. All processing happens locally in your browser for maximum privacy and speed. Generate as many normal maps as you need with no daily limits.