@pirireis/webglobeplugins 0.15.22-alpha → 0.15.24

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

@@ -16,15 +16,16 @@ 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;
-    _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"];
@@ -42,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();
@@ -52,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");
@@ -63,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");
@@ -82,7 +161,7 @@ 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, drawRender = false) {
@@ -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 }),
@@ -148,10 +235,10 @@ export class Padding1DegreePlugin {
                             if (outerCoords === null || innerCoords === null) {
                                 continue;
                             }
-                            let coords = globe.api_GetMercator2DPoint(outerCoords[0], outerCoords[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];
+                            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] = coordsInner[0];
@@ -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) => {
@@ -237,7 +324,7 @@ export class Padding1DegreePlugin {
                                 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._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,9 +359,8 @@ export class Padding1DegreePlugin {
             console.warn("Globe or LineProgram or VAO is not initialized, cannot draw");
             return;
         }
-        if (this.globe.api_IsScreenMoving()) {
-            this.__build();
-        }
+        this._frameCounterTrigger?.trigger();
+        // this.__build();
         const gl = this.globe.gl;
         const drawOptions = {
             drawRange: {
@@ -296,6 +382,7 @@ export class Padding1DegreePlugin {
             return;
         }
         this._freed = true;
+        this._frameCounterTrigger?.free();
         LineStripProgramCache.release(this.lineProgram);
         this.lineProgram = null;
         this._uboHandler?.free();
@@ -303,68 +390,112 @@ 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;
     }
-    __updateLODRelatedParameters() {
-        const lod = this.globe?.api_GetCurrentLODWithDecimal();
-        this._innerPaddingRatio = 1 - Math.pow(0.7, lod);
-    }
-    _buildPaddings(level) {
+    _buildPaddings(level, subSetIDs = null) {
         if (level === "input") {
-            // Build input paddings
+            this.__inner(subSetIDs);
+            this.__elevation(subSetIDs);
         }
         else if (level === "innerCircle") {
             // Build inner circle paddings
-            this.__innerCircle();
-            this.__elevation();
+            if (this._options.adativePaddingSize) {
+                this.__innerCircle(subSetIDs);
+            }
+            this.__elevation(subSetIDs);
         }
         else if (level === "elevation") {
             // Build elevation paddings
-            this.__elevation();
+            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() {
+    __innerCircle(subSetIDs = null) {
         // Implement inner circle padding logic
         console.log("innerCircle Level Update");
         const datas = this._dataMap;
-        for (const [key, value] of datas) {
+        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() {
-        this._updateAdaptiveOpacityMultiplier();
-        const bufferToUpdate = this.globe?.api_GetCurrentGeometry() === 1 ? "position2d" : "position3d";
-        console.log(bufferToUpdate);
+    __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
-        for (const [key, value] of datas) {
+        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.bufferManagersMap, [bufferToUpdate]);
+            this.bufferOrchestrator.updateBulk(wrapper, this.bufferManagerMap, bufferToUpdate);
         }
         this._float32Array = null; // reset the float32Array
     }
-    __build() {
-        const globeChanges = this.lineProgram?.cameraBlockTotem.getGlobeChanges();
-        if (globeChanges.lodChanged) {
-            console.log("lod changed");
-        }
-        if (globeChanges.lodChanged) {
+    __build(globeChanges) {
+        if (globeChanges.lod) {
             this.__updateLODRelatedParameters();
             this._buildPaddings("innerCircle");
         }
-        else if (globeChanges.lookChanged || globeChanges.geometryChanged) {
+        else if (globeChanges.look || globeChanges.geometry) {
             this._buildPaddings("elevation");
         }
     }
-    _updateAdaptiveOpacityMultiplier() {
-        const currentLod = this.globe?.api_GetCurrentLODWithDecimal();
-        this._adaptiveOpacityMultiplier = Math.max(1 - (2.9 / currentLod), 0.1);
+    __updateLODRelatedParameters() {
+        const lod = this.globe?.api_GetCurrentLODWithDecimal();
+        this._innerPaddingRatio = 1 - Math.pow(0.7, lod);
+    }
+    __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, outerCoords) {
@@ -374,11 +505,11 @@ function preAdapter(globe, paddingInput, paddingRatio, outerCoords) {
         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);
@@ -399,7 +530,7 @@ function preAdapter(globe, paddingInput, paddingRatio, outerCoords) {
                 innerCoords[i] = null;
                 continue;
             }
-            const { long: endLong, lat: endLat } = globe.Math.FindPointByPolar(paddingInput.center[0], paddingInput.center[1], paddingInput.outerRadius * paddingRatio, i);
+            const { long: endLong, lat: endLat } = globe.Math.FindPointByPolar(paddingInput.center[0], paddingInput.center[1], paddingInput.radius * paddingRatio, i);
             innerCoords[i] = [endLong, endLat];
         }
     }

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 };

package/wind/plugin.js

@@ -2,7 +2,7 @@
  * Author: Toprak Nihat Deniz Ozturk
  */
 import * as util from "../util";
-import imageToMagnitude from "./imagetovectorfieldandmagnitude";
+import imageToMagnitude, { imageToRadianAngle } from "./imagetovectorfieldandmagnitude";
 import { TexturePointSampler } from "../util/heatwavedatamanager/texture-point-sampler";
 /**
  * Shader Dökümanı:
@@ -531,22 +531,43 @@ export default class WindPlugin {
             this.setWind(windData);
         };
     }
-    getTexturePointSampler() {
-        if (!this.texturePointSampler)
-            this._createTexturePointSampler();
-        return this.texturePointSampler;
+    /**
+     * @param
+     * @returns
+     */
+    getTexturePointSampler(type = `magnitude`) {
+        if (type == `magnitude`) {
+            if (!this.texturePointSampler)
+                this._createTexturePointSampler();
+            return this.texturePointSampler;
+        }
+        else if (type == `angle`) {
+            if (!this.texturePointSamplerAngle)
+                this._createTexturePointSamplerAngle();
+            return this.texturePointSamplerAngle;
+        }
+        this._setCoorcinatesDataCalculatorData();
+    }
+    _createTexturePointSamplerAngle() {
+        const { bbox, width, height } = this._windDataMeta;
+        this.texturePointSamplerAngle = new TexturePointSampler(bbox, width, height);
     }
     _createTexturePointSampler() {
         const { bbox, width, height } = this._windDataMeta;
         this.texturePointSampler = new TexturePointSampler(bbox, width, height);
-        this._setCoorcinatesDataCalculatorData();
     }
     _setCoorcinatesDataCalculatorData() {
-        if (!this.windData || !this.texturePointSampler) {
+        if (!this.windData) {
             return;
         }
-        const magnitude = imageToMagnitude(this.windData);
-        this.texturePointSampler.updateTextureData(0, magnitude, magnitude);
+        if (this.texturePointSamplerAngle) {
+            const angle = imageToRadianAngle(this.windData);
+            this.texturePointSamplerAngle.updateTextureData(0, angle, angle);
+        }
+        if (this.texturePointSampler) {
+            const magnitude = imageToMagnitude(this.windData);
+            this.texturePointSampler.updateTextureData(0, magnitude, magnitude);
+        }
     }
     // -----------------------------------------------
     //             --- inner methods ---