@pirireis/webglobeplugins 0.15.2-3.alpha → 0.15.3-alpha

package/semiplugins/shape-on-terrain/circle-plugin.js

@@ -9,7 +9,6 @@ import { globe3Dcoordinates, globe2Dcoordinates } from "../../Math/methods";
 import { StaticDynamicStrategy, StaticDynamicState } from "../../util/build-strategy/static-dynamic";
 import { WORLD_RADIUS_3D, WORLD_RADIUS_MERCATOR } from "../../Math/constants";
 import { opacityCheck } from "../../util/check/typecheck";
-import { FrameCounterTrigger } from "../../util/frame-counter-trigger";
 const ACTIVATE_DYNAMIC_STRATEGY_AT_LEVEL = 8;
 const CIRCLE_POINTS_COUNT_HALF = 65; // Half of the points plus one for the reflection
 const CIRCLE_POINTS_COUNT = CIRCLE_POINTS_COUNT_HALF * 2 - 1; // Number of points to approximate the circle
@@ -59,47 +58,45 @@ export class CircleOnTerrainPlugin {
     globe = null;
     gl = null;
     lineProgram = null;
-    bufferManagersMap = new Map();
+    bufferManagerMap = new Map();
     bufferOrchestrator = new BufferOrchestrator();
     circleMap = new Map();
     _cameraUniformBlock = null;
-    _freed = false;
+    _isFree = false;
     _circleUBOHandler = null;
     _opacity = 1;
     _vao = null;
     _dobuild = true; // This is used to trigger the build of circles when the camera position changes.
-    _frameCounterTrigger = null;
     _staticDynamicStrategy = null;
-    _options = {
+    _styleOptions = {
         variativeColorsOn: false,
         defaultColor: [0.1, 0.1, 0.1, 1], // Default color in RGBA format
-        defaultHeightFromGroundIn3D: 30.0,
-        isMSL: false
+        defaultHeightFromGroundIn3D: 30.0
     };
-    _textDataPreAdaptor = undefined;
-    constructor(id, styleOptions = null) {
+    constructor(id, styleOptions = {}) {
         this.id = id;
-        if (styleOptions) {
-            this._options = { ...this._options, ...styleOptions };
-        }
+        this._styleOptions = { ...this._styleOptions, ...styleOptions };
+        this._styleOptions.defaultColor = new Float32Array(this._styleOptions.defaultColor);
     }
     init(globe, gl) {
         this.globe = globe;
         this.gl = gl;
         // Initialize the program cache for line strip rendering.
+        this._staticDynamicStrategy = new StaticDynamicStrategy(globe, ACTIVATE_DYNAMIC_STRATEGY_AT_LEVEL);
         this.lineProgram = LineStripProgramCache.get(globe);
+        // const g3D = globe3Dcoordinates(globe, 30);
         const g2D = globe2Dcoordinates(globe);
         // Initialize with a reasonable initial capacity to prevent buffer size issues
         const initialCapacity = 100; // Start with capacity for 100 circles
-        this.bufferManagersMap.set("position3d", {
+        this.bufferManagerMap.set("position3d", {
             bufferManager: new BufferManager(gl, (CIRCLE_POINTS_COUNT + 1) * 3, { initialCapacity }), // plus 1 is for butting linestrips
             adaptor: (item) => {
-                const { longLatArr, height = this._options.defaultHeightFromGroundIn3D, msl = this._options.isMSL } = item;
-                const result = globe3Dcoordinates(globe, longLatArr, height, msl, { paddingCount: 1, paddingValue: NaN });
+                const { longLatArr, height = this._styleOptions.defaultHeightFromGroundIn3D } = item;
+                const result = globe3Dcoordinates(globe, height)(longLatArr, { paddingCount: 1, paddingValue: NaN });
                 return result;
             }
         });
-        this.bufferManagersMap.set("position2d", {
+        this.bufferManagerMap.set("position2d", {
             bufferManager: new BufferManager(gl, (CIRCLE_POINTS_COUNT + 1) * 2, { initialCapacity }),
             adaptor: (item) => {
                 const { longLatArr } = item;
@@ -107,8 +104,8 @@ export class CircleOnTerrainPlugin {
                 return result;
             }
         });
-        if (this._options.variativeColorsOn) {
-            this.bufferManagersMap.set("color", {
+        if (this._styleOptions.variativeColorsOn) {
+            this.bufferManagerMap.set("color", {
                 bufferManager: new BufferManager(gl, (CIRCLE_POINTS_COUNT + 1) * 4, { initialCapacity }),
                 adaptor: (item) => {
                     if (item.color) {
@@ -118,109 +115,50 @@ export class CircleOnTerrainPlugin {
                     }
                     else {
                         for (let i = 0; i < CIRCLE_POINTS_COUNT; i++) {
-                            _colorArray.set(this._options.defaultColor, i * 4);
+                            _colorArray.set(this._styleOptions.defaultColor, i * 4);
                         }
                     }
                     return _colorArray;
                 }
             });
         }
-        this._vao = this.lineProgram.createVAO(createBufferAndReadInfo(this.bufferManagersMap.get("position3d")?.bufferManager.buffer), createBufferAndReadInfo(this.bufferManagersMap.get("position2d")?.bufferManager.buffer), this._options.variativeColorsOn ?
-            createBufferAndReadInfo(this.bufferManagersMap.get("color")?.bufferManager.buffer) : null);
+        this._vao = this.lineProgram.createVAO(createBufferAndReadInfo(this.bufferManagerMap.get("position3d")?.bufferManager.buffer), createBufferAndReadInfo(this.bufferManagerMap.get("position2d")?.bufferManager.buffer), this._styleOptions.variativeColorsOn ?
+            createBufferAndReadInfo(this.bufferManagerMap.get("color")?.bufferManager.buffer) : null);
         this._circleUBOHandler = this.lineProgram.createUBO();
-        this.setDefaultColor(this._options.defaultColor);
         this._cameraUniformBlock = CameraUniformBlockTotemCache.get(globe);
-        this._staticDynamicStrategy = new StaticDynamicStrategy(globe, ACTIVATE_DYNAMIC_STRATEGY_AT_LEVEL, () => {
-            this.__buildStaticCircles();
-        });
-        this._frameCounterTrigger = new FrameCounterTrigger(globe, 15, 1000, (globeChanges) => {
-            if (this._freed)
-                return;
-            this._buildCircles();
-        });
-    }
-    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.bufferManagersMap);
     }
     insertBulk(circles) {
-        if (this._freed)
+        if (this._isFree)
             return;
         if (!this.globe || !this.gl || !this.lineProgram || !this.bufferOrchestrator ||
-            !this.bufferManagersMap || !this._vao || !this._circleUBOHandler) {
+            !this.bufferManagerMap || !this._vao || !this._circleUBOHandler) {
             throw new Error("Plugin not initialized properly");
         }
-        const keys = [];
-        let newItemCount = 0;
+        //
+        const fillStaticKeys = [];
         for (const circleInput of circles) {
             if (!circleInput.key || !circleInput.center || !circleInput.radius) {
                 console.warn(`CircleOnTerrainPlugin: Circle input is missing required properties: ${circleInput.radius} or ${circleInput.center} or ${circleInput.key}`);
                 continue;
             }
-            if (circleInput.radius <= 0) {
-                console.warn(`CircleOnTerrainPlugin: Circle ${circleInput.key} has non-positive radius ${circleInput.radius}. Skipping.`);
-                continue;
-            }
-            keys.push(circleInput.key);
-            if (!this.circleMap.has(circleInput.key)) {
-                newItemCount++;
-            }
+            fillStaticKeys.push(circleInput.key);
             const circleForAzimuthCalc = CircleMethods.createCircleClosestAzimuthAngleProperties(circleInput);
             this.circleMap.set(circleInput.key, [circleInput, circleForAzimuthCalc]);
-        }
-        this.bufferOrchestrator.ensureSpace(newItemCount, this.bufferManagersMap);
-        this._buildCircles(keys);
-        if (this._options.variativeColorsOn) {
-            this.__fillColor(keys);
-        }
-        this.globe.DrawRender();
-    }
-    updateColors(keyColorCouples, drawRender = true) {
-        if (this._freed) {
-            console.warn("Plugin is freed, cannot increase space");
-            return;
-        }
-        if (this.globe === null) {
-            console.warn("Globe is not initialized.");
-            return;
-        }
-        if (this._options.variativeColorsOn === false) {
-            console.warn("VariativeColors are not enabled");
-            return;
-        }
-        for (const { key, color } of keyColorCouples) {
-            const [circleInput] = this.circleMap.get(key) || [];
-            if (circleInput) {
-                circleInput.color = color;
-                this.__fillColor([key]);
-            }
-            else {
-                console.warn(`Circle key ${key} not found in circleMap.`);
+            if (this._staticDynamicStrategy?.getState() !== StaticDynamicState.DYNAMIC) {
+                fillStaticKeys.push(circleInput.key);
             }
         }
-        if (drawRender) {
-            this.globe.DrawRender();
-        }
+        this.__buildStaticCircles(fillStaticKeys);
+        this.globe.DrawRender();
     }
     deleteBulk(keys) {
-        if (this._freed)
+        if (this._isFree)
             return;
         if (!this.globe || !this.gl || !this.lineProgram || !this.bufferOrchestrator ||
-            !this.bufferManagersMap || !this._vao || !this._circleUBOHandler) {
+            !this.bufferManagerMap || !this._vao || !this._circleUBOHandler) {
             throw new Error("Plugin not initialized properly");
         }
-        this.bufferOrchestrator.deleteBulk(keys, this.bufferManagersMap);
+        this.bufferOrchestrator.deleteBulk(keys, this.bufferManagerMap);
         for (const key of keys) {
             if (this.circleMap.has(key)) {
                 this.circleMap.delete(key);
@@ -230,104 +168,47 @@ export class CircleOnTerrainPlugin {
             }
         }
     }
-    setPluginOpacity(opacity, drawRender = false) {
+    setPluginOpacity(opacity) {
         if (!this.globe || !this.gl) {
             console.warn("Globe or WebGL context is not initialized.");
             return;
         }
         opacityCheck(opacity);
         this._opacity = opacity;
-        if (drawRender) {
-            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._buildCircles();
-        this.globe?.DrawRender();
+        this.globe.DrawRender();
     }
-    setDefaultColor(color, drawRender = false) {
+    setDefaultColor(color) {
         if (!this.globe || !this.gl) {
             console.warn("Globe or WebGL context is not initialized.");
             return;
         }
         this._circleUBOHandler?.updateSingle("u_color", new Float32Array(color));
-        if (drawRender) {
-            this.globe.DrawRender();
-        }
-    }
-    updateCoordinates(items) {
-        if (this._freed) {
-            console.warn("CircleOnTerrainPlugin is freed, cannot update coordinates");
-            return;
-        }
-        if (this.globe === null) {
-            console.warn("Globe is not initialized, cannot update coordinates");
-            return;
-        }
-        const updateKeys = [];
-        for (const item of items) {
-            const { key, center, radius } = item;
-            const [circleInput] = this.circleMap.get(key) || [];
-            if (circleInput) {
-                circleInput.center = center;
-                circleInput.radius = radius;
-                updateKeys.push(key);
-            }
-            else {
-                console.warn(`Circle key ${key} not found in circleMap.`);
-                continue;
-            }
-        }
-        this._buildCircles(updateKeys);
         this.globe.DrawRender();
     }
     // IMPLICIT METHODS
-    __fillColor(subSetIDs) {
-        if (!this._options.variativeColorsOn)
-            return;
-        const wrapper = [null];
-        for (const key of subSetIDs) {
-            const [circleInput, circleForAzimuthCalc] = this.circleMap.get(key) || [];
-            if (circleInput) {
-                wrapper[0] = circleInput;
-                this.bufferOrchestrator.insertBulk(wrapper, this.bufferManagersMap, ["color"]);
-            }
-        }
-    }
-    _buildCircles(subSetIDs = null) {
+    _buildCircles() {
         // @ts-ignore
         this._staticDynamicStrategy?.updateState();
         const state = this._staticDynamicStrategy?.getState();
-        if (state === StaticDynamicState.DYNAMIC) {
-            this.__buildDynamicCircles(subSetIDs);
+        if (state === StaticDynamicState.TO_STATIC) {
+            this.__buildStaticCircles();
         }
-        else if (subSetIDs || state === StaticDynamicState.TO_STATIC) {
-            this.__buildStaticCircles(subSetIDs);
+        else if (state === StaticDynamicState.DYNAMIC) {
+            this.__buildCircles();
         }
     }
-    __buildDynamicCircles(subSetIDs = null) {
-        const { globe, gl, _cameraUniformBlock, lineProgram, bufferOrchestrator, bufferManagersMap, circleMap } = this;
+    __buildCircles() {
+        const { globe, gl, _cameraUniformBlock, lineProgram, bufferOrchestrator, bufferManagerMap, circleMap } = this;
         if (!globe || !gl || !_cameraUniformBlock || !lineProgram ||
-            !bufferOrchestrator || !bufferManagersMap || !circleMap)
+            !bufferOrchestrator || !bufferManagerMap || !circleMap)
             throw new Error("Plugin not initialized properly");
         // unoptimized.. resets all circles.
-        // bufferOrchestrator.resetWithCapacity(bufferManagersMap, circleMap.size);
+        // bufferOrchestrator.resetWithCapacity(bufferManagerMap, circleMap.size);
         // Prepare the data for the buffers
         const data = [{
                 key: "",
                 longLatArr: [],
-                height: null,
-                msl: null
+                height: null
             }];
         const lookAtPosition = _cameraUniformBlock.getLookAtVector();
         const cameraPosition = _cameraUniformBlock.getNormalizedCameraVector();
@@ -336,16 +217,8 @@ export class CircleOnTerrainPlugin {
         vec3.normalize(cameraPosition, cameraPosition);
         const currentLOD = globe.api_GetCurrentLODWithDecimal();
         const circlePointsLongLat = new Float64Array((CIRCLE_POINTS_COUNT) * 2);
-        let keys;
-        if (!subSetIDs || subSetIDs.length === 0) {
-            keys = Array.from(this.circleMap.keys());
-            // bufferOrchestrator.resetWithCapacity(bufferManagersMap, circleMap.size);
-        }
-        else {
-            keys = subSetIDs;
-        }
-        for (const key of keys) {
-            const [{ radius, center, height = null, msl = null }, circleForAzimuthCalc] = this.circleMap.get(key);
+        for (const [key, circle] of this.circleMap.entries()) {
+            const [{ radius, center, height = null }, circleForAzimuthCalc] = circle;
             const closestAzimuthAngle = CircleMethods.closestAzimuthAngle(circleForAzimuthCalc, cameraPosition);
             const stregthLevel = defineStregthLevel(currentLOD, radius);
             if (stregthLevel < 0) {
@@ -357,61 +230,69 @@ export class CircleOnTerrainPlugin {
             data[0].key = key;
             data[0].longLatArr = circlePointsLongLat;
             data[0].height = height;
-            data[0].msl = msl;
             // Add to buffer orchestrator
-            this.bufferOrchestrator.insertBulk(data, bufferManagersMap, [
-                this.globe?.api_GetCurrentGeometry() === 0 ? "position3d" : "position2d",
-            ]);
+            this.bufferOrchestrator.insertBulk(data, bufferManagerMap, ["position3d", "position2d"]);
         }
     }
     // this will be used to build static circles, which are not affected by camera position or LOD.
     // LOD < 8 or something
     __buildStaticCircles(subSetIDs = null) {
-        const { globe, gl, _cameraUniformBlock, lineProgram, bufferOrchestrator, bufferManagersMap, circleMap } = this;
+        const { globe, gl, _cameraUniformBlock, lineProgram, bufferOrchestrator, bufferManagerMap, circleMap } = this;
         if (!globe || !gl || !_cameraUniformBlock || !lineProgram ||
-            !bufferOrchestrator || !bufferManagersMap || !circleMap)
+            !bufferOrchestrator || !bufferManagerMap || !circleMap)
             throw new Error("Plugin not initialized properly");
-        const datas = [];
+        const data = [{
+                key: "",
+                longLatArr: [],
+                height: null,
+                color: [1, 1, 1, 1]
+            }];
         // ensure buffer orchestrotrator have enough capacity
         // all circles are build with even sampling, AttractionLevel = 0
         const templateAngles = AnglesStash[0];
         const zeroRotation = 0;
-        let keys;
         if (!subSetIDs || subSetIDs.length === 0) {
-            keys = Array.from(this.circleMap.keys());
-            // bufferOrchestrator.resetWithCapacity(bufferManagersMap, circleMap.size);
+            const circlePointsLongLat = new Float64Array((CIRCLE_POINTS_COUNT) * 2);
+            bufferOrchestrator.resetWithCapacity(bufferManagerMap, circleMap.size);
+            for (const [key, circle] of this.circleMap.entries()) {
+                const [{ radius, center, height = null, color = null }, _] = circle;
+                CircleCDF.globeFindPointByPolarHalfCircle(circlePointsLongLat, globe, center[0], center[1], radius, zeroRotation, templateAngles);
+                data[0].key = key;
+                data[0].longLatArr = circlePointsLongLat;
+                data[0].height = height;
+                data[0].color = color || this._styleOptions.defaultColor;
+                this.bufferOrchestrator.insertBulk(data, bufferManagerMap);
+            }
         }
         else {
-            keys = subSetIDs;
-        }
-        for (let key of keys) {
-            if (!this.circleMap.has(key)) {
-                console.warn(`CircleOnTerrainPlugin: Circle ${key} not found in circleMap.`);
-                continue;
+            // This does check the size beforehand.
+            // subset is probably is used to insert a single item or,
+            // rebuild of existing items which passed from rbushTree or similar indexed search. 
+            // therefore, it is not necessary to check for new items and extend capacity 
+            for (let key of subSetIDs) {
+                if (!this.circleMap.has(key)) {
+                    console.warn(`CircleOnTerrainPlugin: Circle ${key} not found in circleMap.`);
+                    continue;
+                }
+                const [{ radius, center, height = null, color = null }, _] = this.circleMap.get(key);
+                const circlePointsLongLat = new Float64Array((CIRCLE_POINTS_COUNT) * 2);
+                CircleCDF.globeFindPointByPolarHalfCircle(circlePointsLongLat, globe, center[0], center[1], radius, zeroRotation, templateAngles);
+                data[0].key = key;
+                data[0].longLatArr = circlePointsLongLat;
+                data[0].height = height;
+                data[0].color = color || this._styleOptions.defaultColor;
+                this.bufferOrchestrator.insertBulk(data, bufferManagerMap);
             }
-            const [{ radius, center, height = null, color = null, msl = undefined }, _] = this.circleMap.get(key);
-            const circlePointsLongLat = new Float64Array((CIRCLE_POINTS_COUNT) * 2);
-            CircleCDF.globeFindPointByPolarHalfCircle(circlePointsLongLat, globe, center[0], center[1], radius, zeroRotation, templateAngles);
-            datas.push({
-                key,
-                longLatArr: circlePointsLongLat,
-                height,
-                color: color || this._options.defaultColor,
-                msl
-            });
         }
-        this.bufferOrchestrator.insertBulk(datas, bufferManagersMap, [this.globe?.api_GetCurrentGeometry() === 0 ? "position3d" : "position2d"]);
     }
     // GLOBE API INTERFACE
     draw3D() {
-        const { _freed, globe, gl, lineProgram, bufferOrchestrator, bufferManagersMap, _vao, _circleUBOHandler } = this;
-        if (_freed || !globe || !gl || !lineProgram || !bufferOrchestrator ||
-            !bufferManagersMap || !_vao || !_circleUBOHandler) {
+        const { _isFree, globe, gl, lineProgram, bufferOrchestrator, bufferManagerMap, _vao, _circleUBOHandler } = this;
+        if (_isFree || !globe || !gl || !lineProgram || !bufferOrchestrator ||
+            !bufferManagerMap || !_vao || !_circleUBOHandler) {
             return;
         }
-        // if (globe.api_IsScreenMoving())
-        this._frameCounterTrigger?.trigger();
-        // this._buildCircles();
+        this._buildCircles();
         const drawOptions = {
             drawRange: {
                 first: 0,
@@ -423,18 +304,18 @@ export class CircleOnTerrainPlugin {
         gl.enable(gl.DEPTH_TEST);
     }
     free() {
-        if (this._freed)
+        if (this._isFree)
             return;
-        this._freed = true;
+        this._isFree = true;
         if (this.lineProgram) {
             LineStripProgramCache.release(this.lineProgram);
             this.lineProgram = null;
         }
         this.circleMap.clear();
-        this.bufferManagersMap.forEach(({ bufferManager }) => {
+        this.bufferManagerMap.forEach(({ bufferManager }) => {
             bufferManager.free();
         });
-        this.bufferManagersMap.clear();
+        this.bufferManagerMap.clear();
         CameraUniformBlockTotemCache.release(this.globe);
     }
 }

package/semiplugins/shape-on-terrain/derived/padding-plugin.js

@@ -0,0 +1,101 @@
+import { ArcOnTerrainPlugin } from "../arc-plugin";
+const EDGE_COUNT = 5;
+const paddingKeys = (padding) => {
+    const stepCount = padding.coverAngle / padding.stepAngle;
+    const keys = new Array(Math.ceil(stepCount));
+    for (let i = 0; i < stepCount; i++) {
+        keys[i] = padding.key + i;
+    }
+    if (keys.length > stepCount) {
+        keys[keys.length - 1] = padding.key + stepCount;
+    }
+    return keys;
+};
+const adapterPadding2Arc = (globe, padding) => {
+    const stepCount = padding.coverAngle / padding.stepAngle;
+    const result = new Array(Math.ceil(stepCount));
+    const fill = (i, angle) => {
+        const startPoint = globe.Math.FindPointByPolar(padding.center[0], padding.center[1], padding.outerRadius, angle);
+        const endPoint = globe.Math.FindPointByPolar(padding.center[0], padding.center[1], padding.innerRadius, angle);
+        result[i] = {
+            key: padding.key + i,
+            start: [startPoint.long, startPoint.lat],
+            end: [endPoint.long, endPoint.lat],
+            color: padding.color,
+            height: padding.height,
+        };
+    };
+    for (let i = 0; i < stepCount; i++) {
+        const angle = padding.startAngle + i * padding.stepAngle;
+        fill(i, angle);
+    }
+    if (result.length > stepCount) {
+        const i = result.length - 1;
+        const angle = padding.startAngle + padding.coverAngle;
+        fill(i, angle);
+    }
+    return result;
+};
+export const chargerAdaptor = (chargerInput, plugin, padding) => {
+};
+export class PaddingPlugin {
+    id;
+    arcPlugin;
+    globe = null;
+    _memory = new Map();
+    isFreed = false;
+    constructor(id, { variativeColorsOn = true, defaultColor = [1, 1, 1, 1], defaultHeightFromGroundIn3D = 30.0, vertexCount = EDGE_COUNT } = {}) {
+        this.id = id;
+        this.arcPlugin = new ArcOnTerrainPlugin(id, {
+            cameraAttractionIsOn: false,
+            vertexCount: vertexCount,
+            variativeColorsOn: variativeColorsOn,
+            defaultColor: defaultColor,
+            defaultHeightFromGroundIn3D: defaultHeightFromGroundIn3D,
+        });
+    }
+    insertBulk(items) {
+        for (const padding of items) {
+            this.__delete(padding.key);
+            this._memory.set(padding.key, padding);
+        }
+        const arcInputs = items.flatMap(padding => adapterPadding2Arc(this.globe, padding));
+        this.arcPlugin.insertBulk(arcInputs);
+    }
+    deleteBulk(keys) {
+        const arcKeys = keys.flatMap(key => paddingKeys({ key, center: [0, 0], outerRadius: 0, innerRadius: 0, startAngle: 0, coverAngle: 0, stepAngle: 0, color: [0, 0, 0, 1] }));
+        this.arcPlugin.deleteBulk(arcKeys);
+    }
+    updateColor(key, color) {
+        // TODO: get all padding keys and update all of them
+        if (!this._memory.has(key)) {
+            console.warn(`Padding with key ${key} does not exist.`);
+            return;
+        }
+        const keys = paddingKeys(this._memory.get(key));
+        for (let i = 0; i < keys.length; i++) {
+            this.arcPlugin.updateColor(keys[i], color);
+        }
+    }
+    __delete(key) {
+        const padding = this._memory.get(key);
+        if (padding) {
+            const keys = paddingKeys(padding);
+            this.arcPlugin.deleteBulk(keys);
+            this._memory.delete(key);
+        }
+    }
+    init(globe, gl) {
+        this.globe = globe;
+        this.arcPlugin.init(globe, gl);
+    }
+    draw3D() {
+        this.arcPlugin.draw3D();
+    }
+    free() {
+        if (this.isFreed)
+            return;
+        this.isFreed = true;
+        this.arcPlugin.free();
+    }
+}

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

@@ -0,0 +1,85 @@
+"use strict";
+// //      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, LongLat, Meter, Color } from '../../types';
+// 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/acconut/single-attribute-buffer-management/buffer-orchestrator';
+// import { LineStripProgramCache, LineProgram } from '../../programs/line-on-globe/linestrip/linestrip';
+// import { ProgramInterface } from '../../types';
+// export type OneDegreePaddingInput = {
+//     key: string;
+//     center: LongLat;
+//     outerRadius: Meter;
+//     color: Color;
+// };
+// const _float32Array = new Float32Array(360 * 3 * 2).fill(NaN);
+// export class Paddings1Degree implements ProgramInterface {
+//     id: string;
+//     private globe: Globe | null = null;
+//     private bufferOrchestrator: BufferOrchestrator;
+//     private bufferManagersMap: BufferManagersMap;
+//     private lineProgram: LineProgram | null = null;
+//     private _LODCoeffecientForPaddingScale: number = 1;
+//     private _PaddingSizeRatio = 0.1; // 0.1 means 10% of the padding size is used for 3d padding
+//     private _finalPaddingSizeRatio = 0.1; // this._LODCoefficientForPaddingScale * this._PaddingSizeRatio; // final padding size ratio is the product of LOD coefficient and padding size ratio
+//     constructor(id: string, { capacity = 1000 } = {}) {
+//         this.id = id;
+//         this.bufferOrchestrator = new BufferOrchestrator({ capacity });
+//         this.bufferManagersMap = new Map();
+//         this.lineProgram = null;
+//     }
+//     init(globe: Globe): void {
+//         this.globe = globe;
+//         this.lineProgram = LineStripProgramCache.get(globe);
+//     }
+//     __updateLODCoefficientForPaddingScale(): void {
+//         // TODO: call this ones when lod changes or each frame // maybe only on 3d geometry
+//     }
+//     __fillBufferManagersMap() {
+//         const globe = this.globe as Globe;
+//         const gl = globe.gl as WebGL2RenderingContext;
+//         this.bufferManagersMap.set("position2d", {
+//             bufferManager: new BufferManager(gl,
+//                 360 * (2 + 1), // plus 1 to cut
+//                 { bufferType: "STATIC_DRAW", initialCapacity: 10 }),
+//             adaptor: (PaddingInput: OneDegreePaddingInput) => {
+//                 for (let i = 0; i < 360; i++) {
+//                     let { long, lat } = globe.Math.FindPointByPolar(
+//                         PaddingInput.center[0], // center long
+//                         PaddingInput.center[1], // center lat
+//                         PaddingInput.outerRadius, // outer radius
+//                         i, // angle
+//                     )
+//                     let corrds = globe.api_GetMercator2DPoint(long, lat);
+//                     // fill the second coordinate with 0
+//                     _float32Array[i * 3] = corrds[0];
+//                     _float32Array[i * 3 + 1] = corrds[1];
+//                     ({ long, lat } = globe.Math.FindPointByPolar(
+//                         PaddingInput.center[0], // center long
+//                         PaddingInput.center[1], // center lat
+//                         PaddingInput.outerRadius * this._finalPaddingSizeRatio, // inner radius
+//                         i, // angle
+//                     ));
+//                     let innerCorrds = globe.api_GetMercator2DPoint(long, lat);
+//                     // fill the second coordinate with 0
+//                     _float32Array[i * 3 + 2] = innerCorrds[0];
+//                     _float32Array[i * 3 + 3] = innerCorrds[1];
+//                 }
+//                 return _float32Array;
+//             }
+//         });
+//         // Other methods like draw, insertBulk, deleteBulk, etc. would go here
+//     }

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

@@ -60,16 +60,6 @@ export class BufferManager {
         }
         gl.bindBuffer(gl.ARRAY_BUFFER, null);
     }
-    insertBlock(items, offset, adapter, Constructor = Float32Array) {
-        const { gl, buffer, itemSize } = this;
-        const cpuBuffer = new Constructor(itemSize * items.length);
-        for (let i = 0; i < items.length; i++) {
-            cpuBuffer.set(adapter(items[i]), i * itemSize);
-        }
-        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
-        gl.bufferSubData(gl.ARRAY_BUFFER, offset * itemSize * 4, cpuBuffer);
-        gl.bindBuffer(gl.ARRAY_BUFFER, null);
-    }
     // TODO: this is broken
     defrag(offsetValues, occupiedCapacity, newCapacity) {
         const { gl, buffer, bufferType, itemSize } = this;