Cesium & Vue - Performance Issue - Low FPS and Slow Rendering

CesiumJS
1

I posted this over on Stack Overflow but figured I bring it directly to you folks to see if anyone has had any similar experiences (Local variable vs data. Huge loss in performance.)

What it boils down to is that I am utilizing Vue for my front-end application. When incorporating Cesium, I’ve run into problems rendering terrain where I see a huge drop in FPS. At first I thought it had to do with the entities I was plotting. But when I scrapped everything out and just loaded the viewer and only the viewer, I could still see the impact on performance. When I keep let viewer = new Viewer('cesiumContainer'); local to the Vue component, Cesium’s response is as smooth as butter. However, when I attach it to the data property like so this.viewer = new Viewer('cesiumContainer');, which affords me the ability to interact with that viewer object throughout other components, my application responds very poorly. Based on feedback, I’m assuming this is because Vue makes every data property reactive… so if the camera is changing or imagery is being loaded, I’m assuming this is bogging things down since Vue is also tracking all these ongoing updates…? I’m just at a loss right now how to proceed on this.

This issue can be seen here on the sandbox I setup: https://codesandbox.io/s/peaceful-satoshi-1mog9

Using the search function, go to “Grand Canyon National Park, AZ” and angle the camera to see the terrain. You should get something like this (note the low FPS and sluggish response rate):

Slow.JPG
Slow.JPG1507×642 246 KB

However, if I do the same thing making viewer a localized variable, the response rate and FPS is far superior:

fast.JPG
fast.JPG1540×655 248 KB

Windows 10, Chrome 80.0.3987.122 (Official Build) (32-bit)

2

While I haven’t used Vue myself, my understanding of how it works agrees with your hypothesis.

The issue is that you’re defining viewer inside of data in particular.

Per https://stackoverflow.com/q/45814507/62937 and https://stackoverflow.com/q/52728947/62937 , you can define variables in other parts of the Vue init process, which will keep them from being made reactive.

3

Yes, I found this a while back in my application as well. I have since been careful to keep cesium and my large data (that doesn’t need to be reactive) out of vue’s reactivity reach.

Essentially in my CesiumViewer.vue I just declared a “let cviewer” at the file level, “cviewer = new Viewer…” in mounted, and pass it around (to constructors or methods) as needed.

I found a huge improvement after making this change.