MapGenerator
Streszczenie
MapGenerator zamienia ziarno i rozmiar mapy w eksplorowalny proceduralny świat fantasy. Publiczny projekt rozdziela backend Spring Boot od klienta Vue 3, TypeScript i Vite, który renderuje bezpośrednio na HTML5 Canvas. Backend generuje teren z użyciem szumu i strumieniuje wynik do przeglądarki. Klient pokazuje teren w stałym widoku 800×600 z nawigacją pan i zoom w stylu Google Maps. Renderer korzysta z hybrydowej kanwy wirtualnej i offscreen: statyczny ląd trafia do buforów, a animowana woda jest liczona w każdej klatce. Dodatkowe warstwy modelują wysokość, wilgotność, temperaturę i maskę kontynentów, a cieniowanie topografii, proceduralne tekstury i generowane miasta uzupełniają mapę. Repozytorium ma 23 publiczne commity. Architektura daje czytelną historię wydajności dla dużych map, lecz dostępne dowody są opisem kodu i README, a nie raportem benchmarkowym.
Zweryfikowane fakty
- Publiczne repozytorium ma zapisane 23 commity.
- Projekt używa Spring Boot, FastNoiseLite, Vue 3, TypeScript i renderera HTML5 Canvas.
- Klient używa stałego widoku 800×600 oraz hybrydowej ścieżki z wcześniej renderowanym terenem i wodą na żywo.
Kluczowe funkcje
- Interaktywny widok: Panning i zoom w stylu Google Maps wewnątrz stałego widoku 800x600, wspierany przez wirtualną kanwę, dzięki czemu każdą ramkę rysowana jest tylko widoczna część.
- Animacja stylizowanej wody: Proceduralne wzory fal zainspirowane grami takimi jak Don't Starve, z dynamiczną przezroczystością i subtelnym falowaniem linii brzegu.
- Tekstury proceduralne terenu: Ziarno, pęczki, grzbiery i falowania są generowane po stronie klienta w czasie rzeczywistym, dzięki czemu teren pozostaje ostry na każdym poziomie powiększenia.
- Topografia i cienie: Cieniowanie gradientu wysokości zapewnia wrażenie 3D bez opuszczania potoku renderowania 2D.
- Miasta proceduralne: Każda osada jest renderowana z unikalnie wygenerowanymi domami i wieżowcami, dzięki czemu żadne dwa miasta nie wyglądają tak samo.
Architektura
System jest podzielony na deterministyczny backend generacji i frontend skoncentrowany na prezentacji, połączony poprzez streaming API.
[ Seed ] --> [ Spring Boot + FastNoiseLite ] --> [ Streaming API ]
↓
[ Vue 3 / TS / Canvas ]
↓
[ Virtual Canvas Renderer ]
- Backend: Spring Boot, Spring Data JPA, Hibernate, PostgreSQL i FastNoiseLite do generacji terenu opartej na szumie.
- Frontend: Vue 3 Composition API, TypeScript, Vite i Axios, renderowanie bezpośrednio do HTML5 Canvas.
- Infrastruktura: Docker i Docker Compose do lokalnej konfiguracji całego stosu za jedno polecenie.
Wydajność
Renderer używa hybrydowego podejścia wirtualnej kanwy: statyczny teren jest wstępnie renderowany w warstwy poza ekranem, a tylko elementy animowane (woda, cienie, szczegóły budynków) są przerysowywane każdą ramkę. To utrzymuje gładkość doświadczenia nawet na dużych światach, przy jednoczesnym zachowaniu wyglądu proceduralnego na każdym poziomie powiększenia.
Jak to zweryfikowano: Zobacz publiczne repozytorium ↗