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):
However, if I do the same thing making viewer a localized variable, the response rate and FPS is far superior:
Windows 10, Chrome 80.0.3987.122 (Official Build) (32-bit)