@pirireis/webglobeplugins 0.6.28-c → 0.6.30-c

package/rangerings/plugin.js

@@ -53,242 +53,32 @@ import { populateFloat32Array } from "../util/jshelpers/data-filler";
 import { RingAccount, ringKeyMethod, ringBigPaddingKeyMethod } from "./ring-account";
 import { CirclePadding3DCache } from "../programs/line-on-globe/degree-padding-around-circle-3d";
 import { LineOnGlobeCache } from '../programs/line-on-globe/naive-accurate';
-
 import RangeRingAngleText from "./rangeringangletext";
+import { Z_ALPHA_MODE } from "../programs/line-on-globe/util";
 
-/**
- * Programs:
- * 
- * circle3d circle2d padding3d padding2d
- * 
- *  
- * */
+const CIRCLE_FLAT_EDGE_COUNT = 362; // 360 + 2 for closing the circle and a cutting point
 
 
-/**
- * [+] Draw circles
- * [+] BUG BUFFER OVERFLOW
- * [+] Draw one degree paddings 2d
- * [+] Create a program for accurate padding 3d
- * [+] Draw one degree paddings 3d
- * [+] Draw big paddings
- * [+] DrawText
- * [+] big paddings does not remove
- */
 
-// TODO make long,lat -> long, lat
 
 class RangeRings {
-    constructor(id, { oneDegreePadding = true, showNumbers = true, numbersStyle = null, opacity = 1 } = {}) {
+    constructor(id, { oneDegreePadding = true, showNumbers = true, numbersStyle = null, opacity = 1, zAlphaOnDegreePadding = Z_ALPHA_MODE.ON } = {}) {
 
         this.id = id;
 
         this._oneDegreePadding = oneDegreePadding;
+        this._zAlphaOnDegreePadding = zAlphaOnDegreePadding;
         this._showNumbers = showNumbers;
         this._numbersStyle = numbersStyle;
         this._opacity = opacity;
-        this._circleFlatEdgeCount = 362;
         this._ringAccount = new RingAccount();
 
     }
 
 
-    init(globe, gl) {
-        this.globe = globe;
-        this.gl = gl;
-        this._initPrograms();
-        this._initBufferManagers();
-        if (this._showNumbers) {
-            this.textPlugin = new RangeRingAngleText(globe, this.id + "text", { flatCompassMode: this.compass, style: this._numbersStyle, opacity: this._opacity });
-            delete this._numbersStyle;
-        }
-    }
-
-
-    _initPrograms() {
-        const { globe } = this;
-        this._circleProgram2D = CircleCache2D.get(globe);
-        this._circleProgram3D = CircleCache3D.get(globe);
-        this._padding2dProgram = LinesColorInstancedFlatCache.get(globe);
-        this._padding3dProgram = CirclePadding3DCache.get(globe);
-        this._bigPadding3dFlatProgram = LineOnGlobeCache.get(globe);
-
-    }
-
-
-    _initBufferManagers() {
-        const { globe, gl, _circleFlatEdgeCount } = this;
-
-        const initialCapacity = 10;
-        const bufferType = "DYNAMIC_DRAW";
-        // circle2d, circle3d, 1 degree paddings,
-        this.bufferOrchestrator = new BufferOrchestrator({ capacity: initialCapacity });
-
-        this.bufferManagersCompMap = new Map(
-            [
-                // circle 3D
-                ["centerCoords3d", {
-                    'bufferManager': new BufferManager(gl, 3, { bufferType, initialCapacity }),
-                    'adaptor': (item) => new Float32Array(item.centerCoords3d),
-                }],
-                ["rgba", {
-                    'bufferManager': new BufferManager(gl, 4, { bufferType, initialCapacity }),
-                    'adaptor': (item) => new Float32Array(item.hide === 1 ? [0, 0, 0, 0] : item.rgba)
-                }],
-                ["radius3d", {
-                    'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
-                    'adaptor': (item) => new Float32Array([item.radius])
-                }],
-                ["radius3dsmall", {
-                    'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
-                    'adaptor': (item) => new Float32Array([item.radius - item.padding / 3])
-                }],
-                ["circleDashAngle", {
-                    'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
-                    'adaptor': (item) => new Float32Array([1]),
-                }],
-                ["dashOpacity", {
-                    'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
-                    'adaptor': (item) => new Float32Array([1]),
-                }],
-
-                // circle 2D 
-                ["centerCoords2dflatForPadding", {
-                    'bufferManager': new BufferManager(gl, _circleFlatEdgeCount * 2, { bufferType, initialCapacity }),
-                    'adaptor': (item) => item.centerCoords2dflatForPadding,
-                }],
-                ["centerCoords2dflat", {
-                    'bufferManager': new BufferManager(gl, _circleFlatEdgeCount * 2, { bufferType, initialCapacity }),
-                    'adaptor': (item) => item.centerCoords2dflat,
-                }],
-                ["rgbaMercator", {
-                    'bufferManager': new BufferManager(gl, 4 * _circleFlatEdgeCount, { bufferType, initialCapacity }),
-                    'adaptor': (item) => populateFloat32Array.fillWithListData(_circleFlatEdgeCount, item.hide === 1 ? [0, 0, 0, 0] : item.rgba),
-                }],
-                ["circleDashAngleMercator", {
-                    'bufferManager': new BufferManager(gl, _circleFlatEdgeCount, { bufferType, initialCapacity }),
-                    'adaptor': (item) => populateFloat32Array.fillFloat32Array(_circleFlatEdgeCount, 1),
-                }],
-                ["dashOpacityMercator", {
-                    'bufferManager': new BufferManager(gl, _circleFlatEdgeCount, { bufferType, initialCapacity }),
-                    'adaptor': (item) => populateFloat32Array.fillFloat32Array(_circleFlatEdgeCount, 1),
-                }],
-            ]
-        );
-
-        const obj = function (bufferManagerComp, divisor = 1) {
-            return { 'buffer': bufferManagerComp.bufferManager.buffer, 'stride': 0, 'offset': 0, divisor }
-
-        };
-        this.circle2DVao = this._circleProgram2D.createVAO(
-            ...["centerCoords2dflat", "rgbaMercator", "circleDashAngleMercator", "dashOpacityMercator"].map(key => obj(this.bufferManagersCompMap.get(key)))
-        );
-        this.circle3DVao = this._circleProgram3D.createVAO(
-            ...["centerCoords3d", "radius3d", "rgba", "circleDashAngle", "dashOpacity"].map(key => obj(this.bufferManagersCompMap.get(key)))
-        );
-
-        this.oneDegreePaddingVao = this._padding2dProgram.createVAO(
-            { buffer: this.bufferManagersCompMap.get("centerCoords2dflat").bufferManager.buffer, size: 2, stride: 0, offset: 0 },
-            { buffer: this.bufferManagersCompMap.get("centerCoords2dflatForPadding").bufferManager.buffer, size: 2, stride: 0, offset: 0 },
-            { buffer: this.bufferManagersCompMap.get("rgbaMercator").bufferManager.buffer, size: 4, stride: 0, offset: 0 },
-        );
-
-        // PADDING 
-        // this one needs glue to assosiate rings and their big paddings since the count for center is not fixed
-        this.paddingBufferOrchestrator = new BufferOrchestrator({ capacity: initialCapacity });
-        this.bufferManagersCompMapPadding = new Map(
-            [
-                ["circlePoint", {
-                    'bufferManager': new BufferManager(gl, 2, { bufferType, initialCapacity }),
-                    'adaptor': (item) => item.circlePoint,
-                }],
-                ["paddingPoint", {
-                    'bufferManager': new BufferManager(gl, 2, { bufferType, initialCapacity }),
-                    'adaptor': (item) => item.paddingPoint,
-                }],
-                ["circlePoint3d", {
-                    'bufferManager': new BufferManager(gl, 3, { bufferType, initialCapacity }),
-                    'adaptor': (item) => item.circlePoint3d
-                }],
-                ["paddingPoint3d", {
-                    'bufferManager': new BufferManager(gl, 3, { bufferType, initialCapacity }),
-                    'adaptor': (item) => item.paddingPoint3d
-                }],
-                ["rgba", {
-                    'bufferManager': new BufferManager(gl, 4, { bufferType, initialCapacity }),
-                    'adaptor': (item) => new Float32Array(item.rgba)
-                }],
-
-                ["dashOpacity", {
-                    'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
-                    'adaptor': (item) => new Float32Array([1]),
-                }],
-                ["dashRatio", {
-                    'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
-                    'adaptor': (item) => new Float32Array([1]),
-                }],
-            ]
-        );
-
-        this._bigPadding3dFlatVAO = this._bigPadding3dFlatProgram.createVAO(
-            ...["circlePoint", "circlePoint3d", "paddingPoint", "paddingPoint3d", "dashRatio", "dashOpacity", "rgba",].map(key => obj(this.bufferManagersCompMapPadding.get(key)))
-        );
-
-        this._padding3dOneDegreeVao = this._padding3dProgram.createVAO(
-            ...["centerCoords3d", "radius3d", "radius3dsmall", "rgba"].map(key => obj(this.bufferManagersCompMap.get(key)))
-        );
-
-    }
-
-
-    // GLOBE API
-
-    draw3D() {
-        const {
-            globe, gl,
-            _circleProgram2D, _circleProgram3D, _padding2dProgram, _padding3dProgram, _bigPadding3dFlatProgram,
-            circle2DVao, circle3DVao, oneDegreePaddingVao, _padding3dOneDegreeVao, _bigPadding3dFlatVAO,
-            bufferOrchestrator, paddingBufferOrchestrator,
-            _circleFlatEdgeCount, _opacity, _oneDegreePadding } = this;
-        gl.disable(gl.DEPTH_TEST);
-        const is3D = globe.api_GetCurrentGeometry() === 0;
-        // const lod = globe.api_GetCurrentLOD();
-        if (is3D) {
-            _circleProgram3D.draw(circle3DVao, bufferOrchestrator.length, _opacity);
-            if (_oneDegreePadding) _padding3dProgram.draw(_padding3dOneDegreeVao, bufferOrchestrator.length, 360, 1, _opacity);
-        } else {
-            _circleProgram2D.draw(circle2DVao, bufferOrchestrator.length, _circleFlatEdgeCount, _opacity);
-            // _padding2dProgram.draw(bigPaddingVAO, paddingBufferOrchestrator.length, _opacity);
-            if (_oneDegreePadding) _padding2dProgram.draw(oneDegreePaddingVao, bufferOrchestrator.length * _circleFlatEdgeCount, _opacity);
-        }
-        _bigPadding3dFlatProgram.draw(_bigPadding3dFlatVAO, paddingBufferOrchestrator.length, _opacity);
-        gl.enable(gl.DEPTH_TEST);
-    }
-
-    free() {
-        if (this._isFreed) return;
-        const { globe } = this;
-        this.bufferManagersCompMap.forEach(({ bufferManager }) => bufferManager.free());
-        this.bufferManagersCompMapPadding.forEach(({ bufferManager }) => bufferManager.free());
-        // delete vaos
-        this.gl.deleteVertexArray(this.circle2DVao);
-        this.gl.deleteVertexArray(this.circle3DVao);
-        this.gl.deleteVertexArray(this.oneDegreePaddingVao);
-        this.gl.deleteVertexArray(this._padding3dOneDegreeVao);
-        this.gl.deleteVertexArray(this._bigPadding3dFlatVAO);
-        // delete programs
-        CircleCache2D.release(globe);
-        CircleCache3D.release(globe);
-        LinesColorInstancedFlatCache.release(globe);
-        CirclePadding3DCache.release(globe);
-        LineOnGlobeCache.release(globe);
-        this.textPlugin?.free();
-
-        this._isFreed = true;
-    }
 
 
-    // API
+    // USER API
 
     /**
      * @method updateCentersCoordinate @param { Array < { centerID, long,lat } >} items 
@@ -354,10 +144,8 @@ class RangeRings {
             const paddingDatas = this.__reconstructCentralRingsBigPaddings(item.centerID);
             paddingBufferOrchestrator.insertBulk(paddingDatas, bufferManagersCompMapPadding);
         }
-
         this.textPlugin?.insertBulk(items);
         globe.DrawRender();
-
     }
 
 
@@ -458,7 +246,6 @@ class RangeRings {
      * @method setOpacity @param { number } opacity
     */
     setOpacity(opacity) {
-        console.log("opacity", opacity, typeof opacity);
         if (typeof opacity !== "number" || opacity < 0 || opacity > 1) throw new Error("Invalid opacity value");
         this._opacity = opacity;
         this.textPlugin?.setOpacity(opacity);
@@ -470,25 +257,163 @@ class RangeRings {
      * @method setOneDegreePaddingOn //  performance consuming, might be removed
     */
     setOneDegreePaddingOn(isOneDegreePaddingOn) {
-        // TODO
+        if (typeof isOneDegreePaddingOn !== "boolean") throw new Error("Invalid value for one degree padding");
         if (this._oneDegreePadding === isOneDegreePaddingOn) return;
         this._oneDegreePadding = isOneDegreePaddingOn;
+        this.globe.DrawRender();
+    }
 
-        // Complicated
-        // if (isOneDegreePaddingOn) {
-        //     // fill the Coordinate Buffer for 1 degree Padding
-        //     // Use orchastrator to create data for all rings
 
-        // } else {
-        //     // empty the Coordinate Buffer for 1 degree Padding
-        // }
+    setZAlphaOnDegreePadding(zAlphaOnDegreePadding) {
+        if (zAlphaOnDegreePadding !== 0 && zAlphaOnDegreePadding !== 1) throw new Error("Invalid value for zAlphaOnDegreePadding");
+        if (this._zAlphaOnDegreePadding === zAlphaOnDegreePadding) return;
+        this._zAlphaOnDegreePadding = zAlphaOnDegreePadding;
+        this.globe.DrawRender();
     }
 
+
+    // PRIVATE METHODS
+
+    _initPrograms() {
+        const { globe } = this;
+        this._circleProgram2D = CircleCache2D.get(globe);
+        this._circleProgram3D = CircleCache3D.get(globe);
+        this._padding2dProgram = LinesColorInstancedFlatCache.get(globe);
+        this._padding3dProgram = CirclePadding3DCache.get(globe);
+        this._bigPadding3dFlatProgram = LineOnGlobeCache.get(globe);
+
+    }
+
+
+    _initBufferManagers() {
+        const { gl } = this;
+
+        const initialCapacity = 10;
+        const bufferType = "DYNAMIC_DRAW";
+        // circle2d, circle3d, 1 degree paddings,
+        this.bufferOrchestrator = new BufferOrchestrator({ capacity: initialCapacity });
+
+        this.bufferManagersCompMap = new Map(
+            [
+                // circle 3D
+                ["centerCoords3d", {
+                    'bufferManager': new BufferManager(gl, 3, { bufferType, initialCapacity }),
+                    'adaptor': (item) => new Float32Array(item.centerCoords3d),
+                }],
+                ["rgba", {
+                    'bufferManager': new BufferManager(gl, 4, { bufferType, initialCapacity }),
+                    'adaptor': (item) => new Float32Array(item.hide === 1 ? [0, 0, 0, 0] : item.rgba)
+                }],
+                ["radius3d", {
+                    'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
+                    'adaptor': (item) => new Float32Array([item.radius])
+                }],
+                ["radius3dsmall", {
+                    'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
+                    'adaptor': (item) => new Float32Array([item.radius - item.padding / 3])
+                }],
+                ["circleDashAngle", {
+                    'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
+                    'adaptor': (item) => new Float32Array([1]),
+                }],
+                ["dashOpacity", {
+                    'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
+                    'adaptor': (item) => new Float32Array([1]),
+                }],
+
+                // circle 2D 
+                ["centerCoords2dflatForPadding", {
+                    'bufferManager': new BufferManager(gl, CIRCLE_FLAT_EDGE_COUNT * 2, { bufferType, initialCapacity }),
+                    'adaptor': (item) => item.centerCoords2dflatForPadding,
+                }],
+                ["centerCoords2dflat", {
+                    'bufferManager': new BufferManager(gl, CIRCLE_FLAT_EDGE_COUNT * 2, { bufferType, initialCapacity }),
+                    'adaptor': (item) => item.centerCoords2dflat,
+                }],
+                ["rgbaMercator", {
+                    'bufferManager': new BufferManager(gl, 4 * CIRCLE_FLAT_EDGE_COUNT, { bufferType, initialCapacity }),
+                    'adaptor': (item) => populateFloat32Array.fillWithListData(CIRCLE_FLAT_EDGE_COUNT, item.hide === 1 ? [0, 0, 0, 0] : item.rgba),
+                }],
+                ["circleDashAngleMercator", {
+                    'bufferManager': new BufferManager(gl, CIRCLE_FLAT_EDGE_COUNT, { bufferType, initialCapacity }),
+                    'adaptor': (item) => populateFloat32Array.fillFloat32Array(CIRCLE_FLAT_EDGE_COUNT, 1),
+                }],
+                ["dashOpacityMercator", {
+                    'bufferManager': new BufferManager(gl, CIRCLE_FLAT_EDGE_COUNT, { bufferType, initialCapacity }),
+                    'adaptor': (item) => populateFloat32Array.fillFloat32Array(CIRCLE_FLAT_EDGE_COUNT, 1),
+                }],
+            ]
+        );
+
+        const obj = function (bufferManagerComp, divisor = 1) {
+            return { 'buffer': bufferManagerComp.bufferManager.buffer, 'stride': 0, 'offset': 0, divisor }
+
+        };
+        this._circle2DVao = this._circleProgram2D.createVAO(
+            ...["centerCoords2dflat", "rgbaMercator", "circleDashAngleMercator", "dashOpacityMercator"].map(key => obj(this.bufferManagersCompMap.get(key)))
+        );
+        this._circle3DVao = this._circleProgram3D.createVAO(
+            ...["centerCoords3d", "radius3d", "rgba", "circleDashAngle", "dashOpacity"].map(key => obj(this.bufferManagersCompMap.get(key)))
+        );
+
+        this._oneDegreePaddingVao = this._padding2dProgram.createVAO(
+            { buffer: this.bufferManagersCompMap.get("centerCoords2dflat").bufferManager.buffer, size: 2, stride: 0, offset: 0 },
+            { buffer: this.bufferManagersCompMap.get("centerCoords2dflatForPadding").bufferManager.buffer, size: 2, stride: 0, offset: 0 },
+            { buffer: this.bufferManagersCompMap.get("rgbaMercator").bufferManager.buffer, size: 4, stride: 0, offset: 0 },
+        );
+
+        // PADDING 
+        // this one needs glue to assosiate rings and their big paddings since the count for center is not fixed
+        this.paddingBufferOrchestrator = new BufferOrchestrator({ capacity: initialCapacity });
+        this.bufferManagersCompMapPadding = new Map(
+            [
+                ["circlePoint", {
+                    'bufferManager': new BufferManager(gl, 2, { bufferType, initialCapacity }),
+                    'adaptor': (item) => item.circlePoint,
+                }],
+                ["paddingPoint", {
+                    'bufferManager': new BufferManager(gl, 2, { bufferType, initialCapacity }),
+                    'adaptor': (item) => item.paddingPoint,
+                }],
+                ["circlePoint3d", {
+                    'bufferManager': new BufferManager(gl, 3, { bufferType, initialCapacity }),
+                    'adaptor': (item) => item.circlePoint3d
+                }],
+                ["paddingPoint3d", {
+                    'bufferManager': new BufferManager(gl, 3, { bufferType, initialCapacity }),
+                    'adaptor': (item) => item.paddingPoint3d
+                }],
+                ["rgba", {
+                    'bufferManager': new BufferManager(gl, 4, { bufferType, initialCapacity }),
+                    'adaptor': (item) => new Float32Array(item.rgba)
+                }],
+
+                ["dashOpacity", {
+                    'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
+                    'adaptor': (item) => new Float32Array([1]),
+                }],
+                ["dashRatio", {
+                    'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
+                    'adaptor': (item) => new Float32Array([1]),
+                }],
+            ]
+        );
+
+        this._bigPadding3dFlatVAO = this._bigPadding3dFlatProgram.createVAO(
+            ...["circlePoint", "circlePoint3d", "paddingPoint", "paddingPoint3d", "dashRatio", "dashOpacity", "rgba",].map(key => obj(this.bufferManagersCompMapPadding.get(key)))
+        );
+
+        this._padding3dOneDegreeVao = this._padding3dProgram.createVAO(
+            ...["centerCoords3d", "radius3d", "radius3dsmall", "rgba"].map(key => obj(this.bufferManagersCompMap.get(key)))
+        );
+
+    }
+
+
     __reconstructCentralRingsBigPaddings(centerID) {
-        const { globe, _circleFlatEdgeCount } = this;
+        const { globe } = this;
         const centerItem = this._ringAccount.getCenter(centerID);
         if (centerItem === undefined) throw new Error("Center not found");
-        const findPointByPolar = globe.Math.FindPointByPolar;
         const { long, lat, stepAngle, rgba, rings, hide = 0, textHide = 0 } = centerItem;
         const result = [];
         const color = hide === 1 ? new Float32Array([0, 0, 0, 0]) : new Float32Array(rgba)
@@ -514,20 +439,22 @@ class RangeRings {
         return result;
     }
 
+    // IMPLICIT METHODS
+
     __reconstructCentralRings(centerID) {
-        const { globe, _circleFlatEdgeCount } = this;
+        const { globe } = this;
         const centerItem = this._ringAccount.getCenter(centerID);
         if (centerItem === undefined) throw new Error("Center not found");
 
-        const { long, lat, stepAngle, rgba, rings, hide = 0, textHide = 0 } = centerItem;
+        const { long, lat, rgba, rings, hide = 0, textHide = 0 } = centerItem;
         const centerCoords3d = globe.api_GetCartesian3DPoint(long, lat, 0, 0);
 
         const result = [];
 
         for (const { ringID, radius, padding } of rings) {
             const key = ringKeyMethod(centerID, ringID);
-            const centerCoords2dflat = centerCoords2dflatDataCreatorWithRadius(globe, long, lat, radius, { edgeCount: _circleFlatEdgeCount });
-            const centerCoords2dflatForPadding = centerCoords2dflatDataCreatorWithRadius(globe, long, lat, radius - padding / 3, { edgeCount: _circleFlatEdgeCount });
+            const centerCoords2dflat = centerCoords2dflatDataCreatorWithRadius(globe, long, lat, radius, { edgeCount: CIRCLE_FLAT_EDGE_COUNT });
+            const centerCoords2dflatForPadding = centerCoords2dflatDataCreatorWithRadius(globe, long, lat, radius - padding / 3, { edgeCount: CIRCLE_FLAT_EDGE_COUNT });
             result.push({
                 key,
                 centerCoords3d,
@@ -547,7 +474,7 @@ class RangeRings {
     __reconstructCentralPaddingProperties(centerID) {
         const centerItem = this._ringAccount.getCenter(centerID);
         if (centerItem === undefined) throw new Error("Center not found");
-        const { long, lat, stepAngle, rgba, rings, hide = 0, textHide = 0 } = centerItem;
+        const { stepAngle, rgba, rings, hide = 0, textHide = 0 } = centerItem;
         const result = [];
         for (const { ringID, } of rings) {
             let angle = 0;
@@ -578,7 +505,74 @@ class RangeRings {
         }
         return result;
     }
+
+
+
+    // GLOBE API
+
+
+    init(globe, gl) {
+        this.globe = globe;
+        this.gl = gl;
+        this._initPrograms();
+        this._initBufferManagers();
+        if (this._showNumbers) {
+            this.textPlugin = new RangeRingAngleText(globe, this.id + "text", { flatCompassMode: this.compass, style: this._numbersStyle, opacity: this._opacity });
+            delete this._numbersStyle;
+        }
+    }
+
+
+
+    draw3D() {
+        const {
+            globe, gl,
+            _circleProgram2D, _circleProgram3D, _padding2dProgram, _padding3dProgram, _bigPadding3dFlatProgram,
+            _circle2DVao, _circle3DVao, _oneDegreePaddingVao, _padding3dOneDegreeVao, _bigPadding3dFlatVAO,
+            bufferOrchestrator, paddingBufferOrchestrator,
+            _opacity, _oneDegreePadding, _zAlphaOnDegreePadding } = this;
+        gl.disable(gl.DEPTH_TEST);
+        const is3D = globe.api_GetCurrentGeometry() === 0;
+        // const lod = globe.api_GetCurrentLOD();
+        if (is3D) {
+            _circleProgram3D.draw(_circle3DVao, bufferOrchestrator.length, _opacity);
+            if (_oneDegreePadding) _padding3dProgram.draw(_padding3dOneDegreeVao, bufferOrchestrator.length, 360, 1, _opacity, _zAlphaOnDegreePadding);
+        } else {
+            _circleProgram2D.draw(_circle2DVao, bufferOrchestrator.length, CIRCLE_FLAT_EDGE_COUNT, _opacity);
+            // _padding2dProgram.draw(bigPaddingVAO, paddingBufferOrchestrator.length, _opacity);
+            if (_oneDegreePadding) _padding2dProgram.draw(_oneDegreePaddingVao, bufferOrchestrator.length * CIRCLE_FLAT_EDGE_COUNT, _opacity, _zAlphaOnDegreePadding);
+        }
+        _bigPadding3dFlatProgram.draw(_bigPadding3dFlatVAO, paddingBufferOrchestrator.length, _opacity);
+        gl.enable(gl.DEPTH_TEST);
+    }
+
+    free() {
+        if (this._isFreed) return;
+        const { globe } = this;
+        this.bufferManagersCompMap.forEach(({ bufferManager }) => bufferManager.free());
+        this.bufferManagersCompMapPadding.forEach(({ bufferManager }) => bufferManager.free());
+        // delete vaos
+        this.gl.deleteVertexArray(this._circle2DVao);
+        this.gl.deleteVertexArray(this._circle3DVao);
+        this.gl.deleteVertexArray(this._oneDegreePaddingVao);
+        this.gl.deleteVertexArray(this._padding3dOneDegreeVao);
+        this.gl.deleteVertexArray(this._bigPadding3dFlatVAO);
+        // delete programs
+        CircleCache2D.release(globe);
+        CircleCache3D.release(globe);
+        LinesColorInstancedFlatCache.release(globe);
+        CirclePadding3DCache.release(globe);
+        LineOnGlobeCache.release(globe);
+        this._circleProgram2D = null;
+        this._circleProgram3D = null;
+        this._padding2dProgram = null;
+        this._padding3dProgram = null;
+        this._bigPadding3dFlatProgram = null;
+        this.textPlugin?.free();
+        this._isFreed = true;
+    }
+
 }
 
 
-export { RangeRings };
+export { RangeRings, Z_ALPHA_MODE };

package/util/check/get.js

@@ -1,6 +1,7 @@
 
 export const mapGetOrThrow = (errorNote) => {
     return (mapInstance, ids) => {
+        if (!ids) throw new Error("There is no map keys to get");
         const result = [];
         for (let i = 0; i < ids.length; i++) {
             const e = mapInstance.get(ids[i]);

package/write-text/context-text3.js

@@ -159,6 +159,14 @@ export class ContextTextWriter3 {
         this.itemMap.set(key, { long: coords.long, lat: coords.lat, text, opacity, angle, payload: item, position });
     }
 
+
+    updateText() {
+        this.itemMap.forEach((v, k, m) => {
+            const { payload } = v;
+            this.insertText(payload, 0, m, payload);
+        });
+    }
+
     clear() {
         this.itemMap.clear();
     }