@pirireis/webglobeplugins 0.17.0 → 1.0.2

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

@@ -1,472 +1,616 @@
-// import { ArcOnTerrainPluginOptions } from "./type";
-import { LineStripProgramCache } from "../../programs/line-on-globe/linestrip/linestrip";
-import { createBufferAndReadInfo } from "../../util/gl-util/buffer/attribute-loader";
-import { BufferManager, BufferOrchestrator } from "../../util/account/single-attribute-buffer-management/index";
-import { globe3Dcoordinates, globe2Dcoordinates, RADIAN } 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 { FrameCounterTrigger } from "../../util/frame-counter-trigger";
-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
-function createArc(start, end) {
-    vec3.fromLongLatToUnitVector(_start, [start[0] * RADIAN, start[1] * RADIAN]);
-    vec3.fromLongLatToUnitVector(_end, [end[0] * RADIAN, end[1] * RADIAN]);
-    return arc.create(_start, _end);
-}
-export class ArcOnTerrainPlugin {
-    id;
-    program = null;
-    bufferManagersMap = 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;
-    _frameCounterTrigger = null;
-    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
-    bufferType = "STREAM_DRAW", isMSL = false } = {}) {
-        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 ? true : false,
-            bufferType: bufferType ? bufferType : "STREAM_DRAW",
-            isMSL: isMSL ? true : false
-        };
-    }
-    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(arcs) {
-        const keys = [];
-        let newItemCount = 0;
-        for (let arcInput of arcs) {
-            const { key, start, end } = arcInput;
-            if (this._arcMap.has(key)) {
-                this._arcMap.delete(key); // Remove old arc
-            }
-            else {
-                newItemCount++;
-            }
-            const _arc = createArc(start, end);
-            this._arcMap.set(key, [_arc, arcInput]); // Always set new color
-            keys.push(key);
-        }
-        this.bufferOrchestrator.ensureSpace(newItemCount, this.bufferManagersMap);
-        this._buildArcs(keys);
-        if (this._options.variativeColorsOn) {
-            this.__fillColors(keys);
-        }
-        this.globe.DrawRender();
-    }
-    updateCoordinates(items) {
-        if (this._freed) {
-            console.warn("Plugin is freed, cannot update coordinates");
-            return;
-        }
-        if (this.globe === null || this.gl === null) {
-            console.warn("Globe or WebGL context is not initialized, cannot update coordinates");
-            return;
-        }
-        const updateKeys = [];
-        for (const { key, start, end } of items) {
-            const arcInput = this._arcMap.get(key);
-            if (!arcInput) {
-                console.warn(`Arc with key ${key} not found in arcMap.`);
-                continue;
-            }
-            const _arc = createArc(start, end);
-            arc.copy(arcInput[0], _arc); // Update the arc in the map
-            // Update the arc in the buffer
-            updateKeys.push(key);
-        }
-        this._buildArcs(updateKeys);
-        this.globe.DrawRender();
-    }
-    deleteBulk(keys) {
-        if (!this.bufferOrchestrator || !this.bufferManagersMap || !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.bufferManagersMap);
-        this.globe.DrawRender();
-    }
-    updateColors(keyColorCouples, drawRender = true) {
-        if (this._freed) {
-            console.warn("Plugin is freed, cannot update color");
-            return;
-        }
-        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, bufferManagersMap } = this;
-        if (!bufferOrchestrator || !bufferManagersMap) {
-            console.warn("Buffer orchestrator or buffer manager map is not initialized.");
-            return;
-        }
-        for (const { key, color } of keyColorCouples) {
-            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 }], bufferManagersMap, ["color"]);
-        }
-        if (drawRender) {
-            this.globe.DrawRender();
-        }
-    }
-    setPluginOpacity(opacity, drawRender = false) {
-        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();
-        }
-    }
-    setDefaultColor(color, drawRender = false) {
-        if (!this.globe || !this.gl) {
-            console.warn("Globe or WebGL context is not initialized.");
-            return;
-        }
-        this._options.defaultColor = color;
-        this._arcUBOHandler?.updateSingle("u_color", new Float32Array(color));
-        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._buildArcs(); // can be async
-        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._frameCounterTrigger = new FrameCounterTrigger(globe, 15, 1000, (globeChanges) => {
-            if (this._freed)
-                return;
-            this.__buildDynamicArcs();
-        });
-        this.program = LineStripProgramCache.get(globe);
-        this._staticDynamicStrategy = new StaticDynamicStrategy(globe, DYNAMIC_STRATEGY_START_LOD, () => {
-            this.__buildStaticArcs();
-        }); // Initialize static-dynamic strategy with a transition level of 8
-        this._cameraUniformBlock = CameraUniformBlockTotemCache.get(globe);
-        this._fillbufferManagersMap();
-        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;
-        }
-        const globe = this.globe;
-        this._staticDynamicStrategy?.updateState();
-        // if (globe.api_IsScreenMoving()) {
-        // this._buildArcs(); // can be async
-        // }
-        this._frameCounterTrigger?.trigger();
-        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 currentGeometry = globe.api_GetCurrentGeometry();
-        if ((currentGeometry === 0 && !this._options.globeViewOn) || (currentGeometry === 1 && !this._options.flatViewOn))
-            return;
-        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(subSetIDs = null) {
-        const state = this._staticDynamicStrategy?.getState();
-        if (state === StaticDynamicState.DYNAMIC) {
-            this.__buildDynamicArcs(subSetIDs);
-        }
-        else if (subSetIDs || state === StaticDynamicState.TO_STATIC) {
-            this.__buildStaticArcs(subSetIDs);
-        }
-    }
-    __buildStaticArcs(subSetIDs = null) {
-        const { globe, _arcMap, _cameraUniformBlock, bufferManagersMap, bufferOrchestrator } = this;
-        if (!globe || !_cameraUniformBlock || !bufferManagersMap || !bufferOrchestrator) {
-            console.warn("Globe or camera uniform block is not initialized.");
-            return;
-        }
-        const bufferKey = [this.globe.api_GetCurrentGeometry() === 0 ? "position3d" : "position2d"];
-        if (!this.bufferManagersMap?.has(bufferKey[0]))
-            return;
-        const longLat = [0, 0];
-        const longLatArr = new Float32Array(2 * this._options.vertexCount);
-        const data = [{
-                key: "staticArcs",
-                longLatArr: longLatArr,
-                height: null,
-                color: this._options.defaultColor,
-                msl: null
-            }];
-        let keys;
-        if (subSetIDs === null) {
-            keys = _arcMap.keys();
-        }
-        else {
-            keys = subSetIDs;
-        }
-        for (const key of keys) {
-            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] / RADIAN, longLat[1] / RADIAN], i * 2);
-            }
-            data[0].key = key;
-            data[0].height = arcInput.height ?? this._options.defaultHeightFromGroundIn3D;
-            data[0].color = arcInput.color ?? this._options.defaultColor;
-            data[0].msl = arcInput.msl ?? null;
-            this.bufferOrchestrator.insertBulk(data, bufferManagersMap, bufferKey);
-        }
-    }
-    __buildDynamicArcs(subSetIDs = null) {
-        const { globe, _arcMap, _cameraUniformBlock, bufferManagersMap } = this;
-        if (!globe || !_cameraUniformBlock || !bufferManagersMap) {
-            console.warn("Globe or camera uniform block is not initialized.");
-            return;
-        }
-        const bufferKey = [
-            this.globe.api_GetCurrentGeometry() === 0 ? "position3d" : "position2d"
-        ];
-        if (!this.bufferManagersMap?.has(bufferKey[0]))
-            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];
-        let keys;
-        if (subSetIDs === null) {
-            keys = _arcMap.keys();
-        }
-        else {
-            keys = subSetIDs;
-        }
-        for (const key of keys) {
-            const [arcInstance, arcInput] = _arcMap.get(key);
-            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] / RADIAN, longLat[1] / RADIAN], i * 2);
-            }
-            result.push({
-                key: key,
-                longLatArr: longLatArr,
-                height: arcInput.height ?? this._options.defaultHeightFromGroundIn3D,
-                msl: arcInput.msl ?? null
-            });
-        }
-        // this.bufferOrchestrator.resetWithCapacity(bufferManagersMap, result.length);
-        this.bufferOrchestrator.insertBulk(result, bufferManagersMap, bufferKey);
-    }
-    _fillbufferManagersMap() {
-        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.bufferManagersMap = new Map();
-        if (globeViewOn) {
-            this.bufferManagersMap.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, msl = this._options.isMSL } = item;
-                    const result = globe3Dcoordinates(globe, longLatArr, height, msl, { paddingCount: 1 });
-                    return result;
-                }
-            });
-        }
-        if (flatViewOn) {
-            this.bufferManagersMap.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)); // TODO: this could cause data races or unexpected overwrites.
-            this.bufferManagersMap.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.bufferManagersMap.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
-        );
-    }
-    __fillColors(subSetIDs) {
-        if (this._options.variativeColorsOn === false)
-            return;
-        const data = [null];
-        for (const id of subSetIDs) {
-            data[0] = this._arcMap.get(id)[1];
-            this.bufferOrchestrator.insertBulk(data, this.bufferManagersMap, ["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.bufferManagersMap?.forEach((manager) => {
-            manager.bufferManager.free();
-        });
-        CameraUniformBlockTotemCache.release(this.globe);
-        LineStripProgramCache.release(this.globe);
-        this.gl = null;
-        this.globe = null;
-        this._arcMap.clear();
-        this._coordinaateBufferKeysForUpdate = [];
-    }
-}
+import { SemiPluginInterface, } from "../interface";
+import { Vec3, LongLat, Arc } from "../../Math/types";
+import { Globe, Meter, UBOHandler, PluginInterface, Color, Radian, BUFFER_TYPE, ElevationMode, GlobeChanges, UpdateColor } from "../../types";
+// import { ArcOnTerrainPluginOptions } from "./type";
+import { LineStripProgramCache, LineProgram } from "../../programs/line-on-globe/linestrip/linestrip";
+import { createBufferAndReadInfo } from "../../util/gl-util/buffer/attribute-loader";
+import { BufferManagersMap, BufferManager, BufferOrchestrator } from "../../util/account/single-attribute-buffer-management/index";
+import { globe3Dcoordinates, globe2Dcoordinates, RADIAN } 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 { FrameCounterTrigger } from "../../util/frame-counter-trigger";
+import * as vec3 from "../../Math/vec3";
+
+import * as arc from "../../Math/arc";
+
+import { CameraUniformBlockTotem, 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] as Vec3;
+const _start = [0, 0, 0] as Vec3;
+const _end = [0, 0, 0] as Vec3;
+const _0arc = arc.create([1, 0, 0] as Vec3, [0, 1, 0] as Vec3); // zero arc for intersection tests
+
+
+export type ArcOnTerrainPluginOptions = {
+    variativeColorsOn: boolean; // If true, arcs can have variative colors
+    defaultColor: Color; // Default color in RGBA format
+    defaultHeightFromGroundIn3D: Meter; // Default height from ground in 3D view
+    flatViewOn: boolean; // If true, arcs are drawn in 2D flat view
+    globeViewOn: boolean; // If true, arcs are drawn in 3D globe view
+    // variativeColorsOn: boolean; // If true, arcs can have variative colors
+    // defaultColor: [number, number, number, number]; // Default color in RGBA format
+    // defaultHeightFromGroundIn3D: number; // Default height from ground in 3D view
+    vertexCount: number; // Number of vertices per arc,
+    cameraAttractionIsOn: boolean; // If true, camera attraction is enabled else evenly distributed arc points are used
+    bufferType?: BUFFER_TYPE; // Buffer type for WebGL
+    isMSL: boolean; // If true, the arc is drawn in MSL (Mean Sea Level) mode
+};
+
+
+export type ArcInput = {
+    key: string,
+    start: LongLat,
+    end: LongLat,
+    color: Color, // 0-1
+    height?: Meter | null // height from ground in 3D view, null for default
+    msl?: boolean | null
+}
+
+
+function createArc(start: LongLat, end: LongLat): Arc {
+    vec3.fromLongLatToUnitVector(_start, [start[0] * RADIAN, start[1] * RADIAN]);
+    vec3.fromLongLatToUnitVector(_end, [end[0] * RADIAN, end[1] * RADIAN]);
+    return arc.create(_start, _end);
+}
+export class ArcOnTerrainPlugin implements PluginInterface, SemiPluginInterface, ElevationMode, UpdateColor {
+    public id: string;
+    private program: LineProgram | null = null;
+    private bufferManagersMap: BufferManagersMap | null = null;
+    private bufferOrchestrator: BufferOrchestrator = new BufferOrchestrator({ capacity: INITAL_CAPACITY });
+    private _opacity: number = 1;
+    private _arcUBOHandler: UBOHandler | null = null;
+    private _vao: WebGLVertexArrayObject | null = null;
+    globe: any | null = null;
+    private gl: WebGL2RenderingContext | null = null;
+    private _arcMap: Map<string, [Arc, ArcInput]>;
+    private _cameraUniformBlock: CameraUniformBlockTotem | null = null;
+    private _staticDynamicStrategy: StaticDynamicStrategy | null = null;
+    private _options: ArcOnTerrainPluginOptions;
+    private _coordinaateBufferKeysForUpdate: string[] = [];
+    private _freed: boolean = false;
+    private _frameCounterTrigger: FrameCounterTrigger | null = null;
+    constructor(id: string, {
+        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
+        bufferType = "STREAM_DRAW",
+        isMSL = false
+    }: Partial<ArcOnTerrainPluginOptions> = {}) {
+        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 ? true : false,
+            bufferType: bufferType ? bufferType : "STREAM_DRAW",
+            isMSL: isMSL ? true : false
+        };
+
+    }
+
+    increaseSpace(amount: number): void {
+        if (this._freed) {
+            console.warn("Plugin is freed, cannot increase space");
+            return;
+        }
+        if (this.globe === null) {
+            console.warn("Globe is not initialized.");
+            return;
+        }
+        if (typeof amount !== "number" || amount <= 0) {
+            console.warn("Invalid amount, must be a positive number");
+            return;
+        }
+        this.bufferOrchestrator.ensureSpace(amount, this.bufferManagersMap!);
+    }
+
+    insertBulk(arcs: ArcInput[]) {
+        const keys = [];
+        let newItemCount = 0;
+        for (let arcInput of arcs) {
+            const { key, start, end } = arcInput;
+            if (this._arcMap.has(key)) {
+                this._arcMap.delete(key); // Remove old arc
+            } else {
+                newItemCount++;
+            }
+            const _arc = createArc(start, end);
+            this._arcMap.set(key, [_arc, arcInput]); // Always set new color
+            keys.push(key);
+        }
+        this.bufferOrchestrator.ensureSpace(newItemCount, this.bufferManagersMap!);
+        this._buildArcs(keys);
+        if (this._options.variativeColorsOn) {
+            this.__fillColors(keys);
+        }
+        this.globe.DrawRender();
+    }
+
+
+    updateCoordinates(items: Pick<ArcInput, "key" | "start" | "end">[]): void {
+        if (this._freed) {
+            console.warn("Plugin is freed, cannot update coordinates");
+            return;
+        }
+        if (this.globe === null || this.gl === null) {
+            console.warn("Globe or WebGL context is not initialized, cannot update coordinates");
+            return;
+        }
+        const updateKeys = []
+        for (const { key, start, end } of items) {
+            const arcInput = this._arcMap.get(key);
+            if (!arcInput) {
+                console.warn(`Arc with key ${key} not found in arcMap.`);
+                continue;
+            }
+            const _arc = createArc(start, end);
+            arc.copy(arcInput[0], _arc); // Update the arc in the map
+            // Update the arc in the buffer
+            updateKeys.push(key);
+        }
+        this._buildArcs(updateKeys);
+
+        this.globe.DrawRender();
+    }
+
+
+    deleteBulk(keys: string[]) {
+        if (!this.bufferOrchestrator || !this.bufferManagersMap || !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.bufferManagersMap);
+        this.globe.DrawRender();
+    }
+
+
+    deleteAll() {
+        if (!this.bufferOrchestrator || !this.bufferManagersMap || !this.globe) {
+            console.warn("Buffer orchestrator or buffer manager map is not initialized.");
+            return;
+        }
+        this.bufferOrchestrator.resetWithCapacity(this.bufferManagersMap, this._arcMap.size);
+        this._arcMap.clear();
+        this.globe.DrawRender();
+    }
+
+
+
+    updateColors(keyColorCouples: { key: string, color: Color }[], drawRender: boolean = true) {
+        if (this._freed) {
+            console.warn("Plugin is freed, cannot update color");
+            return;
+        }
+        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, bufferManagersMap } = this;
+        if (!bufferOrchestrator || !bufferManagersMap) {
+            console.warn("Buffer orchestrator or buffer manager map is not initialized.");
+            return;
+        }
+
+        for (const { key, color } of keyColorCouples) {
+
+            const arcInput = this._arcMap.get(key)
+            if (!arcInput) {
+                console.warn(`Arc with key ${key} not found in arcMap.`);
+                return;
+            }
+
+            arcInput[1].color = color as Color; // Update the color in the arc map
+            bufferOrchestrator.updateBulk(
+                [{ key: key, color: color }],
+                bufferManagersMap, ["color"]
+            );
+        }
+        if (drawRender) {
+            this.globe.DrawRender();
+        }
+    }
+
+
+    setPluginOpacity(opacity: number, drawRender: boolean = false): void {
+        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();
+        }
+    }
+
+
+
+
+
+
+    setDefaultColor(color: Color, drawRender = false): void {
+        if (!this.globe || !this.gl) {
+            console.warn("Globe or WebGL context is not initialized.");
+            return;
+        }
+        this._options.defaultColor = color;
+        this._arcUBOHandler?.updateSingle("u_color", new Float32Array(color));
+
+        if (drawRender) {
+            this.globe.DrawRender();
+        }
+    }
+
+
+    setElevationMode(mode: "msl" | "agl"): void {
+        switch (mode) {
+            case "msl":
+                this._options.isMSL = true;
+                break;
+            case "agl":
+                this._options.isMSL = false;
+                break;
+            default:
+                throw new Error(`Unknown elevation mode: ${mode}`);
+        }
+        this._buildArcs(); // can be async
+        this.globe.DrawRender();
+    }
+
+
+    setCameraAttraction(isOn: boolean) {
+        if (!this.globe || !this.gl) {
+            console.warn("Globe or WebGL context is not initialized.");
+            return;
+        }
+        this._options.cameraAttractionIsOn = isOn;
+        this.globe.DrawRender();
+    }
+
+
+    init(globe: Globe, gl: WebGL2RenderingContext) {
+        this.globe = globe;
+        this.gl = gl;
+
+
+        this._frameCounterTrigger = new FrameCounterTrigger(globe, 15, 1000, (globeChanges: GlobeChanges) => {
+            if (this._freed) return;
+            this.__buildDynamicArcs();
+        });
+
+        this.program = LineStripProgramCache.get(globe) as LineProgram;
+
+        this._staticDynamicStrategy = new StaticDynamicStrategy(globe, DYNAMIC_STRATEGY_START_LOD, () => {
+            this.__buildStaticArcs();
+        }); // Initialize static-dynamic strategy with a transition level of 8
+
+        this._cameraUniformBlock = CameraUniformBlockTotemCache.get(globe);
+
+        this._fillbufferManagersMap();
+
+        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;
+        }
+        const globe = this.globe as Globe;
+        this._staticDynamicStrategy?.updateState();
+        // if (globe.api_IsScreenMoving()) {
+        // this._buildArcs(); // can be async
+        // }
+        this._frameCounterTrigger?.trigger();
+        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 currentGeometry = globe.api_GetCurrentGeometry();
+        if ((currentGeometry === 0 && !this._options.globeViewOn) || (currentGeometry === 1 && !this._options.flatViewOn)) return;
+
+        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(subSetIDs: string[] | null = null) {
+        const state = this._staticDynamicStrategy?.getState();
+        if (state === StaticDynamicState.DYNAMIC) {
+            this.__buildDynamicArcs(subSetIDs);
+        } else if (subSetIDs || state === StaticDynamicState.TO_STATIC) {
+            this.__buildStaticArcs(subSetIDs);
+        }
+    }
+
+
+
+    __buildStaticArcs(subSetIDs: string[] | null = null) {
+        const { globe, _arcMap, _cameraUniformBlock, bufferManagersMap, bufferOrchestrator } = this;
+        if (!globe || !_cameraUniformBlock || !bufferManagersMap || !bufferOrchestrator) {
+            console.warn("Globe or camera uniform block is not initialized.");
+            return;
+        }
+
+        const bufferKey = [this.globe!.api_GetCurrentGeometry() === 0 ? "position3d" : "position2d"]
+        if (!this.bufferManagersMap?.has(bufferKey[0])) return;
+
+        const longLat = [0, 0] as [number, number];
+        const longLatArr = new Float32Array(2 * this._options.vertexCount);
+
+        const data: [{
+            key: string,
+            longLatArr: Float32Array,
+            height: Meter | null
+            color?: Color
+            msl?: boolean | null
+        }] = [{
+            key: "staticArcs",
+            longLatArr: longLatArr,
+            height: null,
+            color: this._options.defaultColor,
+            msl: null
+        }];
+
+        let keys;
+        if (subSetIDs === null) {
+            keys = _arcMap.keys();
+        } else {
+            keys = subSetIDs;
+        }
+
+
+        for (const key of keys) {
+            const [arcInstance, arcInput] = _arcMap.get(key) as [Arc, ArcInput];
+            arc.copy(_0arc, arcInstance);
+            const generatedPoints = evenlySpacedArcPoints(_0arc.p0, _0arc.normal, _0arc.coverAngle as Radian, this._options.vertexCount);
+
+            for (let i = 0; i < generatedPoints.length; i++) {
+                const point = generatedPoints[i];
+                vec3.fromUnitVectorToLongLat(longLat, point);
+                longLatArr.set([longLat[0] / RADIAN, longLat[1] / RADIAN], i * 2);
+            }
+
+            data[0].key = key;
+            data[0].height = arcInput.height ?? this._options.defaultHeightFromGroundIn3D;
+            data[0].color = arcInput.color ?? this._options.defaultColor;
+            data[0].msl = arcInput.msl ?? null;
+
+            this.bufferOrchestrator.insertBulk(data, bufferManagersMap,
+                bufferKey
+            );
+        }
+    }
+
+
+    __buildDynamicArcs(subSetIDs: string[] | null = null) {
+
+        const { globe, _arcMap, _cameraUniformBlock, bufferManagersMap } = this;
+        if (!globe || !_cameraUniformBlock || !bufferManagersMap) {
+            console.warn("Globe or camera uniform block is not initialized.");
+            return;
+        }
+        const bufferKey = [
+            this.globe!.api_GetCurrentGeometry() === 0 ? "position3d" : "position2d"
+        ]
+        if (!this.bufferManagersMap?.has(bufferKey[0])) 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] as [number, number];
+
+        let keys;
+        if (subSetIDs === null) {
+            keys = _arcMap.keys();
+        } else {
+            keys = subSetIDs;
+        }
+
+        for (const key of keys) {
+            const [arcInstance, arcInput] = _arcMap.get(key) as [Arc, ArcInput];
+            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 as Radian, 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] / RADIAN, longLat[1] / RADIAN], i * 2);
+            }
+            result.push({
+                key: key,
+                longLatArr: longLatArr,
+                height: arcInput.height ?? this._options.defaultHeightFromGroundIn3D,
+                msl: arcInput.msl ?? null
+            })
+        }
+        // this.bufferOrchestrator.resetWithCapacity(bufferManagersMap, result.length);
+
+        this.bufferOrchestrator.insertBulk(result, bufferManagersMap, bufferKey);
+    }
+
+
+    _fillbufferManagersMap() {
+        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.bufferManagersMap = new Map();
+        if (globeViewOn) {
+            this.bufferManagersMap.set("position3d", {
+                bufferManager: new BufferManager(gl, 3 * (this._options.vertexCount + 1), { bufferType: "STREAM_DRAW", initialCapacity: INITAL_CAPACITY }),
+                adaptor: (item: any) => {
+                    const { longLatArr, height = this._options.defaultHeightFromGroundIn3D, msl = this._options.isMSL } = item;
+                    const result = globe3Dcoordinates(globe, longLatArr, height, msl, { paddingCount: 1 });
+                    return result;
+                }
+            });
+        }
+
+        if (flatViewOn) {
+            this.bufferManagersMap.set("position2d", {
+                bufferManager: new BufferManager(gl, 2 * (this._options.vertexCount + 1), { bufferType: "STREAM_DRAW", initialCapacity: INITAL_CAPACITY }),
+                adaptor: (item: any) => {
+                    const { longLatArr } = item;
+                    return g2D(longLatArr, { paddingCount: 1 });
+                }
+            });
+        }
+
+        if (this._options.variativeColorsOn) {
+            const _colorArray = new Float32Array(4 * (this._options.vertexCount + 1)); // TODO: this could cause data races or unexpected overwrites.
+            this.bufferManagersMap.set("color", {
+                bufferManager: new BufferManager(gl, 4 * (this._options.vertexCount + 1), { bufferType: "STREAM_DRAW", initialCapacity: INITAL_CAPACITY }),
+                adaptor: (item: any) => {
+                    // 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.bufferManagersMap.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
+        );
+    }
+
+
+    __fillColors(subSetIDs: string[]) {
+        if (this._options.variativeColorsOn === false) return;
+        const data: [ArcInput] = [null!];
+        for (const id of subSetIDs) {
+            data[0] = this._arcMap.get(id)![1];
+            this.bufferOrchestrator.insertBulk(
+                data,
+                this.bufferManagersMap!,
+                ["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.bufferManagersMap?.forEach((manager) => {
+            manager.bufferManager.free();
+        });
+        CameraUniformBlockTotemCache.release(this.globe as Globe);
+        LineStripProgramCache.release(this.globe as Globe);
+        this.gl = null;
+        this.globe = null;
+        this._arcMap.clear();
+        this._coordinaateBufferKeysForUpdate = [];
+    }
+}