SuperPower Normals

SuperPower Normals is the best way to generate normal maps from height maps and displacement maps: exactly flat areas stay exactly flat (128,128,255 in 8-bit, 32768,32768,65535 in 16-bit), 16-bit and float input, a Bezier height-curve editor with local and fade modes, A/B comparison and export to PNG, TIFF, OpenEXR, TGA, JPEG, WebP and DDS BC5. Free, runs entirely in your browser, nothing is uploaded.

JavaScript is required to run the app. Everything is processed locally in your browser.

Features

Converts height maps and displacement maps into normal maps entirely in the browser; nothing is uploaded
Exactly flat areas stay exactly flat: 128,128,255 in 8-bit and 32768,32768,65535 in 16-bit, with no noise, dithering or auto-levels
Lossless input: 16-bit PNG, TIFF (up to 32-bit float), OpenEXR, PSD, RAW/R16/R32, PGM/PFM, plus JPG, WebP, BMP, GIF, AVIF
Export: PNG 16/8-bit, TIFF 16/8-bit, OpenEXR half float, TGA, JPEG, WebP, DDS BC5 with mipmaps
OpenGL (Y+) and DirectX (Y-) conventions; Sobel, Scharr and central-difference gradients
Height curve editor with Bezier handles, black and white points; global, local and local-plus-fade modes
Smoothing before and after the curve; tileable (seamless) edges
A/B split comparison, mask view of flat zones, light preview, 16-bit preview
Multi-threaded processing of large maps (tested at 8192 x 8192) with full-resolution 1:1 preview of the visible area
Interface in 16 languages, including right-to-left languages

FAQ

How do I convert a height map or displacement map to a normal map?

Open the height map (drop a file onto the page), choose OpenGL or DirectX, set the relief height and save the normal map as PNG, TIFF, EXR or DDS.

Is my image uploaded anywhere?

No. All processing happens locally in your browser. Only anonymous usage statistics (formats and features used, never images or file names) are sent, and you can turn them off.

Why do flat areas stay exactly flat?

Where neighboring pixels are identical the slope is exactly zero, so the normal is exactly (0, 0, 1), which is 128,128,255 in 8-bit. No filtering or dithering is added.

Which formats are supported?

Input: PNG (8/16-bit), TIFF (8/16/32-bit float), OpenEXR, PSD, RAW/R16/R32, PGM/PFM, JPG, WebP, BMP, GIF, AVIF. Export: PNG, TIFF, OpenEXR, TGA, JPEG, WebP, DDS BC5.

OpenGL or DirectX normal map?

Blender, Maya, Unity and Substance use OpenGL (Y+); Unreal Engine and 3ds Max use DirectX (Y-). Switch with one click.

SuperPower Normals

Height map to normal map, right in your browser

Or drop a file anywhere. Nothing is uploaded: everything runs on this computer.

Height

Exposure

Offset

Gamma

Changes the height itself: you see it in the Height view, and normals are built from it. Double-click a name to reset it.

Range

Invert height (black is up)

Normals

Relief height

White above black, as % of map width, so it looks the same at any resolution.

Convention

Gradient

Smoothing before

Gaussian blur of the height. Removes 8-bit stair-stepping.

Height curve

Black point% White point%

Shapes the normals by height level; the height itself stays the same. Where the curve is flat (left of the black point, right of the white point, horizontal stretches) normals are exactly flat. Click to add a point, double-click to remove it. Select a point to see its handles: drag a handle to bend the curve, Alt-drag for a corner, double-click a handle to make it automatic again.

Smoothing after curve

Softens the edges of flattened areas. Flat zones stay exact.

Edges

How it works

Values are read losslessly. Built-in decoders for 16-bit PNG, TIFF, EXR, PSD and RAW skip color management, gamma and 8-bit rounding.
Normal = normalize(−∂h/∂x·k, ±∂h/∂y·k, 1) from a 3×3 gradient, where k is the relief height in pixels.
Where neighboring pixels are identical, the slope is exactly 0 and the normal is exactly (0, 0, 1). No auto-levels, high-pass or dithering.
Large maps are read in chunks and split across CPU threads. The preview is up to 2048 px; zooming in recomputes the visible area at 1:1.

Send anonymous usage statistics (which formats and features are used; never images or file names)

Drop a height map here

PNG 16TIFF 32EXRPSDRAW / R16 / R32PGM / PFMJPG / WebP