How does one decrease CPU usage for simple animation?

CesiumJS
1

1. A concise explanation of the problem you're experiencing.

Too much CPU is being used when running an animation. I am looking for a way to minimize CPU usage.

I am currently using the basic viewer with the basic animation example found in the docs (see code example below). I have additionally set the viewer's requestRenderMode flag to true to conserve CPU when the display is idle.

When the display is idle, the CPU usage is under 3%. When the animation is running, CPU usage is up to 100%, averaging between 80% and 90%. I am measuring the CPU usage with Firefox's about:performance. I set up this example using Angular via the Cesium blog.

2. A minimal code example. If you've found a bug, this helps us reproduce and repair it.

ngOnInit() {
    const viewer = new Cesium.Viewer(this.el.nativeElement, {
      requestRenderMode: true
    });

    var clock = new Cesium.Clock();
    var clockViewModel = new Cesium.ClockViewModel(clock);
    var viewModel = new Cesium.AnimationViewModel(clockViewModel);
    var widget = new Cesium.Animation('animationContainer', viewModel);

    function tick() {
        clock.tick();
        Cesium.requestAnimationFrame(tick);
    }
    Cesium.requestAnimationFrame(tick);
  }

3. Context. Why do you need to do this? We might know a better way to accomplish your goal.

I need to do this because I am working on an Angular dashboard with multiple widgets, one of which will be a cesium display. This display should constantly be showing a simple animation. It severely bogs down the dashboard's performance.

4. The Cesium version you're using, your operating system and browser.

Cesium version: 1.48.0
OS: Ubuntu 18.04
Browser: Firefox 61.0.1

2

I think what’s happening there is that Cesim.requestAnimationFrame will run every frame, and since clock.tick() advances the simulation time, this will trigger a new frame to be rendered, and this is just like rendering every frame without using requestRenderMode. You might want to tweak the maximumRenderTimeChange to a higher value than the default see:

https://cesium.com/blog/2018/01/24/cesium-scene-rendering-performance/#handling-simulation-time-changes

That page also describes how you can set the max render time change to Infinity so you can control exactly when the next frame is rendered. If that (or something else) fixes it please post back here so others can also see the answer!