MapGenerator
Summary
MapGenerator turns a seed and map size into an explorable procedural fantasy world. The public project separates a Spring Boot backend from a Vue 3, TypeScript and Vite client that renders directly to HTML5 Canvas. The backend generates terrain with noise and streams the result to the browser. The client presents that terrain in a fixed 800×600 viewport with Google Maps-style pan and zoom controls. Its renderer uses a hybrid virtual/offscreen canvas: static land is rendered into buffers, while animated water is calculated per frame. Additional layers model height, moisture, temperature and the continent mask, with topology shading, procedural textures and generated cities completing the map. The repository records 23 public commits. The architecture gives the project a clear performance story for large maps, while the available evidence remains a code and README description rather than a benchmark report.
Verified facts
- The public repository records 23 commits.
- The project uses Spring Boot, FastNoiseLite, Vue 3, TypeScript and an HTML5 Canvas renderer.
- The client uses a fixed 800×600 viewport and a hybrid pre-rendered terrain/live water path.
Core Features
- Interactive Viewport: Google Maps-style pan and zoom inside a fixed 800x600 viewport, backed by a virtual canvas so only what's visible is drawn each frame.
- Stylized Water Animation: Procedural wave patterns inspired by games like Don't Starve, with dynamic transparency and subtle shoreline ripples.
- Procedural Terrain Textures: Grain, tufts, ridges and ripples are generated client-side in real time so terrain stays crisp at every zoom level.
- Topology & Shadows: Height-gradient shading provides a 3D feel without leaving the 2D rendering pipeline.
- Procedural Cities: Each settlement is rendered with uniquely generated houses and skyscrapers, so no two cities look the same.
Architecture
The system is split into a deterministic generation backend and a presentation-focused frontend, connected by a streaming API.
[ Seed ] --> [ Spring Boot + FastNoiseLite ] --> [ Streaming API ]
↓
[ Vue 3 / TS / Canvas ]
↓
[ Virtual Canvas Renderer ]
- Backend: Spring Boot, Spring Data JPA, Hibernate, PostgreSQL and FastNoiseLite for noise-based terrain generation.
- Frontend: Vue 3 Composition API, TypeScript, Vite and Axios, rendering directly to HTML5 Canvas.
- Infrastructure: Docker and Docker Compose for one-command local setup of the full stack.
Performance
The renderer uses a virtual canvas hybrid approach: static terrain is pre-rendered into offscreen layers and only animated elements (water, shadows, building details) are redrawn each frame. This keeps the experience smooth even on large worlds while preserving the procedural look at every zoom level.
How this was verified: Read the public repository ↗