Height to Normal Map Converter

Height to Normal Map

Convert grayscale height maps into tangent-space normal maps. Adjust strength and coordinate system (OpenGL / DirectX) for your target engine. Real-time 3D preview. All processing happens in your browser.

Drag & drop your height map here or browse
Supports PNG, JPG, WebP, BMP

Generated Maps

Height Map

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 Height Map

Drag and drop any grayscale height or displacement map: PNG, JPEG, WebP, or BMP. The tool loads your map for gradient analysis. Nothing is uploaded to a server.

2

Tune Settings

Adjust strength to control normal intensity, 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 from your height map using gradient detection. Here's how the conversion works.

Gradient Detection

The tool samples neighboring pixel luminance from your height map to calculate surface slope in both X and Y directions. Brighter-to-darker transitions become sloped normals, while flat areas produce outward-facing normals.

Height to Normal Conversion

Unlike base-color-to-normal which uses edge detection, height-to-normal directly reads the grayscale values as elevation data. White = high = slopes facing downward, black = low = slopes facing upward. This produces more physically accurate normals from actual height data.

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 height map as a reference. Rotate, zoom, and adjust lighting to verify surface detail and bump direction before downloading.

Tutorial: Creating a Normal Map from a Height Map

Follow this quick workflow to convert any grayscale height or displacement map into a usable normal map for PBR materials.

1

Prepare Your Height Map

Use a pure grayscale height map where white = high elevations (peaks, ridges) and black = low elevations (valleys, crevices). You can generate height maps from base color images using our BaseColor to PBR Generator, or use height maps exported from ZBrush, Blender, or Substance Designer.

2

Set Strength & Coordinate System

Start with default strength for subtle surface relief, or increase for more dramatic bump effects. If your target engine is Unity or Unreal Engine, enable Invert Y (DirectX). For Blender, Godot, or Maya, leave it unchecked (OpenGL). The 3D preview updates instantly so you can see the result.

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 inverted, toggle Invert Y). When satisfied, download the normal map as PNG. Import directly into your PBR material's normal map slot in your engine or 3D software.

Related Texture Tools

The Height 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.
BaseColor to Normal Map
Generate normal maps directly from base color images using Sobel edge detection.
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 an RGB 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 normal 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.
A height map (also called a bump or displacement map) stores elevation as grayscale values: white = high points, black = low points. A normal map stores the actual surface direction at each pixel as RGB color. Normal maps are the standard input for PBR shaders because they directly tell the renderer which way each pixel faces, producing more accurate specular highlights and reflections than height maps. Height maps need to be converted to normal maps before use in most PBR workflows this tool does exactly that.
Yes, height maps should be pure grayscale images where white represents high points (peaks, ridges) and black represents low points (valleys, crevices). Color images will be automatically converted to luminance values before processing, but for the most accurate and predictable normal maps, use true grayscale height maps. Photoshop, GIMP, and most 3D software can export grayscale images.
Start with the default strength for subtle, realistic surface detail. Increase gradually for more pronounced normal effects on surfaces like cracked stone or rough wood. Very high values can create exaggerated, unrealistic lighting. The ideal strength depends on your height map maps with strong contrast between high and low areas need less strength, while subtle height variations may benefit from higher values to be visible in the final normal map.
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 height maps never leave your computer, ensuring complete privacy and security. The gradient 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.