3D Pathfinding Algorithm Visualizer

A Visualizer for some common pathfinding and machine learning algorithms in 3D.

Live Demo

A live interactive demo can be found here.

Features

Machine Learning algorithms

• Q-Learning
  This is classical reinforcement learning algorithm. We initialize an agent to a random location on the map and have it learn about its environment through a series of explorative(random) and exploitative(most rewarding) actions. In this algorithm the aim is to train an agent (in this case a robot delivering packages) to find an optimal path from start to finish, while avoiding "walls" or "ditches" at all costs. An example of a trained agent (with a curiosity of 0.3) is shown below.

Notice how the agent has learned to completely avoid the area south of its starting position because of a cluster of walls. You can change the agent's behaviour for both training and optimal policy visualization by changing the setting in the panel shown below.

Weighted and unweighted algorithms

• Dijkstra’s algorithm (weighted)
  The father of pathfinding algorithms, it creates a tree of shortest paths from the starting vertex, the source, to all other points in the graph. As shown in the image below this algorithm does not care to avoid the area around the walls. Guarantees the shortest path!

• A* Search algorithm (weighted)
  One of the best and a popular technique used in path-finding and graph traversals with heuristic. Guarantees the shortest path!

• Breadth-First Search (unwighted)
  The algorithm starts at the tree root, and explores all of the neighbor nodes at the present depth prior to moving on to the nodes at the next depth level. Guarantees the shortest path!

• Depth-First Search (unwighted)
  The algorithm starts at the root node and explores as far as possible along each branch before backtracking. Does not guarantee the shortest path!

Maze generation

Two methods to generate a maze:

• Recursive Division
• Random Maze

Libraries used

• Three.js
• react-three-fiber
• Tween.js
• Tensorflow JS

Contributing

Contributions are welcome. Please feel free to make a PR.

Project setup

The project uses Vite for development and production builds. Use Node.js 24 LTS (24.15 or newer), or Node.js 22.22.2 or newer in the 22 LTS series.

npm ci
npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

npm test runs the Vitest tests; npm run test:watch runs them in watch mode. npm run build produces the site in build/, and npm run preview serves it locally. The app is served under /3D-Pathfinding-Visualizer/ to match GitHub Pages. npm run deploy builds and publishes that directory with gh-pages.

Run npm audit to check all dependencies, including development tools.

Future Scope

• Add model of the martian surface and a package delivery robot for visualization
• Add button to toggle node information as text on each node in shortest path
• Add more algorithms to visualize

Made with ❤️ in React JS