Generate World Button – Procedural Terrain System

Lesson Overview

In procedural engine design, world creation shifts from manual editing to algorithm-driven generation. This lesson focuses on how a single HTML button can trigger an entire 3D world generation pipeline in real time using Three.js.

The core idea is that the system becomes responsible for shaping the world, not the user.


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


Step 1: HTML Button Interface

The system starts with a simple HTML button placed in the interface layer. This button is directly connected to JavaScript logic and acts as the trigger for world generation.

It is the entry point of the procedural pipeline.


Step 2: Event Listener Connection

The button is bound to a click event listener.

When the user clicks the button:

  • The event is captured
  • The generation function is executed

Flow:

Button → Click Event → generateWorld()

Step 3: Geometry Access Layer

Inside the generation function, the system accesses the Three.js mesh and its BufferGeometry.

The key data structure is the position attribute array, which stores:

  • X coordinates
  • Y coordinates (height)
  • Z coordinates

This array is the foundation of terrain manipulation.


Step 4: Vertex Iteration System

All vertices are processed in a loop.

For each vertex:

  • X and Z values are read
  • Terrain height is computed
  • Y value is updated

This transforms a flat grid into a structured height field.


Step 5: Procedural Height Generation

Terrain height is generated using mathematical systems rather than randomness.

Common methods:

  • Perlin noise
  • Simplex noise
  • Sine and cosine wave functions
  • Radial gradient functions

X and Z define input space, and functions generate structured variation.

This produces mountains, valleys, and plains.


Step 6: Spatial Coherence

To ensure realistic terrain:

  • Neighboring vertices must remain smooth
  • Abrupt height changes are avoided

This is achieved by using continuous noise functions over X and Z coordinates.

The result is a natural terrain flow.


Step 7: Writing Back to Geometry

After calculations:

  • Vertex Y values are updated
  • Position array is modified directly

This converts a flat mesh into a 3D terrain surface.


Step 8: GPU Synchronization

After modification:

  • Geometry is flagged as updated
  • Three.js refreshes GPU buffers

This enables:

  • Instant rendering updates
  • No scene reload requirement

Step 9: Seed-Based Generation

A seed value controls the entire world generation process.

This ensures:

  • Deterministic terrain output
  • Reproducible worlds
  • Consistent map generation

Same seed produces identical terrain every time.


Step 10: Parameter Control System

Terrain generation is controlled using parameters:

Amplitude controls height intensity

Frequency controls terrain density

Scale controls world size

These values can be static or linked to UI controls.


Step 11: Flat Mesh to World Transformation

Before generation:

  • Flat PlaneGeometry
  • No height variation

After generation:

  • Fully structured terrain
  • Multi-level landscape
  • Procedural world system

System Flow Summary

  1. User clicks button
  2. Event triggers generation function
  3. Vertex array is accessed
  4. Each vertex is processed
  5. Noise functions compute height
  6. Y values are updated
  7. Geometry is marked dirty
  8. GPU updates buffers
  9. World is rendered instantly

Key Concept Shift

Manual modeling is replaced by procedural generation.

  • Manual: user shapes terrain directly
  • Procedural: system generates terrain algorithmically

The user becomes a world designer, not a sculptor.


Student Tasks

Task 1: Button Integration

Create an HTML button and connect it to a click event listener.

Task 2: Generation Function

Implement generateWorld and access BufferGeometry position array.

Task 3: Vertex Loop System

Iterate through all vertices and modify Y values.

Task 4: Noise Experiment

Apply noise functions and compare frequency changes.

Task 5: Seed Testing

Change seed values and regenerate worlds.

Task 6: Parameter Control

Add amplitude and scale controls using UI inputs.

Final Outcome

By the end of this lesson, learners understand that:

  • HTML buttons can trigger full 3D pipelines
  • Procedural systems replace manual modeling
  • Vertex manipulation is the foundation of terrain generation
  • Noise functions define natural landscapes
  • Seed systems ensure reproducible worlds
  • GPU updates enable real-time rendering

A single click can generate an entire 3D world inside the browser.