cesium 泛光 bloom效果

实际上核心就是获取bloom对几个属性值进行设置

        let viewer = new Cesium.Viewer('cesiumContainer', {
            imageryProvider: mapbox,
            contextOptions: {
                webgl: {
                    alpha: true
                }
            },
            selectionIndicator: false,
            animation: false, //是否显示动画控件
            baseLayerPicker: false, //是否显示图层选择控件
            geocoder: false, //是否显示地名查找控件
            timeline: false, //是否显示时间线控件
            sceneModePicker: false, //是否显示投影方式控件
            navigationHelpButton: false, //是否显示帮助信息控件
            infoBox: false, //是否显示点击要素之后显示的信息
            fullscreenButton: false,
            shouldAnimate: true //动画播放
        });

        //取消双击事件
        viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
        //设置homebutton的位置
        Cesium.Camera.DEFAULT_VIEW_RECTANGLE =
            Cesium.Rectangle.fromDegrees(110.15, 34.54, 110.25, 34.56);//Rectangle(west, south, east, north)
        //设置初始位置
        viewer.camera.setView({
            destination: Cesium.Cartesian3.fromDegrees(110.20, 34.55, 3000000)
        });

        //开启深度检测



        for (let i = 0; i < 10; i++) {//buildingGeojson.features.length
            let height = buildingGeojson.features[i].properties.floor * 3;

            let geotype = buildingGeojson.features[i].geometry.type.toUpperCase();

            let coordinates = buildingGeojson.features[i].geometry.coordinates;

            if (geotype == 'POLYGON') {
                //console.log(coordinates);
            } else if (geotype == 'MULTIPOLYGON') {
                for (let j = 0; j < coordinates.length; j++) {
                    for (let k = 0; k < coordinates[j].length; k++) {
                        let positions = [];
                        let positionWithoutH=[]
                        let positionSHU=[]

                        for (let l = 0; l < coordinates[j][k].length; l++) {
                            positions.push(coordinates[j][k][l][0]);
                            positions.push(coordinates[j][k][l][1]);
                            positions.push(height);
                        }
                       // positions.length=positions.length-3
                        viewer.entities.add({
                            name: 'Red wall at height',
                            wall: {
                                positions: Cesium.Cartesian3.fromDegreesArrayHeights(positions),
                                material: new Cesium.ImageMaterialProperty({
                                    image: getColorRamp([0.0, 1.0], true),
                                    color: Cesium.Color.BLUE.withAlpha(0.99)
                                }),
                                outline: true,
                                outlineColor: Cesium.Color.WHITE,
                                outlineWidth: 3,

                            }
                        });



                        //positions.length=positions.length-3
                        for(let i=0;i<positions.length;i=i+3){
                            positionWithoutH.push(positions[i])
                            positionWithoutH.push(positions[i+1])
                            positionWithoutH.push(0)
                            positionSHU.push(positions[i])
                            positionSHU.push(positions[i+1])
                            positionSHU.push(0)
                            positionSHU.push(positions[i])
                            positionSHU.push(positions[i+1])
                            positionSHU.push(positions[i+2])
                        }
                        viewer.entities.add({
                            name: '橙色多边形',
                            polyline : {
                                positions : Cesium.Cartesian3.fromDegreesArrayHeights(positions),
                                width : 5,
                                material : new Cesium.PolylineGlowMaterialProperty({
                                    glowPower : 0.3,
                                    color : Cesium.Color.BLUE.withAlpha(0.7),
                                })
                            }
                        });
                        //console.log(positionSHU)
                        positionSHU.length=positionSHU.length-6
                        // positions.map((v,index)=> {
                        //     if((index+1)%3==0){
                        //         v=0
                        //     }
                        //     positionWithoutH.push(v)
                        // })

                        viewer.entities.add({
                            name: '橙色多边形',
                            polyline : {
                                positions : Cesium.Cartesian3.fromDegreesArrayHeights(positionWithoutH),
                                width : 5,
                                material : new Cesium.PolylineGlowMaterialProperty({
                                    glowPower : 0.9,
                                    color : Cesium.Color.BLUE.withAlpha(0.7),
                                })
                            }
                        });
                        // viewer.entities.add({
                        //     name: '橙色多边形',
                        //     polyline : {
                        //         positions : Cesium.Cartesian3.fromDegreesArrayHeights(positionSHU),
                        //         width : 5,
                        //         material : new Cesium.PolylineGlowMaterialProperty({
                        //             glowPower : 0.9,
                        //             color : Cesium.Color.BLUE.withAlpha(0.7),
                        //         })
                        //     }
                        // });
                    }
                }
            }
        }

        viewer.zoomTo(viewer.entities);
        // 亮度设置
        var stages = viewer.scene.postProcessStages;
        viewer.scene.brightness =  viewer.scene.brightness || stages.add(Cesium.PostProcessStageLibrary.createBrightnessStage());
        viewer.scene.brightness.enabled = true;
        viewer.scene.brightness.uniforms.brightness = Number(2);
        var scene=viewer.scene

        // var flashlight = new Cesium.DirectionalLight({
        //     direction : scene.camera.directionWC // Updated every frame
        // });
        // scene.light = flashlight;
        // scene.globe.dynamicAtmosphereLighting = false;
        var viewModel = {
            show : true,
            glowOnly : false,
            contrast : 120,
            brightness : -0.3,
            delta : -10.0,
            sigma : 3.78,
            stepSize : 5.0
        };
        function updatePostProcess() {
            var bloom = viewer.scene.postProcessStages.bloom;
            bloom.enabled = true;
            bloom.uniforms.glowOnly = Boolean(viewModel.glowOnly);
            bloom.uniforms.contrast = Number(viewModel.contrast);
            bloom.uniforms.brightness = Number(viewModel.brightness);
            bloom.uniforms.delta = Number(viewModel.delta);
            bloom.uniforms.sigma = Number(viewModel.sigma);
            bloom.uniforms.stepSize = Number(viewModel.stepSize);
        }
        updatePostProcess();
        setInterval(()=>{
            viewModel.delta+=0.5
            updatePostProcess()
            console.log("更改delta值")
        },1000)
        function getColorRamp(elevationRamp, isVertical = true) {
            let ramp = document.createElement('canvas');
            ramp.width = isVertical ? 1 : 100;
            ramp.height = isVertical ? 100 : 1;
            let ctx = ramp.getContext('2d');

            let values = elevationRamp;
            let grd = isVertical ? ctx.createLinearGradient(0, 0, 0, 100) : ctx.createLinearGradient(0, 0, 100, 0);
            let v=0.2
            let varr=0
            for(let i=0;i<20;i++){
                v=v-0.01
                varr=varr+0.025
               // console.log(varr,v)
                grd.addColorStop(varr, 'rgba(137,242,245,'+v+')'); //white
            }

            for(let i=0;i<19;i++){
                v=v+0.01
                varr=varr+0.025
                //console.log(varr,v)

                grd.addColorStop(varr, 'rgba(137,242,245,'+v+')'); //white
            }

            // grd.addColorStop(0, 'rgba(0,0,206,0.3)'); //white
            //
            // grd.addColorStop(1, 'rgba(35,97,250,0.3)'); //white

            ctx.globalAlpha = 0.3;
            ctx.fillStyle = grd;
            if (isVertical)
                ctx.fillRect(0, 0, 1, 100);
            else
                ctx.fillRect(0, 0, 100, 1);

            return ramp;
        }