@sl-utils/cesium 1.0.0 → 1.0.1

package/src/plugins/thunder.glsl

@@ -0,0 +1,159 @@
+#define MAX_STEPS 200
+#define MAX_DIST 1200.
+#define SURF_DIST .1
+
+// 原始场景的颜色纹理：Cesium渲染好的地球/模型/影像画面
+uniform sampler2D colorTexture;
+// 原始场景的深度纹理：记录每个像素的深度值（本代码未使用）
+uniform sampler2D depthTexture;
+// 纹理采样坐标：[0,1]范围，PostProcessStage自动传值，用于采样colorTexture
+in vec2 v_textureCoordinates;
+
+float iTime;
+
+//生成 2D 旋转矩阵，用于旋转纹理坐标，减少分形噪声的轴向偏差
+mat2 rot(float r){
+    return mat2(cos(r), sin(r), -sin(r), cos(r));
+}
+//为随机数sin取小数
+float random(float x){
+    return fract(sin(x*323.9877));
+}
+//伪随机数sin取小数
+float random (in vec2 _st) {
+    return fract( sin( dot( _st.xy,vec2(12.9898,78.233) ) )* 43758.5453123);
+}
+//伪随机数sin取小数 =》 [-1.5,0.5]
+vec2 random2(vec2 _st){
+   vec2 res = vec2(
+        fract( sin( dot( _st.xy, vec2(12.9898,78.233) ) ) * 43758.5453123),
+        fract( sin( dot( _st.xy, vec2(45.9898,31.233) ) ) * 43758.5453123)
+        );
+   res-=.5;
+   return res;
+}
+
+float noise (in vec2 _st) {
+    // 整数部分（瓷砖坐标）
+    vec2 i = floor(_st);
+    // 小数部分（瓷砖内坐标）
+    vec2 f = fract(_st);
+    // 采样瓷砖四个角的随机值
+    float a = random(i);
+    float b = random(i + vec2(1.0, 0.0));
+    float c = random(i + vec2(0.0, 1.0));
+    float d = random(i + vec2(1.0, 1.0));
+    // 平滑插值曲线（避免线性插值的硬边）
+    vec2 u = f * f * (3.0 - 2.0 * f);
+    return mix(a, b, u.x) + (c - a)* u.y * (1.0 - u.x) + (d - b) * u.x * u.y;
+}
+
+#define NUM_OCTAVES 5
+
+float fbm ( in vec2 _st) {
+    float v = 0.0;
+    float a = 0.5;
+    vec2 shift = vec2(100.0);
+    // Rotate to reduce axial bias
+    mat2 rot = mat2(cos(0.5), sin(0.5),
+                    -sin(0.5), cos(0.50));
+    for (int i = 0; i < NUM_OCTAVES; ++i) {
+        v += a * noise(_st);
+        _st = rot * _st * 2.0 + shift;
+        a *= 0.5;
+    }
+    return v;
+}
+const mat2 m2 = mat2(  0.80,  0.60, -0.60,  0.80 );
+           
+float fbm_6(vec2 x){
+    float f = 2.0;
+    float s = 0.5;
+    float a = 0.0;
+    float b = 0.5;
+    for( int i=0; i<6; i++ )
+    {
+        float n = noise(x);
+        a += b*n;
+        b *= s;
+        x = f*m2*x;
+    }
+	return a;
+}
+
+float dseg( vec2 ba, vec2 pa )
+{
+	float h = clamp( dot(pa,ba)/dot(ba,ba),0., 1.6 );	
+	return length( pa - ba*h );
+}
+
+float arc2(vec2 x,vec2 r, vec2 dir,float stepnum){
+    float d=10.;
+    for (float i = 0.; i < stepnum; i++)
+    {
+        vec2 s= normalize(random2(r)+dir);
+        d=min(d,dseg(s,x-r));
+        r += s;
+    }
+    return d;
+}
+
+float arc(vec2 x,vec2 r, vec2 dir,float stepnum){
+    float d=10.;
+    for (float i = 1.; i < stepnum; i++){
+        vec2 s= normalize(random2(r)+dir);
+        d=min(d,dseg(s,x-r));
+        r += s;
+        if(mod(i,6.)==0.)  d=min(d,arc2(x,r,vec2(0.25,-0.8),fract(iTime*1.4)*5.));
+    }
+    return d*4.;
+}
+//
+//缩放影子 scale 越小闪电越大
+//
+float perlight(vec2 uv,float scale,float stepnum){
+     // sin结果小数值大于0.32时不生成光效（ 0 - 2PI 节奏快-慢-快-慢 ）
+    float t = fract( sin( iTime * 3.239877));
+    if( t > 0.32 ) return 0.;
+    vec2 or = vec2( 0.03, -0.043);
+    or = or + .01 * sin( or + .3 * iTime);
+    // x = [-0.5,0.5], y = [-1,0] 
+    uv.y -= 0.5;
+    uv.x -= 0.5;
+    float res=exp( -1.8 * length(uv) )*0.7;
+    if(t > 0.06)  return res*0.25;
+    uv*=scale;
+    uv.x+=fbm_6(-uv*2.4)*0.4;
+    uv.y+=fbm(uv*2.2)*.6;
+    float d=100.;
+    vec2 r=or*scale;
+    for(float i=0.;i<=stepnum;i++){
+        vec2 ab = normalize( random2(r) - vec2(0,0.5+fract(iTime*0.0000006))) * 0.8;
+        d=min(d, dseg(ab,uv-r));
+        r+=ab;
+        if(mod(i,6.)==floor(random(iTime*0.00001)*2.)+1.)  d=min(d,arc(uv,r,vec2(0.65,-0.5),fract(iTime*1.4)*random(i)*12.));
+        if(mod(i,8.)==floor(random(iTime*0.00002)*1.)+1.)  d=min(d,arc(uv,r,vec2(-0.67,-.5),fract(iTime*1.4)*random(i*3.)*12.));  
+    }
+    return max(res,exp(-scale*0.15*d));
+}
+
+void main() 
+{
+    //czm_frameNumber每渲一帧就+1，约一秒60帧, 该结果大约每秒完成一个三角函数周期
+    iTime = czm_frameNumber / 60.0 * 3.1415926 * 2.0;
+    //每5秒一个循环
+    iTime = iTime / 5.0;
+    //将像素坐标归一化到[0,1]范围
+    vec2 uv = gl_FragCoord.xy / czm_viewport.zw;
+    //矩形化使XY方向的每像素变化值一致
+    uv *= vec2(czm_viewport.z / czm_viewport.w, 1.0);
+    //范围调整为[-0.5, 0.5]
+    uv -= vec2(.5);
+    //基础底色
+    vec3 col = vec3(0.3);
+    float light = perlight( uv, 32., fract( iTime * 1.4 ) * 26. );
+     col+=light;
+    if(col.r+col.g+col.b < 2.0) out_FragColor =texture(colorTexture, v_textureCoordinates);
+    //混合比例
+   else out_FragColor = mix( texture(colorTexture, v_textureCoordinates) , vec4(col,1.0) , 0.8);
+}

package/src/primitives/appearance/demo.ts

@@ -0,0 +1,27 @@
+import { EllipsoidSurfaceAppearance } from "cesium";
+import gsap from "gsap";
+/**在外观Appearance上直接修改着色器的极简demo
+ * 无法运行时最好先console.log查看标准外观类的源码，有时官方可能更改了部分定义,写此文件时变化varing => in , gl_FragColor => out_FragColor
+ */
+export class AppearanceDemo extends EllipsoidSurfaceAppearance {
+    constructor() {
+        super({
+            /**最好先console.log查看外观的着色器源码 */
+            fragmentShaderSource: `
+            in vec3 v_positionMC;
+            in vec3 v_positionEC;
+            in vec2 v_st;
+            uniform float uTime;
+            void main(){
+                float gradient = (v_positionMC.z + 100000.0) / 200000.0;
+                out_FragColor = vec4(v_st , uTime , 1.0);
+            }
+            `
+        });
+        gsap.to(this.uniforms, { uTime: 1, duration: 1, repeat: -1, yoyo: true })
+    }
+    /**在此处定义uniforms */
+    private uniforms = {
+        uTime: 0
+    }
+}

package/src/primitives/appearance/index.ts

@@ -0,0 +1 @@
+export * from './demo';

package/src/primitives/area.ts

@@ -0,0 +1,40 @@
+import { Cartesian3, Color, ColorGeometryInstanceAttribute, DistanceDisplayCondition, DistanceDisplayConditionGeometryInstanceAttribute, EllipseGeometry, EllipsoidSurfaceAppearance, Geometry, GeometryInstance, Material, PolygonGeometry, Primitive, RectangleGeometry, createGuid } from "cesium";
+import * as Cesium from "cesium";
+import { uc_getDistanceByLatOffset } from "../utils";
+import { AppearanceDemo } from "./appearance";
+import { uc_geometryEllipse, uc_geometryPolygon } from "./geometry/geometry";
+/**特定区域的图元（2D）
+ * polygon  ==  多边形
+ * circle   ==  圆形
+ */
+export class PrimitiveArea extends Primitive {
+    constructor(opt: OptPrimitiveAreaEllipse | OptPrimitiveAreaPolygon) {
+        const { id = createGuid(), type, positions, radius, color = Color.RED.withAlpha(0.5) } = opt;
+        const geometry = type === 'ellipse' ? uc_geometryEllipse(positions, radius) : uc_geometryPolygon(positions)
+        const instance = new GeometryInstance({
+            id,
+            geometry,
+            attributes: {
+                color: ColorGeometryInstanceAttribute.fromColor(Color.RED.withAlpha(0.5))
+            },
+        });
+        /**设定采用几何体与地球的椭球体平行的外观（优化渲染）*/
+        let appearance = new EllipsoidSurfaceAppearance({
+            /**采用点顶点颜色材质 */
+            material: Material.fromType('Color', { color })
+        })
+        super({
+            geometryInstances: [instance],
+            appearance: appearance,
+        });
+        this.id = id;
+    }
+    public id: string;
+
+    override getGeometryInstanceAttributes(id: any) {
+        return {
+            color: ColorGeometryInstanceAttribute.toValue(Color.RED.withAlpha(0.5)),
+            distanceDisplayCondition: DistanceDisplayConditionGeometryInstanceAttribute.toValue(new DistanceDisplayCondition(1000, 50000))
+        };
+    }
+}

package/src/primitives/geometry/geometry.ts

@@ -0,0 +1,44 @@
+import { ArcType, Cartesian3, EllipseGeometry, Ellipsoid, EllipsoidSurfaceAppearance, PolygonGeometry, PolygonHierarchy, VertexFormat } from "cesium";
+import { uc_deepAssign, uc_getCartesian3 } from "../../utils";
+import { RESULT_Cartesian3, RESULT_Cartesian3_A, RESULT_Cartesian3_B } from "../../core/viewer";
+
+
+
+/**生成多边形几何体 */
+function generatePolygon(positions: LnglatHeight[], option?: PolygonGeometryOpt): PolygonGeometry {
+    const ph = positions.map(e => uc_getCartesian3(e))
+    const polygonHierarchy = new PolygonHierarchy(ph),
+        geometry = new PolygonGeometry({
+            polygonHierarchy,
+            /**距离表面高度 */
+            height: 0,
+            /**顶点格式（UV，法线如何设置） */
+            vertexFormat: EllipsoidSurfaceAppearance.VERTEX_FORMAT,
+        });
+    return geometry;
+}
+
+/**生成椭圆几何体(包括圆) 
+ * @param positions 几何体中心位置()
+ * @param radiusMajor 椭圆的大半径
+ * @param radiusMinor 椭圆的小半径(不设置时等于radiusMajor)
+ * @param options 
+*/
+function generateEllipse(center: LnglatHeight, radiusMajor?: number | LnglatHeight, radiusMinor?: number, options: Partial<EllipseGeometryOpt> = {}): EllipseGeometry {
+    const C3 = uc_getCartesian3(center, RESULT_Cartesian3_A);
+    const radius = Array.isArray(radiusMajor) ? Cartesian3.distance(C3, uc_getCartesian3(radiusMajor, RESULT_Cartesian3_B)) : radiusMajor;
+    radiusMinor = radiusMinor || radius;
+    const opt: EllipseGeometryOpt = uc_deepAssign(options, {
+        center: C3,
+        semiMajorAxis: radius,
+        semiMinorAxis: radiusMinor,
+    }) as EllipseGeometryOpt
+    const geometry = new EllipseGeometry(opt);
+    return geometry;
+}
+
+export {
+    generatePolygon as uc_geometryPolygon,
+    generateEllipse as uc_geometryEllipse,
+}
+

package/src/primitives/image-2d.ts

@@ -0,0 +1,73 @@
+import { Appearance, Cartesian3, Color, ColorGeometryInstanceAttribute, ComponentDatatype, DistanceDisplayCondition, DistanceDisplayConditionGeometryInstanceAttribute, EllipseGeometry, EllipsoidSurfaceAppearance, GeometryInstance, GeometryInstanceAttribute, Matrix3, Matrix4, Primitive, Quaternion } from "cesium";
+import { MaterialImage2D } from "./material";
+import { CMath, uc_arrChange, uc_getDiffDegreesByDistance, uc_getQuaternion, uc_getUUID } from "../utils";
+import { uc_geometryEllipse } from "./geometry/geometry";
+import EllipsoidSurfaceAppearanceFS from './shaders/EllipsoidSurfaceAppearanceFS.glsl'
+import EllipsoidSurfaceAppearanceVS from './shaders/EllipsoidSurfaceAppearanceVS.glsl'
+
+/**这是一个关于图片的Primitive */
+export class PrimitiveImage2D extends Primitive {
+    /**要避免空白闪烁可预加载 */
+    static materials: { [K: string]: MaterialImage2D } = Object.create(null)
+    /**
+     * @param url 图片地址
+     * @param opt 数据参数
+     */
+    constructor(url: string, opt: OptPrimitiveImage2D[]) {
+        const instances = opt.map(e => PrimitiveImage2D.createGeometryInstance(e))
+        const material = PrimitiveImage2D.materials[url] = PrimitiveImage2D.materials[url] || new MaterialImage2D(url)
+        /**远距离点位 */
+        /**生成几何体实例 */
+        /**设定采用几何体与地球的椭球体平行的外观（优化渲染）*/
+        let appearance = new EllipsoidSurfaceAppearance({
+            /**避免空白闪烁 (采用new会出现闪烁现象)*/
+            material: material,
+            /**vertexShaderSource 可以自己写顶点着色器main入口 */
+            vertexShaderSource: EllipsoidSurfaceAppearanceVS,
+            /**fragmentShaderSource 可以自己写顶点着色器main入口 */
+            fragmentShaderSource: EllipsoidSurfaceAppearanceFS,
+        })
+        super({
+            /**多个相同材质的实例采用实例组也能优化性能 */
+            geometryInstances: instances,
+            /**外观 */
+            appearance: appearance,
+            // 视锥体裁剪（默认开启，自动隐藏视野外的点）
+            cull: true,
+            // 优化参数：关闭拾取（无需点击时，进一步提升性能）
+            // pickPrimitive: false,
+        });
+        uc_arrChange(this.options, opt);
+    }
+    /**示例图源所有配置（配合相机变化geometry） */
+    private options: OptPrimitiveImage2D[] = [];
+
+    /**添加实体到此类 */
+    public addInstance(opt: OptPrimitiveImage2D[]) {
+        const { geometryInstances, options } = this;
+        uc_arrChange(options, opt);
+        const instances = opt.map(e => PrimitiveImage2D.createGeometryInstance(e))
+        if (Array.isArray(geometryInstances)) uc_arrChange(geometryInstances, instances);
+    }
+    /**创建几何实体 */
+    private static createGeometryInstance(opt: OptPrimitiveImage2D): GeometryInstance {
+        const { positions, size = 100, id = uc_getUUID(), rotation = 0 } = opt;
+        const geometry = uc_geometryEllipse(positions, size / 2, size / 2, { stRotation: CMath.toRadians(rotation), vertexFormat: EllipsoidSurfaceAppearance.VERTEX_FORMAT, })
+        const instance = new GeometryInstance({
+            /**场景pick拾取时获得的id */
+            id,
+            geometry,
+            attributes: {
+                /**尝试通过color属性将图片定位传入 */
+                color: ColorGeometryInstanceAttribute.fromColor(Color.fromBytes(0, 0, 0, 255)),
+                // distanceDisplayCondition: new DistanceDisplayConditionGeometryInstanceAttribute(100, 500000),
+                /**报错 */
+                // distanceDisplayCondition: new DistanceDisplayCondition(100, 500000),
+                // 定义一个自定义的“进度”属性
+            },
+        });
+        return instance;
+    }
+
+}
+

package/src/primitives/index.ts

@@ -0,0 +1,9 @@
+export * from './particle';
+export * from './area';
+export * from './image-2d';
+
+
+/**Primitive(基元):轻量级图形对象，表示几何体和材质的组合。是Cesium底层渲染单元，用于高效地绘制大规模的图形。使用Primitive，你可以直接控制几何体的位置、旋转、缩放等属性。Primitive通常用于绘制地形、模型、点云等图形，以及自定义的几何形状。
+ * Primitive用于表示简单的图形对象，侧重于几何体和渲染
+ * 创建方式更接近渲染引擎底层，需要初始化很多对象，比如外观(Appearance)、几何形状(Geometry)等，使用相对繁琐
+ */

package/src/primitives/instance/instance.ts

@@ -0,0 +1,58 @@
+import { Cartesian3, GeometryInstance, Matrix3, Matrix4, Quaternion, Transforms } from "cesium";
+import { Transform } from "stream";
+import { CMath } from "../../utils";
+/**Instance(实例):是Cesium中用于高效绘制大量相似几何体的概念。Instance允许你使用共享的几何体定义，并通过单独的变换矩阵来实例化多个对象。通过使用Instance，可以显著减少内存占用和绘制调用的开销。Instance通常用于绘制大规模的点云、树木、草地等类型的图形。*/
+
+
+/**将几何体实例化并返回该几何实例 */
+function instanceGeometry(options: OptInstanceGeometry) {
+    const { id = '', geometry = '', modelMatrix, attributes, lnglat, size, rotation } = options;
+    const rotationAngle = -CMath.toRadians(rotation);   // 顺时针30°（负弧度）
+    const targetPos = Cartesian3.fromDegrees(lnglat[0], lnglat[1]), originalPos = Cartesian3.fromDegrees(117.78286848, 38.94981791);
+    // 2. 计算平移偏移量（目标位置 - 初始位置）
+    const offset = Cartesian3.subtract(
+        targetPos,
+        originalPos,
+        new Cartesian3() // 复用对象优化性能
+    );
+    // 3. 构建缩放矩阵（XYZ等比缩放）[此缩放矩阵是个错误的缩放]
+    const scaleRatio = size / 5000;
+    const scaleMatrix = Matrix4.fromScale(
+        new Cartesian3(scaleRatio, scaleRatio, 1)
+    );
+    // 4. 构建旋转矩阵（绕Z轴顺时针旋转30°，正北朝向旋转）
+    const rotationQuaternion = Quaternion.fromAxisAngle(
+        Cartesian3.UNIT_Z, // 旋转轴：Z轴（水平旋转）
+        rotationAngle
+    );
+    const rotationMatrix3 = Matrix3.fromQuaternion(rotationQuaternion);
+    const rotationMatrix4 = Matrix4.fromRotation(rotationMatrix3);
+    // 5. 构建平移矩阵（基于偏移量）
+    const translationMatrix = Matrix4.fromTranslation(offset);
+
+    // 6. 组合最终变换矩阵（核心：先缩放→再旋转→最后平移）
+    // 步骤1：组合缩放+旋转矩阵
+    const scaleRotateMatrix = Matrix4.multiply(
+        rotationMatrix4,
+        scaleMatrix,
+        new Matrix4()
+    );
+    // 步骤2：叠加平移矩阵
+    const finalMatrix =Matrix4.multiply(
+        translationMatrix,
+        scaleRotateMatrix,
+        new Matrix4()
+    );
+
+    return new GeometryInstance({
+        id,
+        geometry: geometry,
+        modelMatrix: scaleMatrix,
+
+    })
+}
+
+
+export {
+    instanceGeometry as uc_instanceGeometry
+}

package/src/primitives/material/image2d.ts

@@ -0,0 +1,25 @@
+import { Material } from "cesium";
+import FSImage from '../shaders/imageFS.glsl';
+import gsap from "gsap";
+/**fabric方式自定义着色器添加2D的图片采用 */
+export class MaterialImage2D extends Material {
+    constructor(url) {
+        super({
+            fabric: {
+                /**采用着色器不能使用type */
+                // type: "Image",
+                uniforms: {
+                    image: url,
+                    uTime: 0,
+                    
+                },
+                /**为了避免#define GLSLIFY 1导致的开发异常 */
+                source: `
+                ${FSImage}
+                `
+            }
+        });
+        gsap.to(this.uniforms, { uTime: 1, duration: 2, repeat: -1, ease: 'linear' })
+    }
+
+}

package/src/primitives/material/index.ts

@@ -0,0 +1,8 @@
+/**
+ * 基础材质类型查阅 API :    Material
+ * 示例:    Image类型 :Material.fromType('Image', {image: url,repeat: new Cartesian2(1.0, 1.0),})
+ * 本文件夹主要采用fabric自定义着色器模式实现对基础材质的封装
+ * https://cesium.com/downloads/cesiumjs/releases/b28/Documentation/czm_material.html?classFilter=&show=glsl
+ */
+export * from './image2d';
+export * from './ship2d';

package/src/primitives/material/ship2d.ts

@@ -0,0 +1,55 @@
+import { Material } from "cesium";
+import { FrameBacks } from "../../core";
+/**fabric方式自定义着色器添加2D的图片采用 */
+export class MaterialShip2D extends Material {
+    constructor(url) {
+        super({
+            fabric: {
+                /**采用着色器不能使用type */
+                // type: "Image",
+                uniforms: {
+                    image1: "/Assets/images/icon_small_type_EA.png",
+                    image2: "/Assets/images/icon_small_type_EB.png",
+                    image3: "/Assets/images/icon_small_type_EC.png",
+                    image4: "/Assets/images/icon_small_type_ED.png",
+                    image5: "/Assets/images/icon_small_type_EE.png",
+                    image6: "/Assets/images/icon_small_type_EF.png",
+                    image7: "/Assets/images/icon_small_type_EG.png",
+                    image8: "/Assets/images/icon_small_type_EH.png",
+                    uTime: 0
+                },
+                source: `
+                czm_material czm_getMaterial(czm_materialInput materialInput)
+                {
+                  // 生成默认的基础材质
+                  czm_material material = czm_getDefaultMaterial(materialInput);
+                  //获取uv
+                  vec2 st = materialInput.st;vec4 colorImage = vec4(1.0,1.0,1.0,1.0);
+                  float shipType = 2.0;
+                  //czm_batchTable_shipType;
+                  if (shipType == 1.0) { // cargo
+                    colorImage =  texture(image1, vec2( st.s, st.t));
+                  } else if (shipType == 2.0) { // tanker
+                    colorImage =  texture(image2, vec2( st.s, st.t));
+                  } else if (shipType == 3.0) { // passenger
+                    colorImage =  texture(image3, vec2( st.s, st.t));
+                  } else if (shipType == 4.0) { // fishing
+                    colorImage =  texture(image4, vec2( st.s, st.t));
+                  }
+                  material.alpha = colorImage.a;
+                  material.diffuse = colorImage.rgb;
+                  return material;
+                }
+                `
+            }
+        });
+        FrameBacks.push({
+            target: this.uniforms,
+            uTime: 1,
+            duration: 2,
+            repeat: -1,
+            ease: 'none'
+        })
+    }
+
+}

package/src/primitives/particle.ts

@@ -0,0 +1,47 @@
+import { Cartesian2, Cartesian3, CircleEmitter, Color, Entity, JulianDate, Matrix4, ParticleSystem, Primitive } from "cesium";
+/**粒子 */
+export class PrimityParticle extends ParticleSystem {
+    constructor() {
+        const box = new Entity({
+            name: 'box',
+            position: Cartesian3.fromDegrees(113.3191, 23.109, 250),
+            box: {
+                dimensions: new Cartesian3(100, 100, 500),
+                material: Color.RED.withAlpha(0.5),
+            }
+        })
+        super({
+            //粒子图片
+            image: '/Assets/particle/smoke.png',
+            //粒子图像大小
+            imageSize: new Cartesian2(20, 20),
+            //开始时粒子大小
+            startScale: 1.0,
+            //结束时粒子大小
+            endScale: 5.0,
+            //粒子速度
+            speed: 5.0,
+            /** */
+
+            //粒子速度变化范围
+            // minimumSpeed: 5.0,
+            // maximumSpeed: 6.0,
+            //发射器
+            emitter: new CircleEmitter(20.0),
+            //粒子发射速率 每秒发射粒子数
+            emissionRate: 30.0,
+            //粒子生命周期
+            lifetime: 10.0,
+            //粒子生命周期变化范围
+            // minimumParticleLife: 5.0,
+            // maximumParticleLife: 10.0,
+            // emitterModelMatrix: box.computeModelMatrix(viewer.clock.currentTime, new Matrix4()),
+            //发射器位置
+            modelMatrix: box.computeModelMatrix(new JulianDate(), new Matrix4()),
+            //粒子颜色
+            startColor: Color.BLUE.withAlpha(1.0),
+            //结束颜色
+            endColor: Color.BLUE.withAlpha(0.9),
+        })
+    }
+}

package/src/primitives/shaders/EllipsoidSurfaceAppearanceFS.glsl

@@ -0,0 +1,31 @@
+in vec3 v_positionMC;
+in vec3 v_positionEC;
+in vec2 v_st;
+in vec4 v_color;
+void main()
+{
+    czm_materialInput materialInput;
+
+    vec3 normalEC = normalize(czm_normal3D * czm_geodeticSurfaceNormal(v_positionMC, vec3(0.0), vec3(1.0)));
+#ifdef FACE_FORWARD
+    normalEC = faceforward(normalEC, vec3(0.0, 0.0, 1.0), -normalEC);
+#endif
+
+    materialInput.s = v_st.s;
+    materialInput.st = v_st;
+    materialInput.str = vec3(v_st, 0.0);
+
+    // Convert tangent space material normal to eye space
+    materialInput.normalEC = normalEC;
+    materialInput.tangentToEyeMatrix = czm_eastNorthUpToEyeCoordinates(v_positionMC, materialInput.normalEC);
+
+    // Convert view vector to world space
+    vec3 positionToEyeEC = -v_positionEC;
+    materialInput.positionToEyeEC = positionToEyeEC;
+    czm_material material = czm_getMaterial(materialInput);
+#ifdef FLAT
+    out_FragColor = vec4(material.diffuse + material.emission, material.alpha);
+#else
+    out_FragColor = czm_phong(normalize(positionToEyeEC), material, czm_lightDirectionEC);
+#endif
+}

package/src/primitives/shaders/EllipsoidSurfaceAppearanceVS.glsl

@@ -0,0 +1,19 @@
+in vec3 position3DHigh;
+in vec3 position3DLow;
+in vec2 st;
+in float batchId;
+in vec4 color;
+out vec3 v_positionMC;
+out vec3 v_positionEC;
+out vec2 v_st;
+out vec4 v_color;
+void main()
+{
+    vec4 p = czm_computePosition();
+
+    v_positionMC = position3DHigh + position3DLow;           // position in model coordinates
+    v_positionEC = (czm_modelViewRelativeToEye * p).xyz;     // position in eye coordinates
+    v_st = st;
+    v_color = color;
+    gl_Position = czm_modelViewProjectionRelativeToEye * p;
+}

package/src/primitives/shaders/imageFS.glsl

@@ -0,0 +1,22 @@
+//非常简单的图片显示
+czm_material czm_getMaterial(czm_materialInput materialInput)
+{
+  // 生成默认的基础材质
+  czm_material material = czm_getDefaultMaterial(materialInput);
+  //获取uv
+  vec2 st = materialInput.st;
+  //获取相机到此实例的距离
+  float distance = length(materialInput.positionToEyeEC);
+  //距离越远，此实例就全覆盖[500000]
+  // if (distance > 500000.0) {
+  //   //如果距离大于50000，则不显示
+  //   material.alpha = 0.0;
+  //   return material;
+  // }
+  //如果距离小于50000，则缩放再显示
+  //根据uv获取颜色
+  vec4 colorImage = texture(image, vec2( st.s, st.t));
+  material.alpha = colorImage.a;
+  material.diffuse = colorImage.rgb;
+  return material;
+}