What is a particle system? What is a particle system?
Particle system is a graphical technology that can simulate complex physical effects. Particle systems are a collection of small images that, when viewed together, form a more complex "blurred" object, such as fire, smoke, weather or fireworks. fireworkds . These complex effects can be controlled by specifying the behavior of individual particles using attributes such as initial position, velocity and lifetime.
Particle system effects are common in movies and video games. For example, in order to represent damage to an aircraft, a technical artist can use particle systems to represent explosions on an aircraft engine, and then render different particle systems to represent smoke trajectories during crashes.
Particle System Basic Particle System Foundation
See the following code for the basic particle system:
var particleSystem = viewer.scene.primitives.add(new Cesium.ParticleSystem({ image : '../../SampleData/smoke.png', imageSize : new Cesium.Cartesian2(20, 20), startScale : 1.0, endScale : 4.0, particleLife : 1.0, speed : 5.0, emitter : new Cesium.CircleEmitter(0.5), emissionRate : 5.0, modelMatrix : entity.computeModelMatrix(viewer.clock.startTime, new Cesium.Matrix4()), lifetime : 16.0 }));
The above code creates a Particle System, a parameterized object that controls the appearance and behavior of a single Particle object over time. Particles are generated by particle launchers, which have a location and type, survive for a period of time and then die out.
Some of these attributes are dynamic. Note that instead of using the available monochrome attribute scale, there is a startScale and endScale. These allow you to specify the conversion of particle size between the start and end proportions during the lifetime of a particle. startColor and endColor work similarly.
Other ways of influencing visual output include maximum and minimum attributes. For each variable with maximum and minimum inputs, the actual value of the variable on the particle will be randomly allocated between the maximum and minimum inputs, and the value will be statically maintained throughout the life cycle of the particle. For example, the minimum and maximum velocities are used as the boundaries of the randomly selected velocities for each particle. Attributes that allow such changes include imageSize, speed, life, and particleLife.
Emitters transmitter
When a particle is born, its initial position and velocity vector are controlled by Particle Emitter. The emitter generates some particles per second, which are specified by emissionRate parameters and initialized at random speed according to the emitter type.
Cesium has a variety of particle launchers that you can use out of the box.
Box Emitter Launcher
BoxEmitter initializes particles randomly sampled in a box and guides them from one of the six box surfaces. It accepts the Cartesian 3 parameter, which specifies the width, height and depth dimensions of the box.
var particleSystem = scene.primitives.add(new Cesium.ParticleSystem({ image : '../../SampleData/smoke.png', color: Cesium.Color.MAGENTA, emissionRate: 5.0, emitter: new Cesium.BoxEmitter(new Cesium.Cartesian3(5.0, 5.0, 5.0)), imageSize : new Cesium.Cartesian2(25.0, 25.0), modelMatrix : entity.computeModelMatrix(viewer.clock.startTime, new Cesium.Matrix4()), lifetime : 16.0 }));
CircleEmitter circular transmitter
CircleEmitter initializes particles at random sampling positions in a circle along the axis of the transmitter. It accepts a floating-point parameter with a specified radius of the circle.
var particleSystem = scene.primitives.add(new Cesium.ParticleSystem({ image : '../../SampleData/smoke.png', color: Cesium.Color.MAGENTA, emissionRate: 5.0, emitter: new Cesium.CircleEmitter(5.0), imageSize : new Cesium.Cartesian2(25.0, 25.0), modelMatrix : entity.computeModelMatrix(viewer.clock.startTime, new Cesium.Matrix4()), lifetime : 16.0 }));
If the emitter is not specified, CircleEmitter will act as the default emitter.
Cone Emitter Cone Launcher
ConeEmitter initializes particles at the top of the cone and guides them away from the cone at random angles. It uses a floating-point parameter that specifies the angle of the cone. The cone is oriented along the upper axis of the launcher.
var particleSystem = scene.primitives.add(new Cesium.ParticleSystem({ image : '../../SampleData/smoke.png', color: Cesium.Color.MAGENTA, emissionRate: 5.0, emitter: new Cesium.ConeEmitter(Cesium.Math.toRadians(30.0)), imageSize : new Cesium.Cartesian2(25.0, 25.0), modelMatrix : entity.computeModelMatrix(viewer.clock.startTime, new Cesium.Matrix4()), lifetime : 16.0 }));
Sphere Emitter Spherical Launcher
Sphere Emitter initializes particles at randomly sampled positions in the sphere and guides them outward from the center of the sphere. It uses a floating-point parameter that specifies the radius of the sphere.
var particleSystem = scene.primitives.add(new Cesium.ParticleSystem({ image : '../../SampleData/smoke.png', color: Cesium.Color.MAGENTA, emissionRate: 5.0, emitter: new Cesium.SphereEmitter(5.0), imageSize : new Cesium.Cartesian2(25.0, 25.0), modelMatrix : entity.computeModelMatrix(viewer.clock.startTime, new Cesium.Matrix4()), lifetime : 16.0 }));
Configuring particle systems to configure particle systems
Particle emission rate
emissionRate controls how many particles are emitted per second, which changes the density of particles in the system.
Specify a set of bursts to emit particle bursts at a specified time (as shown in the above animation). This will increase the diversity or explosiveness of particle systems.
Add this property to your particleSystem
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}) ]
At a given time, these bursts will be launched between the smallest and largest particles.
Life of the particle and life of the system particle life and system life
By default, the particle system will run forever. To make the particle system run for the set duration, use lifetime to specify the duration in seconds and set loop to false.
lifetime : 16.0, loop: false
Setting particleLife to 5.0 will give each particle in the system the particleLife value. To randomize the output of each particle, use variables minimumParticleLife and maximumArticleLife.
minimumParticleLife: 5.0, maximumParticleLife: 10.0
Styling particles styled particles
Color color
Particles are styled using textures specified by image and color, which can be changed during the lifetime of the particle to create dynamic effects.
The code below transits smoke particles from green to white.
startColor : Cesium.Color.LIGHTSEAGREEN.withAlpha(0.7), endColor : Cesium.Color.WHITE.withAlpha(0.0),
Size size
The size of particles is controlled by imageSize. To randomize the size, use minimum ImageSize. X and maximum ImageSize. x to control the width (in pixels) and minimum ImageSize. y and maximum ImageSize. y to control the height (in pixels).
The following code creates square particles between 30 and 60 pixels:
minimumImageSize : new Cesium.Cartesian2(30.0, 30.0), maximumImageSize : new Cesium.Cartesian2(60.0, 60.0)
The size of particles can be adjusted through the startScale and endscale attributes in their life cycle to make particles grow or shrink with time.
startScale: 1.0, endScale: 4.0
Speed speed
Speed is controlled by speed or minimumSpeed and maximumSpeed.
minimumSpeed: 5.0, maximumSpeed: 10.0
Update Callback Update callback
By applying the update function, the particle system can be further customized. For gravity, wind, or color changes, it acts as a manual update program for each particle.
The project system has an updateCallback that modifies the properties of particles during the simulation process. The function uses particle and simulation time steps. Most physical effects modify the velocity vector to change direction or speed. Here's an example of how particles react to gravity:
var gravityVector = new Cesium.Cartesian3(); var gravity = -(9.8 * 9.8); function applyGravity(p, dt) { // Compute a local up vector for each particle in geocentric space. var position = p.position; Cesium.Cartesian3.normalize(position, gravityVector); Cesium.Cartesian3.multiplyByScalar(gravityVector, gravity * dt, gravityVector); p.velocity = Cesium.Cartesian3.add(p.velocity, gravityVector, p.velocity); }
The function calculates the gravity vector and uses the acceleration of gravity to change the velocity of particles.
Set gravity to the updateFunction of the particle system:
updateCallback : applyGravity
Positioning positioning
Two Matrix 4 transformation matrices are used to locate the particle system:
- modelMatrix: Converts a particle system from a model to a world coordinate.
- Emiter Model Matrix: Transform the particle system emitter in the local coordinate system of the particle system.
You can use only one of these transformation matrices and keep the other as identification matrices, but for convenience, we provide these two matrices. To practice creating matrices, let's position the particle emitter relative to another entity.
Create a focused entity for our particle system. open Hello World Sandcastle Sample and add the following code to add the milk truck model to the viewer:
var entity = viewer.entities.add({ model : { uri : '../../SampleData/models/CesiumMilkTruck/CesiumMilkTruck-kmc.glb' }, position : Cesium.Cartesian3.fromDegrees(-75.15787310614596, 39.97862668312678) }); viewer.trackedEntity = entity;
We want to add a smoke effect from the back of the truck. Create a model matrix that will locate the particle system and align it with the milk truck entity.
modelMatrix: entity.computeModelMatrix(time, new Cesium.Matrix4())
This places the particle system in the center of the truck. To put it in the back of the truck, we can create a matrix by translating it.
function computeEmitterModelMatrix() { hpr = Cesium.HeadingPitchRoll.fromDegrees(0.0, 0.0, 0.0, hpr); trs.translation = Cesium.Cartesian3.fromElements(-4.0, 0.0, 1.4, translation); trs.rotation = Cesium.Quaternion.fromHeadingPitchRoll(hpr, rotation); return Cesium.Matrix4.fromTranslationRotationScale(trs, emitterModelMatrix); }
Now, add the particle system:
var particleSystem = viewer.scene.primitives.add(new Cesium.ParticleSystem({ image : '../../SampleData/smoke.png', startColor : Cesium.Color.LIGHTSEAGREEN.withAlpha(0.7), endColor : Cesium.Color.WHITE.withAlpha(0.0), startScale : 1.0, endScale : 4.0, particleLife : 1.0, minimumSpeed : 1.0, maximumSpeed : 4.0 imageSize : new Cesium.Cartesian2(25, 25), emissionRate : 5.0, lifetime : 16.0, modelMatrix : entity.computeModelMatrix(viewer.clock.startTime, new Cesium.Matrix4()) emitterModelMatrix : computeEmitterModelMatrix() }));
Also note that we can update the model or emitter matrix over time. For example, if we want to animate the location of the emitter on the truck, we can modify emitter Model Matrix while keeping the model Matrix unchanged.
For a complete example, visit Particle System demo
Learn more
For more cool results with more advanced particle systems, see Particle System More Effectiveness Course.
For more sample code, see:
Cesium Chinese Communication QQ Group: 807482793
This article is based on admin Creation, adoption Knowledge Sharing Signature 3.0 Mainland China Licensing Agreement License.
It can be reproduced and quoted freely, but the author should be signed and the source of the article should be indicated.