Cesium 场景设置~黑白、夜视和描边

效果图

功能说明

场景设置主要基于PostProcessStage方法进行设置，在Cesium中创建一个蒙版式的后期处理，
主要处理是根据Shader进行渲染，有点类似于Canvas的滤镜效果一般，对全屏进行处理。
所以场景设置实际为后期处理，全球雨雪雾天气，PostProcessStage方法无法做到局部。

需要局部下雨下雪可以参照官网的示例

核心代码

以下的代码，首先创建PostProcessStage对象。通过在PostProcessStage类中uniforms属性修改雨的倾斜度、大小和速度，就可以创建出所需要的PostProcessStage对象~雨天气
雨天气的场景设置

var tiltAngle = Cesium.defaultValue(options.tiltAngle, -0.6);
var rainSize = Cesium.defaultValue(options.rainSize, 0.3);
var rainSpeed = Cesium.defaultValue(options.rainSpeed, 60.0);
var rainStage = new Cesium.PostProcessStage({
     name: 'czm_rain',
     fragmentShader: "uniform sampler2D colorTexture;\n\
                varying vec2 v_textureCoordinates;\n\
                uniform float tiltAngle;\n\
                uniform float rainSize;\n\
                uniform float rainSpeed;\n\
                float hash(float x) {\n\
                    return fract(sin(x * 133.3) * 13.13);\n\
                }\n\
                void main(void) {\n\
                    float time = czm_frameNumber / rainSpeed;\n\
                    vec2 resolution = czm_viewport.zw;\n\
                    vec2 uv = (gl_FragCoord.xy * 2. - resolution.xy) / min(resolution.x, resolution.y);\n\
                    vec3 c = vec3(.6, .7, .8);\n\
                    float a = tiltAngle;\n\
                    float si = sin(a), co = cos(a);\n\
                    uv *= mat2(co, -si, si, co);\n\
                    uv *= length(uv + vec2(0, 4.9)) * rainSize + 1.;\n\
                    float v = 1. - sin(hash(floor(uv.x * 100.)) * 2.);\n\
                    float b = clamp(abs(sin(20. * time * v + uv.y * (5. / (2. + v)))) - .95, 0., 1.) * 20.;\n\
                    c *= v * b;\n\
                    gl_FragColor = mix(texture2D(colorTexture, v_textureCoordinates), vec4(c, 1), .5);\n\
                }\n\
                ";,
     uniforms: {
         tiltAngle: () => {
             return tiltAngle;
         },
         rainSize: () => {
             return rainSize;
         },
         rainSpeed: () => {
             return rainSpeed;
         }
     }
 });
viewer.scene.postProcessStages.add(rainStage);

雾天气的场景设置

var fogthicknessnum = 1.0;//可见度
var nowfragmentShader =`uniform sampler2D colorTexture;uniform sampler2D depthTexture;varying vec2 v_textureCoordinates;uniform float fognum;void main(void){vec4 origcolor=texture2D(colorTexture, v_textureCoordinates);vec4 fogcolor=vec4(0.8,0.8,0.8,0.5);float depth = czm_readDepth(depthTexture, v_textureCoordinates);vec4 depthcolor=texture2D(depthTexture, v_textureCoordinates);float f=(depthcolor.r-0.22)/fognum;if(f<0.0) f=0.0;else if(f>1.0) f=1.0;gl_FragColor = mix(origcolor,fogcolor,f);}`;
var ProcessScenes = new Cesium.PostProcessStage({
	fragmentShader: nowfragmentShader,
	uniforms: {
		scale: 1.1,
		offset: function() {
			return new Cesium.Cartesian3(0.1, 0.2, 0.3);
		},
		fognum: () => {
			return fogthicknessnum;
		},
	},
})
viewer.scene.postProcessStages.add(ProcessScenes);

雪天气的场景设置

var snowSize = Cesium.defaultValue(snowopt.size, 0.02);
var snowSpeed = Cesium.defaultValue(snowopt.speed, 60.0);
var fragmentShader =`uniform sampler2D colorTexture;varying vec2 v_textureCoordinates;uniform float snowSpeed;uniform float snowSize;float snow(vec2 uv,float scale){float time=czm_frameNumber/snowSpeed;float w=smoothstep(1.,0.,-uv.y*(scale/10.));if(w<.1)return 0.;uv+=time/scale;uv.y+=time*2./scale;uv.x+=sin(uv.y+time*.5)/scale;uv*=scale;vec2 s=floor(uv),f=fract(uv),p;float k=3.,d;p=.5+.35*sin(11.*fract(sin((s+p+scale)*mat2(7,3,6,5))*5.))-f;d=length(p);k=min(d,k);k=smoothstep(0.,k,sin(f.x+f.y)*snowSize);return k*w;}void main(void){vec2 resolution=czm_viewport.zw;vec2 uv=(gl_FragCoord.xy*2.-resolution.xy)/min(resolution.x,resolution.y);vec3 finalColor=vec3(0);float c=0.;c+=snow(uv,30.)*.0;c+=snow(uv,20.)*.0;c+=snow(uv,15.)*.0;c+=snow(uv,10.);c+=snow(uv,8.);c+=snow(uv,6.);c+=snow(uv,5.);finalColor=(vec3(c));gl_FragColor=mix(texture2D(colorTexture,v_textureCoordinates),vec4(finalColor,1),.5);}`;
var ProcessScenes = new Cesium.PostProcessStage({
	fragmentShader: fragmentShader,
	uniforms: {
		snowSize: () => {
			return snowSize;
		},
		snowSpeed: () => {
			return snowSpeed;
		},
	},
})
viewer.scene.postProcessStages.add(ProcessScenes);							
						

不足之处

该场景设置只能运用到全球，不能实现局部下雨

脚本下载

没有压缩，可以HTML文件，里面有黑白场景、夜视场景和描边场景。
https://download.csdn.net/download/qq_35984445/86031544
包含有添加天际线场景设置脚本
https://download.csdn.net/download/qq_35984445/86744804