@pirireis/webglobeplugins 0.15.16-alpha → 0.15.18-alpha

package/Math/methods.js

@@ -73,13 +73,13 @@ export const pixelXYLenghtToUnitVectorWithHeight = (pixelXYHeight) => {
     const radius = WORLD_RADIUS_3D + pixelXYHeight[2];
     return [...radianToCartesian3d([long, lat]), radius];
 };
-export const globe3Dcoordinates = (globe, height = 0) => (longlats, { paddingCount = 0, paddingValue = NaN }) => {
+export const globe3Dcoordinates = (globe, longlats, height = 0, msl = false, { paddingCount = 0, paddingValue = NaN }) => {
     const len = longlats.length / 2;
     const result = new Float32Array(len * 3 + paddingCount * 3).fill(paddingValue);
     for (let i = 0; i < len; i++) {
         const long = longlats[i * 2];
         const lat = longlats[i * 2 + 1];
-        const xyz = globe.api_GetCartesian3DPoint(long, lat, height, 0);
+        const xyz = globe.api_GetCartesian3DPoint(long, lat, height, msl);
         result.set(xyz, i * 3);
     }
     return result;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@pirireis/webglobeplugins",
-    "version": "0.15.16-alpha",
+    "version": "0.15.18-alpha",
     "main": "index.js",
     "author": "Toprak Nihat Deniz Ozturk",
     "license": "MIT",

package/point-tracks/plugin.js

@@ -167,8 +167,8 @@ class PointTracksPlugin {
      * @param {string} trackID
      */
     deleteTrack(trackID) {
-        const pointSet = this._tracksToPointsMap.get(trackID);
-        const points = Array.from(pointSet);
+        const pointList = this._tracksToPointsMap.get(trackID);
+        const points = Array.from(pointList);
         const { _bufferOrchestrator, _bufferManagersMap } = this;
         _bufferOrchestrator.deleteBulk(points.map((pointID) => keyMethod(trackID, pointID)), _bufferManagersMap);
         this._tracksToPointsMap.delete(trackID);
@@ -206,8 +206,8 @@ class PointTracksPlugin {
             console.warn(`Track with ID ${trackID} does not exist.`);
             return;
         }
-        const pointSet = this._tracksToPointsMap.get(trackID);
-        const points = Array.from(pointSet);
+        const pointList = this._tracksToPointsMap.get(trackID);
+        const points = Array.from(pointList);
         const { _bufferOrchestrator, _bufferManagersMap } = this;
         _bufferOrchestrator.updateBulk(points.map((pointID) => {
             return {
@@ -270,12 +270,13 @@ class PointTracksPlugin {
             const trackID = track.trackID;
             const points = track.points;
             if (!this._tracksToPointsMap.has(trackID)) {
-                this._tracksToPointsMap.set(trackID, new Set()); // TODO: alternative to Set?
+                this._tracksToPointsMap.set(trackID, []); // TODO: alternative to Set?
+                // this._tracksToPointsMap.set(trackID, new Set()); // TODO: alternative to Set?
             }
-            const pointSet = this._tracksToPointsMap.get(trackID);
+            const pointList = this._tracksToPointsMap.get(trackID);
             for (let p = 0; p < points.length; p++) {
                 const pointID = points[p].ID;
-                pointSet.add(pointID);
+                pointList.push(pointID);
             }
         }
     }
@@ -286,9 +287,14 @@ class PointTracksPlugin {
     }
     _deletePointsFromTracksMap(trackID, pointIDs) {
         const trackSet = this._tracksToPointsMap.get(trackID);
-        for (const pointID of pointIDs) {
-            trackSet.delete(pointID);
+        const pointList = new Set(pointIDs);
+        const newList = [];
+        for (const pointID of trackSet) {
+            if (!pointList.has(pointID)) {
+                newList.push(pointID);
+            }
         }
+        this._tracksToPointsMap.set(trackID, newList);
     }
     _selfSelect() {
         const { globe } = this;
@@ -311,12 +317,11 @@ class PointTracksPlugin {
         const indexes = [];
         const foundTracks = [];
         for (const trackID of trackIDs) {
-            const pointSet = this._tracksToPointsMap.get(trackID);
-            if (!pointSet)
+            const pointList = this._tracksToPointsMap.get(trackID);
+            if (!pointList)
                 continue;
             foundTracks.push(trackID);
-            const points = Array.from(pointSet);
-            for (const pointID of points) {
+            for (const pointID of pointList) {
                 const key = keyMethod(trackID, pointID);
                 const index = this._bufferOrchestrator.offsetMap.get(key);
                 indexes.push(index);

package/programs/line-on-globe/linestrip/linestrip.js

@@ -3,7 +3,6 @@ import { CameraUniformBlockString, CameraUniformBlockTotemCache } from "../../to
 import { cartesian3DToGLPosition, mercatorXYToGLPosition, } from "../../../util/shaderfunctions/geometrytransformations";
 import { noRegisterGlobeProgramCache } from "../../programcache";
 import { attributeLoader } from "../../../util/gl-util/buffer/attribute-loader";
-import "../../../util/gl-util/buffer/attribute-loader";
 import { UniformBlockManager } from "../../../util/gl-util/uniform-block/manager";
 import { drawArrays } from "../../../util/gl-util/draw-options/methods";
 const ESCAPE_VALUE = -1;

package/programs/totems/globe-changes.js

@@ -0,0 +1,52 @@
+export class GlobeChangeObserver {
+    globe;
+    lastLOD = -1;
+    lastGeometry;
+    lastWorldWH = { width: 0, height: 0 };
+    lastLook = {
+        CenterLong: 0,
+        CenterLat: 0,
+        Distance: 0,
+        Tilt: 0,
+        NorthAng: 0
+    };
+    lastElevationCoefficient = NaN;
+    changes = {
+        geometryChanged: false,
+        lookChanged: false,
+        lodChanged: false,
+        worldWHChanged: false,
+        elevationCoefficientChanged: false
+    };
+    constructor(globe) {
+        this.globe = globe;
+        this.lastGeometry = globe.api_GetCurrentGeometry();
+        this.lastLook = globe.api_GetCurrentLookInfo();
+        this.lastLOD = globe.api_GetCurrentLODWithDecimal();
+        this.lastWorldWH = globe.api_GetCurrentWorldWH();
+        this.lastElevationCoefficient = globe.api_GetZScale();
+    }
+    checkChanges() {
+        const currentGeometry = this.globe.api_GetCurrentGeometry();
+        const currentLook = this.globe.api_GetCurrentLookInfo();
+        const currentLOD = this.globe.api_GetCurrentLODWithDecimal();
+        const currentWorldWH = this.globe.api_GetCurrentWorldWH();
+        this.changes.geometryChanged = (this.lastGeometry !== currentGeometry);
+        this.changes.lookChanged = (this.lastLook.CenterLong !== currentLook.CenterLong ||
+            this.lastLook.CenterLat !== currentLook.CenterLat ||
+            this.lastLook.Distance !== currentLook.Distance ||
+            this.lastLook.Tilt !== currentLook.Tilt ||
+            this.lastLook.NorthAng !== currentLook.NorthAng);
+        this.changes.lodChanged = (this.lastLOD !== currentLOD);
+        this.changes.worldWHChanged = (this.lastWorldWH.width !== currentWorldWH.width ||
+            this.lastWorldWH.height !== currentWorldWH.height);
+        // Update last known states
+        this.lastGeometry = currentGeometry;
+        this.lastLook = currentLook;
+        this.lastLOD = currentLOD;
+        this.lastWorldWH = currentWorldWH;
+    }
+    getChanges() {
+        return this.changes;
+    }
+}

package/range-tools-on-terrain/bearing-line/adapters.js

@@ -18,7 +18,7 @@ export const flatLinesInputAdapter = (bearingLine) => {
     };
 };
 export const flatLinesBearingInputAdapter = (bearingLine) => {
-    const { long, lat, rgba, key, bearingLat = 0, bearingLong = 0 } = bearingLine;
+    const { long, lat, rgba, key, bearingLat = 0, bearingLong = 0, msl } = bearingLine;
     return {
         key: key,
         start: [long, lat],
@@ -27,7 +27,7 @@ export const flatLinesBearingInputAdapter = (bearingLine) => {
     };
 };
 export const bearingLineToCircleInputAdapter = (globe) => (bearingLine) => {
-    const { long, lat, endLong, endLat, rgba, altitude = 0 } = bearingLine;
+    const { long, lat, endLong, endLat, rgba, altitude = 0, msl = null } = bearingLine;
     if (bearingLine.radius === undefined || bearingLine.radius === null) {
         const radius = globe.Math.GetDist2D(long, lat, endLong, endLat);
         bearingLine.radius = radius;
@@ -38,20 +38,22 @@ export const bearingLineToCircleInputAdapter = (globe) => (bearingLine) => {
         radius: bearingLine.radius,
         height: altitude,
         color: rgba,
+        msl
     };
 };
 export const bearingLineToArcInputAdapter = (bearingLine) => {
-    const { long, lat, endLong, endLat, rgba, altitude = 0 } = bearingLine;
+    const { long, lat, endLong, endLat, rgba, altitude = 0, msl } = bearingLine;
     return {
         key: bearingLine.key,
         start: [long, lat],
         end: [endLong, endLat],
         height: altitude,
         color: rgba,
+        msl: msl
     };
 };
 export const bearingLineToBearingArcInputAdapter = (globe, bearingLine) => {
-    const { long, lat, bearingAngle, rgba, altitude = 0, key } = bearingLine;
+    const { long, lat, bearingAngle, rgba, altitude = 0, key, msl } = bearingLine;
     if (bearingLine.radius === undefined || bearingLine.radius === null) {
         throw new Error("Bearing line radius is not defined. Please calculate it before converting to ArcInput.");
     }
@@ -64,6 +66,7 @@ export const bearingLineToBearingArcInputAdapter = (globe, bearingLine) => {
         end: [endLong, endLat],
         height: altitude,
         color: rgba,
+        msl,
     };
 };
 export const bearingLineToPieceOfPieInputAdapter = (globe, item) => {
@@ -71,7 +74,7 @@ export const bearingLineToPieceOfPieInputAdapter = (globe, item) => {
     const long = radian(item.long);
     const endLat = radian(item.endLat);
     const endLong = radian(item.endLong);
-    const altitude = (item.altitude ?? 0) / 1000;
+    const altitude = (item.altitude ?? 0);
     const radius = item.radius ? item.radius * 0.2 : 10;
     // @ts-ignore 
     const { long: bearingLong, lat: bearingLat } = globe.Math.FindPointByPolar(item.long, item.lat, item.radius, item.bearingAngle);

package/range-tools-on-terrain/bearing-line/plugin.js

@@ -37,6 +37,7 @@ export class BearingLinePlugin {
             defaultColor: [1, 1, 1, 0.5],
             defaultHeightFromGroundIn3D: 30.0,
             variativeColorsOn: false,
+            isMSL: false
         },
         arcOnTerrainOptions: {
             defaultHeightFromGroundIn3D: 30.0,
@@ -44,6 +45,7 @@ export class BearingLinePlugin {
             defaultColor: [1, 1, 1, 0.5],
             globeViewOn: true,
             flatViewOn: false,
+            isMSL: false
         },
         lineOptions: {
             flatViewOn: true,
@@ -411,11 +413,11 @@ export class BearingLinePlugin {
             throw new Error("Circle and Arc plugins are not initialized.");
         }
         if (this.drawOptions.drawVRM) {
-            this.circlePlugin.setPluginOpacity(this._opacities.circle ?? this._opacities.general);
+            this.circlePlugin.setPluginOpacity(this._opacities.circle ?? this._opacities.general, false);
             this.circlePlugin.draw3D();
         }
         if (this.drawOptions.drawBearingLine) {
-            this.arcPluginBL.setPluginOpacity(this._opacities.arc ?? this._opacities.general);
+            this.arcPluginBL.setPluginOpacity(this._opacities.bearing ?? this._opacities.general, false);
             this.arcPluginBL.draw3D();
         }
         if (this.drawOptions.drawAngleRing) {
@@ -423,12 +425,12 @@ export class BearingLinePlugin {
             const tiltAngle = this.globe.api_GetCurrentLookInfo().Tilt;
             const opacity = pieceOfPieOpacityAdaptor(currentLOD, tiltAngle) * (this._opacities.general ?? 1);
             if (opacity > 0) {
-                this.pieceOfPiePlugin.setPluginOpacity(opacity);
+                this.pieceOfPiePlugin.setPluginOpacity(opacity, false);
                 this.pieceOfPiePlugin.draw3D();
             }
         }
         const currentGeometry = this.globe.api_GetCurrentGeometry();
-        this.arcPlugin.setPluginOpacity(this._opacities.arc ?? this._opacities.general);
+        this.arcPlugin.setPluginOpacity(this._opacities.arc ?? this._opacities.general, false);
         this.arcPlugin.draw3D();
         if (currentGeometry === 1) {
             this.linePlugin.draw3D();

package/range-tools-on-terrain/circle-line-chain/adapters.js

@@ -22,6 +22,7 @@ export const circleDataAdaptor = (globe, chain) => {
             radius,
             height: chainProperties.altitude ?? 0,
             color: color,
+            msl: chainProperties.msl ?? null
         });
     }
     return circleInputs;
@@ -45,6 +46,7 @@ export function arcDataAdaptor(chain) {
             end: [nextLong, nextLat],
             height: chainProperties.altitude ?? 0,
             color: color,
+            msl: chainProperties.msl ?? null
         });
     }
     return arcInputs;

package/range-tools-on-terrain/circle-line-chain/plugin.js

@@ -27,6 +27,7 @@ export class CircleLineChainPlugin {
             variativeColorsOn: false,
             defaultColor: [1, 1, 1, 1],
             defaultHeightFromGroundIn3D: 30,
+            isMSL: false
         },
         arcOnTerrainOptions: {
             flatViewOn: true,
@@ -35,7 +36,8 @@ export class CircleLineChainPlugin {
             defaultColor: [1, 1, 1, 1],
             defaultHeightFromGroundIn3D: 0,
             vertexCount: 32,
-            cameraAttractionIsOn: true // If true, camera attraction is enabled else evenly distributed arc points are used
+            cameraAttractionIsOn: true, // If true, camera attraction is enabled else evenly distributed arc points are used
+            isMSL: false, // If true, no elevation of terrain
         },
         lineOptions: {
             flatViewOn: true,
@@ -164,6 +166,15 @@ export class CircleLineChainPlugin {
         // set Opacities of plugins
         this.globe?.DrawRender();
     }
+    setElevationMode(mode) {
+        if (this._freed) {
+            console.warn("CircleLineChainPlugin is freed, cannot set elevation mode.");
+            return;
+        }
+        this.arcPlugin?.setElevationMode(mode);
+        this.circlePlugin?.setElevationMode(mode);
+        this.globe?.DrawRender();
+    }
     deleteChains(chainKeys) {
         if (this._freed) {
             console.warn("CircleLineChainPlugin is freed, cannot delete chains.");
@@ -287,6 +298,15 @@ export class CircleLineChainPlugin {
         this.globe?.DrawRender();
     }
     setDefaultSemiPluginColor(semiPluginName, color) {
+        if (semiPluginName === "ALL") {
+            this._semiPluginOptions.circleOnTerrainOptions.defaultColor = color;
+            this._semiPluginOptions.arcOnTerrainOptions.defaultColor = color;
+            this._semiPluginOptions.lineOptions.defaultColor = color;
+            this.circlePlugin?.setDefaultColor(color);
+            this.arcPlugin?.setDefaultColor(color);
+            this.linePlugin?.setDefaultColor(color);
+            return;
+        }
         switch (semiPluginName) {
             case "circleOnTerrain":
                 this._semiPluginOptions.circleOnTerrainOptions.defaultColor = color;
@@ -383,7 +403,7 @@ export class CircleLineChainPlugin {
         }
         const circleOpacity = getOpacity(this._opacities, "circle");
         if (this._drawCircleOn && circleOpacity !== 0) {
-            this.circlePlugin?.setPluginOpacity(circleOpacity);
+            this.circlePlugin?.setPluginOpacity(circleOpacity, false);
             this.circlePlugin?.draw3D();
         }
         const currentGeometry = globe.api_GetCurrentGeometry();
@@ -392,12 +412,12 @@ export class CircleLineChainPlugin {
                 // globe view
                 const lineOpacity = getOpacity(this._opacities, "globeArc");
                 if (lineOpacity !== 0) {
-                    this.linePlugin?.setPluginOpacity(lineOpacity);
+                    this.linePlugin?.setPluginOpacity(lineOpacity, false);
                     this.linePlugin?.draw3D();
                 }
                 const arcOpacity = getOpacity(this._opacities, "globeArcFitsTerrain");
                 if (arcOpacity !== 0) {
-                    this.arcPlugin?.setPluginOpacity(arcOpacity);
+                    this.arcPlugin?.setPluginOpacity(arcOpacity, false);
                     this.arcPlugin?.draw3D();
                 }
                 break;

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

@@ -7,19 +7,71 @@
 //         altitude: rangeRing.altitude,
 //     };
 // }
+const keyAdapter = (centerID, rangeID) => {
+    return `${centerID}-${rangeID}`;
+};
+export const allKeysAdapter = (rangeRing) => {
+    const result = new Array(rangeRing.rings.length);
+    for (let i = 0; i < rangeRing.rings.length; i++) {
+        result[i] = keyAdapter(rangeRing.centerID, rangeRing.rings[i].ringID);
+    }
+    return result;
+};
 export const rangeRingToCircleInputAdapter = (rangeRing) => {
+    const centerID = rangeRing.centerID;
     return rangeRing.rings.map(ring => ({
-        key: ring.rindID,
+        key: keyAdapter(centerID, ring.ringID),
         center: [rangeRing.long, rangeRing.lat],
         radius: ring.radius,
         color: rangeRing.rgba,
         altitude: rangeRing.altitude,
     }));
 };
-function rangeRingToPaddingsCoordinatesAdapter(globe, center, rangeRing, startAngle, stepAngle) {
-    return new Float32Array();
-}
-export const rangeRingToArcInputAdapter = (globe, rangeRing) => {
-    // TODO;
-    return [];
+export const allArcKeysAdapter = (rangeRing) => {
+    const arcEachRing = Math.ceil(360 / rangeRing.stepAngle);
+    const result = new Array(arcEachRing * rangeRing.rings.length);
+    for (let i = 0; i < rangeRing.rings.length; i++)
+        for (let j = 0; j < arcEachRing; j++)
+            result[i * arcEachRing + j] = keyAdapter(rangeRing.centerID, rangeRing.rings[i].ringID) + `-${j}`;
+    return result;
+};
+export const rangeRingToArcInputAdapter = (globe, rangeRingInput) => {
+    const { long, lat, stepAngle, altitude = 0, rgba, rings } = rangeRingInput;
+    const arcEachRing = Math.ceil(360 / stepAngle);
+    const result = new Array(rings.length * arcEachRing);
+    for (let i = 0; i < rings.length; i++) {
+        const ring = rings[i];
+        for (let j = 0; j < arcEachRing; j++) {
+            const angle = Math.min(stepAngle * j, 360);
+            const startLongLat = globe.Math.FindPointByPolar(long, lat, ring.radius, angle);
+            const endLongLat = globe.Math.FindPointByPolar(long, lat, ring.radius - ring.padding, angle);
+            result[i * arcEachRing + j] = {
+                key: keyAdapter(rangeRingInput.centerID, ring.ringID) + `-${j}`,
+                start: [startLongLat.long, startLongLat.lat],
+                end: [endLongLat.long, endLongLat.lat],
+                color: rgba,
+                height: altitude,
+            };
+        }
+    }
+    return result;
+};
+export const padding1DegreeInputAdapter = (bearingLine) => {
+    const { long, lat, rgba, altitude = 0, rings } = bearingLine;
+    const result = new Array(rings.length);
+    for (let i = 0; i < rings.length; i++) {
+        const ring = rings[i];
+        result[i] = {
+            key: keyAdapter(bearingLine.centerID, ring.ringID),
+            center: [long, lat],
+            outerRadius: ring.radius,
+            colorsRatios: [{
+                    color: rgba,
+                    ratio: 360,
+                }
+            ],
+            heightFromGroundIn3D: altitude,
+        };
+    }
+    return result;
 };

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

@@ -1,6 +1,5 @@
 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";
 // @ts-ignore
 export class RangeRingPlugin {
     id;
@@ -8,15 +7,36 @@ export class RangeRingPlugin {
     gl = null;
     circlePlugin;
     arcPlugin;
-    linePlugin;
+    paddingPlugin = null; // TODO: implement padding plugin
     _memory = 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) {
         this.id = id;
         this.circlePlugin = new CircleOnTerrainPlugin(this.id + "-circle");
         this.arcPlugin = new ArcOnTerrainPlugin(this.id + "-arc", {
             vertexCount: 5,
         });
-        this.linePlugin = new LinePlugin(this.id + "-line");
+        this.paddingPlugin = null; // TODO: initialize padding plugin if needed
     }
     insertBulk(items) {
     }

package/semiplugins/lightweight/line-plugin.js

@@ -66,10 +66,12 @@ export class LinePlugin {
         _bufferOrchestrator.deleteBulk(keys);
         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);
@@ -82,14 +84,16 @@ 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();
+        }
     }
     // GLOBE INTERACTION METHODS
     draw3D() {

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

@@ -41,10 +41,12 @@ export class PieceOfPiePlugin {
         this.bufferOrchestrator.deleteBulk(keys, this.bufferManagersMap);
         this.globe?.DrawRender();
     }
-    setPluginOpacity(opacity) {
+    setPluginOpacity(opacity, drawRender = true) {
         opacityCheck(opacity);
         this._uboHandler?.updateSingle("u_opacity", new Float32Array([opacity]));
-        this.globe?.DrawRender();
+        if (drawRender) {
+            this.globe?.DrawRender();
+        }
     }
     setDrawMode(drawMode) {
         if (drawMode !== "TRIANGLE_FAN" && drawMode !== "LINE_STRIP" && drawMode !== "BOTH") {

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

@@ -39,7 +39,7 @@ export class ArcOnTerrainPlugin {
     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" } = {}) {
+    bufferType = "STREAM_DRAW", isMSL = false } = {}) {
         this.id = id;
         this._arcMap = new Map();
         this._options = {
@@ -50,7 +50,8 @@ export class ArcOnTerrainPlugin {
             defaultHeightFromGroundIn3D: defaultHeightFromGroundIn3D ? defaultHeightFromGroundIn3D : 30.0,
             vertexCount: vertexCount ? vertexCount : 70,
             cameraAttractionIsOn: cameraAttractionIsOn ? true : false,
-            bufferType: bufferType ? bufferType : "STREAM_DRAW"
+            bufferType: bufferType ? bufferType : "STREAM_DRAW",
+            isMSL: isMSL ? true : false
         };
     }
     insertBulk(arcs) {
@@ -104,22 +105,40 @@ export class ArcOnTerrainPlugin {
         _bufferOrchestrator.updateBulk([{ key: key, color: color }], bufferManagerMap, ["color"]);
         this.globe.DrawRender();
     }
-    setPluginOpacity(opacity) {
+    setPluginOpacity(opacity, drawRender = false) {
         if (!this.globe || !this.gl) {
             console.warn("Globe or WebGL context is not initialized.");
             return;
         }
         opacityCheck(opacity);
         this._opacity = opacity;
-        this.globe.DrawRender();
+        if (drawRender) {
+            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._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) {
@@ -151,7 +170,9 @@ export class ArcOnTerrainPlugin {
         }
         const globe = this.globe;
         this._staticDynamicStrategy?.updateState();
-        this._buildArcs(); // can be async
+        if (globe.api_IsScreenMoving()) {
+            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.");
@@ -193,7 +214,8 @@ export class ArcOnTerrainPlugin {
                 key: "staticArcs",
                 longLatArr: longLatArr,
                 height: null,
-                color: this._options.defaultColor
+                color: this._options.defaultColor,
+                msl: null
             }];
         if (keys.length == 0) {
             for (const [key, [arcInstance, arcInput]] of _arcMap) {
@@ -207,6 +229,7 @@ export class ArcOnTerrainPlugin {
                 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;
                 if (calledFromInsert) {
                     this._bufferOrchestrator.insertBulk(data, bufferManagerMap);
                 }
@@ -232,6 +255,7 @@ export class ArcOnTerrainPlugin {
                 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;
                 if (calledFromInsert) {
                     this._bufferOrchestrator.insertBulk(data, bufferManagerMap);
                 }
@@ -288,7 +312,7 @@ export class ArcOnTerrainPlugin {
                 key: key,
                 longLatArr: longLatArr,
                 height: arcInput.height ?? this._options.defaultHeightFromGroundIn3D,
-                // color: arcInput.color // Use the color from the arc map
+                msl: arcInput.msl ?? null
             });
         }
         // this._bufferOrchestrator.resetWithCapacity(bufferManagerMap, result.length);
@@ -312,8 +336,8 @@ export class ArcOnTerrainPlugin {
             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 });
+                    const { longLatArr, height = this._options.defaultHeightFromGroundIn3D, msl = this._options.isMSL } = item;
+                    const result = globe3Dcoordinates(globe, longLatArr, height, msl, { paddingCount: 1 });
                     return result;
                 }
             });