@pirireis/webglobeplugins 0.16.0 → 0.16.2

package/programs/rings/distancering/circlepaddysharedbuffer.js

@@ -1,423 +1,368 @@
-// TODO: Delete this file if it is not needed anymore.
-
-
-// /**
-//  * ring data model
-//  *  [centerX, centerY, range, padding, r, g, b, a, hide]
-//  *
-//  *  Buffer is initialized with ring capacity and buffer is created with that capacity. It might be called buffer orphaning.
-//  *
-//  * */
-
-
-// /**
-//  * TODO
-//  * delete registerCenter
-//  *
-//  *
-//  */
-// const RING_SIZE = 9;
-
-// export default class {
-//     /**
-//      * @param {WebGL2RenderingContext} gl
-//      * @param {Object} options
-//      * @param {Number} options.initialRingCapacity
-//      * @param {String} options.bufferType - "static" or "dynamic"
-//      * */
-//     constructor(gl, globe, { initialRingCapacity = 20, bufferType = "STATIC_DRAW", implicitExtentionRate = 1.2 } = {}) {
-//         this.gl = gl;
-//         this.globe = globe;
-//         this._capacity = initialRingCapacity;
-//         this._ringCounter = 0;
-//         this._length = 0;
-
-//         this._centerMap = new Map(); // key, new MAP(x,y, rings:[])
-//         this._ringOffsets = new Map();
-//         this._removedRingsOffsetStack = [];
-
-//         this._bufferType = gl[bufferType.toUpperCase()];
-//         this.implicitExtentionRate = implicitExtentionRate;
-//         this.buffer = gl.createBuffer();
-
-//         { // initilize data
-//             gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
-//             gl.bufferData(gl.ARRAY_BUFFER, initialRingCapacity * 4 * RING_SIZE, this._bufferType);
-//             gl.bindBuffer(gl.ARRAY_BUFFER, null);
-//         }
-
-//         {
-//             this._circleVAO = gl.createVertexArray();
-//             gl.bindVertexArray(this._circleVAO);
-//             gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
-//             gl.enableVertexAttribArray(0);
-//             gl.vertexAttribPointer(0, 2, gl.FLOAT, false, RING_SIZE * 4, 0);
-//             gl.enableVertexAttribArray(1);
-//             gl.vertexAttribPointer(1, 1, gl.FLOAT, false, RING_SIZE * 4, 2 * 4);
-//             gl.enableVertexAttribArray(2);
-//             gl.vertexAttribPointer(2, 4, gl.FLOAT, false, RING_SIZE * 4, 4 * 4);
-//             gl.enableVertexAttribArray(3);
-//             gl.vertexAttribPointer(3, 3, gl.FLOAT, false, RING_SIZE * 4, 8 * 4);
-
-//             // set divisors to 1
-//             gl.vertexAttribDivisor(0, 1);
-//             gl.vertexAttribDivisor(1, 1);
-//             gl.vertexAttribDivisor(2, 1);
-//             gl.vertexAttribDivisor(3, 1);
-//             gl.bindVertexArray(null);
-//         }
-
-//         {
-//             this._paddingVAO = gl.createVertexArray();
-//             gl.bindVertexArray(this._paddingVAO);
-//             gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
-//             gl.enableVertexAttribArray(0);
-//             gl.vertexAttribPointer(0, 2, gl.FLOAT, false, RING_SIZE * 4, 0);
-//             gl.enableVertexAttribArray(1);
-//             gl.vertexAttribPointer(1, 1, gl.FLOAT, false, RING_SIZE * 4, 2 * 4);
-//             gl.enableVertexAttribArray(2);
-//             gl.vertexAttribPointer(2, 1, gl.FLOAT, false, RING_SIZE * 4, 3 * 4);
-//             gl.enableVertexAttribArray(3);
-//             gl.vertexAttribPointer(3, 4, gl.FLOAT, false, RING_SIZE * 4, 4 * 4);
-//             gl.enableVertexAttribArray(4);
-//             gl.vertexAttribPointer(4, 3, gl.FLOAT, false, RING_SIZE * 4, 8 * 4);
-//             gl.vertexAttribDivisor(0, 1);
-//             gl.vertexAttribDivisor(1, 1);
-//             gl.vertexAttribDivisor(2, 1);
-//             gl.vertexAttribDivisor(3, 1);
-//             gl.vertexAttribDivisor(4, 1);
-//             gl.bindVertexArray(null);
-//         }
-//     }
-
-//     /**
-//      * @param {String} centerID
-//      * @param {Object} options
-//      * @param {Number} options.x
-//      * @param {Number} options.y
-//      * */
-//     registerCenter(centerID, { x = 0, y = 0 } = {}) {
-//         this._centerMap.set(centerID, new Map(
-//             [
-//                 ["x", x],
-//                 ["y", y],
-//                 ["rings", []] // ring keys
-//             ]
-//         ));
-//     }
-
-//     /**
-//      *
-//      * @param {null | number} newCapacity if null, vacuum defragmentation is applied -> capacity is set to the current ring count
-//      */
-//     defrag(newCapacity = null) {
-//         const { _removedRingsOffsetStack, _ringOffsets } = this;
-//         _removedRingsOffsetStack.sort();
-//         this._capacity = newCapacity || this._ringCounter;
-//         const arrayToLoad = new Float32Array(this._capacity * RING_SIZE);
-//         const bufferData = this._getBufferData();
-//         let arrayOffset = 0;
-//         const newRingOffsets = new Map();
-//         for (const [key, offset] of _ringOffsets) {
-//             const ringOffset = offset / 4
-//             const ringData = bufferData.slice(ringOffset, ringOffset + RING_SIZE);
-//             arrayToLoad.set(ringData, arrayOffset);
-//             newRingOffsets.set(key, arrayOffset * 4);
-//             arrayOffset += RING_SIZE;
-//         }
-//         const { gl, buffer } = this;
-//         gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
-//         gl.bufferData(gl.ARRAY_BUFFER, arrayToLoad, this._bufferType);
-//         gl.bindBuffer(gl.ARRAY_BUFFER, null);
-//         this._ringOffsets = newRingOffsets;
-//         this._removedRingsOffsetStack = [];
-//         this._length = this._ringCounter;
-//     }
-
-//     extendBuffer(newCapacity) {
-//         if (this._capacity >= newCapacity) {
-//             console.warn("New capacity is smaller than the current capacity");
-//             return;
-//         }
-//         this._capacity = newCapacity;
-//         const { gl, buffer } = this;
-//         const bufferData = this._getBufferData();
-//         gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
-//         gl.bufferData(gl.ARRAY_BUFFER, newCapacity * RING_SIZE * 4, this._bufferType);
-//         gl.bufferSubData(gl.ARRAY_BUFFER, 0, bufferData);
-//         gl.bindBuffer(gl.ARRAY_BUFFER, null);
-//     }
-
-//     checkCapacity(sizeLeft = 1) {
-//         return sizeLeft <= this._capacity - this._ringCounter;
-//     }
-
-//     capacityLeft() {
-//         return this._capacity - this._ringCounter;
-//     }
-
-//     get capacity() {
-//         return this._capacity;
-//     }
-
-//     get length() {
-//         return this._length;
-//     }
-
-//     get ringCount() {
-//         return this._ringCounter;
-//     }
-
-
-
-
-//     /**
-//      * @param {Array<string>} centerIDs
-//      * */
-//     removeCenters(centerIDs) {
-//         const { gl, buffer } = this;
-//         const zero = new Float32Array([0]);
-//         gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
-//         for (let centerID of centerIDs) {
-//             if (!this._centerMap.has(centerID)) {
-//                 // console.warn("Center is not registered yet");
-//                 // return;
-//                 continue;
-//             }
-//             const center = this._centerMap.get(centerID);
-//             const rings = center.get("rings");
-//             for (let i = 0; i < rings.length; i++) {
-//                 // set range to 0, 3rd index of float32array
-//                 const offset = this._ringOffsets.get(rings[i]);
-//                 gl.bufferSubData(gl.ARRAY_BUFFER, offset + 8, zero);
-//                 this._removedRingsOffsetStack.push(offset);
-//                 this._ringOffsets.delete(rings[i]);
-//             }
-//             this._ringCounter -= rings.length;
-//             this._centerMap.delete(centerID);
-//         }
-//         gl.bindBuffer(gl.ARRAY_BUFFER, null);
-//         this.globe.DrawRender();
-//     }
-
-
-//     /**
-//      *
-//      * @property {String} centerID
-//      * @property {Number} x radians x
-//      * @property {Number} y radians y
-//      * @param {*} centerIDxyList
-//      */
-//     updateCentersXY(centerIDxyList) {
-//         const { gl, buffer } = this;
-//         gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
-//         for (let { centerID, x, y } of centerIDxyList) {
-//             const center = this._centerMap.get(centerID);
-//             center.set("x", x);
-//             center.set("y", y);
-//             const xyBlock = new Float32Array([x, y]);
-//             const rings = center.get("rings");
-//             for (let i = 0; i < rings.length; i++) {
-//                 const offset = this._ringOffsets.get(rings[i]);
-//                 gl.bufferSubData(gl.ARRAY_BUFFER, offset, xyBlock);
-//             }
-//         }
-//         gl.bindBuffer(gl.ARRAY_BUFFER, null);
-//         this.globe.DrawRender();
-//     }
-
-
-//     updateCentersHide(data) {
-//         const { gl, buffer } = this;
-//         gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
-//         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]);
-//                 gl.bufferSubData(gl.ARRAY_BUFFER, offset + 32, new Float32Array([hide]));
-//             }
-//         }
-//         gl.bindBuffer(gl.ARRAY_BUFFER, null);
-//         this.globe.DrawRender();
-//     }
-
-
-//     insertBulk(rangeRingDatas) {
-//         const { gl, buffer } = this;
-
-//         {// remove existring centers
-//             const existingCenterIDs = [];
-//             for (let { centerID } of rangeRingDatas) {
-//                 if (this._centerMap.has(centerID)) {
-//                     existingCenterIDs.push(centerID);
-//                 }
-//             }
-//             this.removeCenters(existingCenterIDs);
-//         }
-
-//         { // capacity check
-//             let incomingRingSize = 0;
-//             for (let { rings } of rangeRingDatas) {
-//                 incomingRingSize += rings.length;
-//                 // It should check if ring is already registered but for now it is not implemented.
-//                 // Reasons: increase in complexity and performance
-//             }
-//             this._implicitExtendBufferInNeed(incomingRingSize);
-//         }
-//         gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
-//         for (const { centerID, x, y, rings, hide = 0 } of rangeRingDatas) {
-//             this.registerCenter(centerID, { x, y })
-//             for (const { ringID, radius, padding, rgba } of rings) {
-//                 const key = this._ringKey(centerID, ringID);
-//                 const bufferData = new Float32Array([x, y, radius, padding, ...rgba, hide]);
-//                 const offset = this._nextBufferOffset();
-//                 gl.bufferSubData(gl.ARRAY_BUFFER, offset, bufferData);
-//                 this._ringOffsets.set(key, offset);
-//                 this._centerMap.get(centerID).get("rings").push(key);
-//             }
-//         }
-//         gl.bindBuffer(gl.ARRAY_BUFFER, null);
-//         this.globe.DrawRender();
-//     }
-
-
-
-//     /**
-//      *
-//      * @param {Array<{centerID, rgba}} centersColors
-//      */
-//     updateCentersColor(centersColors) {
-//         const { gl, buffer } = this;
-//         gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
-//         for (let { centerID, rgba } of centersColors) {
-//             if (!this._centerMap.has(centerID)) {
-//                 console.warn("Center is not registered yet");
-//                 continue;
-//             }
-//             const rings = this._centerMap.get(centerID).get("rings");
-//             const block = new Float32Array(rgba);
-//             for (let i = 0; i < rings.length; i++) {
-//                 const offset = this._ringOffsets.get(rings[i]);
-//                 gl.bufferSubData(gl.ARRAY_BUFFER, offset + 16, block);
-//             }
-//         }
-//         gl.bindBuffer(gl.ARRAY_BUFFER, null);
-//         this.globe.DrawRender();
-//     }
-
-//     // ----------------- INTERNAL METHODS ----------------- //
-
-
-//     bindCircleVAO() {
-//         this.gl.bindVertexArray(this._circleVAO);
-//     }
-
-//     bindPaddingVAO() {
-//         this.gl.bindVertexArray(this._paddingVAO);
-//     }
-
-
-//     free() {
-//         this.gl.deleteBuffer(this.buffer);
-//         this.gl.deleteVertexArray(this._circleVAO);
-//         this.gl.deleteVertexArray(this._paddingVAO);
-//     }
-
-//     // ----------------- PRIVATE METHODS ----------------- //
-
-//     _getBufferData() {
-//         const { gl, buffer } = this;
-//         const size = new Float32Array(this._length * RING_SIZE);
-//         const bufferData = new Float32Array(size);
-//         gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
-//         gl.getBufferSubData(gl.ARRAY_BUFFER, 0, bufferData);
-//         gl.bindBuffer(gl.ARRAY_BUFFER, null);
-//         return bufferData;
-//     }
-
-//     _ringKey(centerID, ringID) {
-//         return `C=${centerID},R=${ringID}`;
-//     }
-
-
-
-//     _nextBufferOffset() {
-//         if (!this.checkCapacity()) {
-//             throw new Error("Buffer is full");
-//             return;
-//         }
-//         let offset;
-//         if (this._removedRingsOffsetStack.length > 0) {
-//             offset = this._removedRingsOffsetStack.pop();
-//         } else {
-//             offset = this._ringCounter * RING_SIZE * 4;
-//             this._length++;
-//         }
-//         this._ringCounter++;
-//         return offset;
-//     }
-
-
-//     _implicitExtendBufferInNeed(incomingRingSize) {
-//         const overCapacity = incomingRingSize - this.capacityLeft();
-//         if (overCapacity <= 0) return;
-//         const newCapacity = Math.ceil((this._capacity + overCapacity) * this.implicitExtentionRate);
-//         this.extendBuffer(newCapacity);
-//     }
-
-
-//     async readRing(centerID, ringID) {
-//         const key = this._ringKey(centerID, ringID);
-//         if (!this._ringOffsets.has(key)) {
-//             console.warn("Ring is not registered yet");
-//             return;
-//         }
-//         const offset = this._ringOffsets.get(key);
-//         const { gl, buffer } = this;
-//         gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
-//         const bufferData = new Float32Array(9);
-//         gl.getBufferSubData(gl.ARRAY_BUFFER, offset, bufferData);
-//         return {
-//             centerX: bufferData[0],
-//             centerY: bufferData[1],
-//             range: bufferData[2],
-//             padding: bufferData[3],
-//             rgba: [bufferData[4], bufferData[5], bufferData[6], bufferData[7]],
-//             hide: bufferData[8]
-//         }
-//     }
-
-
-
-//     /**
-//      * TODOS:
-//      * - bulk ring registration. This must be managed here to avoid binding and unbinding buffer multiple times
-//      * - bulk centers and rings registration
-//      *
-//      * - Check capacity on extend buffer and collect garbage
-//      * - set length to the filled part of the buffer. used for draw calls
-//      * */
-
-//     /**
-//      * collectGarbage with Defragmantation
-//      * Basic idea: on unregistration the last ring is moved to the removed ring's place. length is decreased by 1
-//      * Optimization: Reading buffer is expensive. So bulk defragmentation is needed to work with this approach
-//      * */
-// }
-
-
-// /**
-//  * Documentation
-//  *
-//  * Methods:
-//  * - insertRings(centerIdringIdRadiusPaddingRgbaHide)
-//  * - removeRings(centerIDringIDs)
-//  * - removeCenters(centerIDs)
-//  * - updateCentersXY(centerIDxyList)
-//  * - updateCenters(centerDatas)
-//  * - insertBulk(rangeRingDatas)
-//  * - updateRing(centerID, ringID, { radius, padding, rgba, hide })
-//  * - readRing(centerID, ringID)
-//  *
-//  */
+"use strict";
+// TODO: Delete this file if it is not needed anymore.
+// /**
+//  * ring data model
+//  *  [centerX, centerY, range, padding, r, g, b, a, hide]
+//  *
+//  *  Buffer is initialized with ring capacity and buffer is created with that capacity. It might be called buffer orphaning.
+//  *
+//  * */
+// /**
+//  * TODO
+//  * delete registerCenter
+//  *
+//  *
+//  */
+// const RING_SIZE = 9;
+// export default class {
+//     /**
+//      * @param {WebGL2RenderingContext} gl
+//      * @param {Object} options
+//      * @param {Number} options.initialRingCapacity
+//      * @param {String} options.bufferType - "static" or "dynamic"
+//      * */
+//     constructor(gl, globe, { initialRingCapacity = 20, bufferType = "STATIC_DRAW", implicitExtentionRate = 1.2 } = {}) {
+//         this.gl = gl;
+//         this.globe = globe;
+//         this._capacity = initialRingCapacity;
+//         this._ringCounter = 0;
+//         this._length = 0;
+//         this._centerMap = new Map(); // key, new MAP(x,y, rings:[])
+//         this._ringOffsets = new Map();
+//         this._removedRingsOffsetStack = [];
+//         this._bufferType = gl[bufferType.toUpperCase()];
+//         this.implicitExtentionRate = implicitExtentionRate;
+//         this.buffer = gl.createBuffer();
+//         { // initilize data
+//             gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
+//             gl.bufferData(gl.ARRAY_BUFFER, initialRingCapacity * 4 * RING_SIZE, this._bufferType);
+//             gl.bindBuffer(gl.ARRAY_BUFFER, null);
+//         }
+//         {
+//             this._circleVAO = gl.createVertexArray();
+//             gl.bindVertexArray(this._circleVAO);
+//             gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
+//             gl.enableVertexAttribArray(0);
+//             gl.vertexAttribPointer(0, 2, gl.FLOAT, false, RING_SIZE * 4, 0);
+//             gl.enableVertexAttribArray(1);
+//             gl.vertexAttribPointer(1, 1, gl.FLOAT, false, RING_SIZE * 4, 2 * 4);
+//             gl.enableVertexAttribArray(2);
+//             gl.vertexAttribPointer(2, 4, gl.FLOAT, false, RING_SIZE * 4, 4 * 4);
+//             gl.enableVertexAttribArray(3);
+//             gl.vertexAttribPointer(3, 3, gl.FLOAT, false, RING_SIZE * 4, 8 * 4);
+//             // set divisors to 1
+//             gl.vertexAttribDivisor(0, 1);
+//             gl.vertexAttribDivisor(1, 1);
+//             gl.vertexAttribDivisor(2, 1);
+//             gl.vertexAttribDivisor(3, 1);
+//             gl.bindVertexArray(null);
+//         }
+//         {
+//             this._paddingVAO = gl.createVertexArray();
+//             gl.bindVertexArray(this._paddingVAO);
+//             gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
+//             gl.enableVertexAttribArray(0);
+//             gl.vertexAttribPointer(0, 2, gl.FLOAT, false, RING_SIZE * 4, 0);
+//             gl.enableVertexAttribArray(1);
+//             gl.vertexAttribPointer(1, 1, gl.FLOAT, false, RING_SIZE * 4, 2 * 4);
+//             gl.enableVertexAttribArray(2);
+//             gl.vertexAttribPointer(2, 1, gl.FLOAT, false, RING_SIZE * 4, 3 * 4);
+//             gl.enableVertexAttribArray(3);
+//             gl.vertexAttribPointer(3, 4, gl.FLOAT, false, RING_SIZE * 4, 4 * 4);
+//             gl.enableVertexAttribArray(4);
+//             gl.vertexAttribPointer(4, 3, gl.FLOAT, false, RING_SIZE * 4, 8 * 4);
+//             gl.vertexAttribDivisor(0, 1);
+//             gl.vertexAttribDivisor(1, 1);
+//             gl.vertexAttribDivisor(2, 1);
+//             gl.vertexAttribDivisor(3, 1);
+//             gl.vertexAttribDivisor(4, 1);
+//             gl.bindVertexArray(null);
+//         }
+//     }
+//     /**
+//      * @param {String} centerID
+//      * @param {Object} options
+//      * @param {Number} options.x
+//      * @param {Number} options.y
+//      * */
+//     registerCenter(centerID, { x = 0, y = 0 } = {}) {
+//         this._centerMap.set(centerID, new Map(
+//             [
+//                 ["x", x],
+//                 ["y", y],
+//                 ["rings", []] // ring keys
+//             ]
+//         ));
+//     }
+//     /**
+//      *
+//      * @param {null | number} newCapacity if null, vacuum defragmentation is applied -> capacity is set to the current ring count
+//      */
+//     defrag(newCapacity = null) {
+//         const { _removedRingsOffsetStack, _ringOffsets } = this;
+//         _removedRingsOffsetStack.sort();
+//         this._capacity = newCapacity || this._ringCounter;
+//         const arrayToLoad = new Float32Array(this._capacity * RING_SIZE);
+//         const bufferData = this._getBufferData();
+//         let arrayOffset = 0;
+//         const newRingOffsets = new Map();
+//         for (const [key, offset] of _ringOffsets) {
+//             const ringOffset = offset / 4
+//             const ringData = bufferData.slice(ringOffset, ringOffset + RING_SIZE);
+//             arrayToLoad.set(ringData, arrayOffset);
+//             newRingOffsets.set(key, arrayOffset * 4);
+//             arrayOffset += RING_SIZE;
+//         }
+//         const { gl, buffer } = this;
+//         gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+//         gl.bufferData(gl.ARRAY_BUFFER, arrayToLoad, this._bufferType);
+//         gl.bindBuffer(gl.ARRAY_BUFFER, null);
+//         this._ringOffsets = newRingOffsets;
+//         this._removedRingsOffsetStack = [];
+//         this._length = this._ringCounter;
+//     }
+//     extendBuffer(newCapacity) {
+//         if (this._capacity >= newCapacity) {
+//             console.warn("New capacity is smaller than the current capacity");
+//             return;
+//         }
+//         this._capacity = newCapacity;
+//         const { gl, buffer } = this;
+//         const bufferData = this._getBufferData();
+//         gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+//         gl.bufferData(gl.ARRAY_BUFFER, newCapacity * RING_SIZE * 4, this._bufferType);
+//         gl.bufferSubData(gl.ARRAY_BUFFER, 0, bufferData);
+//         gl.bindBuffer(gl.ARRAY_BUFFER, null);
+//     }
+//     checkCapacity(sizeLeft = 1) {
+//         return sizeLeft <= this._capacity - this._ringCounter;
+//     }
+//     capacityLeft() {
+//         return this._capacity - this._ringCounter;
+//     }
+//     get capacity() {
+//         return this._capacity;
+//     }
+//     get length() {
+//         return this._length;
+//     }
+//     get ringCount() {
+//         return this._ringCounter;
+//     }
+//     /**
+//      * @param {Array<string>} centerIDs
+//      * */
+//     removeCenters(centerIDs) {
+//         const { gl, buffer } = this;
+//         const zero = new Float32Array([0]);
+//         gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+//         for (let centerID of centerIDs) {
+//             if (!this._centerMap.has(centerID)) {
+//                 // console.warn("Center is not registered yet");
+//                 // return;
+//                 continue;
+//             }
+//             const center = this._centerMap.get(centerID);
+//             const rings = center.get("rings");
+//             for (let i = 0; i < rings.length; i++) {
+//                 // set range to 0, 3rd index of float32array
+//                 const offset = this._ringOffsets.get(rings[i]);
+//                 gl.bufferSubData(gl.ARRAY_BUFFER, offset + 8, zero);
+//                 this._removedRingsOffsetStack.push(offset);
+//                 this._ringOffsets.delete(rings[i]);
+//             }
+//             this._ringCounter -= rings.length;
+//             this._centerMap.delete(centerID);
+//         }
+//         gl.bindBuffer(gl.ARRAY_BUFFER, null);
+//         this.globe.DrawRender();
+//     }
+//     /**
+//      *
+//      * @property {String} centerID
+//      * @property {Number} x radians x
+//      * @property {Number} y radians y
+//      * @param {*} centerIDxyList
+//      */
+//     updateCentersXY(centerIDxyList) {
+//         const { gl, buffer } = this;
+//         gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+//         for (let { centerID, x, y } of centerIDxyList) {
+//             const center = this._centerMap.get(centerID);
+//             center.set("x", x);
+//             center.set("y", y);
+//             const xyBlock = new Float32Array([x, y]);
+//             const rings = center.get("rings");
+//             for (let i = 0; i < rings.length; i++) {
+//                 const offset = this._ringOffsets.get(rings[i]);
+//                 gl.bufferSubData(gl.ARRAY_BUFFER, offset, xyBlock);
+//             }
+//         }
+//         gl.bindBuffer(gl.ARRAY_BUFFER, null);
+//         this.globe.DrawRender();
+//     }
+//     updateCentersHide(data) {
+//         const { gl, buffer } = this;
+//         gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+//         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]);
+//                 gl.bufferSubData(gl.ARRAY_BUFFER, offset + 32, new Float32Array([hide]));
+//             }
+//         }
+//         gl.bindBuffer(gl.ARRAY_BUFFER, null);
+//         this.globe.DrawRender();
+//     }
+//     insertBulk(rangeRingDatas) {
+//         const { gl, buffer } = this;
+//         {// remove existring centers
+//             const existingCenterIDs = [];
+//             for (let { centerID } of rangeRingDatas) {
+//                 if (this._centerMap.has(centerID)) {
+//                     existingCenterIDs.push(centerID);
+//                 }
+//             }
+//             this.removeCenters(existingCenterIDs);
+//         }
+//         { // capacity check
+//             let incomingRingSize = 0;
+//             for (let { rings } of rangeRingDatas) {
+//                 incomingRingSize += rings.length;
+//                 // It should check if ring is already registered but for now it is not implemented.
+//                 // Reasons: increase in complexity and performance
+//             }
+//             this._implicitExtendBufferInNeed(incomingRingSize);
+//         }
+//         gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+//         for (const { centerID, x, y, rings, hide = 0 } of rangeRingDatas) {
+//             this.registerCenter(centerID, { x, y })
+//             for (const { ringID, radius, padding, rgba } of rings) {
+//                 const key = this._ringKey(centerID, ringID);
+//                 const bufferData = new Float32Array([x, y, radius, padding, ...rgba, hide]);
+//                 const offset = this._nextBufferOffset();
+//                 gl.bufferSubData(gl.ARRAY_BUFFER, offset, bufferData);
+//                 this._ringOffsets.set(key, offset);
+//                 this._centerMap.get(centerID).get("rings").push(key);
+//             }
+//         }
+//         gl.bindBuffer(gl.ARRAY_BUFFER, null);
+//         this.globe.DrawRender();
+//     }
+//     /**
+//      *
+//      * @param {Array<{centerID, rgba}} centersColors
+//      */
+//     updateCentersColor(centersColors) {
+//         const { gl, buffer } = this;
+//         gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+//         for (let { centerID, rgba } of centersColors) {
+//             if (!this._centerMap.has(centerID)) {
+//                 console.warn("Center is not registered yet");
+//                 continue;
+//             }
+//             const rings = this._centerMap.get(centerID).get("rings");
+//             const block = new Float32Array(rgba);
+//             for (let i = 0; i < rings.length; i++) {
+//                 const offset = this._ringOffsets.get(rings[i]);
+//                 gl.bufferSubData(gl.ARRAY_BUFFER, offset + 16, block);
+//             }
+//         }
+//         gl.bindBuffer(gl.ARRAY_BUFFER, null);
+//         this.globe.DrawRender();
+//     }
+//     // ----------------- INTERNAL METHODS ----------------- //
+//     bindCircleVAO() {
+//         this.gl.bindVertexArray(this._circleVAO);
+//     }
+//     bindPaddingVAO() {
+//         this.gl.bindVertexArray(this._paddingVAO);
+//     }
+//     free() {
+//         this.gl.deleteBuffer(this.buffer);
+//         this.gl.deleteVertexArray(this._circleVAO);
+//         this.gl.deleteVertexArray(this._paddingVAO);
+//     }
+//     // ----------------- PRIVATE METHODS ----------------- //
+//     _getBufferData() {
+//         const { gl, buffer } = this;
+//         const size = new Float32Array(this._length * RING_SIZE);
+//         const bufferData = new Float32Array(size);
+//         gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+//         gl.getBufferSubData(gl.ARRAY_BUFFER, 0, bufferData);
+//         gl.bindBuffer(gl.ARRAY_BUFFER, null);
+//         return bufferData;
+//     }
+//     _ringKey(centerID, ringID) {
+//         return `C=${centerID},R=${ringID}`;
+//     }
+//     _nextBufferOffset() {
+//         if (!this.checkCapacity()) {
+//             throw new Error("Buffer is full");
+//             return;
+//         }
+//         let offset;
+//         if (this._removedRingsOffsetStack.length > 0) {
+//             offset = this._removedRingsOffsetStack.pop();
+//         } else {
+//             offset = this._ringCounter * RING_SIZE * 4;
+//             this._length++;
+//         }
+//         this._ringCounter++;
+//         return offset;
+//     }
+//     _implicitExtendBufferInNeed(incomingRingSize) {
+//         const overCapacity = incomingRingSize - this.capacityLeft();
+//         if (overCapacity <= 0) return;
+//         const newCapacity = Math.ceil((this._capacity + overCapacity) * this.implicitExtentionRate);
+//         this.extendBuffer(newCapacity);
+//     }
+//     async readRing(centerID, ringID) {
+//         const key = this._ringKey(centerID, ringID);
+//         if (!this._ringOffsets.has(key)) {
+//             console.warn("Ring is not registered yet");
+//             return;
+//         }
+//         const offset = this._ringOffsets.get(key);
+//         const { gl, buffer } = this;
+//         gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+//         const bufferData = new Float32Array(9);
+//         gl.getBufferSubData(gl.ARRAY_BUFFER, offset, bufferData);
+//         return {
+//             centerX: bufferData[0],
+//             centerY: bufferData[1],
+//             range: bufferData[2],
+//             padding: bufferData[3],
+//             rgba: [bufferData[4], bufferData[5], bufferData[6], bufferData[7]],
+//             hide: bufferData[8]
+//         }
+//     }
+//     /**
+//      * TODOS:
+//      * - bulk ring registration. This must be managed here to avoid binding and unbinding buffer multiple times
+//      * - bulk centers and rings registration
+//      *
+//      * - Check capacity on extend buffer and collect garbage
+//      * - set length to the filled part of the buffer. used for draw calls
+//      * */
+//     /**
+//      * collectGarbage with Defragmantation
+//      * Basic idea: on unregistration the last ring is moved to the removed ring's place. length is decreased by 1
+//      * Optimization: Reading buffer is expensive. So bulk defragmentation is needed to work with this approach
+//      * */
+// }
+// /**
+//  * Documentation
+//  *
+//  * Methods:
+//  * - insertRings(centerIdringIdRadiusPaddingRgbaHide)
+//  * - removeRings(centerIDringIDs)
+//  * - removeCenters(centerIDs)
+//  * - updateCentersXY(centerIDxyList)
+//  * - updateCenters(centerDatas)
+//  * - insertBulk(rangeRingDatas)
+//  * - updateRing(centerID, ringID, { radius, padding, rgba, hide })
+//  * - readRing(centerID, ringID)
+//  *
+//  */