Voxel Pathfinding Visualizer

An interactive 3D web application designed to visualize pathfinding algorithms on voxel-based terrain. This project allows users to experiment with various algorithms, edit terrain maps, modify traversal costs, and view real-time performance statistics.

🚀 Features

Core Functionality

• 3D Voxel World: Fully interactive 3D environment rendered using Three.js and React Three Fiber.
• Pathfinding Algorithms:
  • BFS (Breadth-First Search): Unweighted graph traversal.
  • Dijkstra: Weighted shortest path algorithm.
  • A (A-Star)*: Heuristic-based algorithm (Manhattan distance), generally the most efficient for this grid type.
• Interactive Map Editor:
  • Paint different terrain types (Grass, Sand, Water, Stone, Wall).
  • Modify terrain height dynamically.
  • Set custom Start and End points.
• Procedural Generation: Generate infinite variations of terrain using Simplex Noise with custom seeds.

Advanced Features

• Performance Optimizations:
  • Greedy Meshing: Merges adjacent faces of the same type to drastically reduce draw calls and polygon count.
  • Face Culling: Only renders visible faces of the voxels.
  • WebGPU Support: Experimental support for the next-generation WebGPU renderer (fallback to WebGL).
• Customizable Costs: Adjust the movement cost for specific terrain types (e.g., make Water harder to cross than Grass) to see how algorithms adapt.
• Save & Load system: Export your generated worlds to JSON and share them.
• Statistics Overlay: Real-time monitoring of FPS, memory usage, nodes explored, path weight, and execution time.

🛠️ Tech Stack

• Frontend: React 19
• Language: TypeScript
• Build Tool: Vite
• 3D Graphics:
  • Three.js
  • @react-three/fiber (R3F)
  • @react-three/drei
• State Management: Zustand
• GUI Controls: Leva
• Math/Gen: Simplex Noise

📦 Installation & Setup

Ensure you have Node.js (version 18+ recommended) installed.

1. Clone the repository (or extract the project files).

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

   The application will be available at http://localhost:5173.

4. Build for production:

   npm run build

🎮 Controls

Mouse

• Left Click: Rotate Camera.
• Right Click: Pan Camera.
• Scroll: Zoom In/Out.
• Editor Mode:
  • LMB: Destroy block / Lower terrain.
  • RMB: Place block / Raise terrain.

Keyboard Shortcuts

Key	Action
Q	Random Seed
W	Regenerate Map
E	Toggle Editor Mode
R	Start Algorithm
T	Pause / Resume
Y	Reset Path
1 - 4	Manage Start/End Points
6 - 0	Select Brush (Water, Sand, Grass, Stone, Wall)
Z	Toggle Greedy Meshing
X	Toggle Face Culling
C	Show Light Helpers
V	Toggle Wireframe
A	Show/Hide Explored Nodes

Press / inside the application to see the on-screen key guide.

📜 License

This project was created for educational purposes as part of the Graph Algorithms course.

---

Author: Grzegorz Szwyngiel