Discrepancies in polyline drawing

[MrWhatHuang]

What happened?

When drawing a polyline to achieve a dynamic trajectory effect, I used CallbackProperty to handle the coordinate data, but the rendering result is incorrect.

Reproduction steps

import * as Cesium from "cesium";

const viewer = new Cesium.Viewer("cesiumContainer");

const arr = [
    [
        119.61909220949711,
        34.54518113403259
    ],
    [
        119.61909220949711,
        34.54518113403259
    ],
    [
        119.61909220949711,
        34.54518113403259
    ],
    [
        119.61909220949711,
        34.54518113403259
    ],
    [
        119.61909220949711,
        34.54518113403259
    ],
    [
        119.61909220949711,
        34.54518113403259
    ],
    [
        119.61909220949711,
        34.54518113403259
    ],
    [
        119.61909220949711,
        34.54518113403259
    ],
    [
        119.61909220949711,
        34.54518113403259
    ],
    [
        119.61909220949711,
        34.54518113403259
    ],
    [
        119.61909220949711,
        34.54518113403259
    ],
    [
        119.61909220949711,
        34.54518113403259
    ],
    [
        119.61909220949711,
        34.54518113403259
    ],
    [
        119.61909220949711,
        34.54518113403259
    ],
    [
        119.61909220949711,
        34.54518113403259
    ],
    [
        119.61909220949711,
        34.54518113403259
    ],
    [
        119.61909220949711,
        34.54518113403259
    ],
    [
        119.61909220949711,
        34.54518113403259
    ],
    [
        119.61909220949711,
        34.54518113403259
    ],
    [
        119.61909220949711,
        34.54518113403259
    ],
    [
        119.61909220949711,
        34.54518113403259
    ],
    [
        119.61909220949711,
        34.54518113403259
    ],
    [
        119.61909220949711,
        34.54518113403259
    ],
    [
        119.61909220949711,
        34.54518113403259
    ],
    [
        119.61909220949711,
        34.54518113403259
    ],
    [
        119.61911235793757,
        34.54516191376948
    ],
    [
        119.61912887819491,
        34.54514617661509
    ],
    [
        119.6191423976207,
        34.54513328189397
    ],
    [
        119.61915347037547,
        34.54512272428466
    ],
    [
        119.6191625356053,
        34.54511407065446
    ],
    [
        119.6191699697211,
        34.54510698713027
    ],
    [
        119.61917605503109,
        34.54510118495695
    ],
    [
        119.61918103202001,
        34.54509643854455
    ],
    [
        119.61918510980506,
        34.54509254937394
    ],
    [
        119.61918845567996,
        34.54508936404395
    ],
    [
        119.61919119511504,
        34.545086747200614
    ],
    [
        119.61919343266888,
        34.545084608607965
    ],
    [
        119.61919527290009,
        34.545082858030014
    ],
    [
        119.61919677854378,
        34.54508143230157
    ],
    [
        119.61919801233516,
        34.545080250210276
    ],
    [
        119.61919901609762,
        34.545079293708916
    ],
    [
        119.6191998421105,
        34.54507849963232
    ],
    [
        119.61920052174133,
        34.54507785895689
    ],
    [
        119.61920107590187,
        34.545077326564616
    ],
    [
        119.61920152550381,
        34.545076893431926
    ],
    [
        119.61920190191474,
        34.54507654151162
    ],
    [
        119.61920220513466,
        34.54507625275649
    ],
    [
        119.61920245607527,
        34.54507601814295
    ],
    [
        119.6192026547366,
        34.545075819623804
    ],
    [
        119.61920282203033,
        34.54507565719904
    ],
    [
        119.61918543393668,
        34.54507036034719
    ],
    [
        119.61917119305662,
        34.545066019996696
    ],
    [
        119.61915953477374,
        34.545062473722794
    ]
]

// line1
const flatArr1 = arr.flat();
viewer.entities.add({
    polyline: {
        positions: Cesium.Cartesian3.fromDegreesArray(flatArr1),
        width: 5,
        material: Cesium.Color.RED
    }
});

// line2
const flatArr2 = arr.map(r => {
  r[0] += 0.0002
  return r
}).flat();
viewer.entities.add({
    polyline: {
        positions: new Cesium.CallbackProperty(() => {
          return Cesium.Cartesian3.fromDegreesArray(flatArr2)
        }, false),
        width: 5,
        material: Cesium.Color.YELLOW
    }
});

viewer.zoomTo(viewer.entities);

Sandcastle example

https://sandcastle.cesium.com/#c=7Zhdb9s2FIb/iuAreQvkw28ydYINae8CdNiGDUOVC9VmWqGyZFByArfIf9+r2G68mICEYTcDrJtEJvnwfB8clat1E7rkh6RokxvflptVch+aVZJPFs9v+eRNXuf1oqnbLnko/aMPyVVS+8f97uyP59/Sw/6bpu6KsvYhn0yPThahP/YhrxM8+z/9w5jLNHPkOCcnnWHs4mVRyExJxSxjQpLgyu2W7i7OmDPmjDljzpgz5v+IYYwLZZwwypxi+nVhtJN2EMOtNZZBnog0UjOjNVM0LI3kwhnNKSKMENwy67A+SFFCGoJKMoLh3HDJrdR6EKO5EkqTEqcUJsmQVlKOoDinneExN5F21jBBfFglAzkUCUYugmHMSqe0U4MYyxAVxIlOpSGnpbBQSY3A4FJnSZGOYLiSiCfh5DDG4jJtYKBTDDytJUkxQikEsYNLFMkIRhtpoK9mw+I4IQXX2lob4UgNFhmnR8ijEGOOKOIrstwqSwIOGCGPNgYOESYmD4OsgpgaDh04CkkukM4RDHFFnCEChwPZOWKa+vQ85RjH4XM4jY3hWIl0IBXBII6dhmJ8iAKXKs6MRFmIYGA2i4SwbhjDyCgoZk0Mg3BQGuVLj+Ao3ieojSSWgSAILewaw4EwqINGxjhKMgS6HmEdNAeUTFS5GIYjQKHXCOtwiQJosD2GgdVQsIcTFBhIbkRUGIWuobmwJEdgLNQSFHW50sr0ITqi6iClBKqLjqQV2oYmdA823KrQeJ0gpWPpoGEbh0jWbjgdlOvblRExj2sOsxm0rO/FNK/v+lF2NksqjLbsMNTeV0X3cwgMky3m26x/TfuhdzcmZ77uyq70bVYsl+m3HWrdVNuecZl8e7l33bTYCOTlYai+KUKH/4paZP00/tZ/Ct63uKvYpodbp0eSP5bL7vNlcpzcq6LzoSyqF2ZTNSH79d3b3Z6nvH7aTeh7tfgrtfherVWxTjG8X+8kDh/oLvnxKqEMpfY5JYLvNqFOQs/7T2xw9HHhpqiqj8Xiyy+hWfvQbdN0+l2Sw7O/f7zl+PTl+NNFcl9Urf93xvzr3e3t+z9f23Ov+temWf3epK8MMX0zuZjM225b+ev+4E/l7gPMJlRpls06v1pDSt/OPm4WX3yXLdq2p85nhyPzZfmQlMuryAeXZFEVbYuV+01V/VZ+9fnkej7D/n8cq5piWdaf3j/4UBXbfstndn27+zHLsvkMr6enuqaBJ8IR8W8

Environment

Browser: Chrome
CesiumJS Version: 1.138.0
Operating System: MacOS

[lukemckinstry]

Thank you for reporting this @MrWhatHuang. I can confirm I can reproduce the results as you shared. And it is not immediately obvious to me what is causing the issue.

[jjhembd]

See also #12831. We can continue the discussion here, since @MrWhatHuang's report is more easily reproducible.