Cesium中級教程8

阿新 • • 發佈：2019-06-02

Cesium中文網：http://cesiumcn.org/ | 國內快速訪問：http://cesium.coinidea.com/

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

粒子系統是一種圖形技術，可以模擬複雜的物理效果。粒子系統是小影象的集合，當它們一起觀看時，會形成一個更復雜的“模糊”物體，如火、煙、天氣或煙花fireworkds。通過使用諸如初始位置、速度和壽命等屬性指定單個粒子的行為，可以控制這些複雜的效果。

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

Particle system basics 粒子系統基礎

請看下面基礎粒子系統的程式碼：

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隨時間的外觀和行為。粒子由粒子emiter產生，有一個位置和型別，存活一段時間，然後消亡。

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

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

、speed、life和particleLife。

Emitters

當粒子誕生時，其初始位置和速度向量由ParticleEmitter控制。emiter將每秒生成一些粒子，由emissionRate引數指定，根據emiter型別用隨機速度初始化。

Cesium有各種各樣的粒子emiter，你可以開箱即用。

BoxEmitter 盒形

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

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 圓形emitter

CircleEmitter在emitter上軸線方向上的圓形內的隨機取樣位置初始化粒子。它接受一個指定圓半徑的浮點引數。

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

如果emitter未指定，CircleEmitter將作為預設emitter。

ConeEmitter 錐形emitter

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

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 球形emitter

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：在粒子系統的區域性座標系中變換粒子系統emiter。

您可以只使用這些轉換矩陣中的一個，而將另一個保留為標識矩陣，但為了方便起見，我們提供了這兩個矩陣。為了練習建立矩陣，讓我們將粒子emiter相對於另一個實體定位。

為我們的粒子系統建立一個著重的實體。開啟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()
}));

還要注意，我們可以隨時間更新模型或emiter矩陣。例如，如果我們想要在卡車上設定emiter位置的動畫，我們可以修改emitterModelMatrix，同時保持modelMatrix不變。

檢視完整示例，請訪問Particle System demo

Learn more 更多知識

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

更多示例程式碼請參考：

Particle System Fireworks Demo
[Particle Systems Weather](Particle Systems Weather)
[Particle Systems Tails](Particle Systems Tails)

本文由 admin 創作，採用知識共享署名 3.0 中國大陸許可協議進行許可。可自由轉載、引用，但需署名作者且註明文章出處。

Cesium中文網交流QQ群：807482793

Cesium中文網：http://cesiumcn.org/ | 國內快速訪問：http://ces

Cesium中級教程8

Cesium官方教程8-- 幾何體和外觀效果

Cesium中級教程5

Cesium中級教程6

Cesium中級教程9

Cesium中級教程10

Cesium中級教程7

gamemaker studio2 Arena Shooter（競技場射擊）圖文教程 8 教程搬運加自己經驗

Hyper-V 2016 系列教程8 虛擬SAN管理器

Node入門教程(8)第六章：path 模塊詳解

VSTO開發中級教程初稿目錄

前端最火工具webpack4.0中級教程

程式設計師教程-8章-標準化和智慧財產權基礎知識

tensorflow基本教程8：手寫體分類卷積神經網路

Python教程8

Cesium中級1 - 空間資料視覺化（一）

【SIKIA計劃】_04_C#中級教程 (2015版)筆記

Cesium官方教程6--相機

Cesium官方教程12--材質（Fabric）

Cesium官方教程11--建模人員必讀

Cesium中級教程8

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

Particle system basics 粒子系統基礎

Emitters

BoxEmitter 盒形

CircleEmitter 圓形emitter

ConeEmitter 錐形emitter

SphereEmitter 球形emitter

Configuring particle systems 配置粒子系統

Particle emission rate 粒子發射率

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

Styling particles 樣式化粒子

Color 顏色

Size 大小

Speed 速度

UpdateCallback 更新回撥

Positioning 定位

Learn more 更多知識

Cesium中級教程8

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

Particle system basics 粒子系統基礎

Emitters

BoxEmitter 盒形

CircleEmitter 圓形emitter

ConeEmitter 錐形emitter

SphereEmitter 球形emitter

Configuring particle systems 配置粒子系統

Particle emission rate 粒子發射率

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

Styling particles 樣式化粒子

Color 顏色

Size 大小

Speed 速度

UpdateCallback 更新回撥

Positioning 定位

Learn more 更多知識

相關推薦