当前位置：首页 > article >正文

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

article 2025/1/4 6:46:50

作者：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));
    }