Displacement map

A texture that pushes a mesh's points in and out, creating real relief and a changed silhouette instead of merely faking bumps with light.

make mountains out of a black and white pictureblack and white map that makes real bumpswhy is my plane still flat after i added the bumpy texturemake the surface actually stick out instead of just looking like itterrain from a grayscale imagethe bumps should show up on the outline toopush the shape out with a picturedisplacment map

See it

Live demo coming soon

What it is

A displacement map is usually a grayscale texture that moves a mesh's vertices, most often along their surface normals. Bright values push out further than dark ones, and the material's scale and bias decide how far the surface travels and where zero sits. Because positions really move before the triangles are drawn, displacement can change the silhouette and shadow shape. A normal map only changes the lighting calculation.

Reach for it when the surface needs real relief: terrain built from an elevation tile, deep stone carving, tire tread, or waves that must break the outline. Blender calls the same idea the Displace modifier. In three.js, MeshStandardMaterial exposes displacementMap, displacementScale, and displacementBias, so the same height texture can be tuned without rebuilding the mesh.

Gotcha: the map can move only vertices that already exist. A default PlaneGeometry is a single quad, so only its four corners move and every bump between them vanishes; subdivide the mesh to roughly the resolution of the map. GPU displacement also leaves the CPU-side geometry unchanged, which means raycasting, collision, and frustum bounds still see the original shape unless you handle them separately.

Ask AI for it

Build a displaced terrain tile in three.js from a grayscale height texture. Use PlaneGeometry with 256 by 256 segments and MeshStandardMaterial with displacementMap, displacementScale set to 2.0, and displacementBias set to -1.0 so the surface moves above and below its base plane. Load the map as non-color data, pair it with a normalMap for fine lighting detail, rotate the plane flat, and set mesh.frustumCulled to false because the GPU displacement is outside the geometry's CPU-side bounds. Keep raycasting and collision on a matching CPU height field.

You might have meant

normal mapvertex displacement procedural noise deformationtexturemesh geometrysurface normals backface culling

Go deeper