Skip to content

Repository files navigation

Hex Map WFC

Procedural medieval island worlds from 4,100 hex tiles, built with WebGPU and a lot of backtracking.

Live Demo | Read the Article

Screenshot

Features

  • Modular Wave Function Collapse — 19 hexagonal grids solved independently with cross-grid constraint matching
  • Layered Recovery System — unfixing, Local-WFC, and mountain fallbacks for 100% solve rate
  • 30 Hex Tile Types — 6 rotations and 5 elevation levels each (900 states per cell)
  • WebGPU Rendering — Three.js with TSL shaders for all custom visual effects
  • BatchedMesh Optimization — 4,100+ cells in ~38 draw calls, 60fps on desktop and mobile
  • Post-Processing Stack — GTAO ambient occlusion, depth of field, vignette, and film grain
  • Dynamic Shadow Maps — frustum fitted to camera view for crisp shadows at any zoom
  • Animated Water — caustic sparkles and coastal waves with cove-aware thinning
  • Noise-Based Placement — Perlin noise for organic tree, building, and decoration clustering
  • Seeded RNG — deterministic, reproducible maps from any seed

Getting Started

npm install
npm run dev
npm run build

License

MIT

Credits

About

No description, website, or topics provided.

Resources

Stars

437 stars

Watchers

4 watching

Forks

Releases

Packages

Contributors

Languages