对于cesium 是可以模拟 天气系统
我们来用typescript 构建一个天气工具类
首先我们先定义参数
export interface PWeather {
type:EWeather,
option?:any
}
export enum EWeather {
no=0,//雨
snow=1,//雨
rain=2,//雨
cloudy=3,//阴天
fog=4,//雾天
daytime=5,//白天（加亮）
}
天气系统Weather 类
```javascript
import {EWeather, PWeather} from "./PWeather";
export class Weather{
private viewer:any;
private postProcessStage:any;
constructor(viewer:any,option?:PWeather){
super();
this.viewer = viewer;
if(!option){
return;
}
this.switchWeather(option);
}
//切换场景
switchWeather(option:PWeather){
if(this.postProcessStage){
this.viewer.scene.postProcessStages.remove(this.postProcessStage);
this.no();
this.postProcessStage = null;
}
if(!option.type){
return this;
}
//切换场景
if(option.type === EWeather.snow){
this.snow();
}else if(option.type === EWeather.rain){
this.rain();
}else if(option.type === EWeather.cloudy){
this.cloudy();
}else if(option.type === EWeather.fog){
this.fog();
}else if(option.type === EWeather.daytime){
this.daytime();
}
if(this.postProcessStage){
this.viewer.scene.postProcessStages.add(this.postProcessStage);
}
return this;
}
//雪
private snow() {
const fragmentShader = `uniform sampler2D colorTexture;
varying vec2 v_textureCoordinates;
float snow(vec2 uv,float scale)
{
float time = czm_frameNumber / 160.0;
float w=smoothstep(1.,0.,-uv.y(scale/10.));if(w<.1)return 0.; uv+=time/scale;uv.y+=time2./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+.35sin(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)0.01); return kw;
}
void main(void){
vec2 resolution = czm_viewport.zw;
vec2 uv=(gl_FragCoord.xy2.-resolution.xy)/min(resolution.x,resolution.y); vec3 finalColor=vec3(0); float c = 0.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), 0.3);
}
`;
this.postProcessStage = new Cesium.PostProcessStage({fragmentShader});
// this.viewer.scene.skyAtmosphere.hueShift = -0.8;//色调变化适用于大气。默认为0.0（无移位）。色相偏移1.0表示可用色相完全旋转。
// this.viewer.scene.skyAtmosphere.saturationShift = -0.7;//饱和度偏移将应用于大气。默认为0.0（无移位）。-1.0的饱和度偏移是单色的。
this.viewer.scene.skyAtmosphere.brightnessShift = -0.33;//亮度变化适用于大气。默认为0.0（无移位）。-1.0的亮度偏移是完全黑暗，这将使空间显示出来。
this.viewer.scene.fog.enabled = true;//如果启用雾，则为 true ，否则为 false 。
// this.viewer.scene.fog.density = 0.001;//确定雾的密度的标量
this.viewer.scene.fog.minimumBrightness = 0.8;//照明产生的雾色的最小亮度。值为0.0可能会使雾完全变成黑色。值1.0不会影响完全没有亮度。
}
//定义下雨场景 着色器\\return fract(sin(x*133.3)*13.13);
private rain() {
更多参考 https://xiaozhuanlan.com/topic/2369180754
网友评论