My current project involves VueJS and Cesium, but I'm facing a performance issue with a significant drop in frame rate. While I have identified the problem area, I am unsure of why this is happening and how to resolve it.
export default {
name: "Map",
components: { ... },
data: function () {
return {
viewer: {}
}
},
methods: { ... },
mounted() {
// Initially achieving 150-200 FPS; but unable to access the viewer object outside this component.
let viewer = new Viewer('cesiumContainer');
// Experiencing only 20-30 FPS; however, grants me the necessary access for other components.
this.viewer = new Viewer('cesiumContainer');
... remaining source code ...
}
Despite being able to maintain good frame rates above 150-200 FPS when rendering all the content required, I am struggling with significantly lower FPS ranging from 20-30. Even after removing other parts of my code and focusing solely on rendering the Cesium world with the provided source code, the problem persists, leading me to believe this might be the core issue. However, I am baffled as to why 'this.viewer' is causing such a drastic drop in performance. How can I address this issue?
EDIT #1:
For reference, here is a sandbox that combines Vue and Cesium: https://codesandbox.io/s/peaceful-satoshi-1mog9
By using the search feature at the top right corner, navigate to "Grand Canyon National Park, AZ" and utilize 'Ctrl' along with mouse movements to adjust the camera angle for terrain viewing. This action may result in low FPS and sluggish response time:
https://i.sstatic.net/ILIEP.jpg
However, switching to a localized variable approach for the viewer yields a much better response time and improved FPS: