Height and displacement

Bump Map and Height Map Generator

Build a controlled grayscale height signal for bump, parallax, displacement, or downstream normal-map generation.

Create bump and height maps
Browser renderer ready
Local modeNo source upload
384 × 384 · sRGB source / linear maps
03

Inspect under light

Drag the light · Arrow keys for precise movement

Sample loaded · local processing readyChecking local license…

Generate a bump or height map online

This online bump map generator converts an image to a height map with one scalar value per texel. White normally represents a higher area and black a lower area, though a material or shader can invert that meaning. Unlike a tangent-space normal map, the grayscale output does not directly encode surface direction. The renderer samples its changes to perturb light or displace geometry.

The inversion control makes the convention explicit. Contrast changes the available height range, and blur controls how quickly slopes change. Use modest values for porous surfaces and stronger values for masonry, carved ornament, or stylized relief.

  • Preview the height output beside the source.
  • Generate matching normal, AO, and roughness approximations.
  • Detect flat or heavily clipped grayscale output.
  • Keep processing local for private or unreleased artwork.

Bump, displacement, and parallax are not identical

Bump mapping changes lighting but not the mesh silhouette. Displacement changes vertex or tessellated surface position and therefore needs adequate geometry. Parallax methods approximate depth in the shader with their own sampling and scale constraints. The same height image can feed all three, but the safe contrast and blur values differ.

Start with a low displacement scale in the destination application. An image with clipped whites or blacks gives a renderer no information beyond those limits, which is why the quality panel reports excessive clipping before export.

Create a predictable map from color

The browser converts color to perceptual luminance before applying local controls. That is deterministic, but it cannot distinguish dark paint from a deep recess. For albedo textures, pre-cleaning baked light and color variation will often improve the result. For scene-aware depth, the AI depth option is separate and always discloses external processing.

Use the generated normal map to validate direction under a movable light. If a groove appears raised, invert height or change the green-channel convention depending on whether the source height or engine orientation is wrong.

Height maps, bit depth, and file format

A height map stores one number per texel, so its precision is the precision of that number. An 8-bit grayscale PNG gives 256 steps between the lowest and highest point. On a surface with gentle slopes that is usually enough, because the renderer interpolates between neighbouring texels. On a large, smooth surface with a shallow gradient, such as a dune or a sanded panel, 256 steps can be visible as banding once the renderer amplifies the range.

Where the format allows it, prefer 16-bit grayscale for displacement and for any height map that will drive a large height difference. Export PNG rather than JPEG. Lossy compression treats a height map as an ordinary photograph and introduces block artefacts around strong edges, which the renderer then reads as ridges and pits that were never in the source.

Colour space is the other common mistake. A height map is data, not a picture, so it should be imported as non-colour data in the destination application. If the renderer treats it as sRGB, the midtones are remapped and the surface slope changes even though the numbers in the file did not. The same rule applies to normal, roughness, and occlusion maps.

Name the file so the convention is obvious. A stem that records the source, the map type, and the resolution prevents the most common production error, which is applying an inverted or previously replaced map and then debugging the shader instead of the asset.

Driving displacement without breaking the silhouette

Displacement moves the surface itself, so the result depends on geometry as much as on the image. A mesh with few vertices cannot show fine displacement no matter how detailed the height map is, because there is nowhere for the surface to move. Either subdivide enough to resolve the detail or use tessellation in the destination renderer, and expect the cost of that decision to appear in frame time.

Start with a small displacement scale and increase it while watching the silhouette. The point where the outline of the object begins to change shape is the point where displacement stops being a surface treatment and becomes a modelling change, and beyond it the result usually looks inflated rather than detailed. Many materials are better served by a normal map for the fine relief and a low displacement scale for the large forms.

Inverted height is the most frequent visible defect. If a groove renders as a ridge, the height convention is reversed somewhere between the source, the map, and the material. Decide once whether white means high or low, write it down with the asset, and check it with a single movable light before applying the map to a whole scene.

Watch for clipped values. A height map with large areas of pure white or pure black has no information inside those regions, so the renderer produces a flat plateau or an abrupt step. The quality check reports excessive clipping for exactly this reason: it is cheaper to lower the contrast and keep the gradient continuous than to repair a flattened surface afterwards.

Recovering a height signal from an existing normal map

A normal map already contains slope information, so it can be integrated back into an approximate height signal. The reconstruction is useful when the original height map was lost and a project needs a displacement source, or when a material was authored from normal data and now has to drive parallax. It is an approximation: integration accumulates error across the image, and the result drifts unless the slope field is consistent.

Treat a reconstructed height map as a starting point. Expect some loss of accuracy at the image borders, where there is no neighbouring slope to integrate from, and expect residuals in areas where the original normal map was compressed heavily. Compare the reconstructed surface against the original under a moving light before using it for anything that changes the silhouette.

When both maps are available and disagree, the height map is usually the more direct description of the surface for displacement purposes, while the normal map is the one the renderer reads for shading. Decide which one the pipeline treats as authoritative and regenerate the other from it, rather than editing the two independently and hoping they stay consistent.