RouteAnimation is a personal experimental project born from a simple question: 'How can we make outdoor activity data more visually engaging?' While many platforms track movement, very few provide an accessible way to create cinematic visualizations without expensive software.
The core challenge of this project was processing video rendering directly in the browser. By leveraging FFmpeg.wasm, routeanimation allows users to convert their spatial tracks into MP4 videos without ever uploading sensitive location data to a server. This 'local-first' approach ensures maximum privacy and speed.
Key Technical Features:
• 3D Terrain & Buildings: Integration with Mapbox GL JS to provide realistic elevation and urban environments.
• Path Smoothing: Implemented Web Workers to process raw GPX data using Turf.js, ensuring the camera movement is fluid and cinematic.
• Dynamic Camera Control: Users can adjust pitch, zoom, and speed to customize the flyover experience.
• Client-Side Transcoding: Real-time recording of the Mapbox canvas, processed into high-quality H.264 video via FFmpeg.
This project showcases the intersection of WebGIS and modern web media processing, proving that complex video production tasks can now be handled entirely within the browser environment.
