Procedural Terrain Tech Demo

megabunk

A clone of MEGABONK's snake-walk terrain generation method. Real-time parameter tweaking, dynamic elevation, grass and water. One HTML file. Three.js powered.

By The Numbers

1

HTML File

Everything in a single file. Zero build tools. Zero dependencies beyond Three.js CDN.

6+

Tweakable Params

Map size, hilliness, gap chance, floor depth, water level, grass density. All real-time.

3D

Procedural Textures

Canvas-generated grass, dirt, and cap textures. No image files needed.

Regenerate

Every parameter change rebuilds the terrain. Infinite exploration from one algorithm.

Features

Procedural terrain generation in your browser.

Snake-Walk Algorithm

A random-walking snake carves terrain paths across a grid. Corridor momentum keeps it moving with 70% straight-line probability.

Dynamic Elevation

Variable-height ramps with multi-cell slopes. Dead-end ramp cleanup cascades backward through chains until all slopes lead somewhere.

Water System

Adjustable water plane fills low areas. Tweakable water level lets you flood or drain the terrain in real time.

Real-Time GUI

lil-gui parameter panel. Every slider regenerates terrain instantly. Map size, hilliness, gap chance, floor depth, and more.

Cross-Billboard Grass

Scattered grass blade sprites on terrain tops. Bilinear height interpolation for slope placement. Adjustable density.

Shadows & Fog

Three.js standard materials with shadow casting, atmospheric fog, and third-person orbit camera.

Controls

Camera

  • Orbit Left Click + Drag
  • Pan Right Click + Drag
  • Zoom Scroll

Movement

  • Walk W A S D
  • Jump Space
  • Look Mouse

Ready to Explore?

No download. No install. Procedural worlds await.