fix: reduce unnecessary texture recreation

Author: hongfaqiu

example/CHANGELOG.md

@@ -1,5 +1,13 @@
 # example
 
+## 0.4.6
+
+### Patch Changes
+
+- fix: reduce unnecessary texture recreation
+- Updated dependencies
+  - cesium-wind-layer@0.7.5
+
 ## 0.4.5
 
 ### Patch Changes

example/package.json

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

example/src/components/ControlPanel.tsx

@@ -6,6 +6,7 @@ import ColorTableInput from './ColorTableInput';
 import styled from 'styled-components';
 import { ZoomInOutlined } from '@ant-design/icons';
 import { EyeOutlined, EyeInvisibleOutlined } from '@ant-design/icons';
+import NumberInput from './NumberInput';
 
 const { Text } = Typography;
 
@@ -301,7 +302,7 @@ export const ControlPanel: React.FC<ControlPanelProps> = ({
                   </Text>
                 }
               >
-                <InputNumber />
+                <NumberInput min={1} max={2000} step={10} />
               </CompactFormItem>
 
               <CompactFormItem
@@ -311,7 +312,7 @@ export const ControlPanel: React.FC<ControlPanelProps> = ({
                   'Height of particles above the ground in meters.'
                 )}
               >
-                <InputNumber min={-1000} max={10000} step={100} />
+                <NumberInput min={-1000} max={10000} step={100} />
               </CompactFormItem>
 
               <CompactFormItem
@@ -321,7 +322,7 @@ export const ControlPanel: React.FC<ControlPanelProps> = ({
                   'Width of particle trails in pixels. Controls the width of the particles.'
                 )}
               >
-                <InputNumber min={0.1} max={100} step={0.1} />
+                <NumberInput min={0.1} max={100} step={0.1} precision={1} />
               </CompactFormItem>
 
               <CompactFormItem
@@ -331,7 +332,7 @@ export const ControlPanel: React.FC<ControlPanelProps> = ({
                   'Factor to adjust the speed of particles. Controls the movement speed of particles.'
                 )}
               >
-                <InputNumber min={0.1} max={10} step={0.1} />
+                <NumberInput min={0.1} max={10} step={0.1} precision={1} />
               </CompactFormItem>
 
               <CompactFormItem
@@ -341,7 +342,7 @@ export const ControlPanel: React.FC<ControlPanelProps> = ({
                   'Rate at which particles are dropped (reset). Controls the lifecycle of particles.'
                 )}
               >
-                <InputNumber min={0.001} max={0.01} step={0.001} />
+                <NumberInput min={0.001} max={0.01} step={0.001} precision={3} />
               </CompactFormItem>
 
               <CompactFormItem
@@ -351,7 +352,7 @@ export const ControlPanel: React.FC<ControlPanelProps> = ({
                   'Additional drop rate for slow-moving particles. Increases the probability of dropping particles when they move slowly.'
                 )}
               >
-                <InputNumber min={0} max={0.2} step={0.001} />
+                <NumberInput min={0} max={0.2} step={0.001} precision={3} />
               </CompactFormItem>
 
               <CompactFormItem

example/src/components/NumberInput.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import { InputNumber, Slider } from 'antd';
+import styled from 'styled-components';
+
+const Container = styled.div`
+  display: flex;
+  gap: 12px;
+  align-items: center;
+`;
+
+const StyledSlider = styled(Slider)`
+  flex: 1;
+  margin: 0;
+  
+  @media (max-width: 767px) {
+    padding: 8px 0;
+    
+    .ant-slider-handle {
+      width: 20px;
+      height: 20px;
+      margin-top: -9px;
+    }
+  }
+`;
+
+const StyledInputNumber = styled(InputNumber<number>)`
+  width: 80px !important;
+`;
+
+interface NumberInputProps {
+  value?: number;
+  onChange?: (value: number) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  precision?: number;
+}
+
+const NumberInput: React.FC<NumberInputProps> = ({
+  value,
+  onChange,
+  min,
+  max,
+  step = 1,
+  precision = 0,
+}) => {
+  const handleInputNumberChange = (val: number | null) => {
+    if (val !== null && onChange) {
+      onChange(val);
+    }
+  };
+
+  return (
+    <Container>
+      <StyledSlider
+        value={value}
+        onChange={onChange}
+        min={min}
+        max={max}
+        step={step}
+      />
+      <StyledInputNumber
+        value={value}
+        onChange={handleInputNumberChange}
+        min={min}
+        max={max}
+        step={step}
+        precision={precision}
+      />
+    </Container>
+  );
+};
+
+export default NumberInput; 

packages/cesium-wind-layer/CHANGELOG.md

@@ -1,5 +1,11 @@
 # cesium-wind-layer
 
+## 0.7.5
+
+### Patch Changes
+
+- fix: reduce unnecessary texture recreation
+
 ## 0.7.4
 
 ### Patch Changes

packages/cesium-wind-layer/package.json

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

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

@@ -47,7 +47,7 @@ export class WindParticleSystem {
 
   changeOptions(options: Partial<WindLayerOptions>) {
     let maxParticlesChanged = false;
-    if (this.options.particlesTextureSize && this.options.particlesTextureSize !== options.particlesTextureSize) {
+    if (options.particlesTextureSize && this.options.particlesTextureSize !== options.particlesTextureSize) {
       maxParticlesChanged = true;
     }
 

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

@@ -49,7 +49,7 @@ export class WindParticlesComputing {
   private initFrameRate() {
     const updateFrameRate = () => {
       // avoid update frame rate when frame rate is too low
-      if (this.frameRateMonitor.lastFramesPerSecond > 50) {
+      if (this.frameRateMonitor.lastFramesPerSecond > 20) {
         this.frameRate = this.frameRateMonitor.lastFramesPerSecond;
         this.frameRateAdjustment = 60 / Math.max(this.frameRate, 1);
       }
@@ -223,7 +223,7 @@ export class WindParticlesComputing {
   }
 
   updateOptions(options: Partial<WindLayerOptions>) {
-    const needUpdateWindTextures = options.flipY !== this.options.flipY;
+    const needUpdateWindTextures = options.flipY !== undefined && options.flipY !== this.options.flipY;
     this.options = deepMerge(options, this.options);
     if (needUpdateWindTextures) {
       this.reCreateWindTextures();