fix: calculate frame rate only during initialization

- Move frame rate calculation to initialization phase
- Use timestamp array to measure frames in the last second
- Calculate FPS once with 120 frames sample for better accuracy
- Store frame rate adjustment factor for consistent particle speed

example/CHANGELOG.md

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

example/package.json

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

packages/cesium-wind-layer/CHANGELOG.md

@@ -1,5 +1,16 @@
 # cesium-wind-layer
 
+## 0.5.3
+
+### Patch Changes
+
+- fix: calculate frame rate only during initialization
+
+  - Move frame rate calculation to initialization phase
+  - Use timestamp array to measure frames in the last second
+  - Calculate FPS once with 120 frames sample for better accuracy
+  - Store frame rate adjustment factor for consistent particle speed
+
 ## 0.5.2
 
 ### Patch Changes

packages/cesium-wind-layer/package.json

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

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

@@ -26,10 +26,7 @@ export class WindParticlesComputing {
   private bounds: WindData['bounds'];
   windData: Required<WindData>;
   private frameRate: number = 60;
-  private lastFrameTime: number = 0;
-  private frameRateUpdateInterval: number = 500; // Update frame rate every 500ms
-  private frameCount: number = 0;
-  private frameRateStartTime: number = 0;
+  private frameRateAdjustment: number = 1;
 
   constructor(context: any, windData: Required<WindData>, options: WindLayerOptions, viewerParameters: any) {
     this.context = context;
@@ -38,22 +35,35 @@ export class WindParticlesComputing {
     this.bounds = windData.bounds;
     this.windData = windData;
 
-    this.frameRateStartTime = performance.now();
+    this.initFrameRate();
     this.createWindTextures();
     this.createParticlesTextures();
     this.createComputingPrimitives();
   }
 
-  private updateFrameRate() {
-    const currentTime = performance.now();
-    this.frameCount++;
+  private initFrameRate() {
+    let times: number[] = [];
+    let frameCount = 0;
 
-    // Update frame rate every 500ms
-    if (currentTime - this.frameRateStartTime >= this.frameRateUpdateInterval) {
-      this.frameRate = Math.round((this.frameCount * 1000) / (currentTime - this.frameRateStartTime));
-      this.frameCount = 0;
-      this.frameRateStartTime = currentTime;
-    }
+    const measureFrameRate = (timestamp: number) => {
+      times.push(timestamp);
+      frameCount++;
+
+      // Keep only the times in the last second
+      const now = timestamp;
+      times = times.filter(t => now - t < 1000);
+
+      if (frameCount >= 120) { // Measure over more frames for better accuracy
+        // Calculate FPS based on the number of frames in the last second
+        this.frameRate = Math.round(times.length);
+        this.frameRateAdjustment = 60 / this.frameRate;
+        return;
+      }
+
+      requestAnimationFrame(measureFrameRate);
+    };
+
+    requestAnimationFrame(measureFrameRate);
   }
 
   createWindTextures() {
@@ -136,9 +146,7 @@ export class WindParticlesComputing {
           speedRange: () => new Cartesian2(this.windData.speed.min, this.windData.speed.max),
           currentParticlesPosition: () => this.particlesTextures.currentParticlesPosition,
           speedScaleFactor: () => {
-            this.updateFrameRate();
-            const frameRateAdjustment = 60 / this.frameRate;
-            return (this.viewerParameters.pixelSize + 50) * this.options.speedFactor * frameRateAdjustment;
+            return (this.viewerParameters.pixelSize + 50) * this.options.speedFactor * this.frameRateAdjustment;
           },
           dimension: () => dimension,
           minimum: () => minimum,