This is the dissertation project for Luotn in KCL.
luotn/ParallelPathfindingComparision/ ├── index.html ├── simulate.html ├── .gitignore ├── LICENSE.md ├── README.md ├── js/ │ ├── index.js │ ├── simulate.js │ ├── domdriver.js │ ├── gpudriver.js │ ├── grid.js │ ├── aStar.js │ ├── dijkstra.js │ ├── bfs.js │ └── dfs.js ├── css/ │ ├── common.css │ ├── simulate.css └── icons/ ├── [0~9].svg ├── github.svg ├── square-fill-orange.svg ├── arrow-up-square-fill.svg └── ... (Total of 38 items)
This project does not have any depencdency.
Set project root folder as root folder of any http server. Then run the server and visit the defined address (and port).
Tested on VSCode live server with default settings, and GitHub Pages.
Try it: Github Pages
Directly avaliable browsers:
Avaliable browsers:
Compatability information in MDN Web Docs.
- Share Link
- Edit grid after simulation
- Compare multiple algorithms in the same screen
- WebGPU accelerated, can handle enormous mazes
- Algorithm queue/stack and score viewing
76 * 76 Stress Test
Hint❗️: This URL is 5,019 characters long. Which is too big (
Leave a issue or
This project presents the design, implementation, and evaluation of a web-based tool for parallel visualization of classical pathfinding algorithms, leveraging the emerging WebGPU API to address both pedagogical and performance limitations of existing implementations. The primary objective was to enable simultaneous, side-by-side comparison of multiple algorithms, including Depth-First Search, Breadth-First Search, Dijkstra’s algorithm, and A*, within a single, interactive environment. To achieve this, a two-phase workflow was adopted: a DOM-based grid creation interface for defining custom mazes, and a simulation phase featuring a decoupled architecture separating algorithm execution, benchmarking, and rendering engines.
Benchmarking exploits automated warm-up runs and 1,000 iteration timing to overcome millisecond timer resolution limits, ensuring statistically reliable performance metrics. The core rendering shader module was developed “bare-metal” in WGSL without external libraries, demonstrating direct WebGPU buffer management, shader programming, and texture atlas assembly, even accommodating Safari’s SVG-to-canvas nuances via bitmap conversion. In performance trials on both Apple M1 Pro and Intel/NVIDIA platforms, WebGPU rendering outperformed traditional DOM updates by approximately 20-40%, while maintaining full cross-browser compatibility. A compressive share URL mechanism serializes only the initial maze and settings, capitalizing on algorithmic determinism, to facilitate effortless reproducibility and collaboration without server-side storage. Educationally, the tool bridges the gap between abstract algorithm theory and concrete execution by visualizing interior states (queues, stacks, heuristic scores) alongside final paths, significantly enhancing intuitive understanding. The modular design supports future algorithm integration, making this work both a practical learning resource and a foundational reference for WebGPU-accelerated visualizations in research and industry.