Visual artifacts when displaying many polylines

[Ben-W]

Hello,

I am experiencing a weird bug when trying to display orbits with polylines. When I display a few at a time, everything is as expected. When I display many of them, a few will randomly start to glitch and appear to point towards [0,0,0] (or sometimes a random point away from the globe). I have attached a screenshot, though it doesn’t get the full effect. The line pointing towards the middle flickers and wobbles constantly.

I’ve done some debugging to try to see if what’s going on is my fault–I check to make sure I’m not actually generating any Cartesian3s with wild values:

  calcEcefPositions(currTEMEToECEFMatrix: Matrix3): void {
    if (!this.computedStyle.showOrbit) return;
    for (let i = 0; i < POINTS_PER_PERIOD; i++) {
      Matrix3.multiplyByVector(currTEMEToECEFMatrix,
        this.orbitData.temePositions[i],
        this.orbitData.ecefPositions[i]);
      const magnitude = Cartesian3.magnitude(this.orbitData.ecefPositions[i]);
      if (magnitude < 1e4 || magnitude > 1e10) {
        console.log('invalid point generated: ' + this.orbitData.ecefPositions[i]);
      }
    }
    // close loop
    Cartesian3.clone(this.orbitData.ecefPositions[0], this.orbitData.ecefPositions[POINTS_PER_PERIOD]);
  }

Each entity’s polyline is completely isolated from each other, they don’t share common Cartesian3s or anything:

      ecefPositions: Array.from({ length: POINTS_PER_PERIOD + 1 }, () => (new Cartesian3())),
      temePositions: Array.from({ length: POINTS_PER_PERIOD }, () => (new Cartesian3())),

When I pause the simulation, the artifacts are still there (and still move around, oddly enough). When I log the position arrays of the glitching polyline, they look totally fine (I can attach said logs if it helps). Also, if I remove enough other entities/polylines from the screen, the glitching polyline goes back to normal.

Is this a known Cesium issue or is it a me issue?

Thank you very much,

Ben

EDIT: I realized I forgot to include my code for the polyline: it’s just a callback property pointing to the ecefPositions array.

entity.polyline = new PolylineGraphics({
      positions: new CallbackProperty(() => { 
        return this.orbitData.ecefPositions;
      }, false),
material: Color.WHITE,
});

[mzschwartz5]

Hi @Ben-W,

I did a search through issues tagged with polyline, but I don’t see anything that looks related, by title at least.

I’m not sure it has to do with the number of polylines, though. Just based on the image, it doesn’t look like there are TOO many (maybe < 100? It’s not unheard of to use thousands).

Here are a couple questions / thoughts that’ll help us move forward and get to the bottom of this:

1. When you say “a few will randomly start to glitch” - do they change back and forth between expected direction and unexpected? Or do they just stay glitched.
2. If you haven’t already, could you try to identify a particular polyline that’s glitched, and only render that one, and see if the issue persists?
3. If you could, it would help us a lot if you can reproduce the issue in a Sandcastle demo. Then we can work with the code / issue directly.

Best,
Matt

[Ben-W]

I agree it probably isn’t too many polylines, it was just strange to me that the artifacts disappeared with fewer entities, and appeared as I added more entities.

1. ‘a few will randomly start to glitch’ was vague, I apologize. What I meant was, as I add more entities a few of the lines will develop that spikey-looking artifact from the screenshots. The polylines that develop the artifacts aren’t the same–which one it is changes every time. Also, polylines can start/stop glitching as simulation time goes on, though it does seem to me that there are a few common culprits on any given iteration of testing–there are usually 3-5 (which exact satellites the 3-5 belong to changes each iteration) that switch between glitching or not, and the rest are fine.

2. Unfortunately, which polyline glitches isn’t consistent. Also, no polylines glitch by themselves, or even in low numbers (<50 or so). The issue only occurs with >50 polylines (not an exact number), from my testing.

3. I’ll try to get a demo up and running on Monday; it’d be a pretty involved process.

I’ve attached a link to a screen recording in case it clears anything up. I can’t upload a video to the forums directly.

Here’s one that shows how the problem shows up as I add more, then goes away when I remove the other entities:

[mzschwartz5]

Got it, that gives me a much better understanding of the issue, thanks. Two follow-ups:

1. It looks like you’re creating each polyline individually. I wonder if the problem solves itself if you use a PolylineCollection. This is going to be much better for performance, anyway.
2. Just to completely rule out the data being the issue, rather than using a callback property, can you maybe use a constant property or something, and just set the positions to the initial ecefPositions data (at t = 0)? Granted, you did say it happens even when the simulation is paused, but can’t hurt to be too careful.

-Matt

[Ben-W]

Very sorry, I forgot to give an update. Switching to a PolylineCollection was absolutely the right call. It got rid of the artifacts and improved performance, as you said. Thank you very much.