fading trail as entity moves

CesiumJS
1

Hi

I have been using the sandcastle example and have a entity which moves along a path and draws the path with a new material as it goes.

What I would like to achieve is the same thing but with a short change in colour just behind the entity as it moves. Ideally, this short change in color would fade out.

I thought maybe to add 2 entities, one which has a leadTime of 0 and draws the path. The other with my model which has a leadTime of 0 and a trailTime of say 10. This procedures a different colour trail just behind the entity as it moves but does not achieve the fade effect.

I noticed a Fade material but not sure if this is correct and/or how to use it?

Thanks

2

I don’t think this is (currently) achievable with “path”.
I simulate multicolor path with PolylineGeometry and PolylineColorAppearance (haven’t checked Entity API).

3

Unfortunately, this is something the Entity API doesn’t support yet. Path visualization in general is due for a large overhaul, but it’s not on the short term roadmap.

4

Could there be a way to emulate this? I.e. a material with FADE which is applied to the entity path?

5

A custom polyline material could probably do it, but I personally don’t know enough about our polyline/material implementation to know for sure.

6

How do I implement the FADE material type on a path? I've tried modifying Sandcastle's CZML Path example. Could you help me to get the syntax right?
...
{
    "id" : "path",
    "name" : "path with GPS flight data",
    "description" : "<p>Hang gliding flight log data from Daniel H. Friedman.<br>Icon created by Larisa Skosyrska from the Noun Project</p>",
    "availability" : "2012-08-04T10:00:00Z/2012-08-04T15:00:00Z",
    "path" : {
      "material" : {
        "fade" : {
    "fadeInColor" : [255, 0, 0, 255],
    "fadeOutColor" : [0, 0, 255, 255],
    "time" : 0.25,
    "maximumDistance" : 0.25,
    "repeat" : true
    },
        "polylineOutline" : {
          "color" : {
            "rgba" : [255, 0, 255, 0]
          },
          "outlineColor" : {
            "rgba" : [0, 255, 255, 255]
          },
          "outlineWidth" : 5,
          "polylineGlow" : {
            "color" : {
              "rgba" : [255, 255, 0, 255]
            },
            "glowPower" : 3
          }
        }
      },
      "width" : 8,
      "leadTime" : 10,
      "trailTime" : 1000,
      "resolution" : 5
    },
...

7

It would be especially great to FADE the alpha, so that new part of the path is a vibrant, opaque color and the history of the path is muted by translucency of the same color.

8

Hello,

I don’t think this is something that has been implemented in Cesium yet. You would have to add a custom material to handle the fade. This does take a little bit of graphics know-how to do, but here are the steps you would need to take. (I’ll use the polyline glow material as an example)

First, you have to write a glsl shader and add it to the Shaders/Materials folder. https://github.com/AnalyticalGraphicsInc/cesium/blob/master/Source/Shaders/Materials/PolylineGlowMaterial.glsl

Then you need to add the shader to Material.js. https://github.com/AnalyticalGraphicsInc/cesium/blob/master/Source/Scene/Material.js#L1361-L1372

After that, you need to write a MaterialProperty to create the Material from the Entity API. https://github.com/AnalyticalGraphicsInc/cesium/blob/master/Source/DataSources/PolylineGlowMaterialProperty.js

Lastly, you need to add the functionality to the CzmlDataSource to recognize the new material type. https://github.com/AnalyticalGraphicsInc/cesium/blob/master/Source/DataSources/CzmlDataSource.js#L824

Since this is something other people have asked for, I’ll write up an issue in Cesium so we know it’s a requested feature. If you do implement it, let us know! We would gladly take the contribution.

Best,

Hannah

9

For posterity, the issue is here: https://github.com/AnalyticalGraphicsInc/cesium/issues/3759

Note that it contains a workaround that reproduces the desired effect:

Cesium.Camera.DEFAULT_VIEW_FACTOR = 5.5;

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/Molniya_1-92');

    var fadedLine = new Cesium.StripeMaterialProperty({
        evenColor: Cesium.Color.YELLOW,
        oddColor: Cesium.Color.BLACK,
        repeat: 1,
        offset: 0.2,
        orientation: Cesium.StripeOrientation.VERTICAL
    });

    entity.path.material = fadedLine;
    entity.path.leadTime = new Cesium.ConstantProperty(0);
    entity.path.trailTime = new Cesium.ConstantProperty(3600 * 4);
});