Multi-Layer Terrain System (Procedural World Generation in Three.js)

Lesson Objective

This lesson extends procedural terrain generation by introducing a multi-layer system. Instead of using a single noise function, we combine multiple noise layers to simulate realistic world structures such as water, plains, hills, and mountains.


https://www.udemy.com/course/web-based-3d-terrain-industrial-printing-engine-mastery/


Core Concept: Real Terrain is Layered

Real-world terrain is not uniform. It consists of:

  • Oceans and lakes
  • Flat plains
  • Hills
  • Mountain ranges
  • Transitional zones

To replicate this structure, we use multiple noise layers applied to the same vertex grid.


Step 1: Base Terrain Structure

We begin with a structured grid:

  • PlaneGeometry
  • BufferGeometry position array
  • Vertex system (x, y, z)

Each vertex acts as a controllable data point in the terrain system.


Step 2: Multiple Noise Layers

Instead of one noise function, we use multiple layers:

Layer Types

  • Low-frequency noise → plains
  • Medium-frequency noise → hills
  • High-frequency noise → mountains

Each layer has:

  • Unique frequency
  • Unique amplitude
  • Unique weight contribution

Step 3: Layered Height Composition

Final height is computed by combining layers:

  • Weighted sum of noise functions
  • Conditional blending logic
  • Threshold-based rules

Result:

  • Complex terrain variation
  • Natural elevation diversity

Step 4: Water Layer (Base Level)

We define a water threshold:

If vertex height is below threshold:

  • It becomes water

This creates:

  • Oceans
  • Lakes
  • Rivers

This is the base environmental layer.


Step 5: Plains Layer

Above water level:

Low-frequency noise is applied.

Characteristics:

  • Smooth surfaces
  • Gentle elevation changes
  • Large flat regions

Represents:

  • Grasslands
  • Open terrain

Step 6: Mountain Layer

At higher elevations:

High-frequency noise is applied.

Characteristics:

  • Sharp peaks
  • Rough surfaces
  • High variation

Represents:

  • Mountain ranges
  • Rocky terrain

Step 7: Terrain Classification System

Each vertex is classified based on height:

  • Water zone → below threshold
  • Plains zone → mid elevation
  • Mountain zone → high elevation

This enables structured environmental grouping.


Step 8: Biome Mapping

Each terrain class can be visually styled:

  • Water → blue
  • Plains → green
  • Mountains → gray or white

This transforms raw geometry into a readable world map.


Step 9: Blending and Transitions

To avoid sharp transitions:

We apply smoothing techniques:

  • Interpolation functions
  • Gradient blending
  • Soft thresholds

Result:

  • Natural coastlines
  • Smooth elevation transitions
  • Organic terrain flow

Step 10: Vertex Update Pipeline

For each vertex:

  1. Read x and z
  2. Compute multiple noise layers
  3. Apply weighting rules
  4. Determine final height
  5. Assign to vertex.y

Then:

  • Update BufferGeometry
  • Mark geometry as needing update

Step 11: Real-Time World Rendering

After updates:

  • Three.js re-renders the scene
  • GPU updates terrain instantly
  • Changes appear in real time

This enables:

  • Interactive world generation
  • Dynamic parameter tuning

Step 12: System Architecture Shift

This system moves beyond single-noise terrain:

Before

  • One noise function
  • One terrain type
  • Flat structure logic

Now

  • Multiple layered noise systems
  • Environmental classification
  • Structured world rules

System Summary

By the end of this lesson:

  • Terrain is built using multiple noise layers
  • Each layer defines a different elevation behavior
  • Water, plains, and mountains are mathematically defined zones
  • Vertex height is a composite function
  • Thresholds define biome boundaries
  • Blending ensures smooth transitions
  • BufferGeometry enables real-time updates
  • Worlds are structured systems, not single surfaces

Student Tasks

Task 1: Layer Implementation

Create separate noise layers with different frequencies.

Task 2: Water Threshold

Define a water level and classify vertices below it.

Task 3: Mountain Layer

Add high-frequency noise for rough terrain.

Task 4: Biome Coloring

Assign colors based on terrain height.

Task 5: Blending Experiment

Compare sharp vs smooth transitions between layers.


Final Outcome

By the end:

  • Terrain is generated using multiple overlapping systems
  • Noise layers define environmental regions
  • Water, plains, and mountains are data-driven structures
  • Vertex values are composed from multiple functions
  • Blending produces natural transitions
  • The browser can generate full procedural fantasy worlds