Multicolor polyline

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




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





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 :wink:

wow this is awesome

i’m using it right now and looks pretty sweet: