How to Freeze and Unfreeze the Cesium Viewer During flyTo Animations for Frame-by-Frame Screenshots

CesiumJS
1

Dear Cesium Community,

I’m currently working on creating beautiful, drone-like landscape videos with Cesium. My workflow involves automating screenshots of the scene using Puppeteer and then compiling these into smooth videos with FFmpeg.

Current Workflow

  1. Move the camera slightly.

  2. Wait until all 3D Tiles are fully loaded and rendered.

  3. Take a screenshot of the scene.

  4. Repeat the process.

This works well when I manually control the camera, but I’d like to leverage Cesium’s built-in flyTo method to automate the camera movement. However, the flyTo method runs to completion without waiting for all 3D Tiles to load and render at each frame. This makes it difficult to capture high-quality, fully-rendered screenshots.

What I Need

I’m looking for a way to:

  1. Pause (freeze) the viewer during the flyTo animation to allow time for all 3D Tiles to load and render.

  2. Take a screenshot once everything is fully rendered.

  3. Resume (unfreeze) the animation from where it left off, continuing the flight to the next frame.

What I’ve Tried

I attempted to use a combination of:

• viewer.clock.shouldAnimate = false

• viewer.clock.canAnimate = false

• viewer.scene.requestRenderMode = true

However, these methods only partially pause the scene and do not fully halt Cesium’s camera movement during flyTo.

My Question

Is there a way in Cesium to:

  1. Completely pause or freeze the viewer during a flyTo animation?

  2. Wait until all 3D Tiles are loaded and rendered before proceeding?

  3. Resume the animation smoothly from the paused state?

Any insights, suggestions, or alternative approaches would be greatly appreciated!

Thank you for your time and assistance.

Best regards,

Andrei

2

Hi @andrei.ziminov, thanks for the questions! This seems like a cool use case!

  1. Completely pause or freeze the viewer during a flyTo animation?

There’s currently no way to pause the camera in the middle of a flight path. I think you’re likely going to have to implement your own methods to move the camera little by little along the intended path. Under the hood the flyTo function uses the (private) CesiumFlightPath.createTween class/method. I think you can probably use parts of that class for inspiration on the logic to move the camera smoothly between 2 points.

  1. Wait until all 3D Tiles are loaded and rendered before proceeding?

I might suggest taking a look at the Cesium3DTileset.allTilesLoaded and Cesium3DTileset.loadProgress events. These could probably help you trigger the image and next step at the correct time. There’s also a similar event for the globe itself in Globe.tileLoadProgressEvent

There’s currently no way to check the ready state of the whole viewer but you should be able to utilize those events for the specific tilesets you want to load.

I hope that helps get you started at least. Feel free to continue this thread with findings, I’m sure others would be interested too.

3

Hey,

After months of fiddling, experimenting, and cursing at ChatGPT, I finally found a way to make this work!

It turns out it’s possible by intervening in Cesium’s render loop and monkey-patching the browser. Now we can generate stunning real estate videos—just like the flyovers in Google Earth.

Unfortunately, I can’t upload MP4s here, but if you’re curious, feel free to reach out—I’d be happy to share an example. It looks really cool.

1 Like
4

Hey @andrei.ziminov that sounds awesome! Glad you were able to make it work!

Would you be willing to share some snippets of the code needed or even a Sandcastle example? It’s a niche use case but I’m sure others would appreciate it.

As for a video I think you should be able to link and embed youtube (or maybe vimeo) videos so maybe you can upload it there unlisted and share that? We’d definitely enjoy seeing what you’ve made!