Hide globe until all imagery layer tiles are loaded?

CesiumJS
1

Using Cesium 1.117,
the goal is to display the imagery layer flicker free.

The solution would be something like set the globe and the imagery layer’s alpha to 0 and as soon as every tile is loaded, set everything to alpha 1. Or brightness to 0 and then to 1.

I tried many things but I still get a flicker and/or I see the tiles morphing from low to normal resolution.

I am using the event viewer.scene.globe.tileLoadProgressEvent to know when the last tile was loaded.
Maybe I should use other globe events instead?

Thanks for the tips!

2

Hi there @55Cs

Do you mean only on the initial load, or do you mean whenever the camera view changes?

Also viewer.scene.globe.tileLoadProgressEvent will trigger a few times, whenever a new tile is loaded. The listener can take an argument. When this is 0, the load queue should be empty and initial loading will be complete.

If you are still running into issues, could you please post a Sandcastle code example to help us reproduce?

3

Hi Gabby,

It’s only on the initial load. I have no issues when I use viewer.scene.globe.tileLoadProgressEvent to switch between imagery layers.
I do it like this, because the initial map can be set from different choices.
My code is similar to this

const viewerOptions = {
    geocoder: false,
    imageryProvider: false,
    baseLayerPicker: false
};

const viewer = new Cesium.Viewer("cesiumContainer", viewerOptions);

await Cesium.BingMapsImageryProvider.fromUrl(
    'https://dev.virtualearth.net', {
    key: 'INSERT_BING_MAPS_API_KEY_HERE', // <- real key here
    mapStyle: 'AERIAL'
}).then((bing) => {
    viewer.scene.imageryLayers.addImageryProvider(bing);
});

Here is my sandcastle

Thanks!

4

Hi @55Cs,

Something like this? I swapping in a different imagery provider for the sake of a working example, but you can swap that in for whatever imagery provider you need.

5

Yes, thank you for fixing the flicker!
Now how can I hide the blue globe that we see for less than a second before the flicker free imagery layer is shown? What I want is the globe to appear directly with its flicker free layer, no blue globe should be seen before.

Thanks again!