@pirireis/webglobeplugins 0.9.6 → 0.9.8

package/{programs → dist/programs}/rings/distancering/circlepaddysharedbuffer.js

@@ -1,420 +1,357 @@
-/**
- * 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";
+/**
+ * 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.
+ *
+ * */
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * TODO
+ * delete registerCenter
+ *
+ *
+ */
+const RING_SIZE = 9;
+class default_1 {
+    /**
+     * @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]
+        };
+    }
+}
+exports.default = default_1;
+/**
+ * Documentation
+ *
+ * Methods:
+ * - insertRings(centerIdringIdRadiusPaddingRgbaHide)
+ * - removeRings(centerIDringIDs)
+ * - removeCenters(centerIDs)
+ * - updateCentersXY(centerIDxyList)
+ * - updateCenters(centerDatas)
+ * - insertBulk(rangeRingDatas)
+ * - updateRing(centerID, ringID, { radius, padding, rgba, hide })
+ * - readRing(centerID, ringID)
+ *
+ */