1. A concise explanation of the problem you’re experiencing.
I am updating the positions array of a polyline dynamically, but when the changes render, the entire polyline flashes. I’m wondering how to stop this from happening.
What’s peculiar is that depending on what other entities are rendered/what their properties are, sometimes the polyline remains solid.
2. A minimal code example. If you’ve found a bug, this helps us reproduce and repair it.
Here’s code for updating the positions of two polylines:
var viewer = new Cesium.Viewer(‘cesiumContainer’);
//First Polyline
var latest_pos_0 = [0, 0];
var positions_0 = [Cesium.Cartesian3.fromDegrees(latest_pos_0[0], latest_pos_0[1])];
var polyline_0 = viewer.entities.add({
polyline: {
positions: positions_0,
material: Cesium.Color.BLUE,
width: 3
}
});
setInterval(function(){
latest_pos_0[0] += 1;
positions_0.push(Cesium.Cartesian3.fromDegrees(latest_pos_0[0], latest_pos_0[1]));
polyline_0.polyline.positions = positions_0;
}, 1000);
//Second Polyline
var latest_pos_1 = [0, 1];
var positions_1 = [Cesium.Cartesian3.fromDegrees(latest_pos_1[0], latest_pos_1[1])];
var polyline_1 = viewer.entities.add({
polyline: {
positions: positions_1,
material: Cesium.Color.RED,
width: 3
}
});
setInterval(function(){
latest_pos_1[0] += 1;
positions_1.push(Cesium.Cartesian3.fromDegrees(latest_pos_1[0], latest_pos_1[1]));
polyline_1.polyline.positions = positions_1;
}, 1000);
``
If you copy and paste the above code directly into Sandcastle, both polylines will update without flashing. However, if you comment out everything pertaining to the Second Polyline, the remaining First Polyline flashes on each update.
Here’s a list of various scenarios I tested, and the behavior I observed
One Polyline
No Transparency: Flashing
Transparency: Flashing
Two Polylines
No Transparency: Both Solid
One Has Transparency: Both Flashing
Both Have Transparency: Both Solid
One has show: false : The Other is Solid
One has show: false with its interval commented out: The Other is Flashing
Both have same Interval Rate: Both Solid
Interval Rates of 1000 and 300: Both Solid
Interval Rates of 1000/10000: Both Flashing
3. Context. Why do you need to do this? We might know a better way to accomplish your goal.
I’m trying to dynamically update a polyline.
4. The Cesium version you’re using, your operating system and browser.
I’m using Windows 10 Enterprise and Google Chrome. The behavior described above happens on https://cesiumjs.org/Cesium/Build/Apps/Sandcastle/ which is the latest version of Cesium, right?