Interaktywna aplikacja webowa stworzona do wizualizacji działania algorytmów wyszukiwania ścieżki na trójwymiarowym terenie zbudowanym z wokseli. Projekt umożliwia eksperymentowanie z algorytmami, edycję terenu, modyfikację kosztów przejścia oraz analizę wydajności w czasie rzeczywistym.
- Świat 3D: Renderowanie terenu w formie klocków (wokseli) przy użyciu technologii Three.js oraz React Three Fiber.
- Algorytmy wyszukiwania:
- BFS (Breadth-First Search): Przeszukiwanie wszerz (dla grafów nieważonych).
- Dijkstra: Algorytm najkrótszej ścieżki uwzględniający wagi terenu.
- A* (A-Star): Algorytm heurystyczny (metryka Manhattan), zazwyczaj najszybszy w znajdywaniu celu.
- Edytor Mapy:
- Malowanie różnymi typami terenu (Trawa, Piasek, Woda, Kamień, Ściana).
- Zmiana wysokości terenu poprzez dodawanie/usuwanie bloków.
- Ustawianie punktu Startowego i Końcowego.
- Generator Proceduralny: Tworzenie losowych map przy użyciu szumu Simplex (Simplex Noise) z obsługą ziarna (seed).
- Optymalizacja renderowania:
- Greedy Meshing: Łączenie sąsiadujących ścian tego samego typu w jedną większą powierzchnię, co drastycznie zmniejsza liczbę wielokątów.
- Face Culling: Renderowanie tylko widocznych ścian bloków.
- WebGPU: Eksperymentalne wsparcie dla nowego API graficznego WebGPU (z fallbackiem do WebGL).
- Konfigurowalne koszty: Możliwość zmiany "kosztu" przejścia przez dany teren (np. woda może być trudniejsza do przebycia niż trawa).
- System zapisu: Możliwość pobrania wygenerowanej mapy do pliku JSON i jej późniejszego wczytania.
- Statystyki: Podgląd na żywo FPS, zużycia pamięci, liczby odwiedzonych węzłów oraz czasu wykonania algorytmu.
- Frontend: React 19
- Język: TypeScript
- Budowanie: Vite
- Grafika 3D:
- Zarządzanie stanem: Zustand
- GUI: Leva
Upewnij się, że masz zainstalowane środowisko Node.js (wersja 18+ zalecana).
-
Pobierz projekt (sklonuj repozytorium lub wypakuj pliki).
-
Zainstaluj zależności:
npm install
-
Uruchom tryb deweloperski:
npm run dev
Aplikacja uruchomi się pod adresem
http://localhost:5173. -
Budowanie wersji produkcyjnej:
npm run build
- Lewy Przycisk (LPM): Obracanie kamery.
- Prawy Przycisk (PPM): Przesuwanie kamery.
- Rolka: Przybliżanie/Oddalanie.
- W trybie Edytora:
- LPM: Usuwanie bloku / Obniżanie terenu.
- PPM: Stawianie bloku / Podwyższanie terenu.
| Klawisz | Akcja |
|---|---|
| Q | Losuj nowe ziarno (Seed) |
| W | Wygeneruj mapę ponownie |
| E | Włącz/Wyłącz tryb edytora |
| R | Uruchom algorytm |
| T | Pauza / Wznowienie |
| Y | Resetuj ścieżkę |
| 1 - 4 | Zarządzanie punktami Start/Koniec |
| 6 - 0 | Wybór pędzla (Woda, Piasek, Trawa, Kamień, Ściana) |
| Z | Przełącz Greedy Meshing (Optymalizacja siatki) |
| X | Przełącz Culling (Ukrywanie niewidocznych ścian) |
| C | Pokaż pomocnicze światła |
| V | Przełącz tryb siatki (Wireframe) |
| A | Pokaż/Ukryj odwiedzone węzły |
Naciśnij / wewnątrz aplikacji, aby zobaczyć pełną listę skrótów na ekranie.
Projekt stworzony w celach edukacyjnych w ramach przedmiotu Algorytmy Grafowe.
Autor: Grzegorz Szwyngiel
