feat(shared): ✨ added custom material VcLineTrail

Author: zouyaoji

CHANGELOG.en-US.md

@@ -8,30 +8,30 @@ _2024-02-29_
 
 - Added formatting functions to the `vc-measurements` component for measurement results. `distanceFormatter`, `areaFormatter`, `angleFormatter`.
 - Adapt for compatibility with dc-sdk version 3.x.
+- Added custom material `VcLineTrail`.
 
 #### Bug fixes
 
 - Fixed the issue that parameter configuration of areaMeasurementOpts in the vc-measurements component, setting both showAngleLabel and showDistanceLabel to false, results in an error.[#518](https://github.com/zouyaoji/vue-cesium/issues/518)
 - Fixed the issue that Cesium.VERSION being undefined, causing an error.
 
-
 ### 3.2.5
 
 _2023-12-27_
 
 #### Bug fixes
 
-  - The browser crash issue occurs when using `ref` or `reactive` to wrap the `hierarchy` prop in the `vc-graphics-polygon` component.
-  - In native Cesium, there is an error when loading SuperMap iServer map services using `vc-provider-imagery-supermap`.
-  - Fixed the issue of consecutive mouse clicks not taking effect in the `vc-navigation-sm` component. **[Removed the functionality of double-clicking the outer dial to realign with the north direction]**
+- The browser crash issue occurs when using `ref` or `reactive` to wrap the `hierarchy` prop in the `vc-graphics-polygon` component.
+- In native Cesium, there is an error when loading SuperMap iServer map services using `vc-provider-imagery-supermap`.
+- Fixed the issue of consecutive mouse clicks not taking effect in the `vc-navigation-sm` component. **[Removed the functionality of double-clicking the outer dial to realign with the north direction]**
 
 ### 3.2.4
 
 _2023-10-23_
 
 #### Bug fixes
 
-  - The npm release for version 3.2.3 has an error. 
+- The npm release for version 3.2.3 has an error.
 
 ### 3.2.3
 

CHANGELOG.zh-CN.md

@@ -8,6 +8,7 @@ _2024-02-29_
 
 - `vc-measurements` 组件为量算结果添加格式化函数。`distanceFormatter`、`areaFormatter`、`angleFormatter`。
 - 适配 `dc-sdk` 3.x 版本。
+- 添加 `VcLineTrail` 自定义材质。
 
 #### Bug 修复
 

packages/shared/extends/materials/MaterialExtend.ts

@@ -3,11 +3,11 @@
  * @Date: 2023-08-18 00:56:13
  * @Description: Do not edit
  * @LastEditors: zouyaoji 370681295@qq.com
- * @LastEditTime: 2023-12-06 15:54:24
+ * @LastEditTime: 2024-02-29 00:41:04
  * @FilePath: \vue-cesium\packages\shared\extends\materials\MaterialExtend.ts
  */
 
-import { VcCircleWaveMaterial, VcLineFlowMaterial } from '@vue-cesium/shared/shaders/materials'
+import { VcCircleWaveMaterial, VcLineFlowMaterial, VcLineTrailMaterial } from '@vue-cesium/shared/shaders/materials'
 
 let isExtended = false
 export default class MaterialExtend {
@@ -19,12 +19,14 @@ export default class MaterialExtend {
     const { Material, Color, Cartesian2 } = Cesium
     const webgl2 = viewer.scene.context?.webgl2
 
-    let shaderSourceTextVcLine = VcLineFlowMaterial
+    let shaderSourceTextVcLineFlow = VcLineFlowMaterial
     let shaderSourceTextVcCircle = VcCircleWaveMaterial
+    let shaderSourceTextVcLineTrail = VcLineTrailMaterial
 
     if (!webgl2) {
-      shaderSourceTextVcLine = shaderSourceTextVcLine.replace(/texture\(/g, 'texture2D(')
+      shaderSourceTextVcLineFlow = shaderSourceTextVcLineFlow.replace(/texture\(/g, 'texture2D(')
       shaderSourceTextVcCircle = shaderSourceTextVcCircle.replace(/texture\(/g, 'texture2D(')
+      shaderSourceTextVcLineTrail = shaderSourceTextVcLineTrail.replace(/texture\(/g, 'texture2D(')
     }
 
     /**
@@ -71,7 +73,30 @@ export default class MaterialExtend {
           color2: new Color(1, 1, 1),
           globalAlpha: 1
         },
-        source: shaderSourceTextVcLine
+        source: shaderSourceTextVcLineFlow
+      },
+      translucent() {
+        return true
+      }
+    })
+
+    /**
+     * Gets the name of the VcLineTrail material.
+     * @type {string}
+     * @readonly
+     */
+    Material['VcLineTrail'] = 'VcLineTrail'
+    Cesium.Material['_materialCache'].addMaterial(Material['VcLineTrail'], {
+      fabric: {
+        type: Material['VcLineTrail'],
+        uniforms: {
+          image: Material.DefaultImageId,
+          color: new Color(1, 0, 0, 1),
+          repeat: new Cartesian2(1, 1),
+          time: 0,
+          axisY: false
+        },
+        source: shaderSourceTextVcLineTrail
       },
       translucent() {
         return true

packages/shared/extends/materials/VcLineTrailMaterialProperty.ts

@@ -0,0 +1,68 @@
+/*
+ * @Author: zouyaoji@https://github.com/zouyaoji
+ * @Date: 2023-08-17 23:55:24
+ * @Description: Do not edit
+ * @LastEditors: zouyaoji 370681295@qq.com
+ * @LastEditTime: 2024-02-29 00:43:57
+ * @FilePath: \vue-cesium\packages\shared\extends\materials\VcLineTrailMaterialProperty.ts
+ */
+import { getCesiumColor, getCesiumValue } from '@vue-cesium/utils/util'
+import VcBaseMaterialProperty from './VcBaseMaterialProperty'
+
+export default class VcLineTrailMaterialProperty extends VcBaseMaterialProperty {
+  image: string
+  color: Cesium.Color
+  axisY: boolean
+  time: number
+  duration: number
+  repeat: Cesium.Cartesian2
+  loop: boolean
+  lastTime: number
+  _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, 0, 0, 1)
+    this.axisY = options.axisY ?? false
+    this.time = options.time ?? 0
+    this.repeat = options.repeat ?? new Cartesian2(1, 1)
+    this.loop = options.loop ?? true
+    this.duration = options.duration ?? 3
+    this._time = (new Date()).getTime()
+  }
+
+  getType(value) {
+    return 'VcLineTrail'
+  }
+
+  getValue(time: Cesium.JulianDate, result?): VcLineTrailMaterialProperty {
+    const { Color, Cartesian2, defined } = Cesium
+    !defined(result) && (result = {})
+
+    if (this.lastTime >= 0.99 && !this.loop) {
+      return 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.time = (((new Date()).getTime() - this._time) % this.duration) / this.duration
+    this.lastTime = result.time
+    return result as VcLineTrailMaterialProperty
+  }
+
+  equals(other: VcLineTrailMaterialProperty) {
+    const reData =
+      this === other ||
+      (other instanceof VcLineTrailMaterialProperty &&
+        Cesium.Property['equals'](this.color, other.color) &&
+        Cesium.Property['equals'](this.repeat, other.repeat) &&
+        this.image === other.image &&
+        this.axisY === other.axisY &&
+        this.duration === other.duration)
+    return reData
+  }
+}

packages/shared/extends/materials/index.ts

@@ -9,5 +9,6 @@
 import MaterialExtend from './MaterialExtend'
 import VcCircleWaveMaterialProperty from './VcCircleWaveMaterialProperty'
 import VcLineFlowMaterialProperty from './VcLineFlowMaterialProperty'
+import VcLineTrailMaterialProperty from './VcLineTrailMaterialProperty'
 
-export { MaterialExtend, VcCircleWaveMaterialProperty, VcLineFlowMaterialProperty }
+export { MaterialExtend, VcCircleWaveMaterialProperty, VcLineFlowMaterialProperty, VcLineTrailMaterialProperty }

packages/shared/shaders/materials/VcLineTrailMaterial.ts

@@ -0,0 +1,19 @@
+/*
+ * @Author: zouyaoji@https://github.com/zouyaoji
+ * @Date: 2023-08-17 00:10:56
+ * @Description: Do not edit
+ * @LastEditors: zouyaoji 370681295@qq.com
+ * @LastEditTime: 2024-02-29 00:35:07
+ * @FilePath: \vue-cesium\packages\shared\shaders\materials\VcLineTrailMaterial.ts
+ */
+export default `
+czm_material czm_getMaterial(czm_materialInput materialInput)
+{
+  czm_material material = czm_getDefaultMaterial(materialInput);
+  vec2 st = materialInput.st;
+  vec4 colorImage = texture(image, vec2(fract(st.s - time), st.t));
+  material.alpha = colorImage.a * color.a;
+  material.diffuse = (colorImage.rgb+color.rgb)/2.0;
+  return material;
+}
+`

packages/shared/shaders/materials/index.ts

@@ -1,4 +1,5 @@
 import VcCircleWaveMaterial from './VcCircleWaveMaterial'
 import VcLineFlowMaterial from './VcLineFlowMaterial'
+import VcLineTrailMaterial from './VcLineTrailMaterial'
 
-export { VcCircleWaveMaterial, VcLineFlowMaterial }
+export { VcCircleWaveMaterial, VcLineFlowMaterial, VcLineTrailMaterial }

packages/utils/cesium-helpers.ts

@@ -50,7 +50,7 @@ import type {
 } from './types'
 import { compare, CompareOperator } from 'compare-versions'
 import { hasOwn, isFunction, isArray, isString, isPlainObject, isEmptyObj, getObjClassName, isUndefined } from './util'
-import { VcCircleWaveMaterialProperty, VcLineFlowMaterialProperty } from '@vue-cesium/shared/extends/materials'
+import { VcCircleWaveMaterialProperty, VcLineFlowMaterialProperty, VcLineTrailMaterialProperty } from '@vue-cesium/shared/extends/materials'
 import { cloneDeep } from 'lodash'
 
 /**
@@ -446,7 +446,8 @@ export function makeMaterialProperty(val: VcMaterialProperty, isConstant = false
     val instanceof PolylineOutlineMaterialProperty ||
     val instanceof StripeMaterialProperty ||
     val instanceof VcCircleWaveMaterialProperty ||
-    val instanceof VcLineFlowMaterialProperty
+    val instanceof VcLineFlowMaterialProperty ||
+    val instanceof VcLineTrailMaterialProperty
     // getObjClassName(val as any).indexOf('MaterialProperty') !== -1
   ) {
     return val as CesiumMaterialProperty
@@ -543,6 +544,16 @@ export function makeMaterialProperty(val: VcMaterialProperty, isConstant = false
           time: defaultValue(value.fabric.uniforms.time, -1)
         })
       }
+      case 'VcLineTrail': {
+        return new VcLineTrailMaterialProperty({
+          image: defaultValue(value.fabric.uniforms.image, Material.DefaultImageId),
+          color: makeColor(defaultValue(value.fabric.uniforms.color, new Color(1, 0, 0, 1))),
+          repeat: makeCartesian2(defaultValue(value.fabric.uniforms.repeat, new Cartesian2(1, 1))),
+          axisY: defaultValue(value.fabric.uniforms.axisY, false),
+          duration: defaultValue(value.fabric.uniforms.duration, 3000),
+          loop: defaultValue(value.fabric.uniforms.loop, true)
+        })
+      }
     }
   }
 

packages/utils/types.ts

@@ -87,6 +87,7 @@ interface MaterialOption {
       mixt?: boolean
       speed?: number
       time?: number
+      loop?: boolean
     }
   }
   strict?: boolean

website/docs/zh-CN/analyses/vc-measurements.md

@@ -160,8 +160,8 @@ ctrl + 右键取消绘制。
               [108.95499, 34.21761]
             ]
           ],
-          showAngleLabel: false,
-          showDistanceLabel: false,
+          // showAngleLabel: false,
+          // showDistanceLabel: false,
           areaFormatter: (value, defaultUnits, defaultLocale, defaultDecimals) => {
             return `${(value * 0.0015).toFixed(4)} 亩`
           }

website/docs/zh-CN/graphics/vc-graphics-wall.md

@@ -38,8 +38,8 @@
         :positions="[[-115,50],[-112,50],[-107.5,50],[-105,50],[-102.5,50],[-100,50],[-97.5,50],[-95,50],[-92.5,50],[-90,50]]"
         :material="{
           fabric: {
-            type: 'VcLineFlow',
-            uniforms: { image: 'https://zouyaoji.top/vue-cesium/images/textures/arrow.png', color: 'yellow', repeat: { x: 30, y: 1 }, speed: 10 }
+            type: 'VcLineTrail',
+            uniforms: { image: 'https://zouyaoji.top/vue-cesium/images/textures/colors.png',  }
           }
         }"
         outlineColor="black"