Load ModelGraphics synchronously

CesiumJS
1
  1. A concise explanation of the problem you’re experiencing:

I am trying to render an Entity with 1) PathGraphics of multiple satellite orbits from a JSON file (25mb) and 2) a ModelGraphics glTF model from cloud storage in .glb format (13mb). Since both files are relatively large there’s a delay when loading the page / Viewer until they are shown. I noticed the glTF model download and processing occurs asynchronously over many frames. As such the model takes >20 seconds to download and display. Is there a way to set the ModelGraphics to load synchronously? The Model class that underlies the ModelGraphics class has an asynchronous=false option but the ModelGraphics class does not.

  1. A minimal code example

N/A

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

I’d like to do this to improve UX by making the model appear faster when the page is loaded. Even if the Viewer is not interactive and playing when the model is loading, to the user it will seem like the page loads faster if the model appears in <1 sec vs. >20 seconds right now.

  1. Things I have tried:

  • Get reference to the Model contained in ModelGraphics and created by ModelVisualizer.js and then set the async property to false. This does not work because the Model has already been created so the async property is only a getter, not a setter. See: Question How can i get model loading event in cesium viewer

  • Another user was also trying to get access to the Model entity here: https://groups.google.com/g/cesium-dev/c/4wVIah9ZAuk

  • Stored the model .glb in the browser’s cache. The network portion fetching the model is not the bottleneck. It’s Cesium preparing the model to render asynchronously over many frames.

  • Enabled requestRender mode to free up CPU & memory by not re-rendering unchanged PathGraphics on each frame. This improved application performance overall but did not improve .glb model render time.

Thank you!