How to draw the trails of particles?

Rayman_Ng · January 2, 2019, 2:31pm

Hi, all.
I want to show the movement of particles, so I need to draw the trails of particles, but it seems that the particle system in cesium has no such API.

I see there is an update callback in particle system, but I am not sure if it can help me to draw the trails, because I can not tell which particle I am updating.

Any suggestion?
Rayman

omar · January 2, 2019, 9:21pm

What kind of application are you trying to build?

I haven’t used it myself but I think the particle system was designed mostly to create visual effects rather than simulate specific behavior. It looks like particles are created as billboards:

github.com

CesiumGS/cesium/blob/master/Source/Scene/ParticleSystem.js#L494-L524




function updateParticlePool(system) {
    var emissionRate = system._emissionRate;
    var life = system._maximumParticleLife;


    var burstAmount = 0;
    var bursts = system._bursts;
    if (defined(bursts)) {
        var length = bursts.length;
        for (var i = 0; i < length; ++i) {
            burstAmount += bursts[i].maximum;
        }
    }


    var billboardCollection = system._billboardCollection;
    var image = system.image;


    var particleEstimate = Math.ceil(emissionRate * life + burstAmount);
    var particles = system._particles;
    var particlePool = system._particlePool;

This file has been truncated. show original

So you should theoretically be able to reach in and get that list of particles, even though it’s not exposed by the public API.

Although, you might be able to use a SampledPositionProperty and a Path to draw a path for an individual (or for all?) particles, here’s an example:

Entities have unique id’s so that can help you identify/map individual particles in the update function:

https://cesiumjs.org/Cesium/Build/Documentation/Entity.html?classFilter=ENtity#id

I hope this helped! Feel free to follow up here. I don’t see a lot of people on the forum using the particle system so I’m curious what kind of application you’ve found for it.

Rayman_Ng · January 3, 2019, 2:12am

Thanks for your help.

I use particle system to visualize the 3D force field physics effect, mainly for the wind field. The movement of the particles are used to represent the force field.

Now I have 3D wind field data for Asia continent. I am planning to put about 50000 particles, because the area is very large. With so many particles(billboards), I wonder whether cesium will take a long time to render them.

omar · January 3, 2019, 3:36pm

So I think the particle system is optimized for this kind of use case, but I don’t know of its specific benchmarks/it will vary depending on whether you’re testing on a desktop, or mobile device etc.

The good news is Cesium has definitely been used to simulate and visualize these sorts of wind fields before. Here’s one I found from a quick google search:

I can see that they’re using geometry/primitives in order to get the maximum performance. So I would try with particles, and if you’re experiencing a slow down, you might try using the primitives directly. This is a good guide on that:

Rayman_Ng · January 4, 2019, 3:09am

Thanks for your detailed suggestion!
I will give it a try.

在 2019年1月3日星期四 UTC+8下午11:36:43，Omar Shehata写道：

omar · January 4, 2019, 12:55pm

Awesome! If you get any cool results it’d be cool to see a gif or a demo! I also found out we have a whole meterology section in our demos:

Which might be cool to add to.

Rayman_Ng · March 7, 2019, 3:31am

Hi, Omar

After two month's work, I finally make a particle system with custom render.

It is not good looking but at least it works. I attached a screenshot of my rough demo. And I made a Github repo: https://github.com/RaymanNg/3D-Wind-Field

Last but not least, thank you Omar! You help me a lot:
https://groups.google.com/forum/#!topic/cesium-dev/vR7H4KJURJ8
https://groups.google.com/forum/#!topic/cesium-dev/7kCcITmGbEA
https://groups.google.com/forum/#!topic/cesium-dev/gpgLjYyNFKE

omar · March 11, 2019, 2:58pm

This is awesome! I’m glad you resolved all the issues and have it running, and thanks for posting your code. I imagine it wouldn’t be that hard at this point to add color over time like this wind map (https://blog.mapbox.com/how-i-built-a-wind-map-with-webgl-b63022b5537f), or it based on strength/speed? Then it will look absolutely beautiful!

Topic		Replies	Views
particle system CesiumJS	27	798	February 3, 2016
Particle Systems Tutorial CesiumJS	0	172	July 26, 2017
trailTime of PathGraphics entity CesiumJS	7	269	November 28, 2016
How to draw a line with animation of drawing? CesiumJS	12	198	August 8, 2017
how to add particles to new Cesium.PointPrimitiveCollection(); CesiumJS	5	251	December 12, 2017

How to draw the trails of particles?

Related topics