Cesium中級教程9 - Advanced Particle System Effects 高級粒子系統效應

時間 2019-11-05

標籤 cesium 中級教程 advanced particle system effects 高級粒子系統效應简体版

原文原文鏈接

Cesium中文網：http://cesiumcn.org/ | 國內快速訪問：http://cesium.coinidea.com/ 要了解粒子系統的基礎知識，請參見粒子系統入門教程。javascript

Weather 天氣

Setup 設置

若要生成雪效果，請首先爲每一個粒子添加雪花圖像，而後在updateParticle函數中定義粒子的移動行爲和其餘動態元素。html

The images 圖像

本教程中使用瞭如下三個圖像。左邊是雨粒子；中間的圖像是雪粒子；右邊的圖像用於火效果。java

The update function 更新函數

更新函數用於定義粒子的移動、排列和可視化。修改粒子的color顏色、imageSize圖像大小和particleLife粒子生命週期。咱們甚至能夠基於到相機距離定義粒子（以下所述）、導入模型或到地球自己的距離來修改它們。git

下面是咱們針對雪的更新函數：canvas

// 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);
    }
};

函數的第一部分使粒子像重力同樣下落。更新函數還包含一個距離檢查，以便粒子在遠離相機時消失。數組

額外的天氣效應

使用霧和大氣效果來加強可視化效果，並匹配咱們試圖複製的天氣類型。dom

hueshift沿着顏色光譜改變顏色，saturationShift改變了視覺實際須要的顏色與黑白的對比程度，brightnessShift改變了顏色的生動程度。ide

霧密度改變了地球上覆蓋物與霧的顏色之間的不透明程度。霧的minimumBrightness用來使霧變暗。函數

// 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 系統

Snow 雪

雪花系統使用snowflake_particle圖像，並使用minimumImageSize和maximumImageSize，在該範圍內隨機建立雪花。ui

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 雨

雨滴系統使用circular_particle.png用於雨滴。imageSize用於垂直拉伸圖像，使雨水呈現細長的外觀。

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);

雨水更新函數略有不一樣，由於降雨比降雪快得多。

// 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);

要使環境與場景的氣氛匹配，請修改大氣和霧以匹配雨水。下面的代碼使一個深藍色的天空被薄霧覆蓋。

// 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;

獲取額外的幫助，請訪問Sandcastle example for both snow and rain

Comet and rocket tails 彗星和火箭尾部

Using multiple particle systems 使用多重粒子系統

要建立彗星和火箭尾部，咱們須要多個粒子系統。該示例建立的粒子環上的每一個位置都是徹底獨立的粒子系統。這使咱們可以更均勻地控制系統的運動方向。可視化此效果的一個簡單方法是將cometOptions.numberOfSystems限制爲2，且cometOptions.colorOptions僅包括兩種顏色，以下圖所示。

爲了簡化不一樣的系統集合，建立數組來攜帶與彗星相關聯的獨立系統和與火箭例子相關聯的獨立系統。

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

爲對象建立兩個不一樣的選項：一個用於彗星Comet版本，另外一個用於火箭Rocket版本。這使得兩個系統的初始系統數、偏移值等不一樣，看起來也不一樣。

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是用於隨機視覺的顏色數組。每一個系統從一個特定的顏色開始，而不是有一組顏色幾何，這取決於當前正在建立的系統。在下面的示例中，i表示當前迭代輪數。

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

Setup 設置

使用下面的函數做爲每一個系統的初始化

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);
    }
}

因爲兩個尾部版本都類似，所以可使用相同的createParticleSystems函數來建立其中一個。傳入CometOptions或RocketOptions選項參數以建立不一樣的效果。

Create the particle image from scratch 從頭開始建立粒子圖像

不是從URL加載圖像，getImage函數是使用HTML畫布建立圖像。這使得圖像建立更加靈活。

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;
}

The force function 強制函數

下面使咱們的updateCallback函數：

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;
};

注意forceFunction正在返回函數。返回的func是實際的updateCallback函數。對於每次迭代，update函數根據angle和iterationOffset建立不一樣的旋轉偏移量。較小的迭代偏移只會稍微調整角度，容許半徑隨着系統的繼續穩步增大，如彗星示例所示。較大的迭代偏移將更快地改變角度；這將使更緊密、更不穩定的圓柱形輸出，如火箭例子中所示。

本教程使用正弦和餘弦函數進行循環效果。對於其餘的效果，試着作一些形狀，好比Lissajous curve，Gibbs phenomenon，或者square wave。

Relative position 相對位置

使用modelMatrix將粒子系統定位在平面後面的適當位置。由於這些系統是垂直的，因此咱們須要使用particleOffset值進行輕微的偏移。如createParticleSystems函數所示，根據迭代，計算每一個系統的emitterModelMatrix偏移量。

// 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());