@pirireis/webglobeplugins 0.6.17 → 0.6.19

package/bearing-line/pluginOLD.js

@@ -0,0 +1,430 @@
+import { programCache as ringProgramCache } from '../partialrings/program';
+import { LineOnGlobeCache } from '../programs/line-on-globe/naive';
+import { CircleCache } from '../programs/line-on-globe/circle';
+import { BufferOrchestrator, BufferManager } from '../util/account';
+import { AngledLineProgramCache } from '../programs/line-on-globe/angled-line';
+import { mapGetOrThrow } from "../util/check/get";
+import { ContextTextWriter } from '../write-text/context-text'
+export const RINGPARTIAL_DRAW_MODE = Object.freeze({
+    LINE_STRIP: "LINE_STRIP",
+    TRIANGLE_FAN: "TRIANGLE_FAN",
+});
+
+const constraintFloat = (x, lowerBound, upperBound) => {
+    if (typeof x !== "number") throw new Error("type must be numberic")
+    if (lowerBound > x || x > upperBound) throw new Error(`input must be between ${lowerBound} - ${upperBound}`)
+}
+
+
+
+
+/**
+ * @typedef {Object}textContextInjection
+ * @property {string} id
+ * @property {function} coordsAdaptor
+ * @property {function} textAdaptor
+ * @property {ContextTextWriter} writer
+ * 
+ */
+
+export default class Plugin {
+    /**
+     * 
+     * @param {*} id 
+     * @param {Map<[K ,{writer:ContextTextWriter, coordsAdaptor, textAdaptor}]} textContextInjectionMap  import { ContextTextWriter } from '@pirireis/webglobeplugins/write-text/context-text';
+     * 
+     */
+
+    constructor(id, { opacity = 1, textContextInjectionMap = new Map(), drawVRM = true, drawBearingLine = true, drawAngleRing = true, drawText = true } = {}) {
+        this.id = id;
+        this._opacity = opacity;
+        this.bufferOrchestrator = new BufferOrchestrator({ capacity: 10 });
+        this._checkTextContextInjectionMap(textContextInjectionMap);
+        this._textContextInjectionMap = textContextInjectionMap;
+        this.drawVRM = drawVRM;
+        this.drawBearingLine = drawBearingLine;
+        this.drawAngleRing = drawAngleRing;
+        this.drawText = drawText;
+    }
+
+    setDoDrawVRM(bool) {
+        if (bool === this.drawVRM) return;
+        this.drawVRM = bool;
+        this.globe.DrawRender();
+    }
+
+    setDoDrawText(bool) {
+        if (bool === this.drawText) return;
+        this.drawText = bool;
+        this.globe.DrawRender();
+    }
+
+    setDoDrawText(bool) {
+        if (bool === this.drawText) return;
+        this.drawText = bool;
+        this.globe.DrawRender();
+    }
+
+    _checkTextContextInjectionMap(textContextInjectionMap) {
+        if (!(textContextInjectionMap instanceof Map)) throw new TypeError("textContextInjectionMap is not instance of Map");
+        textContextInjectionMap.forEach((v) => {
+            if (typeof v !== 'object') throw new TypeError("textContextInjectionMap format is wrong");
+            if (typeof v.coordsAdaptor !== 'function') throw new TypeError("textContextInjectionMap coordsAdaptor format is wrong");
+            if (typeof v.textAdaptor !== 'function') throw new TypeError("textContextInjectionMap textAdaptor format is wrong");
+            if (!(v.writer instanceof ContextTextWriter)) throw new TypeError("textContextInjectionMap writer is not instance of ContextTextWriter");
+        })
+    }
+
+    setDoDrawAngleRing(bool) {
+        if (bool === this.drawAngleRing) return;
+        this.drawAngleRing = bool;
+        this.globe.DrawRender();
+    }
+
+
+    settextContextInjectionMap(textContextInjectionMap, data = null) {
+        this._textContextInjectionMap = textContextInjectionMap;
+        this._textContextInjectionMap.forEach(({ writer }) => writer.clear());
+        if (data) {
+            for (const item of data) {
+                this._insertTexts(item);
+            }
+        }
+    }
+
+
+    setOpacity(opacity) {
+        constraintFloat(opacity, 0, 1);
+        this._opacity = opacity;
+        this._textContextInjectionMap.forEach(({ writer }) => writer.setOpacity(opacity));
+        this.globe.DrawRender();
+    }
+
+
+
+
+    init(globe, gl) {
+        this.gl = gl;
+        this.globe = globe;
+        this.lineProgram = LineOnGlobeCache.get(globe);
+        this.ringProgram = ringProgramCache.get(globe);
+        this.angledLineProgram = AngledLineProgramCache.get(globe);
+        this.circleProgram = CircleCache.get(globe);
+        // this.angleTextContext = new ContextTextWriter(globe);
+        // this.distanceTextContext = new ContextTextWriter(globe);
+        {
+            // createBuffers
+            const bufferType = "DYNAMIC_DRAW";
+            const initialCapacity = this.bufferOrchestrator.capacity;
+            this.bufferManagersCompMap = new Map(
+                [
+                    ["centerCoords", {
+                        'bufferManager': new BufferManager(gl, 2, { bufferType, initialCapacity }),
+                        'adaptor': (item) => new Float32Array([item.long, item.lat]),
+                    }],
+                    ["targetCoords", {
+                        'bufferManager': new BufferManager(gl, 2, { bufferType, initialCapacity }),
+                        'adaptor': (item) => new Float32Array([item.endLong, item.endLat])
+                    }],
+                    ["startAngle", {
+                        'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
+                        'adaptor': (item) => new Float32Array([item.startAngle])
+                    }],
+                    ["tailAngle", {
+                        'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
+                        'adaptor': (item) => new Float32Array([item.tailAngle])
+                    }],
+                    ["rgba", {
+                        'bufferManager': new BufferManager(gl, 4, { bufferType, initialCapacity }),
+                        'adaptor': (item) => new Float32Array(item.rgba)
+                    }],
+                    ["radius", {
+                        'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
+                        'adaptor': (item) => new Float32Array([item.radius])
+                    }],
+                    ["rgbaMode", {
+                        'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
+                        'adaptor': (item) => new Float32Array([item.rgbaMode])
+                    }],
+                    ["dashRatio", {
+                        'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
+                        'adaptor': (item) => new Float32Array([item.dashRatio])
+                    }],
+                    ["bearingAngle", {
+                        'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
+                        'adaptor': (item) => new Float32Array([item.bearingAngle])
+                    }],
+                    ["bigRadius", {
+                        'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
+                        'adaptor': (item) => new Float32Array([item.bigRadius])
+                    }],
+                    ["dashOpacity", {
+                        'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
+                        'adaptor': (item) => new Float32Array([item.dashOpacity])
+                    }],
+                    ["circleDashAngle", {
+                        'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
+                        'adaptor': (item) => new Float32Array([item.circleDashAngle / 360])
+                    }]
+                ]
+            );
+        }
+
+
+        const obj = function (bufferManagerComp) {
+            return { 'buffer': bufferManagerComp.bufferManager.buffer, 'stride': 0, 'offset': 0 }
+        };
+
+        this.lineVao = this.lineProgram.createVAO(
+            ...['centerCoords', 'targetCoords', 'dashRatio', 'dashOpacity', 'rgba'].map(key => obj(this.bufferManagersCompMap.get(key))));
+        this.ringVao = this.ringProgram.createVAO(
+            ...['centerCoords', 'startAngle', 'tailAngle', 'rgba', 'radius', 'rgbaMode'].map(key => obj(this.bufferManagersCompMap.get(key))));
+        {
+            const angledLineBuffers = ["centerCoords", "bearingAngle", "bigRadius", "rgba", "dashRatio"].map(key => obj(this.bufferManagersCompMap.get(key)));
+            // dashOpacity is same as rgba.a to eleminate effect of dashOpacity.
+            const colorBuffer = this.bufferManagersCompMap.get("rgba");
+            angledLineBuffers.push(
+                { 'buffer': colorBuffer.bufferManager.buffer, 'stride': 16, 'offset': 12 },
+            )
+            this.angledLineVao = this.angledLineProgram.createVAO(...angledLineBuffers);
+        }
+        // centerObj, startAngleObj, radiusObj, colorObj, dashRatioObj, dashOpacityObj
+        this.circleVao = this.circleProgram.createVAO(
+            ...["centerCoords", "bigRadius", "rgba", "circleDashAngle", "dashOpacity"].map(key => obj(this.bufferManagersCompMap.get(key))));
+    }
+
+
+
+    draw3D() {
+        const { gl } = this;
+        this.lineProgram.draw(this.lineVao, this.bufferOrchestrator.length, this._opacity);
+        gl.disable(gl.DEPTH_TEST);
+        if (this.drawAngleRing) {
+            this.ringProgram.draw(this.bufferOrchestrator.length, this.ringVao, 360, this._opacity * 0.8, RINGPARTIAL_DRAW_MODE.TRIANGLE_FAN);
+            this.ringProgram.draw(this.bufferOrchestrator.length, this.ringVao, 360, this._opacity, RINGPARTIAL_DRAW_MODE.LINE_STRIP);
+        }
+        if (this.drawBearingLine) {
+            this.angledLineProgram.draw(this.angledLineVao, this.bufferOrchestrator.length, this._opacity * 0.8);
+        }
+        if (this.drawVRM) {
+            this.circleProgram.draw(this.circleVao, this.bufferOrchestrator.length, this._opacity);
+        }
+        if (this.drawText) {
+            this._textContextInjectionMap.forEach((e) => { e.writer.draw(); });
+        }
+        gl.enable(gl.DEPTH_TEST);
+    }
+
+
+    /**
+     * @typedef {{key, long, lat, endLong, endLat, bearingAngle, radius,  rgba:[4numbers], rgbaMode, bigRadius, dashRatio, dashOpacity, circleDashAngle}} item
+     * @property {string} key   
+     * @property {number} long
+     * @property {number} lat
+     * @property {number} endLong
+     * @property {number} endLat 
+     * @property {number} bearingAngle 0-360
+     * @property {number} radius angle ring radius
+     * @property {Array<4numbers>} rgba [r,g,b,a]
+     * @property {number} rgbaMode 0 constant, 1 fading, 2 hides angle ring
+     * @property {number} bigRadius undefined means it will be calculated from long, lat, endLong, endLat
+     * @property {number} dashRatio 0-1
+     * @property {number} dashOpacity 0-1
+     * @property {number} circleDashAngle 0-360
+     * @param {Array<item>} items 
+     * @param {Array<string>} textWriterInjectionSubSetIDs | textContextInjectionMap keys to be used for writing text.
+     */
+    insertBulk(items, textWriterInjectionSubSetIDs = []) {
+        const { globe, bufferOrchestrator, bufferManagersCompMap } = this;// angleTextContext, distanceTextContext,
+        const textWriterInjectionSubSets = textWriterGetOrThrow(this._textContextInjectionMap, textWriterInjectionSubSetIDs);
+        const data = []
+        for (let item of items) {
+            this._insertTexts(item, textWriterInjectionSubSets);
+            data.push(this.__insertAdaptor(item));
+        }
+        bufferOrchestrator.insertBulk(data, bufferManagersCompMap);
+        this._textContextInjectionMap.forEach((v) => {
+            const { writer } = v;
+            writer.updateOpacityBulk(items, (e) => e.key, (e) => e.rgba[3]);
+        })
+        globe.DrawRender();
+    }
+
+
+
+
+    deleteBulk(keys) {
+        this.bufferOrchestrator.deleteBulk(keys, this.bufferManagersCompMap, ["radius", "centerCoords", "targetCoords", "rgba"]);
+        this._deleteTexts(keys);
+        this.globe.DrawRender();
+    }
+
+
+    defrag() {
+        this.bufferOrchestrator.defrag(this.bufferManagersCompMap);
+    }
+
+    /**
+     * 
+     * @param {Array<{key, long, lat, endLong, endLat, bearingAngle}>} items
+     * @param {Array<string>} textWriterInjectionSubSetIDs | textContextInjectionMap keys to be used for writing text.
+     */
+    updateCoordinatesBulk(items, textWriterInjectionSubSetIDs = []) { //TODO
+        const injectionsSubSet = textWriterGetOrThrow(this._textContextInjectionMap, textWriterInjectionSubSetIDs);;
+        const { globe, bufferOrchestrator, bufferManagersCompMap, } = this;
+        const data = []
+        for (let item of items) {
+            this._insertTexts(item, injectionsSubSet);
+            data.push(this.__updateCoordsAdaptor(item));
+        }
+
+        bufferOrchestrator.updateBulk(data, bufferManagersCompMap, ["centerCoords", "targetCoords", "startAngle", "tailAngle", "bearingAngle", "bigRadius", "radius"]);
+        globe.DrawRender();
+    }
+
+
+    /**
+     * 
+     * @param {*} items some colums EXCEPT positional ones
+     * @param {string} propertyIDs 
+     * @param {string} textWriterInjectionSubSetIDs 
+     * Do NOT send empty data if property ID of this data is entered or NaN is loaded to the buffer, resulting in an unwanted behaviour.
+     */
+    updatePartial(items, propertyIDs = [], textWriterInjectionSubSetIDs = []) { // textWriterInjectionSubSetIDs = []
+        if (propertyIDs.length === 0) console.warn("updatePartial is called with no target propertyIDs");
+        const { _textContextInjectionMap, bufferOrchestrator, bufferManagersCompMap } = this;
+        const writers = textWriterGetOrThrow(this._textContextInjectionMap, textWriterInjectionSubSetIDs);
+        for (let item of items) { this._insertTexts(item, writers) }
+        bufferOrchestrator.updateBulk(items, bufferManagersCompMap, propertyIDs);
+        // patch to update text opacity
+        for (const property of propertyIDs) {
+            if (property === "rgba") {
+                _textContextInjectionMap.forEach((v) => {
+                    const { writer } = v;
+                    writer.updateOpacityBulk(items, (e) => e.key, (e) => e.rgba[3]);
+                })
+            }
+        }
+        this.globe.DrawRender();
+    }
+
+
+    __insertAdaptor(item) {
+        const lat = radian(item.lat)
+        const long = radian(item.long)
+        const endLat = radian(item.endLat)
+        const endLong = radian(item.endLong)
+        const rgba = item.rgba !== undefined ? item.rgba : [0, 0, 0, 0];
+        const rgbaMode = item.rgbaMode !== undefined ? item.rgbaMode : 0;
+        const dashRatio = item.dashRatio !== undefined ? item.dashRatio : 1.0;
+        const dashOpacity = item.dashOpacity !== undefined ? item.dashOpacity : 0.9;
+        const circleDashAngle = item.circleDashAngle !== undefined ? item.circleDashAngle : 360;
+        const bigRadius = item.bigRadius !== undefined ? item.bigRadius : this.globe.Math.GetDist3D(item.long, item.lat, item.endLong, item.endLat);
+        const radius = item.radius !== undefined ? item.radius : bigRadius * 0.2;
+        const startAngle = calculateStartAngle(long, lat, endLong, endLat);
+        const bearingAngle = radian(item.bearingAngle - 90);
+        let tailAngle = bearingAngle - startAngle;
+        if (tailAngle > 0) {
+            tailAngle -= Math.PI * 2;
+        }
+        return {
+            key: item.key,
+            lat,
+            long,
+            endLat,
+            endLong,
+            bearingAngle,
+            radius,
+            bigRadius,
+            startAngle,
+            tailAngle,
+            rgba,
+            dashRatio,
+            dashOpacity,
+            circleDashAngle,
+            rgbaMode
+        };
+    }
+
+    __updateCoordsAdaptor(item) {
+        const lat = radian(item.lat)
+        const long = radian(item.long)
+        const endLat = radian(item.endLat)
+        const endLong = radian(item.endLong)
+        const bigRadius = item.bigRadius !== undefined ? item.bigRadius : this.globe.Math.GetDist3D(item.long, item.lat, item.endLong, item.endLat);
+        const radius = item.radius !== undefined ? item.radius : bigRadius * 0.2;
+        const startAngle = calculateStartAngle(long, lat, endLong, endLat);
+        const bearingAngle = radian(item.bearingAngle - 90);
+        let tailAngle = bearingAngle - startAngle;
+        if (tailAngle > 0) {
+            tailAngle -= Math.PI * 2;
+        }
+        return {
+            key: item.key,
+            lat,
+            long,
+            endLat,
+            endLong,
+            bearingAngle,
+            radius,
+            bigRadius,
+            startAngle,
+            tailAngle,
+        };
+    }
+
+
+    //TODO free
+    free() {
+        if (this.isFreed) return;
+        this.bufferManagersCompMap.forEach(({ bufferManager, adaptor }) => {
+            bufferManager.free();
+        });
+        LineOnGlobeCache.release(this.globe);
+        ringProgramCache.release(this.globe);
+        CircleCache.release(this.globe);
+        AngledLineProgramCache.release(this.globe);
+        this.isFreed = true;
+    }
+
+
+
+
+    _insertTexts(item, textWriterInjectionSubSet) {
+        //TODO This method can be more performant if it works horizontally, tabular
+        textWriterInjectionSubSet.forEach((v) => {
+            const { coordsAdaptor, textAdaptor, writer } = v
+            const { lat, long } = coordsAdaptor(item);
+            const text = textAdaptor(item);
+            writer.insertText(item.key, lat, long, text);
+        });
+    }
+
+
+    _deleteTexts(keys) {
+        this._textContextInjectionMap.forEach((e) => {
+            e.writer.deleteTextBulk(keys);
+        });
+    }
+
+
+}
+
+
+
+const radian = (degree) => degree * Math.PI / 180;
+
+const integralSec = (angle) => {
+    return Math.log(Math.tan(angle / 2 + Math.PI / 4));
+}
+
+const textWriterGetOrThrow = mapGetOrThrow("BearingLine textContextInjection id does not exist in map")
+
+const calculateStartAngle = (long, lat, endLong, endLat) => {
+    const dLat = (integralSec(endLat) - integralSec(lat)); // Because lines are strectes toward poles.
+    const dLong = endLong - long;
+
+    let angle = -Math.atan2(dLat, dLong);
+    return angle;
+}
+

package/circle-line-chain/plugin.js

@@ -1,10 +1,12 @@
 import { LineOnGlobeCache } from '../programs/line-on-globe/naive-accurate';
-import { CircleCache } from '../programs/line-on-globe/circle-accurate';
+import { CircleCache, EDGE_COUNT as EDGE_COUNT_2D_CIRCLE, centerCoords2dflatDataCreator } from '../programs/line-on-globe/circle-accurate-flat';
+import { CircleCache as Circle3DCache } from '../programs/line-on-globe/circle-accurate-3d';
 import { LineToTheOriginCache } from "../programs/line-on-globe/to-the-origin"
 import { BufferOrchestrator, BufferManager } from "../util/account";
 import { ChainListMap } from "./chain-list-map";
 import { mapGetOrThrow } from "../util/check/get";
 import { keyMethod } from "./util";
+import { populateFloat32Array } from "../util/jshelpers/data-filler";
 import { ContextTextWriter3 } from '../write-text/context-text3';
 // TODO: Add update buffer and update text mehods on add, delete, update methods
 
@@ -76,7 +78,9 @@ export class CircleLineChainPlugin {
     _initOrchestrations() {
         const { gl, globe } = this;
         this.lineProgram = LineOnGlobeCache.get(globe);
-        this.circleProgram = CircleCache.get(globe);
+        this.circleProgram2d = CircleCache.get(globe);
+        this.circle3DProgram = Circle3DCache.get(globe);
+
         this.lineToTheOriginProgram = LineToTheOriginCache.get(globe);
         {
             // createBuffers
@@ -133,7 +137,32 @@ export class CircleLineChainPlugin {
                             if (item.circleProperties?.rgba) return new Float32Array(item.circleProperties.rgba);
                             return new Float32Array(item.chainProperties.rgba);
                         }
-                    }]
+                    }],
+
+
+                    // Mercator buffers
+                    ["circleDashAngleMercator", {
+                        'bufferManager': new BufferManager(gl, 1 * EDGE_COUNT_2D_CIRCLE, { bufferType, initialCapacity }),
+                        'adaptor': (item) => {
+                            if (item.circleProperties?.circleDashAngle) return new Float32Array([item.circleProperties.circleDashAngle / 360]);
+                            return new populateFloat32Array.fillFloat32Array(EDGE_COUNT_2D_CIRCLE, item.chainProperties.circleDashAngle / 360);
+                        }
+                    }],
+                    ["rgbaCircleMercator", {
+                        "bufferManager": new BufferManager(gl, 4 * EDGE_COUNT_2D_CIRCLE, { bufferType, initialCapacity }),
+                        "adaptor": (item) => {
+                            if (item.circleProperties?.rgba) return populateFloat32Array.fillWithListData(EDGE_COUNT_2D_CIRCLE, item.circleProperties.rgba);
+                            return populateFloat32Array.fillWithListData(EDGE_COUNT_2D_CIRCLE, item.chainProperties.rgba);
+                        }
+                    }],
+                    ["dashOpacityMercator", {
+                        'bufferManager': new BufferManager(gl, 1 * EDGE_COUNT_2D_CIRCLE, { bufferType, initialCapacity }),
+                        'adaptor': (item) => populateFloat32Array.fillFloat32Array(EDGE_COUNT_2D_CIRCLE, item.chainProperties.dashOpacity)
+                    }],
+                    ["centerCoords2dMercator", {
+                        'bufferManager': new BufferManager(gl, 2 * EDGE_COUNT_2D_CIRCLE, { bufferType, initialCapacity }),
+                        'adaptor': (item) => item.centerCoords2dflat,
+                    }],
                 ]
             );
             // (startPotisionBufferObj, endPositionBufferObj, dashRatioBufferObj, colorBufferObj)
@@ -142,10 +171,14 @@ export class CircleLineChainPlugin {
             };
             this.lineVao = this.lineProgram.createVAO(
                 ...['centerCoords2d', 'centerCoords3d', 'targetCoords2d', 'targetCoords3d', 'dashRatio', 'dashOpacity', 'rgba'].map(key => obj(this.bufferManagersCompMap.get(key))));
-            this.circleVao = this.circleProgram.createVAO(
-                ...["centerCoords2d", "centerCoords3d", "bigRadius", "rgbaCircle", "circleDashAngle", "dashOpacity"].map(key => obj(this.bufferManagersCompMap.get(key))));
+            this.circleVao2d = this.circleProgram2d.createVAO(
+                ...["centerCoords2dMercator", "rgbaCircleMercator", "circleDashAngleMercator", "dashOpacityMercator"].map(key => obj(this.bufferManagersCompMap.get(key))));
             this.toOriginVao = this.lineToTheOriginProgram.createVAO(
                 ...["targetCoords3d", "rgba"].map(key => obj(this.bufferManagersCompMap.get(key))));
+            this.circle3DVao = this.circle3DProgram.createVAO(
+                ...["centerCoords3d", "bigRadius", "rgbaCircle", "circleDashAngle", "dashOpacity"].map(key => obj(this.bufferManagersCompMap.get(key)))
+            );
+
         }
 
     }
@@ -338,13 +371,16 @@ export class CircleLineChainPlugin {
         const { globe } = this;
         //     this.lineVao = this.lineProgram.createVAO(
         //         ...['centerCoords', 'targetCoords', 'dashRatio', 'dashOpacity', 'rgba'].map(key => obj(this.bufferManagersCompMap.get(key))));
-        //     this.circleVao = this.circleProgram.createVAO(
+        //     this.circleVao2d = this.circleProgram2d.createVAO(
         //         ...["centerCoords", "bigRadius", "rgba", "circleDashAngle", "dashOpacity"].map(key => obj(this.bufferManagersCompMap.get(key))));
         // }   
 
         const radiusM = radiusMethod(globe);
         const callback = (v, i, array, chainProperties) => {
             if (i == array.length - 1) return null;
+
+            const centerCoords2dflat = centerCoords2dflatDataCreator(globe, v.long, v.lat, array[i + 1].long, array[i + 1].lat);
+
             return {
                 chainProperties: chainProperties,
                 bigRadius: radiusM(v, i, array),
@@ -354,7 +390,9 @@ export class CircleLineChainPlugin {
                 lat: v.lat,
                 lineProperties: v.lineProperties,
                 circleProperties: v.circleProperties,
+                centerCoords2dflat,
                 key: v.__identity__
+
             }
         }
         const bulkData = [];
@@ -381,8 +419,15 @@ export class CircleLineChainPlugin {
         })
         LineOnGlobeCache.release(this.globe);
         CircleCache.release(this.globe);
+        Circle3DCache.release(this.globe);
+        LineToTheOriginCache.release(this.globe);
+        this._textContextWriterInjectionMap.forEach((writer) => writer.free());
+        const { gl } = this;
+        gl.deleteVertexArray(this.lineVao);
+        gl.deleteVertexArray(this.circleVao2d);
+        gl.deleteVertexArray(this.toOriginVao);
         this.lineProgram = null;
-        this.circleProgram = null;
+        this.circleProgram2d = null;
         this.isFreed = true;
     }
 
@@ -390,9 +435,16 @@ export class CircleLineChainPlugin {
         const { gl, globe } = this;
         gl.disable(gl.DEPTH_TEST);
         this.lineProgram.draw(this.lineVao, this.bufferOrchestrator.length, this._opacity);
-        if (this._drawCircleOn) this.circleProgram.draw(this.circleVao, this.bufferOrchestrator.length, this._opacity);
         this._textContextWriterInjectionMap.forEach((writer) => writer.draw());
         this.lineToTheOriginProgram.draw(this.toOriginVao, this.bufferOrchestrator.length, this._opacity);
+        const is3D = globe.api_GetCurrentGeometry() === 0;
+        if (this._drawCircleOn) {
+            if (is3D) {
+                this.circle3DProgram.draw(this.circle3DVao, this.bufferOrchestrator.length, this._opacity);
+            } else {
+                this.circleProgram2d.draw(this.circleVao2d, this.bufferOrchestrator.length, this._opacity);
+            }
+        }
         gl.enable(gl.DEPTH_TEST);
     }
 }