Supermap iClient Webgl 粒子特效案例-消防场景

作者：Lzzzz

前言

WebGL 粒子特效的应用场景非常广泛，几乎可以在任何需要丰富视觉效果或动态表现的地方看到其身影。通过灵活运用颗粒系统，开发者可以创造出引人入胜的用户体验和视觉表现。

一、效果展示

二、实现步骤

1，构建粒子参数json，可以直接复制使用；

{"name": "smokeDense","id": "smokeDense","capacity": 3000,"disposeOnStop": false,"manualEmitCount": -1,"emitter": [0,20,0],"particleEmitterType": {"type": "ConeParticleEmitter","radius": 1.0,"angle": 1.05,"directionRandomizer": 0,"radiusRange": 0,"heightRange": 0,"emitFromSpawnPointOnly": true},"texture": {"tags": null,"url": "./data/particle/texture/smoke2.png","uOffset": 0,"vOffset": 0,"uScale": 1,"vScale": 1,"uAng": 0,"vAng": 0,"wAng": 0,"uRotationCenter": 0,"vRotationCenter": 0,"wRotationCenter": 0,"homogeneousRotationInUVTransform": false,"isBlocking": true,"name": "rain/smoke.png","hasAlpha": false,"getAlphaFromRGB": false,"level": 1,"coordinatesIndex": 0,"coordinatesMode": 0,"wrapU": 1,"wrapV": 1,"wrapR": 1,"anisotropicFilteringLevel": 4,"isCube": false,"is3D": false,"is2DArray": false,"gammaSpace": true,"invertZ": false,"lodLevelInAlpha": false,"lodGenerationOffset": 0,"lodGenerationScale": 0,"linearSpecularLOD": false,"isRenderTarget": false,"animations": [],"invertY": true,"samplingMode": 3,"_useSRGBBuffer": false},"isLocal": false,"animations": [],"startDelay": 0,"renderingGroupId": 0,"isBillboardBased": true,"billboardMode": 2,"minAngularSpeed": 0,"maxAngularSpeed": 0,"minSize": 0.8,"maxSize": 1,"minScaleX": 1,"maxScaleX": 1,"minScaleY": 1,"maxScaleY": 1,"minEmitPower": 0.2,"maxEmitPower": 0.4,"minLifeTime": 6,"maxLifeTime": 8,"emitRate": 500,"gravity": [0,0.3,0],"noiseStrength": [10,10,10],"color1": [1,1,1,1],"color2": [1,1,1,1],"colorDead": [1,1,1,0],"updateSpeed": 0.034,"targetStopDuration": 0,"blendMode": 1,"preWarmCycles": 50,"preWarmStepOffset": 1,"minInitialRotation": 0,"maxInitialRotation": 0,"startSpriteCellID": 0,"spriteCellLoop": true,"endSpriteCellID": 3,"spriteCellChangeSpeed": 0,"spriteCellWidth": 128,"spriteCellHeight": 512,"spriteRandomStartCell": true,"isAnimationSheetEnabled": true,"colorGradients": [{"gradient": 0,"color1": [1,1,1,0.3],"color2": [1,1,1,0.3]},{"gradient": 1,"color1": [1,1,1,0.3],"color2": [1,1,1,0.3]}],"textureMask": [1,1,1,1],"customShader": null,"preventAutoStart": true
}

2，动态修改粒子对象，这里以火焰粒子为例

    function initFire(SuperMap3D, scene) {var multiFireUrl = './data/particle/Fire.json';let modelMatrix = new SuperMap3D.Matrix4();let posFire = SuperMap3D.Cartesian3.fromDegrees(116.458832, 39.907549, 8);SuperMap3D.Transforms.eastNorthUpToFixedFrame(posFire, undefined, modelMatrix);loadParticleFile(multiFireUrl);// 加载粒子文件function loadParticleFile(url) {SuperMap3D.ParticleHelper.fromJsonUrl(url, scene).then(function(particleSystem){fireParticleSystem = particleSystem;//发射速度（每帧发射的粒子数）particleSystem.emitRate=5;//最小发射速度particleSystem.minEmitPower=2;//最大发射速度particleSystem.maxEmitPower=3;//最小生命周期particleSystem.minLifeTime=3;//最大生命周期particleSystem.maxLifeTime=4;//最小粒子大小particleSystem.minSize=2;//最大粒子大小particleSystem.maxSize=4;particleSystem.updateSpeed=0.01;particleSystem.modelMatrix = modelMatrix;particleSystem.start();});}}

同时，也可以动态修改粒子发射器

//修改粒子发射器为点发射器
var direction1 = new SuperMap3D.Cartesian3(0, 1, 1);
var direction2 = new SuperMap3D.Cartesian3(0, 1, 1);
waterParticleSystem.createPointEmitter(direction1, direction2);

3，水粒子特效加载完成后，逐渐减弱火粒子和烟粒子数量和发射速度，直至关闭

    async function extinguish() {while(smokeParticleSystem.emitRate >0){smokeParticleSystem.emitRate -= 1;fireParticleSystem.emitRate = smokeParticleSystem.emitRate/100;fireParticleSystem.minEmitPower=smokeParticleSystem.emitRate/250;fireParticleSystem.maxEmitPower=smokeParticleSystem.emitRate/200;await sleep(20);if(smokeParticleSystem.emitRate < 200 && fireParticleSystem.isAlive()){fireParticleSystem.stop(true);}}smokeParticleSystem.stop();fireParticleSystem.stop();await sleep(3000);waterParticleSystem.stop();}function sleep(ms) {return new Promise(resolve => setTimeout(resolve, ms));}