3 thousand entities slowing down drawing of entire application

CesiumJS
1

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

Background:

I have 5 queues, each storing up to 600 semi transparent polygon entities. A unique polygon is added to each of the 5 queues each second from an external source. Once the queues are filled to 600 (after 600 seconds), I hide and remove one polygon from the queue and data source each second.

In theory this should result in 2*5 = 10 polygon updates/second. 1 per queue that is removed/undrawn, and 1 that is added/drawn each second.

I am concerned that for the other 598*5 "static" polygons which often overlap, that removing one of the overlapping polygons causes the rest to change shading, thus slowing the drawing/frame rate of the entire application.

I am running a dynamic application with around 20 other entities being dynamically updated each second.

The Problem:

As the queues fill to their maximum size of 600 entities the application starts to slow down considerably - at this point it is displaying 3000+ entities (600 entities per queue * 5 queues + the 20 other dynamic entities). If I dynamically hide all of the polygons with a button click the drawing/updating of the other entities rapidly progresses to catch up and then steadies. Thus I believe the large amount of polygon entities is slowing down the application.

Based on this:

1)What is the most performant way/approach to implement this workflow within cesium?

2) What are some things I can try to maintain the frame rate with this current design?

3) Is it possible that removing/adding a semitransparent polygon in a stack of overlapping polygons is changing the shading of the other polygons, thus leading to the slow down in drawing?

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

Each letter/digit represents a unique polygon. Each enclosed bracket is the queue as it is updated in time.

t = 0sec t = 1 sec t = 5 sec t = 6 sec etc
                 
1)< > < a > < t,o,j,e,a > < 1,t,o,j,e >
2)< > < b > < u,p,k,f,b > < 2,u,p,k,f >
3)< > < c > < v,q,l,g,c > < 3,v,q,l,g >
4)< > < d > < w,r,m,h,d > < 4,w,r,m,h >
5)< > < e > < x,s,n,i,e > < 5,x,s,n,i >

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

Dynamically show/hide entities based on when they were received in the cesium application.

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

Cesium 1.5. 64bit i9 2.9ghz. Chrome.

2

Have you tried this? https://cesium.com/blog/2018/01/24/cesium-scene-rendering-performance/

3

It seem the slow down you are experiencing is more due to the semi-transparent nature of the polygons. Without seeing a complete code example I am guessing a bit but alpha-blending (semi-transparency) is an expensive per-pixel graphics operation. You can find plenty of literature on this in 3d graphics programming books and websites. The final color that ends up in the frame buffer has to be computed for each overlapping polygon. This problem will be worse depending on the size of your polygons. In other words as the polygons take up more screen space there are more pixels that must compute the alpha blended value. To test this you can try two things: First, try changing the shading of your polygons to a solid color (no transparency whatsoever), and second, you can try making your polygons smaller. If the performance is better, then alpha-blending is the most likely culprit.

4

I have tried this but it seems that it only prevents rendering when things in the view arent changing. In my situation polygons and other elements in the view are constantly being drawn/redrawn or updated.