@pirireis/webglobeplugins 0.6.28-c → 0.6.29-c

package/package.json

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

package/programs/line-on-globe/degree-padding-around-circle-3d.js

@@ -2,12 +2,11 @@ import { createProgram } from "../../util/webglobjectbuilders";
 import { CameraUniformBlockString, CameraUniformBlockTotemCache } from "../totems/camerauniformblock";
 import { noRegisterGlobeProgramCache } from "../programcache";
 import { vaoAttributeLoader } from "../../util/account/util";
+import { Z_ALPHA_MODE } from "./util";
 import {
-    longLatRadToMercator, longLatRadToCartesian3D, cartesian3DToGLPosition, mercatorXYToGLPosition, realDistanceOnSphereR1,
+    cartesian3DToGLPosition,
     circleLimpFromLongLatRadCenterCartesian3D_accurate,
-    circleLimpFromLongLatRadCenterMercatorCompass_accurate,
-    circleLimpFromLongLatRadCenterMercatorRealDistanceNew_accurate,
-    POLE
+    POLE,
 } from "../../util/shaderfunctions/geometrytransformations";
 
 
@@ -25,14 +24,8 @@ const INITIAL_EDGE_COUNT = 360;
 const vertexShaderSource = `#version 300 es
 precision highp float;
 ${CameraUniformBlockString}
-${longLatRadToMercator}
-${longLatRadToCartesian3D}
 ${cartesian3DToGLPosition}
-${mercatorXYToGLPosition}
-${realDistanceOnSphereR1}
 ${circleLimpFromLongLatRadCenterCartesian3D_accurate}
-${circleLimpFromLongLatRadCenterMercatorCompass_accurate}
-${circleLimpFromLongLatRadCenterMercatorRealDistanceNew_accurate}
 
 
 in vec3 center_position3d;
@@ -42,6 +35,7 @@ in vec4 color;
 
 uniform float edge_count;
 uniform float step_angle;
+uniform int z_alpha_on;
 
 out float interpolation;
 out vec4 v_color;
@@ -49,6 +43,12 @@ void main() {
     if( !is3D) {
         return;
     }
+    v_color = color;
+    if ( z_alpha_on == 1 ){
+        float z_alpha = pow(z_level * 0.75, 3.0) * distance(big_radius, small_radius) / (R * 2.0);
+        if ( z_alpha < 0.1 ) { return; }
+        v_color.a *= z_alpha;
+    }
     int pad_phase =  gl_VertexID % 2; // 0 or 1
     interpolation = float( gl_VertexID - pad_phase) / edge_count;
     float angle = float( gl_VertexID - pad_phase) * step_angle;
@@ -59,7 +59,7 @@ void main() {
         position = circleLimpFromLongLatRadCenterCartesian3D_accurate(center_position3d, small_radius, angle);
     }
     gl_Position = cartesian3DToGLPosition(position);
-    v_color = color;
+
     gl_PointSize = 5.0;
 }`
 
@@ -87,13 +87,15 @@ class Logic {
         this._lastOpacity = 1.0;
         this._lastEdgeCount = INITIAL_EDGE_COUNT;
         this._lastStepAngle = 360 / INITIAL_EDGE_COUNT;
+        this._lastZAlphaMode = Z_ALPHA_MODE.ON;
         this.program = createProgram(this.gl, vertexShaderSource, fragmentShaderSource);
 
         const { gl, program } = this;
         this.program.uniforms = {
             opacity: gl.getUniformLocation(program, "opacity"),
             edgeCount: gl.getUniformLocation(program, "edge_count"),
-            stepAngle: gl.getUniformLocation(program, "step_angle")
+            stepAngle: gl.getUniformLocation(program, "step_angle"),
+            zAlphaMode: gl.getUniformLocation(program, "z_alpha_on")
         };
 
         { // initial uniform values
@@ -102,6 +104,7 @@ class Logic {
             gl.uniform1f(program.uniforms.opacity, 1.0);
             gl.uniform1f(program.uniforms.edgeCount, INITIAL_EDGE_COUNT * 2);
             gl.uniform1f(program.uniforms.stepAngle, this._lastStepAngle * Math.PI / 180);
+            gl.uniform1i(program.uniforms.zAlphaMode, Z_ALPHA_MODE.ON);
             gl.useProgram(currentProgram);
         }
 
@@ -147,7 +150,7 @@ class Logic {
         return vao;
     }
 
-    draw(vao, length, edgeCount, stepAngle, opacity) {
+    draw(vao, length, edgeCount, stepAngle, opacity, zAlphaMode = Z_ALPHA_MODE.ON) {
         const { gl, program, cameraBlockTotem, cameraBindingPoint } = this;
         gl.useProgram(program);
 
@@ -163,6 +166,10 @@ class Logic {
             gl.uniform1f(program.uniforms.stepAngle, stepAngle * Math.PI / 180);
             this._lastStepAngle = stepAngle;
         }
+        if (this._lastZAlphaMode !== zAlphaMode) {
+            gl.uniform1i(program.uniforms.zAlphaMode, zAlphaMode);
+            this._lastZAlphaMode = zAlphaMode;
+        }
         gl.bindVertexArray(vao);
         cameraBlockTotem.bind(cameraBindingPoint);
         gl.drawArraysInstanced(gl.LINES, 0, edgeCount * 2, length);

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

@@ -3,17 +3,15 @@ import { mercatorXYToGLPosition, POLE } from "../../util/shaderfunctions/geometr
 import { noRegisterGlobeProgramCache } from "../programcache";
 import { createProgram } from "../../util";
 import { vaoAttributeLoader } from "../../util/account/util";
+import { Z_ALPHA_MODE } from "./util";
 
 /**
  * This program draws line between points provided from the first and second buffer.
  * draw method gl.drawArraysInstanced( gl.POINTS, 0,2, lineCount);
  * */
 
-const Z_ALPHA_MODE = Object.freeze({
-    ON: 1,
-    OFF: 0
-});
 
+// TODO: find better way to eleminate edge case distance(posA, posB) > 37000000.0
 const vertexShaderSource = `#version 300 es
 precision highp float;
 ${CameraUniformBlockString}
@@ -32,10 +30,11 @@ void main() {
     if ( is3D ) {
         return;
     }
-    float gap =  distance(posA, posB);
+    float gap = max( distance(posA.x, posB.x), distance(posA.y,posB.y)); // 
+    if ( gap > 37000000.0) { return; }
     float z_alpha;
-    if ( z_alpha_on == 1 || gap > 37000000.0){
-        z_alpha =  z_level * z_level /  ( gap / 100.0 );
+    if ( z_alpha_on == 1 ){ 
+        z_alpha =  pow(z_level,3.0) /  ( 37000000.0 / gap);
         if( z_alpha < 0.1 ) {return;}
         if( z_alpha > 1.0 ) {z_alpha = 1.0;}
     } else {
@@ -115,7 +114,7 @@ class Logic {
     }
 
 
-    draw(vao, lineCount, opacity = 1.0, zAlphaOn = Z_ALPHA_MODE.OFF) {
+    draw(vao, lineCount, opacity = 1.0, zAlphaOn = Z_ALPHA_MODE.ON) {
         const { gl, program, _cameraBindingPoint, _cameraUniformBlock } = this;
         gl.useProgram(program);
         _cameraUniformBlock.bind(_cameraBindingPoint);

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

@@ -0,0 +1,8 @@
+
+const Z_ALPHA_MODE = Object.freeze({
+    ON: 1,
+    OFF: 0
+});
+
+
+export { Z_ALPHA_MODE }

package/programs/util.js

@@ -1,6 +1,6 @@
 
 
-export function longlatbbox2normalbbox({ minLon = -180, maxLon = 180, minLat = -90, maxLat = 90 } = {}) {
+function longlatbbox2normalbbox({ minLon = -180, maxLon = 180, minLat = -90, maxLat = 90 } = {}) {
     // x
     const horOffset = (minLon) * Math.PI / 180;
     const horSize = (maxLon - minLon) * Math.PI / 180;
@@ -15,3 +15,6 @@ export function longlatbbox2normalbbox({ minLon = -180, maxLon = 180, minLat = -
     console.log("longlatbbox2normalbbox", result);
     return result;
 }
+
+
+export { longlatbbox2normalbbox }

package/rangerings/plugin.js

@@ -53,242 +53,32 @@ import { populateFloat32Array } from "../util/jshelpers/data-filler";
 import { RingAccount, ringKeyMethod, ringBigPaddingKeyMethod } from "./ring-account";
 import { CirclePadding3DCache } from "../programs/line-on-globe/degree-padding-around-circle-3d";
 import { LineOnGlobeCache } from '../programs/line-on-globe/naive-accurate';
-
 import RangeRingAngleText from "./rangeringangletext";
+import { Z_ALPHA_MODE } from "../programs/line-on-globe/util";
 
-/**
- * Programs:
- * 
- * circle3d circle2d padding3d padding2d
- * 
- *  
- * */
+const CIRCLE_FLAT_EDGE_COUNT = 362; // 360 + 2 for closing the circle and a cutting point
 
 
-/**
- * [+] 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
- * [+] big paddings does not remove
- */
 
-// TODO make long,lat -> long, lat
 
 class RangeRings {
-    constructor(id, { oneDegreePadding = true, showNumbers = true, numbersStyle = null, opacity = 1 } = {}) {
+    constructor(id, { oneDegreePadding = true, showNumbers = true, numbersStyle = null, opacity = 1, zAlphaOnDegreePadding = Z_ALPHA_MODE.ON } = {}) {
 
         this.id = id;
 
         this._oneDegreePadding = oneDegreePadding;
+        this._zAlphaOnDegreePadding = zAlphaOnDegreePadding;
         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();
-        if (this._showNumbers) {
-            this.textPlugin = new RangeRingAngleText(globe, this.id + "text", { flatCompassMode: this.compass, style: this._numbersStyle, opacity: this._opacity });
-            delete this._numbersStyle;
-        }
-    }
-
-
-    _initPrograms() {
-        const { globe } = this;
-        this._circleProgram2D = CircleCache2D.get(globe);
-        this._circleProgram3D = CircleCache3D.get(globe);
-        this._padding2dProgram = LinesColorInstancedFlatCache.get(globe);
-        this._padding3dProgram = CirclePadding3DCache.get(globe);
-        this._bigPadding3dFlatProgram = LineOnGlobeCache.get(globe);
-
-    }
-
-
-    _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])
-                }],
-                ["radius3dsmall", {
-                    'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
-                    'adaptor': (item) => new Float32Array([item.radius - item.padding / 3])
-                }],
-                ["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, { 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)))
-        );
-
-        this.oneDegreePaddingVao = this._padding2dProgram.createVAO(
-            { buffer: this.bufferManagersCompMap.get("centerCoords2dflat").bufferManager.buffer, size: 2, stride: 0, offset: 0 },
-            { buffer: this.bufferManagersCompMap.get("centerCoords2dflatForPadding").bufferManager.buffer, size: 2, stride: 0, offset: 0 },
-            { buffer: this.bufferManagersCompMap.get("rgbaMercator").bufferManager.buffer, size: 4, stride: 0, offset: 0 },
-        );
-
-        // 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(
-            [
-                ["circlePoint", {
-                    'bufferManager': new BufferManager(gl, 2, { bufferType, initialCapacity }),
-                    'adaptor': (item) => item.circlePoint,
-                }],
-                ["paddingPoint", {
-                    'bufferManager': new BufferManager(gl, 2, { bufferType, initialCapacity }),
-                    'adaptor': (item) => item.paddingPoint,
-                }],
-                ["circlePoint3d", {
-                    'bufferManager': new BufferManager(gl, 3, { bufferType, initialCapacity }),
-                    'adaptor': (item) => item.circlePoint3d
-                }],
-                ["paddingPoint3d", {
-                    'bufferManager': new BufferManager(gl, 3, { bufferType, initialCapacity }),
-                    'adaptor': (item) => item.paddingPoint3d
-                }],
-                ["rgba", {
-                    'bufferManager': new BufferManager(gl, 4, { bufferType, initialCapacity }),
-                    'adaptor': (item) => new Float32Array(item.rgba)
-                }],
-
-                ["dashOpacity", {
-                    'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
-                    'adaptor': (item) => new Float32Array([1]),
-                }],
-                ["dashRatio", {
-                    'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
-                    'adaptor': (item) => new Float32Array([1]),
-                }],
-            ]
-        );
-
-        this._bigPadding3dFlatVAO = this._bigPadding3dFlatProgram.createVAO(
-            ...["circlePoint", "circlePoint3d", "paddingPoint", "paddingPoint3d", "dashRatio", "dashOpacity", "rgba",].map(key => obj(this.bufferManagersCompMapPadding.get(key)))
-        );
-
-        this._padding3dOneDegreeVao = this._padding3dProgram.createVAO(
-            ...["centerCoords3d", "radius3d", "radius3dsmall", "rgba"].map(key => obj(this.bufferManagersCompMap.get(key)))
-        );
-
-    }
-
-
-    // GLOBE API
-
-    draw3D() {
-        const {
-            globe, gl,
-            _circleProgram2D, _circleProgram3D, _padding2dProgram, _padding3dProgram, _bigPadding3dFlatProgram,
-            circle2DVao, circle3DVao, oneDegreePaddingVao, _padding3dOneDegreeVao, _bigPadding3dFlatVAO,
-            bufferOrchestrator, paddingBufferOrchestrator,
-            _circleFlatEdgeCount, _opacity, _oneDegreePadding } = this;
-        gl.disable(gl.DEPTH_TEST);
-        const is3D = globe.api_GetCurrentGeometry() === 0;
-        // const lod = globe.api_GetCurrentLOD();
-        if (is3D) {
-            _circleProgram3D.draw(circle3DVao, bufferOrchestrator.length, _opacity);
-            if (_oneDegreePadding) _padding3dProgram.draw(_padding3dOneDegreeVao, bufferOrchestrator.length, 360, 1, _opacity);
-        } else {
-            _circleProgram2D.draw(circle2DVao, bufferOrchestrator.length, _circleFlatEdgeCount, _opacity);
-            // _padding2dProgram.draw(bigPaddingVAO, paddingBufferOrchestrator.length, _opacity);
-            if (_oneDegreePadding) _padding2dProgram.draw(oneDegreePaddingVao, bufferOrchestrator.length * _circleFlatEdgeCount, _opacity);
-        }
-        _bigPadding3dFlatProgram.draw(_bigPadding3dFlatVAO, paddingBufferOrchestrator.length, _opacity);
-        gl.enable(gl.DEPTH_TEST);
-    }
-
-    free() {
-        if (this._isFreed) return;
-        const { globe } = this;
-        this.bufferManagersCompMap.forEach(({ bufferManager }) => bufferManager.free());
-        this.bufferManagersCompMapPadding.forEach(({ bufferManager }) => bufferManager.free());
-        // delete vaos
-        this.gl.deleteVertexArray(this.circle2DVao);
-        this.gl.deleteVertexArray(this.circle3DVao);
-        this.gl.deleteVertexArray(this.oneDegreePaddingVao);
-        this.gl.deleteVertexArray(this._padding3dOneDegreeVao);
-        this.gl.deleteVertexArray(this._bigPadding3dFlatVAO);
-        // delete programs
-        CircleCache2D.release(globe);
-        CircleCache3D.release(globe);
-        LinesColorInstancedFlatCache.release(globe);
-        CirclePadding3DCache.release(globe);
-        LineOnGlobeCache.release(globe);
-        this.textPlugin?.free();
-
-        this._isFreed = true;
-    }
 
 
-    // API
+    // USER API
 
     /**
      * @method updateCentersCoordinate @param { Array < { centerID, long,lat } >} items 
@@ -354,10 +144,8 @@ class RangeRings {
             const paddingDatas = this.__reconstructCentralRingsBigPaddings(item.centerID);
             paddingBufferOrchestrator.insertBulk(paddingDatas, bufferManagersCompMapPadding);
         }
-
         this.textPlugin?.insertBulk(items);
         globe.DrawRender();
-
     }
 
 
@@ -458,7 +246,6 @@ class RangeRings {
      * @method setOpacity @param { number } opacity
     */
     setOpacity(opacity) {
-        console.log("opacity", opacity, typeof opacity);
         if (typeof opacity !== "number" || opacity < 0 || opacity > 1) throw new Error("Invalid opacity value");
         this._opacity = opacity;
         this.textPlugin?.setOpacity(opacity);
@@ -470,25 +257,163 @@ class RangeRings {
      * @method setOneDegreePaddingOn //  performance consuming, might be removed
     */
     setOneDegreePaddingOn(isOneDegreePaddingOn) {
-        // TODO
+        if (typeof isOneDegreePaddingOn !== "boolean") throw new Error("Invalid value for one degree padding");
         if (this._oneDegreePadding === isOneDegreePaddingOn) return;
         this._oneDegreePadding = isOneDegreePaddingOn;
+        this.globe.DrawRender();
+    }
 
-        // 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
-        // }
+    setZAlphaOnDegreePadding(zAlphaOnDegreePadding) {
+        if (zAlphaOnDegreePadding !== 0 && zAlphaOnDegreePadding !== 1) throw new Error("Invalid value for zAlphaOnDegreePadding");
+        if (this._zAlphaOnDegreePadding === zAlphaOnDegreePadding) return;
+        this._zAlphaOnDegreePadding = zAlphaOnDegreePadding;
+        this.globe.DrawRender();
     }
 
+
+    // PRIVATE METHODS
+
+    _initPrograms() {
+        const { globe } = this;
+        this._circleProgram2D = CircleCache2D.get(globe);
+        this._circleProgram3D = CircleCache3D.get(globe);
+        this._padding2dProgram = LinesColorInstancedFlatCache.get(globe);
+        this._padding3dProgram = CirclePadding3DCache.get(globe);
+        this._bigPadding3dFlatProgram = LineOnGlobeCache.get(globe);
+
+    }
+
+
+    _initBufferManagers() {
+        const { gl } = 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])
+                }],
+                ["radius3dsmall", {
+                    'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
+                    'adaptor': (item) => new Float32Array([item.radius - item.padding / 3])
+                }],
+                ["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, CIRCLE_FLAT_EDGE_COUNT * 2, { bufferType, initialCapacity }),
+                    'adaptor': (item) => item.centerCoords2dflatForPadding,
+                }],
+                ["centerCoords2dflat", {
+                    'bufferManager': new BufferManager(gl, CIRCLE_FLAT_EDGE_COUNT * 2, { bufferType, initialCapacity }),
+                    'adaptor': (item) => item.centerCoords2dflat,
+                }],
+                ["rgbaMercator", {
+                    'bufferManager': new BufferManager(gl, 4 * CIRCLE_FLAT_EDGE_COUNT, { bufferType, initialCapacity }),
+                    'adaptor': (item) => populateFloat32Array.fillWithListData(CIRCLE_FLAT_EDGE_COUNT, item.hide === 1 ? [0, 0, 0, 0] : item.rgba),
+                }],
+                ["circleDashAngleMercator", {
+                    'bufferManager': new BufferManager(gl, CIRCLE_FLAT_EDGE_COUNT, { bufferType, initialCapacity }),
+                    'adaptor': (item) => populateFloat32Array.fillFloat32Array(CIRCLE_FLAT_EDGE_COUNT, 1),
+                }],
+                ["dashOpacityMercator", {
+                    'bufferManager': new BufferManager(gl, CIRCLE_FLAT_EDGE_COUNT, { bufferType, initialCapacity }),
+                    'adaptor': (item) => populateFloat32Array.fillFloat32Array(CIRCLE_FLAT_EDGE_COUNT, 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)))
+        );
+
+        this._oneDegreePaddingVao = this._padding2dProgram.createVAO(
+            { buffer: this.bufferManagersCompMap.get("centerCoords2dflat").bufferManager.buffer, size: 2, stride: 0, offset: 0 },
+            { buffer: this.bufferManagersCompMap.get("centerCoords2dflatForPadding").bufferManager.buffer, size: 2, stride: 0, offset: 0 },
+            { buffer: this.bufferManagersCompMap.get("rgbaMercator").bufferManager.buffer, size: 4, stride: 0, offset: 0 },
+        );
+
+        // 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(
+            [
+                ["circlePoint", {
+                    'bufferManager': new BufferManager(gl, 2, { bufferType, initialCapacity }),
+                    'adaptor': (item) => item.circlePoint,
+                }],
+                ["paddingPoint", {
+                    'bufferManager': new BufferManager(gl, 2, { bufferType, initialCapacity }),
+                    'adaptor': (item) => item.paddingPoint,
+                }],
+                ["circlePoint3d", {
+                    'bufferManager': new BufferManager(gl, 3, { bufferType, initialCapacity }),
+                    'adaptor': (item) => item.circlePoint3d
+                }],
+                ["paddingPoint3d", {
+                    'bufferManager': new BufferManager(gl, 3, { bufferType, initialCapacity }),
+                    'adaptor': (item) => item.paddingPoint3d
+                }],
+                ["rgba", {
+                    'bufferManager': new BufferManager(gl, 4, { bufferType, initialCapacity }),
+                    'adaptor': (item) => new Float32Array(item.rgba)
+                }],
+
+                ["dashOpacity", {
+                    'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
+                    'adaptor': (item) => new Float32Array([1]),
+                }],
+                ["dashRatio", {
+                    'bufferManager': new BufferManager(gl, 1, { bufferType, initialCapacity }),
+                    'adaptor': (item) => new Float32Array([1]),
+                }],
+            ]
+        );
+
+        this._bigPadding3dFlatVAO = this._bigPadding3dFlatProgram.createVAO(
+            ...["circlePoint", "circlePoint3d", "paddingPoint", "paddingPoint3d", "dashRatio", "dashOpacity", "rgba",].map(key => obj(this.bufferManagersCompMapPadding.get(key)))
+        );
+
+        this._padding3dOneDegreeVao = this._padding3dProgram.createVAO(
+            ...["centerCoords3d", "radius3d", "radius3dsmall", "rgba"].map(key => obj(this.bufferManagersCompMap.get(key)))
+        );
+
+    }
+
+
     __reconstructCentralRingsBigPaddings(centerID) {
-        const { globe, _circleFlatEdgeCount } = this;
+        const { globe } = this;
         const centerItem = this._ringAccount.getCenter(centerID);
         if (centerItem === undefined) throw new Error("Center not found");
-        const findPointByPolar = globe.Math.FindPointByPolar;
         const { long, lat, stepAngle, rgba, rings, hide = 0, textHide = 0 } = centerItem;
         const result = [];
         const color = hide === 1 ? new Float32Array([0, 0, 0, 0]) : new Float32Array(rgba)
@@ -514,20 +439,22 @@ class RangeRings {
         return result;
     }
 
+    // IMPLICIT METHODS
+
     __reconstructCentralRings(centerID) {
-        const { globe, _circleFlatEdgeCount } = this;
+        const { globe } = this;
         const centerItem = this._ringAccount.getCenter(centerID);
         if (centerItem === undefined) throw new Error("Center not found");
 
-        const { long, lat, stepAngle, rgba, rings, hide = 0, textHide = 0 } = centerItem;
+        const { long, lat, rgba, rings, hide = 0, textHide = 0 } = centerItem;
         const centerCoords3d = globe.api_GetCartesian3DPoint(long, lat, 0, 0);
 
         const result = [];
 
         for (const { ringID, radius, padding } of rings) {
             const key = ringKeyMethod(centerID, ringID);
-            const centerCoords2dflat = centerCoords2dflatDataCreatorWithRadius(globe, long, lat, radius, { edgeCount: _circleFlatEdgeCount });
-            const centerCoords2dflatForPadding = centerCoords2dflatDataCreatorWithRadius(globe, long, lat, radius - padding / 3, { edgeCount: _circleFlatEdgeCount });
+            const centerCoords2dflat = centerCoords2dflatDataCreatorWithRadius(globe, long, lat, radius, { edgeCount: CIRCLE_FLAT_EDGE_COUNT });
+            const centerCoords2dflatForPadding = centerCoords2dflatDataCreatorWithRadius(globe, long, lat, radius - padding / 3, { edgeCount: CIRCLE_FLAT_EDGE_COUNT });
             result.push({
                 key,
                 centerCoords3d,
@@ -547,7 +474,7 @@ class RangeRings {
     __reconstructCentralPaddingProperties(centerID) {
         const centerItem = this._ringAccount.getCenter(centerID);
         if (centerItem === undefined) throw new Error("Center not found");
-        const { long, lat, stepAngle, rgba, rings, hide = 0, textHide = 0 } = centerItem;
+        const { stepAngle, rgba, rings, hide = 0, textHide = 0 } = centerItem;
         const result = [];
         for (const { ringID, } of rings) {
             let angle = 0;
@@ -578,7 +505,74 @@ class RangeRings {
         }
         return result;
     }
+
+
+
+    // GLOBE API
+
+
+    init(globe, gl) {
+        this.globe = globe;
+        this.gl = gl;
+        this._initPrograms();
+        this._initBufferManagers();
+        if (this._showNumbers) {
+            this.textPlugin = new RangeRingAngleText(globe, this.id + "text", { flatCompassMode: this.compass, style: this._numbersStyle, opacity: this._opacity });
+            delete this._numbersStyle;
+        }
+    }
+
+
+
+    draw3D() {
+        const {
+            globe, gl,
+            _circleProgram2D, _circleProgram3D, _padding2dProgram, _padding3dProgram, _bigPadding3dFlatProgram,
+            _circle2DVao, _circle3DVao, _oneDegreePaddingVao, _padding3dOneDegreeVao, _bigPadding3dFlatVAO,
+            bufferOrchestrator, paddingBufferOrchestrator,
+            _opacity, _oneDegreePadding, _zAlphaOnDegreePadding } = this;
+        gl.disable(gl.DEPTH_TEST);
+        const is3D = globe.api_GetCurrentGeometry() === 0;
+        // const lod = globe.api_GetCurrentLOD();
+        if (is3D) {
+            _circleProgram3D.draw(_circle3DVao, bufferOrchestrator.length, _opacity);
+            if (_oneDegreePadding) _padding3dProgram.draw(_padding3dOneDegreeVao, bufferOrchestrator.length, 360, 1, _opacity, _zAlphaOnDegreePadding);
+        } else {
+            _circleProgram2D.draw(_circle2DVao, bufferOrchestrator.length, CIRCLE_FLAT_EDGE_COUNT, _opacity);
+            // _padding2dProgram.draw(bigPaddingVAO, paddingBufferOrchestrator.length, _opacity);
+            if (_oneDegreePadding) _padding2dProgram.draw(_oneDegreePaddingVao, bufferOrchestrator.length * CIRCLE_FLAT_EDGE_COUNT, _opacity, _zAlphaOnDegreePadding);
+        }
+        _bigPadding3dFlatProgram.draw(_bigPadding3dFlatVAO, paddingBufferOrchestrator.length, _opacity);
+        gl.enable(gl.DEPTH_TEST);
+    }
+
+    free() {
+        if (this._isFreed) return;
+        const { globe } = this;
+        this.bufferManagersCompMap.forEach(({ bufferManager }) => bufferManager.free());
+        this.bufferManagersCompMapPadding.forEach(({ bufferManager }) => bufferManager.free());
+        // delete vaos
+        this.gl.deleteVertexArray(this._circle2DVao);
+        this.gl.deleteVertexArray(this._circle3DVao);
+        this.gl.deleteVertexArray(this._oneDegreePaddingVao);
+        this.gl.deleteVertexArray(this._padding3dOneDegreeVao);
+        this.gl.deleteVertexArray(this._bigPadding3dFlatVAO);
+        // delete programs
+        CircleCache2D.release(globe);
+        CircleCache3D.release(globe);
+        LinesColorInstancedFlatCache.release(globe);
+        CirclePadding3DCache.release(globe);
+        LineOnGlobeCache.release(globe);
+        this._circleProgram2D = null;
+        this._circleProgram3D = null;
+        this._padding2dProgram = null;
+        this._padding3dProgram = null;
+        this._bigPadding3dFlatProgram = null;
+        this.textPlugin?.free();
+        this._isFreed = true;
+    }
+
 }
 
 
-export { RangeRings };
+export { RangeRings, Z_ALPHA_MODE };