Skip to content

Latest commit

 

History

History
99 lines (78 loc) · 4.01 KB

File metadata and controls

99 lines (78 loc) · 4.01 KB

Wizualizacja Algorytmów Wyszukiwania Ścieżki 3D (Voxel Pathfinding)

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.

Podgląd Projektu

🚀 Funkcjonalności

Główne możliwości

  • Ś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).

Zaawansowane funkcje

  • 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.

🛠️ Technologie

📦 Instalacja i Uruchomienie

Upewnij się, że masz zainstalowane środowisko Node.js (wersja 18+ zalecana).

  1. Pobierz projekt (sklonuj repozytorium lub wypakuj pliki).

  2. Zainstaluj zależności:

    npm install
  3. Uruchom tryb deweloperski:

    npm run dev

    Aplikacja uruchomi się pod adresem http://localhost:5173.

  4. Budowanie wersji produkcyjnej:

    npm run build

🎮 Sterowanie

Mysz

  • 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.

Skróty klawiszowe

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.

📜 Licencja

Projekt stworzony w celach edukacyjnych w ramach przedmiotu Algorytmy Grafowe.


Autor: Grzegorz Szwyngiel