how to add particles to new Cesium.PointPrimitiveCollection();

CesiumJS
1

1. A concise explanation of the problem you’re experiencing.

I’m creating particlesystem to generate clouds / fog / snow above Globe. This works fine when I use this code:

var viewModel = {

rate: 50,

gravity: -0.5,

minimumLife: 1.0,

maximumLife: 50.0,

minimumSpeed: 0,

maximumSpeed: 0,

startScale: 0,

endScale: 40.0,

particleSize: 20.0,

minimumMass: 0.00000001,

maximumMass: 0.0001,

image: ‘models/clouds/cumulus1.png’,

minimumWidth: 10,

maximumWidth: 20,

minimumHeight: 10,

maximumHeight: 20,

lifeTime: 5.0,

loop: true,

spin: true,

emitter: new Cesium.SphereEmitter(100),

fly: true,

show: true

};

2. A minimal code example. If you’ve found a bug, this helps us reproduce and repair it.

var particles = new Cesium.PointPrimitiveCollection(); // in fact this is not yett used. When I use this adding the particles, they do not show up.

//var particles = new Cesium.BillboardCollection(),

function Clouds(lat, lon, height) {

var positions = [Cesium.Cartographic.fromDegrees(lon, lat)];

var promise = Cesium.sampleTerrainMostDetailed(viewer.terrainProvider, positions);

Cesium.when(promise, function (updatedPositions) {

height = height + updatedPositions[0].height;

var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(Cesium.Cartesian3.fromDegrees(lon, lat, height));

var particleSystem = viewer.scene.primitives.add(new Cesium.ParticleSystem({

image: viewModel.image,

startColor: Cesium.Color.GREY.withAlpha(0.3),

endColor: Cesium.Color.GREY.withAlpha(0.01),

startScale: viewModel.startScale,

endScale: viewModel.endScale,

minimumLife: viewModel.minimumLife,

maximumLife: viewModel.maximumLife,

minimumSpeed: viewModel.minimumSpeed,

maximumSpeed: viewModel.maximumSpeed,

minimumWidth: viewModel.particleSize,

minimumHeight: viewModel.particleSize,

maximumWidth: viewModel.particleSize,

maximumHeight: viewModel.particleSize,

minimumMass: viewModel.minimumMass,

maximumMass: viewModel.maximumMass,

rate: viewModel.rate, // Particles per second.

bursts: [

new Cesium.ParticleBurst({ time: 5.0, minimum: 300, maximum: 500 }),

new Cesium.ParticleBurst({ time: 10.0, minimum: 50, maximum: 100 }),

new Cesium.ParticleBurst({ time: 15.0, minimum: 200, maximum: 300 })

],

lifeTime: viewModel.lifeTime,

loop: viewModel.loop,

spin: viewModel.spin,

emitter: viewModel.emitter,

modelMatrix: modelMatrix,

fly: viewModel.fly,

forces: [applyGravity]

}));

//This is the trick I want to use just like billboard fading away when the distance from the camera changes. How to do this with the particles?

//particleSystem.translucencyByDistance = billboard.translucencybydistance;

//particleSystem.distanceDisplayCondition = billboard.distancedisplaycondition;

//particleSystem.scalebydistance = billboard.scalebydistance;

});

viewer.scene.primitives.add(particles);

}

3. Context. Why do you need to do this? We might know a better way to accomplish your goal.

I want to fade out the particle clouds when the camera is moving away from them.

4. The Cesium version you’re using, your operating system and browser.

Cesium 1.38. Windows 10 on Chrome

2

Hi there,

There is no public way to modify the billboard themselves, but what I would do in this situation is adjust the startColor and endColor of the particleSystem based on the distance to the camera.

For example,

var visibility = 1.0 - CesiumMath.clamp((distanceToCamera / maxDisplayDistance), 0.0, 1.0);
particleSystem.startColor = Cesium.Color.GREY.withAlpha(0.3 * visibility);

particleSystem.endColor = Cesium.Color.GREY.withAlpha(0.01 * visibility);

Thanks,

Gabby

3

Hello Gabby,

Yes! That’s a good idea! I did not think about this, because I was in the mindset of the displaycondition of billboards. I did use this on the code in :

function applyGravity(p, dt) {

// We need to compute a local up vector for each particle in geocentric space.

var gravityScratch = new Cesium.Cartesian3();

var position = p.position;

Cesium.Cartesian3.normalize(position, gravityScratch);

Cesium.Cartesian3.multiplyByScalar(gravityScratch, viewModel.gravity * dt, gravityScratch);

p.velocity = Cesium.Cartesian3.add(p.velocity, gravityScratch, p.velocity);

p._billboard.distanceDisplayCondition = clouds.distancedisplaycondition;

}

``

It’s work, but not really smooth.

And the main issue was / is performance when I’m creating particles on the globe for weather situations like clouds, snow, rain, fog, fires, vulcano eruption, lightning, tornado’s etc etc.

So how can I add the particles to a new Cesium.PointPrimitiveCollection() and then add the whole pointset to an entity?

Now I add all the particle directly to the entity in the viewer. This is not really smooth for the performance.

If you can help me / us just give a suggestion. I will share my code what’s working for me to create a weather system to use on the cesium Globe.

Thanks,

Richard @Geoneer

4

the camera distance to the particles is continously changing. I’m flying over the globe with billboards. Around the billboards the current actual weather situation is created with particles. So the visibility needs to change along the flight also.

What to do:

  1. create a listener on the particles during flight

  2. use the applyGravity function to change the visibility during flight

I did this and the clouds are very flickering. Ofcourse the gravity changes continuously during the lifetime of the particles. So also the particles are going to flicker a lot during the lifetime with adding visibility inside the gravity function.

  1. something else?

  2. What to do?

5

Well I did create clouds and snow together on the globe.

It’s very nice!

check here: https://www.facebook.com/smrtmps/videos/133661190649682/

6

Hi there!

Currently, you can use the apply forces callback (or “updateGravity”) function to update certain properties of the particle, but not all, as they are overwritten later by the particle system update step. For example I had success with the following:

// updated when camera changes

this.visibility = 1.0 - CesiumMath.clamp((distanceToCamera / maxDisplayDistance), 0.0, 1.0);

function (particle, dt) {

particle.endColor = Color.WHITE.withAlpha(this.visibility);

}

Your weather looks awesome! Would you be interested in creating a showcase?

Thanks,

Gabby