Why does background turn black when removing / adding datasources if requestRenderMode is true, can this be prevented?

CesiumJS
1

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

The background turns black in this case with Explicit Rendering. After removing and adding Datasources again, I would like to redraw the whole thing so that the data is up to date again.

This event actually only happens when the zoom level is very high.

2. A minimal code example. If you’ve found a bug, this helps us reproduce and repair it.

https://sandcastle.cesium.com/#c=1Vffbxo5EP5XrLxgrsQQTjmdCI1OITyclCZVSe+lVJXZHcDCa+/ZXpI04n+/sb0sCyFR2kTKlYdkdzy/55tvd5fckKWAGzDkPVFwQwZgRZGxf4KMNpJwO9DKcaHANFr3Y2UTUPBBp0B6a/XRWsRGg+HlsHveGisD/xZg3SdQKRh/1iPOFDBWq+bJWC0xcFJYp7Nz7vhIFyaBR8RdlE8LlTihFSnylDvwh7RJMBmCP29kINNLSLGKWA5LK3vL4iHdddwKCflsvJdEK6slMKlntFG665FGq7xcq21CSmEdxvtyL7nrHXdaUqveUYd1jlt4LAvofeBuzqZSa0PDpeEq1Rnm/Rs5OmquWtFV/Ve68j5+1Bt50l3N3ys4/HFnX8vuPRjuNuwGO6e0YR33c2/49j/igoFywgmcsy1sjnAbLlFiaTSJRu02ub46v+qRS+0Il5KMol8y55a4OZCP3PAMHO4BCt1cWHItMiCMsYEulIteptoQKsERgWl3TvBfP6CASVAzN0fBu3cVKiOiHMGWofZlkU1wobz2F/GVoXANqEoPAz/U06qqfDOOqhqepqEa3wyCHSf2RrhkjjEnIH1damMUo4RpYZw4JCwtpTshg0Zzk91TDcf49L4Ok1xb4ftaMcOAG4dXXP3OpgadwMwAWIp1tXxnmlsgC2n3yP028LbvpkLKgZbabEL4O3Z28Xm4g9gp0hZu8NEf+S2xXNlDC0ZMGztaDm5RK1TNnB45I9SMNnewv9rcrzatif/DWUkLD7nHt2i3gRXlPNpYA7bIoAbkverfkjlXM0hx24SN2pUyYqTMJvA126Jjupf09iiGvVt5AO5h4O7LKbj71hz8Msp9KcO+Pp92X4FQu78oo5JDbGHn+Ncl1u7/klk/Dc/fkFjJGnDP5NbuY2zZfU12rf99FofWKniKj9ttC87viS4cXVMubd4/J8jT/gly3Z+dTgQ9dhahPsK9K3KSzCFZTPQt2LCOTs9mEkcVlhg5VujCkkRya8VUJHHHMUmHKpbFN3Yf2L/hS8R/CbH4lMAvhOq5QZt1+NXf40/2ibuVHJNdhaxLVC6UThbYH+YMTxa0Ch5L8/k4reWE+0+aVCc4aeXYDNxQgr88u/s7pY1SJczmGX53VXiey7szoVLfhY1qax26zKU+kNxAHIaHbUDTBRIDnhi6t0dbE6+MG5tuebLytJr4T7EbXF5iCkVukJsID8+AqSdgghommEJasxQqkYXPPhpEqF/rj8gkeQkabxm/2La2c7sovYbYT1WlH+zIm5S1A8ZqcN+1zq41ffQ1zSsftA761t1JOI0O/xJZrg0ulpGUsbaDLEc2BtueFMkCHEtsMOu310b9VCyJSN+PD3Y+tscHce3wZFpIORLfYXxw2m+j/paZ1NxXfLUEI/mdV5kfnV5EIT5t+228fWhVAhXVUTopnPNP6bsc8Cje1cLHxA4ruefgwwmi359JkSx65eKit8/hot+Oyt55CP0f

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

My application contains a lot of external data (ImageryLayer, Datasources) that are often removed and inserted. When fetching a new list with any number of layers (ImageryLayer, Datasources), this should be redrawn at the end. Only at the end in order not to render again permanently.

4. The Cesium version you’re using, your operating system and browser.

cesium: 1.65.0
OS: macOs High Sierra v 10.13.6
Google Chrome: Version 80.0.3987.163

thanks for any help :slightly_smiling_face:

Bildschirmfoto 2020-04-17 um 14.58.49 Bildschirmfoto 2020-04-17 um 14.58.56

2

Each data source you add should have a readyPromise to tell you when it’s successfully been added to the scene. Have you tried listening for that, and only after that returns true, re-rendering the scene?

3

Hi,
thanks for this information. I’ve never tried that.
I have now created and added this.

Cesium.when(customDataSource.readyPromise).then(function(model) {
        console.log('1 ready');
        viewer.scene.requestRender();
        console.log('scene.requestRender');
      }).otherwise(function(error){
        console.log('error');
      });

I hope it is correct since I did not find anything in the DataSource documentation about ‘readyPromise’?

Unfortunately, it doesn’t work that way either.

I noticed that this problem is only the case in 2D mode.

4

When you add a data source it returns a promise, this is documented here:

https://cesium.com/docs/cesiumjs-ref-doc/DataSourceCollection.html#add

So what you’d need to do is:

var dataSourcePromise = viewer.dataSources.add(customDataSource2);
    dataSourcePromise.then(function(){
      viewer.scene.requestRender();
    });

Although I’m starting to think this may be an issue specific to the custom data source you’re creating. Here’s a simpler example that calls request render each time this billboard changes.

Have you tried recreating your example without using CustomDataSource to determine if that’s what’s causing the issue?

5

Thank you for the example.

I created a new sandcastle example with this and render if both are ready, but the problem is still the same.

Recreating would mean to use this: viewer.entities.add for each list element?

6

That still uses a CustomDataSource. While I haven’t confirmed it, I suspect that may be part of the issue here.

Have you tried adding your entities directly to the viewer and avoiding the custom data source just to confirm this? So instead of:

customDataSource2.entities.add({
          position: Cesium.Cartesian3.fromDegrees(lon, lat),
          label: {
            
            fillColor: Cesium.Color.RED,
            font: '16px sans-serif',
            text: value.toString()
             }
        });

You would do:

viewer.entities.add({
          position: Cesium.Cartesian3.fromDegrees(lon, lat),
          label: {
            
            fillColor: Cesium.Color.RED,
            font: '16px sans-serif',
            text: value.toString()
             }
        });
7

It works perfectly via the viewer.entities.add. In Link, however, I omitted the removal.

If I have to work with many entity packages (create and remove a lot), is dataSource still state of the art?
Or is there another way?

8

What I’ve done in the past is simply keep my own set of arrays in my application. So you might have:

var labelEntities = [];
var buildingEntities = []; 
// etc

And then when you add an entity you’d do:

var newEntity = viewer.entities.add({ ... })
labelEntities.push(newEntity);//Or add it to whatever the correct collection is

And if you want to add/remove/show/hide you can iterate over any of these arrays and apply these changes. It’s a little more code but I think it’s just as efficient.