開頭直接進(jìn)入主題這是Cesium開發(fā)里一個很典型也很出效果的需求在三維場景中模擬建筑火災(zāi)再用粒子系統(tǒng)做噴射特效實現(xiàn)消防滅火推演。Cesium的粒子系統(tǒng)ParticleSystem本身是內(nèi)置能力但要把火焰、濃煙、水柱這些效果做得真實、可控、能融入業(yè)務(wù)推演流程中間還是有不少細(xì)節(jié)坑要踩。這篇文章我會從項目拆解到粒子參數(shù)、再到推演控制盡量把完整的實現(xiàn)路徑講清楚適合正在做數(shù)字孿生、應(yīng)急演練、智慧園區(qū)項目的朋友參考。我自己接這個需求的時候甲方的要求其實只有一句話“在三維建筑上模擬一場火災(zāi)然后看水炮怎么把它滅掉?！钡@句話落到Cesium里就變成了一連串問題火焰用粒子系統(tǒng)怎么做煙霧往上飄怎么控制水炮的水柱要跟著噴射方向走滅火后火焰怎么減小整個推演過程怎么讓視角自動切換讓領(lǐng)導(dǎo)看的時候有沉浸感接下來我一步步拆。1. 項目架構(gòu)與需求拆解不只是“加一團(tuán)粒子”很多人拿到這種需求第一反應(yīng)是找個ParticleSystem的Demo把粒子貼圖往上一糊弄一團(tuán)橙色東西在那兒飄就當(dāng)火焰了。但真正面向“消防滅火推演”這個業(yè)務(wù)場景時需求遠(yuǎn)不止視覺好看。1.1 消防滅火推演的需求本質(zhì)推演和特效展示最大的區(qū)別在于推演要能反映火災(zāi)發(fā)展的時間階段、滅火力量的介入過程以及最終的撲滅結(jié)果。所以這個項目至少要有三層邏輯。第一層是建筑與場景層也就是說要有一個可感知尺度、帶樓層信息的三維建筑可以是手工建模轉(zhuǎn)成3D Tiles也可以是用Cesium的EntityBox堆出來的簡易體塊看項目精度要求。第二層是特效層對應(yīng)的是火焰、濃煙、水柱、水霧這些視覺元素這層由粒子系統(tǒng)承載但粒子的狀態(tài)需要和業(yè)務(wù)狀態(tài)聯(lián)動。第三層是流程控制層也就是推演狀態(tài)機(jī)什么時候起火、火勢多大、幾輛車同時出水、什么時候火勢變小都要有據(jù)可循。這三層缺一不可。如果你只做第二層那就是個炫技Demo跟業(yè)務(wù)無關(guān)如果只做第一層加第三層沒有粒子特效又沒有任何視覺沖擊力領(lǐng)導(dǎo)看了沒感覺。1.2 為什么選Cesium而不是純Three.js或UE這個項目本身就是在Cesium的GIS場景里做的所以選型基本不用猶豫。但我在前期調(diào)研時還是對比過Three.js和UE的方案。Three.js的粒子系統(tǒng)做得非常成熟各種shader效果比Cesium靈活很多但問題在于Three.js沒有Cesium這種地球級坐標(biāo)、地形、傾斜攝影加載能力你要在一個大場景里疊加GIS數(shù)據(jù)、建筑BIM模型、攝像機(jī)路徑純Three.js要自己搭的東西太多。UE的話視覺效果確實頂級但項目成本、硬件要求、與Web端GIS數(shù)據(jù)對接的復(fù)雜度都很高一般應(yīng)急演練系統(tǒng)跑在普通辦公電腦上就已經(jīng)吃力了。Cesium自帶的ParticleSystem雖然精度上沒有UE的VFX系統(tǒng)那么夸張但勝在可控、可集成粒子行為可以用JS代碼動態(tài)修改這正好契合推演系統(tǒng)對“狀態(tài)可變”的要求。最后我確認(rèn)的方案是場景底座用Cesium的3D Tiles建筑加載用傾斜攝影或白模特效層用ParticleSystem推演流程用自定義時間軸狀態(tài)機(jī)驅(qū)動。1.3 整體功能模塊劃分我做了七個模塊場景加載包括地形影像和建筑模型、建筑樓層標(biāo)簽用于定位起火點和顯示樓層信息、粒子系統(tǒng)管理火焰、煙霧、水柱的統(tǒng)一管理器、相機(jī)飛行控制自動導(dǎo)播視角、推演狀態(tài)機(jī)起火—發(fā)展—滅火—熄滅、交互面板播放暫停重置、性能監(jiān)測。這里想強(qiáng)調(diào)一下“粒子系統(tǒng)管理”這個模塊。很多人寫粒子效果都是直接new一個ParticleSystem貼出去但在這個項目里火焰可能多點起火水炮可能多臺聯(lián)動粒子系統(tǒng)數(shù)量會很多所以一定要做一個管理類統(tǒng)一控制粒子的創(chuàng)建、更新和銷毀。我用的類是ParticleSystemManager內(nèi)部維護(hù)一個數(shù)組每幀統(tǒng)一調(diào)用update方法根據(jù)推演狀態(tài)去調(diào)整各個粒子系統(tǒng)的參數(shù)。2. 粒子系統(tǒng)核心機(jī)制拆解Cesium的粒子到底怎么跑Cesium的粒子系統(tǒng)其實是一個CPUGPU混合驅(qū)動的系統(tǒng)它會為每個粒子維護(hù)位置、速度、顏色、生命周期等屬性然后通過Cesium.ParticleSystem這個類對外提供配置入口。理解了這個類的幾個關(guān)鍵配置就理解了一大半。2.1 ParticleSystem API的基本使用流程一個最基礎(chǔ)的粒子系統(tǒng)創(chuàng)建過程大概是這樣的const particleSystem new Cesium.ParticleSystem({ image: getParticleTexture(), imageSize: new Cesium.Cartesian2(20, 20), startScale: 1.0, endScale: 4.0, particleLife: 1.0, lifeTime: 30.0, emissionRate: 50.0, emitter: new Cesium.CircleEmitter(2.0), emitterModelMatrix: computeEmitterModelMatrix(), updateCallback: applyGravity, modelMatrix: entity.computeModelMatrix(time, new Cesium.Matrix4()), color: Cesium.Color.ORANGE, }); viewer.scene.primitives.add(particleSystem);這里有幾個地方新手容易忽略。image雖然是必填項但建議不要直接加載一張png圖片就算完粒子紋理對火焰最終效果影響非常大后面我會單獨講。modelMatrix和emitterModelMatrix稍微繞一點前者是將粒子系統(tǒng)放置到世界坐標(biāo)系中后者是發(fā)射器相對粒子系統(tǒng)原點的偏移和旋轉(zhuǎn)水柱噴射那種帶方向性的效果主要就是靠emitterModelMatrix的旋轉(zhuǎn)矩陣來實現(xiàn)。2.2 粒子發(fā)射器不同火勢形態(tài)的選擇邏輯Cesium內(nèi)置了幾種發(fā)射器選型邏輯我直接說結(jié)論。CircleEmitter適合做火焰底部粒子從圓形區(qū)域向上噴發(fā)模擬燃燒面的感覺。ConeEmitter適合做水柱因為錐形發(fā)射器本身有方向性可以模擬水炮噴射時水流的發(fā)散角度。SphereEmitter適合做爆炸或濃煙初期擴(kuò)散整個球形區(qū)域都有粒子產(chǎn)生。默認(rèn)情況下不傳發(fā)射器Cesium用的是ConstantSpawnRate加一個默認(rèn)的圓形發(fā)射器但參數(shù)很傻基本都要自己配。我封裝了一個發(fā)射器配置函數(shù)方便在火焰和水柱之間快速切換function createEmitter(type, options) { switch (type) { case circle: return new Cesium.CircleEmitter(options.radius || 1.5); case cone: return new Cesium.ConeEmitter(options.angle || Cesium.Math.toRadians(15)); case sphere: return new Cesium.SphereEmitter(options.radius || 1.0); default: return new Cesium.CircleEmitter(1.0); } }2.3 圖像尺寸、顏色漸變與生命周期火焰真實感的來源火焰粒子要想看起來不像一坨橙色糖漿關(guān)鍵在顏色隨生命周期的漸變和粒子尺寸縮放。Cesium的color屬性支持Cesium.Color類型但要注意它只支持單一顏色如果要做從亮黃到橙紅再到暗紅的漸變需要使用updateCallback來動態(tài)修改粒子顏色。更優(yōu)雅的做法是給ParticleSystem傳入不同的顏色區(qū)間。Cesium其實支持startColor和endColor這種東西嗎嚴(yán)格來說ParticleSystem本身沒有startColor/endColor的公開參數(shù)但粒子系統(tǒng)的Particle對象在updateCallback里是可以修改particle.color的。所以我的做法是在更新回調(diào)里根據(jù)粒子的normalizedAge從0到1的生命進(jìn)度插值計算顏色。這里有個很重要的細(xì)節(jié)很多人忽略normalizedAge這個屬性導(dǎo)致寫了一大堆顏色邏輯但粒子顏色死活不變。實際上Cesium的Particle對象確實暴露了normalizedAge屬性它比自己去算age / life要穩(wěn)妥得多。顏色插值代碼類似這樣function fireUpdateCallback(particle) { const age particle.normalizedAge; const color particle.color; // 從亮黃逐步過渡到暗紅 color.red 1.0; color.green 1.0 - age * 0.8; color.blue 0.15 * (1.0 - age); color.alpha 1.0 - age; }imageSize和particleLife的組合也很有講究。粒子生命周期太短會顯得火苗細(xì)小太長又讓人覺得像拖尾煙霧。我實測下來室內(nèi)火災(zāi)場景火焰粒子生命周期在1.2到2.0秒之間比較合適噴射強(qiáng)度大的位置可以適當(dāng)放到2.5秒但超過3秒就開始顯得假了。2.4 粒子速度、重力與隨機(jī)性讓火“活”起來Cesium里粒子速度是通過ParticleSystem的updateCallback配合粒子的velocity屬性來控制的。粒子在每一幀更新時速度會受gravity影響但Cesium并沒有直接暴露一個萬有引力的參數(shù)比如setGravity你需要在updateCallback里自己給particle.velocity疊加一個加速度。火焰一般要模擬熱空氣上升所以速度方向應(yīng)該是向上的且?guī)е稽c隨機(jī)抖動。煙霧則相反要緩慢上升并逐漸減速膨脹。水柱要的是高速、方向明確的初速度然后在重力作用下做拋物線運(yùn)動。我的做法是在每個粒子系統(tǒng)創(chuàng)建時寫入一個velocityVector基礎(chǔ)速度然后在更新回調(diào)里加隨機(jī)偏移和重力向量const gravityVector new Cesium.Cartesian3(0, 0, -0.5); function fireParticleCB(particle) { const age particle.normalizedAge; // 模擬熱浪擾動 particle.velocity.x (Math.random() - 0.5) * 0.15; particle.velocity.y (Math.random() - 0.5) * 0.15; particle.velocity.z 0.05 * (1 - age); // 上升力逐漸減弱 Cesium.Cartesian3.add(particle.velocity, gravityVector, particle.velocity); }一開始我直接用速度疊加做火苗效果是飄的像是輕飄飄的云朵。后來發(fā)現(xiàn)要出那種火舌抖動的感覺光改速度還不夠還需要給粒子一個初始的隨機(jī)方向不能全朝向正上方?？梢杂肅esium.Cartesian3的隨機(jī)偏移加上發(fā)射器本身的旋轉(zhuǎn)來實現(xiàn)這個細(xì)節(jié)放在實操部分再說。3. 三大粒子特效實操火焰、煙霧、高壓水炮的完整實現(xiàn)這一節(jié)直接上核心代碼和參數(shù)。我盡量把自己調(diào)過的參數(shù)寫清楚但你在實際項目里還是要根據(jù)建筑尺寸、相機(jī)高度和場景氛圍再微調(diào)。3.1 火焰粒子從底層基礎(chǔ)參數(shù)到高層火焰形態(tài)火焰粒子系統(tǒng)我一般會定義三個層次底層火源、中層火舌、頂層火星。底層火源用一個小半徑的圓形發(fā)射器粒子密集但擴(kuò)散小看起來像劇烈燃燒的根部中層火舌負(fù)責(zé)把火焰向上拉伸粒子的初速度方向偏上并帶一點角度頂層火星是少量粒子速度快、尺寸小、顏色偏亮黃用來模擬火星四濺。先說底層火源的完整配置function createBaseFire(position, height) { return new Cesium.ParticleSystem({ image: getFireTexture(), imageSize: new Cesium.Cartesian2(12, 12), startScale: 0.8, endScale: 3.2, particleLife: 1.5, lifeTime: Number.POSITIVE_INFINITY, emissionRate: 80, emitter: new Cesium.CircleEmitter(1.0), emitterModelMatrix: getTranslateMatrix(0, 0, 0.5), modelMatrix: getEntityModelMatrix(position, height), updateCallback: fireUpdateCallback, color: new Cesium.Color(1.0, 0.75, 0.2, 0.8), }); }這里getEntityModelMatrix是把粒子系統(tǒng)放置在起火點中心。一個常見的錯誤是直接把經(jīng)緯度轉(zhuǎn)成Cartesian3就塞進(jìn)去但modelMatrix還要考慮與地球自轉(zhuǎn)同步所以要用Cesium.Transforms.eastNorthUpToFixedFrame生成局部坐標(biāo)系矩陣然后用Matrix4.multiply把偏移量加進(jìn)去。具體這樣寫function getEntityModelMatrix(position, height) { const localFrame Cesium.Transforms.eastNorthUpToFixedFrame(position); // 向上偏移height米作為發(fā)射中心 const translation Cesium.Matrix4.fromTranslation(new Cesium.Cartesian3(0, 0, height)); return Cesium.Matrix4.multiply(localFrame, translation, new Cesium.Matrix4()); }中層火舌我加了方向擾動。做法是把ConeEmitter的錐口設(shè)成30度左右粒子初速度設(shè)置為(0, 0, 8)再配合一個小的隨機(jī)擾動。這樣粒子不是全垂直向上而是有扇形擴(kuò)散火焰看起來有翻卷感。頂層火星的粒子數(shù)量不需要多20到30個/秒就夠但初速度要大而且要設(shè)置一個較大的重力影響讓粒子在落地前快速衰減。關(guān)于火焰紋理這里有個非常關(guān)鍵的經(jīng)驗。不要直接用下載的“火焰.png”就開始跑那種貼圖經(jīng)常帶背景色或者高光區(qū)域分布不合理。最穩(wěn)妥的辦法是用Canvas動態(tài)生成一張柔和的圓形漸變紋理火焰在這種紋理上通過粒子疊加和顏色混合會顯得特別自然。function generateGlowTexture() { const canvas document.createElement(canvas); canvas.width 64; canvas.height 64; const ctx canvas.getContext(2d); const gradient ctx.createRadialGradient(32, 32, 0, 32, 32, 32); gradient.addColorStop(0, rgba(255,255,255,1)); gradient.addColorStop(0.4, rgba(255,200,0,0.7)); gradient.addColorStop(1, rgba(255,0,0,0)); ctx.fillStyle gradient; ctx.fillRect(0, 0, 64, 64); return canvas.toDataURL(); }這個Canvas生成的紋理好處是邊緣透明、中心高亮粒子疊加后會出現(xiàn)自然的發(fā)光融合感不費美術(shù)資源也能出效果。3.2 煙霧粒子大火之后的次生災(zāi)害模擬煙霧和火焰的實現(xiàn)思路完全不同。煙霧必須有明顯的上升和擴(kuò)散過程而且顏色要從近火源的深灰色慢慢變成遠(yuǎn)端的淺灰白透明度也要逐漸降低。煙霧粒子的生命周期通常比火焰長不少我用的是3到5秒。煙霧的發(fā)射器我選了SphereEmitter半徑2到3米這樣粒子一開始就有一定的體積擴(kuò)散不會是一個小點往上飄。關(guān)鍵參數(shù)是emissionRate。煙霧的發(fā)射速率如果和火焰一樣動輒每秒幾十上百畫面會瞬間糊成一團(tuán)黑色。我實測下來每秒15到25個粒子就夠了配合粒子較大的imageSize比如30像素和較長的生命周期視覺密度完全夠。煙霧顏色漸變用這樣一個回調(diào)function smokeUpdateCallback(particle) { const age particle.normalizedAge; particle.color.red 0.2 age * 0.2; particle.color.green 0.2 age * 0.2; particle.color.blue 0.2 age * 0.2; particle.color.alpha 0.7 * (1 - age); particle.velocity.x (Math.random() - 0.5) * 0.06; particle.velocity.y (Math.random() - 0.5) * 0.06; particle.velocity.z 0.15; }這里alpha從0.7降到0并不是線性衰減會讓煙霧尾部干凈不拖影。我之前試過alpha不衰減或者衰減太慢結(jié)果煙霧會堆積成一大團(tuán)濃黑的云把整個建筑都遮住了推演視角看起來非常假。煙霧上升到一定高度后要讓它停止繼續(xù)膨脹否則會飄得沒邊。我處理的辦法是在updateCallback里判斷如果粒子高度超過起火點以上25米就大幅減小速度向量讓它幾乎靜止在那里。疊加多個煙霧粒子系統(tǒng)后就能形成一片懸浮的煙層。3.3 水柱與噴射模擬罐車或高壓水炮滅火水柱特效這part比較有意思很多人做滅火推演時水柱做成了“一條藍(lán)線”完全沒有粒子打在火點上的感覺。真正的高壓水炮噴出來是一個帶錐形散開的高速粒子流碰到建筑表面還要有飛濺感。核心思想是用ConeEmitter并讓它朝向目標(biāo)方向。這里最大的坑是Cesium的發(fā)射器方向其實是根據(jù)emitterModelMatrix的旋轉(zhuǎn)來決定的而很多默認(rèn)的寫法只是把發(fā)射器放在某個位置沒有旋轉(zhuǎn)結(jié)果粒子永遠(yuǎn)是向上噴。我的做法是建立一個從水炮到起火點的方向向量然后計算旋轉(zhuǎn)矩陣function getWaterEmitterMatrix(source, target) { const direction Cesium.Cartesian3.subtract(target, source, new Cesium.Cartesian3()); Cesium.Cartesian3.normalize(direction, direction); // Z軸向上是默認(rèn)發(fā)射軸線旋轉(zhuǎn)到目標(biāo)方向 const rotation getRotationMatrixFromZAxis(direction); const translation Cesium.Matrix4.fromTranslation(Cesium.Cartesian3.ZERO); return Cesium.Matrix4.multiply(translation, rotation, new Cesium.Matrix4()); }getRotationMatrixFromZAxis本質(zhì)上就是算一個從當(dāng)前Z軸單位向量到目標(biāo)方向向量的旋轉(zhuǎn)四元數(shù)再用Cesium.Quaternion.toMatrix4轉(zhuǎn)成矩陣。這一步建議先在調(diào)試面板里打印方向向量確認(rèn)水柱確實是朝目標(biāo)點去的再接粒子系統(tǒng)不然就是噴反方向。水柱粒子的參數(shù)也和火焰煙霧不同。粒子初速度大概在每秒30到50米發(fā)射速率80到120每秒粒子生命周期很短0.5到0.8秒因為水柱速度快生命周期太長會導(dǎo)致粒子拖著尾巴飛出去很遠(yuǎn)看起來像流星。水柱碰到建筑表面會有飛濺效果這個我沒有用粒子碰撞檢測去精確模擬那樣性能消耗太大。更取巧的辦法是在建筑外墻上起火點附近額外放置兩個小的“水霧粒子系統(tǒng)”用SphereEmitter小半徑粒子速度低顏色半透明藍(lán)白配合水柱同時啟動視覺上就有水打在墻面上濺開的感覺。這一招在做推演時特別實用不用寫任何物理碰撞邏輯只在恰當(dāng)位置放粒子即可。3.4 滅火狀態(tài)切換火焰漸弱、煙霧變色、水花落地推演系統(tǒng)里面滅火不是一鍵把所有粒子系統(tǒng)銷毀就完事。真實感受上火災(zāi)被撲滅是一個漸進(jìn)的、有層次的過程。我設(shè)計了一個FireStateManager負(fù)責(zé)管理每個起火點的狀態(tài)。狀態(tài)有BURNING、WEAKENING、EXTINGUISHED。當(dāng)水炮激活且水量覆蓋到起火點時點火源進(jìn)入WEAKENING狀態(tài)火焰發(fā)射器發(fā)射率從每秒80降到每秒20粒子顏色從亮黃變成偏紅暗色煙霧顏色從深灰變成灰白煙霧發(fā)射率整體降低。等水炮持續(xù)覆蓋若干秒后狀態(tài)變?yōu)镋XTINGUISHED粒子系統(tǒng)不再發(fā)射新粒子但已有的粒子會自然飄散完營造出“剛剛滅完火還有余煙”的氛圍。這個漸弱過程的代碼核心是不要直接改ParticleSystem的引用而是給每個狀態(tài)設(shè)置目標(biāo)參數(shù)然后每幀做線性插值function updateState(deltaTime) { if (state.current FireState.WEAKENING) { state.emissionRate - deltaTime * 10; state.color.green - deltaTime * 0.05; } if (state.emissionRate 1) { state.current FireState.EXTINGUISHED; } }我在寫狀態(tài)切換時還加了一個“余煙階段”。即使火焰已經(jīng)完全熄滅煙霧系統(tǒng)仍然以每秒5個粒子的低速率繼續(xù)工作20到30秒顏色由灰轉(zhuǎn)白再慢慢變成幾乎看不見的透明粒子這個細(xì)節(jié)讓整個滅火推演的真實感提升了不少。4. 推演流程控制與交互設(shè)計讓整個火災(zāi)場景跟著時間軸走單純做出一團(tuán)火焰在Cesium里點開一看“哇還挺像”但推演系統(tǒng)是要給觀眾從頭看到尾的視角怎么走、事件怎么觸發(fā)都需要一套流程控制器。4.1 火災(zāi)發(fā)展時間軸狀態(tài)機(jī)設(shè)計我先定義一段完整的推演流程大概12秒左右分這么幾個階段預(yù)熱準(zhǔn)備相機(jī)從遠(yuǎn)處飛到建筑附近、起火一樓窗口出現(xiàn)火焰、火災(zāi)發(fā)展火焰增強(qiáng)、煙霧擴(kuò)大、二樓點開始起火、消防車到達(dá)水炮粒子出現(xiàn)、壓制火勢火焰火焰變小、煙霧變白、撲滅余火煙霧擴(kuò)散但火焰粒子停止。每個階段對應(yīng)一個時間區(qū)間我在代碼里用這樣一個時間軸管理const timeline [ { time: 0, event: camera_approach }, { time: 2, event: fire_start }, { time: 4, event: fire_spread }, { time: 6, event: water_start }, { time: 8, event: fire_weaken }, { time: 10, event: fire_out }, { time: 12, event: smoke_clear }, ];每幀遍歷這個時間軸時間到達(dá)某個點就觸發(fā)對應(yīng)事件。我用一個簡單的currentIndex指針避免每幀重復(fù)匹配性能更好邏輯也清晰。推演中每個事件其實都是一個函數(shù)數(shù)組可以注冊多個監(jiān)聽器。比如fire_spread事件我同時觸發(fā)了“二樓起火點粒子系統(tǒng)啟動”和“視角切換到側(cè)面”以及“屏幕上彈出文字標(biāo)注‘火勢蔓延’”。這樣的解耦設(shè)計讓我后面加需求時輕松很多甲方說“再加一個無人機(jī)視角”時我只需要往事件數(shù)組里塞一個相機(jī)飛行函數(shù)。4.2 相機(jī)飛行與多視角自動導(dǎo)播推演效果好不好相機(jī)運(yùn)動占了六成。粒子做得再真實相機(jī)懟在模型里面或者在很遠(yuǎn)的地方看不清都是白搭。我做了三段導(dǎo)播視角。第一段是遠(yuǎn)景繞建筑半圈用viewer.camera.flyTo設(shè)置目標(biāo)點讓觀眾看清建筑全貌和起火位置。第二段是近景低角度仰視火焰模擬身處火災(zāi)現(xiàn)場的視角這時候火焰粒子密度要大一點粒子尺寸要相對大。第三段是消防車視角從消防車位置看向起火點配合水柱粒子的彈道方向讓觀眾看到水柱從發(fā)射到命中的全過程。一個使用Cesium的小技巧flyTo之后的相機(jī)控制要設(shè)置complete回調(diào)在回調(diào)里再觸發(fā)下一個粒子事件或者下一段導(dǎo)播這樣時間軸不會亂。不要試圖在flyTo飛行途中就啟動粒子因為粒子的modelMatrix在相機(jī)快速運(yùn)動時容易受浮點精度影響出現(xiàn)抖動。我踩過這個大坑。4.3 交互控制播放、暫停、重置、進(jìn)度拖動推演系統(tǒng)不是播放器不能只按一下“播放”就完事。很多時候匯報演示的人員需要暫停解釋、拖動進(jìn)度條回放某一段。我用viewer.clock做了核心時鐘因為Cesium的Clock本身就支持shouldAnimate、currentTime這些屬性天然適配播放控制。viewer.clock.shouldAnimate false; // 暫停 viewer.clock.currentTime Cesium.JulianDate.addSeconds( sceneStartTime, currentProgress, new Cesium.JulianDate() ); // 回到某個時刻粒子系統(tǒng)的時間驅(qū)動我用的是clock.onTick事件去驅(qū)動狀態(tài)機(jī)更新而不是用requestAnimationFrame這樣拖進(jìn)度條時所有粒子狀態(tài)能同步跳到對應(yīng)時間點不會出現(xiàn)畫面和進(jìn)度條錯位。這里有個坑粒子的lifeTime如果設(shè)置為Number.POSITIVE_INFINITY在暫停狀態(tài)下其實還是會繼續(xù)渲染已發(fā)射的粒子不會自動消失。所以暫停時要做額外處理比如把每個粒子系統(tǒng)的emissionRate臨時設(shè)為0恢復(fù)播放再設(shè)回來。我用一個setPaused方法統(tǒng)一管理所有粒子系統(tǒng)的發(fā)射速率。另外Cesium的Clock有個multiplier屬性可以控制時間流速。我把它暴露給面板提供0.5倍、1倍、2倍、4倍幾個檔位方便快速跳過火災(zāi)前期慢悠悠的發(fā)展過程。5. 性能優(yōu)化與常見問題排查實錄粒子特效做出來之后接下來就是性能問題和各種渲染異常。這個項目我前后調(diào)了兩周一半時間都花在排查下面這些坑上。5.1 粒子數(shù)量與幀率的平衡Cesium的粒子系統(tǒng)對數(shù)量是非常敏感的。我在調(diào)試時發(fā)現(xiàn)當(dāng)粒子數(shù)量超過6000幀時普通辦公電腦幀率會掉到30以下畫面上明顯開始卡頓。推演系統(tǒng)又不能在演示時卡頓所以我做了幾個層面的優(yōu)化。第一是分層LOD相機(jī)距離起火點10米以內(nèi)時火焰發(fā)射率是100距離30米以上發(fā)射率降到40。這個距離判斷每秒鐘更新一次即可不用每幀判斷。第二是嚴(yán)格控制粒子生命周期火焰粒子超過1.8秒必然消亡煙霧粒子超過4秒后通過透明度和尺寸衰減隱形但不直接銷毀而是等待Cesium自動回收減少性能峰值。第三是多個火焰粒子系統(tǒng)共用同一個紋理不要每個系統(tǒng)單獨加載一張圖片瀏覽器GPU顯存有限紋理數(shù)量一多就會出問題。還有一個小技巧Cesium的ParticleSystem有一個sizeInMeters屬性默認(rèn)情況下粒子的尺寸是按屏幕像素算的。如果建筑很高、相機(jī)拉遠(yuǎn)時粒子會變得很小幾乎看不見。把它改成sizeInMeters: true后粒子會按照真實尺寸縮放視覺上更符合三維場景的尺度感但要注意開啟后粒子尺寸會隨著相機(jī)距離變化某些場景下反而顯得太密需要調(diào)小imageSize數(shù)值。5.2 粒子排序問題半透明渲染和深度測試的坑這個問題特別隱蔽而且Cesium官方文檔里沒有直接把答案甩給你。半透明的粒子渲染時和建筑模型之間經(jīng)常出現(xiàn)穿插錯亂有時候火焰明明在建筑前面卻會被建筑墻體擋住一半有時候煙霧飄到建筑后面卻能透過墻體看到一團(tuán)半透明的黑影。這本質(zhì)上是深度緩沖區(qū)和半透明物體的排序問題。Cesium對Primitive類型的粒子系統(tǒng)默認(rèn)的半透明排序不一定符合你的視覺預(yù)期。我的解決辦法有三個。第一在創(chuàng)建粒子系統(tǒng)時把ParticleSystem的depthTestAgainstTerrain屬性設(shè)為false這個屬性主要影響地形對模型也有影響避免粒子被地形深度遮擋。第二如果是墻體遮擋導(dǎo)致的問題需要把建筑模型的材質(zhì)調(diào)整成透明對象排序模式或者干脆讓粒子系統(tǒng)的渲染順序靠后可以設(shè)置一下partition類型但這個不高頻多數(shù)情況是粒子紋理的透明通道沒處理好導(dǎo)致的假穿插。第三避免在畫面里同時出現(xiàn)兩個大面積的半透明粒子系統(tǒng)交叉比如火焰和煙霧重疊區(qū)域太大時它們之間會互相覆蓋顏色發(fā)灰。把火焰粒子系統(tǒng)和煙霧粒子系統(tǒng)的發(fā)射位置在Z軸上錯開半米到一米就能緩解這個問題。5.3 粒子紋理與Canvas生成技術(shù)節(jié)省美術(shù)資源前面提到我用Canvas動態(tài)生成粒子紋理這項技術(shù)還能擴(kuò)展到水珠、火星、火花等不同特效。核心思路就是畫一張圓形漸變圖再在中心加一點高光。function generateWaterDropletTexture() { const canvas document.createElement(canvas); canvas.width 32; canvas.height 32; const ctx canvas.getContext(2d); const gradient ctx.createRadialGradient(16, 16, 0, 16, 16, 16); gradient.addColorStop(0, rgba(255,255,255,1)); gradient.addColorStop(0.5, rgba(140,200,255,0.9)); gradient.addColorStop(1, rgba(0,100,255,0)); ctx.fillStyle gradient; ctx.fillRect(0, 0, 32, 32); return canvas.toDataURL(); }這樣做的好處是不依賴美術(shù)出圖而且紋理天然是RGBA格式不需要額外處理透明通道。生成的DataURL可以直接傳給image參數(shù)。要注意的是紋理尺寸不要用太大的64x64已經(jīng)很奢侈了32x32就夠用。粒子本身在屏幕上的尺寸很小高分辨率紋理并不會帶來明顯畫質(zhì)提升反而會拖慢渲染速度。5.4 其他高頻坑坐標(biāo)、模型、推演失控再列幾個實戰(zhàn)中踩過的高頻問題都是會直接導(dǎo)致功能無法按預(yù)期交付的。第一個是模型坐標(biāo)偏移。如果你的建筑模型是從BIM軟件導(dǎo)出的坐標(biāo)原點很可能不在模型底部中心而是在某個角落或者幾千米外的世界坐標(biāo)原點。這樣把粒子放在position經(jīng)緯度上就會看到火焰懸在建筑旁邊而不是從窗戶里往外冒。解決辦法是先在Cesium里加載模型用viewer.scene.pickPosition或者模型的包圍盒計算真實的著火點坐標(biāo)再把這個坐標(biāo)喂給粒子系統(tǒng)。我在項目里是直接讀取3D Tiles的包圍球信息計算墻面的某一層位置作為起火點。第二個是推演時間軸失控。用Clock做時間軸時如果當(dāng)前場景里還掛了其他動態(tài)數(shù)據(jù)源比如天氣模塊、車輛移動模塊它們的動畫也會被Clock影響導(dǎo)致推演卡片上的數(shù)據(jù)對不上。解決方式是推演期間把無關(guān)的數(shù)據(jù)源show設(shè)為 false或者用一個獨立的Clock實例單獨驅(qū)動推演模塊。第三個是水柱位置不同步。水炮一般是一個獨立的Entity模型它自身有位置和朝向如果你手動把水柱粒子放到水炮口就要在每幀里根據(jù)水炮的最新朝向動態(tài)更新emitterModelMatrix否則水炮在推演中轉(zhuǎn)了個方向水柱還在原來方向噴。我在實際項目里是把水炮模型掛在一個Cesium.CustomDataSource下然后每幀讀取它的orientation屬性用Matrix4.fromRotationTranslation更新粒子系統(tǒng)的矩陣。第四個是Firefox瀏覽器的兼容問題。某些Cesium版本在Firefox下Canvas生成紋理會有緩存的怪異問題表現(xiàn)為粒子貼圖偶爾變成全黑或全白方塊。我的處理方案是在生成紋理后把DataURL加一個時間戳參數(shù)比如?t加個隨機(jī)數(shù)強(qiáng)制瀏覽器重新解碼這個雖然不優(yōu)雅但確實有效。6. 最終效果與個人經(jīng)驗補(bǔ)充整個項目從接到需求到能順暢演示前后用了大概兩周。第一周把地基打好加載建筑、粒子系統(tǒng)基礎(chǔ)效果、時間軸狀態(tài)機(jī)第二周基本都在調(diào)細(xì)節(jié)相機(jī)飛行路徑平滑度、粒子的顏色飽和度、水柱打在墻上的飛濺效果以及推演過程中火焰和煙霧比例的動態(tài)平衡。我個人最大的體會是三維模擬類項目一定要把“視覺呈現(xiàn)”和“業(yè)務(wù)邏輯”分離開來。粒子系統(tǒng)只管好看狀態(tài)機(jī)只管流程兩者的通信通過一個統(tǒng)一的事件總線完成。千萬不要在粒子系統(tǒng)的更新回調(diào)里寫業(yè)務(wù)判斷比如判斷消防車是否到場那樣會讓代碼糾纏不清調(diào)試一次能讓你懷疑人生。后來有一次甲方來驗收推演播放到“消防車到達(dá)水柱開始壓制火勢”這一段時現(xiàn)場所有人都安靜下來看屏幕水柱打在火焰根部火焰顏色由黃變紅又漸漸縮小煙霧從濃黑變成灰白最后只剩幾縷白煙在建筑周圍緩緩飄散。那一刻我就知道這個項目的核心邏輯和視覺節(jié)奏算是做對了。如果有朋友想在這個基礎(chǔ)上繼續(xù)擴(kuò)展我建議往這幾個方向走一是接入真實消防設(shè)施數(shù)據(jù)把消防栓、滅火器、噴淋系統(tǒng)的位置和狀態(tài)在推演中聯(lián)動顯示二是加入多人協(xié)作讓不同角色在Web端分別控制消防車、水炮和視角形成協(xié)同推演三是把粒子系統(tǒng)的參數(shù)完全數(shù)據(jù)化做成可以配置的“特效模板”這樣不同建筑、不同火災(zāi)等級的推演都能通過配置而不是改代碼來完成。這些方向做好了整個項目的實用價值還能再上一個臺階。