CesiumTSP
CesiumTSP is a TypeScript and CesiumJS-based 3D visualization system that renders large-scale TSP tours in real time via a persistent WebSocket connection to a high-performance C++ backend.
Technology Stack
Motivation
This project started during a team-based academic TSP build. As our solver improved, one thought kept coming back: what would this look like in clean, undistorted 3D?
When I later built TSP++ as a personal project, a real-time global visualizer was not optional. It became the centerpiece.
Code will be published soon.
Features
Tour Visualizer
Built from scratch to handle 1,000+ destination tours smoothly. Uses custom CesiumJS rendering and animation tooling, with backend-driven polyline updates over WebSocket. The focus is clarity at global scale without field-of-view distortion.
State Management (Zustand)
Zustand powers the entire application, from Cesium camera logic to form handling with react-hook-form. Each feature owns its own store. No prop drilling. Clean boundaries. Easy refactors.
Ball Tree Debug Visualizer
Real-time visualization of Ball Tree leaf nodes with planned depth controls. Designed to debug split behavior, bounding sphere accuracy, overlap, density, and PCA-driven construction.
Animation Engine
The camera dynamically frames each tour. Small tours are centered and tightly framed. Continental-scale tours animate across the globe while the camera rotates within a ±30° latitude band to preserve clarity and orientation.
WebSocket Backend
Communicates with a custom C++ backend using a persistent WebSocket request/response model. Low latency. Clean protocol. Built for performance-first experimentation.
Vite Build Pipeline
Fast builds and instant hot reload via Vite. From cold start to production build in seconds. The tooling stays out of the way so iteration stays fast.
TypeScript-Only Stack
Every file is .ts or .tsx. Strong typing keeps logic tight and reduces ambiguity across rendering, state, and networking layers.
Modular Design
Rendering, state, and networking are fully isolated. Each system can be replaced or extended independently with minimal friction.
Developer-Focused Architecture
The codebase is structured to be readable and navigable. No mystery abstractions. No guesswork. If you can read TypeScript, you can trace the system.
Roadmap
Future enhancements such as live incremental rendering and broader backend flexibility are planned, but the current focus is stabilizing the demo experience and preparing the repository for public release.
The demo above reflects the direction of the project today.
The source will be open soon.