Billboards are replaced with black squares (angular 8, windows 7)

CesiumJS
1

Hi

I need to display on map thousands of billboards with text.

I create images for the billboards using canvas,

code example: Sandcastle example

In the example i tried to display 1200 billboards, when i added all the billboards to one BillboardsCollection i got an error:

DeveloperError: Width must be less than or equal to the maximum texture size (8192)

The fixed this issue by dividing the billboards to several collections.

Unfortunately large amount of billboardCollections causes the FPS to be very low and the map responding very slow.

code example: example2

How can i improve the performance? I need to display all those texts without causing the FPS to drop from 60 to 10?

Otherwise how can i display large amount of texts on map beside billboards\labels?

Thank you :slight_smile:

2

I appreciate you putting together these code examples and providing the workaround you’ve found!

In general the solution to rendering large amounts of data like that is tiling it, so you only load only what’s needed for any given view. For this case, I think clustering might help, so it shows fewer entities when zoomed out but you can still see them all when you zoom in to any particular area:

https://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=Clustering.html

Let me know if that helps.

3

Hi,
Thank you for the quick response.
I tried clustering in my project, but the previous error I described with the texture occurred again.. because I added all my billboards to one dataSource and it's texture wasn't big enough.

4

Thanks for trying that out. I meant clustering will help in the case when you have a low FPS due to have multiple datasources.

5

I thought about that, but the clustering is done on specific dataSource… if I want it to work on multiple datasources I need to build a system in my project that will add billboard to collection based on it’s location.

How would you suggest to deal with this situation?

I mean the best way I can think about is dividing the screen to little areas, for every area I will manage the billboard collections as I described earlier and every collection like that will be clustered.

So for every billboard I will need to calculate the area it fits and then check if the collection of that area has place for the new billboard or do I need to create new collection.

I have another question for you about dividing the billboards to several collections: when I add new billboard, the texture of the collection is not updated right away and then I cannot know if the next billboard will fit the collection texture, right now I create new collection every constant amount of billboards, is there other more efficient way to know if the next billboard require creating new collection?

בתאריך יום שלישי, 27 באוגוסט 2019 בשעה 21:48:18 UTC+3, מאת Omar Shehata: