I’m currently working on a project where I receive lots of sensor data on my server, which I pass to the frontend using WebSockets to visualize it.
I do have 5 sensors which are visualized by 5 spheres (EllipsisGraphics in an EntityCollection). These spheres have changing radii and colors, depending on the sensor value.
Now these values fly in with about 1-5 per second. What’s the best way to process this in the frontend? My current set up (Geforce GTX 960 with 3.4 GHz octa core) is slow at rendering - new data arrives faster than my PC can draw (about 1-2 per second, instead of 1-5). Also, I’m using some transparency and the spheres flicker when being updated - it seems like they have no transparency when rendering first, then the transparency comes back. Removing transparency doesn’t make it faster though.
I thought about the following approaches:
- cache incoming data at the frontend for 1s, suspend+resume EntityCollection events and only force rendering once a second. This is slow when using 10 sensors (spheres) and also on slowlier devices. Is there a more generic method possible?
- the primitives API seems to be a bit more performant (btw, is there some guide about the differences?). While I can update the color nicely, how can I update the radius?
- shall I collect the data at the server and push it out using a CZML stream via Websocket? Does this help performance?
- is it possible to cancel the current rendering process?
As it’s only some spheres with changing radii and colors which should be drawn at quite some FPS, I wonder why it’s thaaat slow. Is there something that I overlooked? Are the ideas going into the right direction? Shall I rather post my current code so we can find the reasons why it’s so slowly?
Thanks in advance