fix: normalize particle speed and length across different refresh rates

- Add frameRateAdjustment uniform to normalize particle movement
- Adjust trail length calculation based on frame rate
- Ensure consistent particle behavior regardless of display refresh rate

Author: hongfaqiu

example/CHANGELOG.md

@@ -1,5 +1,12 @@
 # example
 
+## 0.4.7
+
+### Patch Changes
+
+- Updated dependencies
+  - [email protected]
+
 ## 0.4.6
 
 ### Patch Changes

example/package.json

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

packages/cesium-wind-layer/CHANGELOG.md

@@ -1,5 +1,15 @@
 # cesium-wind-layer
 
+## 0.7.6
+
+### Patch Changes
+
+- fix: normalize particle speed and length across different refresh rates
+
+  - Add frameRateAdjustment uniform to normalize particle movement
+  - Adjust trail length calculation based on frame rate
+  - Ensure consistent particle behavior regardless of display refresh rate
+
 ## 0.7.5
 
 ### Patch Changes

packages/cesium-wind-layer/package.json

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

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

@@ -13,6 +13,7 @@ uniform vec2 minimum; // minimum of each dimension
 uniform vec2 maximum; // maximum of each dimension
 
 uniform float speedScaleFactor;
+uniform float frameRateAdjustment;
 
 in vec2 v_textureCoordinates;
 
@@ -142,10 +143,9 @@ void main() {
     // texture coordinate must be normalized
     vec2 lonLat = texture(currentParticlesPosition, v_textureCoordinates).rg;
     vec2 speedOrigin = bilinearInterpolation(lonLat);
-    vec2 speed = calculateSpeedByRungeKutta2(lonLat);
+    vec2 speed = calculateSpeedByRungeKutta2(lonLat) * frameRateAdjustment;
     vec2 speedInLonLat = convertSpeedUnitToLonLat(lonLat, speed);
 
-    vec4 particleSpeed = vec4(speedInLonLat, calculateWindNorm(speed / speedScaleFactor));
     fragColor = vec4(speedInLonLat, calculateWindNorm(speedOrigin));
 }
 `;

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

@@ -9,6 +9,7 @@ uniform sampler2D currentParticlesPosition;
 uniform sampler2D postProcessingPosition;
 uniform sampler2D particlesSpeed;
 
+uniform float frameRateAdjustment;
 uniform float particleHeight;
 uniform float aspect;
 uniform float pixelSize;
@@ -117,11 +118,11 @@ void main() {
     // 计算速度相关的宽度和长度因子
     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);
+    float lengthFactor = clamp(speedBasedLength, 10.0, 100.0) / frameRateAdjustment;
 
     if (pointToUse == 1) {
         // 头部位置

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

@@ -26,8 +26,8 @@ export class WindParticlesComputing {
   };
   windData: Required<WindData>;
   private frameRateMonitor: FrameRateMonitor;
-  private frameRate: number = 60;
-  private frameRateAdjustment: number = 1;
+  frameRate: number = 60;
+  frameRateAdjustment: number = 1;
 
   constructor(context: any, windData: Required<WindData>, options: WindLayerOptions, viewerParameters: any, scene: any) {
     this.context = context;
@@ -150,8 +150,9 @@ export class WindParticlesComputing {
           speedRange: () => new Cartesian2(this.windData.speed.min, this.windData.speed.max),
           currentParticlesPosition: () => this.particlesTextures.currentParticlesPosition,
           speedScaleFactor: () => {
-            return (this.viewerParameters.pixelSize + 50) * this.options.speedFactor * this.frameRateAdjustment;
+            return (this.viewerParameters.pixelSize + 50) * this.options.speedFactor;
           },
+          frameRateAdjustment: () => this.frameRateAdjustment,
           dimension: () => new Cartesian2(this.windData.width, this.windData.height),
           minimum: () => new Cartesian2(this.windData.bounds.west, this.windData.bounds.south),
           maximum: () => new Cartesian2(this.windData.bounds.east, this.windData.bounds.north),

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

@@ -189,6 +189,7 @@ export class WindParticlesRendering {
         currentParticlesPosition: () => this.computing.particlesTextures.currentParticlesPosition,
         postProcessingPosition: () => this.computing.particlesTextures.postProcessingPosition,
         particlesSpeed: () => this.computing.particlesTextures.particlesSpeed,
+        frameRateAdjustment: () => this.computing.frameRateAdjustment,
         colorTable: () => this.colorTable,
         domain: () => {
           const domain = new Cartesian2(this.options.domain?.min ?? this.computing.windData.speed.min, this.options.domain?.max ?? this.computing.windData.speed.max);