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.