How does segmenting a polyline into different colors work.
It says in the documentation it can be done by vertex or segment in a color array. Does that mean it is an array with a color defined for each position in the positions property?
In the polyline CZML documentation it says that it is [time, r, g, b, a]. When I try to use this to segment colors it changes the whole thing to the new color for the period of time and then switches the whole thing back.
I was using a path but paths don’t have the ability to segment their color. My code calculates when a path/polyline passes through another primitive, when the polyline is inside it needs to be a different color. This is calculated based on time since epoch.
If this done by vertex, when creating the polyline with polylinePrimitive instead of CZML, is there an unused property that I can use to store the time stamps per position so that I can reference them later when updating the color segmentation of the polyline through the vertex number?
I’ve done some testing today and I figured out that I can store the timestamps in an array in the ID field of an instance. That way I can update and remove and re-draw the updated polyline instance once it has it’s colors updated.
No matter what I have tried I keep getting the error ‘Uncaught DeveloperError: colors has an invalid length.’
I can’t seem to figure out how the color array works for the polylineGeometry primitive.
The documentation says:
An Array of Color defining the per vertex or per segment colors.
What is the correct way to construct this array?
Can you post a Sandcastle sample of how you’re doing it?
Something along these lines (for all I know I could be way off on how I’m trying to do this):
var viewer = new Cesium.Viewer(‘cesiumContainer’);
var scene = viewer.scene;
var instance = new Cesium.GeometryInstance({
geometry: new Cesium.PolylineGeometry({
positions: [
-2822918.76, -1347627.64, 5539750.33,
-2860091, -1790883.7, 6104936.09,
-2869994.31, -2212991.67, 6598178.01
],
width: 2.0,
followSurface: false,
colors: [Cesium.Color.RED, Cesium.Color.BLUE, Cesium.Color.RED],
colorsPerVertex: true
}),
id : ‘ID1’
});
var newPrimitive = new Cesium.Primitive({
geometryInstances: instance
});
scene.primitives.add(newPrimitive);
``
I figure I’ll update this just in case anyone comes across it in the future with the same question.
These are the results that I got to work that can be pasted into the sandcastle:
var viewer = new Cesium.Viewer(‘cesiumContainer’);
var primitive = new Cesium.Primitive({
geometryInstances : new Cesium.GeometryInstance({
geometry : new Cesium.PolylineGeometry({
positions : [
Cesium.Cartesian3.fromElements(-2822918.76, -1347627.64, 5539750.33),
Cesium.Cartesian3.fromElements(-2860091, -1790883.7, 6104936.09),
Cesium.Cartesian3.fromElements(-2869994.31, -2212991.67, 6598178.01)
],
width : 2.0,
vertexFormat : Cesium.PolylineColorAppearance.VERTEX_FORMAT,
colors: [Cesium.Color.RED, Cesium.Color.BLUE],
colorsPerVertex: false
})
}),
appearance : new Cesium.PolylineColorAppearance({
translucent : false
})
});
viewer.scene.primitives.add(primitive);
``
By changing ‘colorsPerVertex’ to true and adding a color to the ‘colors’ array you can get a gradient effect as it goes from one color to the next.
Hope this can help someone else out!
Thanks for the sample Brent. I would also like to add these capability to Entity polylines at some point, but there are a few hurdles (because of time-dynamicness) and I also don’t have a lot of spare time these days 
wow this is awesome
i’m using it right now and looks pretty sweet: https://www.flickr.com/photos/mgiraldo/21034133724/