To understand the basics of particle systems, see Introduction to Particle Systems Course.

Weather weather

Setup settings

To generate a snow effect, first add a snowflake image to each particle, and then define the movement behavior of the particle and other dynamic elements in the updateParticle function.

The images

The following three images are used in this tutorial. Rain particles on the left; snow particles in the middle; and fire effects on the right.

The update function update function

The update function is used to define the movement, alignment and visualization of particles. Modify the color color color of particles, image size and particleLife particle lifetime. We can even modify particles based on their distance to the camera (as described below), import models, or the distance to the Earth itself.

Here is our update function for snow:

// snow
var snowGravityVector = new Cesium.Cartesian3();
var snowUpdate = function(particle, dt) {
    Cesium.Cartesian3.normalize(particle.position, snowGravityVector);
    Cesium.Cartesian3.multiplyByScalar(snowGravityVector,
                                                            Cesium.Math.randomBetween(-30.0, -300.0),
                                                            snowGravityVector);
    particle.velocity = Cesium.Cartesian3.add(particle.velocity, snowGravityVector, particle.velocity);

    var distance = Cesium.Cartesian3.distance(scene.camera.position, particle.position);
    if (distance > (snowRadius)) {
        particle.endColor.alpha = 0.0;
    } else {
        particle.endColor.alpha = snowSystem.endColor.alpha / (distance / snowRadius + 0.1);
    }
};

The first part of the function makes particles fall like gravity. The update function also contains a distance check so that particles disappear away from the camera.

Additional weather effects

Use fog and atmospheric effects to enhance visualization and match the type of weather we are trying to replicate.

hueshift changes the color along the color spectrum, saturation Shift changes the contrast between the actual color and black and white, and brightness Shift changes the vividness of the color.

Fog density changes the opacity between the earth's cover and fog color. The minimum Brightness of fog is used to darken the fog.

// snow
scene.skyAtmosphere.hueShift = -0.8;
scene.skyAtmosphere.saturationShift = -0.7;
scene.skyAtmosphere.brightnessShift = -0.33;

scene.fog.density = 0.001;
scene.fog.minimumBrightness = 0.8;

The systems System

Snow Snow

snowflake_particle images are used in the snowflake system, and minimum ImageSize and maximum ImageSize are used to create snowflakes randomly in this range.

var snowParticleSize = scene.drawingBufferWidth / 100.0;
var snowRadius = 100000.0;

var snowSystem = new Cesium.ParticleSystem({
    modelMatrix : new Cesium.Matrix4.fromTranslation(scene.camera.position),
    minimumSpeed : -1.0,
    maximumSpeed : 0.0,
    lifetime : 15.0,
    emitter : new Cesium.SphereEmitter(snowRadius),
    startScale : 0.5,
    endScale : 1.0,
    image : "../../SampleData/snowflake_particle.png",
    emissionRate : 7000.0,
    startColor : Cesium.Color.WHITE.withAlpha(0.0),
    endColor : Cesium.Color.WHITE.withAlpha(1.0),
    minimumImageSize : new Cartesian2(snowParticleSize, snowParticleSize),
    maximumImageSize : new Cartesian2(snowParticleSize * 2.0, snowParticleSize * 2.0),
    updateCallback : snowUpdate
});
scene.primitives.add(snowSystem);

Rain Rain Rain

The raindrop system uses circular_particle.png for raindrops. Image Size is used to stretch the image vertically to give the rain a slender appearance.

rainSystem = new Cesium.ParticleSystem({
    modelMatrix : new Cesium.Matrix4.fromTranslation(scene.camera.position),
    speed : -1.0,
    lifetime : 15.0,
    emitter : new Cesium.SphereEmitter(rainRadius),
    startScale : 1.0,
    endScale : 0.0,
    image : "../../SampleData/circular_particle.png",
    emissionRate : 9000.0,
    startColor :new Cesium.Color(0.27, 0.5, 0.70, 0.0),
    endColor : new Cesium.Color(0.27, 0.5, 0.70, 0.98),
    imageSize : new Cesium.Cartesian2(rainParticleSize, rainParticleSize * 2),
    updateCallback : rainUpdate
});
scene.primitives.add(rainSystem);

Rainfall update functions are slightly different because rainfall is much faster than snow.

// rain
rainGravityScratch = Cesium.Cartesian3.normalize(particle.position, rainGravityScratch);
rainGravityScratch = Cesium.Cartesian3.multiplyByScalar(rainGravityScratch,
                                                        -1050.0,
                                                        rainGravityScratch);

particle.position = Cesium.Cartesian3.add(particle.position, rainGravityScratch, particle.position);

To match the environment with the atmosphere of the scene, modify the atmosphere and fog to match the rain. The following code makes a dark blue sky covered with mist.

// rain
scene.skyAtmosphere.hueShift = -0.97;
scene.skyAtmosphere.saturationShift = 0.25;
scene.skyAtmosphere.brightnessShift = -0.4;

scene.fog.density = 0.00025;
scene.fog.minimumBrightness = 0.01;

For additional help, please visit Sandcastle example for both snow and rain

Comet and rocket tails comet and rocket tail

Using multiple particle systems Using Multiple Particle Systems

To create comets and rocket tails, we need multiple particle systems. Each location on the particle ring created by this example is a completely independent particle system. This enables us to control the direction of motion more evenly. A simple way to visualize this effect is to limit cometOptions.numberOfSystems to 2, and cometOptions.colorOptions includes only two colors, as shown in the figure below.

To simplify different system sets, arrays are created to carry independent systems associated with comets and rocket examples.

var rocketSystems = [];
var cometSystems = [];

Create two different options for objects: one for Comet and the other for Rocket. This makes the initial system number, offset value and so on of the two systems different, and looks different.

var cometOptions = {
    numberOfSystems : 100.0,
    iterationOffset : 0.003,
    cartographicStep : 0.0000001,
    baseRadius : 0.0005,

    colorOptions : [{
        red : 0.6,
        green : 0.6,
        blue : 0.6,
        alpha : 1.0
    }, {
        red : 0.6,
        green : 0.6,
        blue : 0.9,
        alpha : 0.9
    }, {
        red : 0.5,
        green : 0.5,
        blue : 0.7,
        alpha : 0.5
    }]
};

var rocketOptions = {
    numberOfSystems : 50.0,
    iterationOffset :  0.1,
    cartographicStep : 0.000001,
    baseRadius : 0.0005,

    colorOptions : [{
        minimumRed : 1.0,
        green : 0.5,
        minimumBlue : 0.05,
        alpha : 1.0
    }, {
        red : 0.9,
        minimumGreen : 0.6,
        minimumBlue : 0.01,
        alpha : 1.0
    }, {
        red : 0.8,
        green : 0.05,
        minimumBlue : 0.09,
        alpha : 1.0
    }, {
        minimumRed : 1,
        minimumGreen : 0.05,
        blue : 0.09,
        alpha : 1.0
    }]
};

colorOptions is an array of colors for random vision. Each system starts with a specific color, not a set of color geometries, depending on the system being created. In the following example, i represents the current number of iterations.

var color = Cesium.Color.fromRandom(options.colorOptions[i % options.colorOptions.length]);

Setup settings

Use the following functions as initialization for each system

function createParticleSystems(options, systemsArray) {
    var length = options.numberOfSystems;
    for (var i = 0; i < length; ++i) {
        scratchAngleForOffset = Math.PI * 2.0 * i / options.numberOfSystems;
        scratchOffset.x += options.baseRadius * Math.cos(scratchAngleForOffset);
        scratchOffset.y += options.baseRadius * Math.sin(scratchAngleForOffset);

        var emitterModelMatrix = Cesium.Matrix4.fromTranslation(scratchOffset, matrix4Scratch);
        var color = Cesium.Color.fromRandom(options.colorOptions[i % options.colorOptions.length]);
        var force = forceFunction(options, i);

        var item = viewer.scene.primitives.add(new Cesium.ParticleSystem({
            image : getImage(),
            startColor : color,
            endColor : color.withAlpha(0.0),
            particleLife : 3.5,
            speed : 0.00005,
            imageSize : new Cesium.Cartesian2(15.0, 15.0),
            emissionRate : 30.0,
            emitter : new Cesium.CircleEmitter(0.1),
            bursts : [ ],
            lifetime : 0.1,
            forces : force,
            modelMatrix : particlesModelMatrix,
            emitterModelMatrix : emitterModelMatrix
        }));
        systemsArray.push(item);
    }
}

Because both tail versions are similar, you can use the same createParticleSystems function to create one of them. Pass in CometOptions or RocketOptions option parameters to create different effects.

Create the particle image from scratch to create the particle image from scratch

Instead of loading images from URL s, the getImage function creates images using HTML canvas. This makes image creation more flexible.

var particleCanvas;
function getImage() {
    if (!Cesium.defined(particleCanvas)) {
        particleCanvas = document.createElement('canvas');
        particleCanvas.width = 20;
        particleCanvas.height = 20;
        var context2D = particleCanvas.getContext('2d');
        context2D.beginPath();
        context2D.arc(8, 8, 8, 0, Cesium.Math.TWO_PI, true);
        context2D.closePath();
        context2D.fillStyle = 'rgb(255, 255, 255)';
        context2D.fill();
    }
    return particleCanvas;
}

Force function coercive function

Let's make our updateCallback function:

var scratchCartesian3 = new Cesium.Cartesian3();
var scratchCartographic = new Cesium.Cartographic();
var forceFunction = function(options, iteration) {
    var iterationOffset = iteration;
    var func = function(particle) {
        scratchCartesian3 = Cesium.Cartesian3.normalize(particle.position, new Cesium.Cartesian3());
        scratchCartesian3 = Cesium.Cartesian3.multiplyByScalar(scratchCartesian3, -1.0, scratchCartesian3);

        particle.position = Cesium.Cartesian3.add(particle.position, scratchCartesian3, particle.position);

        scratchCartographic = Cesium.Cartographic.fromCartesian(particle.position,
                                                                Cesium.Ellipsoid.WGS84,
                                                                scratchCartographic);

        var angle = Cesium.Math.PI * 2.0 * iterationOffset / options.numberOfSystems;
        iterationOffset += options.iterationOffset;
        scratchCartographic.longitude += Math.cos(angle) * options.cartographicStep;
        scratchCartographic.latitude += Math.sin(angle) * options.cartographicStep;

        particle.position = Cesium.Cartographic.toCartesian(scratchCartographic);
    };
    return func;
};

Notice that forceFunction is returning a function. The func returned is the actual updateCallback function. For each iteration, the update function creates different rotation offsets based on angle and iteration Offset. A smaller iteration migration will only slightly adjust the angle, allowing the radius to increase steadily as the system continues, as shown in the comet example. Larger iterative migration will change the angle more quickly; this will result in tighter, more unstable cylindrical output, as shown in the rocket example.

This tutorial uses sine and cosine functions for cyclic effects. For other effects, try to make some shapes, such as Lissajous curve，Gibbs phenomenon Or square wave.

Relative position relative position

modelMatrix is used to locate the particle system in an appropriate position behind the plane. Because these systems are vertical, we need to use particleOffset values for slight offsets. As shown in the createParticleSystems function, the emitterModel Matrix offset for each system is calculated based on iteration.

// positioning the plane
var planePosition = Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883, 800.0);
var particlesOffset = new Cesium.Cartesian3(-8.950115473940969, 34.852766731753945, -30.235411095432937);

// creating the particles model matrix
var transl = Cesium.Matrix4.fromTranslation(particlesOffset, new Cesium.Matrix4());
var translPosition = Cesium.Matrix4.fromTranslation(planePosition, new Cesium.Matrix4());
var particlesModelMatrix = Cesium.Matrix4.multiplyTransformation(translPosition, transl, new Cesium.Matrix4());

Resources resources

For additional help, please visit Sandcastle example for both tails examples
More sample code:

• Particle System Demo
• Particle System Fireworks Demo
• Particle System Weather Demo
• Particle System Tails Demo

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.