135 lines
4.7 KiB
JavaScript
135 lines
4.7 KiB
JavaScript
/*
|
||
* @Description: 流动线
|
||
*/
|
||
function PolylineFlowMult() {
|
||
class PolylineFlowMultMaterialProperty {
|
||
constructor(options) {
|
||
this._definitionChanged = new Cesium.Event();
|
||
this._color = undefined;
|
||
this._speed = undefined;
|
||
this.color = new Cesium.Color.fromCssColorString(options.color || "rgba(255,255,255,1)");
|
||
this.speed = options.speed || 0.1;//速度
|
||
this.lineBackAlpha = options.lineBackAlpha || 0.05;
|
||
}
|
||
|
||
get isConstant() {
|
||
return false;
|
||
}
|
||
|
||
get definitionChanged() {
|
||
return this._definitionChanged;
|
||
}
|
||
|
||
getType(time) {
|
||
return Cesium.Material.PolylineFlowMultMaterialType;
|
||
}
|
||
|
||
getValue(time, result) {
|
||
if (!Cesium.defined(result)) {
|
||
result = {};
|
||
}
|
||
|
||
result.color = Cesium.Property.getValueOrDefault(
|
||
this._color,
|
||
time,
|
||
Cesium.Color.RED,
|
||
result.color
|
||
);
|
||
result.speed = Cesium.Property.getValueOrDefault(
|
||
this._speed,
|
||
time,
|
||
10,
|
||
result.speed
|
||
);
|
||
result.lineBackAlpha = this.lineBackAlpha;
|
||
result.frameNumber = Cesium.getTimestamp();
|
||
return result;
|
||
}
|
||
|
||
equals(other) {
|
||
return (
|
||
this === other ||
|
||
(other instanceof PolylineFlowMultMaterialProperty &&
|
||
Cesium.Property.equals(this._color, other._color) &&
|
||
Cesium.Property.equals(this._speed, other.speed) &&
|
||
Cesium.Property.equals(this.lineBackAlpha, other.lineBackAlpha))
|
||
);
|
||
}
|
||
}
|
||
|
||
Object.defineProperties(PolylineFlowMultMaterialProperty.prototype, {
|
||
color: Cesium.createPropertyDescriptor("color"),
|
||
speed: Cesium.createPropertyDescriptor("speed"),
|
||
transparency: Cesium.createPropertyDescriptor("lineBackAlpha"),
|
||
});
|
||
|
||
Cesium.PolylineFlowMultMaterialProperty = PolylineFlowMultMaterialProperty;
|
||
Cesium.Material.PolylineFlowMultMaterialProperty = "PolylineFlowMultMaterialProperty";
|
||
Cesium.Material.PolylineFlowMultMaterialType = "PolylineFlowMultMaterialType";
|
||
Cesium.Material.PolylineFlowMaterialSource = `
|
||
uniform vec4 color;
|
||
uniform float speed;
|
||
uniform float lineBackAlpha;
|
||
|
||
czm_material czm_getMaterial(czm_materialInput materialInput)
|
||
{
|
||
czm_material material = czm_getDefaultMaterial(materialInput);
|
||
vec2 st = materialInput.st;
|
||
|
||
// 基础时间轴（控制主光带）
|
||
float baseTime = fract(czm_frameNumber * speed / 60.0) * 1.1;
|
||
|
||
// 高频时间轴（控制高光点）
|
||
float highlightTime = fract(czm_frameNumber * speed * 3.0 / 60.0);
|
||
float highlightSpacing = 0.3; // 高光点间隔
|
||
|
||
// 主光带透明度计算
|
||
float mainAlpha = smoothstep(baseTime-0.1, baseTime, st.s) * step(-baseTime, -st.s);
|
||
|
||
// 多高光点计算（3个周期性光斑）
|
||
float highlight1 = smoothstep(highlightTime-0.05, highlightTime, st.s) *
|
||
step(-highlightTime, -st.s) *
|
||
(1.0 - smoothstep(0.0, highlightSpacing, abs(st.s - highlightTime)));
|
||
|
||
float highlight2 = smoothstep(highlightTime+highlightSpacing-0.05,
|
||
highlightTime+highlightSpacing, st.s) *
|
||
step(-(highlightTime+highlightSpacing), -st.s) *
|
||
(1.0 - smoothstep(0.0, highlightSpacing, abs(st.s - (highlightTime+highlightSpacing))));
|
||
|
||
float highlight3 = smoothstep(highlightTime+2.0*highlightSpacing-0.05,
|
||
highlightTime+2.0*highlightSpacing, st.s) *
|
||
step(-(highlightTime+2.0*highlightSpacing), -st.s) *
|
||
(1.0 - smoothstep(0.0, highlightSpacing, abs(st.s - (highlightTime+2.0*highlightSpacing))));
|
||
|
||
// 合并效果
|
||
// material.alpha = mainAlpha * 0.7 +
|
||
// (highlight1 + highlight2 + highlight3) * 0.5 +
|
||
// lineBackAlpha;
|
||
material.alpha = (highlight1 + highlight2 + highlight3) * 0.5 +
|
||
lineBackAlpha;
|
||
material.diffuse = color.rgb; // 高光区变亮
|
||
return material;
|
||
}
|
||
`;
|
||
|
||
Cesium.Material._materialCache.addMaterial(
|
||
Cesium.Material.PolylineFlowMultMaterialType,
|
||
{
|
||
fabric: {
|
||
type: Cesium.Material.PolylineFlowMultMaterialType,
|
||
uniforms: {
|
||
color: new Cesium.Color(1.0, 1.0, 1.0, 1.0),
|
||
speed: 0.1,
|
||
lineBackAlpha: 0.05,
|
||
},
|
||
source: Cesium.Material.PolylineFlowMaterialSource,
|
||
},
|
||
translucent: function (material) {
|
||
return true;
|
||
},
|
||
}
|
||
);
|
||
}
|
||
|
||
export { PolylineFlowMult }
|