@pirireis/webglobeplugins 0.15.21-alpha → 0.15.24

package/semiplugins/shape-on-terrain/padding-1-degree.js

@@ -16,23 +16,23 @@ import { BufferManager } from '../../util/account/single-attribute-buffer-manage
 import { BufferOrchestrator } from '../../util/account/single-attribute-buffer-management/buffer-orchestrator';
 import { LineStripProgramCache } from '../../programs/line-on-globe/linestrip/linestrip';
 import { opacityCheck, colorCheck } from '../../util/check/typecheck';
+import { FrameCounterTrigger } from '../../util/frame-counter-trigger';
 const initialCapacity = 2; // initial capacity for the buffer managers
 // const _float32Array = new Float32Array(360 * 3 * 2).fill(NaN);
 export class Padding1DegreePlugin {
     id;
     globe = null;
     bufferOrchestrator;
-    bufferManagersMap;
+    bufferManagerMap;
     lineProgram = null;
-    _opacityLODCoef = 1;
-    _pluginOpacity = 1; // this is used to set the opacity of the plugin
-    _innerPaddingRatio = 0.9; //
+    _innerPaddingRatio = 0.95; //
     _float32Array = null; // this is used to forward the data to the buffer manager
     _uboHandler = null; // this is used to forward the data to the shader program
     _bufferNames = ["position2d", "position3d"];
     _vao = null; // this is used to store the VAO for the plugin
     _freed = false; // this is used to check if the plugin is freed or not
-    _lastCAM_LOD = { camInfo: -1, lod: -1 }; // this is used to store the last zoom and lod values
+    _userOpacity = 1;
+    _adaptiveOpacityMultiplier = 1;
     _dataMap = new Map();
     _options = {
         bufferType: "STATIC_DRAW",
@@ -43,9 +43,10 @@ export class Padding1DegreePlugin {
         adaptiveOpacity: true, // if true, the opacity will be adaptive to the LOD
         isMSL: false // if true, no elevation of terrain
     };
+    _frameCounterTrigger = null;
     constructor(id, options = null) {
         this.id = id;
-        this.bufferManagersMap = new Map();
+        this.bufferManagerMap = new Map();
         this.lineProgram = null;
         this._options = options ? { ...this._options, ...options } : this._options;
         this.bufferOrchestrator = new BufferOrchestrator();
@@ -53,6 +54,21 @@ export class Padding1DegreePlugin {
             this._bufferNames.push("color");
         }
     }
+    increaseSpace(amount) {
+        if (this._freed) {
+            console.warn("Plugin is freed, cannot increase space");
+            return;
+        }
+        if (this.globe === null) {
+            console.warn("Globe is not initialized.");
+            return;
+        }
+        if (typeof amount !== "number" || amount <= 0) {
+            console.warn("Invalid amount, must be a positive number");
+            return;
+        }
+        this.bufferOrchestrator.ensureSpace(amount, this.bufferManagerMap);
+    }
     insertBulk(inputs) {
         if (this.globe === null) {
             console.warn("Globe is not initialized, cannot insert input");
@@ -64,16 +80,78 @@ export class Padding1DegreePlugin {
         }
         const wrapper = [null];
         this._float32Array = new Float32Array(360 * 4 * 4); // largest float32Array
+        let newItemCount = 0;
+        for (let i = 0; i < inputs.length; i++) {
+            if (!this._dataMap.has(inputs[i].key)) {
+                newItemCount++;
+            }
+        }
+        this.bufferOrchestrator.ensureSpace(newItemCount, this.bufferManagerMap);
         for (let i = 0; i < inputs.length; i++) {
             const coords = preAdapter(this.globe, inputs[i], this._innerPaddingRatio, null);
             const paddingInput = { ...inputs[i], ...coords };
             this._dataMap.set(paddingInput.key, paddingInput);
             wrapper[0] = paddingInput;
-            this.bufferOrchestrator.insertBulk(wrapper, this.bufferManagersMap, this._bufferNames);
+            this.bufferOrchestrator.insertBulk(wrapper, this.bufferManagerMap, this._bufferNames);
         }
         this._float32Array = null;
         this.globe?.DrawRender();
     }
+    updateColorRatios(key, colorRatios, drawRender = true) {
+        if (this._freed) {
+            console.warn("Plugin is freed, cannot update color");
+            return;
+        }
+        if (this.globe === null) {
+            console.warn("Globe is not initialized, cannot update color");
+            return;
+        }
+        if (!this._options.variativeColorsOn) {
+            console.warn("VariativeColors are not enabled");
+            return;
+        }
+        if (!this._dataMap.has(key)) {
+            console.warn(`Key ${key} does not exist in the data map`);
+            return;
+        }
+        const paddingInput = this._dataMap.get(key);
+        if (!paddingInput) {
+            console.warn(`Padding input for key ${key} is not found`);
+            return;
+        }
+        this._float32Array = new Float32Array(360 * 4 * 4); // largest float32Array
+        paddingInput.colorsRatios = colorRatios;
+        this.bufferOrchestrator.updateBulk([paddingInput], this.bufferManagerMap, ["color"]);
+        this._float32Array = null;
+        if (drawRender) {
+            this.globe.DrawRender();
+        }
+    }
+    updateCoordinates(items) {
+        if (this._freed) {
+            console.warn("Plugin is freed, cannot update coordinates");
+            return;
+        }
+        if (this.globe === null) {
+            console.warn("Globe is not initialized, cannot update coordinates");
+            return;
+        }
+        this._float32Array = new Float32Array(360 * 4 * 4); // largest float32Array
+        const updateKeys = [];
+        for (const item of items) {
+            const paddingInput = this._dataMap.get(item.key);
+            if (!paddingInput) {
+                console.warn(`Padding input for key ${item.key} is not found`);
+                continue;
+            }
+            paddingInput.center = item.center;
+            paddingInput.radius = item.radius;
+            updateKeys.push(item.key);
+        }
+        this._buildPaddings("input", updateKeys);
+        this._float32Array = null;
+        this.globe.DrawRender();
+    }
     deleteBulk(keys) {
         if (this.globe === null) {
             console.warn("Globe is not initialized, cannot delete data");
@@ -83,10 +161,10 @@ export class Padding1DegreePlugin {
             console.warn("Plugin is freed, cannot delete data");
             return;
         }
-        this.bufferOrchestrator.deleteBulk(keys, this.bufferManagersMap);
+        this.bufferOrchestrator.deleteBulk(keys, this.bufferManagerMap);
         this.globe?.DrawRender();
     }
-    setPluginOpacity(opacity) {
+    setPluginOpacity(opacity, drawRender = false) {
         if (this._freed) {
             console.warn("Plugin is freed, cannot set opacity");
             return;
@@ -96,9 +174,10 @@ export class Padding1DegreePlugin {
             return;
         }
         opacityCheck(opacity);
-        this._opacityLODCoef = opacity;
-        this._uboHandler?.updateSingle("u_opacity", new Float32Array([opacity]));
-        this.globe.DrawRender();
+        this._userOpacity = opacity;
+        if (drawRender) {
+            this.globe.DrawRender();
+        }
     }
     setDefaultColor(color) {
         if (this._freed) {
@@ -128,10 +207,18 @@ export class Padding1DegreePlugin {
         this._buildPaddings("elevation");
         this.globe?.DrawRender();
     }
-    init(globe) {
+    init(globe, gl) {
         this.globe = globe;
         this.lineProgram = LineStripProgramCache.get(globe);
-        const bufferManagersMap = new Map([
+        this._frameCounterTrigger = new FrameCounterTrigger(globe, 10, 1000, (globeChanges) => {
+            if (this._freed)
+                return;
+            this.__build(globeChanges);
+            globe.DrawRender();
+        });
+        this.__updateLODRelatedParameters();
+        this.__updateAdaptiveOpacityMultiplier();
+        const bufferManagerMap = new Map([
             ["position2d", {
                     bufferManager: new BufferManager(globe.gl, 360 * 2 * 3, // plus 1 to cut
                     { bufferType: this._options.bufferType, initialCapacity: initialCapacity }),
@@ -143,19 +230,19 @@ export class Padding1DegreePlugin {
                             this._float32Array.fill(NaN); // reset the float32Array
                         }
                         for (let i = 0; i < 360; i++) {
-                            const startCoords = paddingInput.startCoords[i];
-                            const endCoords = paddingInput.endCoords[i];
-                            if (startCoords === null || endCoords === null) {
+                            const outerCoords = paddingInput.outerCoords[i];
+                            const innerCoords = paddingInput.innerCoords[i];
+                            if (outerCoords === null || innerCoords === null) {
                                 continue;
                             }
-                            let coords = globe.api_GetMercator2DPoint(startCoords[0], startCoords[1]);
+                            let coordsOuter = globe.api_GetMercator2DPoint(outerCoords[0], outerCoords[1]);
                             // fill the second coordinate with 0
-                            this._float32Array[i * 6] = coords[0];
-                            this._float32Array[i * 6 + 1] = coords[1];
-                            let innerCoords = globe.api_GetMercator2DPoint(endCoords[0], endCoords[1]);
+                            this._float32Array[i * 6] = coordsOuter[0];
+                            this._float32Array[i * 6 + 1] = coordsOuter[1];
+                            let coordsInner = globe.api_GetMercator2DPoint(innerCoords[0], innerCoords[1]);
                             // fill the second coordinate with 0
-                            this._float32Array[i * 6 + 2] = innerCoords[0];
-                            this._float32Array[i * 6 + 3] = innerCoords[1];
+                            this._float32Array[i * 6 + 2] = coordsInner[0];
+                            this._float32Array[i * 6 + 3] = coordsInner[1];
                         }
                         return this._float32Array.subarray(0, 360 * 2 * 3);
                     }
@@ -174,22 +261,22 @@ export class Padding1DegreePlugin {
                         }
                         const _float32Array = this._float32Array;
                         for (let i = 0; i < 360; i++) {
-                            const startCoords = paddingInput.startCoords[i];
-                            const endCoords = paddingInput.endCoords[i];
-                            if (startCoords === null || endCoords === null) {
+                            const outerCoords = paddingInput.outerCoords[i];
+                            const innerCoords = paddingInput.innerCoords[i];
+                            if (outerCoords === null || innerCoords === null) {
                                 continue;
                             }
                             const height = paddingInput.heightFromGroundIn3D ?? this._options.defaultHeightFromGroundIn3D;
-                            let coords = globe.api_GetCartesian3DPoint(startCoords[0], startCoords[1], height, this._options.isMSL);
+                            let coords = globe.api_GetCartesian3DPoint(outerCoords[0], outerCoords[1], height, this._options.isMSL);
                             // fill the second coordinate with 0
                             _float32Array[i * 9] = coords[0];
                             _float32Array[i * 9 + 1] = coords[1];
                             _float32Array[i * 9 + 2] = coords[2];
-                            let innerCoords = globe.api_GetCartesian3DPoint(endCoords[0], endCoords[1], height, this._options.isMSL);
+                            let coordsInner = globe.api_GetCartesian3DPoint(innerCoords[0], innerCoords[1], height, this._options.isMSL);
                             // fill the second coordinate with 0
-                            _float32Array[i * 9 + 3] = innerCoords[0];
-                            _float32Array[i * 9 + 4] = innerCoords[1];
-                            _float32Array[i * 9 + 5] = innerCoords[2];
+                            _float32Array[i * 9 + 3] = coordsInner[0];
+                            _float32Array[i * 9 + 4] = coordsInner[1];
+                            _float32Array[i * 9 + 5] = coordsInner[2];
                         }
                         return _float32Array.subarray(0, 360 * 3 * 3);
                     }
@@ -197,7 +284,7 @@ export class Padding1DegreePlugin {
             ],
         ]);
         if (this._options.variativeColorsOn) {
-            bufferManagersMap.set("color", {
+            bufferManagerMap.set("color", {
                 bufferManager: new BufferManager(globe.gl, 360 * 4 * 3, // 4 for RGBA
                 { bufferType: this._options.bufferType, initialCapacity: initialCapacity }),
                 adaptor: (paddingInput) => {
@@ -215,11 +302,11 @@ export class Padding1DegreePlugin {
                             this._float32Array[i * 12] = color[0];
                             this._float32Array[i * 12 + 1] = color[1];
                             this._float32Array[i * 12 + 2] = color[2];
-                            this._float32Array[i * 12 + 3] = color[3] * this._opacityLODCoef;
+                            this._float32Array[i * 12 + 3] = color[3];
                             this._float32Array[i * 12 + 4] = color[0];
                             this._float32Array[i * 12 + 5] = color[1];
                             this._float32Array[i * 12 + 6] = color[2];
-                            this._float32Array[i * 12 + 7] = 0; //color[3] * this._opacityLODCoef;
+                            this._float32Array[i * 12 + 7] = 0; //color[3] ;
                         }
                         return this._float32Array.subarray(0, 360 * 4 * 3);
                     }
@@ -233,11 +320,11 @@ export class Padding1DegreePlugin {
                                 this._float32Array[i * 12] = color[0];
                                 this._float32Array[i * 12 + 1] = color[1];
                                 this._float32Array[i * 12 + 2] = color[2];
-                                this._float32Array[i * 12 + 3] = color[3] * this._opacityLODCoef;
+                                this._float32Array[i * 12 + 3] = color[3];
                                 this._float32Array[i * 12 + 4] = color[0];
                                 this._float32Array[i * 12 + 5] = color[1];
                                 this._float32Array[i * 12 + 6] = color[2];
-                                this._float32Array[i * 12 + 7] = 0; // color[3] * this._opacityLODCoef;
+                                this._float32Array[i * 12 + 7] = 0.1; // color[3];
                                 i++;
                             }
                         }
@@ -247,7 +334,7 @@ export class Padding1DegreePlugin {
             });
         }
         const vaoInput = ["position3d", "position2d", "color"].map((name) => {
-            const bufferManager = bufferManagersMap.get(name);
+            const bufferManager = bufferManagerMap.get(name);
             if (!bufferManager) {
                 return null;
             }
@@ -258,8 +345,8 @@ export class Padding1DegreePlugin {
             };
         });
         this._vao = this.lineProgram.createVAO(vaoInput[0], vaoInput[1], vaoInput[2]);
-        this.bufferManagersMap = bufferManagersMap;
-        this.bufferOrchestrator.resetWithCapacity(bufferManagersMap, initialCapacity);
+        this.bufferManagerMap = bufferManagerMap;
+        this.bufferOrchestrator.resetWithCapacity(bufferManagerMap, initialCapacity);
         this._uboHandler = this.lineProgram.createUBO("STATIC_DRAW");
         this._uboHandler.updateSingle("u_color", new Float32Array(this._options.defaultColor));
     }
@@ -272,6 +359,8 @@ export class Padding1DegreePlugin {
             console.warn("Globe or LineProgram or VAO is not initialized, cannot draw");
             return;
         }
+        this._frameCounterTrigger?.trigger();
+        // this.__build();
         const gl = this.globe.gl;
         const drawOptions = {
             drawRange: {
@@ -280,7 +369,7 @@ export class Padding1DegreePlugin {
             },
         };
         gl.disable(gl.DEPTH_TEST);
-        this.lineProgram.draw(this._vao, drawOptions, this._pluginOpacity, this._uboHandler);
+        this.lineProgram.draw(this._vao, drawOptions, this._userOpacity * this._adaptiveOpacityMultiplier, this._uboHandler);
         gl.enable(gl.DEPTH_TEST);
     }
     free() {
@@ -293,6 +382,7 @@ export class Padding1DegreePlugin {
             return;
         }
         this._freed = true;
+        this._frameCounterTrigger?.free();
         LineStripProgramCache.release(this.lineProgram);
         this.lineProgram = null;
         this._uboHandler?.free();
@@ -300,58 +390,149 @@ export class Padding1DegreePlugin {
         this.globe.gl.deleteVertexArray(this._vao);
         this.globe = null;
         this._vao = null;
-        this.bufferManagersMap.forEach((bufferManager) => {
+        this.bufferManagerMap.forEach((bufferManager) => {
             bufferManager.bufferManager.free();
         });
         this._float32Array = null;
     }
+    _buildPaddings(level, subSetIDs = null) {
+        if (level === "input") {
+            this.__inner(subSetIDs);
+            this.__elevation(subSetIDs);
+        }
+        else if (level === "innerCircle") {
+            // Build inner circle paddings
+            if (this._options.adativePaddingSize) {
+                this.__innerCircle(subSetIDs);
+            }
+            this.__elevation(subSetIDs);
+        }
+        else if (level === "elevation") {
+            // Build elevation paddings
+            this.__elevation(subSetIDs);
+        }
+    }
+    __inner(subSetIDs = null) {
+        // Implement inner circle padding logic
+        console.log("innerCircle Level Update");
+        const datas = this._dataMap;
+        let keys;
+        if (subSetIDs) {
+            keys = subSetIDs;
+        }
+        else {
+            keys = Array.from(datas.keys());
+        }
+        for (const key of keys) {
+            const value = datas.get(key);
+            if (!value)
+                continue;
+            // Implement inner circle padding logic using key and value
+            const { innerCoords, outerCoords } = preAdapter(this.globe, value, this._innerPaddingRatio, null);
+            value.outerCoords = outerCoords;
+            value.innerCoords = innerCoords;
+        }
+    }
+    __innerCircle(subSetIDs = null) {
+        // Implement inner circle padding logic
+        console.log("innerCircle Level Update");
+        const datas = this._dataMap;
+        let keys;
+        if (subSetIDs) {
+            keys = subSetIDs;
+        }
+        else {
+            keys = Array.from(datas.keys());
+        }
+        for (const key of keys) {
+            const value = datas.get(key);
+            if (!value)
+                continue;
+            // Implement inner circle padding logic using key and value
+            const { innerCoords } = preAdapter(this.globe, value, this._innerPaddingRatio, value.outerCoords);
+            value.innerCoords = innerCoords;
+        }
+    }
+    __elevation(subSetIDs = null) {
+        this.__updateAdaptiveOpacityMultiplier();
+        const bufferToUpdate = [this.globe?.api_GetCurrentGeometry() === 1 ? "position2d" : "position3d"];
+        const datas = this._dataMap;
+        const wrapper = [null];
+        this._float32Array = new Float32Array(360 * 4 * 4); // largest float32Array
+        let keys;
+        if (subSetIDs) {
+            keys = subSetIDs;
+        }
+        else {
+            keys = Array.from(datas.keys());
+        }
+        for (const key of keys) {
+            const value = datas.get(key);
+            if (!value)
+                continue;
+            wrapper[0] = value;
+            this.bufferOrchestrator.updateBulk(wrapper, this.bufferManagerMap, bufferToUpdate);
+        }
+        this._float32Array = null; // reset the float32Array
+    }
+    __build(globeChanges) {
+        if (globeChanges.lod) {
+            this.__updateLODRelatedParameters();
+            this._buildPaddings("innerCircle");
+        }
+        else if (globeChanges.look || globeChanges.geometry) {
+            this._buildPaddings("elevation");
+        }
+    }
     __updateLODRelatedParameters() {
         const lod = this.globe?.api_GetCurrentLODWithDecimal();
         this._innerPaddingRatio = 1 - Math.pow(0.7, lod);
     }
-    _buildPaddings(level) {
-    }
-    __onCamOrLodChange() {
-        //TODO: implement -> on lod change the _innerPaddingRatio and all positions should be recalculated.
-        // calculation
-        // if cam change, recalculate 3d positions
+    __updateAdaptiveOpacityMultiplier() {
+        if (this._options.adaptiveOpacity === true) {
+            const currentLod = this.globe?.api_GetCurrentLODWithDecimal();
+            this._adaptiveOpacityMultiplier = Math.max(1 - (2.9 / currentLod), 0.1);
+        }
+        else {
+            this._adaptiveOpacityMultiplier = 1; // TODO: set this once on adaptiveOpacity is Set to false
+        }
     }
 }
-function preAdapter(globe, paddingInput, paddingRatio, startCoords) {
-    const endCoords = new Array(360);
-    if (startCoords === null) {
-        startCoords = new Array(360);
+function preAdapter(globe, paddingInput, paddingRatio, outerCoords) {
+    const innerCoords = new Array(360);
+    if (outerCoords === null) {
+        outerCoords = new Array(360);
         for (let i = 0; i < 360; i++) {
             const { long, lat } = globe.Math.FindPointByPolar(paddingInput.center[0], // center long
             paddingInput.center[1], // center lat
-            paddingInput.outerRadius, // outer radius
+            paddingInput.radius, // outer radius
             i);
             const { long: endLong, lat: endLat } = globe.Math.FindPointByPolar(paddingInput.center[0], // center long
             paddingInput.center[1], // center lat
-            paddingInput.outerRadius * paddingRatio, // inner radius
+            paddingInput.radius * paddingRatio, // inner radius
             i);
             const longDifference = Math.abs(long - endLong);
             const latDifference = Math.abs(lat - endLat);
             if (longDifference > 45) {
-                startCoords[i] = null;
-                endCoords[i] = null;
+                outerCoords[i] = null;
+                innerCoords[i] = null;
                 continue;
             }
             // Assign the calculated coordinates
-            startCoords[i] = [long, lat];
-            endCoords[i] = [endLong, endLat];
+            outerCoords[i] = [long, lat];
+            innerCoords[i] = [endLong, endLat];
         }
     }
     else {
-        // Handle case when startCoords is provided
+        // Handle case when outerCoords is provided
         for (let i = 0; i < 360; i++) {
-            if (startCoords[i] === null) {
-                endCoords[i] = null;
+            if (outerCoords[i] === null) {
+                innerCoords[i] = null;
                 continue;
             }
-            const { long: endLong, lat: endLat } = globe.Math.FindPointByPolar(paddingInput.center[0], paddingInput.center[1], paddingInput.outerRadius * paddingRatio, i);
-            endCoords[i] = [endLong, endLat];
+            const { long: endLong, lat: endLat } = globe.Math.FindPointByPolar(paddingInput.center[0], paddingInput.center[1], paddingInput.radius * paddingRatio, i);
+            innerCoords[i] = [endLong, endLat];
         }
     }
-    return { startCoords, endCoords };
+    return { outerCoords, innerCoords };
 }

package/util/account/single-attribute-buffer-management/buffer-orchestrator.js

@@ -188,7 +188,7 @@ export class BufferOrchestrator {
                 offsets.push(offset);
             }
             else {
-                throw new Error("updateBulk item Key does not exist");
+                throw new Error(`updateBulk item Key does not exist, cannot update: ${item.key}`);
             }
         }
         if (bufferKeys) {

package/util/build-strategy/static-dynamic.js

@@ -9,21 +9,31 @@ export class StaticDynamicStrategy {
     _staticDynamicState = StaticDynamicState.DYNAMIC;
     _transitionLevel = 8; // Default transition level
     _lastStaticDynamicState = StaticDynamicState.STATIC;
-    constructor(globe, transitionLevel = 8) {
+    _lastGeometry = null;
+    _toStatic;
+    constructor(globe, transitionLevel = 8, toStatic) {
         this.globe = globe;
         this._transitionLevel = transitionLevel;
+        this._toStatic = toStatic;
         this.updateState();
     }
     updateState() {
         const currentLOD = this.globe.api_GetCurrentLODWithDecimal();
         const state = currentLOD < this._transitionLevel ? StaticDynamicState.STATIC : StaticDynamicState.DYNAMIC;
+        const currentGeometry = this.globe.api_GetCurrentGeometry();
         if (this._lastStaticDynamicState === StaticDynamicState.DYNAMIC && state === StaticDynamicState.STATIC) {
             this._staticDynamicState = StaticDynamicState.TO_STATIC;
+            this._toStatic();
+        }
+        else if ((currentGeometry !== this._lastGeometry) && state === StaticDynamicState.STATIC) {
+            this._staticDynamicState = StaticDynamicState.TO_STATIC;
+            this._toStatic();
         }
         else {
             this._staticDynamicState = state;
         }
         this._lastStaticDynamicState = this._staticDynamicState;
+        this._lastGeometry = currentGeometry;
     }
     getState() {
         return this._staticDynamicState;

package/util/frame-counter-trigger.js

@@ -0,0 +1,84 @@
+import { CameraUniformBlockTotemCache } from "../programs/totems/camerauniformblock";
+export class FrameCounterTrigger {
+    globe;
+    count = 0;
+    threshold;
+    timeoutMs;
+    timeoutId = null;
+    accumulatedChanges = {
+        geometry: false,
+        look: false,
+        lod: false,
+        lod2DWheel: false,
+        elevationScale: false,
+        screenMoved: false
+    };
+    cameraBlockTotem;
+    updateCallback;
+    constructor(globe, threshold, timeoutMs, updateCallback) {
+        this.threshold = threshold;
+        this.timeoutMs = timeoutMs;
+        this.updateCallback = updateCallback;
+        this.globe = globe;
+        this.cameraBlockTotem = CameraUniformBlockTotemCache.get(globe);
+    }
+    trigger(level = null) {
+        const globeChanges = this.cameraBlockTotem.getGlobeChanges();
+        if (!globeChanges.screenMoved)
+            return;
+        this.setChanges(globeChanges);
+        if (globeChanges.geometry || globeChanges.elevationScale || globeChanges.lod2DWheel) {
+            this.triggerUpdate();
+            return;
+        }
+        this.count++;
+        if (this.count === 1) {
+            this.startTimeout();
+        }
+        if (this.count >= this.threshold) {
+            this.triggerUpdate();
+        }
+    }
+    startTimeout() {
+        this.clearTimeout();
+        this.timeoutId = setTimeout(() => {
+            this.triggerUpdate();
+        }, this.timeoutMs);
+    }
+    triggerUpdate() {
+        this.clearTimeout();
+        this.updateCallback(this.accumulatedChanges);
+        this.reset();
+    }
+    clearTimeout() {
+        if (this.timeoutId) {
+            clearTimeout(this.timeoutId);
+            this.timeoutId = null;
+        }
+    }
+    setChanges(changes) {
+        // accumulate true states until reset
+        this.accumulatedChanges.geometry = this.accumulatedChanges.geometry || changes.geometry;
+        this.accumulatedChanges.look = this.accumulatedChanges.look || changes.look;
+        this.accumulatedChanges.lod = this.accumulatedChanges.lod || changes.lod;
+        this.accumulatedChanges.elevationScale = this.accumulatedChanges.elevationScale || changes.elevationScale;
+        this.accumulatedChanges.screenMoved = this.accumulatedChanges.screenMoved || changes.screenMoved;
+        this.accumulatedChanges.lod2DWheel = this.accumulatedChanges.lod2DWheel || changes.lod2DWheel;
+    }
+    getLevel() {
+        return this.accumulatedChanges;
+    }
+    reset() {
+        this.count = 0;
+        this.accumulatedChanges.geometry = false;
+        this.accumulatedChanges.look = false;
+        this.accumulatedChanges.lod = false;
+        this.accumulatedChanges.lod2DWheel = false;
+        this.accumulatedChanges.elevationScale = false;
+        this.accumulatedChanges.screenMoved = false;
+        this.clearTimeout();
+    }
+    free() {
+        CameraUniformBlockTotemCache.release(this.globe);
+    }
+}

package/wind/imagetovectorfieldandmagnitude.js

@@ -30,3 +30,26 @@ export default function imageToMagnitude(imageData) {
     }
     return magnitudeArray;
 }
+export function imageToRadianAngle(imageData) {
+    const { image, uMax, vMax, uMin, vMin, height, width } = imageData;
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
+    canvas.width = width;
+    canvas.height = height;
+    ctx.drawImage(image, 0, 0, width, height);
+    const img = ctx.getImageData(0, 0, width, height);
+    const data = img.data;
+    const angleArray = new Float32Array(height * width);
+    const uDiff = uMax - uMin;
+    const vDiff = vMax - vMin;
+    for (let i = 0; i < data.length; i += 4) {
+        const r = data[i];
+        const g = data[i + 1];
+        const u = uMin + (uDiff * r) / 255;
+        const v = vMin + (vDiff * g) / 255;
+        const angle = Math.atan2(v, u);
+        const index = i / 4;
+        angleArray[index] = angle;
+    }
+    return angleArray;
+}

package/wind/index.js

@@ -1,5 +1,5 @@
 import WindPlugin from "./plugin";
 import createVectorFieldImage from "./vectorfieldimage";
-import imageToMagnitude from "./imagetovectorfieldandmagnitude";
+import imageToMagnitude, { imageToRadianAngle } from "./imagetovectorfieldandmagnitude";
 import { createImageFromBase64 } from "../util/webglobjectbuilders";
-export { createVectorFieldImage, imageToMagnitude, WindPlugin, createImageFromBase64 };
+export { createVectorFieldImage, imageToMagnitude, WindPlugin, createImageFromBase64, imageToRadianAngle };