@pirireis/webglobeplugins 0.17.0 → 1.0.2

package/semiplugins/shape-on-terrain/{padding-1-degree.js → padding-1-degree.ts}

@@ -1,539 +1,713 @@
-//      One Degree Padding
-/**
- * 2d coordinates are loaded ones
- * 3d coordinates are calculated on the fly.
- *
- * 2d paddings are fixed size
- * 3d paddings gets shortened as lod increases
- *
- * color buffer is shared and does not change on unless insert or delete
- * changing color can be done by re inserting
- *
- *
- *
- */
-import { BufferManager } from '../../util/account/single-attribute-buffer-management/buffer-manager';
-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;
-    bufferManagerMap;
-    lineProgram = null;
-    _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
-    _userOpacity = 1;
-    _adaptiveOpacityMultiplier = 1;
-    _dataMap = new Map();
-    _options = {
-        bufferType: "STATIC_DRAW",
-        variativeColorsOn: false,
-        defaultColor: [1, 1, 1, 1], // white color
-        defaultHeightFromGroundIn3D: 0.1, // 10 cm from ground
-        adativePaddingSize: true, // if true, the padding size will be adaptive to the LOD
-        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.bufferManagerMap = new Map();
-        this.lineProgram = null;
-        this._options = options ? { ...this._options, ...options } : this._options;
-        this.bufferOrchestrator = new BufferOrchestrator();
-        if (this._options.variativeColorsOn) {
-            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");
-            return;
-        }
-        if (this._freed) {
-            console.warn("Plugin is freed, cannot insert input");
-            return;
-        }
-        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.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");
-            return;
-        }
-        if (this._freed) {
-            console.warn("Plugin is freed, cannot delete data");
-            return;
-        }
-        this.bufferOrchestrator.deleteBulk(keys, this.bufferManagerMap);
-        for (const key of keys) {
-            this._dataMap.delete(key);
-        }
-        this.globe?.DrawRender();
-    }
-    setPluginOpacity(opacity, drawRender = false) {
-        if (this._freed) {
-            console.warn("Plugin is freed, cannot set opacity");
-            return;
-        }
-        if (this.globe === null) {
-            console.warn("Globe is not initialized, cannot set opacity");
-            return;
-        }
-        opacityCheck(opacity);
-        this._userOpacity = opacity;
-        if (drawRender) {
-            this.globe.DrawRender();
-        }
-    }
-    setDefaultColor(color) {
-        if (this._freed) {
-            console.warn("Plugin is freed, cannot set default color");
-            return;
-        }
-        if (this.globe === null) {
-            console.warn("Globe is not initialized, cannot set default color");
-            return;
-        }
-        colorCheck(color);
-        this._options.defaultColor = color;
-        this._uboHandler?.updateSingle("u_color", new Float32Array(color));
-        this.globe.DrawRender();
-    }
-    setElevationMode(mode) {
-        switch (mode) {
-            case "msl":
-                this._options.isMSL = true;
-                break;
-            case "agl":
-                this._options.isMSL = false;
-                break;
-            default:
-                throw new Error(`Unknown elevation mode: ${mode}`);
-        }
-        this._buildPaddings("elevation");
-        this.globe?.DrawRender();
-    }
-    init(globe, gl) {
-        this.globe = globe;
-        this.lineProgram = LineStripProgramCache.get(globe);
-        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 }),
-                    adaptor: (paddingInput) => {
-                        if (this._float32Array === null) {
-                            throw new Error("Float32Array is not initialized");
-                        }
-                        else {
-                            this._float32Array.fill(NaN); // reset the float32Array
-                        }
-                        for (let i = 0; i < 360; i++) {
-                            const outerCoords = paddingInput.outerCoords[i];
-                            const innerCoords = paddingInput.innerCoords[i];
-                            if (outerCoords === null || innerCoords === null) {
-                                continue;
-                            }
-                            let coordsOuter = globe.api_GetMercator2DPoint(outerCoords[0], outerCoords[1]);
-                            // fill the second coordinate with 0
-                            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];
-                            this._float32Array[i * 6 + 3] = coordsInner[1];
-                        }
-                        return this._float32Array.subarray(0, 360 * 2 * 3);
-                    }
-                }
-            ],
-            [
-                "position3d", {
-                    bufferManager: new BufferManager(globe.gl, 360 * 3 * 3, // plus 1 to cut
-                    { bufferType: this._options.bufferType, initialCapacity: initialCapacity }),
-                    adaptor: (paddingInput) => {
-                        if (this._float32Array === null) {
-                            throw new Error("Float32Array is not initialized");
-                        }
-                        else {
-                            this._float32Array.fill(NaN); // reset the float32Array
-                        }
-                        const _float32Array = this._float32Array;
-                        for (let i = 0; i < 360; i++) {
-                            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(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 coordsInner = globe.api_GetCartesian3DPoint(innerCoords[0], innerCoords[1], height, this._options.isMSL);
-                            // fill the second coordinate with 0
-                            _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);
-                    }
-                }
-            ],
-        ]);
-        if (this._options.variativeColorsOn) {
-            bufferManagerMap.set("color", {
-                bufferManager: new BufferManager(globe.gl, 360 * 4 * 3, // 4 for RGBA
-                { bufferType: this._options.bufferType, initialCapacity: initialCapacity }),
-                adaptor: (paddingInput) => {
-                    if (this._float32Array === null) {
-                        throw new Error("Float32Array is not initialized");
-                    }
-                    else {
-                        this._float32Array.fill(NaN); // reset the float32Array
-                    }
-                    if (!paddingInput.colorsRatios) {
-                        const color = this._options.defaultColor;
-                        const colorArray = new Float32Array(360 * 4 * 3);
-                        this._float32Array = colorArray; // store for forwarding
-                        for (let i = 0; i < 360; i++) {
-                            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._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] ;
-                        }
-                        return this._float32Array.subarray(0, 360 * 4 * 3);
-                    }
-                    else {
-                        const colorsRatios = paddingInput.colorsRatios;
-                        let i = 0;
-                        for (const colorRatio of colorsRatios) {
-                            const color = colorRatio.color;
-                            const ratio = colorRatio.ratio;
-                            for (let j = 0; j < ratio; j++) {
-                                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._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.1; // color[3];
-                                i++;
-                            }
-                        }
-                        return this._float32Array.subarray(0, 360 * 4 * 3);
-                    }
-                }
-            });
-        }
-        const vaoInput = ["position3d", "position2d", "color"].map((name) => {
-            const bufferManager = bufferManagerMap.get(name);
-            if (!bufferManager) {
-                return null;
-            }
-            return {
-                buffer: bufferManager.bufferManager.buffer,
-                stride: 0,
-                offset: 0
-            };
-        });
-        this._vao = this.lineProgram.createVAO(vaoInput[0], vaoInput[1], vaoInput[2]);
-        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));
-    }
-    draw3D() {
-        if (this._freed) {
-            console.warn("Plugin is freed, cannot draw");
-            return;
-        }
-        if (this.globe === null || this.lineProgram === null || this._vao === null) {
-            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: {
-                first: 0,
-                count: this.bufferOrchestrator.length * (360 * 3), // plus 1 is for cutting linestrips
-            },
-        };
-        gl.disable(gl.DEPTH_TEST);
-        this.lineProgram.draw(this._vao, drawOptions, this._userOpacity * this._adaptiveOpacityMultiplier, this._uboHandler);
-        gl.enable(gl.DEPTH_TEST);
-    }
-    free() {
-        if (this._freed) {
-            console.warn("Plugin is already freed");
-            return;
-        }
-        if (!this.globe || !this.lineProgram) {
-            console.warn("Globe or LineProgram is not initialized, cannot free the plugin");
-            return;
-        }
-        this._freed = true;
-        this._frameCounterTrigger?.free();
-        LineStripProgramCache.release(this.lineProgram);
-        this.lineProgram = null;
-        this._uboHandler?.free();
-        this._uboHandler = null;
-        this.globe.gl.deleteVertexArray(this._vao);
-        this.globe = null;
-        this._vao = null;
-        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
-        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
-        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);
-    }
-    __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) {
-    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.radius, // outer radius
-            i);
-            const { long: endLong, lat: endLat } = globe.Math.FindPointByPolar(paddingInput.center[0], // center long
-            paddingInput.center[1], // center lat
-            paddingInput.radius * paddingRatio, // inner radius
-            i);
-            const longDifference = Math.abs(long - endLong);
-            // const latDifference = Math.abs(lat - endLat);
-            if (longDifference > 45) {
-                outerCoords[i] = null;
-                innerCoords[i] = null;
-                continue;
-            }
-            // Assign the calculated coordinates
-            outerCoords[i] = [long, lat];
-            innerCoords[i] = [endLong, endLat];
-        }
-    }
-    else {
-        // Handle case when outerCoords is provided
-        for (let i = 0; i < 360; i++) {
-            if (outerCoords[i] === null) {
-                innerCoords[i] = null;
-                continue;
-            }
-            const { long: endLong, lat: endLat } = globe.Math.FindPointByPolar(paddingInput.center[0], paddingInput.center[1], paddingInput.radius * paddingRatio, i);
-            innerCoords[i] = [endLong, endLat];
-        }
-    }
-    return { outerCoords, innerCoords };
-}
+//      One Degree Padding
+/**
+ * 2d coordinates are loaded ones
+ * 3d coordinates are calculated on the fly.
+ *
+ * 2d paddings are fixed size
+ * 3d paddings gets shortened as lod increases
+ *
+ * color buffer is shared and does not change on unless insert or delete
+ * changing color can be done by re inserting
+ *
+ *
+ *
+ */
+
+import {
+    Globe,
+    GlobeChanges,
+    Meter,
+    Color,
+    BUFFER_TYPE,
+    UBOHandler,
+    ColorRatio,
+    PluginInterface,
+    DrawRangeIndexParams,
+    LongLatDegree
+} from '../../types';
+import { SemiPluginInterface } from '../interface';
+import { BufferManagersMap } from '../../util/account/single-attribute-buffer-management/types';
+
+import { BufferManager } from '../../util/account/single-attribute-buffer-management/buffer-manager';
+
+import { BufferOrchestrator } from '../../util/account/single-attribute-buffer-management/buffer-orchestrator';
+
+import {
+    LineStripProgramCache,
+    LineProgram
+} from '../../programs/line-on-globe/linestrip/linestrip';
+import {
+    opacityCheck,
+    colorCheck
+} from '../../util/check/typecheck';
+import { FrameCounterTrigger } from '../../util/frame-counter-trigger';
+
+
+
+export type Padding1DegreeInput = {
+    key: string;
+    center: LongLatDegree;
+    radius: Meter;
+    heightFromGroundIn3D?: Meter; // optional, if not provided, defaultHeightFromGroundIn3D will be used
+    colorsRatios: ColorRatio[];
+};
+
+
+export type Padding1DegreePluginOptions = {
+    bufferType: BUFFER_TYPE;
+    variativeColorsOn: boolean;
+    defaultColor: Color;
+    defaultHeightFromGroundIn3D: Meter;
+    adativePaddingSize: boolean; // TODO : implement this
+    adaptiveOpacity: boolean; // TODO : implement this
+    isMSL: boolean;
+}
+
+const initialCapacity = 2; // initial capacity for the buffer managers
+
+// You'll need to define this type based on your requirements
+type InnerPadding1DegreeInput = {
+    key: string;
+    center: [number, number];
+    radius: number;
+    outerCoords: (LongLatDegree | null)[];
+    innerCoords: (LongLatDegree | null)[];
+    colorsRatios: ColorRatio[]; // optional, if not provided, defaultColor will be used
+    heightFromGroundIn3D: Meter;
+};
+
+
+// const _float32Array = new Float32Array(360 * 3 * 2).fill(NaN);
+
+export class Padding1DegreePlugin implements SemiPluginInterface, PluginInterface {
+    id: string;
+    globe: Globe | null = null;
+    private bufferOrchestrator: BufferOrchestrator;
+    private bufferManagerMap: BufferManagersMap;
+    private lineProgram: LineProgram | null = null;
+    private _innerPaddingRatio = 0.95; //
+    private _float32Array: Float32Array | null = null; // this is used to forward the data to the buffer manager
+    private _uboHandler: UBOHandler | null = null; // this is used to forward the data to the shader program
+    private _bufferNames: string[] = ["position2d", "position3d"];
+    private _vao: WebGLVertexArrayObject | null = null; // this is used to store the VAO for the plugin
+    private _freed: boolean = false; // this is used to check if the plugin is freed or not
+    private _userOpacity: number = 1;
+    private _adaptiveOpacityMultiplier: number = 1;
+    private _dataMap = new Map<string, InnerPadding1DegreeInput>();
+    private _options: Padding1DegreePluginOptions = {
+        bufferType: "STATIC_DRAW",
+        variativeColorsOn: false,
+        defaultColor: [1, 1, 1, 1], // white color
+        defaultHeightFromGroundIn3D: 0.1, // 10 cm from ground
+        adativePaddingSize: true, // if true, the padding size will be adaptive to the LOD
+        adaptiveOpacity: true, // if true, the opacity will be adaptive to the LOD
+        isMSL: false // if true, no elevation of terrain
+
+    };
+    private _frameCounterTrigger: FrameCounterTrigger | null = null;
+
+    constructor(id: string, options: Partial<Padding1DegreePluginOptions> | null = null) {
+        this.id = id;
+        this.bufferManagerMap = new Map();
+        this.lineProgram = null;
+        this._options = options ? { ...this._options, ...options } : this._options;
+        this.bufferOrchestrator = new BufferOrchestrator()
+
+        if (this._options.variativeColorsOn) {
+            this._bufferNames.push("color");
+        }
+    }
+
+
+
+    increaseSpace(amount: number): void {
+        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: Padding1DegreeInput[]): void {
+        if (this.globe === null) {
+            console.warn("Globe is not initialized, cannot insert input");
+            return;
+        }
+        if (this._freed) {
+            console.warn("Plugin is freed, cannot insert input");
+            return;
+        }
+
+        const wrapper: [InnerPadding1DegreeInput | null] = [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 } as InnerPadding1DegreeInput;
+            this._dataMap.set(paddingInput.key, paddingInput);
+            wrapper[0] = paddingInput;
+            this.bufferOrchestrator.insertBulk(wrapper, this.bufferManagerMap, this._bufferNames);
+        }
+        this._float32Array = null;
+        this.globe?.DrawRender();
+    }
+
+
+    updateColorRatios(key: string, colorRatios: ColorRatio[], drawRender: boolean = true): void {
+        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: Pick<Padding1DegreeInput, "key" | "center" | "radius">[]): void {
+        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: string[] = [];
+        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: string[]): void {
+        if (this.globe === null) {
+            console.warn("Globe is not initialized, cannot delete data");
+            return;
+        }
+        if (this._freed) {
+            console.warn("Plugin is freed, cannot delete data");
+            return;
+        }
+        this.bufferOrchestrator.deleteBulk(keys, this.bufferManagerMap);
+        for (const key of keys) {
+            this._dataMap.delete(key);
+        }
+        this.globe?.DrawRender();
+    }
+
+    setPluginOpacity(opacity: number, drawRender: boolean = false): void {
+        if (this._freed) {
+            console.warn("Plugin is freed, cannot set opacity");
+            return;
+        }
+        if (this.globe === null) {
+            console.warn("Globe is not initialized, cannot set opacity");
+            return;
+        }
+        opacityCheck(opacity);
+        this._userOpacity = opacity;
+        if (drawRender) {
+            this.globe.DrawRender();
+        }
+    }
+
+    setDefaultColor(color: Color): void {
+        if (this._freed) {
+            console.warn("Plugin is freed, cannot set default color");
+            return;
+        }
+        if (this.globe === null) {
+            console.warn("Globe is not initialized, cannot set default color");
+            return;
+        }
+        colorCheck(color);
+        this._options.defaultColor = color;
+        this._uboHandler?.updateSingle("u_color", new Float32Array(color));
+        this.globe.DrawRender();
+    }
+
+
+    setElevationMode(mode: "msl" | "agl"): void {
+        switch (mode) {
+            case "msl":
+                this._options.isMSL = true;
+                break;
+            case "agl":
+                this._options.isMSL = false;
+                break;
+            default:
+                throw new Error(`Unknown elevation mode: ${mode}`);
+        }
+        this._buildPaddings("elevation");
+        this.globe?.DrawRender();
+    }
+
+    init(globe: Globe, gl: WebGL2RenderingContext): void {
+        this.globe = globe;
+        this.lineProgram = LineStripProgramCache.get(globe);
+
+        this._frameCounterTrigger = new FrameCounterTrigger(globe, 10, 1000, (globeChanges: GlobeChanges) => {
+            if (this._freed) return;
+            this.__build(globeChanges);
+            globe.DrawRender();
+        });
+
+
+        this.__updateLODRelatedParameters()
+        this.__updateAdaptiveOpacityMultiplier();
+
+        const bufferManagerMap = new Map(
+            [
+                ["position2d", {
+                    bufferManager: new BufferManager(globe.gl as WebGL2RenderingContext,
+                        360 * 2 * 3, // plus 1 to cut
+                        { bufferType: this._options.bufferType, initialCapacity: initialCapacity }),
+                    adaptor: (paddingInput: InnerPadding1DegreeInput) => {
+                        if (this._float32Array === null) {
+                            throw new Error("Float32Array is not initialized");
+                        } else {
+                            this._float32Array.fill(NaN); // reset the float32Array
+                        }
+                        for (let i = 0; i < 360; i++) {
+
+                            const outerCoords = paddingInput.outerCoords[i] as LongLatDegree;
+                            const innerCoords = paddingInput.innerCoords[i] as LongLatDegree;
+                            if (outerCoords === null || innerCoords === null) {
+                                continue;
+                            }
+                            let coordsOuter = globe.api_GetMercator2DPoint(outerCoords[0], outerCoords[1]);
+                            // fill the second coordinate with 0
+                            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];
+                            this._float32Array[i * 6 + 3] = coordsInner[1];
+                        }
+                        return this._float32Array.subarray(0, 360 * 2 * 3);
+                    }
+                }
+                ],
+                [
+                    "position3d", {
+                        bufferManager: new BufferManager(globe.gl as WebGL2RenderingContext,
+                            360 * 3 * 3, // plus 1 to cut
+                            { bufferType: this._options.bufferType, initialCapacity: initialCapacity }),
+                        adaptor: (paddingInput: InnerPadding1DegreeInput) => {
+                            if (this._float32Array === null) {
+                                throw new Error("Float32Array is not initialized");
+                            } else {
+                                this._float32Array.fill(NaN); // reset the float32Array
+                            }
+                            const _float32Array = this._float32Array;
+                            for (let i = 0; i < 360; i++) {
+
+
+                                const outerCoords = paddingInput.outerCoords[i] as LongLatDegree;
+                                const innerCoords = paddingInput.innerCoords[i] as LongLatDegree;
+                                if (outerCoords === null || innerCoords === null) {
+                                    continue;
+                                }
+                                const height = paddingInput.heightFromGroundIn3D ?? this._options.defaultHeightFromGroundIn3D;
+
+                                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 coordsInner = globe.api_GetCartesian3DPoint(innerCoords[0], innerCoords[1], height, this._options.isMSL);
+                                // fill the second coordinate with 0
+
+                                _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);
+                        }
+                    }
+                ],
+            ]
+        );
+
+
+        if (this._options.variativeColorsOn) {
+            bufferManagerMap.set(
+                "color", {
+                bufferManager: new BufferManager(globe.gl as WebGL2RenderingContext,
+                    360 * 4 * 3, // 4 for RGBA
+                    { bufferType: this._options.bufferType, initialCapacity: initialCapacity }),
+                adaptor: (paddingInput: Padding1DegreeInput) => {
+                    if (this._float32Array === null) {
+                        throw new Error("Float32Array is not initialized");
+                    } else {
+                        this._float32Array.fill(NaN); // reset the float32Array
+                    }
+                    if (!paddingInput.colorsRatios) {
+                        const color = this._options.defaultColor;
+                        const colorArray = new Float32Array(360 * 4 * 3);
+                        this._float32Array = colorArray; // store for forwarding
+                        for (let i = 0; i < 360; i++) {
+                            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._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] ;
+                        }
+                        return this._float32Array.subarray(0, 360 * 4 * 3);
+                    } else {
+                        const colorsRatios = paddingInput.colorsRatios;
+                        let i = 0;
+                        for (const colorRatio of colorsRatios) {
+                            const color = colorRatio.color;
+                            const ratio = colorRatio.ratio;
+                            for (let j = 0; j < ratio; j++) {
+                                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._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.1;// color[3];
+                                i++;
+                            }
+                        }
+                        return this._float32Array.subarray(0, 360 * 4 * 3);
+                    }
+                }
+            }
+            );
+        }
+
+
+        const vaoInput = ["position3d", "position2d", "color"].map((name) => {
+            const bufferManager = bufferManagerMap.get(name);
+            if (!bufferManager) {
+                return null;
+            }
+            return {
+                buffer: bufferManager.bufferManager.buffer,
+                stride: 0,
+                offset: 0
+            }
+        })
+
+        this._vao = this.lineProgram.createVAO(
+            vaoInput[0],
+            vaoInput[1],
+            vaoInput[2],
+        );
+        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));
+    }
+
+
+    draw3D(): void {
+
+        if (this._freed) {
+            console.warn("Plugin is freed, cannot draw");
+            return;
+        }
+        if (this.globe === null || this.lineProgram === null || this._vao === null) {
+            console.warn("Globe or LineProgram or VAO is not initialized, cannot draw");
+            return;
+        }
+
+        this._frameCounterTrigger?.trigger();
+        // this.__build();
+
+        const gl = this.globe.gl as WebGL2RenderingContext;
+        const drawOptions: DrawRangeIndexParams = {
+            drawRange: {
+                first: 0,
+                count: this.bufferOrchestrator.length * (360 * 3), // plus 1 is for cutting linestrips
+            },
+        }
+        gl.disable(gl.DEPTH_TEST);
+
+        this.lineProgram.draw(
+            this._vao,
+            drawOptions,
+            this._userOpacity * this._adaptiveOpacityMultiplier,
+            this._uboHandler
+        );
+        gl.enable(gl.DEPTH_TEST);
+
+    }
+
+
+    free(): void {
+        if (this._freed) {
+            console.warn("Plugin is already freed");
+            return;
+        }
+        if (!this.globe || !this.lineProgram) {
+            console.warn("Globe or LineProgram is not initialized, cannot free the plugin");
+            return;
+        }
+        this._freed = true;
+        this._frameCounterTrigger?.free();
+        LineStripProgramCache.release(this.lineProgram);
+        this.lineProgram = null;
+        this._uboHandler?.free();
+        this._uboHandler = null;
+        this.globe.gl.deleteVertexArray(this._vao);
+        this.globe = null;
+        this._vao = null;
+        this.bufferManagerMap.forEach((bufferManager) => {
+            bufferManager.bufferManager.free();
+        });
+        this._float32Array = null;
+    }
+
+
+
+
+
+
+    _buildPaddings(level: "input" | "innerCircle" | "elevation" | "geometry", subSetIDs: string[] | null = 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: string[] | null = null) {
+        // Implement inner circle padding logic
+
+        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: string[] | null = null) {
+        // Implement inner circle padding logic
+
+        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: string[] | null = null) {
+        this.__updateAdaptiveOpacityMultiplier();
+        const bufferToUpdate = [this.globe?.api_GetCurrentGeometry() === 1 ? "position2d" : "position3d"];
+        const datas = this._dataMap;
+        const wrapper: [InnerPadding1DegreeInput] = [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: GlobeChanges) {
+        if (globeChanges.lod) {
+            this.__updateLODRelatedParameters();
+            this._buildPaddings("innerCircle");
+        } else if (globeChanges.look || globeChanges.geometry) {
+            this._buildPaddings("elevation");
+        }
+
+    }
+    __updateLODRelatedParameters(): void {
+        const lod = this.globe?.api_GetCurrentLODWithDecimal() as number;
+        this._innerPaddingRatio = 1 - Math.pow(0.7, lod);
+    }
+
+    __updateAdaptiveOpacityMultiplier() {
+        if (this._options.adaptiveOpacity === true) {
+            const currentLod = this.globe?.api_GetCurrentLODWithDecimal() as number;
+            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<T extends LongLatDegree | null>(
+    globe: Globe,
+    paddingInput: Padding1DegreeInput,
+    paddingRatio: number,
+    outerCoords: T[] | null,
+): { outerCoords: T[], innerCoords: T[] } {
+
+    const innerCoords: T[] = new Array<T>(360);
+
+    if (outerCoords === null) {
+        outerCoords = new Array<T>(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.radius, // outer radius
+                i, // angle
+            );
+
+            const { long: endLong, lat: endLat } = globe.Math.FindPointByPolar(
+                paddingInput.center[0], // center long
+                paddingInput.center[1], // center lat
+                paddingInput.radius * paddingRatio, // inner radius
+                i, // angle
+            );
+
+            const longDifference = Math.abs(long - endLong);
+            // const latDifference = Math.abs(lat - endLat);
+
+            if (longDifference > 45) {
+                outerCoords[i] = null as T;
+                innerCoords[i] = null as T;
+                continue;
+            }
+
+            // Assign the calculated coordinates
+            outerCoords[i] = [long, lat] as T;
+            innerCoords[i] = [endLong, endLat] as T;
+        }
+    } else {
+        // Handle case when outerCoords is provided
+        for (let i = 0; i < 360; i++) {
+            if (outerCoords[i] === null) {
+                innerCoords[i] = null as T;
+                continue;
+            }
+
+            const { long: endLong, lat: endLat } = globe.Math.FindPointByPolar(
+                paddingInput.center[0],
+                paddingInput.center[1],
+                paddingInput.radius * paddingRatio,
+                i
+            );
+
+            innerCoords[i] = [endLong, endLat] as T;
+        }
+    }
+
+    return { outerCoords, innerCoords };
+}