Polyline segment color

Hello All,

Hopefully a pretty quick question;

Is it possible to have different colours for different segments in a polyline? Or would I have to create new collections for each differently coloured segment that I want to create?



Hello Toby,

function lonLatToCartesian(x, y, z) {

return ellipsoid.cartographicToCartesian(Cesium.Cartographic.fromDegrees(x, y, z));

*}; *

var polylines = new Cesium.PolylineCollection();


var redPolyline = polylines.add({

positions : [lonLatToCartesian(-80, 20, 0),lonLatToCartesian(-81, 21, 0)],

color : new Cesium.Color(1, 0, 0)


var bluePolyline = polylines.add({

positions : [lonLatToCartesian(-80, 20, 0),lonLatToCartesian(-79, 21, 0)],

color : new Cesium.Color(0, 0, 1)


var greenPolyline = polylines.add({

positions : [lonLatToCartesian(-81, 21, 0),lonLatToCartesian(-79, 21, 0)],

color : new Cesium.Color(0, 1, 0)


Is it what you want?

Right now you need to have a different Polyline for each. However, the plan is to implement a new material which will let you do what you need. I actually need this as well for a number of other projects (but unfortunately I don’t have the know-how to implement it).

I don’t think a new material is the correct solution, because the fragment shader would need to look up the color based on time, and it doesn’t have good assets to draw from there.

Maybe we could assign the color as a vertex attribute? Then multiple polyline materials could be made to work with it. You could do an abrupt change of color by doubling up a vertex, or you could do color ramps along line segments.


Hi Ed,

That sounds like it would work nicely. Will use a workaround for now, but +1 from me for this as a feature request.


+1 for per vertex color that can be accessed through a material. I’m also interested in being able to attach other arbitrary float/vec data per vertex for access in a material. I may be able to help out on some of the implementation if required.



We are doing work on the batching branch that will make it possible to do per-vertex color and arbitrary attributes (vertex shaders), along with custom/shaders (appearances). Initially, this is tuned for static data.

Contributions are welcome, of course.


Is there any update for this in b26 version?

Brandon - see this Sandcastle example: http://cesiumjs.org/Cesium/Apps/Sandcastle/?src=Polyline.html&label=Geometries


Hi Patrick

Yes, I checked out that example and extracted the code I think I need, as seen here: http://stackoverflow.com/questions/22313789/cesium-js-how-to-fade-a-polyline-to-transparent

Not sure how to convert my existing Polylines and PolylineCollection to the example shown.

I am now adding polylines to the collection which has been added to primitives…

Check out this tutorial on using Geometry: http://cesiumjs.org/2013/11/04/Geometry-and-Appearances/

We will most likely rewrite PolylineCollection so that it can have the same feature set of Geometry instances, but there’s no ETA on that.