@pirireis/webglobeplugins 0.0.9 → 0.1.0

package/package.json

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

package/partialrings/plugin.js

@@ -44,7 +44,6 @@ export default class {
         this.gl = gl;
         this.globe = globe;
         this.program = programCache.get(globe);
-        console.log(this.program);
         const { vao, buffer } = this.program.getVaoBuffer();
         this.vao = vao;
         this.buffer = buffer;
@@ -107,7 +106,6 @@ class BufferManager extends BufferOffsetManager {
 
 
         gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
-        console.log(bufferType, gl[bufferType], initialCapacity * ITEM_SIZE * 4);
         gl.bufferData(gl.ARRAY_BUFFER, initialCapacity * ITEM_SIZE * 4, gl[bufferType]);
         gl.bindBuffer(gl.ARRAY_BUFFER, null);
     }
@@ -130,7 +128,6 @@ class BufferManager extends BufferOffsetManager {
             }
             const block = new Float32Array([
                 ...center, startAngle, tailAngle, ...color, radius, colorMode]);
-            console.log(offset, block);
             gl.bufferSubData(gl.ARRAY_BUFFER, offset, block);
             // 2         1       1           1         4       1 = 10
         }
@@ -161,7 +158,7 @@ class BufferManager extends BufferOffsetManager {
 
     _autoExtendBuffer(payloadSize) {
         const { gl, buffer, bufferType, extendRatio } = this;
-        if (payloadSize <= this.spaceLeft()) return;
+        if (payloadSize <= this.spaceLeft) return;
         const newCapacity = Math.ceil((payloadSize + this.length) * extendRatio);
         this.extendBuffer(gl, buffer, bufferType, newCapacity);
     }

package/partialrings/program.js

@@ -72,7 +72,7 @@ void main() {
     float phase = ( vertexID / edge_count);
 
     if ( color_mode == 1.0 ) {
-        if ( tail_angle > 0.0 ) {
+        if ( tail_angle < 0.0 ) {
                 v_color = vec4( color.rgb , color.a * ( 1.0 - phase ) * alpha );
             } else {
                 v_color = vec4( color.rgb , color.a * (phase ) * alpha );
@@ -82,7 +82,7 @@ void main() {
     }
 
     float angle;
-    if ( tail_angle < 0.0 ) { 
+    if ( tail_angle > 0.0 ) { 
         angle =  tail_angle * (-phase + 1.0) + start_angle;
         } else {
         angle = tail_angle * phase + start_angle;
@@ -163,7 +163,6 @@ export class Logic {
 
 
     draw(bufferManager, vao, edgeCount, alphaMultiplier, drawMode) {
-        if (alphaMultiplier === 0) { console.log("no draw"); return };
         const { gl, program, cameraBlockTotem, cameraBlockBindingPoint } = this
 
         gl.disable(gl.DEPTH_TEST);

package/programs/rings/distancering/circlepaddingfreeangleprogram.js

@@ -14,6 +14,7 @@ const vertexShader = `#version 300 es ` +
     shaderfunctions.longLatRadToCartesian3D +
     shaderfunctions.circleLimpFromLongLatRadCenterCartesian3D +
     shaderfunctions.circleLimpFromLongLatRadCenterMercatorCompass +
+    shaderfunctions.circleLimpFromLongLatRadCenterMercatorRealDistancePadding +
     shaderfunctions.circleLimpFromLongLatRadCenterMercatorRealDistance + `
 
 in vec2 center;
@@ -32,6 +33,7 @@ out vec4 v_color;
 void main() {   
     if( flag == 1.0 || radius == 0.0 ) return; // 1.0 is hide 
     v_color = color;
+    if ( pad_angle == 0.0 ) v_color.rgb += 0.2;
     gl_PointSize = 2.0;
 
     float odd = mod(float(gl_VertexID), 2.0);
@@ -49,6 +51,7 @@ void main() {
     if ( compass == 1 ){
         limp = circleLimpFromLongLatRadCenterMercatorCompass(center , radius_, angle);
     } else {
+        // limp = circleLimpFromLongLatRadCenterMercatorRealDistancePadding(center, radius_, angle);
         limp = circleLimpFromLongLatRadCenterMercatorRealDistance(center, radius_, angle);
     }
     v_limp = limp;
@@ -267,7 +270,8 @@ export class BufferManager extends BufferOffsetManager {
     updateCentersHide(data) {
         const { gl, buffer } = this;
         const items = [];
-        for (const { centerID, hide } of data) {
+        for (const { centerID, hide = null } of data) {
+            if (hide === null) continue;
             const block = new Float32Array([hide]);
             const center = this._centerMaps.get(centerID);
             if (!center) continue;

package/programs/rings/distancering/circlepaddysharedbuffer.js

@@ -227,7 +227,8 @@ export default class {
     updateCentersHide(data) {
         const { gl, buffer } = this;
         gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
-        for (let { centerID, hide } of data) {
+        for (let { centerID, hide = null } of data) {
+            if (hide === null) continue;
             const rings = this._centerMap.get(centerID).get("rings");
             for (let i = 0; i < rings.length; i++) {
                 const offset = this._ringOffsets.get(rings[i]);

package/programs/rings/distancering/paddyflatprogram.js

@@ -12,6 +12,7 @@ const vertexShader = `#version 300 es ` +
     shaderfunctions.longLatRadToCartesian3D +
     shaderfunctions.circleLimpFromLongLatRadCenterCartesian3D +
     shaderfunctions.circleLimpFromLongLatRadCenterMercatorCompass +
+    shaderfunctions.circleLimpFromLongLatRadCenterMercatorRealDistancePadding +
     shaderfunctions.circleLimpFromLongLatRadCenterMercatorRealDistance + `
 
 in vec2 center;
@@ -50,6 +51,7 @@ void main() {
     if ( compass == 1 ){
         limp = circleLimpFromLongLatRadCenterMercatorCompass(center , radius_, angle);
     } else {
+        // limp = circleLimpFromLongLatRadCenterMercatorRealDistancePadding(center, radius_, angle);
         limp = circleLimpFromLongLatRadCenterMercatorRealDistance(center, radius_, angle);
     }
     v_limp = limp;

package/rangerings/enum.js

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

package/rangerings/index.js

@@ -1,3 +1,3 @@
-import RangeRings, { ENUM_HIDE } from './rangerings';
-
-export { RangeRings, ENUM_HIDE };
+import RangeRings from './rangerings';
+import { ENUM_HIDE, ENUM_TEXT_HIDE, COMPASS_MODES } from './enum';
+export { RangeRings, ENUM_HIDE, ENUM_TEXT_HIDE, COMPASS_MODES };

package/rangerings/rangeringangletext.js

@@ -0,0 +1,434 @@
+
+import {
+    CSGlobe,
+    CSObjectTypes,
+    CSIconTypes,
+    CSObjectArrayUpdateTypes,
+    GlobeManager
+} from "@pirireis/webglobe";
+import { ENUM_HIDE, ENUM_TEXT_HIDE, COMPASS_MODES } from "./enum";
+
+
+const Degree = 180 / Math.PI;
+
+
+
+const fidKey = "__fid__";
+
+
+const object = {
+    "displayName": "CompassRose",
+    "layerType": 3,
+
+    "wkbGeom": null,
+    "wfsLayerName": null,
+    "objectType": "point",
+    "bbox": null,
+    "startLod": 2,
+    "endLod": 30,
+    "continuousLOD": true,
+    "MVTXYZName": "hd_seyp",
+    "rasterize": false,
+}
+
+
+export default class RangeRingAngleText {
+    constructor(globe, { style = null, flatCompassMode = COMPASS_MODES.REAL } = {}) {
+        this.globe = globe;
+        this.ObjectArray = globe.ObjectArray;
+
+        this._flatCompassMode = flatCompassMode;
+        this._lastImplicitCompassMode = this.__implicitCompassMode();
+        if (style) {
+            this.style = style;
+        } else {
+            this.style = this.ObjectArray.GetDefaultStyle();
+            const { labels } = this.style;
+            const label = labels[0];
+            label.offset = { x: 0, y: 0 };
+            label.fontFamily.hollowWidth = 1;
+            label.vAlignment = 2;
+            label.hAlignment = 2;
+            label.size = 17;
+            // this.style.filter = [
+            //     {
+            //         rule: ["any", ["<", "startLod", "LOD"]],
+            //         name: "startLODRule",
+            //         style: {
+            //             opacity: 0
+            //         }
+
+            //     }
+            // ];
+        }
+
+        this.style.labels[0].text = "`${aci}`"
+        this.style.fidKey = fidKey;
+        this.object = Object.assign({}, object, { style: this.style });
+
+        this._centerCollection = new Map();
+        // new inner MAP params
+        // hide
+        // textHide
+
+        this.ObjectArray.Add(this.object);
+
+    }
+
+
+    setCompass(mode) {
+        if (mode === this._flatCompassMode) return;
+        this._flatCompassMode = mode;
+        this.__onCompassChange();
+    }
+
+
+    free() {
+        this.flush();
+        this.ObjectArray.RemoveObject(this.object);
+    }
+
+
+
+    /**
+     * @param {Array<{centerID,stepAngle, x, y, rings>} ringDatas
+     * centerID: string | ObjectArray fidKey de kullanilir
+     * stepAngle: number | 0-360 arasinda
+     * x, y: number | merkez koordinatlari lat long radian. Globe icin dereceye iceride cevrilir
+     * rings: Array<{radius: number}> | En buyuk halkaya centik acilari yazilir, Sonraki adim yaricaplarin uzunlugunu yazdirmak
+     * 
+     * eger bir centerID zaten var ise: Onceki noktalar dusurulur ve yeniden eklenir
+     * 
+     * */
+    insertBulk(ringDatas) {
+
+        const addBucket = {
+            coords: [],
+            coordsZ: [],
+            attribs: []
+        }
+
+        const deleteBucket = {
+            coords: [],
+            coordsZ: [],
+            attribs: []
+        }
+
+        for (const { centerID, x, y, rings, stepAngle, hide = ENUM_HIDE.SHOW, textHide = ENUM_TEXT_HIDE.SHOW } of ringDatas) {
+            if (this._centerCollection.has(centerID)) {
+                const stepAngle = this._centerCollection.get(centerID).get("stepAngle");
+                this._fillDeleteBucket(centerID, stepAngle, deleteBucket);
+            }
+            const maxRadius = rings.reduce((acc, { radius }) => Math.max(acc, radius), 0);
+            this._appendCircle(x, y, maxRadius, stepAngle, centerID, addBucket);
+            this._centerCollection.set(centerID,
+                new Map([
+                    ["stepAngle", stepAngle],
+                    ["maxRadius", maxRadius],
+                    ["x", x],
+                    ["y", y],
+                    ["hide", hide],
+                    ["textHide", textHide]
+                ]));
+        }
+
+        if (deleteBucket.coords.length > 0) this._updateData(deleteBucket, CSObjectArrayUpdateTypes.DELETE);
+        if (addBucket.coords.length > 0) this._updateData(addBucket, CSObjectArrayUpdateTypes.ADD);
+
+    }
+
+    /**
+     * @param {Array<{centerID, x,y}>} centerDatas
+     * aci ve radiuslarin tutulmasi gereklidir. 
+     * */
+    updateCentersXY(centerDatas) {
+        const updateBucket = {
+            coords: [],
+            coordsZ: [],
+            attribs: []
+        }
+        for (const { centerID, x, y } of centerDatas) {
+            if (this._centerCollection.has(centerID)) {
+                const centerMap = this._centerCollection.get(centerID);
+                const maxRadius = centerMap.get("maxRadius");
+                const stepAngle = centerMap.get("stepAngle");
+                // long, lat, radius, step, centerID, outBucket
+                this._appendCircle(x, y, maxRadius, stepAngle, centerID, updateBucket);
+                centerMap.set("x", x);
+                centerMap.set("y", y);
+
+            }
+        }
+        for (const attribs of updateBucket.attribs) {
+            delete attribs["aci"];
+        }
+        if (updateBucket.coords.length > 0) {
+            this._updateData(updateBucket, CSObjectArrayUpdateTypes.UPDATE);
+        }
+    }
+
+
+
+    /**
+     * 
+     * @param {Array<{centerID:string, hide: bool}} centerHides 
+     */
+    updateCentersHide(centerHides) {
+        const addBucket = {
+            coords: [],
+            coordsZ: [],
+            attribs: []
+        };
+        const deleteBucket = {
+            coords: [],
+            coordsZ: [],
+            attribs: []
+        };
+        for (const { centerID, textHide = null, hide = null } of centerHides) {
+            if (!this._centerCollection.has(centerID)) continue;
+            const centerMap = this._centerCollection.get(centerID);
+
+            const isHidden = centerMap.get("hide") === ENUM_HIDE.HIDE || centerMap.get("textHide") === ENUM_TEXT_HIDE.HIDE;
+
+            const _hide = hide !== null ? hide : centerMap.get("hide");
+            const _textHide = textHide !== null ? textHide : centerMap.get("textHide");
+
+            const show = _hide !== ENUM_HIDE.HIDE && _textHide === ENUM_TEXT_HIDE.SHOW;
+            if (!isHidden && !show) {
+                this._fillDeleteBucket(centerID, deleteBucket);
+            } else if (isHidden && show) {
+                this._appendCircle(centerMap.get("x"), centerMap.get("y"), centerMap.get("maxRadius"), centerMap.get("stepAngle"), centerID, addBucket);
+            }
+            if (hide !== null) centerMap.set("hide", hide);
+            if (textHide !== null) centerMap.set("textHide", textHide);
+        }
+        if (deleteBucket.coords.length > 0) this._updateData(deleteBucket, CSObjectArrayUpdateTypes.DELETE);
+        if (addBucket.coords.length > 0) this._updateData(addBucket, CSObjectArrayUpdateTypes.ADD);
+    }
+
+
+    // TODO : Implement this
+    deleteCenters(centerIDs) {
+        const deleteBucket = {
+            coords: [],
+            coordsZ: [],
+            attribs: []
+        }
+        for (const centerID of centerIDs) {
+            if (this._centerCollection.has(centerID)) {
+                this._fillDeleteBucket(centerID, deleteBucket);
+                this._centerCollection.delete(centerID);
+            }
+        }
+        this._updateData(deleteBucket, CSObjectArrayUpdateTypes.DELETE);
+    }
+
+
+
+
+
+    flush() {
+        const data = {
+            coords: [],
+            coordsZ: [],
+            attribs: []
+        };
+        this._idCollector = new Set();
+        this.ObjectArray.SetData(this.object, data);
+    }
+
+    //------------------GLOBE EVENTS------------------//
+
+    setGeometry() {
+        this.__onCompassChange();
+    }
+
+
+    //------------------PRIVATE METHODS------------------//
+
+    __implicitCompassMode() {
+        const is3D = this.globe.api_GetCurrentGeometry() === 0;
+        if (is3D) {
+            return COMPASS_MODES.REAL;
+        } else {
+            return this._flatCompassMode;
+        }
+    }
+
+
+    __onCompassChange() {
+        if (this._lastImplicitCompassMode === this.__implicitCompassMode()) return;
+        this._lastImplicitCompassMode = this.__implicitCompassMode();
+        this._updateAll();
+    }
+
+
+
+    // TODO: compass ve gercek mesafeye gore farkli hesaplamalar yapilacak __implicitCompassMode
+    _appendCircle(long, lat, radius, step, centerID, outBucket) {
+        const currentCompassMode = this.__implicitCompassMode();
+        if (currentCompassMode == COMPASS_MODES.REAL) {
+            this.__realCoords(long, lat, radius, step, centerID, outBucket);
+        } else if (currentCompassMode == COMPASS_MODES.COMPASS) {
+            // throw new Error("Not implemented yet");
+            this.__compassCoords(long, lat, radius, step, centerID, outBucket);
+        }
+
+    }
+
+    __realCoords(long, lat, radius, stepAngle, centerID, outBucket) {
+        const { coords, coordsZ, attribs } = outBucket;
+
+        const coords_ = realCircle(long, lat, radius, stepAngle / Degree);
+        {   // add 0
+            const { long, lat } = coords_[0];
+            coords.push(long, lat);
+            coordsZ.push(0);
+            const key = this._key(centerID, 0);
+            // fidkey is the key
+            attribs.push({
+                "__fid__": key,
+                "aci": "K"
+            });
+        }
+        let aci = stepAngle;
+        const cutAway = 0 == (360 % stepAngle) ? 1 : 0;
+        for (let i = 1; i < coords_.length - cutAway; i++) {
+            const { long, lat } = coords_[i];
+            coords.push(long, lat);
+            coordsZ.push(0);
+            const key = this._key(centerID, i);
+            // fidkey is the key
+            attribs.push({
+                "__fid__": key,
+                "aci": aci.toString()
+            })
+            aci += stepAngle;
+        }
+    }
+
+
+    __compassCoords(long, lat, radius, stepAngle, centerID, outBucket) {
+
+        const Dlong = Degree * long;
+        const Dlat = Degree * lat;
+
+        const R = 6371.0 * 1000;
+        const { coords, coordsZ, attribs } = outBucket;
+        const { globe } = this;
+        const radianRadius = radius / R;
+        const scale = Math.cos(lat);
+        {   // add 0
+            const x = Dlong + Degree * (radianRadius * Math.cos(Math.PI / 2));
+            const y = Dlat + Degree * (radianRadius * Math.sin(Math.PI / 2) * scale);
+            coords.push(x, y);
+            coordsZ.push(0);
+            const key = this._key(centerID, 0);
+            attribs.push({
+                "__fid__": key,
+                "aci": "K"
+            })
+        }
+        let aci = stepAngle;
+        let i = 1;
+        const RStep = stepAngle / Degree;
+        for (let cstep = Math.PI / 2 - RStep; cstep > -Math.PI * 1.5; cstep -= RStep) {
+            if (aci >= 360) break;
+            const x = Dlong + Degree * (radianRadius * Math.cos(cstep));
+            const y = Dlat + Degree * (radianRadius * Math.sin(cstep) * scale);
+            coords.push(x, y);
+            coordsZ.push(0);
+            const key = this._key(centerID, i++);
+            attribs.push({
+                "__fid__": key,
+                "aci": Math.floor(aci).toString()
+            })
+            aci += stepAngle;
+        }
+    }
+
+
+    _updateData(bucket, mode) {
+        this.ObjectArray.UpdateData(this.object, mode, [bucket], { attribs: false, icon: false, text: false });
+    }
+
+
+    _key(centerRingKey, limpIndex) {
+        return `${centerRingKey}_${limpIndex}`;
+    }
+
+    _fillDeleteBucket(centerID, outDeleteBucket) {
+
+        const centerMap = this._centerCollection.get(centerID);
+        const stepAngle = centerMap.get("stepAngle");
+        const { coords, coordsZ, attribs } = outDeleteBucket;
+        let i = 0;
+        for (let aci = 0; aci < 360; aci += stepAngle) {
+            const key = this._key(centerID, i++);
+            coords.push(0, 0);
+            coordsZ.push(0);
+            attribs.push({
+                "__fid__": key,
+            });
+        }
+    }
+
+    _updateAll() {
+        const updateBucket = {
+            coords: [],
+            coordsZ: [],
+            attribs: []
+        }
+        for (const [centerID, centerMap] of this._centerCollection) {
+            const isHidden = centerMap.get("hide") === ENUM_HIDE.HIDE || centerMap.get("textHide") === ENUM_TEXT_HIDE.HIDE;
+            if (isHidden) continue;
+            const x = centerMap.get("x");
+            const y = centerMap.get("y");
+            const maxRadius = centerMap.get("maxRadius");
+            const stepAngle = centerMap.get("stepAngle");
+            this._appendCircle(x, y, maxRadius, stepAngle, centerID, updateBucket);
+        }
+        this._updateData(updateBucket, CSObjectArrayUpdateTypes.UPDATE);
+    }
+
+}
+
+
+const readCoords = (long, lat, radius, stepAngle) => {
+
+    const result = []
+    const degree = radius / R;
+
+    return result;
+}
+
+
+
+
+const R = 6371.0;
+
+const flatCircle = (longitude, latitude, radius, paddingAngles) => {
+    const degree = radius / R;
+    const points = [];
+
+    for (const angle of paddingAngles) {
+        const x = longitude + degree * Math.cos(angle);
+        const y = latitude + degree * Math.sin(angle);
+        points.push({ long: x, lat: y });
+    }
+    return points;
+}
+
+const realCircle = (longitude, latitude, radius, stepAngle) => {
+    const R = 6371000;
+
+    const degree = radius / R;
+    const points = [];
+    for (let step = Math.PI / 2.0; step > -Math.PI * 1.5; step -= stepAngle) {
+        const y = latitude + degree * Math.sin(step);
+        const x = longitude + degree * Math.cos(step) / Math.cos(y);
+
+        points.push({ long: Degree * x, lat: Degree * y });
+    }
+    return points;
+}

package/rangerings/rangerings.js

@@ -1,8 +1,9 @@
 import { rings } from "../programs";
-
+import { COMPASS_MODES } from "./enum";
 import { PaddingFreeAngleCache } from "../programs/rings/distancering";
-const { CircleFlatProgram, PaddyFlatProgram, CirclePaddySharedBuffer } = rings;
 
+import RangeRingAngleText from "./rangeringangletext";
+const { CircleFlatProgram, PaddyFlatProgram, CirclePaddySharedBuffer } = rings;
 
 /**
  * @typedef RangeRingData
@@ -18,14 +19,13 @@ const { CircleFlatProgram, PaddyFlatProgram, CirclePaddySharedBuffer } = rings;
  */
 
 
-export const ENUM_HIDE = Object.freeze({ SHOW: 0, HIDE: 1, HIDE_1_DEGREE_PADDINGS: 2 });
-
 
 export default class {
 
-    constructor(id, oneDegreePadding = true, compass = 1, circleEdgeCount = 360) {
+    constructor(id, { oneDegreePadding = true, compass = COMPASS_MODES.COMPASS, circleEdgeCount = 360, showNumbers = true } = {}) {
         this.id = id;
         this.compass = compass;
+        this._showNumbers = showNumbers;
         this.circleEdgeCount = circleEdgeCount;
         this._onedegreepaddingOn = oneDegreePadding;
         this.bufferManager = null;
@@ -40,10 +40,13 @@ export default class {
         this.globe = globe;
         this.circleFlatProgram = new CircleFlatProgram(globe, gl);
         this.paddyFlatProgram = new PaddyFlatProgram(globe, gl);
-
         this.paddingFreeAngleProgram = PaddingFreeAngleCache.getProgram(globe);
+        if (this._showNumbers) {
+            this._textPlugin = new RangeRingAngleText(globe, { flatCompassMode: this.compass });
+        }
     }
 
+    // TODO: Add text free
     free() {
         this.circleFlatProgram.free();
         this.paddyFlatProgram.free();
@@ -53,8 +56,25 @@ export default class {
     }
 
 
+
+    // // TODO: Client should reinsert all data to be able to see numbers. Think Better Solution.
+    // setShowNumbers(showNumbers) {
+    //     this._showNumbers = showNumbers;
+    //     if (this._showNumbers) {
+    //         this._textPlugin = new RangeRingAngleText(this.globe);
+    //     } else {
+    //         this._textPlugin?.free();
+    //         this._textPlugin = null;
+    //     }
+    // }
+
+    setGeometry() {
+        this._textPlugin?.setGeometry();
+    }
+
+
     draw3D() {
-        const { circleFlatProgram, paddyFlatProgram, padCount, paddingFreeAngleProgram, bufferManager, compass, gl, circleEdgeCount, paddingBufferManager } = this;
+        const { circleFlatProgram, paddyFlatProgram, paddingFreeAngleProgram, bufferManager, compass, gl, circleEdgeCount, paddingBufferManager } = this;
         // if (globe.api_GetCurrentGeometry() === 0) return; // do not draw in 3D mode
         if (this.bufferManager !== null && bufferManager.length > 0) {
             gl.disable(gl.DEPTH_TEST);
@@ -68,9 +88,7 @@ export default class {
         }
     }
 
-    setPadCount(padCount) {
-        this.padCount = padCount;
-    }
+
 
     /**
      * @param {RangeRingData} rangeRingData
@@ -79,6 +97,7 @@ export default class {
      */
     setCampass(compass) {
         this.compass = compass;
+        this._textPlugin?.setCompass(compass);
     }
 
     initilizeBufferManager(initialRingCapacity, bufferDrawType) {
@@ -88,11 +107,6 @@ export default class {
         this.paddingBufferManager = this.paddingFreeAngleProgram.initilizeBufferManager({ bufferType: bufferDrawType, initialRingCapacity });
     }
 
-    // getBufferManager() {
-    //     return this.bufferManager;
-    // }
-
-
 
     /**
      * @typedef {Array<{ringID, radius, paddingRange}>} rings
@@ -103,6 +117,7 @@ export default class {
 
         this.bufferManager.insertBulk(insertData);
         this.paddingBufferManager.insertBulk(items);
+        this._textPlugin?.insertBulk(items);
         this.globe.DrawRender();
     }
 
@@ -110,6 +125,7 @@ export default class {
     updateCentersXY(items) {
         this.bufferManager.updateCentersXY(items);
         this.paddingBufferManager.updateCentersXY(items);
+        this._textPlugin?.updateCentersXY(items);
         this.globe.DrawRender();
     }
 
@@ -126,6 +142,7 @@ export default class {
 
         this.bufferManager.removeCenters(centerIds);
         this.paddingBufferManager.removeCenters(centerIds);
+        this._textPlugin?.removeCenters(centerIds);
         // this.bufferManager.defrag();
         // this.paddingBufferManager.defrag();
         this.globe.DrawRender();
@@ -136,6 +153,7 @@ export default class {
     updateCentersHide(centerHides) {
         this.bufferManager.updateCentersHide(centerHides);
         this.paddingBufferManager.updateCentersHide(centerHides);
+        this._textPlugin?.updateCentersHide(centerHides);
         this.globe.DrawRender();
     }
 }
@@ -150,7 +168,7 @@ const ringItemsToCircleBufferInsertDataAdaptor = (ringItems) => {
             resultRings.push({
                 ringID,
                 radius,
-                padding: padding / 7,
+                padding: padding / 5,
                 rgba,
             });
         }

package/util/shaderfunctions/geometrytransformations.js

@@ -73,8 +73,6 @@ vec4 cartesian3DToGLPosition( vec3 position) {
 
 // pi / pole = 2 / R
 
-
-
 export const longLatRadToMercator = R + PI + `
 vec2 longLatRadToMercator( vec2 longLatRad) {
     float x = R * longLatRad.x;
@@ -94,7 +92,7 @@ vec3 longLatRadToCartesian3D( vec2 longLat) {
 `;
 
 
-
+// TODO: Make it precise. It doesnt use haversine formula. If this changes, change the formmula which calculates text position. 
 export const circleLimpFromLongLatRadCenterCartesian3D = R + `
 vec3 circleLimpFromLongLatRadCenterCartesian3D( vec2 center, float radius, float angle) {
     vec3 geoW = longLatRadToCartesian3D(center);
@@ -108,13 +106,11 @@ vec3 circleLimpFromLongLatRadCenterCartesian3D( vec2 center, float radius, float
     }
 `;
 
-// TODO: Make it precise
+// TODO: Make it precise. Y axis is not correct.
 export const circleLimpFromLongLatRadCenterMercatorRealDistance = `
 vec2 circleLimpFromLongLatRadCenterMercatorRealDistance(vec2 center, float radius, float angle){
-    
     float radius_radian =  radius / R;
     float lat = center.y - radius_radian * sin(angle);
-
     float scale = 1.0/abs( cos( lat ) );
     vec2 center_ = longLatRadToMercator(center);
     float x = center_.x + scale * radius * cos(angle);
@@ -123,6 +119,34 @@ vec2 circleLimpFromLongLatRadCenterMercatorRealDistance(vec2 center, float radiu
 }
 `;
 
+// TODO: reconstruct this function
+export const circleLimpFromLongLatRadCenterMercatorRealDistancePadding = `
+vec2 circleLimpFromLongLatRadCenterMercatorRealDistancePadding(vec2 center, float radius, float angle){
+    float radius_radian =  radius / R;
+    float new_angle;
+    if ( angle !=  - 1.5707963267948966192313216916398){
+        float section = floor(angle / ( PI / 2.0)) + 1.0;
+        float lat = center.y - radius_radian * sin(angle);
+        float scale = 1.0/abs( cos( lat ) );
+        new_angle = atan( tan(angle) * scale );
+        if ( section == 2.0 ){
+            new_angle = mod( new_angle, PI );   
+        } else if ( section == 3.0 ){
+            new_angle = new_angle + PI;   
+        }
+    } else {
+        new_angle = angle;  
+    }
+    float new_lat = center.y - radius_radian * sin(new_angle);
+    float new_scale = 1.0/abs( cos( new_lat ) );
+
+    vec2 center_ = longLatRadToMercator(center);
+    float x = center_.x + new_scale * radius * cos(new_angle);
+    float y = center_.y - new_scale * radius * sin(new_angle);
+    return vec2(x, y);
+}
+`
+
 
 export const circleLimpFromLongLatRadCenterMercatorCompass = `
 vec2 circleLimpFromLongLatRadCenterMercatorCompass(vec2 center, float radius, float angle){