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

Author: hongfaqiu

example/CHANGELOG.md

@@ -1,5 +1,23 @@
 # example
 
+## 0.6.0
+
+### Minor Changes
+
+- 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
+
+### Patch Changes
+
+- Updated dependencies
+  - cesium-wind-layer@0.9.0
+
 ## 0.5.0
 
 ### Minor Changes

example/package.json

@@ -1,7 +1,7 @@
 {
   "name": "example",
   "private": true,
-  "version": "0.5.0",
+  "version": "0.6.0",
   "type": "module",
   "scripts": {
     "dev": "vite",

example/src/components/ControlPanel.tsx

@@ -325,14 +325,64 @@ export const ControlPanel: React.FC<ControlPanelProps> = ({
                 <NumberInput min={0.1} max={100} step={0.1} precision={1} />
               </CompactFormItem>
 
+              <CompactFormItem
+                label={renderLabel(
+                  'Line Length Range',
+                  'Length range of particle trails based on speed. Lower values for slower particles, higher values for faster ones.'
+                )}
+              >
+                <Space direction="vertical" style={{ width: '100%' }} size={8}>
+                  <div style={{ display: 'flex', gap: '8px' }}>
+                    <div style={{ flex: 1 }}>
+                      <CompactFormItem
+                        name={['lineLength', 'min']}
+                        label={
+                          <Text type="secondary" style={{ fontSize: '12px' }}>
+                            Min Length
+                          </Text>
+                        }
+                        style={{ marginBottom: 0 }}
+                      >
+                        <InputNumber
+                          min={1}
+                          max={500}
+                          step={1}
+                          precision={1}
+                          placeholder='Min Length'
+                        />
+                      </CompactFormItem>
+                    </div>
+                    <div style={{ flex: 1 }}>
+                      <CompactFormItem
+                        name={['lineLength', 'max']}
+                        label={
+                          <Text type="secondary" style={{ fontSize: '12px' }}>
+                            Max Length
+                          </Text>
+                        }
+                        style={{ marginBottom: 0 }}
+                      >
+                        <InputNumber
+                          min={1}
+                          max={500}
+                          step={1}
+                          precision={1}
+                          placeholder='Max Length'
+                        />
+                      </CompactFormItem>
+                    </div>
+                  </div>
+                </Space>
+              </CompactFormItem>
+
               <CompactFormItem
                 name="speedFactor"
                 label={renderLabel(
                   'Speed Factor',
                   'Factor to adjust the speed of particles. Controls the movement speed of particles.'
                 )}
               >
-                <NumberInput min={0.1} max={10} step={0.1} precision={1} />
+                <NumberInput min={0.1} max={100} step={0.1} precision={1} />
               </CompactFormItem>
 
               <CompactFormItem

example/src/pages/earth.tsx

@@ -47,6 +47,8 @@ const dataConfigs = {
         max: 8,
       },
       speedFactor: 0.8,
+      lineWidth: 5.0,
+      lineLength: { min: 20, max: 100 },
     },
     file: '/wind.json'
   },
@@ -57,6 +59,8 @@ const dataConfigs = {
         max: 1,
       },
       speedFactor: 8,
+      lineWidth: 10.0,
+      lineLength: { min: 20, max: 50 },
     },
     file: '/ocean.json'
   }
@@ -67,8 +71,9 @@ const defaultOptions: Partial<WindLayerOptions> = {
   dropRate: 0.003,
   particleHeight: 1000,
   dropRateBump: 0.01,
-  lineWidth: 10.0,
-  colors: colorSchemes[3].colors,
+  lineWidth: 5.0,
+  lineLength: { min: 20, max: 100 },
+  colors: colorSchemes[3].colors.reverse(),
   flipY: true,
   useViewerBounds: true,
   dynamic: true,

packages/cesium-wind-layer/CHANGELOG.md

@@ -1,5 +1,18 @@
 # cesium-wind-layer
 
+## 0.9.0
+
+### Minor Changes
+
+- 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
+
 ## 0.8.0
 
 ### Minor Changes

packages/cesium-wind-layer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cesium-wind-layer",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "publishConfig": {
     "access": "public"
   },

packages/cesium-wind-layer/readme.md

@@ -93,7 +93,8 @@ Main class for wind visualization.
 interface WindLayerOptions {
   particlesTextureSize: number;  // Size of the particle texture. Determines the maximum number of particles (size squared). Default is 100.
   particleHeight: number;        // Height of particles above the ground in meters. Default is 0.
-  lineWidth: number;            // Width of particle trails in pixels. Default is 10.0.
+  lineWidth: number;            // Width of particle trails in pixels. Default is 5.0.
+  lineLength: { min: number; max: number }; // Length range of particle trails. Default is { min: 20, max: 100 }.
   speedFactor: number;          // Factor to adjust the speed of particles. Default is 1.0.
   dropRate: number;             // Rate at which particles are dropped (reset). Default is 0.003.
   dropRateBump: number;         // Additional drop rate for slow-moving particles. Default is 0.001.

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

@@ -93,7 +93,8 @@ const windLayer = new WindLayer(viewer, windData, {
 interface WindLayerOptions {
   particlesTextureSize: number;  // 粒子纹理大小，决定粒子最大数量（size * size）（默认：100）
   particleHeight: number;        // 粒子距地面高度（默认：0）
-  lineWidth: number;            // 粒子线宽（默认：10.0）
+  lineWidth: number;            // 粒子线宽（默认：5.0）
+  lineLength: { min: number; max: number }; // 粒子轨迹长度范围（默认：{ min: 20, max: 100 }）
   speedFactor: number;          // 速度倍数（默认：1.0）
   dropRate: number;             // 粒子消失率（默认：0.003）
   dropRateBump: number;         // 额外消失率（默认：0.01）

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

@@ -38,7 +38,8 @@ export class WindLayer {
     particleHeight: 1000,
     dropRateBump: 0.01,
     speedFactor: 1.0,
-    lineWidth: 10.0,
+    lineWidth: 5.0,
+    lineLength: { min: 20, max: 100 },
     colors: ['white'],
     flipY: false,
     useViewerBounds: false,
@@ -71,12 +72,14 @@ export class WindLayer {
    * @param {number} [options.particlesTextureSize=100] - Size of the particle texture. Determines the maximum number of particles (size squared).
    * @param {number} [options.particleHeight=0] - Height of particles above the ground in meters.
    * @param {number} [options.lineWidth=3.0] - Width of particle trails in pixels.
+   * @param {Object} [options.lineLength={ min: 20, max: 100 }] - Length range of particle trails.
    * @param {number} [options.speedFactor=1.0] - Factor to adjust the speed of particles.
    * @param {number} [options.dropRate=0.003] - Rate at which particles are dropped (reset).
    * @param {number} [options.dropRateBump=0.001] - Additional drop rate for slow-moving particles.
    * @param {string[]} [options.colors=['white']] - Array of colors for particles. Can be used to create color gradients.
    * @param {boolean} [options.flipY=false] - Whether to flip the Y-axis of the wind data.
    * @param {boolean} [options.useViewerBounds=false] - Whether to use the viewer bounds to generate particles.
+   * @param {boolean} [options.dynamic=true] - Whether to enable dynamic particle animation.
    */
   constructor(viewer: Viewer, windData: WindData, options?: Partial<WindLayerOptions>) {
     this.show = true;

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

@@ -14,10 +14,12 @@ uniform float particleHeight;
 uniform float aspect;
 uniform float pixelSize;
 uniform float lineWidth;
+uniform vec2 lineLength;
+uniform vec2 domain;
 uniform bool is3D;
 
 // 添加输出变量传递给片元着色器
-out vec2 speed;
+out vec4 speed;
 out float v_segmentPosition;
 out vec2 textureCoordinate;
 
@@ -91,6 +93,7 @@ void main() {
     vec2 flippedIndex = vec2(st.x, 1.0 - st.y);
 
     vec2 particleIndex = flippedIndex;
+    speed = texture(particlesSpeed, particleIndex);
 
     vec2 previousPosition = texture(previousParticlesPosition, particleIndex).rg;
     vec2 currentPosition = texture(currentParticlesPosition, particleIndex).rg;
@@ -116,48 +119,46 @@ void main() {
     vec4 offset = vec4(0.0);
 
     // 计算速度相关的宽度和长度因子
-    float speedFactor = max(0.3, speed.y);
     float widthFactor = pointToUse < 0 ? 1.0 : 0.5; // 头部更宽，尾部更窄
 
-    // Modify length calculation with constraints
-    float baseLengthFactor = 10.0;
-    float speedBasedLength = baseLengthFactor * speedFactor;
-    float lengthFactor = clamp(speedBasedLength, 10.0, 100.0) / frameRateAdjustment;
+    // Calculate length based on speed
+    float speedLength = clamp(speed.b, domain.x, domain.y);
+    float normalizedSpeed = (speedLength - domain.x) / (domain.y - domain.x);
+    float lengthFactor = mix(lineLength.x, lineLength.y, normalizedSpeed) * pixelSize;
 
     if (pointToUse == 1) {
         // 头部位置
         offset = pixelSize * calculateOffsetOnNormalDirection(
             projectedCoordinates.previous,
             projectedCoordinates.current,
             offsetSign,
-            widthFactor * speedFactor
+            widthFactor * normalizedSpeed
         );
         gl_Position = projectedCoordinates.previous + offset;
         v_segmentPosition = 0.0; // 头部
     } else if (pointToUse == -1) {
-        // 尾部位置，向后延伸，使用受限制的长度
-        vec4 direction = projectedCoordinates.next - projectedCoordinates.current;
+        // Get direction and normalize it to length 1.0
+        vec4 direction = normalize(projectedCoordinates.next - projectedCoordinates.current);
         vec4 extendedPosition = projectedCoordinates.current + direction * lengthFactor;
 
         offset = pixelSize * calculateOffsetOnNormalDirection(
             projectedCoordinates.current,
             extendedPosition,
             offsetSign,
-            widthFactor * speedFactor
+            widthFactor * normalizedSpeed
         );
         gl_Position = extendedPosition + offset;
         v_segmentPosition = 1.0; // 尾部
     }
 
-    speed = texture(particlesSpeed, particleIndex).ba;
     textureCoordinate = st;
 }
 `;
 
 export const renderParticlesFragmentShader = /*glsl*/`#version 300 es
 precision highp float;
 
-in vec2 speed;
+in vec4 speed;
 in float v_segmentPosition;
 in vec2 textureCoordinate;
 
@@ -170,8 +171,8 @@ out vec4 fragColor;
 
 void main() {
     const float zero = 0.0;
-    if(speed.y > zero && speed.x > displayRange.x && speed.x < displayRange.y) {
-        float speedLength = clamp(speed.x, domain.x, domain.y);
+    if(speed.a > zero && speed.b > displayRange.x && speed.b < displayRange.y) {
+        float speedLength = clamp(speed.b, domain.x, domain.y);
         float normalizedSpeed = (speedLength - domain.x) / (domain.y - domain.x);
         vec4 baseColor = texture(colorTable, vec2(normalizedSpeed, zero));
 
@@ -180,7 +181,7 @@ void main() {
         alpha = pow(alpha, 1.5); // 调整透明度渐变曲线
 
         // 根据速度调整透明度
-        float speedAlpha = mix(0.3, 1.0, speed.y);
+        float speedAlpha = mix(0.3, 1.0, speed.a);
 
         // 组合颜色和透明度
         fragColor = vec4(baseColor.rgb, baseColor.a * alpha * speedAlpha);

packages/cesium-wind-layer/src/types.ts

@@ -10,10 +10,19 @@ export interface WindLayerOptions {
    */
   particleHeight: number;
   /**
-   * Width of particle trails in pixels. Default is 10.0.
+   * Width of particle trails in pixels. Default is 5.0.
    * Controls the width of the particles.
    */
   lineWidth: number;
+  /**
+   * Length range of particle trails. Default is { min: 20, max: 100 }.
+   * @property {number} min - Minimum length of particle trails
+   * @property {number} max - Maximum length of particle trails
+   */
+  lineLength?: {
+    min: number;
+    max: number;
+  };
   /**
    * Factor to adjust the speed of particles. Default is 1.0.
    * Controls the movement speed of particles.

packages/cesium-wind-layer/src/windParticlesComputing.ts

@@ -201,7 +201,7 @@ export class WindParticlesComputing {
           },
           dropRate: () => this.options.dropRate,
           dropRateBump: () => this.options.dropRateBump,
-          useViewerBounds: () => this.options.useViewerBounds // 添加新的 uniform
+          useViewerBounds: () => this.options.useViewerBounds
         },
         fragmentShaderSource: ShaderManager.getPostProcessingPositionShader(),
         outputTexture: this.particlesTextures.postProcessingPosition,

packages/cesium-wind-layer/src/windParticlesRendering.ts

@@ -208,6 +208,10 @@ export class WindParticlesRendering {
         lineWidth: () => this.options.lineWidth,
         is3D: () => this.viewerParameters.sceneMode === SceneMode.SCENE3D,
         segmentsDepthTexture: () => this.textures.segmentsDepth,
+        lineLength: () => {
+          const length = this.options.lineLength || { min: 50, max: 150 };
+          return new Cartesian2(length.min, length.max);
+        },
       },
       vertexShaderSource: ShaderManager.getSegmentDrawVertexShader(),
       fragmentShaderSource: ShaderManager.getSegmentDrawFragmentShader(),