Runs locally No signup No watermark
Dev Tool
Image to Normal Map

Upload a texture and Pixlane reads its luminance as a height field, then derives surface normals with the selected Farid–Simoncelli or Scharr derivative pass and encodes them into the usual RGB convention. Pick the green-channel direction your engine expects, OpenGL, Blender and Unity read +Y up, while Direct3D and Unreal read +Y down, because the wrong one flips lighting on every surface.

✓ Core Access ✓ No signup 🔒 Supported file contents are not uploaded for processing
1

Upload

2

Adjust & Preview

Pixlane
Preparing the tool on your device

Pixlane is loading on your device. Supported file contents are not uploaded for processing. Site analytics and the assistant are separate; tool-specific limits may apply.

Image to Normal Map

Turn a texture or height map into a tangent-space normal map with selectable derivative kernels, adjustable depth, and an OpenGL or Direct3D green channel.

Upload a texture and Pixlane reads its luminance as a height field, then derives surface normals with the selected Farid–Simoncelli or Scharr derivative pass and encodes them into the usual RGB convention. Pick the green-channel direction your engine expects, OpenGL, Blender and Unity read +Y up, while Direct3D and Unreal read +Y down, because the wrong one flips lighting on every surface.

How to Use Image to Normal Map

  1. Upload an image: Upload one of the formats listed by the tool (JPG, PNG, WebP) and wait for the local preview.
  2. Adjust settings and process: Set depth strength and smoothing, pick the green-channel convention your engine expects, then choose the output format.
  3. Review and download: Review the result, then download it in one of the formats offered by this tool.

Controls and Options

Raise smoothing when photo grain becomes fake bumps; switch the green channel if lighting reads inverted in your engine.

Formats and Output

Input: JPG, PNG, WebP. Output: PNG, WebP, or JPG. PNG is recommended because lossy artefacts around edges show up as lighting errors.

What a Normal Map Encodes

Each pixel stores a unit surface normal rather than a color: x in red, y in green, and z in blue, with each component remapped from minus one to one into zero to 255. A flat area therefore sits near (128, 128, 255), which is why normal maps look predominantly lavender.

OpenGL and Direct3D Green Channels

The two conventions disagree on which way the green axis points. OpenGL, Blender, and Unity read positive Y as up; Direct3D and Unreal read positive Y as down. Feeding an engine the wrong convention inverts the apparent lighting, so the direction is exposed as a setting instead of assumed.

Getting Clean Results

Smoothing blurs the height field before the gradient pass, which matters for photographic sources where grain would otherwise become fake bumps. Depth strength scales how pronounced the relief appears. PNG is recommended because lossy artifacts around edges can surface as visible lighting errors.

Frequently asked questions

What is a normal map used for?

It lets a renderer light a flat surface as if it had relief, by storing a surface direction per pixel instead of extra geometry. It is standard in game engines and real-time 3D.

Which green-channel option should I pick?

OpenGL (+Y up) for Blender, Unity and most glTF pipelines; Direct3D (-Y down) for Unreal and DirectX tooling. If lighting looks inverted, bumps reading as dents, switch to the other one.

Why does my normal map look noisy?

Photographic texture carries grain, and every grain speck becomes a bump. Raise smoothing to blur the height field first, and lower depth strength.

Is this the same as a real height map?

No. The tool infers relief from image luminance, which is an approximation. A bright painted area reads as raised even when the surface is flat. It works best on textures where shading already tracks the surface.

Is my image uploaded anywhere?

Supported image content is not uploaded for processing. Height extraction, the gradient pass, and export run in your browser; site analytics and the assistant are separate.

Back to computer vision tools