How to make pulsing lines

CesiumJS
1

Hi,

I've got some geojson polylines with values I've assigned them in their properties. Over time I change their colour to represent this value but I've been asked if I can animate them so the lines "pulse" or appear to move. The idea is that the greater each line's current value, the faster the line moves/pulses. Can this be done and, if so, how?

Thanks in advance,

Matthew

2

Hello Matthew,

I don’t think we have anything like that currently built into Cesium. You would have to create a custom material to create that visualization.

Best,

Hannah

3

Thanks for your reply. I suspected that :slight_smile:
Can you point me in the direction to have a look at custom materials and I'll have a look.

Matthew

4

You will need to add your shader to Source/Shaders/Materials (For example, this is the PolylineGlowMaterial shader)
Then you can add a new type to Material.js (This is where the PolylineGlow type is added)

Then you need to create a new MaterialProperty (see the PolylineGlowMaterialProperty)

Lastly, you need to make changes in GeoJsonDataSource to use your new property. So change options.strokeMaterialProperty to use at material for all lines (including polygon outlines), or make a change in createLineString to make certain polylines use the pulse material.

And I think that’s it. Let me know if you have any trouble and I’ll try to help

If you do create this new Polyline material, consider contributing it back to us =)

It sounds like something other people would be interested in using too.

Best,

Hannah

5

Hi, Thanks for that. I will look into it. The work I am doing is for my company and they are a bit funny about who owns work done on their time. I have put it out to them about pushing it back and this being a good thing for them to do so we'll see what happens if I actually manage to do something.

Could you help me with how I actually use the Cesium source code? I am currently using the Cesium NPM package and I have got it working with webpack but I am unsure how I use the source. Do I need to compile it to ge the workers etc running? I tried using the npm scripts in the package.json and gulp, etc are missing. I have some other custom geometries and appearances I want to work with so some guidance would really help me.

Thank you for your help

6

We have a ton of documentation here to help people get started with contributing: https://github.com/AnalyticalGraphicsInc/cesium/tree/master/Documentation/Contributors
Check out the Build Guide for downloading the code base. We develop using either Eclipse or WebStorm and we have documentation for setting things up if you wanted to use one of those IDEs also.

Best,

Hannah