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

package/range-tools-on-terrain/range-ring/plugin.js

@@ -1,6 +1,18 @@
 import { CircleOnTerrainPlugin } from "../../semiplugins/shape-on-terrain/circle-plugin";
 import { ArcOnTerrainPlugin } from "../../semiplugins/shape-on-terrain/arc-plugin";
-import { LinePlugin } from "../../semiplugins/lightweight/line-plugin";
+import { Padding1DegreePlugin } from '../../semiplugins/shape-on-terrain/padding-1-degree';
+import { padding1DegreeInputAdapter, rangeRingToArcInputAdapter, rangeRingToCircleInputAdapter, allCircleKeysAdapter, allArcKeysAdapter, createColorRatios } from "./adapters";
+export var ENUM_HIDE;
+(function (ENUM_HIDE) {
+    ENUM_HIDE[ENUM_HIDE["SHOW"] = 0] = "SHOW";
+    ENUM_HIDE[ENUM_HIDE["HIDE"] = 1] = "HIDE";
+    ENUM_HIDE[ENUM_HIDE["HIDE_1_DEGREE_PADDINGS"] = 2] = "HIDE_1_DEGREE_PADDINGS";
+})(ENUM_HIDE || (ENUM_HIDE = {}));
+export var ENUM_TEXT_HIDE;
+(function (ENUM_TEXT_HIDE) {
+    ENUM_TEXT_HIDE[ENUM_TEXT_HIDE["SHOW"] = 0] = "SHOW";
+    ENUM_TEXT_HIDE[ENUM_TEXT_HIDE["HIDE"] = 1] = "HIDE";
+})(ENUM_TEXT_HIDE || (ENUM_TEXT_HIDE = {}));
 // @ts-ignore
 export class RangeRingPlugin {
     id;
@@ -8,24 +20,227 @@ export class RangeRingPlugin {
     gl = null;
     circlePlugin;
     arcPlugin;
-    linePlugin;
+    paddingPlugin = null; // TODO: implement padding plugin
     _memory = new Map();
-    constructor(id) {
+    _freed = false;
+    textWritersMap = new Map();
+    _semiPluginOptions = {
+        circleOnTerrainOptions: {
+            variativeColorsOn: false,
+            defaultColor: [1, 1, 1, 1],
+            defaultHeightFromGroundIn3D: 30,
+        },
+        arcOnTerrainOptions: {
+            flatViewOn: true,
+            globeViewOn: true,
+            variativeColorsOn: false,
+            defaultColor: [1, 1, 1, 1],
+            defaultHeightFromGroundIn3D: 0,
+            vertexCount: 32,
+            cameraAttractionIsOn: true // If true, camera attraction is enabled else evenly distributed arc points are used
+        },
+        paddingOptions: {
+            variativeColorsOn: false,
+            defaultColor: [1, 1, 1, 1],
+            defaultHeightFromGroundIn3D: 0,
+        },
+    };
+    constructor(id, { textDataPreAdaptor = (center) => center, textWritersMap = new Map(), }) {
         this.id = id;
-        this.circlePlugin = new CircleOnTerrainPlugin(this.id + "-circle");
+        this.circlePlugin = new CircleOnTerrainPlugin(this.id + "-circle", {
+            variativeColorsOn: true,
+        });
         this.arcPlugin = new ArcOnTerrainPlugin(this.id + "-arc", {
-            vertexCount: 5,
+            variativeColorsOn: true,
+            vertexCount: 20,
+        });
+        this.paddingPlugin = new Padding1DegreePlugin(this.id + "-padding", {
+            variativeColorsOn: true,
+            defaultColor: [1, 1, 1, 1],
+            defaultHeightFromGroundIn3D: 0,
         });
-        this.linePlugin = new LinePlugin(this.id + "-line");
+        if (textWritersMap) {
+            this.textWritersMap = textWritersMap;
+        }
     }
     insertBulk(items) {
+        if (this._freed) {
+            console.warn("Plugin is freed, cannot insert items");
+            return;
+        }
+        if (this.globe === null || this.gl === null) {
+            console.warn("Globe or WebGL context is not initialized, cannot insert items");
+            return;
+        }
+        const visableItems = items.filter(item => item.hide !== ENUM_HIDE.HIDE);
+        if (this.paddingPlugin) {
+            const paddingInputs = visableItems.map(item => padding1DegreeInputAdapter(item)).flat();
+            this.paddingPlugin.insertBulk(paddingInputs);
+        }
+        const circleInputs = visableItems.filter(item => item.hide === ENUM_HIDE.SHOW).map(rangeRingToCircleInputAdapter).flat();
+        this.circlePlugin.insertBulk(circleInputs);
+        const arcInputs = visableItems.map((item) => rangeRingToArcInputAdapter(this.globe, item)).flat();
+        this.arcPlugin.insertBulk(arcInputs);
+        for (const item of items) {
+            this._memory.set(item.centerID, item);
+            if (item.hide !== ENUM_HIDE.HIDE && item.textHide === ENUM_HIDE.SHOW) {
+                this.updateText([item.centerID]);
+            }
+        }
+    }
+    removeCenters(centers) {
+        if (this._freed) {
+            console.warn("Plugin is freed, cannot remove centers");
+            return;
+        }
+        if (this.globe === null || this.gl === null) {
+            console.warn("Globe or WebGL context is not initialized, cannot remove centers");
+            return;
+        }
+        for (let i = 0; i < centers.length; i++) {
+            const rangeRingInput = this._memory.get(centers[i]);
+            if (!rangeRingInput) {
+                console.warn(`No data found for centerID: ${centers[i]}`);
+                continue;
+            }
+            const circleKeys = allCircleKeysAdapter(rangeRingInput);
+            this.circlePlugin.deleteBulk(circleKeys);
+            this.paddingPlugin?.deleteBulk(circleKeys);
+            const allArcKeys = allArcKeysAdapter(rangeRingInput);
+            this.arcPlugin.deleteBulk(allArcKeys);
+            this._memory.delete(centers[i]);
+        }
+        this.globe.DrawRender();
+    }
+    updateCenters() {
+    }
+    updateCentersCoordinate(items) {
+        if (this._freed) {
+            console.warn("Plugin is freed, cannot update centers coordinates");
+            return;
+        }
+        if (this.globe === null || this.gl === null) {
+            console.warn("Globe or WebGL context is not initialized, cannot update centers coordinates");
+            return;
+        }
+        const globe = this.globe;
+        for (const item of items) {
+            const { centerID, long, lat } = item;
+            const rangeRingInput = this._memory.get(centerID);
+            if (rangeRingInput) {
+                rangeRingInput.long = long;
+                rangeRingInput.lat = lat;
+                const arcData = rangeRingToArcInputAdapter(globe, rangeRingInput);
+                this.arcPlugin.updateCoordinates(arcData);
+                const circleData = rangeRingToCircleInputAdapter(rangeRingInput);
+                this.circlePlugin.updateCoordinates(circleData);
+                this.paddingPlugin?.updateCoordinates(circleData);
+                this.updateText([centerID]);
+            }
+        }
     }
-    _build() {
+    updateCentersColor(items) {
+        if (this._freed) {
+            console.warn("Plugin is freed, cannot update centers color");
+            return;
+        }
+        if (this.globe === null || this.gl === null) {
+            console.warn("Globe or WebGL context is not initialized, cannot update centers color");
+            return;
+        }
+        // update Colors from memory map
+        for (let item of items) {
+            const data = this._memory.get(item.centerID);
+            if (!data) {
+                console.warn(`No data found for centerID: ${item.centerID}`);
+                continue;
+            }
+            data.rgba = item.rgba;
+            // update arc Colors 
+            const arcColors = allArcKeysAdapter(data).map(key => ({ key, color: data.rgba }));
+            this.arcPlugin.updateColors(arcColors, false);
+            const circleColors = allCircleKeysAdapter(data).map(key => ({ key, color: data.rgba }));
+            this.circlePlugin.updateColors(circleColors);
+            if (this.paddingPlugin) {
+                const colorRatios = createColorRatios(data.rgba, data.stepAngle, 0.5);
+                for (const { key } of circleColors) {
+                    this.paddingPlugin?.updateColorRatios(key, colorRatios, false);
+                }
+            }
+            this.updateText([item.centerID]);
+        }
+        this.globe.DrawRender();
+    }
+    updateCentersHide() {
     }
     init(globe, gl) {
         this.globe = globe;
         this.gl = gl;
+        this.circlePlugin.init(globe, gl);
+        this.arcPlugin.init(globe, gl);
+        this.paddingPlugin?.init(globe, gl);
     }
     draw3D() {
+        if (this._freed) {
+            console.warn("RangeRing Plugin is freed, cannot draw");
+            return;
+        }
+        this.arcPlugin.draw3D();
+        this.paddingPlugin?.draw3D();
+        this.circlePlugin.draw3D();
+        for (const [key, writer] of this.textWritersMap) {
+            writer.draw();
+        }
+    }
+    free() {
+        if (this._freed) {
+            console.warn("RangeRing Plugin is already freed");
+            return;
+        }
+        this._freed = true;
+        this.circlePlugin.free();
+        this.arcPlugin.free();
+        this.paddingPlugin?.free();
+    }
+    updateText(centerIDs = null) {
+        if (this._freed) {
+            console.warn("Plugin is freed, cannot update text");
+            return;
+        }
+        if (this.globe === null || this.gl === null) {
+            console.warn("Globe or WebGL context is not initialized, cannot update text");
+            return;
+        }
+        const globe = this.globe;
+        const textWritersMap = this.textWritersMap;
+        let keys = centerIDs ?? this._memory.keys();
+        for (const centerID of keys) {
+            const rangeRingData = this._memory.get(centerID);
+            if (!rangeRingData)
+                continue;
+            for (const [key, writer] of textWritersMap) {
+                writer.insertText(rangeRingData);
+            }
+        }
+    }
+    deleteText(centerIDs) {
+        if (this._freed) {
+            console.warn("Plugin is freed, cannot delete text");
+            return;
+        }
+        if (this.globe === null || this.gl === null) {
+            console.warn("Globe or WebGL context is not initialized, cannot delete text");
+            return;
+        }
+        const globe = this.globe;
+        const textWritersMap = this.textWritersMap;
+        for (const centerID of centerIDs) {
+            const rangeRingData = this._memory.get(centerID);
+            if (!rangeRingData)
+                continue;
+            for (const [key, writer] of textWritersMap) {
+                writer.deleteText(rangeRingData);
+            }
+        }
     }
 }

package/range-tools-on-terrain/range-ring/types.js

@@ -1 +1,9 @@
-export {};
+export const ENUM_HIDE = Object.freeze({
+    SHOW: 0,
+    HIDE: 1,
+    HIDE_1_DEGREE_PADDINGS: 2
+});
+export const ENUM_TEXT_HIDE = Object.freeze({
+    SHOW: 0,
+    HIDE: 1
+});

package/semiplugins/interface.js

@@ -0,0 +1 @@
+export {};

package/semiplugins/lightweight/line-plugin.js

@@ -1,5 +1,6 @@
 import { LineOnGlobeCache } from "../../programs/line-on-globe/naive-accurate-flexible";
-import { BufferMapOrchestrator } from "../../util/account/create-buffermap-orchastration";
+import { BufferOrchestrator } from "../../util/account/single-attribute-buffer-management/buffer-orchestrator";
+import { BufferManager } from "../../util/account/single-attribute-buffer-management/buffer-manager";
 import { sphereCoord } from "../../util/geometry/index";
 import { constraintFloat } from "../../util/check/typecheck";
 export class LinePlugin {
@@ -10,33 +11,36 @@ export class LinePlugin {
     vao = null;
     _options;
     _uboHandler = null;
-    _bufferOrchestrator = null;
+    bufferOrchestrator;
+    bufferManagersMap = new Map();
     _freed = false;
-    constructor(id, { flatViewOn = true, globeViewOn = true, variativeColorsOn = false, defaultColor = [1, 1, 1, 1], dashedLineOpacityVariativeOn = false, dashedLineRatioVariativeOn = false, bufferType = "DYNAMIC_DRAW", opacity = 1.0 } = {}) {
+    constructor(id, { flatViewOn = true, globeViewOn = true, variativeColorsOn = false, defaultColor = [1, 1, 1, 1], dashedLineOpacityVariativeOn = false, dashedLineRatioVariativeOn = false, bufferType = "DYNAMIC_DRAW", opacity = 1.0, initialCapacity = 10 } = {}) {
         this.id = id;
         this._options = {
-            flatViewOn,
-            globeViewOn,
-            variativeColorsOn,
-            defaultColor,
-            dashedLineOpacityVariativeOn,
-            dashedLineRatioVariativeOn,
-            bufferType,
-            opacity
+            flatViewOn: flatViewOn ?? true,
+            globeViewOn: globeViewOn ?? true,
+            variativeColorsOn: variativeColorsOn ?? false,
+            defaultColor: defaultColor ?? [1, 1, 1, 1],
+            dashedLineOpacityVariativeOn: dashedLineOpacityVariativeOn ?? false,
+            dashedLineRatioVariativeOn: dashedLineRatioVariativeOn ?? false,
+            bufferType: bufferType ?? "DYNAMIC_DRAW",
+            opacity: opacity ?? 1.0,
+            initialCapacity: initialCapacity ?? 10
         };
+        this.bufferOrchestrator = new BufferOrchestrator({ capacity: initialCapacity ?? 10 });
     }
     init(globe, gl) {
         this.globe = globe;
         this.gl = gl;
         this.program = LineOnGlobeCache.get(globe);
         this._uboHandler = this.program.createUBO();
-        this._bufferOrchestrator = new BufferMapOrchestrator(gl, this._createBufferDetailsMap(), 10 // initial capacity
-        );
+        this.setDefaultColor(this._options.defaultColor);
+        this._fillManagerMap();
         this.vao = this.program.createVAO(...this._createSelectBufferNames().map((key) => {
             if (key === null) {
                 return null;
             }
-            const bufferManagerComp = this._bufferOrchestrator?.bufferManagersMap.get(key);
+            const bufferManagerComp = this.bufferManagersMap.get(key);
             if (bufferManagerComp === undefined) {
                 throw new Error(`Buffer key ${key} does not exist in bufferManagersMap`);
             }
@@ -49,26 +53,43 @@ export class LinePlugin {
         }));
     }
     // PLUGIN INTERFACE METHODS
+    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(items) {
-        const { _bufferOrchestrator, globe } = this;
-        if (!_bufferOrchestrator || !globe) {
+        const { bufferOrchestrator, bufferManagersMap, globe } = this;
+        if (!bufferOrchestrator || !globe) {
             throw new Error("Buffer orchestrator or globe is not initialized.");
         }
-        _bufferOrchestrator.insertBulk(items);
+        bufferOrchestrator.insertBulk(items, bufferManagersMap);
         this.globe?.DrawRender();
     }
     deleteBulk(keys) {
-        const { _bufferOrchestrator, globe } = this;
-        if (!_bufferOrchestrator || !globe) {
+        const { bufferOrchestrator, bufferManagersMap, globe } = this;
+        if (!bufferOrchestrator || !globe) {
             throw new Error("Buffer orchestrator or globe is not initialized.");
         }
-        _bufferOrchestrator.deleteBulk(keys);
+        bufferOrchestrator.deleteBulk(keys, bufferManagersMap);
         this.globe?.DrawRender();
     }
-    setPluginOpacity(opacity) {
+    setPluginOpacity(opacity, drawRender = false) {
         constraintFloat(opacity, 0, 1);
         this._options.opacity = opacity;
-        this.globe?.DrawRender();
+        if (drawRender) {
+            this.globe?.DrawRender();
+        }
     }
     setPluginDashedLineRatio(ratio) {
         constraintFloat(ratio, 0, 1);
@@ -81,14 +102,19 @@ export class LinePlugin {
         this._options.defaultColor[3] = opacity; // Update the default color's alpha channel
         this.globe?.DrawRender();
     }
-    setDefaultColor(color) {
+    setDefaultColor(color, drawRender = false) {
         if (!this.globe || !this.gl) {
             console.warn("Globe or WebGL context is not initialized.");
             return;
         }
         this._options.defaultColor = color;
         this._uboHandler?.updateSingle("u_color", new Float32Array(color));
-        this.globe?.DrawRender();
+        if (drawRender) {
+            this.globe.DrawRender();
+        }
+    }
+    updateCoordinates(items) {
+        throw new Error("Method not implemented.");
     }
     // GLOBE INTERACTION METHODS
     draw3D() {
@@ -99,11 +125,10 @@ export class LinePlugin {
         if (!this.globe || !this.gl || !this.program || !this.vao) {
             throw new Error("Globe, GL context or program is not initialized.");
         }
-        const { _bufferOrchestrator, _options, _uboHandler, vao } = this;
-        if (!_bufferOrchestrator || !_bufferOrchestrator || !_uboHandler) {
+        const { bufferOrchestrator, _options, _uboHandler, vao } = this;
+        if (!bufferOrchestrator || !bufferOrchestrator || !_uboHandler) {
             throw new Error("Buffer orchestrator is not initialized.");
         }
-        const { bufferOrchestrator } = _bufferOrchestrator;
         const { flatViewOn, globeViewOn, opacity } = _options;
         const drawOptions = {
             drawRange: {
@@ -127,67 +152,60 @@ export class LinePlugin {
         if (this._freed)
             return;
         // TODO: FILL
-        this._bufferOrchestrator?.free();
+        this.bufferManagersMap.forEach((manager) => {
+            manager.bufferManager.free();
+        });
         this._uboHandler?.free();
         LineOnGlobeCache.release(this.globe);
         this._freed = true;
     }
     // IMPLICIT INTERFACE METHODS
-    _createBufferDetailsMap() {
+    _fillManagerMap() {
         const globe = this.globe;
         const { flatViewOn, globeViewOn, variativeColorsOn, dashedLineOpacityVariativeOn, dashedLineRatioVariativeOn, bufferType = "DYNAMIC_DRAW" } = this._options;
-        const m = new Map();
+        const m = this.bufferManagersMap;
+        const initialCapacity = this._options.initialCapacity;
         if (flatViewOn) {
             m.set("start_position", {
-                itemSize: 2,
-                bufferType: bufferType, // TODO: Ask User? 
-                buffer: null,
+                bufferManager: new BufferManager(globe.gl, 2, { bufferType, initialCapacity: this._options.initialCapacity }),
                 adaptor: (item) => {
                     const result = new Float32Array(globe.api_GetMercator2DPoint(item.start[0], item.start[1]));
                     return result;
                 }
             });
             m.set("end_position", {
-                itemSize: 2,
-                bufferType: bufferType,
-                buffer: null,
+                bufferManager: new BufferManager(globe.gl, 2, { bufferType, initialCapacity: this._options.initialCapacity }),
                 adaptor: (item) => new Float32Array(globe.api_GetMercator2DPoint(item.end[0], item.end[1]))
             });
         }
         if (globeViewOn) {
             m.set("start_position_3d", {
-                itemSize: 3,
-                bufferType: bufferType,
+                bufferManager: new BufferManager(globe.gl, 3, { bufferType, initialCapacity: this._options.initialCapacity }),
                 adaptor: (item) => sphereCoord(item.start[0], item.start[1], globe, item.start_altitude || 0)
             });
             m.set("end_position_3d", {
-                itemSize: 3,
-                bufferType: bufferType,
+                bufferManager: new BufferManager(globe.gl, 3, { bufferType, initialCapacity: this._options.initialCapacity }),
                 adaptor: (item) => sphereCoord(item.end[0], item.end[1], globe, item.end_altitude || 0)
             });
         }
         if (variativeColorsOn) {
             m.set("color", {
-                itemSize: 4,
-                bufferType: bufferType,
+                bufferManager: new BufferManager(globe.gl, 4, { bufferType, initialCapacity: this._options.initialCapacity }),
                 adaptor: (item) => new Float32Array(item.color !== undefined ? item.color : [-1, -1, -1, -1])
             });
         }
         if (dashedLineOpacityVariativeOn) {
             m.set("dashed_line_opacity", {
-                itemSize: 1,
-                bufferType: bufferType,
+                bufferManager: new BufferManager(globe.gl, 1, { bufferType, initialCapacity: this._options.initialCapacity }),
                 adaptor: (item) => new Float32Array(item.dashed_line_opacity !== undefined ? [item.dashed_line_opacity] : [-1])
             });
         }
         if (dashedLineRatioVariativeOn) {
             m.set("dashed_line_ratio", {
-                itemSize: 1,
-                bufferType: bufferType,
+                bufferManager: new BufferManager(globe.gl, 1, { bufferType, initialCapacity: this._options.initialCapacity }),
                 adaptor: (item) => new Float32Array(item.dashed_line_ratio !== undefined ? [item.dashed_line_ratio] : [-1])
             });
         }
-        return m;
     }
     _createSelectBufferNames() {
         const { flatViewOn, globeViewOn, variativeColorsOn, dashedLineOpacityVariativeOn, dashedLineRatioVariativeOn } = this._options;

package/semiplugins/lightweight/piece-of-pie-plugin.js

@@ -15,17 +15,23 @@ export class PieceOfPiePlugin {
     bufferManagersMap = null;
     bufferOrchestrator = new BufferOrchestrator({ capacity: INITIAL_CAPACITY });
     drawMode = "BOTH";
-    opacity = 1;
+    _uboHandler = null;
     _pluginOptions = {
         bufferType: "STATIC_DRAW",
         initialCapacity: INITIAL_CAPACITY,
-        defaultAltitude: 0, // Default altitude is ground level
+        opacity: 1.0, // Default opacity is 1.0
+        defaultHeightFromGroundIn3D: 0, // Default altitude is ground level
+        defaultColor: [1, 1, 1, 1], // Default color is white with full opacity
+        variativeColorsOn: false, // Default is to not use variative colors
     };
-    constructor(id, options = {}) {
+    constructor(id, options = null) {
         this.id = id;
-        options.bufferType && (this._pluginOptions.bufferType = options.bufferType);
-        options.initialCapacity && (this._pluginOptions.initialCapacity = options.initialCapacity);
-        options.defaultAltitude && (this._pluginOptions.defaultAltitude = options.defaultAltitude);
+        if (options) {
+            this._pluginOptions = {
+                ...this._pluginOptions,
+                ...options
+            };
+        }
     }
     insertBulk(items) {
         this.bufferOrchestrator.insertBulk(items, this.bufferManagersMap);
@@ -35,10 +41,12 @@ export class PieceOfPiePlugin {
         this.bufferOrchestrator.deleteBulk(keys, this.bufferManagersMap);
         this.globe?.DrawRender();
     }
-    setPluginOpacity(opacity) {
+    setPluginOpacity(opacity, drawRender = true) {
         opacityCheck(opacity);
-        this.opacity = opacity;
-        this.globe?.DrawRender();
+        this._uboHandler?.updateSingle("u_opacity", new Float32Array([opacity]));
+        if (drawRender) {
+            this.globe?.DrawRender();
+        }
     }
     setDrawMode(drawMode) {
         if (drawMode !== "TRIANGLE_FAN" && drawMode !== "LINE_STRIP" && drawMode !== "BOTH") {
@@ -47,6 +55,17 @@ export class PieceOfPiePlugin {
         this.drawMode = drawMode;
         this.globe?.DrawRender();
     }
+    setDefaultColor(color) {
+        if (this._isFreed) {
+            console.warn("PieceOfPiePlugin is freed, cannot set default color.");
+            return;
+        }
+        if (!Array.isArray(color) || color.length !== 4) {
+            throw new Error("Color must be an array of 4 numbers [R, G, B, A].");
+        }
+        this._uboHandler?.updateSingle("u_color", new Float32Array(color));
+        this.globe?.DrawRender();
+    }
     _createBufferManagersMap() {
         const { gl, globe, _pluginOptions } = this;
         const { bufferType, initialCapacity } = _pluginOptions;
@@ -60,7 +79,7 @@ export class PieceOfPiePlugin {
                 }],
             ["centerCoords3d", {
                     bufferManager: new BufferManager(gl, 3, { bufferType, initialCapacity }),
-                    adaptor: (item) => sphereCoord(item.center[0], item.center[1], globe, (item.altitude ?? this._pluginOptions.defaultAltitude) / 1000)
+                    adaptor: (item) => sphereCoord(item.center[0], item.center[1], globe, (item.altitude ?? this._pluginOptions.defaultHeightFromGroundIn3D) / 1000)
                 }],
             ["startAngle2d", {
                     bufferManager: new BufferManager(gl, 1, { bufferType, initialCapacity }),
@@ -102,21 +121,22 @@ export class PieceOfPiePlugin {
                     bufferManager: new BufferManager(gl, 1, { bufferType, initialCapacity }),
                     adaptor: (item) => new Float32Array([item.fillingMode ?? 0])
                 }],
-            ["rgba", {
-                    bufferManager: new BufferManager(gl, 4, { bufferType, initialCapacity }),
-                    adaptor: (item) => {
-                        if (!item.color || item.color.length === 0) {
-                            return new Float32Array([1, 1, 1, 1]); // Default color if none provided
-                        }
-                        return new Float32Array(item.color);
-                    }
-                }
-            ],
             ["radius", {
                     bufferManager: new BufferManager(gl, 1, { bufferType, initialCapacity }),
                     adaptor: (item) => new Float32Array([item.radius])
                 }],
         ]);
+        if (this._pluginOptions.variativeColorsOn) {
+            bufferManagersMap.set("rgba", {
+                bufferManager: new BufferManager(gl, 4, { bufferType, initialCapacity }),
+                adaptor: (item) => {
+                    if (!item.color || item.color.length === 0) {
+                        return new Float32Array([1, 1, 1, 1]); // Default color if none provided
+                    }
+                    return new Float32Array(item.color);
+                }
+            });
+        }
         this.bufferManagersMap = bufferManagersMap;
     }
     init(globe, gl) {
@@ -135,6 +155,9 @@ export class PieceOfPiePlugin {
             'rgba',
             'radius',
             'fillingMode'].map((name) => {
+            if (!this.bufferManagersMap?.has(name)) {
+                return null; // this make vao with default attribute value with no buffer bound to it
+            }
             const buffer = this.bufferManagersMap?.get(name)?.bufferManager.buffer;
             return {
                 buffer: buffer,
@@ -142,21 +165,23 @@ export class PieceOfPiePlugin {
                 offset: 0,
             };
         }));
+        this._uboHandler = this.program.createUBO();
+        this._uboHandler.updateSingle("u_color", new Float32Array(this._pluginOptions.defaultColor));
+        this._uboHandler.updateSingle("u_opacity", new Float32Array([this._pluginOptions.opacity ?? 1.0])); // Default opacity is 1.0
     }
     draw3D() {
         if (!this.gl || !this.program || !this.vao || !this.globe) {
-            console.warn("PieChartPlugin is not initialized properly.");
+            console.warn("PieChartPlugin is not initialized properly Or unregistered from globe.");
             return;
         }
         const length = this.bufferOrchestrator.length;
-        console.log("Drawing PieChartPlugin with length:", length);
         this.gl.disable(this.gl.DEPTH_TEST);
         if (this.drawMode === "BOTH") {
-            this.program?.draw(length, this.vao, EDGE_COUNT, this.opacity, "LINE_STRIP");
-            this.program?.draw(length, this.vao, EDGE_COUNT, this.opacity, "TRIANGLE_FAN");
+            this.program?.draw(length, this.vao, EDGE_COUNT, "LINE_STRIP", this._uboHandler);
+            this.program?.draw(length, this.vao, EDGE_COUNT, "TRIANGLE_FAN", this._uboHandler);
         }
         else {
-            this.program?.draw(length, this.vao, EDGE_COUNT, this.opacity, this.drawMode);
+            this.program?.draw(length, this.vao, EDGE_COUNT, this.drawMode, this._uboHandler);
         }
         this.gl.enable(this.gl.DEPTH_TEST);
     }