@pirireis/webglobeplugins 0.12.0-alpha → 0.14.0-alpha

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

@@ -0,0 +1,368 @@
+// import { ArcOnTerrainPluginOptions } from "./type";
+import { LineStripProgramCache } from "../../programs/line-on-globe/linestrip/linestrip";
+import { createBufferAndReadInfo } from "../../util/gl-util/buffer/attribute-loader";
+// import { populateFloat32Array } from "../../util/jshelpers/data-filler";
+import { BufferManager, BufferOrchestrator } from "../../util/account/single-attribute-buffer-management/index";
+import { globe3Dcoordinates, globe2Dcoordinates, RADIANS } from "../../Math/methods";
+import { generateArcPoints, evenlySpacedArcPoints } from "../../Math/arc-cdf-points";
+import { StaticDynamicState, StaticDynamicStrategy } from "../../util/build-strategy/static-dynamic";
+import { opacityCheck } from "../../util/check/typecheck";
+import * as vec3 from "../../Math/vec3";
+import * as arc from "../../Math/arc";
+import { CameraUniformBlockTotemCache } from "../../programs/totems/camerauniformblock";
+import { WORLD_RADIUS_3D } from "../../Math/constants";
+const DYNAMIC_STRATEGY_START_LOD = 12;
+const INITAL_CAPACITY = 10;
+const _attractionPoint = [0, 0, 0];
+const _start = [0, 0, 0];
+const _end = [0, 0, 0];
+const _0arc = arc.create([1, 0, 0], [0, 1, 0]); // zero arc for intersection tests
+export class ArcOnTerrainPlugin {
+    id;
+    program = null;
+    bufferManagerMap = null;
+    _bufferOrchestrator = new BufferOrchestrator({ capacity: INITAL_CAPACITY });
+    _opacity = 1;
+    _arcUBOHandler = null;
+    _vao = null;
+    globe = null;
+    gl = null;
+    _arcMap;
+    _cameraUniformBlock = null;
+    _staticDynamicStrategy = null;
+    _options;
+    _coordinaateBufferKeysForUpdate = [];
+    _freed = false;
+    constructor(id, { globeViewOn = true, // If true, arcs are drawn in 3D globe view
+    flatViewOn = true, // If true, arcs are drawn in 2D flat view
+    variativeColorsOn = false, defaultColor = [0.1, 0.1, 1, 1], // Default color in RGBA format
+    defaultHeightFromGroundIn3D = 30.0, // Default height from ground in
+    vertexCount = 70, // Number of vertices per arc
+    cameraAttractionIsOn = true // If true, camera attraction is enabled else evenly distributed arc points are used
+     } = {}) {
+        this.id = id;
+        this._arcMap = new Map();
+        this._options = {
+            globeViewOn: globeViewOn ? true : false,
+            flatViewOn: flatViewOn ? true : false,
+            variativeColorsOn: variativeColorsOn ? true : false,
+            defaultColor: defaultColor ? defaultColor : [0.1, 0.1, 1, 1],
+            defaultHeightFromGroundIn3D: defaultHeightFromGroundIn3D ? defaultHeightFromGroundIn3D : 30.0,
+            vertexCount: vertexCount ? vertexCount : 70,
+            cameraAttractionIsOn: cameraAttractionIsOn ? cameraAttractionIsOn : true
+        };
+    }
+    insertBulk(arcs) {
+        const keys = [];
+        for (let arcInput of arcs) {
+            const { key, start, end } = arcInput;
+            if (this._arcMap.has(key)) {
+                this._arcMap.delete(key);
+            }
+            vec3.fromLongLatToUnitVector(_start, [start[0] * RADIANS, start[1] * RADIANS]);
+            vec3.fromLongLatToUnitVector(_end, [end[0] * RADIANS, end[1] * RADIANS]);
+            const _arc = arc.create(_start, _end);
+            this._arcMap.set(key, [_arc, arcInput]); // height is null for now
+            keys.push(key);
+        }
+        this.__buildStaticArcs(keys, true);
+        this.globe.DrawRender();
+    }
+    deleteBulk(keys) {
+        if (!this._bufferOrchestrator || !this.bufferManagerMap || !this.globe) {
+            console.warn("Buffer orchestrator or buffer manager map is not initialized.");
+            return;
+        }
+        for (const key of keys) {
+            if (this._arcMap.has(key)) {
+                this._arcMap.delete(key);
+            }
+            else {
+                console.warn(`Arc with key ${key} not found in arcMap.`);
+            }
+        }
+        this._bufferOrchestrator.deleteBulk(keys, this.bufferManagerMap);
+        this.globe.DrawRender();
+    }
+    updateColor(key, color) {
+        if (this._options.variativeColorsOn === false) {
+            console.warn("Variative colors are not enabled in this plugin. Create another instance with variativeColorsOn: true to use this feature.");
+            return;
+        }
+        const { _bufferOrchestrator, bufferManagerMap } = this;
+        if (!_bufferOrchestrator || !bufferManagerMap) {
+            console.warn("Buffer orchestrator or buffer manager map is not initialized.");
+            return;
+        }
+        const arcInput = this._arcMap.get(key);
+        if (!arcInput) {
+            console.warn(`Arc with key ${key} not found in arcMap.`);
+            return;
+        }
+        arcInput[1].color = color; // Update the color in the arc map
+        _bufferOrchestrator.updateBulk([{ key: key, color: color }], bufferManagerMap, ["color"]);
+        this.globe.DrawRender();
+    }
+    setPluginOpacity(opacity) {
+        if (!this.globe || !this.gl) {
+            console.warn("Globe or WebGL context is not initialized.");
+            return;
+        }
+        opacityCheck(opacity);
+        this._opacity = opacity;
+        this.globe.DrawRender();
+    }
+    setCameraAttraction(isOn) {
+        if (!this.globe || !this.gl) {
+            console.warn("Globe or WebGL context is not initialized.");
+            return;
+        }
+        this._options.cameraAttractionIsOn = isOn;
+        this.globe.DrawRender();
+    }
+    init(globe, gl) {
+        this.globe = globe;
+        this.gl = gl;
+        this.program = LineStripProgramCache.get(globe);
+        this._staticDynamicStrategy = new StaticDynamicStrategy(globe, DYNAMIC_STRATEGY_START_LOD); // Initialize static-dynamic strategy with a transition level of 8
+        this._cameraUniformBlock = CameraUniformBlockTotemCache.get(globe);
+        this._fillBufferManagerMap();
+        this._bufferOrchestrator = new BufferOrchestrator();
+        this._arcUBOHandler = this.program.createUBO();
+        this._arcUBOHandler.update(new Map([
+            ["u_color", new Float32Array(this._options.defaultColor)],
+        ]));
+    }
+    draw3D() {
+        // Drawing logic here
+        if (!this.globe || !this.gl) {
+            console.warn("Globe or WebGL context is not initialized.");
+            return;
+        }
+        this._staticDynamicStrategy?.updateState();
+        this._buildArcs(); // can be async
+        const { gl, program, _bufferOrchestrator, _vao, _arcUBOHandler, } = this;
+        if (!gl || !program || !_bufferOrchestrator || !_vao || !_arcUBOHandler) {
+            console.warn("WebGL context, program, or buffer orchestrator is not initialized.");
+            return;
+        }
+        gl.disable(gl.DEPTH_TEST);
+        const drawOptions = {
+            drawRange: {
+                first: 0,
+                count: _bufferOrchestrator.length * (this._options.vertexCount + 1)
+            },
+            indexes: null
+        };
+        program.draw(_vao, drawOptions, this._opacity, _arcUBOHandler);
+        gl.enable(gl.DEPTH_TEST);
+    }
+    _buildArcs() {
+        const state = this._staticDynamicStrategy?.getState();
+        if (state === StaticDynamicState.TO_STATIC) {
+            this.__buildStaticArcs();
+        }
+        else if (state === StaticDynamicState.DYNAMIC) {
+            this.__buildArcs();
+        }
+    }
+    __buildStaticArcs(keys = [], calledFromInsert = false) {
+        const { globe, _arcMap, _cameraUniformBlock, bufferManagerMap, _bufferOrchestrator } = this;
+        if (!globe || !_cameraUniformBlock || !bufferManagerMap || !_bufferOrchestrator) {
+            console.warn("Globe or camera uniform block is not initialized.");
+            return;
+        }
+        const longLat = [0, 0];
+        const _attractionStrength = 0;
+        const longLatArr = new Float32Array(2 * this._options.vertexCount);
+        const data = [{
+                key: "staticArcs",
+                longLatArr: longLatArr,
+                height: null,
+                color: this._options.defaultColor
+            }];
+        if (keys.length == 0) {
+            for (const [key, [arcInstance, arcInput]] of _arcMap) {
+                arc.copy(_0arc, arcInstance);
+                const generatedPoints = evenlySpacedArcPoints(_0arc.p0, _0arc.normal, _0arc.coverAngle, this._options.vertexCount);
+                for (let i = 0; i < generatedPoints.length; i++) {
+                    const point = generatedPoints[i];
+                    vec3.fromUnitVectorToLongLat(longLat, point);
+                    longLatArr.set([longLat[0] / RADIANS, longLat[1] / RADIANS], i * 2);
+                }
+                data[0].key = key;
+                data[0].height = arcInput.height ?? this._options.defaultHeightFromGroundIn3D;
+                data[0].color = arcInput.color ?? this._options.defaultColor;
+                if (calledFromInsert) {
+                    this._bufferOrchestrator.insertBulk(data, bufferManagerMap);
+                }
+                else {
+                    this._bufferOrchestrator.updateBulk(data, bufferManagerMap, this._coordinaateBufferKeysForUpdate);
+                }
+            }
+        }
+        else {
+            for (let key of keys) {
+                if (!_arcMap.has(key)) {
+                    console.warn(`Arc with key ${key} not found in arcMap.`);
+                    continue;
+                }
+                const [arcInstance, arcInput] = _arcMap.get(key);
+                arc.copy(_0arc, arcInstance);
+                const generatedPoints = evenlySpacedArcPoints(_0arc.p0, _0arc.normal, _0arc.coverAngle, this._options.vertexCount);
+                for (let i = 0; i < generatedPoints.length; i++) {
+                    const point = generatedPoints[i];
+                    vec3.fromUnitVectorToLongLat(longLat, point);
+                    longLatArr.set([longLat[0] / RADIANS, longLat[1] / RADIANS], i * 2);
+                }
+                data[0].key = key;
+                data[0].height = arcInput.height ?? this._options.defaultHeightFromGroundIn3D;
+                data[0].color = arcInput.color ?? this._options.defaultColor;
+                if (calledFromInsert) {
+                    this._bufferOrchestrator.insertBulk(data, bufferManagerMap);
+                }
+                else {
+                    this._bufferOrchestrator.updateBulk(data, bufferManagerMap, this._coordinaateBufferKeysForUpdate);
+                }
+            }
+        }
+    }
+    __buildArcs() {
+        const { globe, _arcMap, _cameraUniformBlock, bufferManagerMap } = this;
+        if (!globe || !_cameraUniformBlock || !bufferManagerMap) {
+            console.warn("Globe or camera uniform block is not initialized.");
+            return;
+        }
+        const { cameraAttractionIsOn } = this._options;
+        const lookAtPosition = _cameraUniformBlock.getLookAtVector();
+        const cameraPosition = _cameraUniformBlock.getCameraVector();
+        vec3.divideScalar(cameraPosition, cameraPosition, WORLD_RADIUS_3D);
+        vec3.add(cameraPosition, cameraPosition, lookAtPosition);
+        // vec3.normalize(cameraPosition, cameraPosition);
+        vec3.divideScalar(cameraPosition, cameraPosition, 2);
+        // vec3.multiplyScalar(cameraPosition, cameraPosition, 1.3);
+        const _attractionStrength = (() => {
+            const lod = globe.api_GetCurrentLODWithDecimal();
+            if (lod < 11) {
+                return 1;
+            }
+            return lod * (lod - 8.5);
+        })();
+        const result = [];
+        const longLat = [0, 0];
+        for (const [key, [arcInstance, arcInput]] of _arcMap) {
+            arc.copy(_0arc, arcInstance);
+            const isOnArc = arc.closestPoint(_attractionPoint, _0arc, cameraPosition);
+            if (!isOnArc) {
+                if (vec3.distanceSquared(cameraPosition, _0arc.p0) < vec3.distanceSquared(cameraPosition, _0arc.p1)) {
+                    vec3.copy(_attractionPoint, _0arc.p0);
+                }
+                else {
+                    vec3.copy(_attractionPoint, _0arc.p1);
+                }
+            }
+            const generatedPoints = cameraAttractionIsOn ?
+                generateArcPoints(_0arc.p0, _0arc.p1, _0arc.normal, _attractionPoint, this._options.vertexCount, _attractionStrength)
+                : evenlySpacedArcPoints(_0arc.p0, _0arc.normal, _0arc.coverAngle, this._options.vertexCount);
+            const longLatArr = new Float32Array(2 * this._options.vertexCount);
+            for (let i = 0; i < generatedPoints.length; i++) {
+                const point = generatedPoints[i];
+                vec3.fromUnitVectorToLongLat(longLat, point);
+                longLatArr.set([longLat[0] / RADIANS, longLat[1] / RADIANS], i * 2);
+            }
+            result.push({
+                key: key,
+                longLatArr: longLatArr,
+                height: arcInput.height ?? this._options.defaultHeightFromGroundIn3D,
+                // color: arcInput.color // Use the color from the arc map
+            });
+        }
+        // this._bufferOrchestrator.resetWithCapacity(bufferManagerMap, result.length);
+        this._bufferOrchestrator.insertBulk(result, bufferManagerMap, ["position3d", "position2d"]);
+    }
+    _fillBufferManagerMap() {
+        const { gl, globe } = this;
+        if (!gl || !globe) {
+            console.warn("WebGL context or globe is not initialized.");
+            return;
+        }
+        const g2D = globe2Dcoordinates(globe);
+        const { flatViewOn, globeViewOn, variativeColorsOn } = this._options;
+        this.bufferManagerMap = new Map();
+        if (globeViewOn) {
+            this.bufferManagerMap.set("position3d", {
+                bufferManager: new BufferManager(gl, 3 * (this._options.vertexCount + 1), { bufferType: "STREAM_DRAW", initialCapacity: INITAL_CAPACITY }),
+                adaptor: (item) => {
+                    const { longLatArr, height = this._options.defaultHeightFromGroundIn3D } = item;
+                    const result = globe3Dcoordinates(globe, height)(longLatArr, { paddingCount: 1 });
+                    return result;
+                }
+            });
+        }
+        if (flatViewOn) {
+            this.bufferManagerMap.set("position2d", {
+                bufferManager: new BufferManager(gl, 2 * (this._options.vertexCount + 1), { bufferType: "STREAM_DRAW", initialCapacity: INITAL_CAPACITY }),
+                adaptor: (item) => {
+                    const { longLatArr } = item;
+                    return g2D(longLatArr, { paddingCount: 1 });
+                }
+            });
+        }
+        if (this._options.variativeColorsOn) {
+            const _colorArray = new Float32Array(4 * (this._options.vertexCount + 1));
+            this.bufferManagerMap.set("color", {
+                bufferManager: new BufferManager(gl, 4 * (this._options.vertexCount + 1), { bufferType: "STREAM_DRAW", initialCapacity: INITAL_CAPACITY }),
+                adaptor: (item) => {
+                    // Calculate color based on radius
+                    if (item.color) {
+                        for (let i = 0; i < this._options.vertexCount; i++) {
+                            _colorArray.set(item.color, 4 * i); // Fill color for each vertex
+                        }
+                        return _colorArray;
+                    }
+                    else {
+                        return _colorArray.fill(-1, 0, 4 * (this._options.vertexCount)); // Fill with -1 if no color is provided
+                    }
+                }
+            });
+        }
+        const bufferObjects = [
+            globeViewOn ? "position3d" : null,
+            flatViewOn ? "position2d" : null,
+            variativeColorsOn ? "color" : null
+        ].map((key) => {
+            if (!key)
+                return null;
+            this._coordinaateBufferKeysForUpdate.push(key);
+            // @ts-ignore
+            const bufferManager = this.bufferManagerMap.get(key).bufferManager;
+            // @ts-ignore
+            return createBufferAndReadInfo(bufferManager.buffer);
+        });
+        // @ts-ignore
+        this._vao = this.program.createVAO(bufferObjects[0], // position3d
+        bufferObjects[1], // position2d
+        bufferObjects[2] // color
+        );
+    }
+    free() {
+        if (this._freed) {
+            console.warn("Plugin already freed");
+            return;
+        }
+        if (!this.gl || !this.program) {
+            console.warn("WebGL context or program is not initialized.");
+            return;
+        }
+        this._arcUBOHandler?.free();
+        this.bufferManagerMap?.forEach((manager) => {
+            manager.bufferManager.free();
+        });
+        CameraUniformBlockTotemCache.release(this.globe);
+        LineStripProgramCache.release(this.globe);
+        this.gl = null;
+        this.globe = null;
+        this._arcMap.clear();
+        this._coordinaateBufferKeysForUpdate = [];
+    }
+}

package/{shape-on-terrain/circle/plugin.js → semiplugins/shape-on-terrain/circle-plugin.js}

@@ -1,13 +1,15 @@
-import { LineStripProgramCache } from "../../programs/line-on-globe/linestrip";
+import { LineStripProgramCache } from "../../programs/line-on-globe/linestrip/linestrip";
 import { BufferManager, BufferOrchestrator } from "../../util/account/single-attribute-buffer-management/index";
 import { CameraUniformBlockTotemCache } from "../../programs/totems/camerauniformblock";
-import { createBufferAndReadInfo } from '../../util/gl-util/buffer/attribute-loader';
+import { createBufferAndReadInfo } from "../../util/gl-util/buffer/attribute-loader";
 import * as CircleMethods from "../../Math/circle";
 import * as CircleCDF from "../../Math/circle-cdf-points";
 import * as vec3 from "../../Math/vec3";
 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";
+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
 const DENSE_PART_SAMPLE_RATIO = 0.80; // Ratio of the dense part of the circle
@@ -50,6 +52,7 @@ const defineStregthLevel = (lod, radiusMeters) => {
     return Math.min(level, ATTRACTION_LEVELS - 1);
 };
 const AnglesStash = CircleCDF.createCummulativeTemplateStash(ATTRACTION_LEVELS, CIRCLE_POINTS_COUNT_HALF, DENSE_PART_SAMPLE_RATIO, STRENGTH_FACTOR);
+const _colorArray = new Float32Array(4 * CIRCLE_POINTS_COUNT); // Used to store the color for each circle
 export class CircleOnTerrainPlugin {
     id;
     globe = null;
@@ -65,18 +68,120 @@ export class CircleOnTerrainPlugin {
     _vao = null;
     _dobuild = true; // This is used to trigger the build of circles when the camera position changes.
     _staticDynamicStrategy = null;
-    constructor(id) {
+    _styleOptions = {
+        variativeColorsOn: false,
+        defaultColor: [0.1, 0.1, 0.1, 1], // Default color in RGBA format
+        defaultHeightFromGroundIn3D: 30.0
+    };
+    constructor(id, styleOptions = {}) {
         this.id = id;
+        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.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._styleOptions.defaultHeightFromGroundIn3D } = item;
+                const result = globe3Dcoordinates(globe, height)(longLatArr, { paddingCount: 1, paddingValue: NaN });
+                return result;
+            }
+        });
+        this.bufferManagerMap.set("position2d", {
+            bufferManager: new BufferManager(gl, (CIRCLE_POINTS_COUNT + 1) * 2, { initialCapacity }),
+            adaptor: (item) => {
+                const { longLatArr } = item;
+                const result = g2D(longLatArr, { paddingCount: 1, paddingValue: NaN });
+                return result;
+            }
+        });
+        if (this._styleOptions.variativeColorsOn) {
+            this.bufferManagerMap.set("color", {
+                bufferManager: new BufferManager(gl, (CIRCLE_POINTS_COUNT + 1) * 4, { initialCapacity }),
+                adaptor: (item) => {
+                    if (item.color) {
+                        for (let i = 0; i < CIRCLE_POINTS_COUNT; i++) {
+                            _colorArray.set(item.color, i * 4);
+                        }
+                    }
+                    else {
+                        for (let i = 0; i < CIRCLE_POINTS_COUNT; i++) {
+                            _colorArray.set(this._styleOptions.defaultColor, i * 4);
+                        }
+                    }
+                    return _colorArray;
+                }
+            });
+        }
+        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._cameraUniformBlock = CameraUniformBlockTotemCache.get(globe);
+    }
+    insertBulk(circles) {
+        if (this._isFree)
+            return;
+        if (!this.globe || !this.gl || !this.lineProgram || !this.bufferOrchestrator ||
+            !this.bufferManagerMap || !this._vao || !this._circleUBOHandler) {
+            throw new Error("Plugin not initialized properly");
+        }
+        //
+        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;
+            }
+            fillStaticKeys.push(circleInput.key);
+            const circleForAzimuthCalc = CircleMethods.createCircleClosestAzimuthAngleProperties(circleInput);
+            this.circleMap.set(circleInput.key, [circleInput, circleForAzimuthCalc]);
+            if (this._staticDynamicStrategy?.getState() !== StaticDynamicState.DYNAMIC) {
+                fillStaticKeys.push(circleInput.key);
+            }
+        }
+        this.__buildStaticCircles(fillStaticKeys);
+        this.globe.DrawRender();
+    }
+    deleteBulk(keys) {
+        if (this._isFree)
+            return;
+        if (!this.globe || !this.gl || !this.lineProgram || !this.bufferOrchestrator ||
+            !this.bufferManagerMap || !this._vao || !this._circleUBOHandler) {
+            throw new Error("Plugin not initialized properly");
+        }
+        this.bufferOrchestrator.deleteBulk(keys, this.bufferManagerMap);
+        for (const key of keys) {
+            if (this.circleMap.has(key)) {
+                this.circleMap.delete(key);
+            }
+            else {
+                console.warn(`CircleOnTerrainPlugin: Circle ${key} not found in circleMap. Cannot delete.`);
+            }
+        }
+    }
+    setPluginOpacity(opacity) {
+        if (!this.globe || !this.gl) {
+            console.warn("Globe or WebGL context is not initialized.");
+            return;
+        }
+        opacityCheck(opacity);
+        this._opacity = opacity;
+        this.globe.DrawRender();
+    }
+    // IMPLICIT METHODS
     _buildCircles() {
-        // 
         // @ts-ignore
-        this.__buildCircles();
-        return;
         this._staticDynamicStrategy?.updateState();
         const state = this._staticDynamicStrategy?.getState();
-        if (state === StaticDynamicState.TO_STATIC)
-            console.log("state", state);
         if (state === StaticDynamicState.TO_STATIC) {
             this.__buildStaticCircles();
         }
@@ -90,11 +195,12 @@ export class CircleOnTerrainPlugin {
             !bufferOrchestrator || !bufferManagerMap || !circleMap)
             throw new Error("Plugin not initialized properly");
         // unoptimized.. resets all circles.
-        bufferOrchestrator.resetWithCapacity(bufferManagerMap, circleMap.size);
+        // bufferOrchestrator.resetWithCapacity(bufferManagerMap, circleMap.size);
         // Prepare the data for the buffers
         const data = [{
                 key: "",
-                longLatArr: []
+                longLatArr: [],
+                height: null
             }];
         const lookAtPosition = _cameraUniformBlock.getLookAtVector();
         const cameraPosition = _cameraUniformBlock.getNormalizedCameraVector();
@@ -102,13 +208,11 @@ export class CircleOnTerrainPlugin {
         vec3.add(cameraPosition, cameraPosition, lookAtPosition);
         vec3.normalize(cameraPosition, cameraPosition);
         const currentLOD = globe.api_GetCurrentLODWithDecimal();
-        // const currentGeom = globe.api_GetCurrentGeometry();
         const circlePointsLongLat = new Float64Array((CIRCLE_POINTS_COUNT) * 2);
         for (const [key, circle] of this.circleMap.entries()) {
-            const [{ radius, center }, circleForAzimuthCalc] = circle;
+            const [{ radius, center, height = null }, circleForAzimuthCalc] = circle;
             const closestAzimuthAngle = CircleMethods.closestAzimuthAngle(circleForAzimuthCalc, cameraPosition);
             const stregthLevel = defineStregthLevel(currentLOD, radius);
-            // console.log('DrawStregthLevel', stregthLevel, currentLOD, radius);
             if (stregthLevel < 0) {
                 console.warn(`CircleOnTerrainPlugin: Circle ${key} has too small radius for current LOD ${currentLOD}. Skipping., radius: ${radius}, stregthLevel: ${stregthLevel}`);
                 continue;
@@ -117,8 +221,9 @@ export class CircleOnTerrainPlugin {
             CircleCDF.globeFindPointByPolarHalfCircle(circlePointsLongLat, globe, center[0], center[1], radius, closestAzimuthAngle, templateAngles);
             data[0].key = key;
             data[0].longLatArr = circlePointsLongLat;
+            data[0].height = height;
             // Add to buffer orchestrator
-            this.bufferOrchestrator.insertBulk(data, bufferManagerMap);
+            this.bufferOrchestrator.insertBulk(data, bufferManagerMap, ["position3d", "position2d"]);
         }
     }
     // this will be used to build static circles, which are not affected by camera position or LOD.
@@ -130,7 +235,9 @@ export class CircleOnTerrainPlugin {
             throw new Error("Plugin not initialized properly");
         const data = [{
                 key: "",
-                longLatArr: []
+                longLatArr: [],
+                height: null,
+                color: [1, 1, 1, 1]
             }];
         // ensure buffer orchestrotrator have enough capacity
         // all circles are build with even sampling, AttractionLevel = 0
@@ -140,10 +247,12 @@ export class CircleOnTerrainPlugin {
             const circlePointsLongLat = new Float64Array((CIRCLE_POINTS_COUNT) * 2);
             bufferOrchestrator.resetWithCapacity(bufferManagerMap, circleMap.size);
             for (const [key, circle] of this.circleMap.entries()) {
-                const [{ radius, center }, _] = circle;
+                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);
             }
         }
@@ -157,66 +266,18 @@ export class CircleOnTerrainPlugin {
                     console.warn(`CircleOnTerrainPlugin: Circle ${key} not found in circleMap.`);
                     continue;
                 }
-                const [{ radius, center }, _] = this.circleMap.get(key);
+                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);
             }
         }
     }
-    init(globe, gl) {
-        this.globe = globe;
-        this.gl = gl;
-        // Initialize the program cache for line strip rendering.
-        this._staticDynamicStrategy = new StaticDynamicStrategy(globe, 8);
-        this.lineProgram = LineStripProgramCache.get(globe);
-        const g3D = globe3Dcoordinates(globe, 30);
-        const g2D = globe2Dcoordinates(globe);
-        this.bufferManagerMap.set("position3d", {
-            bufferManager: new BufferManager(gl, (CIRCLE_POINTS_COUNT + 1) * 3), // plus 1 is for butting linestrips
-            adaptor: (item) => {
-                const { longLatArr } = item;
-                const result = g3D(longLatArr, { paddingCount: 1, paddingValue: NaN });
-                return result;
-            }
-        });
-        this.bufferManagerMap.set("position2d", {
-            bufferManager: new BufferManager(gl, (CIRCLE_POINTS_COUNT + 1) * 2),
-            adaptor: (item) => {
-                const { longLatArr } = item;
-                const result = g2D(longLatArr, { paddingCount: 1, paddingValue: NaN });
-                return result;
-            }
-        });
-        this._vao = this.lineProgram.createVAO(createBufferAndReadInfo(this.bufferManagerMap.get("position3d")?.bufferManager.buffer), createBufferAndReadInfo(this.bufferManagerMap.get("position2d")?.bufferManager.buffer), null, null, null);
-        this._circleUBOHandler = this.lineProgram.createUBO();
-        this._cameraUniformBlock = CameraUniformBlockTotemCache.get(globe);
-    }
-    insertCircle(key, longitude, latitude, radius) {
-        const circle = {
-            center: [longitude, latitude],
-            radius: radius
-        };
-        const circleForAzimuthCalc = CircleMethods.createCircleClosestAzimuthAngleProperties(circle);
-        this.circleMap.set(key, [circle, circleForAzimuthCalc]);
-        // @ts-ignore
-        if (this._staticDynamicStrategy.getState() === StaticDynamicState.STATIC) {
-            this.__buildStaticCircles([key]);
-        }
-        this.globe?.DrawRender();
-    }
-    deleteCircle(keys) {
-        for (const key of keys) {
-            if (this.circleMap.has(key)) {
-                this.circleMap.delete(key);
-                this.globe?.DrawRender();
-            }
-        }
-        this._dobuild = true;
-        this.globe?.DrawRender();
-    }
+    // GLOBE API INTERFACE
     draw3D() {
         const { _isFree, globe, gl, lineProgram, bufferOrchestrator, bufferManagerMap, _vao, _circleUBOHandler } = this;
         if (_isFree || !globe || !gl || !lineProgram || !bufferOrchestrator ||