Cesium Learning Notes (10): Particle systems (particle system)

particle System is the newest update of Cesium1.35, let's take a look at it 1. Examples First, we'll start with a plane.

var entity = Viewer.entities.add ({
    model: {
        uri: ' ... /APPS/SAMPLEDATA/MODELS/CESIUMAIR/CESIUM_AIR.GLTF ',
        minimumpixelsize:64
    },
    position: Cesium.Cartesian3.fromDegrees ( -112.110693, 36.0994841, 1000.0)
});
Viewer.trackedentity = entity;

then we need to get to the plane's model position.

Calculates the position matrix
function Computemodelmatrix (entity, time) {
    //Get position
    var position = Cesium.Property.getValueOrUndefined (Entity.position, Time, New Cesium.cartesian3 ());
    if (! cesium.defined (position)) {return
        undefined;
    }
    Get direction
    var Modelmatrix;
    var orientation = Cesium.Property.getValueOrUndefined (entity.orientation, Time, New  cesium.quaternion ());
    if (! cesium.defined (orientation)) {
        Modelmatrix = Cesium.Transforms.eastNorthUpToFixedFrame (position, undefined, New     cesium.matrix4 ());
    } else {
        Modelmatrix = Cesium.Matrix4.fromRotationTranslation (Cesium.Matrix3.fromQuaternion (Orientation, new Cesium.matrix3 ()), Position, New cesium.matrix4 ());
    return modelmatrix;
}

then set the particle emitter position.

Compute engine (particle emitter) position matrix
function Computeemittermodelmatrix () {
    //direction
    HPR = Cesium.HeadingPitchRoll.fromDegrees (0.0, 0.0, 0.0, new Cesium.headingpitchroll ());
    var trs = new Cesium.translationrotationscale ();

    The XYZ axis position of the coordinate system with the Modelmatrix (aircraft) center as the origin is offset
    trs.translation = Cesium.Cartesian3.fromElements (2.5, 3.5, 1.0, new CESIUM.CARTESIAN3 ());
    Trs.rotation = Cesium.Quaternion.fromHeadingPitchRoll (HPR, New Cesium.quaternion ());
    Return Cesium.Matrix4.fromTranslationRotationScale (TRS, New cesium.matrix4 ());
}

Finally, we can load our particle system to see the effect.

var particlesystem = Viewer.scene.primitives.add (new Cesium.particlesystem ({
    Image: ' ...) /apps/sampledata/fire.png ',
    startscale:1.0,
    endscale:4.0,
    minimumlife:1.0,
    maximumlife:1.5,
    speed:5.0,
    width:20,
    height:20,
    lifetime:16.0,
    //main model parameters (location)
    Modelmatrix: Computemodelmatrix (Entity, Cesium.JulianDate.now ()),
    //transmitter Parameters
    emitter:new Cesium.circleemitter (0.5),
    rate:5.0,
    Emittermodelmatrix:computeemittermodelmatrix (),
    //color
    StartColor: Cesium.Color.RED.withAlpha (0.7),
    EndColor:Cesium.Color.YELLOW.withAlpha (0.3),
    forces: [Applygravity]
}));

2. The particle emitter cesium has 4 kinds of launchers built into it, and you can see what I'm using here is Circleemitter, let's see what kind of particles the transmitter emits Circleemitter

Emitter:new Cesium.circleemitter (0.5)

The particle emitted by this transmitter is a circle, so a radius is needed so that it may not be visible, and we can see it in an instant by increasing the particle size.

Coneemitter

Emitter:new Cesium.coneemitter (Cesium.Math.toRadians (45.0))

This is a slightly scattered, not circleemitter so, because it is a cone of divergence, so you need to pass an angle

Gee, it's good for a bomb effect, mushroom cloud, eh ? Boxemitter and Sphereemitter There are two different kinds of feeling, I'll say it together, incidentally. Boxemitter This is from a cuboid to emit particles out, need to pass a Cartesian3, store the length of width and height

Emitter:new Cesium.boxemitter (New Cesium.cartesian3 (1.0, 1.0, 1.0))

Sphereemitter is a ball that emits particles out of a sphere and requires a radius

Emitter:new Cesium.sphereemitter (0.5)

look at the effect, feel the same, we need to see the difference from the sky

Boxemitter

Sphereemitter 3. Bursts before we saw the effect is actually done with bursts, bursts is to let the particle system periodically to make some additional burst effect, the use is very simple

var particlesystem = Viewer.scene.primitives.add (new Cesium.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})
    ],
    ...
}));

we need to pass in a Particleburst type array with the effect you want. 4. Some of the other attributes many of the properties in a particle system have min and Max and themselves, for example, Life has Minimumlife, Maximumlife, and three, but if you set up the life attribute, Then Minimumlife and Maximumlife will fail , and so are the other attributes. There are some more interesting properties, such as color, you can set StartColor and EndColor to set the color gradient where rate is the emission rate of particles, the number of particles emitted per second . The loop of the particle is true by default, and it can be turned off if necessary, combined with bursts and the rate of the particle rate set to 0, which can make a good explosion effect . In addition to these there are many attributes such as speed, width, height and so on, the details can see the official API 5. Gravity effect This is a big play, and the authorities have provided us with a method of calculation (forgive my maths, a face)

You need a gravity multiplier, but this gravity seems to be reversed, minus is the increase in Gravity
var gravity = 0;
var gravityscratch = new Cesium.cartesian3 ();
function applygravity (p, DT) {
    //Compute a local up vector for each particle in geocentric spaces.
    var position = p.position;

    Cesium.Cartesian3.normalize (position, gravityscratch);
    Cesium.Cartesian3.multiplyByScalar (Gravityscratch, gravity * dt, gravityscratch);

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

you just need to add one sentence to the initialization of the particle system.

Particlesystem: {...
    Forces: [applygravity],
    ...
}

Let's take a look at 100 times times what the effect of gravity

Hey, it's interesting, let's have some more fun, let the plane fly and see how it works . we do not need to change any code, remember the previous circle of the aircraft (do not know the stamp here), we just need to add the previous code in the back, and add a way to update the location of the (after all, it is moving)

Viewer.scene.preRender.addEventListener (function (scene, time) {
    //recalculate position
    Particlesystem.modelmatrix = Computemodelmatrix (entity, time);
});

in total, these are added

Calculates the position matrix function Computemodelmatrix (entity, time) {//get position var position = Cesium.Property.getValueOrUnd
    Efined (Entity.position, Time, New Cesium.cartesian3 ()); if (!
    cesium.defined (position)) {return undefined; 
    //Get direction var orientation = Cesium.Property.getValueOrUndefined (entity.orientation, Time, New Cesium.quaternion ()); if (! cesium.defined (orientation)) {var Modelmatrix = Cesium.Transforms.eastNorthUpToFixedFrame (position, undefined, NE
    W cesium.matrix4 ()); else {Modelmatrix = Cesium.Matrix4.fromRotationTranslation (Cesium.Matrix3.fromQuaternion (orientation, new Cesiu
    M.matrix3 ()), Position, New cesium.matrix4 ());
return Modelmatrix; }//Compute engine (particle emitter) position matrix function Computeemittermodelmatrix () {//Direction HPR = Cesium.HeadingPitchRoll.fromDegrees (0.0, 0.
    0, 0.0, new Cesium.headingpitchroll ());
    var trs = new Cesium.translationrotationscale (); The XYZ axis position of the coordinate system with the Modelmatrix (aircraft) center as the origin is offset trs.translation = Cesium.Cartesian3.fromElements (2.5, 3.5, 1.0, New Cesium.cartesian3 ());
    Trs.rotation = Cesium.Quaternion.fromHeadingPitchRoll (HPR, New Cesium.quaternion ());
Return Cesium.Matrix4.fromTranslationRotationScale (TRS, New cesium.matrix4 ()); }//Particle system parameter var Particlesystem = Viewer.scene.primitives.add (new Cesium.particlesystem ({image: ' ...) /apps/sampledata/fire.png ', startscale:1.0, endscale:4.0, minimumlife:1.0, maximumlife:1.5, SP eed:5.0, Width:20, height:20, lifetime:16.0, bursts: [New Cesium.particleburst ({time:5. 0, minimum:300, maximum:500}), new Cesium.particleburst ({time:10.0, minimum:50, maximum:100}), n EW Cesium.particleburst ({time:15.0, minimum:200, maximum:300})],//main model parameters (location) Modelmatrix:computemodel Matrix (Entity, Cesium.JulianDate.now ()),//Transmitter Parameters Emitter:new Cesium.circleemitter (0.5), rate:5.0, EMI Ttermodelmatrix:computeemittermodelmatrIX (),//color StartColor:Cesium.Color.RED.withAlpha (0.7), EndColor:Cesium.Color.YELLOW.withAlpha (0.3), FORC

ES: [applygravity]});
Gravity calculates var gravityscratch = new Cesium.cartesian3 ();

    function applygravity (p, dt) {var position = p.position;
    Cesium.Cartesian3.normalize (position, gravityscratch);

    Cesium.Cartesian3.multiplyByScalar (gravityscratch, 1 * dt, gravityscratch);
p.velocity = Cesium.Cartesian3.add (p.velocity, Gravityscratch, p.velocity); }//Refresh location Viewer.scene.preRender.addEventListener (function (scene, time) {Particlesystem.modelmatrix = Computemodelmat
RIX (entity, time); });

The

effect is still good