Skip to content

Commit

Permalink
feat(shared): ✨ added custom material VcLineTrail
Browse files Browse the repository at this point in the history
  • Loading branch information
zouyaoji committed Feb 29, 2024
1 parent c104d9c commit c5b302a
Show file tree
Hide file tree
Showing 13 changed files with 145 additions and 18 deletions.
10 changes: 5 additions & 5 deletions CHANGELOG.en-US.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
1 change: 1 addition & 0 deletions CHANGELOG.zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ _2024-02-29_

- `vc-measurements` 组件为量算结果添加格式化函数。`distanceFormatter``areaFormatter``angleFormatter`
- 适配 `dc-sdk` 3.x 版本。
- 添加 `VcLineTrail` 自定义材质。

#### Bug 修复

Expand Down
35 changes: 30 additions & 5 deletions packages/shared/extends/materials/MaterialExtend.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,11 @@
* @Date: 2023-08-18 00:56:13
* @Description: Do not edit
* @LastEditors: zouyaoji [email protected]
* @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 {
Expand All @@ -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(')
}

/**
Expand Down Expand Up @@ -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
Expand Down
68 changes: 68 additions & 0 deletions packages/shared/extends/materials/VcLineTrailMaterialProperty.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
/*
* @Author: zouyaoji@https://github.com/zouyaoji
* @Date: 2023-08-17 23:55:24
* @Description: Do not edit
* @LastEditors: zouyaoji [email protected]
* @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
}
}
3 changes: 2 additions & 1 deletion packages/shared/extends/materials/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 }
19 changes: 19 additions & 0 deletions packages/shared/shaders/materials/VcLineTrailMaterial.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
/*
* @Author: zouyaoji@https://github.com/zouyaoji
* @Date: 2023-08-17 00:10:56
* @Description: Do not edit
* @LastEditors: zouyaoji [email protected]
* @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;
}
`
3 changes: 2 additions & 1 deletion packages/shared/shaders/materials/index.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import VcCircleWaveMaterial from './VcCircleWaveMaterial'
import VcLineFlowMaterial from './VcLineFlowMaterial'
import VcLineTrailMaterial from './VcLineTrailMaterial'

export { VcCircleWaveMaterial, VcLineFlowMaterial }
export { VcCircleWaveMaterial, VcLineFlowMaterial, VcLineTrailMaterial }
15 changes: 13 additions & 2 deletions packages/utils/cesium-helpers.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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'

/**
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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)
})
}
}
}

Expand Down
1 change: 1 addition & 0 deletions packages/utils/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,7 @@ interface MaterialOption {
mixt?: boolean
speed?: number
time?: number
loop?: boolean
}
}
strict?: boolean
Expand Down
4 changes: 2 additions & 2 deletions website/docs/zh-CN/analyses/vc-measurements.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)}`
}
Expand Down
4 changes: 2 additions & 2 deletions website/docs/zh-CN/graphics/vc-graphics-wall.md
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
Binary file added website/public/images/textures/colors.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added website/public/images/textures/colors1.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit c5b302a

Please sign in to comment.