zh/sdk4.0
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

线样式（无同步间距调节）

Browse Source
This commit is contained in:
夏大胆
2025-07-07 16:21:01 +08:00
parent 484fe70e16
commit fa3325580c
8 changed files with 373 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/Obj/Materail/FlowDashedLineFlowMaterialProperty.js
View File

@ -8,8 +8,12 @@ function FlowDashedLine() {
this._color = undefined;
this._speed = undefined;
this._uType = undefined;
this._space = undefined;
this._dashSize = undefined;
this.color = new Cesium.Color.fromCssColorString(options.color || "rgba(255,255,255,1)");
this.speed = options.speed || 0.25;//速度
this.speed = options.speed != undefined ? options.speed : 1.0;//速度
this.space = options.space || 0.01;//速度
this.dashSize = options.dashSize || 0.03;//速度
this.uType = options.uType === undefined ? 1 : options.uType;//类型：0：普通流动线 1：虚化虚线
this.lineBackAlpha = options.lineBackAlpha || 0.05;
}
@ -43,6 +47,18 @@ function FlowDashedLine() {
10,
result.speed
);
result.space = Cesium.Property.getValueOrDefault(
this._space,
time,
10,
result.space
);
result.dashSize = Cesium.Property.getValueOrDefault(
this._dashSize,
time,
10,
result.dashSize
);
result.uType = Cesium.Property.getValueOrDefault(
this._uType,
time,
@ -69,6 +85,8 @@ function FlowDashedLine() {
Object.defineProperties(FlowDashedLineFlowMaterialProperty.prototype, {
color: Cesium.createPropertyDescriptor("color"),
speed: Cesium.createPropertyDescriptor("speed"),
space: Cesium.createPropertyDescriptor("space"),
dashSize: Cesium.createPropertyDescriptor("dashSize"),
uType: Cesium.createPropertyDescriptor("uType"),
transparency: Cesium.createPropertyDescriptor("lineBackAlpha"),
});
@ -89,11 +107,13 @@ function FlowDashedLine() {
// 计算流动虚线
float dashSize = 0.03;
float gapSize = 0.01;
float progress = fract(czm_frameNumber * 0.01); // 时间控制流动
// float gapSize = 0.01;
// float dashSize = dashSize;
float gapSize = space;
float progress = fract(speed * czm_frameNumber * 0.01); // 时间控制流动
float pattern = fract(st.x / (dashSize + gapSize) + progress);
float dash1 = step(0.1, pattern) - step(0.9, pattern);
float dash2 = smoothstep(0.1, 0.3, pattern) - smoothstep(0.7, 0.9, pattern);
float dash2 = smoothstep(0.0, 0.4, pattern) - smoothstep(0.6, 1.0, pattern);
float dash = (float(uType) != 1.0)?dash1:dash2;
material.alpha = dash;
material.diffuse = color.rgb;
@ -108,7 +128,9 @@ function FlowDashedLine() {
type: Cesium.Material.FlowDashedLineMaterialType,
uniforms: {
color: new Cesium.Color(1.0, 1.0, 1.0, 1.0),
speed: 0.1,
speed: 1,
space: 0.01,
dashSize: 0.03,
uType: 1,
lineBackAlpha: 0.05,
},

52
src/Obj/Materail/LineTextureMaterialProperty.js
View File

@ -7,10 +7,12 @@ function LineTexture() {
this._definitionChanged = new Cesium.Event();
this._image = undefined;
this._color = undefined;
this._imageW = undefined;
this._speed = undefined;
this._repeat = undefined;
this.image = options.image || "";
this.color = new Cesium.Color.fromCssColorString(options.color || "rgba(255,255,255,1)");
this.imageW = options.imageW || 1;
this.speed = options.speed != undefined ? options.speed : 1.0;
this.repeat = options.repeat || 1.0;
}
get isConstant() {
@ -41,11 +43,17 @@ function LineTexture() {
Cesium.Color.RED,
result.color
);
result.imageW = Cesium.Property.getValueOrDefault(
this._imageW,
result.speed = Cesium.Property.getValueOrDefault(
this._speed,
time,
1,
result.imageW
1.0,
result.speed
);
result.repeat = Cesium.Property.getValueOrDefault(
this._repeat,
time,
1.0,
result.repeat
);
return result;
}
@ -56,7 +64,8 @@ function LineTexture() {
(other instanceof LineTextureMaterialProperty &&
Cesium.Property.equals(this._image, other._image) &&
Cesium.Property.equals(this._color, other._color) &&
Cesium.Property.equals(this._imageW, other._imageW))
Cesium.Property.equals(this._imageW, other._imageW) &&
Cesium.Property.equals(this._speed, other._speed))
);
}
}
@ -64,27 +73,27 @@ function LineTexture() {
Object.defineProperties(LineTextureMaterialProperty.prototype, {
image: Cesium.createPropertyDescriptor("image"),
color: Cesium.createPropertyDescriptor("color"),
imageW: Cesium.createPropertyDescriptor("imageW"),
speed: Cesium.createPropertyDescriptor("speed"),
repeat: Cesium.createPropertyDescriptor("repeat"),
});
Cesium.LineTextureMaterialProperty = LineTextureMaterialProperty;
Cesium.Material.LineTextureMaterialProperty = "LineTextureMaterialProperty";
Cesium.Material.LineTextureMaterialType = "LineTextureMaterialType";
Cesium.Material.LineTextureMaterialSource = `
#extension GL_OES_standard_derivatives : enable
uniform vec4 color;
uniform sampler2D image;
uniform float speed;
uniform float repeat;
czm_material czm_getMaterial(czm_materialInput materialInput)
{
czm_material m = czm_getDefaultMaterial(materialInput);
vec2 st = materialInput.st * vec2(494/172, 1.0); // 横向重复两次
vec2 uv = vec2(fract(st.s + uTime*0.1), st.t);
// uv.y = mix(uv.y, 1.0-uv.y, step(0.5, fract(uTime))); // 周期性反转Y轴
vec4 tex = texture(image, uv);
m.diffuse =(tex.rgb+color.rgb)/2.0;
m.alpha = tex.a * (1.0 - fract(st.t)) * color.a; // 顶部渐隐
return m;
czm_material material = czm_getDefaultMaterial(materialInput);
vec2 st = materialInput.st;
st.s *= repeat; // 关键：通过repeat控制纹理密度
vec4 colorImage = texture2D(image, vec2(fract(st.s + speed*czm_frameNumber* 0.01), st.t));
material.alpha = colorImage.a * color.a;
material.diffuse = color.rgb;
return material;
}
`;
Cesium.Material._materialCache.addMaterial(
@ -95,7 +104,8 @@ function LineTexture() {
uniforms: {
color: new Cesium.Color(1.0, 1.0, 1.0, 1.0),
image: '',
imageW: 1,
repeat: 1.0,
speed: 1.0,
uTime: 1
},
source: Cesium.Material.LineTextureMaterialSource,

23
src/Obj/Materail/PolylineFlowMaterialProperty.js
View File

@ -7,9 +7,11 @@ function PolylineFlow() {
this._definitionChanged = new Cesium.Event();
this._color = undefined;
this._speed = undefined;
this._rotate = undefined;
this.color = new Cesium.Color.fromCssColorString(options.color || "rgba(255,255,255,1)");
this.speed = options.speed || 0.25;//速度
this.speed = options.speed != undefined ? options.speed : 1.0;//速度
this.lineBackAlpha = options.lineBackAlpha || 0.05;
this.rotate = options.rotate;
}
get isConstant() {
@ -41,6 +43,12 @@ function PolylineFlow() {
10,
result.speed
);
result.rotate = Cesium.Property.getValueOrDefault(
this._rotate,
time,
true,
result.rotate
);
result.lineBackAlpha = this.lineBackAlpha;
result.frameNumber = Cesium.getTimestamp();
return result;
@ -60,6 +68,7 @@ function PolylineFlow() {
Object.defineProperties(PolylineFlowMaterialProperty.prototype, {
color: Cesium.createPropertyDescriptor("color"),
speed: Cesium.createPropertyDescriptor("speed"),
rotate: Cesium.createPropertyDescriptor("rotate"),
transparency: Cesium.createPropertyDescriptor("lineBackAlpha"),
});
@ -78,11 +87,16 @@ function PolylineFlow() {
//获取st（uv）
vec2 st = materialInput.st;
//获取当前帧数，10秒内变化0-1
float time = fract(czm_frameNumber * speed / 60.0);
// float time = fract(czm_frameNumber * speed / 60.0);
float time = fract(abs(speed) * czm_frameNumber * 0.01);
//长度1/10
time = time * (1.0 + 0.1);
// time = time * (1.0 + 0.1);
float staticAlpha = rotate?smoothstep(0.0,1.0, 1.0-st.s) * step(-1.0,-(1.0-st.s)):smoothstep(0.0,1.0, st.s) * step(-1.0,-st.s);
//平滑过渡函数
float alpha = smoothstep(time-0.1,time,st.s) * step(-time,-st.s);
float alpha1 = smoothstep(time-0.1,time,1.0-st.s) * step(-time,- (1.0-st.s));
float alpha2 = smoothstep(time-0.1,time,st.s) * step(-time,- st.s);
float alpha =(speed== 0.0)? staticAlpha:(speed < 0.0)?alpha2:alpha1;
//光带轨迹（不会完全透明）
alpha += lineBackAlpha;
material.alpha = alpha;
@ -99,6 +113,7 @@ function PolylineFlow() {
uniforms: {
color: new Cesium.Color(1.0, 1.0, 1.0, 1.0),
speed: 0.1,
rotate: true,
lineBackAlpha: 0.05,
},
source: Cesium.Material.PolylineFlowMaterialSource,

41
src/Obj/Materail/PolylineFlowMultMaterialProperty.js
View File

@ -7,9 +7,11 @@ function PolylineFlowMult() {
this._definitionChanged = new Cesium.Event();
this._color = undefined;
this._speed = undefined;
this._rotate = undefined;
this.color = new Cesium.Color.fromCssColorString(options.color || "rgba(255,255,255,1)");
this.speed = options.speed || 0.1;//速度
this.speed = options.speed != undefined ? options.speed : 1.0;//速度
this.lineBackAlpha = options.lineBackAlpha || 0.05;
this.rotate = options.rotate;
}
get isConstant() {
@ -41,6 +43,12 @@ function PolylineFlowMult() {
10,
result.speed
);
result.rotate = Cesium.Property.getValueOrDefault(
this._rotate,
time,
true,
result.rotate
);
result.lineBackAlpha = this.lineBackAlpha;
result.frameNumber = Cesium.getTimestamp();
return result;
@ -52,6 +60,7 @@ function PolylineFlowMult() {
(other instanceof PolylineFlowMultMaterialProperty &&
Cesium.Property.equals(this._color, other._color) &&
Cesium.Property.equals(this._speed, other.speed) &&
Cesium.Property.equals(this._rotate, other.rotate) &&
Cesium.Property.equals(this.lineBackAlpha, other.lineBackAlpha))
);
}
@ -60,6 +69,7 @@ function PolylineFlowMult() {
Object.defineProperties(PolylineFlowMultMaterialProperty.prototype, {
color: Cesium.createPropertyDescriptor("color"),
speed: Cesium.createPropertyDescriptor("speed"),
rotate: Cesium.createPropertyDescriptor("rotate"),
transparency: Cesium.createPropertyDescriptor("lineBackAlpha"),
});
@ -80,27 +90,47 @@ function PolylineFlowMult() {
float baseTime = fract(czm_frameNumber * speed / 60.0) * 1.1;
// 高频时间轴（控制高光点）
float highlightTime = fract(czm_frameNumber * speed * 3.0 / 60.0);
// float highlightTime = fract(czm_frameNumber * speed * 3.0 / 60.0);
float highlightTime = fract(abs(speed) * czm_frameNumber * 0.01);
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) *
float highlight11 = 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,
float highlight21 = 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,
float highlight31 = 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))));
float highlight12 = smoothstep(highlightTime-0.05, highlightTime, 1.0 - st.s) *
step(-highlightTime, -(1.0-st.s)) *
(1.0 - smoothstep(0.0, highlightSpacing, abs(1.0 - st.s - highlightTime)));
float highlight22 = smoothstep(highlightTime+highlightSpacing-0.05,
highlightTime+highlightSpacing, 1.0 - st.s) *
step(-(highlightTime+highlightSpacing),-(1.0 - st.s)) *
(1.0 - smoothstep(0.0, highlightSpacing, abs(1.0-st.s - (highlightTime+highlightSpacing))));
float highlight32 = smoothstep(highlightTime+2.0*highlightSpacing-0.05,
highlightTime+2.0*highlightSpacing, 1.0 - st.s) *
step(-(highlightTime+2.0*highlightSpacing), -(1.0-st.s)) *
(1.0 - smoothstep(0.0, highlightSpacing, abs(1.0 - st.s - (highlightTime+2.0*highlightSpacing))));
float highlight1 = !rotate?highlight11:highlight12;
float highlight2 = !rotate?highlight21:highlight22;
float highlight3 = !rotate?highlight31:highlight32;
// 合并效果
// material.alpha = mainAlpha * 0.7 +
// (highlight1 + highlight2 + highlight3) * 0.5 +
@ -120,6 +150,7 @@ function PolylineFlowMult() {
uniforms: {
color: new Cesium.Color(1.0, 1.0, 1.0, 1.0),
speed: 0.1,
rotate: true,
lineBackAlpha: 0.05,
},
source: Cesium.Material.PolylineFlowMaterialSource,