feat(shared): ✨ added VcLineFlow material

closed #423

packages/composables/private/use-vc-extension.ts

@@ -1,14 +1,14 @@
 /*
  * @Author: zouyaoji@https://github.com/zouyaoji
  * @Date: 2022-04-25 16:05:16
- * @LastEditTime: 2022-05-13 09:57:29
- * @LastEditors: zouyaoji
+ * @LastEditTime: 2023-08-18 01:08:33
+ * @LastEditors: zouyaoji [email protected]
  * @Description:
- * @FilePath: \vue-cesium@next\packages\composables\private\use-vc-extension.ts
+ * @FilePath: \vue-cesium\packages\composables\private\use-vc-extension.ts
  */
-import { RectangleExtend, ShadowMapShaderExtend } from '@vue-cesium/shared'
+import { MaterialExtend, RectangleExtend, ShadowMapShaderExtend } from '@vue-cesium/shared'
 
-const vcExtends = [RectangleExtend, ShadowMapShaderExtend]
+const vcExtends = [RectangleExtend, ShadowMapShaderExtend, MaterialExtend]
 
 export default function useVcExtension() {
   const invokeExtensions = (viewer: Cesium.Viewer) => {

packages/shared/extends/index.ts

@@ -1,11 +1,12 @@
 /*
  * @Author: zouyaoji@https://github.com/zouyaoji
  * @Date: 2022-04-15 14:57:43
- * @LastEditTime: 2022-04-16 20:48:37
- * @LastEditors: zouyaoji
+ * @LastEditTime: 2023-08-18 01:08:23
+ * @LastEditors: zouyaoji [email protected]
  * @Description:
- * @FilePath: \vue-cesium@next\packages\shared\extends\index.ts
+ * @FilePath: \vue-cesium\packages\shared\extends\index.ts
  */
 
 export * from './core'
 export * from './scene'
+export * from './materials'

packages/shared/extends/materials/MaterialExtend.ts

@@ -0,0 +1,82 @@
+/*
+ * @Author: zouyaoji@https://github.com/zouyaoji
+ * @Date: 2023-08-18 00:56:13
+ * @Description: Do not edit
+ * @LastEditors: zouyaoji [email protected]
+ * @LastEditTime: 2023-08-18 01:15:38
+ * @FilePath: \vue-cesium\packages\shared\extends\materials\MaterialExtend.ts
+ */
+
+import { VcCircleWaveMaterial, VcLineFlowMaterial } from '@vue-cesium/shared/shaders/materials'
+
+let isExtended = false
+export default class MaterialExtend {
+  static extend(viewer?: Cesium.Viewer) {
+    if (isExtended) {
+      return
+    }
+
+    const { Material, Color, Cartesian2 } = Cesium
+
+    /**
+     * Gets the name of the VcCircleWave material.
+     * @type {string}
+     * @readonly
+     */
+    Material['VcCircleWave'] = 'VcCircleWave'
+    Cesium.Material['_materialCache'].addMaterial(Material['VcCircleWave'], {
+      fabric: {
+        type: Material['VcCircleWave'],
+        uniforms: {
+          color: new Color(1, 0, 0, 1),
+          time: 1,
+          count: 1,
+          gradient: 0.1
+        },
+        source: VcCircleWaveMaterial
+      },
+      translucent() {
+        return true
+      }
+    })
+
+    /**
+     * Gets the name of the VcLineFlow material.
+     * @type {string}
+     * @readonly
+     */
+    Material['VcLineFlow'] = 'VcLineFlow'
+    Cesium.Material['_materialCache'].addMaterial(Material['VcLineFlow'], {
+      fabric: {
+        type: Material['VcLineFlow'],
+        uniforms: {
+          image: Material.DefaultImageId,
+          color: new Color(1, 1, 1, 1),
+          repeat: new Cartesian2(1, 1),
+          axisY: false,
+          mixt: false,
+          speed: 10,
+          time: -1,
+          hasImage2: false,
+          image2: Material.DefaultImageId,
+          color2: new Color(1, 1, 1),
+          globalAlpha: 1
+        },
+        source: VcLineFlowMaterial
+      },
+      translucent() {
+        return true
+      }
+    })
+
+    isExtended = true
+  }
+
+  static revoke(viewer?: Cesium.Viewer) {
+    if (!isExtended) {
+      return
+    }
+
+    isExtended = false
+  }
+}

packages/shared/extends/materials/VcBaseMaterialProperty.ts

@@ -0,0 +1,36 @@
+/*
+ * @Author: zouyaoji@https://github.com/zouyaoji
+ * @Date: 2023-08-17 00:20:37
+ * @Description: Do not edit
+ * @LastEditors: zouyaoji [email protected]
+ * @LastEditTime: 2023-08-17 00:27:14
+ * @FilePath: \vue-cesium\packages\shared\materials\VcBaseMaterialProperty.ts
+ */
+export default class BaseMaterialProperty {
+  options: any
+  _definitionChanged: Cesium.Event<(...args: any[]) => void>
+  constructor(options = {}) {
+    this.options = options
+    this._definitionChanged = new Cesium.Event()
+  }
+
+  get isConstant() {
+    return true
+  }
+
+  get definitionChanged() {
+    return this._definitionChanged
+  }
+
+  getType(parameter) {
+    return null
+  }
+
+  getValue(context, defaultValue = {}) {
+    return defaultValue
+  }
+
+  equals(other) {
+    return this === other
+  }
+}

packages/shared/materials/VcCircleWaveMaterialProperty.ts → packages/shared/extends/materials/VcCircleWaveMaterialProperty.ts

@@ -1,19 +1,22 @@
+import VcBaseMaterialProperty from './VcBaseMaterialProperty'
+
 /*
  * @Author: zouyaoji@https://github.com/zouyaoji
  * @Date: 2023-05-23 13:14:12
  * @Description: Do not edit
  * @LastEditors: zouyaoji [email protected]
- * @LastEditTime: 2023-06-14 17:47:05
- * @FilePath: \vue-cesium@next\packages\shared\materials\VcCircleWaveMaterialProperty.ts
+ * @LastEditTime: 2023-08-18 01:11:19
+ * @FilePath: \vue-cesium\packages\shared\extends\materials\VcCircleWaveMaterialProperty.ts
  */
-export default class VcCircleWaveMaterialProperty {
+export default class VcCircleWaveMaterialProperty extends VcBaseMaterialProperty {
   _definitionChanged: Cesium.Event<(...args: any[]) => void>
   _color: Cesium.ConstantProperty
   _duration: number
   _count: number
   _gradient: number
   _time: number
   constructor(options) {
+    super(options)
     const { Event, defaultValue } = Cesium
 
     if (!Object.getOwnPropertyDescriptor(VcCircleWaveMaterialProperty.prototype, 'color')) {
@@ -37,8 +40,6 @@ export default class VcCircleWaveMaterialProperty {
       this._gradient = 1
     }
     this._time = new Date().getTime()
-
-    this._init()
   }
 
   get isConstant() {
@@ -107,57 +108,4 @@ export default class VcCircleWaveMaterialProperty {
     const reData = this === other || (other instanceof VcCircleWaveMaterialProperty && Cesium.Property['equals'](this._color, other._color))
     return reData
   }
-
-  _init() {
-    const CircleWaveMaterialType = 'VcCircleWave'
-    const CircleWaveSource = `
-      czm_material czm_getMaterial(czm_materialInput materialInput) {
-      czm_material material = czm_getDefaultMaterial(materialInput);
-      material.diffuse = 1.5 * color.rgb;
-      vec2 st = materialInput.st;
-      vec3 str = materialInput.str;
-      float dis = distance(st, vec2(0.5, 0.5));
-      float per = fract(time);
-      if (abs(str.z) > 0.001) {
-        discard;
-      }
-      if (dis > 0.5) {
-        discard;
-      } else {
-        float perDis = 0.5 / count;
-        float disNum;
-        float bl = .0;
-        for (int i = 0; i <= 9; i++) {
-          if (float(i) <= count) {
-            disNum = perDis *float(i) - dis + per / count;
-            if (disNum > 0.0) {
-              if (disNum < perDis) {
-                bl = 1.0 - disNum / perDis;
-              } else if(disNum - perDis < perDis) {
-                bl = 1.0 - abs(1.0 - disNum / perDis);
-              }
-              material.alpha = pow(bl, gradient);
-            }
-          }
-        }
-      }
-      return material;
-    }`
-
-    Cesium.Material['_materialCache'].addMaterial(CircleWaveMaterialType, {
-      fabric: {
-        type: CircleWaveMaterialType,
-        uniforms: {
-          color: new Cesium.Color(1, 0, 0, 1),
-          time: 1,
-          count: 1,
-          gradient: 0.1
-        },
-        source: CircleWaveSource
-      },
-      translucent() {
-        return true
-      }
-    })
-  }
 }

packages/shared/extends/materials/VcLineFlowMaterialProperty.ts

@@ -0,0 +1,86 @@
+/*
+ * @Author: zouyaoji@https://github.com/zouyaoji
+ * @Date: 2023-08-17 23:55:24
+ * @Description: Do not edit
+ * @LastEditors: zouyaoji [email protected]
+ * @LastEditTime: 2023-08-18 01:26:43
+ * @FilePath: \vue-cesium\packages\shared\extends\materials\VcLineFlowMaterialProperty.ts
+ */
+import { getCesiumColor, getCesiumValue } from '@vue-cesium/utils/cesium-helpers'
+import VcBaseMaterialProperty from './VcBaseMaterialProperty'
+
+export default class VcLineFlowMaterialProperty extends VcBaseMaterialProperty {
+  image: string
+  color: Cesium.Color
+  axisY: boolean
+  mixt: boolean
+  speed: number
+  duration: number
+  repeat: Cesium.Cartesian2
+  image2: string
+  color2: Cesium.Color
+  hasImage2: boolean
+  globalAlpha: boolean
+  _time: number
+  constructor(options: any = {}) {
+    super(options)
+    const { Color, Cartesian2, defined } = Cesium
+    this.image = options.image ?? options.url
+    this.color = options.color ?? new Color(1, 1, 1, 0)
+    this.axisY = options.axisY ?? false
+    this.mixt = options.mixt ?? false
+    this.speed = options.speed ?? 10
+    this.duration = options.duration
+    this.repeat = options.repeat ?? new Cartesian2(1, 1)
+    this.image2 = options.image2 ?? options.bgUrl
+    this.color2 = options.color2 ?? options.bgColor ?? new Color(1, 1, 1, 0)
+    this.hasImage2 = defined(this.image2)
+    this.globalAlpha = options.globalAlpha ?? true
+  }
+
+  getType(value) {
+    return 'VcLineFlow'
+  }
+
+  getValue(time: Cesium.JulianDate, result?): VcLineFlowMaterialProperty {
+    const { Color, Cartesian2, defined } = Cesium
+    !defined(result) && (result = {})
+    result.image = this.image
+    result.color = getCesiumColor(this.color, new Color(1, 1, 1, 0), time)
+    result.repeat = getCesiumValue(this.repeat, Cartesian2, time)
+    result.axisY = this.axisY
+    result.mixt = this.mixt
+    result.speed = getCesiumValue(this.speed, Number, time)
+    if (this.duration) {
+      if (this._time === undefined) {
+        this._time = new Date().getTime()
+        result.time = (new Date().getTime() - this._time) / (this.duration * 1000)
+      }
+    } else {
+      result.time = -1
+    }
+
+    result.hasImage2 = this.hasImage2
+    result.image2 = this.image2
+    result.color2 = getCesiumColor(this.color2, new Color(1, 1, 1, 0), time)
+    result.globalAlpha = this.globalAlpha
+
+    return result as VcLineFlowMaterialProperty
+  }
+
+  equals(other: VcLineFlowMaterialProperty) {
+    const reData =
+      this === other ||
+      (other instanceof VcLineFlowMaterialProperty &&
+        Cesium.Property['equals'](this.color, other.color) &&
+        Cesium.Property['equals'](this.repeat, other.repeat) &&
+        this.image === other.image &&
+        this.axisY === other.axisY &&
+        this.speed === other.speed &&
+        this.hasImage2 === other.hasImage2 &&
+        this.image2 === other.image2 &&
+        this.image2 === other.image2 &&
+        Cesium.Property['equals'](this.color2, other.color2))
+    return reData
+  }
+}

packages/shared/extends/materials/index.ts

@@ -0,0 +1,13 @@
+/*
+ * @Author: zouyaoji@https://github.com/zouyaoji
+ * @Date: 2023-06-12 20:29:59
+ * @Description: Do not edit
+ * @LastEditors: zouyaoji [email protected]
+ * @LastEditTime: 2023-08-18 01:09:22
+ * @FilePath: \vue-cesium\packages\shared\extends\materials\index.ts
+ */
+import MaterialExtend from './MaterialExtend'
+import VcCircleWaveMaterialProperty from './VcCircleWaveMaterialProperty'
+import VcLineFlowMaterialProperty from './VcLineFlowMaterialProperty'
+
+export { MaterialExtend, VcCircleWaveMaterialProperty, VcLineFlowMaterialProperty }

packages/shared/index.ts

@@ -1,13 +1,13 @@
 /*
  * @Author: zouyaoji@https://github.com/zouyaoji
  * @Date: 2021-06-01 18:06:23
- * @LastEditTime: 2023-04-21 11:12:21
+ * @LastEditTime: 2023-08-18 01:00:28
  * @LastEditors: zouyaoji [email protected]
  * @Description:
- * @FilePath: \vue-cesium@next\packages\shared\index.ts
+ * @FilePath: \vue-cesium\packages\shared\index.ts
  */
 export * from './src'
 export * from './extends'
 export * from './analyses'
 export * from './widgets'
-export * from './materials'
+export * from './extends/materials'