Cesium实现雨、闪电、雪、雾天气效果

 基于 Cesium 的三维地理信息场景，集成了天气效果后处理、3D 模型加载、水域渲染等功能。以下是详细功能总结：

---

1. 场景初始化与基础配置

• 三维地球初始化
  创建 Cesium Viewer 实例，隐藏默认控件（时间轴、动画控件等），启用抗锯齿（FXAA）。

• 地图服务
  使用腾讯影像服务作为底图，支持 WGS84 坐标系。

• 3D 模型加载
  加载本地 3D Tiles 建筑模型（tileset.json），并在加载完成后自动定位到模型。

---

2. 水域效果

• GeoJSON 数据加载
  从 water.json 加载水域多边形数据，使用 Primitive 和 Material 创建水面。

• 动态水面材质
  应用 Cesium.Material.WaterType 材质，配置波浪参数（频率、振幅、法线贴图），实现动态水面效果。

---

3. 天气后处理特效

通过 PostProcessStage 添加可交互的天气效果，利用 GLSL 着色器实现视觉特效：

🌧️ 降雨效果 (rain.glsl)

• 倾斜雨滴
  通过旋转 UV 坐标模拟雨滴倾斜下落，结合噪声生成随机雨线。

• 闪电模拟
  使用 Perlin 噪声生成闪电路径，计算辉光效果和光照强度。

• 参数控制
  GUI 可调雨速 (rainSpeed)、雨滴大小 (rainSize)，通过混合率控制雨幕透明度。

❄️ 降雪效果 (snow.glsl)

• 多层次雪花
  分层生成不同大小和速度的雪花，利用随机函数和细胞噪声分布雪花位置。

• 飘动效果
  正弦函数模拟雪花飘动轨迹，调整密度和渐变增强层次感。

🌫️ 雾效 (fog.glsl)

• 深度计算
  从深度纹理获取片元到相机的距离，结合近/远平面参数计算雾化因子。

• 颜色混合
  线性插值混合场景颜色与雾颜色，模拟距离渐变的雾效。

• 交互参数
  GUI 可调雾颜色 (fogColor)、近距 (near)、远距 (far)。

---

4. 交互控制

• dat.GUI 面板
  提供可视化控件，动态开关雨、雪、雾效果，调整参数（如雨速、雾范围等）。

• 实时更新
  修改参数时，通过 uniforms 实时更新着色器变量，无需重新加载场景。

---

5. 技术亮点

• 后处理管线
  将天气效果作为后处理阶段叠加到场景，不影响原始渲染流程。

• 着色器优化
  使用噪声函数、深度纹理和几何计算高效模拟自然现象。

• 模块化设计
  各天气效果独立封装，便于扩展和维护。

---

效果展示

• 雨：动态雨幕 + 随机闪电，参数可调雨滴密度和速度。

• 雪：多层次雪花飘落，模拟自然随机分布。

• 雾：基于距离的雾效，增强场景深度感和氛围。

---

应用场景

适用于三维地理可视化、模拟训练、游戏开发等需要动态天气交互的场景，提升环境真实感和用户体验。

 具体实现

src/shader/rain.glsl

// 声明颜色纹理（当前屏幕渲染内容）
uniform sampler2D colorTexture;
// 控制雨速的变量（由外部传入）
uniform float rainSpeed; 
// 控制雨滴大小的变量（由外部传入）
uniform float rainSize;
// 当前像素的纹理坐标（范围0.0~1.0）
varying vec2 v_textureCoordinates;// 生成伪随机数的哈希函数（输入数字返回0~1之间的随机值）
float hash(float x) {return fract(sin(x * 133.3) * 13.13); // 通过正弦函数生成随机数，取小数部分
}// 另一种伪随机数生成方法（不同种子）
float rand(float x) {return fract(sin(x) * 75154.32912); // fract取小数部分保证结果在0~1
}// 三维随机数生成（输入三维坐标返回0~1的随机值）
float rand3d(vec3 x) {return fract(375.10297 * sin(dot(x, vec3(103.0139, 227.0595, 31.05914))));
}// 一维噪声生成（在整数点之间插值）
float noise(float x) {float i = floor(x); // 取整数部分float a = rand(i), b = rand(i + 1.); // 获取相邻整数点的随机值float f = x - i; // 小数部分作为插值系数return mix(a, b, f); // 线性插值得到平滑噪声
}// 一维Perlin噪声（分形噪声叠加）
float perlin(float x) {float r = 0., s = 1., w = 1.;for(int i = 0; i < 6; i++) { // 叠加6层不同频率的噪声s *= 2.0; // 频率倍增（更细的细节）w *= 0.5; // 振幅减半（高层细节影响更小）r += w * noise(s * x); // 累加各层噪声}return r;
}// 三维噪声生成（在3D网格点之间插值）
float noise3d(vec3 x) {vec3 i = floor(x); // 三维网格整数坐标// 获取8个相邻网格点的随机值float i000 = rand3d(i + vec3(0., 0., 0.));float i001 = rand3d(i + vec3(0., 0., 1.));float i010 = rand3d(i + vec3(0., 1., 0.));float i011 = rand3d(i + vec3(0., 1., 1.));float i100 = rand3d(i + vec3(1., 0., 0.));float i101 = rand3d(i + vec3(1., 0., 1.));float i110 = rand3d(i + vec3(1., 1., 0.));float i111 = rand3d(i + vec3(1., 1., 1.));vec3 f = x - i; // 小数部分作为插值系数// 三维线性插值过程return mix(mix(mix(i000, i001, f.z), // Z方向插值mix(i010, i011, f.z),f.y                   // Y方向插值),mix(mix(i100, i101, f.z),mix(i110, i111, f.z),f.y),f.x                       // X方向插值);
}// 三维Perlin噪声（分形叠加）
float perlin3d(vec3 x) {float r = 0.0;float w = 1.0, s = 1.0;for(int i = 0; i < 5; i++) { // 叠加5层噪声w *= 0.5;   // 振幅递减s *= 2.0;   // 频率递增r += w * noise3d(s * x); // 累加各层噪声}return r;
}// 生成闪电路径的形状（基于Perlin噪声）
float f(float y) {float w = 0.4; // 路径基础宽度return w * (perlin(2. * y) - 0.5); // 使用噪声制造路径扭曲
}// 绘制闪电路径的核心函数
float plot(vec2 p, float d, bool thicker) {if(thicker)// 增加路径厚度：计算垂直方向的变化率d += 5. * abs(f(p.y + 0.001) - f(p.y));// 使用smoothstep生成平滑过渡的边缘return smoothstep(d, 0., abs(f(p.y) - p.x));
}// 渲染闪电效果的核心函数
vec3 render(vec2 uv) {// 计算基于帧数的时间（120帧对应1秒）float iTime = czm_frameNumber / 120.;float x = iTime + 0.1; // 时间推进// 闪电参数设置float m = 0.25; // 闪电单次持续时间上限float i = floor(x / m); // 计算当前是第几次闪电float f = x / m - i;    // 当前次闪电的进度（0~1）float k = 0.4;          // 闪电发生频率阈值float n = noise(i);     // 随机决定是否触发闪电float t = ceil(n - k);  // 是否满足触发条件（0或1）float d = max(0., n - k) / (1. - k); // 计算可见持续时间float o = ceil(t - f - (1. - d));    // 判断当前是否在可见时间段// 闪电效果计算float lightning = 0.0;if(o == 1.) { // 如果当前需要显示闪电vec2 uv2 = uv;uv2.y += i * 2.;    // 纵向偏移生成不同形态float p = (noise(i + 10.) - 0.5) * 2.; // 随机横向位置uv2.x -= p;         // 应用横向偏移// 计算三种不同宽度的闪电效果float strike = plot(uv2, 0.01, true);  // 核心闪电float glow = plot(uv2, 0.04, false);   // 内层辉光float glow2 = plot(uv2, 1.5, false);   // 外层辉光// 组合效果lightning = strike * 0.4 + glow * 0.15; lightning += glow2 * 0.3; // 添加外层辉光// 根据高度渐隐float h = noise(i + 5.); // 随机高度参数lightning *= smoothstep(h, h + 0.05, uv.y + perlin(1.2 * uv.x + 4. * h) * 0.03);}return vec3(lightning); // 返回闪电颜色
}void main() {// 计算时间（帧数转秒，并应用雨速系数）float time = (czm_frameNumber / 60.0) * rainSpeed;// 获取屏幕分辨率（czm_viewport.zw存储宽高）vec2 resolution = czm_viewport.zw;// 将像素坐标转换为标准化坐标（-1~1范围）vec2 uv = (gl_FragCoord.xy * 2. - resolution.xy) / min(resolution.x, resolution.y);uv *= rainSize; // 应用雨滴大小参数vec3 c = vec3(.6, .7, .8); // 基础雨滴颜色（青蓝色）// 创建旋转矩阵（使雨滴倾斜）float angle = -0.5; // 倾斜角度float sinA = sin(angle), cosA = cos(angle);uv *= mat2(cosA, -sinA, sinA, cosA); // 应用旋转// 生成雨滴图案float v = 1. - sin(hash(floor(uv.x * 400.)) * 400.); // 纵向条纹float b = clamp(abs(sin(15. * time * v + uv.y * 5.)) - 0.95, 0., 1.) * 4.;c *= v * b; // 组合得到雨滴颜色// 获取原始场景颜色vec4 picCol = texture2D(colorTexture, v_textureCoordinates);// 计算闪电效果vec2 thunderUV = gl_FragCoord.xy / resolution.xy; // 标准化坐标thunderUV.x = 2. * thunderUV.x - 1.;              // 转换到-1~1范围thunderUV.x *= resolution.x / resolution.y;       // 修正宽高比vec3 thunder = render(thunderUV);                 // 生成闪电颜色// 最终颜色混合（50%透明度混合雨幕，叠加闪电）gl_FragColor = mix(picCol, vec4(c, 1.), 0.5) + vec4(thunder, 1.);
}

shader/snow.glsl

// 声明颜色纹理（当前屏幕渲染内容）
uniform sampler2D colorTexture;
// 当前像素的纹理坐标（范围0.0~1.0）
varying vec2 v_textureCoordinates;void main() {float snow = 0.0; // 存储雪花强度的变量// 获取屏幕分辨率（czm_viewport.zw存储画布的像素宽高）vec2 iResolution = czm_viewport.zw;// 计算时间（帧数转秒，60帧对应1秒）float iTime = czm_frameNumber / 60.0;// 创建纵向渐变效果（屏幕上方更亮）float gradient = (1.0 - gl_FragCoord.y / iResolution.x) * 0.4;// 生成基于像素坐标的随机数（用于雪花细节）float random = fract(sin(dot(gl_FragCoord.xy, vec2(12.9898, 78.233))) * 43758.5453);// 外层循环：生成6种不同形态的雪花for(int k = 0; k < 6; k++) {// 内层循环：每层生成12组雪花for(int i = 0; i < 12; i++) {// 计算当前雪花的单元格大小（基础2.0，每层增加3.0）float cellSize = 2.0 + float(i) * 3.0;// 计算下落速度（基础0.3，叠加正弦波动）float downSpeed = 0.3 + (sin(iTime*0.4 + float(k+i*20)) + 1.0) * 0.00008;// 计算UV坐标（标准化到0~1范围）vec2 uv = gl_FragCoord.xy / iResolution.x;// 添加横向飘动效果（用正弦函数制造左右摆动）uv.x += 0.01 * sin(iTime*0.6 + float(k*6185) + float(i)) * (5.0/float(i));// 添加纵向下落效果（随时间向下移动）uv.y += downSpeed * (iTime + float(k*1352)) * (1.0/float(i));uv *= 2.0; // 增加UV密度（使雪花更密集）// 将UV坐标离散化为网格（每个雪花对应一个网格）vec2 uvStep = ceil(uv * cellSize - vec2(0.5)) / cellSize;// 生成基于网格坐标的随机偏移量（模拟雪花位置变化）float x = fract(sin(dot(uvStep, vec2(12.9898+float(k)*12.0, 78.233+float(k)*315.156)))* 43758.5453 + float(k)*12.0) - 0.5;float y = fract(sin(dot(uvStep, vec2(62.2364+float(k)*23.0, 94.674+float(k)*95.0)))* 62159.8432 + float(k)*12.0) - 0.5;// 计算随机运动幅度（随时间变化）float randomMagnitude1 = sin(iTime*2.5) * 0.7 / cellSize;float randomMagnitude2 = cos(iTime*2.5) * 0.7 / cellSize;// 计算当前像素到雪花中心的距离vec2 snowPos = uvStep.xy + vec2(x*sin(y), y)*randomMagnitude1 + vec2(y, x)*randomMagnitude2;float d = 5.0 * distance(snowPos, uv.xy);// 生成遮挡判断值（决定是否绘制雪花）float omiVal = fract(sin(dot(uvStep, vec2(32.4691, 94.615))) * 31572.1684);// 仅8%的像素生成雪花（稀疏分布）if(omiVal < 0.08) {// 计算雪花强度（距离越近强度越高）float newd = (x + 1.0) * 0.4 * clamp(1.9 - d*(15.0+x*6.3)*(cellSize/1.4), 0.0, 1.0);snow += newd; // 累加到总雪量}}}// 获取原始场景颜色vec4 picColor = texture2D(colorTexture, v_textureCoordinates);// 生成最终雪颜色（叠加随机噪点）vec4 snowColor = vec4(snow) + random * 0.01;// 混合原始画面和雪效果（50%混合比例）gl_FragColor = mix(picColor, snowColor, 0.5);
}

shader/fog.glsl

// 声明颜色纹理（存储当前屏幕渲染的画面）
uniform sampler2D colorTexture;
// 当前像素的纹理坐标（范围0.0~1.0）
varying vec2 v_textureCoordinates;
// 声明深度纹理（存储每个像素的深度值）
uniform sampler2D depthTexture;
// 雾的颜色（由外部传入，格式RGB）
uniform vec3 u_fogColor;
// 雾效开始的距离（离相机多近开始起雾）
uniform float u_far;
// 雾效结束的距离（离相机多远完全被雾遮盖）
uniform float u_near;// 计算当前像素到相机的距离
float calFragDistance(){// 从深度纹理获取当前像素的深度颜色值（RGBA格式存储的深度信息）vec4 depthColor = texture2D(depthTexture, v_textureCoordinates);// 将深度颜色值转换为实际深度值（0.0~1.0，0=最近，1=最远）float depth = czm_unpackDepth(depthColor); // Cesium内置解压深度方法// 将屏幕坐标转换为相机坐标系坐标（得到三维空间中的位置）// gl_FragCoord.xy是当前像素在屏幕的位置（如(512,512)）// 返回的eyeCoordinates是相机坐标系下的坐标（x,y,z,w）vec4 eyeCoordinates = czm_windowToEyeCoordinates(gl_FragCoord.xy, depth);// （注释说明用，实际未使用）将相机坐标转换为世界坐标的示例// vec4 worldPosition = czm_inverseView * eyeCoordinates;// 计算实际距离：相机坐标系中z轴方向的距离（负号因为相机看向-z方向）// eyeCoordinates.w 用于处理透视投影的齐次坐标return -eyeCoordinates.z / eyeCoordinates.w; // 得到实际物理距离
}// 计算雾化强度（0.0=无雾，1.0=完全被雾遮盖）
float calFogRate(float fragDistance){// 线性雾化公式：（当前距离-雾开始距离）/(雾结束距离-雾开始距离)// clamp限制结果在0.0~1.0之间return clamp((fragDistance - u_near) / (u_far - u_near), 0.0, 1.0);
}// 主函数：处理每个像素的颜色
void main(){// 步骤1：计算当前像素到相机的距离float fragDistance = calFragDistance();// 步骤2：计算雾的混合比例（0.0=显示原色，1.0=完全显示雾色）float fogRate = calFogRate(fragDistance);// 获取当前像素的原始颜色（从颜色纹理采样）vec4 picColor = texture2D(colorTexture, v_textureCoordinates);// 步骤3：混合原始颜色和雾色（根据雾化比例）// mix(a,b,ratio) = a*(1-ratio) + b*ratiogl_FragColor = mix(picColor,                // 原始场景颜色vec4(u_fogColor, 1.0),   // 雾的颜色（alpha固定为1）fogRate                  // 混合比例);
}

自定义天气效果.js

// 导入Cesium库（三维地球可视化库）
import * as Cesium from "cesium";
// 导入dat.gui库（用于创建控制面板）
import * as dat from "dat.gui";// 导入腾讯地图服务提供者
import { TencentImageryProvider } from "@cesium-china/cesium-map";
// 导入天气效果着色器代码
import rain from '../shader/rain.glsl'
import snow from '../shader/snow.glsl'
import fog from '../shader/fog.glsl'// 创建调试控制面板
const gui = new dat.GUI();// 设置Cesium的访问令牌（相当于地图服务的密码）
Cesium.Ion.defaultAccessToken = "mytoken"; // 这里简化了长令牌// 创建三维地球视图容器（id为cesiumContainer的HTML元素）
const viewer = new Cesium.Viewer("cesiumContainer", {timeline: true,         // 显示时间轴animation: false,       // 隐藏动画控件baseLayerPicker: false, // 隐藏底图切换按钮homeButton: false,      // 隐藏主页按钮fullscreenButton: false,// 隐藏全屏按钮geocoder: false,        // 隐藏地理搜索框sceneModePicker: false, // 隐藏二三维切换按钮scene3DOnly: true,      // 强制使用3D模式navigationHelpButton: false, // 隐藏导航帮助shouldAnimate: true     // 允许时间流动（云层会动）
});// 腾讯地图服务配置（当前被注释，需要时取消注释）
// const addTecentMap = () => { ... };// 使用腾讯地图服务（卫星影像）
const options = {style: 4,       // 地图样式（4=卫星影像）crs: "WGS84"    // 使用国际通用坐标系
};
viewer.scene.imageryLayers.addImageryProvider(new TencentImageryProvider(options)
);// 加载3D建筑模型（tileset类似乐高积木的组装方式）
const tileset = new Cesium.Cesium3DTileset({url: "http://localhost:666/model/3dtiles/tileset.json" // 模型地址
});
viewer.scene.primitives.add(tileset); // 将模型添加到场景// 模型加载完成后自动定位到模型
tileset.readyPromise.then(() => {viewer.zoomTo(tileset); // 镜头飞向模型
});// 添加河流水域效果
const addRiver = async () => {// 加载水域的GeoJSON数据（类似地图上的多边形）const dataSource = await Cesium.GeoJsonDataSource.load("/src/assets/water.json");// 从数据源获取所有图形要素const entities = dataSource.entities.values;const instances = []; // 存储几何实例的数组// 处理每个水域多边形const getPerInstance = (ent) => {const hierarchy = ent.polygon.hierarchy.getValue(); // 获取多边形顶点数据const geometry = new Cesium.PolygonGeometry({ polygonHierarchy: hierarchy });instances.push(new Cesium.GeometryInstance({ geometry })); // 创建几何实例};entities.forEach(getPerInstance); // 遍历所有要素// 创建水的材质（就像给水面贴上一层会动的贴纸）const material = new Cesium.Material({fabric: {type: Cesium.Material.WaterType, // 使用内置水类型uniforms: {                      // 水的属性设置baseWaterColor: Cesium.Color.SKYBLUE, // 基础颜色blendColor: Cesium.Color.fromCssColorString("#3a96dd"), // 混合颜色normalMap: "/src/assets/waterNormals.jpg", // 法线贴图（制造波浪效果）frequency: 10000.0,   // 波浪密度animationSpeed: 0.1,  // 波浪速度amplitude: 1.0        // 波浪高度}}});// 创建水面外观（控制如何渲染）const appearance = new Cesium.EllipsoidSurfaceAppearance({material,translucent: true // 允许半透明});// 创建水面图元（最终的可视对象）const waterPrimitive = new Cesium.Primitive({appearance,geometryInstances: instances});viewer.scene.primitives.add(waterPrimitive); // 添加到场景
};addRiver(); // 执行添加水域// 开启抗锯齿（让画面边缘更平滑）
viewer.scene.postProcessStages.fxaa.enabled = true;// 天气效果控制参数
let rainStage, snowStage, fogStage; // 三个天气效果处理器
const rainModel = { enabled: false, rainSpeed: 1.2, rainSize: 1.2 }; // 雨参数
const snowModel = { enabled: false }; // 雪参数
const fogModel = { enabled: false, fogColor: '#5b51ec', near: 100, far: 200000 }; // 雾参数// 创建降雨效果
const addRainStage = () => {rainStage = new Cesium.PostProcessStage({name: 'rain',uniforms: { // 传递给着色器的参数rainSpeed: 0.6,   // 初始雨速rainSize: 1.2     // 初始雨滴大小},fragmentShader: rain // 使用雨效果着色器代码});
};// 创建降雪效果（同理）
const addSnowStage = () => {snowStage = new Cesium.PostProcessStage({name: 'snow',fragmentShader: snow});
};// 创建雾效效果
const addFogStage = () => {fogStage = new Cesium.PostProcessStage({name: 'fog',uniforms: {u_fogColor: Cesium.Color.fromCssColorString(fogModel.fogColor), // 雾颜色u_near: fogModel.near, // 雾起始距离u_far: fogModel.far    // 雾最大距离},fragmentShader: fog});
};// 初始化所有天气效果
addRainStage();
addSnowStage();
addFogStage();// 创建雨效控制面板
gui.add(rainModel, 'enabled').onChange(val => {val ? viewer.scene.postProcessStages.add(rainStage) // 开关雨效: viewer.scene.postProcessStages.remove(rainStage);
});
gui.add(rainModel, 'rainSpeed', 0.1, 2, 0.1).onChange(val => { // 雨速滑块rainStage && (rainStage.uniforms.rainSpeed = val);
});
gui.add(rainModel, 'rainSize', 0.1, 2, 0.1).onChange(val => { // 雨滴大小滑块rainStage && (rainStage.uniforms.rainSize = val);
});// 雪效控制面板
const folderSnow = gui.addFolder('雪属性');
folderSnow.add(snowModel, 'enabled').onChange(val => {val ? viewer.scene.postProcessStages.add(snowStage): viewer.scene.postProcessStages.remove(snowStage);
});// 雾效控制面板
const folderFog = gui.addFolder('雾属性');
folderFog.add(fogModel, 'enabled').onChange(val => { // 雾效开关val ? viewer.scene.postProcessStages.add(fogStage): viewer.scene.postProcessStages.remove(fogStage);
});
folderFog.addColor(fogModel, 'fogColor').onChange(val => { // 颜色选择器fogStage && (fogStage.uniforms.u_fogColor = Cesium.Color.fromCssColorString(val));
});
folderFog.add(fogModel, 'near', 0, 100000).onChange(val => { // 起始距离滑块fogStage && (fogStage.uniforms.u_near = val);
});
folderFog.add(fogModel, 'far', 100000, 500000, 3000).onChange(val => { // 最大距离滑块fogStage && (fogStage.uniforms.u_far = val);
});
folderFog.open(); // 默认展开雾效面板