@sl-utils/cesium 1.0.0 → 1.0.1

package/src/entities/point.ts

@@ -0,0 +1,48 @@
+import { CallbackProperty, Cartesian2, Cartesian3, Color, DeveloperError, DistanceDisplayCondition, Entity, HeightReference, NearFarScalar, PointGraphics, PositionProperty, Property } from "cesium";
+import { uc_getCartesian3, uc_tsIfCartesian3, uc_tsIfLnglatHeight } from "../utils";
+import { COLOR_CONST_FILL, COLOR_CONST_OUTLINE } from "../const";
+
+const DEFAULT_POINT_OPT: OptEntityPoint = {
+    ifChange: false,
+    pixelSize: 5,
+    color: Color.WHITE.withAlpha(0.7),
+    outlineColor: COLOR_CONST_OUTLINE,
+    outlineWidth: 1,
+}
+/**实体点 */
+export class EntityPoint extends Entity {
+    constructor(opt?: OptEntityPoint) {
+        const { position, ifChange, id, show, pixelSize, heightReference, color, outlineColor, outlineWidth, scaleByDistance, translucencyByDistance, distanceDisplayCondition, disableDepthTestDistance } = Object.assign({}, DEFAULT_POINT_OPT, opt);
+        let c3;
+        if (ifChange) {
+            c3 = new CallbackProperty(() => { return this.cdkPosition }, false);
+        } else if (position instanceof PositionProperty) {
+            c3 = position
+        } else {
+            c3 = position
+        }
+        super({
+            id,
+            position: c3,
+            point: {
+                show, pixelSize, heightReference, color, outlineColor, outlineWidth, scaleByDistance, translucencyByDistance, distanceDisplayCondition, disableDepthTestDistance
+            }
+        })
+        if (ifChange && uc_tsIfCartesian3(position)) {
+            this.cdkPosition = position;
+        }
+        this.cdkIfChange = ifChange;
+    }
+
+    private cdkIfChange: boolean = false;
+    /**点的位置 */
+    private cdkPosition: Cartesian3 = new Cartesian3(0, 0, 0);
+    /**重设位置 */
+    public cdkSetPosition(point: Cartesian3) {
+        if (!this.cdkIfChange) {
+            throw new DeveloperError(`非动态变化点，不允许再次设置点位.`);
+        };
+        this.cdkPosition = point
+    }
+
+}

package/src/entities/polygon.ts

@@ -0,0 +1,59 @@
+import { ArcType, CallbackProperty, Cartesian3, ClassificationType, Color, ConstantPositionProperty, ConstantProperty, DeveloperError, DistanceDisplayCondition, EllipseGraphics, Entity, HeightReference, MaterialProperty, PolygonGraphics, PolygonHierarchy, PositionProperty, Property, ShadowMode } from "cesium";
+import { uc_tsIfLnglatHeightArray, uc_getCartesian3, uc_tsIfLnglatHeight, uc_tsIfCartesian3Array, uc_tsIfProperty, uc_tsIfCartesian3, uc_tsIfNumber } from "../utils";
+import { COLOR_CONST_FILL, COLOR_CONST_OUTLINE, LNGLAT_CONST_SHENLAN } from "../const";
+const DEFAULT_POLYGON_OPT: OptEntityPolygon = {
+    ifChange: false,
+    show: true,
+    material: COLOR_CONST_FILL,
+    height: 0,
+    outline: true,
+    outlineColor: COLOR_CONST_OUTLINE,
+    outlineWidth: 1,
+    fill: true,
+}
+/**实体多边形*/
+export class EntityPolygon extends Entity {
+    constructor(opt: OptEntityPolygon) {
+        let { ifChange,
+            show, hierarchy, height, heightReference, extrudedHeight, extrudedHeightReference, stRotation, granularity, fill, material, outline, outlineColor, outlineWidth, perPositionHeight, closeTop, closeBottom, arcType, shadows, distanceDisplayCondition, classificationType, zIndex, textureCoordinates,
+        } = Object.assign({}, DEFAULT_POLYGON_OPT, opt);
+        let c3s;
+        if (ifChange) {
+            c3s = new CallbackProperty(() => { return this.hierarchy }, false);
+        } else {
+            c3s = hierarchy
+        }
+        super({
+            polygon: {
+                show, hierarchy: c3s, height, heightReference, extrudedHeight, extrudedHeightReference, stRotation, granularity, fill, material, outline, outlineColor, outlineWidth, perPositionHeight, closeTop, closeBottom, arcType, shadows, distanceDisplayCondition, classificationType, zIndex, textureCoordinates,
+            }
+        });
+    }
+    private cdkIfChange: boolean = true;
+    /**中心位置 */
+    private hierarchy: PolygonHierarchy = new PolygonHierarchy();
+    /**重设多边形 */
+    public cdkSetPositions(value: Cartesian3[]) {
+        if (!this.cdkIfChange) {
+            throw new DeveloperError(`非动态变化折线，不允许再次设置点位集合.`);
+        };
+        this.hierarchy.positions = value
+    }
+    /**添加多边形控制点 */
+    public cdkAddPoint(value: Cartesian3) {
+        if (!this.cdkIfChange) {
+            throw new DeveloperError(`非动态变化折线，不允许再次设置点位集合.`);
+        };
+        this.hierarchy.positions.push(value)
+    }
+    /**移除多边形控制点*/
+    public cdkRemovePoint(value: Cartesian3) {
+        if (!this.cdkIfChange) {
+            throw new DeveloperError(`非动态变化折线，不允许再次设置点位集合.`);
+        };
+        let index = this.hierarchy.positions.findIndex(e => e === value || (e.x == value.x && e.y == value.y && e.z == value.z))
+        this.hierarchy.positions.splice(index, 1);
+    }
+
+
+}

package/src/entities/polyline.ts

@@ -0,0 +1,55 @@
+import { ArcType, CallbackProperty, Cartesian3, ClassificationType, Color, ConstantProperty, DeveloperError, DistanceDisplayCondition, Entity, MaterialProperty, PolylineDashMaterialProperty, PolylineGraphics, PositionPropertyArray, Property, ShadowMode } from "cesium";
+import { uc_tsIfCartesian3Array, uc_tsIfLnglatHeight, uc_tsIfLnglatHeightArray, uc_getCartesian3, uc_getDiffDegreesByDistance } from "../utils";
+import { COLOR_CONST_FILL, COLOR_CONST_LINE, COLOR_CONST_OUTLINE } from "../const";
+// 定义虚线材质
+const dashedLineMaterial = new PolylineDashMaterialProperty({
+    color: Color.RED, // 线的颜色
+    dashLength: 16.0, // 每个虚线的长度
+    dashPattern: parseInt('1100110011001100', 2) // 虚线模式，二进制表示
+});
+const DEFAULT_POLYLINE_OPT: OptEntityPolyline = {
+    ifChange: false,
+    show: true,
+    width: 1,
+    material: COLOR_CONST_LINE,
+}
+/**实体折线 */
+export class EntityPolyline extends Entity {
+    constructor(opt: OptEntityPolyline = {}) {
+        const { ifChange,
+            show, positions, width, granularity, material, depthFailMaterial, arcType, clampToGround, shadows, distanceDisplayCondition, classificationType, zIndex } = Object.assign({}, DEFAULT_POLYLINE_OPT, opt);
+        let c3s: Property | Cartesian3[] = []
+        if (ifChange) {
+            c3s = new CallbackProperty(() => { return this.cdkPoints }, false);
+        } else {
+            c3s = positions
+        }
+        super({
+            polyline: {
+                positions: c3s,
+                show, width, granularity, material, depthFailMaterial, arcType, clampToGround, shadows, distanceDisplayCondition, classificationType, zIndex
+            }
+        });
+        if (ifChange && Array.isArray(positions)) {
+            this.cdkPoints = positions
+        }
+        this.cdkIfChange = ifChange;
+    }
+    private cdkIfChange: boolean = false;
+    /**折线点位集合 (动态点不能是Property) */
+    private cdkPoints: Cartesian3[] = [];
+    /**添加点到折线 */
+    public cdkAddPoint(value: Cartesian3) {
+        if (!this.cdkIfChange) {
+            throw new DeveloperError(`非动态变化折线，不允许再次设置点位集合.`);
+        };
+        this.cdkPoints.push(value)
+    }
+    /**重设折线 */
+    public cdkSetPositions(value: Cartesian3[]) {
+        if (!this.cdkIfChange) {
+            throw new DeveloperError(`非动态变化折线，不允许再次设置点位集合.`);
+        };
+        this.cdkPoints = value;
+    }
+}

package/src/entities/radar.ts

@@ -0,0 +1,18 @@
+import { Entity, Rectangle } from "cesium";
+import { uc_getDiffDegreesByDistance } from "../utils";
+import { PropertyMaterialRadar } from "../property";
+/**实体雷达 */
+export class EntityRadar extends Entity {
+    constructor(opt: OptEntityRadar) {
+        const { position: [lng, lat, height = 0], radius } = opt || {};
+        const { diffLat, diffLng } = uc_getDiffDegreesByDistance(lat, radius)
+        super({
+            rectangle: {
+                coordinates: Rectangle.fromDegrees(lng - diffLng, lat - diffLat, lng + diffLng, lat + diffLat,),
+                material: new PropertyMaterialRadar(),
+                height: height
+            }
+        })
+    }
+}
+

package/src/entities/rectangle.ts

@@ -0,0 +1,50 @@
+import { ArcType, CallbackProperty, Cartesian3, ClassificationType, Color, ConstantPositionProperty, ConstantProperty, DeveloperError, DistanceDisplayCondition, EllipseGraphics, Entity, HeightReference, MaterialProperty, RectangleGraphics, PositionProperty, Property, ShadowMode, Rectangle, Cartographic } from "cesium";
+import { uc_tsIfLnglatHeightArray, uc_getCartesian3, uc_tsIfLnglatHeight, uc_tsIfCartesian3Array, uc_tsIfProperty, uc_tsIfCartesian3, uc_tsIfNumber, CMath } from "../utils";
+import { COLOR_CONST_FILL, COLOR_CONST_OUTLINE, LNGLAT_CONST_SHENLAN } from "../const";
+const DEFAULT_POLYGON_OPT: OptEntityRectangle = {
+    ifChange: false,
+    show: true,
+    material: COLOR_CONST_FILL,
+    height: 0,
+    outline: true,
+    outlineColor: COLOR_CONST_OUTLINE,
+    outlineWidth: 2,
+    fill: true,
+}
+/**实体矩形 */
+export class EntityRectangle extends Entity {
+    constructor(opt: OptEntityRectangle) {
+        let { ifChange,
+            show, coordinates, height, heightReference, extrudedHeight, extrudedHeightReference, rotation, stRotation, granularity, fill, material, outline, outlineColor, outlineWidth, shadows, distanceDisplayCondition, classificationType, zIndex,
+        } = Object.assign({}, DEFAULT_POLYGON_OPT, opt);
+        let c3;
+        if (ifChange) {
+            c3 = new CallbackProperty(() => { return this.coordinates }, false);
+        } else {
+            c3 = coordinates
+        }
+        super({
+            rectangle: {
+                show, coordinates: c3, height, heightReference, extrudedHeight, extrudedHeightReference, rotation, stRotation, granularity, fill, material, outline, outlineColor, outlineWidth, shadows, distanceDisplayCondition, classificationType, zIndex,
+            }
+        });
+    }
+    private cdkIfChange: boolean = true;
+    /**中心位置 */
+    private coordinates: Rectangle = new Rectangle();
+    /**重设矩形 */
+    public cdkSetCoordinates(s: LnglatHeight, e: LnglatHeight) {
+        if (!this.cdkIfChange) {
+            throw new DeveloperError(`非动态变化折线，不允许再次设置点位集合.`);
+        };
+        let [slng, slat, sheight] = s, [elng, elat, eheight] = e;
+        const north = slat > elat ? slat : elat;
+        const south = slat > elat ? elat : slat;
+        const east = slng > elng ? slng : elng;
+        const west = slng > elng ? elng : slng;
+        this.coordinates.east = CMath.toRadians(east);
+        this.coordinates.north = CMath.toRadians(north);
+        this.coordinates.west = CMath.toRadians(west);
+        this.coordinates.south = CMath.toRadians(south);
+    }
+}

package/src/entities/trailing.ts

@@ -0,0 +1,22 @@
+import { Cartesian3, Entity, Viewer } from "cesium";
+import { uc_getCartesian3, uc_getDiffDegreesByDistance } from "../utils";
+import { PropertyMaterialTrailing } from "../property";
+/**实体线+拖尾效果 */
+export class EntityTrailing extends Entity {
+    static material: PropertyMaterialTrailing
+    constructor(opt: OptEntityTrailing) {
+        const { positions = [] } = opt || {};
+        //拖尾效果材质
+        let material = EntityTrailing.material = EntityTrailing.material || new PropertyMaterialTrailing();
+        //设置结束位
+        let cartesian3s = positions.map(e => uc_getCartesian3(e));
+        super({
+            polyline: {
+                positions: cartesian3s,
+                width: 2,
+                material: material,
+            }
+        })
+    }
+
+}

package/src/index.ts

@@ -0,0 +1,10 @@
+/** Cesium  1.107.2 */
+/** 
+ * @如果主组件导入了 SLUCesiumInit 则所有使用到的方法都会被打包到main.js中
+ * 
+ * @ export * from "./load/building"; ===  export { XXXXX } from "./load/building";
+ * 
+ * @ export * as LoadBuilding from "./load/building";LoadBuilding未使用则不会被打包,但只要使用到LoadBuilding,其所有方法都会被打包
+ * 
+ *
+ */

package/src/plugins/bathymetry.ts

@@ -0,0 +1,107 @@
+import { Color, Material, Scene } from "cesium";
+
+/**插件---根据高程数据实现水深渐变插件 
+ * @example https://sandcastle.cesium.com/?id=bathymetry
+*/
+export class PluginBathymetry extends Material {
+    constructor(scene: Scene) {
+        super({
+            fabric: {
+                /**自定义材质标识 */
+                type: "ElevationColorContour",
+                materials: {
+                    contourMaterial: {
+                        type: "ElevationContour",
+                    },
+                    /**声明「高程渐变材质」，类型为 ElevationRamp（基于地形高程值的渐变着色，比如低海拔绿色、高海拔棕色） */
+                    elevationRampMaterial: {
+                        type: "ElevationRamp",
+                    },
+                },
+                components: {
+                    /**最终材质的漫反射颜色，复用 elevationRampMaterial 的漫反射结果（即高程渐变色） */
+                    diffuse: "(1.0 - contourMaterial.alpha) * elevationRampMaterial.diffuse + contourMaterial.alpha * contourMaterial.diffuse",
+                    alpha: "max(0.8, 0.8)",
+                },
+            },
+            /**全局禁用半透明（强制材质不透明渲染，避免陆地出现半透效果） */
+            translucent: false,
+        })
+        this.updateGlobeMaterial(scene)
+    }
+    /**配置的最高的高程 */
+    public readonly maxHeight: number = 20;
+    /**配置的最低的高程 */
+    public readonly minHeight: number = -10;
+    /**用于绘制渐变的canvas */
+    private canvas: HTMLCanvasElement | undefined;
+    /**显示高程等高线 */
+    public showContourLines: boolean = false;
+    /**显示高程渐变颜色图 */
+    public showElevationColorRamp: boolean = true;
+    /**高程垂直差缩放倍数( scene.verticalExaggeration 落差不能太大) */
+    private verticalExaggeration: number = 1;
+
+    public readonly countourLineSpacing: number = 1.0;
+    public readonly invertContourLines = true;
+    /**更新地球材质 */
+    private updateGlobeMaterial(scene: Scene) {
+        const { showContourLines, showElevationColorRamp, minHeight, maxHeight, countourLineSpacing, invertContourLines, verticalExaggeration } = this, { globe } = scene;
+        let material: Material = this;
+        if (showContourLines) {
+            if (showElevationColorRamp) {
+                let shadingUniforms = material.materials.elevationRampMaterial.uniforms;
+                shadingUniforms.image = this.createColorRamp();
+                shadingUniforms.minimumHeight = minHeight * verticalExaggeration;
+                shadingUniforms.maximumHeight = maxHeight * verticalExaggeration;
+                shadingUniforms = material.materials.contourMaterial.uniforms;
+                shadingUniforms.width = 1.0;
+                shadingUniforms.spacing = countourLineSpacing * verticalExaggeration;
+                shadingUniforms.color = invertContourLines ? Color.WHITE.withAlpha(0.5) : Color.BLACK.withAlpha(0.5);
+                globe.material = material;
+                return;
+            }
+            material = Material.fromType("ElevationContour");
+            const shadingUniforms = material.uniforms;
+            shadingUniforms.width = 1.0;
+            shadingUniforms.spacing = countourLineSpacing * verticalExaggeration;
+            shadingUniforms.color = invertContourLines ? Color.WHITE : Color.BLACK;
+            globe.material = material;
+            return;
+        }
+        if (showElevationColorRamp) {
+            material = Material.fromType("ElevationRamp");
+            const shadingUniforms = material.uniforms;
+            shadingUniforms.image = this.createColorRamp();
+            shadingUniforms.minimumHeight = minHeight * verticalExaggeration;
+            shadingUniforms.maximumHeight = maxHeight * verticalExaggeration;
+            globe.material = material;
+            return;
+        }
+        globe.material = material;
+    }
+    /**创建一个颜色渐变 */
+    private createColorRamp(): HTMLCanvasElement {
+        if (this.canvas) return this.canvas;
+        const canvas = this.canvas = document.createElement('canvas');
+        canvas.width = 100;
+        canvas.height = 15;
+        const ctx = canvas.getContext('2d');
+        const grd = ctx.createLinearGradient(0, 0, 100, 0);
+        grd.addColorStop(1.0, "#B79E6C");
+        grd.addColorStop(0.95, "#FBFFEE");
+        grd.addColorStop(0.9, "#F9FCCA");
+        grd.addColorStop(0.8, "#BDE7AD");
+        grd.addColorStop(0.7, "#81D2A3");
+        grd.addColorStop(0.6, "#5AB7A4");
+        grd.addColorStop(0.5, "#4C9AA0");
+        grd.addColorStop(0.4, "#437D9A");
+        grd.addColorStop(0.3, "#3E6194");
+        grd.addColorStop(0.2, "#424380");
+        grd.addColorStop(0.1, "#392D52");
+        grd.addColorStop(0.0, "#291C2F");
+        ctx.fillStyle = grd;
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+        return canvas;
+    }
+}

package/src/plugins/elevation.ts

@@ -0,0 +1,146 @@
+import { GlobeTranslucency, Globe, createElevationBandMaterial, Scene, Material, Math as CMath, Color } from "cesium";
+import { uc_deepAssign } from "../utils";
+/**默认配置 */
+const DEFAULT_ELEVATIONOPT: PluginElevationOpt = {
+    heightStyles: [
+        [1000, [0.0, 1.0, 0.0, 0.5]],
+        [2000, [0.0, 0.0, 1.0, 0.5]],
+        [4000, [1.0, 0.0, 0.0, 0.5]]
+    ],
+    thickness: 100,
+    alpha: 0.2,
+    ifGradient: true,
+    grid: {
+        count: 50,
+        color: [1.0, 1.0, 0.0, 0.2],
+        width: 10,
+        heightAbove: 8800,
+        heightBelow: 0
+    }
+}
+/**插件---海拔类 
+ * @example https://sandcastle.cesium.com/?id=elevation-band-material
+*/
+export class PluginElevation {
+    constructor(scene: Scene, opt?: PluginElevationOpt) {
+        this.options = uc_deepAssign(DEFAULT_ELEVATIONOPT, opt);
+        this.scene = scene;
+        this.createLayers();
+    }
+    private scene: Scene;
+    private options: PluginElevationOpt;
+    /**本材质 */
+    private material: Material;
+    /**之前的材质 */
+    private materialPer: Material;
+    /**创建图层并记录原始材质 */
+    private createLayers() {
+        const { scene, options } = this, { alpha, thickness, grid, ifGradient, heightStyles } = options;
+        const layers = [];
+        /**背景渐变透明度 */
+        const backgroundTransparency = 0.9;
+        /**配置一个特定的渐变 */
+        const backgroundLayer = {
+            entries: [
+                {
+                    height: 0.0,
+                    color: new Color(0.0, 0.0, 0.2, backgroundTransparency),
+                },
+                {
+                    height: 8000.0,
+                    color: new Color(1.0, 1.0, 1.0, backgroundTransparency),
+                },
+                {
+                    height: 8500.0,
+                    color: new Color(1.0, 1.0, 0.0, backgroundTransparency),
+                },
+            ],
+            extendDownwards: true,
+            extendUpwards: true,
+        };
+        layers.push(backgroundLayer);
+        if (grid.count) {
+            /**分割条纹 */
+            const { count, color, width, heightBelow, heightAbove } = grid, [r, g, b, a] = color;
+            for (let i = 0; i < count; i++) {
+                const lerper = i / (count - 1);
+                const below = CMath.lerp(heightBelow, heightAbove, lerper);
+                const above = below + width;
+                const alpha = CMath.lerp(0.2, 0.4, lerper) * a;
+                layers.push({
+                    entries: [
+                        {
+                            height: below,
+                            color: new Color(r, g, b, alpha),
+                        },
+                        {
+                            height: above,
+                            color: new Color(r, g, b, alpha),
+                        },
+                    ],
+                });
+            }
+        }
+        /** */
+        if (ifGradient) {
+            const entries = [];
+            for (let i = 0, len = heightStyles.length; i < len; i++) {
+                const [height, [r, g, b, a = alpha]] = heightStyles[i];
+                if (i == 0) {
+                    entries.push({
+                        height: height - thickness * 0.5,
+                        color: new Color(r, g, b, a),
+                    })
+                } else if (i == len - 1) {
+                    entries.push({
+                        height: height + thickness * 0.5,
+                        color: new Color(r, g, b, a),
+                    })
+                } else {
+                    entries.push({
+                        height: height,
+                        color: new Color(r, g, b, a),
+                    })
+                }
+            }
+            layers.push({ entries });
+        } else {
+            const antialias = Math.min(10.0, thickness * 0.1);
+            for (let i = 0, len = heightStyles.length; i < len; i++) {
+                const [height, [r, g, b, a = alpha]] = heightStyles[i];
+                layers.push({
+                    entries: [
+                        {
+                            height: height - thickness * 0.5 - antialias,
+                            color: new Color(r, g, b, 0.0),
+                        },
+                        {
+                            height: height - thickness * 0.5,
+                            color: new Color(r, g, b, a),
+                        },
+                        {
+                            height: height + thickness * 0.5,
+                            color: new Color(r, g, b, a),
+                        },
+                        {
+                            height: height + thickness * 0.5 + antialias,
+                            color: new Color(r, g, b, 0.0),
+                        },
+                    ]
+                });
+            }
+        }
+        this.material = createElevationBandMaterial({ scene: scene, layers: layers, })
+        this.materialPer = this.scene.globe.material;
+        this.show();
+    }
+    /**添加到场景 */
+    public show() {
+        this.scene.globe.material = this.material;
+    }
+    /**隐藏 */
+    public hide() {
+        this.scene.globe.material = this.materialPer;
+    }
+
+}

package/src/plugins/index.ts

@@ -0,0 +1,3 @@
+export * from './bathymetry'
+export * from './elevation'
+export * from './post-process-snow'

package/src/plugins/post-process-snow.glsl

@@ -0,0 +1,99 @@
+precision highp float;
+//颜色纹理是渲染场景或上一阶段的输出结果
+uniform sampler2D colorTexture;
+//深度纹理是渲染场景的输出结果;
+uniform sampler2D depthTexture;
+//用于采样纹理(PostProcessStage内部会替换该句代码)
+in vec2 v_textureCoordinates;
+
+#define HASHSCALE1 .1031
+#define HASHSCALE3 vec3(.1031, .1030, .0973)
+
+float time;
+float SIZE_RATE = 0.1;
+// X轴的速度
+float XSPEED = 0.2;
+//雪花贴图
+uniform sampler2D u_snowTexture;
+//雨雪大小1-10
+uniform float u_sl_size;
+//雨雪密度(密度越大，雪也会越小)
+uniform float u_sl_density;
+// 雨雪层数
+uniform float u_sl_layers;
+// 雨雪层数
+uniform float u_sl_speedY;
+
+//传入图层layer
+float Hash11(float p)
+{
+    vec3 p3  = fract(vec3(p) * HASHSCALE1);
+    p3 += dot(p3, p3.yzx + 19.19);
+    return fract((p3.x + p3.y) * p3.z); 
+}
+
+vec2 Hash22(vec2 p)
+{
+    vec3 p3 = fract(vec3(p.xyx) * HASHSCALE3);
+    p3 += dot(p3, p3.yzx+19.19);
+    return fract((p3.xx+p3.yz)*p3.zy);
+}
+// 旋转UV坐标的函数
+vec2 rotateUV(vec2 uv, float angle) {
+    float s = sin(angle);
+    float c = cos(angle);
+    mat2 rot = mat2(c, -s, s, c);
+    return rot * uv;
+}
+// 或者使用更简单的2D旋转
+vec2 rotate(vec2 uv, float angle, vec2 center) {
+    uv -= center;
+    float s = sin(angle);
+    float c = cos(angle);
+    mat2 m = mat2(c, -s, s, c);
+    return m * uv + center;
+}
+// 雪景单层绘制
+vec4 SnowSingleLayer(vec2 uv,float layer){
+    // 1. 保持原有坐标变换
+    uv = uv * (5.0 + layer) * u_sl_density;
+    float xOffset = uv.y * ( ( ( Hash11(layer) * 2. - 1.) * 0.5 + 1. ) * XSPEED );
+    float yOffset = ( u_sl_speedY * time );
+    uv += vec2( xOffset , yOffset );
+    vec2 rgrid = Hash22(floor(uv) + (31.1759 * layer));
+    vec2 center = fract(uv);
+    center -= (rgrid * 2. - 1.0) * 0.35;
+    center -= 0.5;
+    float dist = length(center);
+     // 计算雪花的大小（半径），其中基础大小为0.08，同时随着时间正弦变化，变化幅度为0.2倍，变化频率由SIZE_RATE控制
+    float size = 0.05 * (1.0 + 0.2 * sin(time * SIZE_RATE)) * u_sl_size;
+    // 2. 使用原有的圆形遮罩
+    float circleMask = 1.0 - smoothstep(size * 0.7, size, dist);
+    // 3. 纹理坐标映射
+    vec2 texCoord = (center / (size * 2.0)) + 0.5;
+    // 可选：添加随机旋转
+    float rotation = rgrid.y * 6.283; // 0-2π
+    texCoord = rotateUV(texCoord - 0.5, rotation) + 0.5;
+    // 4. 采样纹理并应用遮罩
+    vec4 texColor = texture(u_snowTexture, texCoord);
+    texColor.a = texColor.a * circleMask;
+    // vec4 col = fract( vec4(start.x,start.y,.0,0.99) );
+    return texColor;
+}
+
+void main()
+{
+    time = czm_frameNumber / 120.0;
+    // time = 1. / 120.0;
+    // 将像素坐标归一化到[0,1]范围
+    vec2 uv = gl_FragCoord.xy / czm_viewport.zw;
+    // 矩形化使XY方向的每像素变化值一致
+    uv *= vec2( czm_viewport.z/czm_viewport.w , 1.0 );
+    // 初始色彩值
+    vec4 acc = vec4(0,0,0,0);
+    for (float i=0. ; i < u_sl_layers ; i++) {
+        acc += SnowSingleLayer(uv,i); 
+    }
+    //混合比例
+    out_FragColor = mix( texture(colorTexture, v_textureCoordinates) , acc , acc.a * 0.8);
+}

package/src/plugins/post-process-snow.ts

@@ -0,0 +1,45 @@
+import { Cartesian2, Color, PixelFormat, PostProcessStage, PostProcessStageSampleMode } from "cesium";
+import PostProcessSnowFS from './post-process-snow.glsl'
+import PostProcessThunderFS from './thunder.glsl'
+import { RESOURCES } from "../Assets/resource";
+/**后处理管线---雪花、雨点 */
+export class PostProcessSnow extends PostProcessStage {
+    constructor() {
+        super({
+            /**此后处理阶段的唯一名称，供组合中的其他阶段引用.未提供名称，将生成一个全球唯一标识符（GUID） */
+            name: "Post-Process-Snow",
+            /** 一个在 (0.0, 1.0] 范围内的数字，用于缩放纹理尺寸。缩放比例为 1.0 时，此后期处理阶段会将纹理渲染为与视口相同的大小 */
+            textureScale: 1.0,
+            /**是否强制纹理尺寸为2的幂次方 */
+            forcePowerOfTwo: false,
+            /**如何对输入的颜色纹理进行采样 */
+            sampleMode: PostProcessStageSampleMode.NEAREST,
+            /**输出纹理的颜色像素格式 */
+            pixelFormat: PixelFormat.RGBA,
+            /**用于清除输出纹理的颜色 */
+            clearColor: Color.BLACK,
+            fragmentShader: PostProcessThunderFS,
+            uniforms: {
+                u_snowTexture: RESOURCES.U_SNOWTEXTURE, // 雪花图片纹理（后续加载赋值）
+                /**雨雪大小（1-10） */
+                u_sl_size: 1,
+                /**雨雪密度(密度越大，雪也会越小) */
+                u_sl_density: 3,
+                /**雨雪层数(越大叠加的越厚) */
+                u_sl_layers: 5,
+                /**Y方向的速度 */
+                u_sl_speedY: 3.5,
+
+                // 雷电参数
+                u_thunderIntensity: 1.0,     // 初始无雷电
+                u_thunderFlash: 1.0,         // 初始无闪光
+                u_thunderFrequency: 0.5,     // 中等频率
+                u_thunderPosition: new Cartesian2(0.5, 0.9), // 屏幕上方中间
+                u_screenShake: 0.5,          // 中等抖动强度
+                u_thunderTime: 0.0           // 雷电时间
+            }
+        })
+    }
+
+
+}