How to add whitish trail effect while animating polyline (like Doarama)?

CesiumJS
1

How does Doarama draw polyline? I want to add whitish trail effect similar to what doarama does. Please see this example to get an idea what i am asking about. Can anybody help?

2

Hi Qandeel,

Cesium supports this, just not through the Entity layer. See here for an example of how to create a fade material for polylines: https://github.com/AnalyticalGraphicsInc/cesium/pull/4819/files

This example is part of our development examples, which are a part of Sandcastle, but only available when you build Cesium locally (not through our website).

Hope that helps,

  • Rachel
3

Actually, it’s possible to abuse the “Stripe” material, making the white part a piece of a single stripe, to get a faded line going. For example, here I’m applying it to the ISS object from simple.czml:

http://cesiumjs.org/releases/1.32/Apps/Sandcastle/?src=Hello%20World.html&label=Showcases&gist=a42e909c4c802d20708855c05ed197ec

var viewer = new Cesium.Viewer(‘cesiumContainer’);

Cesium.CzmlDataSource.load(’…/…/SampleData/simple.czml’).then(function(dataSource) {
viewer.dataSources.add(dataSource);
viewer.camera.flyHome(0);
viewer.clock.multiplier = 1800;

var entity = dataSource.entities.getById('Satellite/ISS');

var fadedLine = new Cesium.StripeMaterialProperty({
    evenColor: Cesium.Color.WHITE,
    oddColor: Cesium.Color.PURPLE,
    repeat: 1,
    offset: 0.8,
    orientation: Cesium.StripeOrientation.VERTICAL
});

entity.path.material = fadedLine;
entity.path.leadTime = new Cesium.ConstantProperty(0);
entity.path.trailTime = new Cesium.ConstantProperty(5400);
entity.path.width = 3;

});

                  --Ed.
4

Thanks for the help Rachel and Ed. I used this code:
var polyMaterial = new Cesium.Material({

fabric : {

type : ‘Stripe’,

uniforms : {

horizontal: false,

evenColor: Cesium.Color.WHITE,

oddColor: Cesium.Color.fromCssColorString(’#FC4143’),

repeat: 1,

offset: 0.8

}

}

});

polyline = polylines.add({

positions: positions,

material: polyMaterial,

width: 3,

});

``

It worked like a charm.