hope you are good.

For my university project, I am using resium (cesium react version) to depict the satellites on the globe along with its orbits and footprints. Till the satellite depiction with orbit is working pretty fine and cesium is giving me 60 fps. But when I add Cylinder Graphics to display the satellite footprint, suddenly the fps drops to 10-11 and cesium start lagging.

My program takes a file input with the 100 satellite tles. I have a function named generatePositions which takes an array of tles and calculate the positions over time for each tle. It results into an array of positionsOvertime arrays.

I tried using EllipseGraphics instead, but the performance is still lagging. If I use PointGraphics, it works pretty fine with 60fps.

If I just comment out the CylinderGraphics component, rest of the code works great with 60 fps.

Here is my viewer react code rendering:

<Viewer full>
      <Clock
        startTime={start.clone()}
        currentTime={start.clone()}
        stopTime={stop.clone()}
        clockRange={ClockRange.LOOP_STOP}
        multiplier={1}
        shouldAnimate
        onStop={() => { setCurrentHour(currentHour + 1.66) }}
      />

      <Scene ref={sceneRef} debugShowFramesPerSecond={true}>
        <Camera ref={cameraRef} />
        {tles.length >= 0 ? generatePositions(tles).map((positionsOverTime, i) => {
          return (
            <div key={i}>
              <Entity
                position={positionsOverTime}
                name={labels[i]}
              >
                <PolylineGraphics positions={linePositions[i]} material={Color.BLUE} width={1} />
                {/* <PointGraphics color={Color.RED} pixelSize={20} fill={true} heightReference={0}/> */}
                <LabelGraphics text={labels[i]} font="12px arial" />
                <BillboardGraphics image="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADJSURBVDhPnZHRDcMgEEMZjVEYpaNklIzSEfLfD4qNnXAJSFWfhO7w2Zc0Tf9QG2rXrEzSUeZLOGm47WoH95x3Hl3jEgilvDgsOQUTqsNl68ezEwn1vae6lceSEEYvvWNT/Rxc4CXQNGadho1NXoJ+9iaqc2xi2xbt23PJCDIB6TQjOC6Bho/sDy3fBQT8PrVhibU7yBFcEPaRxOoeTwbwByCOYf9VGp1BYI1BA+EeHhmfzKbBoJEQwn1yzUZtyspIQUha85MpkNIXB7GizqDEECsAAAAASUVORK5CYII=" scale={1.5} />
                <CylinderGraphics length={500} topRadius={100} bottomRadius={251000} material={Color.RED} />
              </Entity>
            </div>
          )
        }) : null}
      </Scene>
    </Viewer>

I would be so grateful, if someone helps me to identify why cylinder graphics are causing frame drops and how to fix it. PS. I know, i have hardcoded the props for CylinderGraphics, which I will fix later.