cesium 天气系统

对于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() {
posted @ 2022-01-20 17:17  haibalai  阅读(487)  评论(0编辑  收藏  举报