Skip to content

2D Normal Map Generator — From Height or Sprite Luminance

Turn a height or grey image into a tangent-space normal map. The same strength means the same slope in every kernel, a flat input gives exactly (128, 128, 255), and the convention is named on screen.

Drop texture maps (PNG keeps exact channel bytes)
Runs in your browser. Files are not uploaded.
Texture Lab: a normal map generated from a CC0 texture, with the OpenGL/DirectX convention shown
The real Texture Lab with a CC0 asset (ambientCG).
Outputs
  • Channel PNGsMeasured· numpy
  • Normal mapMeasured· numpy
  • Packed mask / ORMMeasured· Pillow
  • Engine importUNVERIFIED

What it does

  • Height from luminance or from the alpha channel; kernels Sobel 3×3, Scharr and Sobel 5×5, normalised.
  • OpenGL (+Y, default) or DirectX (−Y), invert X or Y.
  • Wrap sampling for tileable textures: the edge texel equals the same texel inside a real 2× repeat.
  • Combine a detail normal with Reoriented Normal Mapping (no flattening RGB blend).

How to do it

  1. Drop the height map or sprite.
  2. Pick the source (luminance or alpha), kernel and strength.
  3. Choose the convention your engine expects.
  4. Download the normal map.

Outputs and how each was checked

"Measured" means the downloaded file was opened again outside the page (Pillow, numpy or an independent parser) and the property was measured. Loading these files in a game engine was not tested.

TargetFilesCheck
Channel PNGs<name>-r/g/b/a.png (8-bit grey)Measured numpyByte-identical per channel, including RGB under fully transparent texels.
Normal mapPNG · OpenGL (+Y) or DirectX (−Y)Measured numpyDecoded vectors are unit length (worst deviation 0.0002); OpenGL and DirectX differ in green only.
Packed mask / ORMUnity HDRP mask · URP metallic · ORM (glTF, Godot)Measured PillowPacked bytes checked: ORM preset over AO 10 / roughness 80 / metallic 220 → (10, 80, 220, 255).
Engine importUnity · Unreal · GodotUNVERIFIEDNot imported in any engine.

Evidence

Channel unpack byte-identical on all four channels (max difference 0), 2048 transparent texels keep their RGB; edge bleed changed 448 texels, all with alpha 0, and no alpha byte; OpenGL ↔ DirectX differ exactly in green (255 − g); converted normals decode to unit vectors.

Limits

  • Exact channel bytes need PNG; JPEG/WebP are decoded by the browser and marked "not byte-exact".
  • Interlaced PNG and 16-bit output are not supported; up to 33.5 million pixels on the exact path.
  • A normal map's convention cannot be detected from its pixels, only converted.
  • Nothing was imported into Unity, Unreal or Godot: channel orders rest on their documentation and engine source.

Questions

Is this the same as Laigter or SpriteIlluminator?

No. It computes the gradient of height or luminance; it does not paint or bevel shapes. For pixel art, the height comes from your own grey values.

Which convention should I use?

Unity, Godot and Blender expect OpenGL (+Y); Unreal expects DirectX (−Y), which the Lab labels as inferred from Epic's glTF exporter documentation.

Is it free, and do I need an account?

Everything on these pages is free and works without an account. There is no watermark and no export that is held back.

Are my sprites uploaded?

No. The Studio decodes, packs and exports in this browser tab. Projects are autosaved in the browser (IndexedDB) and can be saved as a .nerulio file.

Does it need Aseprite or an engine plugin installed?

No. .aseprite files are read and written in the browser, and each engine bundle carries what that engine needs (for Godot, the import settings and scene; for Unity and the Godot TileSet, a small editor script).