Cesium中級教程8 - 粒子系統入門

時間  2019-12-31
標籤 cesium 中級 教程 粒子 系統 入門 简体版
原文   原文鏈接

What is a particle system? 什麼是粒子系統？

粒子系統是一種圖形技術，能夠模擬複雜的物理效果。粒子系統是小圖像的集合，當它們一塊兒觀看時，會造成一個更復雜的「模糊」物體，如火、煙、天氣或煙花fireworkds。經過使用諸如初始位置、速度和壽命等屬性指定單個粒子的行爲，能夠控制這些複雜的效果。javascript

粒子系統效應在電影和電子遊戲中很常見。例如，爲了表示飛機的損壞，技術藝術家可使用粒子系統來表示飛機引擎上的爆炸，而後渲染不一樣的粒子系統，表示飛機墜毀時的煙霧軌跡。html

Particle system basics 粒子系統基礎

請看下面基礎粒子系統的代碼：java

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

上面的代碼建立了一個ParticleSystem，一個參數化的對象，用於控制單個粒子對象Particle隨時間的外觀和行爲。粒子由粒子發射器產生，有一個位置和類型，存活一段時間，而後消亡。app

其中一些屬性是動態的。請注意，這裏沒有使用可用的單色屬性scale，而是有一個startScale和endScale。這些容許您指定在粒子的壽命過程當中，粒子大小在開始和結束比例之間的轉換。startColor和endColor的工做原理類似。ide

影響視覺輸出的其餘方法包括最大和最小屬性。對於具備最大和最小輸入的每一個變量，粒子上該變量的實際值將隨機分配到最大和最小輸入之間，並在粒子的整個生命週期內靜態保持該值。例如，使用最小速度和最大速度做爲每一個粒子隨機選擇的速度的界限。容許像這樣更改的屬性包括imageSize、speed、life和particleLife。函數

Emitters 發射器

當粒子誕生時，其初始位置和速度矢量由ParticleEmitter控制。發射器將每秒生成一些粒子，由emissionRate參數指定，根據發射器類型用隨機速度初始化。oop

Cesium有各類各樣的粒子發射器，你能夠開箱即用。動畫

BoxEmitter 盒形發射器

BoxEmitter在一個盒子內隨機取樣的位置初始化粒子，並將它們從六個盒子表面中的一個引導出來。它接受Cartesian3參數，該參數指定框的寬度、高度和深度尺寸。ui

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 圓形發射器

CircleEmitter在發射器上軸線方向上的圓形內的隨機採樣位置初始化粒子。它接受一個指定圓半徑的浮點參數。idea

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

若是發射器未指定，CircleEmitter將做爲默認發射器。

ConeEmitter 錐形發射器

ConeEmitter在圓錐體的頂端初始化粒子，並以隨機的角度引導它們離開圓錐體。它使用一個指定圓錐體角度的浮點參數。圓錐體沿發射器的上軸定向。

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

SphereEmitter 球形發射器

SphereEmitter在球體內隨機取樣的位置初始化粒子，並將它們從球體中心向外引導。它使用一個指定球體半徑的浮點參數。

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 配置粒子系統

Particle emission rate 粒子發射率

emissionRate控制每秒發射多少粒子，這會改變系統中粒子的密度。
指定一組突burst以在指定時間發射粒子burst（如上面的動畫所示）。這會增長粒子系統的多樣性或爆炸性。

將該屬性添加到您的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})
]

在給定的時間，這些爆發將在最小和最大粒子之間發射。

Life of the particle and life of the system 粒子壽命和系統壽命

默認狀況下，粒子系統將永遠運行。要使粒子系統以設定的持續時間運行，請使用lifetime以秒爲單位指定持續時間，並將loop設置爲false。

lifetime : 16.0,
loop: false

將particleLife設置爲5.0將使系統中的每一個粒子都具備該particleLife值。要隨機化每一個粒子的輸出，請使用變量minimumParticleLife和maximumArticleLife。

minimumParticleLife: 5.0,
maximumParticleLife: 10.0

Styling particles 樣式化粒子

Color 顏色

粒子的樣式是使用image和color指定的紋理，這些紋理能夠在粒子的生命週期中更改以建立動態效果。
下面的代碼使煙霧粒子從綠色過渡到白色。

startColor : Cesium.Color.LIGHTSEAGREEN.withAlpha(0.7),
endColor : Cesium.Color.WHITE.withAlpha(0.0),

Size 大小

粒子的大小由imageSize控制。要隨機化大小，請使用minimumImageSize.x和maximumImageSize.x控制寬度（以像素爲單位），並使用minimumImageSize.y和maximumImageSize.y控制高度（以像素爲單位）。
下列代碼建立方形粒子在30到60像素之間：

minimumImageSize : new Cesium.Cartesian2(30.0, 30.0),
maximumImageSize : new Cesium.Cartesian2(60.0, 60.0)

粒子的大小能夠經過startScale和endscale屬性在其生命週期中進行調整，以使粒子隨時間增加或收縮。

startScale: 1.0,
endScale: 4.0

Speed 速度

速度由speed或minimumSpeed和maximumSpeed控制。

minimumSpeed: 5.0,
maximumSpeed: 10.0

UpdateCallback 更新回調

經過應用更新函數，能夠進一步自定義粒子系統。對於重力、風或顏色更改等效果，它充當每一個粒子的手動更新程序。

項目系統有一個updateCallback，它在模擬過程當中修改粒子的屬性。此函數採用粒子和模擬時間步驟。大多數基於物理的效果將修改速度矢量以改變方向或速度。下面是一個讓粒子對重力做出反應的例子：

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

該函數計算重力矢量，並使用重力加速度來改變粒子的速度。
將重力設置爲粒子系統的updateFunction：

updateCallback : applyGravity

Positioning 定位

使用兩個Matrix4變換矩陣定位粒子系統：

  • modelMatrix：將粒子系統從模型轉換爲世界座標。
  • emitterModelMatrix：在粒子系統的局部座標系中變換粒子系統發射器。

您能夠只使用這些轉換矩陣中的一個，而將另外一個保留爲標識矩陣，但爲了方便起見，咱們提供了這兩個矩陣。爲了練習建立矩陣，讓咱們將粒子發射器相對於另外一個實體定位。

爲咱們的粒子系統建立一個着重的實體。打開Hello World Sandcastle示例並添加如下代碼以向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;

咱們想增長一個來自卡車後部的煙霧效果。建立一個模型矩陣，該模型矩陣將定位粒子系統並使其方向與牛奶卡車實體相同。

modelMatrix: entity.computeModelMatrix(time, new Cesium.Matrix4())

這將粒子系統放置在卡車的中心。爲了把它放在卡車的後面，咱們能夠用平移來建立一個矩陣。

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

如今，添加粒子系統：

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

還要注意，咱們能夠隨時間更新模型或發射器矩陣。例如，若是咱們想要在卡車上設置發射器位置的動畫，咱們能夠修改emitterModelMatrix，同時保持modelMatrix不變。

查看完整示例，請訪問Particle System demo

Learn more 更多知識

有關使用更高級技術的粒子系統達到更酷效果，請參見粒子系統更多效果教程。

更多示例代碼請參考：

Cesium中文網交流QQ羣：807482793

本文由 admin 創做，採用 知識共享署名 3.0 中國大陸許可協議 進行許可。 可自由轉載、引用，但需署名做者且註明文章出處。
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程