Skip to content

Commit 24a56b8

Browse files
hongfaqiuhongfaqiu
committed
feat: add line length range control
- Add lineLength option to control particle trail length range - Change lineLength type from number to { min: number; max: number } - Set default lineLength range to { min: 20, max: 100 } - Set default lineWidth to 5.0 - Update control panel UI to support lineLength range adjustment - Add different lineLength ranges for wind and ocean data
1 parent 1a568f7 commit 24a56b8

File tree

13 files changed

+130
-25
lines changed

13 files changed

+130
-25
lines changed

‎example/CHANGELOG.md‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,23 @@
11
# example
22

3+
## 0.6.0
4+
5+
### Minor Changes
6+
7+
- feat: add line length range control
8+
9+
- Add lineLength option to control particle trail length range
10+
- Change lineLength type from number to { min: number; max: number }
11+
- Set default lineLength range to { min: 20, max: 100 }
12+
- Set default lineWidth to 5.0
13+
- Update control panel UI to support lineLength range adjustment
14+
- Add different lineLength ranges for wind and ocean data
15+
16+
### Patch Changes
17+
18+
- Updated dependencies
19+
- [email protected]
20+
321
## 0.5.0
422

523
### Minor Changes

‎example/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "example",
33
"private": true,
4-
"version": "0.5.0",
4+
"version": "0.6.0",
55
"type": "module",
66
"scripts": {
77
"dev": "vite",

‎example/src/components/ControlPanel.tsx‎

Lines changed: 51 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -325,14 +325,64 @@ export const ControlPanel: React.FC<ControlPanelProps> = ({
325325
<NumberInput min={0.1} max={100} step={0.1} precision={1} />
326326
</CompactFormItem>
327327

328+
<CompactFormItem
329+
label={renderLabel(
330+
'Line Length Range',
331+
'Length range of particle trails based on speed. Lower values for slower particles, higher values for faster ones.'
332+
)}
333+
>
334+
<Space direction="vertical" style={{ width: '100%' }} size={8}>
335+
<div style={{ display: 'flex', gap: '8px' }}>
336+
<div style={{ flex: 1 }}>
337+
<CompactFormItem
338+
name={['lineLength', 'min']}
339+
label={
340+
<Text type="secondary" style={{ fontSize: '12px' }}>
341+
Min Length
342+
</Text>
343+
}
344+
style={{ marginBottom: 0 }}
345+
>
346+
<InputNumber
347+
min={1}
348+
max={500}
349+
step={1}
350+
precision={1}
351+
placeholder='Min Length'
352+
/>
353+
</CompactFormItem>
354+
</div>
355+
<div style={{ flex: 1 }}>
356+
<CompactFormItem
357+
name={['lineLength', 'max']}
358+
label={
359+
<Text type="secondary" style={{ fontSize: '12px' }}>
360+
Max Length
361+
</Text>
362+
}
363+
style={{ marginBottom: 0 }}
364+
>
365+
<InputNumber
366+
min={1}
367+
max={500}
368+
step={1}
369+
precision={1}
370+
placeholder='Max Length'
371+
/>
372+
</CompactFormItem>
373+
</div>
374+
</div>
375+
</Space>
376+
</CompactFormItem>
377+
328378
<CompactFormItem
329379
name="speedFactor"
330380
label={renderLabel(
331381
'Speed Factor',
332382
'Factor to adjust the speed of particles. Controls the movement speed of particles.'
333383
)}
334384
>
335-
<NumberInput min={0.1} max={10} step={0.1} precision={1} />
385+
<NumberInput min={0.1} max={100} step={0.1} precision={1} />
336386
</CompactFormItem>
337387

338388
<CompactFormItem

‎example/src/pages/earth.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,8 @@ const dataConfigs = {
4747
max: 8,
4848
},
4949
speedFactor: 0.8,
50+
lineWidth: 5.0,
51+
lineLength: { min: 20, max: 100 },
5052
},
5153
file: '/wind.json'
5254
},
@@ -57,6 +59,8 @@ const dataConfigs = {
5759
max: 1,
5860
},
5961
speedFactor: 8,
62+
lineWidth: 10.0,
63+
lineLength: { min: 20, max: 50 },
6064
},
6165
file: '/ocean.json'
6266
}
@@ -67,8 +71,9 @@ const defaultOptions: Partial<WindLayerOptions> = {
6771
dropRate: 0.003,
6872
particleHeight: 1000,
6973
dropRateBump: 0.01,
70-
lineWidth: 10.0,
71-
colors: colorSchemes[3].colors,
74+
lineWidth: 5.0,
75+
lineLength: { min: 20, max: 100 },
76+
colors: colorSchemes[3].colors.reverse(),
7277
flipY: true,
7378
useViewerBounds: true,
7479
dynamic: true,

‎packages/cesium-wind-layer/CHANGELOG.md‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,18 @@
11
# cesium-wind-layer
22

3+
## 0.9.0
4+
5+
### Minor Changes
6+
7+
- feat: add line length range control
8+
9+
- Add lineLength option to control particle trail length range
10+
- Change lineLength type from number to { min: number; max: number }
11+
- Set default lineLength range to { min: 20, max: 100 }
12+
- Set default lineWidth to 5.0
13+
- Update control panel UI to support lineLength range adjustment
14+
- Add different lineLength ranges for wind and ocean data
15+
316
## 0.8.0
417

518
### Minor Changes

‎packages/cesium-wind-layer/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "cesium-wind-layer",
3-
"version": "0.8.0",
3+
"version": "0.9.0",
44
"publishConfig": {
55
"access": "public"
66
},

‎packages/cesium-wind-layer/readme.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,8 @@ Main class for wind visualization.
9393
interface WindLayerOptions {
9494
particlesTextureSize: number; // Size of the particle texture. Determines the maximum number of particles (size squared). Default is 100.
9595
particleHeight: number; // Height of particles above the ground in meters. Default is 0.
96-
lineWidth: number; // Width of particle trails in pixels. Default is 10.0.
96+
lineWidth: number; // Width of particle trails in pixels. Default is 5.0.
97+
lineLength: { min: number; max: number }; // Length range of particle trails. Default is { min: 20, max: 100 }.
9798
speedFactor: number; // Factor to adjust the speed of particles. Default is 1.0.
9899
dropRate: number; // Rate at which particles are dropped (reset). Default is 0.003.
99100
dropRateBump: number; // Additional drop rate for slow-moving particles. Default is 0.001.

‎packages/cesium-wind-layer/readme.zh-CN.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,8 @@ const windLayer = new WindLayer(viewer, windData, {
9393
interface WindLayerOptions {
9494
particlesTextureSize: number; // 粒子纹理大小，决定粒子最大数量（size * size）（默认：100）
9595
particleHeight: number; // 粒子距地面高度（默认：0）
96-
lineWidth: number; // 粒子线宽（默认：10.0）
96+
lineWidth: number; // 粒子线宽（默认：5.0）
97+
lineLength: { min: number; max: number }; // 粒子轨迹长度范围（默认：{ min: 20, max: 100 }）
9798
speedFactor: number; // 速度倍数（默认：1.0）
9899
dropRate: number; // 粒子消失率（默认：0.003）
99100
dropRateBump: number; // 额外消失率（默认：0.01）

‎packages/cesium-wind-layer/src/index.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,8 @@ export class WindLayer {
3838
particleHeight: 1000,
3939
dropRateBump: 0.01,
4040
speedFactor: 1.0,
41-
lineWidth: 10.0,
41+
lineWidth: 5.0,
42+
lineLength: { min: 20, max: 100 },
4243
colors: ['white'],
4344
flipY: false,
4445
useViewerBounds: false,
@@ -71,12 +72,14 @@ export class WindLayer {
7172
* @param {number} [options.particlesTextureSize=100] - Size of the particle texture. Determines the maximum number of particles (size squared).
7273
* @param {number} [options.particleHeight=0] - Height of particles above the ground in meters.
7374
* @param {number} [options.lineWidth=3.0] - Width of particle trails in pixels.
75+
* @param {Object} [options.lineLength={ min: 20, max: 100 }] - Length range of particle trails.
7476
* @param {number} [options.speedFactor=1.0] - Factor to adjust the speed of particles.
7577
* @param {number} [options.dropRate=0.003] - Rate at which particles are dropped (reset).
7678
* @param {number} [options.dropRateBump=0.001] - Additional drop rate for slow-moving particles.
7779
* @param {string[]} [options.colors=['white']] - Array of colors for particles. Can be used to create color gradients.
7880
* @param {boolean} [options.flipY=false] - Whether to flip the Y-axis of the wind data.
7981
* @param {boolean} [options.useViewerBounds=false] - Whether to use the viewer bounds to generate particles.
82+
* @param {boolean} [options.dynamic=true] - Whether to enable dynamic particle animation.
8083
*/
8184
constructor(viewer: Viewer, windData: WindData, options?: Partial<WindLayerOptions>) {
8285
this.show = true;

‎packages/cesium-wind-layer/src/shaders/segmentDraw.ts‎

Lines changed: 16 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,12 @@ uniform float particleHeight;
1414
uniform float aspect;
1515
uniform float pixelSize;
1616
uniform float lineWidth;
17+
uniform vec2 lineLength;
18+
uniform vec2 domain;
1719
uniform bool is3D;
1820
1921
// 添加输出变量传递给片元着色器
20-
out vec2 speed;
22+
out vec4 speed;
2123
out float v_segmentPosition;
2224
out vec2 textureCoordinate;
2325
@@ -91,6 +93,7 @@ void main() {
9193
vec2 flippedIndex = vec2(st.x, 1.0 - st.y);
9294
9395
vec2 particleIndex = flippedIndex;
96+
speed = texture(particlesSpeed, particleIndex);
9497
9598
vec2 previousPosition = texture(previousParticlesPosition, particleIndex).rg;
9699
vec2 currentPosition = texture(currentParticlesPosition, particleIndex).rg;
@@ -116,48 +119,46 @@ void main() {
116119
vec4 offset = vec4(0.0);
117120
118121
// 计算速度相关的宽度和长度因子
119-
float speedFactor = max(0.3, speed.y);
120122
float widthFactor = pointToUse < 0 ? 1.0 : 0.5; // 头部更宽，尾部更窄
121123
122-
// Modify length calculation with constraints
123-
float baseLengthFactor = 10.0;
124-
float speedBasedLength = baseLengthFactor * speedFactor;
125-
float lengthFactor = clamp(speedBasedLength, 10.0, 100.0) / frameRateAdjustment;
124+
// Calculate length based on speed
125+
float speedLength = clamp(speed.b, domain.x, domain.y);
126+
float normalizedSpeed = (speedLength - domain.x) / (domain.y - domain.x);
127+
float lengthFactor = mix(lineLength.x, lineLength.y, normalizedSpeed) * pixelSize;
126128
127129
if (pointToUse == 1) {
128130
// 头部位置
129131
offset = pixelSize * calculateOffsetOnNormalDirection(
130132
projectedCoordinates.previous,
131133
projectedCoordinates.current,
132134
offsetSign,
133-
widthFactor * speedFactor
135+
widthFactor * normalizedSpeed
134136
);
135137
gl_Position = projectedCoordinates.previous + offset;
136138
v_segmentPosition = 0.0; // 头部
137139
} else if (pointToUse == -1) {
138-
// 尾部位置，向后延伸，使用受限制的长度
139-
vec4 direction = projectedCoordinates.next - projectedCoordinates.current;
140+
// Get direction and normalize it to length 1.0
141+
vec4 direction = normalize(projectedCoordinates.next - projectedCoordinates.current);
140142
vec4 extendedPosition = projectedCoordinates.current + direction * lengthFactor;
141143
142144
offset = pixelSize * calculateOffsetOnNormalDirection(
143145
projectedCoordinates.current,
144146
extendedPosition,
145147
offsetSign,
146-
widthFactor * speedFactor
148+
widthFactor * normalizedSpeed
147149
);
148150
gl_Position = extendedPosition + offset;
149151
v_segmentPosition = 1.0; // 尾部
150152
}
151153
152-
speed = texture(particlesSpeed, particleIndex).ba;
153154
textureCoordinate = st;
154155
}
155156
`;
156157

157158
export const renderParticlesFragmentShader = /*glsl*/`#version 300 es
158159
precision highp float;
159160
160-
in vec2 speed;
161+
in vec4 speed;
161162
in float v_segmentPosition;
162163
in vec2 textureCoordinate;
163164
@@ -170,8 +171,8 @@ out vec4 fragColor;
170171
171172
void main() {
172173
const float zero = 0.0;
173-
if(speed.y > zero && speed.x > displayRange.x && speed.x < displayRange.y) {
174-
float speedLength = clamp(speed.x, domain.x, domain.y);
174+
if(speed.a > zero && speed.b > displayRange.x && speed.b < displayRange.y) {
175+
float speedLength = clamp(speed.b, domain.x, domain.y);
175176
float normalizedSpeed = (speedLength - domain.x) / (domain.y - domain.x);
176177
vec4 baseColor = texture(colorTable, vec2(normalizedSpeed, zero));
177178
@@ -180,7 +181,7 @@ void main() {
180181
alpha = pow(alpha, 1.5); // 调整透明度渐变曲线
181182
182183
// 根据速度调整透明度
183-
float speedAlpha = mix(0.3, 1.0, speed.y);
184+
float speedAlpha = mix(0.3, 1.0, speed.a);
184185
185186
// 组合颜色和透明度
186187
fragColor = vec4(baseColor.rgb, baseColor.a * alpha * speedAlpha);

0 commit comments

Comments
 (0)