@pirireis/webglobeplugins 0.6.22 → 0.6.23-a

package/bearing-line/plugin.js

@@ -66,7 +66,7 @@ export default class Plugin {
 
         this.drawText = drawText;
 
-        this.circleFlatEdgeCount = circleFlatEdgeCount + 2;//circleFlatEdgeCount;
+        this.circleFlatEdgeCount = circleFlatEdgeCount + 2; //circleFlatEdgeCount;
     }
 
     setDoDrawVRM(bool) {
@@ -230,8 +230,8 @@ export default class Plugin {
 
                     // normal circle
                     ["circleDashAngle", {
-                        'bufferManager': new BufferManager(gl, circleFlatEdgeCount, { bufferType, initialCapacity }),
-                        'adaptor': (item) => new Float32Array(item.rgba),
+                        'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
+                        'adaptor': (item) => new Float32Array([item.circleDashAngle / 360]),
                     }],
                     // CIRCLE Mercator
                     ["rgbaMercator", {
@@ -476,9 +476,7 @@ export default class Plugin {
         const result = []
         for (const item of propertyIDs) {
             result.push(item);
-            console.log(item + " is processing")
             if (s.has(item)) {
-                console.log(item + "Mercator is added")
                 result.push(item + "Mercator");
             }
         }

package/package.json

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

package/programs/line-on-globe/circle-accurate-3d.js

@@ -45,14 +45,12 @@ out float interpolation;
 out vec4 v_color;
 out float v_dash_ratio;
 out float v_dash_opacity;
-out vec2 v_limp;
 void main() {
     interpolation = float( gl_VertexID ) / ${EDGE_COUNT_ON_SPHERE}.0;
     if ( is3D ) {
         float angle = PI * 2.0 * interpolation;
         vec3 position = circleLimpFromLongLatRadCenterCartesian3D_accurate(center_position3d, radius, angle);
         gl_Position = cartesian3DToGLPosition(position);
-        v_limp = vec2(0.0, 0.0);
     } else {
         return;
     }
@@ -73,7 +71,6 @@ in float interpolation;
 in vec2 v_limp;
 out vec4 color;
 void main() {
-    if ( v_limp.x < -POLE || v_limp.x > POLE || v_limp.y < -POLE || v_limp.y > POLE ){ color = vec4(0.0,0.0,0.0,0.0); return; }
     color = v_color;
     color.a *= opacity;
     if ( v_dash_ratio == 1.0 || v_dash_ratio == 0.0 ) return;
@@ -110,8 +107,8 @@ class Logic {
             gl.bindAttribLocation(program, 0, "center_position3d");
             gl.bindAttribLocation(program, 1, "radius");
             gl.bindAttribLocation(program, 2, "color");
-            gl.bindAttribLocation(program, 2, "dash_ratio");
-            gl.bindAttribLocation(program, 3, "dash_opacity");
+            gl.bindAttribLocation(program, 3, "dash_ratio");
+            gl.bindAttribLocation(program, 4, "dash_opacity");
         }
 
         this.cameraBindingPoint = 0;

package/programs/line-on-globe/circle-accurate-flat.js

@@ -69,8 +69,7 @@ void main() {
     if (fract(interpolation / (2.0 * v_dash_ratio)) < 0.5 ) {
         color.a *= v_dash_opacity;
     }   
-}
-`;
+}`;
 
 
 
@@ -180,9 +179,9 @@ const CircleCache = Object.freeze({
 });
 
 
-function centerCoords2dflatDataCreator(globe, centerLong, centerLat, targetLong, targetLat, { startAngleOfCircle = null, edgeCount = EDGE_COUNT } = {}) {
+function centerCoords2dflatDataCreator(globe, centerLong, centerLat, targetLong, targetLat, { startAngleOfCircle = null, edgeCount = EDGE_COUNT, radiusOffset = 0 } = {}) {
     const centerCoords2dflat = new Float32Array(edgeCount * 2);
-    const radius2d = globe.Math.GetDist2D(centerLong, centerLat, targetLong, targetLat);
+    const radius2d = globe.Math.GetDist2D(centerLong, centerLat, targetLong, targetLat) + radiusOffset;
     let angle;
     if (startAngleOfCircle === null) {
         angle = globe.Math.GetAzimuthAngle(centerLong, centerLat, targetLong, targetLat);
@@ -205,6 +204,26 @@ function centerCoords2dflatDataCreator(globe, centerLong, centerLat, targetLong,
     return centerCoords2dflat;
 }
 
+
+function centerCoords2dflatDataCreatorWithRadius(globe, centerLong, centerLat, radius2d, { startAngleOfCircle = null, edgeCount = EDGE_COUNT } = {}) {
+    const centerCoords2dflat = new Float32Array(edgeCount * 2);
+    const pointsLongLat = globe.Math.GetEllipseGeo(
+        centerLong,
+        centerLat,
+        radius2d,
+        radius2d,
+        0,
+        360 / (edgeCount - 2), // 1 for return to start point, 1 for cutting circles
+    );
+
+    for (let i = 1; i < edgeCount; i++) {
+        const { long: lg, lat: lt } = pointsLongLat[i - 1];
+        centerCoords2dflat.set(globe.api_GetMercator2DPoint(lg, lt), i * 2);
+    }
+    return centerCoords2dflat;
+}
+
+
 export {
-    CircleCache, EDGE_COUNT, centerCoords2dflatDataCreator
+    CircleCache, EDGE_COUNT, centerCoords2dflatDataCreator, centerCoords2dflatDataCreatorWithRadius
 }

package/programs/line-on-globe/lines-color-instanced-flat.js

@@ -0,0 +1,145 @@
+import { CameraUniformBlockTotemCache, CameraUniformBlockString } from "../totems";
+import { mercatorXYToGLPosition } from "../../util/shaderfunctions/geometrytransformations";
+import { noRegisterGlobeProgramCache } from "../programcache";
+import { createProgram } from "../../util";
+import { vaoAttributeLoader } from "../../util/account/util";
+
+/**
+ * This program draws line between points provided from the first and second buffer.
+ * draw method gl.drawInstanced( gl.POINTS, 0,2, lineCount);
+ * */
+
+const Z_ALPHA_MODE = Object.freeze({
+    ON: 1,
+    OFF: 0
+});
+
+const vertexShaderSource = `#version 300 es
+precision highp float;
+${CameraUniformBlockString}
+${mercatorXYToGLPosition}
+uniform float opacity;
+uniform int z_alpha_on;
+
+in vec2 posA;
+in vec2 posB;
+in vec4 color;
+
+out vec4 v_color;
+
+void main() {
+    if ( is3D ) {
+        return;
+    }
+    float z_alpha;
+    if ( z_alpha_on == 1){
+        z_alpha =  z_level * z_level / (distance(posA, posB) / 100.0 );
+        if( z_alpha < 0.1 ) {return;}
+        if( z_alpha > 1.0 ) {z_alpha = 1.0;}
+    } else {
+        z_alpha = 1.0;
+    }
+        vec2 pos;
+        if ( gl_VertexID == 0 ) {
+            pos = posA;
+            } else {
+                pos = posB;
+        }
+    gl_Position = mercatorXYToGLPosition( pos );
+    v_color = color;
+    v_color.a *= z_alpha * opacity;
+    gl_PointSize = 15.0;
+}`;
+
+
+const fragmentShaderSource = `#version 300 es
+precision highp float;
+in vec4 v_color;
+out vec4 outColor;
+void main() {
+    outColor = v_color;
+}`;
+
+
+class Logic {
+    constructor(globe) {
+        this.globe = globe;
+        this.gl = globe.gl;
+        this.program = createProgram(this.gl, vertexShaderSource, fragmentShaderSource);
+        this._lastOpicity = 1.0;
+        this._lastZAlphaOn = Z_ALPHA_MODE.OFF;
+
+        const { gl, program } = this;
+        const currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
+        gl.useProgram(program);
+        { // assign attribute locations
+            gl.bindAttribLocation(program, 0, 'posA');
+            gl.bindAttribLocation(program, 1, 'posB');
+            gl.bindAttribLocation(program, 2, 'color');
+        }
+
+        {   // uniform locations
+            this._opacityLocation = gl.getUniformLocation(program, 'opacity');
+            this._zAlphaOnLocation = gl.getUniformLocation(program, 'z_alpha_on');
+            gl.uniform1i(this._zAlphaOnLocation, this._lastZAlphaOn);
+            gl.uniform1f(this._opacityLocation, this._lastOpicity);
+        }
+        {   // uniform block
+            this._cameraUniformBlock = CameraUniformBlockTotemCache.get(globe);
+            this._cameraBindingPoint = 0;
+            const cameraBlockBindingIndex = gl.getUniformBlockIndex(program, 'CameraUniformBlock');
+            gl.uniformBlockBinding(program, cameraBlockBindingIndex, this._cameraBindingPoint);
+        }
+        gl.useProgram(currentProgram);
+    }
+    createVAO(posAObj, posBObj, colorObj) {
+
+        const { gl } = this;
+        const vao = gl.createVertexArray();
+        const type = gl.Float;
+        const divisor = 1;
+        gl.bindVertexArray(vao);
+        [posAObj, posBObj, colorObj].forEach((obj, index) => {
+            const { buffer, size, stride, offset } = obj;
+            vaoAttributeLoader(gl, index, buffer, size, stride, offset, divisor, type);
+        });
+        gl.bindVertexArray(null);
+        return vao;
+    }
+
+
+    draw(vao, lineCount, opacity = 1.0, zAlphaOn = Z_ALPHA_MODE.OFF) {
+        const { gl, program, _cameraBindingPoint, _cameraUniformBlock } = this;
+        gl.useProgram(program);
+        _cameraUniformBlock.bind(_cameraBindingPoint);
+        gl.bindVertexArray(vao);
+        if (this._lastOpicity !== opacity) {
+            this._lastOpicity = opacity;
+            gl.uniform1f(this._opacityLocation, opacity);
+        }
+        if (this._lastZAlphaOn !== zAlphaOn) {
+            this._lastZAlphaOn = zAlphaOn;
+            gl.uniform1i(this._zAlphaOnLocation, zAlphaOn);
+        }
+        gl.drawInstanced(gl.POINTS, 0, 2, lineCount);
+        _cameraUniformBlock.unbind(_cameraBindingPoint);
+        gl.bindVertexArray(null);
+    }
+
+
+    free() {
+        if (this.isFreed) return;
+        const { gl, program, globe } = this;
+        CameraUniformBlockTotemCache.release(globe);
+        gl.deleteProgram(program);
+        this.isFreed = true;
+    }
+}
+
+
+const LinesColorInstancedFlatCache = Object.freeze({
+    get: (globe) => { return noRegisterGlobeProgramCache.getProgram(globe, Logic) },
+    release: (globe) => { noRegisterGlobeProgramCache.releaseProgram(globe, Logic) }
+});
+
+export { LinesColorInstancedFlatCache, Z_ALPHA_MODE };

package/programs/rings/distancering/paddyflatprogram2d.js

@@ -1,8 +1,4 @@
 import { createProgram, shaderfunctions } from "../../../util";
-import {
-    circleLimpFromLongLatRadCenterMercatorRealDistanceNew_accurate,
-    circleLimpFromLongLatRadCenterCartesian3D_accurate_accurate
-} from "../../../util/shaderfunctions/geometrytransformations";
 import CameraUniformBlockTotem, { CameraUniformBlockString } from "../../totems/camerauniformblock";
 import { globeProgramCache, noRegisterGlobeProgramCache } from "../../programcache";
 
@@ -14,12 +10,11 @@ const vertexShader = `#version 300 es ` +
     shaderfunctions.mercatorXYToGLPosition +
     shaderfunctions.longLatRadToMercator +
     shaderfunctions.longLatRadToCartesian3D +
+    shaderfunctions.circleLimpFromLongLatRadCenterCartesian3D +
     shaderfunctions.circleLimpFromLongLatRadCenterMercatorCompass +
     shaderfunctions.circleLimpFromLongLatRadCenterMercatorRealDistancePadding +
     shaderfunctions.circleLimpFromLongLatRadCenterMercatorRealDistance + `
 
-${circleLimpFromLongLatRadCenterCartesian3D_accurate_accurate}
-
 in vec2 center;
 in float radius;
 in float pad_range;
@@ -51,7 +46,7 @@ void main() {
 
     if ( is3D){  
         gl_Position = projection * view * vec4(
-            circleLimpFromLongLatRadCenterCartesian3D_accurate( center, radius_, angle) - translate, 1.0);
+            circleLimpFromLongLatRadCenterCartesian3D( center, radius_, angle) - translate, 1.0);
         v_limp = vec2(0.0, 0.0);
         return;
     }
@@ -111,6 +106,10 @@ class Logic {
     }
 
 
+    draw(vao, length, opaity) {
+
+    }
+
     draw(attrBufferManager, padCount, compass, opacity) {
         const { gl, program, _padCountLocation, cameraBlockBindingPoint, cameraBlockTotem, _compassLocation } = this;
         gl.useProgram(program);

package/programs/rings/distancering/paddyflatprogram3d.js

@@ -1,8 +1,4 @@
 import { createProgram, shaderfunctions } from "../../../util";
-import {
-    circleLimpFromLongLatRadCenterMercatorRealDistanceNew_accurate,
-    circleLimpFromLongLatRadCenterCartesian3D_accurate_accurate
-} from "../../../util/shaderfunctions/geometrytransformations";
 import CameraUniformBlockTotem, { CameraUniformBlockString } from "../../totems/camerauniformblock";
 import { globeProgramCache, noRegisterGlobeProgramCache } from "../../programcache";
 
@@ -14,12 +10,11 @@ const vertexShader = `#version 300 es ` +
     shaderfunctions.mercatorXYToGLPosition +
     shaderfunctions.longLatRadToMercator +
     shaderfunctions.longLatRadToCartesian3D +
+    shaderfunctions.circleLimpFromLongLatRadCenterCartesian3D +
     shaderfunctions.circleLimpFromLongLatRadCenterMercatorCompass +
     shaderfunctions.circleLimpFromLongLatRadCenterMercatorRealDistancePadding +
     shaderfunctions.circleLimpFromLongLatRadCenterMercatorRealDistance + `
 
-${circleLimpFromLongLatRadCenterCartesian3D_accurate_accurate}
-
 in vec2 center;
 in float radius;
 in float pad_range;
@@ -51,7 +46,7 @@ void main() {
 
     if ( is3D){  
         gl_Position = projection * view * vec4(
-            circleLimpFromLongLatRadCenterCartesian3D_accurate( center, radius_, angle) - translate, 1.0);
+            circleLimpFromLongLatRadCenterCartesian3D( center, radius_, angle) - translate, 1.0);
         v_limp = vec2(0.0, 0.0);
         return;
     }

package/rangerings/rangerings.js

@@ -19,7 +19,6 @@ const { circleProgramCache, PaddingProgramCache, CirclePaddySharedBuffer } = rin
  */
 
 
-
 export default class {
 
     constructor(id, { oneDegreePadding = true, compass = COMPASS_MODES.REAL, showNumbers = true, numbersStyle = null, opacity = 1 } = {}) {
@@ -73,11 +72,7 @@ export default class {
     }
 
 
-    setOpacity(opacity) {
-        this._opacity = opacity;
-        this.textPlugin?.setOpacity(opacity); // TODO impolement this
-        this.globe.DrawRender();
-    }
+
 
     setGeometry() {
         this.textPlugin?.setGeometry();
@@ -97,6 +92,14 @@ export default class {
 
 
 
+
+    setOpacity(opacity) {
+        this._opacity = opacity;
+        this.textPlugin?.setOpacity(opacity); // TODO impolement this
+        this.globe.DrawRender();
+    }
+
+
     /**
      * @param {RangeRingData} rangeRingData
      * 0 compass limps

package/rangerings-2/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-2/index.js

@@ -0,0 +1,4 @@
+import { RangeRings } from "./plugin";
+import RangeRingAngleText from './rangeringangletext';
+import { ENUM_HIDE, ENUM_TEXT_HIDE, COMPASS_MODES } from './enum';
+export { RangeRings, ENUM_HIDE, ENUM_TEXT_HIDE, COMPASS_MODES, RangeRingAngleText };

package/rangerings-2/plugin.js

@@ -29,14 +29,381 @@
  * @property {[number, number, number]} color
  * 
  * 
- * @method setOpacity
- * @method insertBulk
- * @method updateCentersXY
- * @method updateCentersColor
- * @method removeCenters
- * @method updateCentersHide
+ * @method insertBulk    
+ * @typedef {Array<{ringID, radius, paddingRange}>} rings
+ * @param {Array<centerID:string, x:number, y:number, stepAngle:number, rgba:[4 numbers], rings:rings} items
+ 
+ * @method updateCentersXY     @param {Array<{centerID, x, y}>} items
+ * @method updateCentersColor  @param {Array<{centerID, rgba:[4 numbers]}>} centerColors
+ * 
+ * @method updateCentersHide   @param {Array<{centerID, hide, textHide}>} centerHides
+ * @method removeCenters       @param {Array<{centerID}>} centerIds
+ * @method setOpacity          @param {number} opacity
  * 
  * @method setOneDegreePaddingOn //  performance consuming, might be removed
  * @method setCompass // removed
  * 
- */
+ */
+
+import { centerCoords2dflatDataCreatorWithRadius, CircleCache as CircleCache2D } from "../programs/line-on-globe/circle-accurate-flat";
+import { CircleCache as CircleCache3D } from "../programs/line-on-globe/circle-accurate-3d";
+import { LinesColorInstancedFlatCache } from "../programs/line-on-globe/lines-color-instanced-flat";
+import { BufferOrchestrator, BufferManager } from "../util/account";
+import { populateFloat32Array } from "../util/jshelpers/data-filler";
+import { RingAccount, ringKeyMethod, ringBigPaddingKeyMethod } from "./ring-account";
+/**
+ * Programs:
+ * 
+ * circle3d circle2d padding3d padding2d
+ * 
+ *  
+ * */
+
+
+/**
+ * [+] Draw circles
+ * [-] BUG BUFFER OVERFLOW
+ * [-] Draw one degree paddings 2d
+ * [-] Create a program for accurate padding 3d
+ * [-] Draw one degree paddings 3d
+ * [-] Draw big paddings
+ * [-] DrawText
+ */
+
+// TODO make x, y -> long, lat
+
+class RangeRings {
+    constructor(id, { oneDegreePadding = true, showNumbers = true, numbersStyle = null, opacity = 1, } = {}) {
+
+        this.id = id;
+
+        this._oneDegreePadding = oneDegreePadding;
+        this._showNumbers = showNumbers;
+        this._numbersStyle = numbersStyle;
+        this._opacity = opacity;
+        this._circleFlatEdgeCount = 362;
+        this._ringAccount = new RingAccount();
+
+    }
+
+
+    init(globe, gl) {
+        this.globe = globe;
+        this.gl = gl;
+        this._initPrograms();
+        this._initBufferManagers();
+    }
+
+
+    _initPrograms() {
+        const { globe } = this;
+        this._circleProgram2D = CircleCache2D.get(globe);
+        this._circleProgram3D = CircleCache3D.get(globe);
+        this._padding2dProgram = LinesColorInstancedFlatCache.get(globe);
+        // this._padding3dProgram
+    }
+
+
+    _initBufferManagers() {
+        const { globe, gl, _circleFlatEdgeCount } = this;
+
+        const initialCapacity = 10;
+        const bufferType = "DYNAMIC_DRAW";
+        // circle2d, circle3d, 1 degree paddings,
+        this.bufferOrchestrator = new BufferOrchestrator({ capacity: initialCapacity });
+
+        this.bufferManagersCompMap = new Map(
+            [
+                // circle 3D
+                ["centerCoords3d", {
+                    'bufferManager': new BufferManager(gl, 3, { bufferType, initialCapacity }),
+                    'adaptor': (item) => new Float32Array(item.centerCoords3d),
+                }],
+                ["rgba", {
+                    'bufferManager': new BufferManager(gl, 4, { bufferType, initialCapacity }),
+                    'adaptor': (item) => new Float32Array(item.hide === 1 ? [0, 0, 0, 0] : item.rgba)
+                }],
+                ["radius3d", {
+                    'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
+                    'adaptor': (item) => new Float32Array([item.radius])
+                }],
+                ["circleDashAngle", {
+                    'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
+                    'adaptor': (item) => new Float32Array([1]),
+                }],
+                ["dashOpacity", {
+                    'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
+                    'adaptor': (item) => new Float32Array([1]),
+                }],
+
+                // circle 2D 
+                // ["centerCoords2dflatForPadding", {
+                //     'bufferManager': new BufferManager(gl, (_circleFlatEdgeCount - 2) * 2, { bufferType, initialCapacity }),
+                //     'adaptor': (item) => item.centerCoords2dflatForPadding,
+                // }],
+                ["centerCoords2dflat", {
+                    'bufferManager': new BufferManager(gl, _circleFlatEdgeCount * 2, { bufferType, initialCapacity }),
+                    'adaptor': (item) => item.centerCoords2dflat,
+                }],
+                ["rgbaMercator", {
+                    'bufferManager': new BufferManager(gl, 4 * _circleFlatEdgeCount, { bufferType, initialCapacity }),
+                    'adaptor': (item) => populateFloat32Array.fillWithListData(_circleFlatEdgeCount, item.hide === 1 ? [0, 0, 0, 0] : item.rgba),
+                }],
+                ["circleDashAngleMercator", {
+                    'bufferManager': new BufferManager(gl, _circleFlatEdgeCount, { bufferType, initialCapacity }),
+                    'adaptor': (item) => populateFloat32Array.fillFloat32Array(_circleFlatEdgeCount, 1),
+                }],
+                ["dashOpacityMercator", {
+                    'bufferManager': new BufferManager(gl, _circleFlatEdgeCount, { bufferType, initialCapacity }),
+                    'adaptor': (item) => populateFloat32Array.fillFloat32Array(_circleFlatEdgeCount, 1),
+                }],
+            ]
+        );
+
+        const obj = function (bufferManagerComp, divisor = 1) {
+            return { 'buffer': bufferManagerComp.bufferManager.buffer, 'stride': 0, 'offset': 0, divisor }
+
+        };
+        this.circle2DVao = this._circleProgram2D.createVAO(
+            ...["centerCoords2dflat", "rgbaMercator", "circleDashAngleMercator", "dashOpacityMercator"].map(key => obj(this.bufferManagersCompMap.get(key)))
+        );
+        this.circle3DVao = this._circleProgram3D.createVAO(
+            ...["centerCoords3d", "radius3d", "rgba", "circleDashAngle", "dashOpacity"].map(key => obj(this.bufferManagersCompMap.get(key)))
+        );
+
+
+        // PADDING 
+        // this one needs glue to assosiate rings and their big paddings since the count for center is not fixed
+        this._paddingBufferOrchestrator = new BufferOrchestrator({ capacity: initialCapacity });
+        this.bufferManagersCompMapPadding = new Map();
+    }
+
+
+    // GLOBE API
+
+    draw3D() {
+        const { globe, gl, circle2DVao, circle3DVao, _circleProgram2D, _circleProgram3D, bufferOrchestrator, _circleFlatEdgeCount, _opacity } = this;
+        gl.disable(gl.DEPTH_TEST);
+        const is3D = this.globe.api_GetCurrentGeometry() === 0;
+        if (is3D) {
+            _circleProgram3D.draw(circle3DVao, bufferOrchestrator.length, _opacity);
+        } else {
+            _circleProgram2D.draw(circle2DVao, bufferOrchestrator.length, _circleFlatEdgeCount, _opacity);
+        }
+        gl.enable(gl.DEPTH_TEST);
+    }
+
+    free() {
+        if (this._isFreed) return;
+        const { globe } = this;
+        CircleCache2D.release(globe);
+        CircleCache3D.release(globe);
+        this._isFreed = true;
+    }
+
+
+    // API
+
+    /**
+     * @method updateCentersXY @param { Array < { centerID, x, y } >} items 
+    */
+    updateCentersXY(items) {
+        // Algorithm
+        /**
+         * 1. ask centerRingAccount for existing rings COORDINATE RELATED KEYS
+         * 2. update centers
+         * 3. update buffer orchestators
+         */
+
+        this._ringAccount.updateCentersXY(items);
+        const { globe, bufferOrchestrator, bufferManagersCompMap } = this;
+        for (const { centerID } of items) {
+            const datas = this.__reconstructCenteralRings(centerID);
+            // TODO add big paddings when when implemented
+            bufferOrchestrator.updateBulk(datas, bufferManagersCompMap, ["centerCoords3d", "centerCoords2dflat",]);//"centerCoords2dflatForPadding"]);
+        }
+        globe.DrawRender();
+    }
+
+    /**
+     * @method insertBulk
+     * @typedef { Array < { ringID, radius, paddingRange } >} rings
+     * @param { Array < centerID: string, x: number, y: number, stepAngle: number, rgba: [4 numbers], rings: rings, hide, textHide } items
+    */
+    insertBulk(items) {
+        // Algorithm
+        /**
+         * 1 ask centerRingAccount for existing rings 
+         *  presizely: TODO
+         * 2. delete all existing keys with buffer orchestators 
+         * 3. insert new centerRings to centerRingAccount
+         * 4. insert new keys with buffer orchestators
+         */
+        const { globe, _ringAccount, bufferOrchestrator, bufferManagersCompMap } = this;
+        // TODO add delete existing for padding
+        for (const item of items) {
+            const existingKeys = _ringAccount.ringKeys(item.centerID);
+            if (existingKeys.length) {
+                bufferOrchestrator.deleteBulk(existingKeys, bufferManagersCompMap);
+            }
+        }
+
+        for (const item of items) {
+            _ringAccount.insertCenter(item);
+            const datas = this.__reconstructCenteralRings(item.centerID);
+            bufferOrchestrator.insertBulk(datas, bufferManagersCompMap,);
+        }
+
+        // TODO insert text 
+        globe.DrawRender();
+
+    }
+
+
+
+
+    /**
+     * @method updateCentersColor @param { Array < { centerID, rgba: [4 numbers] } >} centerColors
+    */
+    updateCentersColor(centerColors) {
+        // Algorithm
+        /**
+         * 1. ask centerRingAccount for existing rings COLOR KEYS
+         * 2. update centers
+         * 3. update buffer orchestators
+         */
+        this._ringAccount.updateCentersColor(centerColors);
+        const { globe, bufferOrchestrator, bufferManagersCompMap } = this;
+        for (const { centerID } of centerColors) {
+            const datas = this.__reconstructCenteralProperties(centerID);
+            bufferOrchestrator.updateBulk(datas, bufferManagersCompMap, ["rgba", "rgbaMercator"]);
+        }
+        globe.DrawRender();
+    }
+
+    /**
+     * 
+     * @method updateCentersHide @param { Array < { centerID, hide, textHide } >} centerHides
+    */
+    updateCentersHide(centerHides) {
+        // Algorithm
+        /**
+         * Simple
+         * 1. update centers
+         * 2. reconstruct data,
+         * 3. update color buffer 
+         * */
+
+
+
+        /**
+         * Complicated
+         * 1. ask centerRingAccount for existing rings HIDE KEYS
+         * 2. delete from buffer orchestators
+         * 3. mark centers as hidden
+         */
+
+    }
+
+    /**
+     * @method removeCenters @param { Array < { centerID } >} centerIDs
+    */
+    removeCenters(centerIDs) {
+        // Algorithm
+        /**
+         * 1. ask centerRingAccount for existing rings
+         * 2. delete from buffer orchestators
+         * 3. delete from centerRingAccount
+        */
+        const { globe, bufferOrchestrator, bufferManagersCompMap, _ringAccount } = this;
+        for (const centerID of centerIDs) {
+            const existingKeys = _ringAccount.ringKeys(centerID);
+            if (existingKeys.length) {
+                bufferOrchestrator.deleteBulk(existingKeys, bufferManagersCompMap);
+            }
+        }
+        globe.DrawRender();
+    }
+
+    /**
+     * @method setOpacity @param { number } opacity
+    */
+    setOpacity(opacity) {
+        if (typeof opacity !== "number" || opacity < 0 || opacity > 1) throw new Error("Invalid opacity value");
+        this._opacity = opacity;
+        this.globe.drawRender();
+    }
+
+
+    /**
+     * @method setOneDegreePaddingOn //  performance consuming, might be removed
+    */
+    setOneDegreePaddingOn(isOneDegreePaddingOn) {
+        // TODO
+        if (this._oneDegreePadding === isOneDegreePaddingOn) return;
+        this._oneDegreePadding = isOneDegreePaddingOn;
+
+        // Complicated
+        // if (isOneDegreePaddingOn) {
+        //     // fill the Coordinate Buffer for 1 degree Padding
+        //     // Use orchastrator to create data for all rings
+
+        // } else {
+        //     // empty the Coordinate Buffer for 1 degree Padding
+        // }
+    }
+
+
+    __reconstructCenteralRings(centerID) {
+        const { globe, _circleFlatEdgeCount } = this;
+        const centerItem = this._ringAccount.getCenter(centerID);
+        if (centerItem === undefined) throw new Error("Center not found");
+
+        const { x, y, stepAngle, rgba, rings, hide = 0, textHide = 0 } = centerItem;
+
+        const long = x;
+        const lat = y;
+        const centerCoords3d = globe.api_GetCartesian3DPoint(long, lat, 0, 0);
+
+        const result = [];
+
+        for (const { ringID, radius, paddingRange } of rings) {
+            const key = ringKeyMethod(centerID, ringID);
+            const centerCoords2dflat = centerCoords2dflatDataCreatorWithRadius(globe, x, y, radius, { edgeCount: _circleFlatEdgeCount });
+            // const centerCoords2dflatForPadding = centerCoords2dflatDataCreatorWithRadius(globe, x, y, radius - paddingRange, { edgeCount: _circleFlatEdgeCount - 2 });
+            result.push({
+                key,
+                centerCoords3d,
+                centerCoords2dflat,
+                radius,
+                paddingRange,
+                rgba,
+                // centerCoords2dflatForPadding,
+                hide,
+                textHide
+            });
+        }
+        return result;
+
+    }
+
+    __reconstructCenteralProperties(centerID) {
+        const centerItem = this._ringAccount.getCenter(centerID);
+        if (centerItem === undefined) throw new Error("Center not found");
+        const { rgba, rings, hide = 0, textHide = 0 } = centerItem;
+        const result = [];
+        for (const { ringID } of rings) {
+            const key = ringKeyMethod(centerID, ringID);
+            result.push({
+                key,
+                rgba,
+                hide,
+                textHide
+            });
+        }
+        return result;
+    }
+}
+
+
+export { RangeRings };

package/rangerings-2/rangeringangletext.js

@@ -0,0 +1,489 @@
+
+import {
+    CSObjectArrayUpdateTypes,
+} from "@pirireis/webglobe";
+import { ENUM_HIDE, ENUM_TEXT_HIDE, COMPASS_MODES } from "./enum";
+
+
+const Degree = 180 / Math.PI;
+
+
+
+const fidKey = "__fid__";
+
+
+const object = {
+    "displayName": "RangeRingAngleText",
+    "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, id, { style = null, flatCompassMode = COMPASS_MODES.REAL, hideAll = false, opacity = 1 } = {}) {
+        this.globe = globe;
+        this.ObjectArray = globe.ObjectArray;
+        this.id = id;
+        this._flatCompassMode = flatCompassMode;
+        this._lastImplicitCompassMode = this.__implicitCompassMode();
+
+        this._hideAll = hideAll;
+        this._opacity = opacity;
+        const style_ = style !== null ? style : this.getDefaultStyle();
+        this.object = Object.assign({}, object, { style: style_, id: this.id });
+
+        this._centerCollection = new Map();
+        // new inner MAP params
+        // hide
+        // textHide
+
+        this.ObjectArray.Add(this.object);
+
+    }
+
+    getDefaultStyle() {
+        const style = this.ObjectArray.GetDefaultStyle();
+        style.fidKey = fidKey;
+        const { labels } = style;
+        const label = labels[0];
+        label.offset = { x: 0, y: 0 };
+        label.fontFamily.hollowWidth = 1;
+        label.vAlignment = 2;
+        label.hAlignment = 2;
+        label.size = 17;
+        label.text = "`${aci}`"
+
+        return style;
+    }
+
+
+    setStyle(style) {
+        if (style === null) return;
+        style.opacity = this._opacity;
+        this.object.style = style;
+        this.ObjectArray.StyleChanged(this.object);
+    }
+
+
+    setOpacity(opacity) {
+        this._opacity = opacity;
+        const { style } = this.object;
+        style.opacity = opacity;
+        this.ObjectArray.StyleChanged(this.object);
+    }
+
+    setCompass(mode) {
+        if (mode === this._flatCompassMode) return;
+        this._flatCompassMode = mode;
+        this.__onCompassChange();
+    }
+
+
+    free() {
+        this.flush();
+        this.ObjectArray.Delete(this.id);
+    }
+
+
+    /**
+     * @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 { _hideAll } = this;
+        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)) {
+                this._fillDeleteBucket(centerID, deleteBucket);
+            }
+            const maxRadius = rings.reduce((acc, { radius }) => Math.max(acc, radius), 0);
+            const textHide_ = _hideAll ? ENUM_TEXT_HIDE.HIDE : textHide;
+            const show = hide !== ENUM_HIDE.HIDE && textHide_ === ENUM_TEXT_HIDE.SHOW;
+            if (show) 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 (this._hideAll) return;
+        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);
+                centerMap.set("x", x);
+                centerMap.set("y", y);
+                const hide = centerMap.get("hide");
+                const textHide = centerMap.get("textHide");
+                const isHidden = hide === ENUM_HIDE.HIDE || textHide === ENUM_TEXT_HIDE.HIDE;
+                if (isHidden) continue;
+                const maxRadius = centerMap.get("maxRadius");
+                const stepAngle = centerMap.get("stepAngle");
+                // long, lat, radius, step, centerID, outBucket
+                this._appendCircle(x, y, maxRadius, stepAngle, centerID, updateBucket);
+
+            }
+        }
+        // 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) {
+        if (this._hideAll) {
+            console.warn("Tum mesafe halkasi yazilari gizli durum. Islem yapilamaz");
+            return;
+        };
+        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
+    removeCenters(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);
+    }
+
+
+    hideAll() {
+        this._hideAll = true;
+        const deleteBucket = {
+            coords: [],
+            coordsZ: [],
+            attribs: []
+        }
+        for (const [centerID, centerMap] of this._centerCollection) {
+            const hide = centerMap.get("hide");
+            const hideText = centerMap.get("textHide");
+            centerMap.set("textHide", ENUM_TEXT_HIDE.HIDE);
+            if (hide === ENUM_HIDE.HIDE) continue;
+            const isHidden = hideText === ENUM_TEXT_HIDE.HIDE;
+            if (!isHidden) this._fillDeleteBucket(centerID, deleteBucket);
+        }
+        this._updateData(deleteBucket, CSObjectArrayUpdateTypes.DELETE);
+    }
+
+    showAll() {
+        this._hideAll = false;
+        const addBucket = {
+            coords: [],
+            coordsZ: [],
+            attribs: []
+        }
+        for (const [centerID, centerMap] of this._centerCollection) {
+            const hide = centerMap.get("hide");
+            if (hide === ENUM_HIDE.HIDE) continue;
+            const hideText = centerMap.get("textHide");
+            const isHidden = hideText === ENUM_TEXT_HIDE.HIDE;
+            if (isHidden) {
+                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, addBucket);
+                centerMap.set("hide", ENUM_HIDE.SHOW);
+                centerMap.set("textHide", ENUM_TEXT_HIDE.SHOW);
+            }
+        }
+        if (addBucket.coords.length) this._updateData(addBucket, CSObjectArrayUpdateTypes.ADD);
+    }
+
+
+
+
+    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;
+        for (let i = 1; i < coords_.length; i++) {
+            if (aci >= 360) break;
+            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-2/ring-account.js

@@ -0,0 +1,92 @@
+/**
+ * This account interacts with buffer orchestrations and buffers.
+ * For rings, coordinates and paddings
+ */
+
+
+
+
+import { BufferOrchestrator, BufferManager } from "../util/account";
+
+
+const ringKeyMethod = (centerID, ringID) => `${centerID}_${ringID}`;
+const ringBigPaddingKeyMethod = (centerID, ringID, angle) => `${centerID}_${ringID}_${angle}`;
+
+/**
+ * @typedef { Array < { ringID, radius, paddingRange } >} rings
+ * @param { Array < centerID: string, x: number, y: number, stepAngle: number, rgba: [4 numbers], rings: rings } items
+ */
+class RingAccount {
+    constructor() {
+        this._centeralMap = new Map(); // key, new MAP(x,y, rings:[])
+
+    }
+
+    /**
+     * @typedef {centerID, x, y, rings} centeralItem
+     * 
+     */
+    insertCenter(centeralItem) {
+        this._centeralMap.set(centeralItem.centerID, centeralItem);
+    }
+
+
+    getCenter(centerID) {
+        return this._centeralMap.get(centerID);
+    }
+
+    updateCentersXY(items) {
+        for (const { centerID, x, y } of items) {
+            const center = this.getCenter(centerID);
+            if (center) {
+                center.x = x;
+                center.y = y;
+            }
+        }
+    }
+
+    /**
+     * 
+     * @param {Array<{centerID, rgba}>} centersColor 
+     */
+    updateCentersColor(centersColor) {
+        for (const { centerID, rgba } of centersColor) {
+            const center = this.getCenter(centerID);
+            if (center) {
+                center.rgba = rgba;
+            }
+        }
+    }
+
+    // to delete rings and one degree paddings from buffer  
+    ringKeys(centerID) {
+        const result = [];
+        const center = this.getCenter(centerID);
+        if (center) {
+            const rings = center.rings;
+            for (const { ringID } of rings) {
+                result.push(ringKeyMethod(centerID, ringID));
+            }
+        }
+        return result;
+    }
+
+    // To delete big paddings from buffer
+    ringBigPaddingKeys(centerID) {
+        const result = [];
+        const center = this.getCenter(centerID);
+        if (!center) return;
+        const { rings, stepAngle } = center;
+        for (const { ringID } of rings) {
+            let angle = 0;
+            while (angle < 360) {
+                result.push(ringBigPaddingKeyMethod(centerID, ringID, angle));
+                angle += stepAngle;
+            }
+        }
+        return result;
+    }
+}
+
+
+export { RingAccount, ringKeyMethod, ringBigPaddingKeyMethod };

package/util/account/util.js

@@ -1,7 +1,10 @@
-export const vaoAttributeLoader = (gl, buffer, position, length, stride, offset, divisor = null) => {
+export const vaoAttributeLoader = (gl, buffer, position, length, stride, offset, divisor = null, type = null) => {
+    if (type === null) {
+        type = gl.FLOAT;
+    }
     gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
     gl.enableVertexAttribArray(position);
-    gl.vertexAttribPointer(position, length, gl.FLOAT, false, stride, offset);
+    gl.vertexAttribPointer(position, length, type, false, stride, offset);
     if (divisor !== null) {
         gl.vertexAttribDivisor(position, divisor);
     }