Understanding Basic Terrain Concepts in 3D Graphics
A beginner-friendly exploration of the core concepts behind 3D terrain rendering in Three.js — understanding heightmaps, vertices, triangles, and how elevation data becomes a real-time 3D mountain mesh in the browser.
Heightmap
A heightmap is data that stores elevation.
Usually it is represented as:
- grayscale image
- matrix/array of numbers
Example:
0 0 0
0 8 0
0 0 0
The center area is higher than the surroundings.
A heightmap is not a 3D object yet. It only answers:
How high is this location?
Conceptually:
(x, z) → y
Meaning:
xandzdetermine the horizontal positionyis the elevation
Vertex
A vertex is a point in 3D space.
A vertex contains:
- X position
- Y position
- Z position
Example:
(10, 5, 20)
Meaning:
x = 10y = 5z = 20
A single vertex is only a point. It does not form a surface yet.
In terrain systems:
xandzusually form the ground grid- heightmap data modifies the
yvalue
Triangle / Face
A triangle (face) is the simplest possible surface in 3D graphics.
It is formed by connecting 3 vertices.
•
|\
| \
•--•
Modern 3D graphics are built mostly from triangles because:
- they are mathematically stable
- always planar
- efficient for GPUs
Complex objects are simply many small triangles connected together.
Terrain in 3D Graphics
A terrain is essentially:
- a grid of vertices
- where each vertex gets elevation from a heightmap
- then connected into triangles
Pipeline:
Heightmap
→ Vertex elevation
→ Triangles
→ Terrain mesh
A smoother terrain usually means:
- more vertices
- more triangles
- more processing cost
Understanding 3D Model Statistics
Example:
Triangles: 22k
Vertices: 11.1k
Meaning:
- the model surface is built from ~22,000 triangles
- the model contains ~11,100 vertices
More triangles generally mean:
- more detail
- smoother shape
- heavier rendering cost
Key Insight
3D terrain is not a “solid mountain”.
It is actually:
many connected triangles shaped by elevation data.