Home

RouteRewind: Turning GPS Tracks into Cinematic 3D Recaps in the Browser

In this article, I introduce RouteRewind, a web application I built that turns a GPS track into a cinematic 3D fly-through video. I explain the problem with the flat 2D polyline every fitness app hands you after an activity, and walk through how RouteRewind solves it by rebuilding your route as a photorealistic 3D scene that reflects the actual weather and light of the day you were out there. I also cover the rendering pipeline (the process that encodes the video frame by frame instead of screen-recording the canvas), the client-side architecture (meaning all processing stays in your browser) that keeps your GPS data on your own device, and the built-in 3D route planner for trips you haven't taken yet. Finally, I discuss the trade-offs of running all of this with no backend, specifically around performance limits and what you give up without server-side storage, and where the project goes next.

The Problem with the Flat Line

If you run, hike, or ride with a watch, you kinda know the ritual. You finish something genuinely memorable, like a ridgeline at sunrise, or a climb that really broke you halfway up. You sync the device, and the app answers with a thin coloured line on a flat basemap. Under it, there’s a table of numbers. Distance, pace, elevation gain, all neatly arranged.

I’ve spent a fair amount of time on this blog writing about the other end of that pipeline. In the map matching article I went through Valhalla’s Meili, and how a Hidden Markov Model snaps noisy GPS points back onto a road network. My thesis, Pyehicle, was entirely about preprocessing vehicle trajectories, cleaning, resampling, reconstructing. All of that work is about making spatial data correct, in a very technical sense.

But correct and communicative are not the same problem. A map-matched trajectory can be mathematically precise, and visually kind of inert. At some point I got curious about the opposite end: if you already have a clean track, what is the most compelling thing you can actually do with it?

That question turned into RouteRewind, a web application that takes a GPS track and renders it as a cinematic 3D fly-through video, entirely inside your browser.

A camera sweeping along a route over real terrain and satellite imagery.

What It Actually Does

The core loop is three steps: get a route in, preview it in 3D, export a video.

Getting a route in can happen three different ways. You can upload a GPX file exported from Garmin, Apple Watch, Komoot, Wahoo, or basically any GPS device, with no account, no login. Another option is connecting Strava and pulling your activities straight from there, filtered by runs, rides, hikes, or walks . And if the route doesn’t exist yet, you can just draw one from scratch, using the built in planner.

After the track is loaded, RouteRewind kind of builds this 3D scene around it, then a camera flies along the path. What you end up with is not really a map with a line on it. More like terrain with true elevation , satellite imagery draped across it, 3D building footprints in city sections, scattered tree canopies, and water where your route glows right through the middle of it.

Then you export the whole thing. MP4, in whatever aspect ratio the platform you’re posting to expects.

Building the World

The scene is rendered with CesiumJS, which is the part of this project I did not have to invent. Cesium takes care of the WebGL globe, the terrain tessellation, and also the camera math. But it does not decide what goes into the scene , and that’s the bit that ended up being most of the interesting work, kind of quietly hidden there.

In the browser the world gets stitched together from several separate sources, and it reaches out to each of them on its own directly:

  • Cesium ion streams world terrain tiles for the bounding region around your route. That’s the reason you get real topography, not some flat plane with a photo texture pasted on it.
  • Satellite imagery is layered on top of the terrain, with a choice of provider MapTiler, Bing, or Esri. The results differ quite a bit in resolution and also color tone depending on where you are, so it’s worth switching if your area looks a little too washed out.
  • The OpenStreetMap Overpass API provides building footprints and land-use shapes. Building outlines get pulled upward into 3D geometry, and land-cover polygons tell the renderer where trees get scattered. This is what keeps cities from feeling like “flat decals” instead of actual places.
  • Nominatim reverse-geocodes the first point of your track into a readable place name.
  • Open-Meteo returns the historical weather for the date and coordinates of your activity.

And that last one, honestly, is my favourite detail. It deserves a whole sentence because it’s not just data, it changes the look in a very obvious way. RouteRewind can light the scene using the real conditions from the day you were out there, the real sun position for that time of day, at that latitude, with that weather. A 6am winter run does not look like a 2pm summer one. If you want to override it, there is a plain Daylight mode, and also a forced Golden Hour setting, but by default it tries to reconstruct what you actually saw. There is no backend in this pipeline. Your browser is the client for all of it.

Rendering the Video

The obvious way to turn a WebGL animation into a video is to screen record the canvas, run the animation in real time and capture frames as they are painted. It is simple, and it is fast. It is also entirely at the mercy of the user’s GPU. If the scene stutters during playback, the stutter is baked permanently into the file. Someone on an older laptop gets a video that looks noticeably worse than someone on a gaming rig, even if the input is identical.

RouteRewind does not do that. It renders the fly-through frame by frame, off the clock, and it encodes each finished frame into the MP4 in browser memory. The renderer waits for every frame to be fully drawn, before moving to the next one. Nothing is dropped because nothing is racing a wall clock.

The trade-off is honest, and upfront: a longer video on weaker hardware takes longer to produce. A 30-second clip at 4K and 60fps is real work for a laptop. But the output is the same on every machine, smooth complete, and at the quality you asked for. There is also a “stop and save what’s done” control if you decide partway through, that you have enough.

For the preview, which does run in real time, the app auto-detects your hardware and picks a graphics tier Performance, Balanced, Quality, or Ultra. You can override it in Settings. Lowering it only affects what you see while scrubbing , it does not touch the exported file.

Making It Yours

A fly-through with default settings is fine. The controls are where it becomes yours.

Camera. Four behaviours: Follow, which tracks just behind you; Bird’s Eye, which sits high and wide; Side, which runs a profile view; and Low Sweep, which skims close to the ground. Low Sweep is the one that sells elevation on a climb it makes the gradient physically legible in a way a number never does. Duration runs from 15 seconds up to two minutes, which effectively controls how fast the camera moves through the track.

Scene. 3D trees, water, buildings in preview, start and finish markers, place labels, and imagery clarity are all individually toggleable. The route line itself has adjustable width and glow, and there are visual style presets you can cycle through with the number keys while previewing.

Photos. You can drop in your own images, and they appear as cards on screen as the camera reaches the location where each was taken. You control how long they stay up. This is the feature that turns a route video into an actual recap of a day, the summit shot appears at the summit, not in a grid at the end.

Stats. A live overlay can display pace, speed, distance, elevation gain, altitude, heart rate, and progress as the camera moves. Separately, you can generate a standalone stats card as a transparent PNG, which is meant to be layered over a photo in a Story rather than used inside the video.

Music. Four royalty-free beds are included, Cinematic, Uplifting, Chill, Epic or you can upload your own track.

The whole preview is keyboard-driven once you know it: P to preview, Space to pause, 1/2/3 for styles, S for a still, R to render, Esc to stop. And after any preview finishes, the camera unlocks into a free-orbit mode so you can fly around the scene yourself.

Export is MP4 at 9:16 for Reels, TikTok and Stories, 16:9 for YouTube, or 1:1 for feed posts, at 720p, 1080p or 4K.

The Route Planner

The planner lets you draw a route anywhere on the map running, cycling, or hiking mode, then it snaps your points onto real paths and roads. While you build it, you get live distance, a elevation profile, plus an estimated time. You can close it into a loop, convert it to an out and back, reverse the direction, insert points by clicking on the line, drag them around, or just double-click to delete. After that, routes can be saved and exported as GPX so you can load them onto a watch.

Then, there is the part where you preview the route in 3D before you have ever set foot on it. Actually seeing the climb as terrain rather than as a line on an elevation chart gives you a different kind of read, on what you’re getting into.

Privacy Is an Architectural Consequence

RouteRewind has no backend and no database. GPX files get parsed right in the browser and they are never uploaded. There are no cookies, no analytics, no tracking pixels, no fingerprinting. The third-party services involved do see something, though. Cesium ion and the imagery provider will see your IP and the tile coordinates for the area around your route. Overpass gets a bounding box not your actual track. Nominatim sees your starting coordinate. Open-Meteo sees a date plus a start coordinate. That is the straight-up price of drawing a real world, instead of some synthetic substitute, and it is written on the site rather than hidden.

Trade-offs and Limits

The app needs WebGL and a reasonably modern GPU. Video encoding works most reliably in Chrome or Edge. Rendering a long clip at 4K on a five-year-old laptop takes real time, that is the direct, deliberate cost of the frame-by-frame approach. And doing everything client-side means the first load has to pull terrain and imagery tiles over the network, so a poor connection is felt immediately.

These are consequences of the no-backend decision, not accidents. I would make the same call again: not having a server means not having a database of other people’s location histories, and that seemed like the correct thing to not have.

Concluding Thoughts

There is a gap between spatial data that is correct and spatial data that is legible. Most of my previous writing has been about the first half, snapping trajectories to road networks, cleaning noisy points, making the numbers trustworthy. RouteRewind is an attempt at the second half, using the same underlying data. It is free, with every feature included 4K export, the planner, music, photo stories, all of it. No subscription, no account required.

Try it at routerewind.com. Upload your last activity, or draw the route you have been meaning to do, and see what your data looks like when it stops being a line on a map.

If you break it, or it renders something strange over your part of the world, I want to hear about it.

© nickdoulos.com by Nick Doulos is licensed under CC BY 4.0