@pirireis/webglobeplugins 0.15.20-alpha → 0.15.22-alpha

package/semiplugins/shape-on-terrain/padding-1-degree.js

@@ -24,15 +24,14 @@ export class Padding1DegreePlugin {
     bufferOrchestrator;
     bufferManagersMap;
     lineProgram = null;
-    _opacityLODCoef = 1;
-    _pluginOpacity = 1; // this is used to set the opacity of the plugin
     _innerPaddingRatio = 0.9; //
     _float32Array = null; // this is used to forward the data to the buffer manager
     _uboHandler = null; // this is used to forward the data to the shader program
     _bufferNames = ["position2d", "position3d"];
     _vao = null; // this is used to store the VAO for the plugin
     _freed = false; // this is used to check if the plugin is freed or not
-    _lastCAM_LOD = { camInfo: -1, lod: -1 }; // this is used to store the last zoom and lod values
+    _userOpacity = 1;
+    _adaptiveOpacityMultiplier = 1;
     _dataMap = new Map();
     _options = {
         bufferType: "STATIC_DRAW",
@@ -86,7 +85,7 @@ export class Padding1DegreePlugin {
         this.bufferOrchestrator.deleteBulk(keys, this.bufferManagersMap);
         this.globe?.DrawRender();
     }
-    setPluginOpacity(opacity) {
+    setPluginOpacity(opacity, drawRender = false) {
         if (this._freed) {
             console.warn("Plugin is freed, cannot set opacity");
             return;
@@ -96,9 +95,10 @@ export class Padding1DegreePlugin {
             return;
         }
         opacityCheck(opacity);
-        this._opacityLODCoef = opacity;
-        this._uboHandler?.updateSingle("u_opacity", new Float32Array([opacity]));
-        this.globe.DrawRender();
+        this._userOpacity = opacity;
+        if (drawRender) {
+            this.globe.DrawRender();
+        }
     }
     setDefaultColor(color) {
         if (this._freed) {
@@ -143,19 +143,19 @@ export class Padding1DegreePlugin {
                             this._float32Array.fill(NaN); // reset the float32Array
                         }
                         for (let i = 0; i < 360; i++) {
-                            const startCoords = paddingInput.startCoords[i];
-                            const endCoords = paddingInput.endCoords[i];
-                            if (startCoords === null || endCoords === null) {
+                            const outerCoords = paddingInput.outerCoords[i];
+                            const innerCoords = paddingInput.innerCoords[i];
+                            if (outerCoords === null || innerCoords === null) {
                                 continue;
                             }
-                            let coords = globe.api_GetMercator2DPoint(startCoords[0], startCoords[1]);
+                            let coords = globe.api_GetMercator2DPoint(outerCoords[0], outerCoords[1]);
                             // fill the second coordinate with 0
                             this._float32Array[i * 6] = coords[0];
                             this._float32Array[i * 6 + 1] = coords[1];
-                            let innerCoords = globe.api_GetMercator2DPoint(endCoords[0], endCoords[1]);
+                            let coordsInner = globe.api_GetMercator2DPoint(innerCoords[0], innerCoords[1]);
                             // fill the second coordinate with 0
-                            this._float32Array[i * 6 + 2] = innerCoords[0];
-                            this._float32Array[i * 6 + 3] = innerCoords[1];
+                            this._float32Array[i * 6 + 2] = coordsInner[0];
+                            this._float32Array[i * 6 + 3] = coordsInner[1];
                         }
                         return this._float32Array.subarray(0, 360 * 2 * 3);
                     }
@@ -174,22 +174,22 @@ export class Padding1DegreePlugin {
                         }
                         const _float32Array = this._float32Array;
                         for (let i = 0; i < 360; i++) {
-                            const startCoords = paddingInput.startCoords[i];
-                            const endCoords = paddingInput.endCoords[i];
-                            if (startCoords === null || endCoords === null) {
+                            const outerCoords = paddingInput.outerCoords[i];
+                            const innerCoords = paddingInput.innerCoords[i];
+                            if (outerCoords === null || innerCoords === null) {
                                 continue;
                             }
                             const height = paddingInput.heightFromGroundIn3D ?? this._options.defaultHeightFromGroundIn3D;
-                            let coords = globe.api_GetCartesian3DPoint(startCoords[0], startCoords[1], height, this._options.isMSL);
+                            let coords = globe.api_GetCartesian3DPoint(outerCoords[0], outerCoords[1], height, this._options.isMSL);
                             // fill the second coordinate with 0
                             _float32Array[i * 9] = coords[0];
                             _float32Array[i * 9 + 1] = coords[1];
                             _float32Array[i * 9 + 2] = coords[2];
-                            let innerCoords = globe.api_GetCartesian3DPoint(endCoords[0], endCoords[1], height, this._options.isMSL);
+                            let coordsInner = globe.api_GetCartesian3DPoint(innerCoords[0], innerCoords[1], height, this._options.isMSL);
                             // fill the second coordinate with 0
-                            _float32Array[i * 9 + 3] = innerCoords[0];
-                            _float32Array[i * 9 + 4] = innerCoords[1];
-                            _float32Array[i * 9 + 5] = innerCoords[2];
+                            _float32Array[i * 9 + 3] = coordsInner[0];
+                            _float32Array[i * 9 + 4] = coordsInner[1];
+                            _float32Array[i * 9 + 5] = coordsInner[2];
                         }
                         return _float32Array.subarray(0, 360 * 3 * 3);
                     }
@@ -215,11 +215,11 @@ export class Padding1DegreePlugin {
                             this._float32Array[i * 12] = color[0];
                             this._float32Array[i * 12 + 1] = color[1];
                             this._float32Array[i * 12 + 2] = color[2];
-                            this._float32Array[i * 12 + 3] = color[3] * this._opacityLODCoef;
+                            this._float32Array[i * 12 + 3] = color[3];
                             this._float32Array[i * 12 + 4] = color[0];
                             this._float32Array[i * 12 + 5] = color[1];
                             this._float32Array[i * 12 + 6] = color[2];
-                            this._float32Array[i * 12 + 7] = 0; //color[3] * this._opacityLODCoef;
+                            this._float32Array[i * 12 + 7] = 0; //color[3] ;
                         }
                         return this._float32Array.subarray(0, 360 * 4 * 3);
                     }
@@ -233,11 +233,11 @@ export class Padding1DegreePlugin {
                                 this._float32Array[i * 12] = color[0];
                                 this._float32Array[i * 12 + 1] = color[1];
                                 this._float32Array[i * 12 + 2] = color[2];
-                                this._float32Array[i * 12 + 3] = color[3] * this._opacityLODCoef;
+                                this._float32Array[i * 12 + 3] = color[3];
                                 this._float32Array[i * 12 + 4] = color[0];
                                 this._float32Array[i * 12 + 5] = color[1];
                                 this._float32Array[i * 12 + 6] = color[2];
-                                this._float32Array[i * 12 + 7] = 0; // color[3] * this._opacityLODCoef;
+                                this._float32Array[i * 12 + 7] = 0; // color[3] ;
                                 i++;
                             }
                         }
@@ -272,6 +272,9 @@ export class Padding1DegreePlugin {
             console.warn("Globe or LineProgram or VAO is not initialized, cannot draw");
             return;
         }
+        if (this.globe.api_IsScreenMoving()) {
+            this.__build();
+        }
         const gl = this.globe.gl;
         const drawOptions = {
             drawRange: {
@@ -280,7 +283,7 @@ export class Padding1DegreePlugin {
             },
         };
         gl.disable(gl.DEPTH_TEST);
-        this.lineProgram.draw(this._vao, drawOptions, this._pluginOpacity, this._uboHandler);
+        this.lineProgram.draw(this._vao, drawOptions, this._userOpacity * this._adaptiveOpacityMultiplier, this._uboHandler);
         gl.enable(gl.DEPTH_TEST);
     }
     free() {
@@ -310,17 +313,64 @@ export class Padding1DegreePlugin {
         this._innerPaddingRatio = 1 - Math.pow(0.7, lod);
     }
     _buildPaddings(level) {
+        if (level === "input") {
+            // Build input paddings
+        }
+        else if (level === "innerCircle") {
+            // Build inner circle paddings
+            this.__innerCircle();
+            this.__elevation();
+        }
+        else if (level === "elevation") {
+            // Build elevation paddings
+            this.__elevation();
+        }
+    }
+    __innerCircle() {
+        // Implement inner circle padding logic
+        console.log("innerCircle Level Update");
+        const datas = this._dataMap;
+        for (const [key, value] of datas) {
+            // Implement inner circle padding logic using key and value
+            const { innerCoords } = preAdapter(this.globe, value, this._innerPaddingRatio, value.outerCoords);
+            value.innerCoords = innerCoords;
+        }
+    }
+    __elevation() {
+        this._updateAdaptiveOpacityMultiplier();
+        const bufferToUpdate = this.globe?.api_GetCurrentGeometry() === 1 ? "position2d" : "position3d";
+        console.log(bufferToUpdate);
+        const datas = this._dataMap;
+        const wrapper = [null];
+        this._float32Array = new Float32Array(360 * 4 * 4); // largest float32Array
+        for (const [key, value] of datas) {
+            wrapper[0] = value;
+            this.bufferOrchestrator.updateBulk(wrapper, this.bufferManagersMap, [bufferToUpdate]);
+        }
+        this._float32Array = null; // reset the float32Array
+    }
+    __build() {
+        const globeChanges = this.lineProgram?.cameraBlockTotem.getGlobeChanges();
+        if (globeChanges.lodChanged) {
+            console.log("lod changed");
+        }
+        if (globeChanges.lodChanged) {
+            this.__updateLODRelatedParameters();
+            this._buildPaddings("innerCircle");
+        }
+        else if (globeChanges.lookChanged || globeChanges.geometryChanged) {
+            this._buildPaddings("elevation");
+        }
     }
-    __onCamOrLodChange() {
-        //TODO: implement -> on lod change the _innerPaddingRatio and all positions should be recalculated.
-        // calculation
-        // if cam change, recalculate 3d positions
+    _updateAdaptiveOpacityMultiplier() {
+        const currentLod = this.globe?.api_GetCurrentLODWithDecimal();
+        this._adaptiveOpacityMultiplier = Math.max(1 - (2.9 / currentLod), 0.1);
     }
 }
-function preAdapter(globe, paddingInput, paddingRatio, startCoords) {
-    const endCoords = new Array(360);
-    if (startCoords === null) {
-        startCoords = new Array(360);
+function preAdapter(globe, paddingInput, paddingRatio, outerCoords) {
+    const innerCoords = new Array(360);
+    if (outerCoords === null) {
+        outerCoords = new Array(360);
         for (let i = 0; i < 360; i++) {
             const { long, lat } = globe.Math.FindPointByPolar(paddingInput.center[0], // center long
             paddingInput.center[1], // center lat
@@ -333,25 +383,25 @@ function preAdapter(globe, paddingInput, paddingRatio, startCoords) {
             const longDifference = Math.abs(long - endLong);
             const latDifference = Math.abs(lat - endLat);
             if (longDifference > 45) {
-                startCoords[i] = null;
-                endCoords[i] = null;
+                outerCoords[i] = null;
+                innerCoords[i] = null;
                 continue;
             }
             // Assign the calculated coordinates
-            startCoords[i] = [long, lat];
-            endCoords[i] = [endLong, endLat];
+            outerCoords[i] = [long, lat];
+            innerCoords[i] = [endLong, endLat];
         }
     }
     else {
-        // Handle case when startCoords is provided
+        // Handle case when outerCoords is provided
         for (let i = 0; i < 360; i++) {
-            if (startCoords[i] === null) {
-                endCoords[i] = null;
+            if (outerCoords[i] === null) {
+                innerCoords[i] = null;
                 continue;
             }
             const { long: endLong, lat: endLat } = globe.Math.FindPointByPolar(paddingInput.center[0], paddingInput.center[1], paddingInput.outerRadius * paddingRatio, i);
-            endCoords[i] = [endLong, endLat];
+            innerCoords[i] = [endLong, endLat];
         }
     }
-    return { startCoords, endCoords };
+    return { outerCoords, innerCoords };
 }

package/util/account/single-attribute-buffer-management/buffer-manager.js

@@ -60,7 +60,7 @@ export class BufferManager {
         }
         gl.bindBuffer(gl.ARRAY_BUFFER, null);
     }
-    insertConsecutiveBulk(items, offset, adapter, Constructor = Float32Array) {
+    insertBlock(items, offset, adapter, Constructor = Float32Array) {
         const { gl, buffer, itemSize } = this;
         const cpuBuffer = new Constructor(itemSize * items.length);
         for (let i = 0; i < items.length; i++) {

package/util/account/single-attribute-buffer-management/buffer-orchestrator.js

@@ -19,6 +19,92 @@ export class BufferOrchestrator {
         this.tombstoneOffsets = [];
         this._length = 0;
     }
+    // ...existing code...
+    // TODO: CLEAN THIS
+    // insertBulk2(items: any[], bufferManagersMap: BufferManagersMap, bufferKeys: string[] | null = null) {
+    //     this.ensureSpace(items.length, bufferManagersMap);
+    //     const { offsetMap } = this;
+    //     // For block insert (truly new, consecutive offsets)
+    //     const blockItems: any[] = [];
+    //     let blockStart: number | null = null;
+    //     let lastBlockOffset: number | null = null;
+    //     // For single insert (existing or tombstone-assigned)
+    //     const singleItems: any[] = [];
+    //     const singleOffsets: number[] = [];
+    //     for (const item of items) {
+    //         let offset = offsetMap.get(item.key);
+    //         if (offset !== undefined) {
+    //             // Already present, update in place
+    //             singleItems.push(item);
+    //             singleOffsets.push(offset);
+    //         } else {
+    //             // Assign offset (tombstone or new)
+    //             if (this.tombstoneOffsets.length > 0) {
+    //                 offset = this.tombstoneOffsets.pop() as number;
+    //                 offsetMap.set(item.key, offset);
+    //                 singleItems.push(item);
+    //                 singleOffsets.push(offset);
+    //             } else {
+    //                 offset = this._length++;
+    //                 if (offset >= this._capacity) throw new Error("The Size Should Be Increased!!");
+    //                 offsetMap.set(item.key, offset);
+    //                 // Check for consecutive block
+    //                 if (blockStart === null) {
+    //                     blockStart = offset;
+    //                     lastBlockOffset = offset;
+    //                     blockItems.push(item);
+    //                 } else if (lastBlockOffset !== null && offset === lastBlockOffset + 1) {
+    //                     lastBlockOffset = offset;
+    //                     blockItems.push(item);
+    //                 } else {
+    //                     // Not consecutive, flush current block
+    //                     if (blockItems.length > 0) {
+    //                         this._insertBlock(blockItems, blockStart, bufferManagersMap, bufferKeys);
+    //                         blockItems.length = 0;
+    //                     }
+    //                     blockStart = offset;
+    //                     lastBlockOffset = offset;
+    //                     blockItems.push(item);
+    //                 }
+    //             }
+    //         }
+    //     }
+    //     // Flush any remaining block
+    //     if (blockItems.length > 0 && blockStart !== null) {
+    //         this._insertBlock(blockItems, blockStart, bufferManagersMap, bufferKeys);
+    //     }
+    //     // Insert singles
+    //     if (singleItems.length > 0) {
+    //         if (bufferKeys) {
+    //             for (const key of bufferKeys) {
+    //                 const bufferManagerComp = bufferManagersMap.get(key);
+    //                 if (!bufferManagerComp) throw new Error("insertBulk bufferKey does not exist");
+    //                 const { bufferManager, adaptor } = bufferManagerComp;
+    //                 bufferManager.insertBulk(singleItems.map(adaptor), singleOffsets);
+    //             }
+    //         } else {
+    //             for (const [key, { bufferManager, adaptor }] of bufferManagersMap) {
+    //                 bufferManager.insertBulk(singleItems.map(adaptor), singleOffsets);
+    //             }
+    //         }
+    //     }
+    // }
+    // // Helper for block insert
+    // private _insertBlock(blockItems: any[], blockStart: number, bufferManagersMap: BufferManagersMap, bufferKeys: string[] | null) {
+    //     if (bufferKeys) {
+    //         for (const key of bufferKeys) {
+    //             const bufferManagerComp = bufferManagersMap.get(key);
+    //             if (!bufferManagerComp) throw new Error("insertBulk bufferKey does not exist");
+    //             const { bufferManager, adaptor } = bufferManagerComp;
+    //             bufferManager.insertBlock(blockItems, blockStart, adaptor, Float32Array);
+    //         }
+    //     } else {
+    //         for (const [key, { bufferManager, adaptor }] of bufferManagersMap) {
+    //             bufferManager.insertBlock(blockItems, blockStart, adaptor, Float32Array);
+    //         }
+    //     }
+    // }
+    // ...existing code...
     // want to add stack load to this method
     // if offsetMap.has(item.key) === false get next offset, add the item to stack
     // create a single big float32array and fill it with the items
@@ -27,10 +113,18 @@ export class BufferOrchestrator {
         this.ensureSpace(items.length, bufferManagersMap);
         const { offsetMap } = this;
         let offsetStart = null;
-        const itemForConsecutiveLoad = [];
+        const offsets = [];
+        const blockLoad = [];
         for (const item of items) {
             let o = offsetMap.get(item.key);
+            if (o === undefined && this.tombstoneOffsets.length > 0) {
+                // If there is a tombstone, use it
+                o = this.tombstoneOffsets.pop();
+                offsetMap.set(item.key, o);
+            }
             if (o !== undefined) {
+                // Already exist or there is a random empty space in earlear part of memory.
+                // insert for single slots 
                 if (bufferKeys) {
                     for (const key of bufferKeys) {
                         const bufferManagerComp = bufferManagersMap.get(key);
@@ -45,88 +139,42 @@ export class BufferOrchestrator {
                         bufferManager.insertBulk([adaptor(item)], [o]);
                     }
                 }
-                continue;
             }
-            const offset = this.nextOffset();
-            offsetMap.set(item.key, offset);
-            itemForConsecutiveLoad.push(item);
-            if (offsetStart === null) {
-                offsetStart = offset;
+            else {
+                // offset comes from increment function
+                // this part stacks data to be load a a single big block.
+                const offset = this.nextOffset();
+                if (offset === undefined) {
+                    throw new Error("The Size Should Be Increased!!");
+                }
+                offsets.push(offset);
+                offsetMap.set(item.key, offset);
+                blockLoad.push(item);
+                if (offsetStart === null) {
+                    offsetStart = offset;
+                }
             }
         }
         if (offsetStart === null)
             return;
+        for (let i = 0; i < offsets.length - 1; i++) {
+            if (offsets[i] - offsets[i + 1] !== -1) {
+                // TODO: DELETE THIS
+                throw new Error("consecutive is not consecutive");
+            }
+        }
         if (bufferKeys) {
             for (const key of bufferKeys) {
                 const bufferManagerComp = bufferManagersMap.get(key);
                 if (bufferManagerComp === undefined)
                     throw new Error("insertBulk bufferKey does not exist");
                 const { bufferManager, adaptor } = bufferManagerComp;
-                bufferManager.insertConsecutiveBulk(itemForConsecutiveLoad, offsetStart, adaptor, Float32Array);
+                bufferManager.insertBlock(blockLoad, offsetStart, adaptor, Float32Array);
             }
         }
         else {
             for (const [key, { bufferManager, adaptor }] of bufferManagersMap) {
-                bufferManager.insertConsecutiveBulk(itemForConsecutiveLoad, offsetStart, adaptor, Float32Array);
-            }
-        }
-    }
-    insertBulk2(items, bufferManagersMap, bufferKeys = null) {
-        this.ensureSpace(items.length, bufferManagersMap);
-        const { offsetMap } = this;
-        // Pre-allocate arrays only if needed
-        const newItemsCount = items.reduce((acc, item) => acc + (offsetMap.has(item.key) ? 0 : 1), 0);
-        if (newItemsCount === 0)
-            return;
-        // Only allocate if there are new items
-        const newItems = new Array(newItemsCount);
-        const newOffsets = new Array(newItemsCount);
-        let idx = 0;
-        for (const item of items) {
-            let o = offsetMap.get(item.key);
-            if (o !== undefined) {
-                // Update existing
-                if (bufferKeys) {
-                    for (const key of bufferKeys) {
-                        const bufferManagerComp = bufferManagersMap.get(key);
-                        if (!bufferManagerComp)
-                            throw new Error("insertBulk bufferKey does not exist");
-                        const { bufferManager, adaptor } = bufferManagerComp;
-                        bufferManager.insertBulk([adaptor(item)], [o]);
-                    }
-                }
-                else {
-                    for (const [key, { bufferManager, adaptor }] of bufferManagersMap) {
-                        bufferManager.insertBulk([adaptor(item)], [o]);
-                    }
-                }
-            }
-            else {
-                // New item
-                const offset = this.nextOffset();
-                offsetMap.set(item.key, offset);
-                newItems[idx] = item;
-                newOffsets[idx] = offset;
-                idx++;
-            }
-        }
-        if (idx > 0) {
-            // Only slice the arrays to the actual number of new items
-            const itemsToInsert = newItems.slice(0, idx);
-            const offsetsToInsert = newOffsets.slice(0, idx);
-            if (bufferKeys) {
-                for (const key of bufferKeys) {
-                    const bufferManagerComp = bufferManagersMap.get(key);
-                    if (!bufferManagerComp)
-                        throw new Error("insertBulk bufferKey does not exist");
-                    const { bufferManager, adaptor } = bufferManagerComp;
-                    bufferManager.insertConsecutiveBulk(itemsToInsert, offsetsToInsert[0], adaptor, Float32Array);
-                }
-            }
-            else {
-                for (const [key, { bufferManager, adaptor }] of bufferManagersMap) {
-                    bufferManager.insertConsecutiveBulk(itemsToInsert, offsetsToInsert[0], adaptor, Float32Array);
-                }
+                bufferManager.insertBlock(blockLoad, offsetStart, adaptor, Float32Array);
             }
         }
     }
@@ -175,15 +223,18 @@ export class BufferOrchestrator {
     getOffset(key) {
         return this.offsetMap.get(key);
     }
-    nextOffset() {
+    nextTombstone() {
         if (this.tombstoneOffsets.length > 0) {
             const offset = this.tombstoneOffsets.pop();
             return offset;
         }
+        return undefined;
+    }
+    nextOffset() {
         if (this._length < this._capacity) {
             return this._length++;
         }
-        return false;
+        return undefined;
     }
     ensureSpace(itemsLength, bufferManagersMap) {
         if (itemsLength <= this.emptySpace)

package/util/account/single-attribute-buffer-management/buffer-orchestrator1.js

@@ -0,0 +1,159 @@
+"use strict";
+// import { BufferOrchestrator as BufferOrchestratorI, BufferManagersMap, BufferManager } from "./types";
+// const EXTRA_SIZE = 10;
+// export class BufferOrchestrator implements BufferOrchestratorI {
+//     _capacity: number;
+//     offsetMap: Map<string, number>;
+//     tombstoneOffsets: number[];
+//     _length: number;
+//     constructor({ capacity = 10 } = {}) {
+//         this._capacity = capacity;
+//         this.offsetMap = new Map();
+//         this.tombstoneOffsets = [];
+//         this._length = 0;
+//     }
+//     resetWithCapacity(bufferManagersMap: BufferManagersMap, capacity: number | null = null) {
+//         this._capacity = capacity !== null ? capacity : this._capacity;
+//         for (const [key, { bufferManager }] of bufferManagersMap) {
+//             bufferManager.resetWithCapacity(this._capacity);
+//         }
+//         this.offsetMap.clear();
+//         this.tombstoneOffsets = [];
+//         this._length = 0;
+//     }
+//     insertBulk(items: any[], bufferManagersMap: BufferManagersMap, bufferKeys: string[] | null = null) {
+//         this.ensureSpace(items.length, bufferManagersMap);
+//         const { offsetMap } = this;
+//         const offsets = [];
+//         for (const item of items) {
+//             let o = offsetMap.get(item.key);
+//             const offset = o !== undefined ? o : this.nextOffset() as number;
+//             if (offset === undefined) {
+//                 throw new Error("The Size Should Be Increased!!")
+//             }
+//             offsetMap.set(item.key, offset);
+//             offsets.push(offset);
+//         }
+//         if (bufferKeys) {
+//             for (const key of bufferKeys) {
+//                 const bufferManagerComp = bufferManagersMap.get(key);
+//                 if (bufferManagerComp === undefined) throw new Error("insertBulk bufferKey does not exist");
+//                 const { bufferManager, adaptor } = bufferManagerComp;
+//                 bufferManager.insertBulk(items.map(adaptor), offsets);
+//             }
+//         } else {
+//             for (const [key, { bufferManager, adaptor }] of bufferManagersMap) {
+//                 bufferManager.insertBulk(items.map(adaptor), offsets);
+//             }
+//         }
+//     }
+//     // does not assign offset to the new items.
+//     updateBulk(items: any[], bufferManagersMap: BufferManagersMap, bufferKeys: string[] | null = null) {
+//         const { offsetMap } = this;
+//         const offsets = [];
+//         for (const item of items) {
+//             const offset = offsetMap.get(item.key);
+//             if (offset !== undefined) {
+//                 offsets.push(offset);
+//             } else {
+//                 throw new Error("updateBulk item Key does not exist");
+//             }
+//         }
+//         if (bufferKeys) {
+//             for (const key of bufferKeys) {
+//                 const bufferManagerComp = bufferManagersMap.get(key);
+//                 if (bufferManagerComp === undefined) throw new Error("updateBulk bufferKey does not exist");
+//                 const { bufferManager, adaptor } = bufferManagerComp;
+//                 bufferManager.insertBulk(items.map(adaptor), offsets);
+//             }
+//         } else {
+//             for (const [key, { bufferManager, adaptor }] of bufferManagersMap) {
+//                 bufferManager.insertBulk(items.map(adaptor), offsets);
+//             }
+//         }
+//     }
+//     deleteBulk(keys: string[], bufferManagersMap: BufferManagersMap) {
+//         const offsets = [];
+//         for (const key of keys) {
+//             const offset = this.getOffset(key);
+//             if (offset !== undefined) {
+//                 offsets.push(offset);
+//                 this.offsetMap.delete(key);
+//                 this.tombstoneOffsets.push(offset);
+//             }
+//         }
+//         for (const [key, { bufferManager }] of bufferManagersMap) {
+//             bufferManager.deleteBulk(offsets);
+//         }
+//     }
+//     getOffset(key: string) {
+//         return this.offsetMap.get(key);
+//     }
+//     nextOffset(): number | undefined {
+//         if (this.tombstoneOffsets.length > 0) {
+//             const offset = this.tombstoneOffsets.pop() as number;
+//             return offset;
+//         }
+//         if (this._length < this._capacity) {
+//             return this._length++;
+//         }
+//         return undefined;
+//     }
+//     ensureSpace(itemsLength: number, bufferManagersMap: BufferManagersMap) {
+//         if (itemsLength <= this.emptySpace) return;
+//         const newCapacity = this.length + itemsLength;
+//         for (const [key, { bufferManager }] of bufferManagersMap) {
+//             bufferManager.extendBuffer(this.length, newCapacity);
+//         }
+//         this._capacity = newCapacity;
+//     }
+//     defrag(bufferManagers: BufferManagersMap, bufferKeys: string[]) { // TODO defrag and leave some empty space
+//         const offsetMap = this.offsetMap;
+//         const newCapacity = offsetMap.size + EXTRA_SIZE;
+//         if (bufferKeys) {
+//             for (const key of bufferKeys) {
+//                 const offset = offsetMap.get(key);
+//                 if (offset !== undefined) {
+//                     for (const [key, { bufferManager }] of bufferManagers) {
+//                         bufferManager.defrag([offset], this.length, newCapacity);
+//                     }
+//                 }
+//             }
+//         } else {
+//             for (const [key, { bufferManager }] of bufferManagers) {
+//                 bufferManager.defrag(offsetMap.values(), this.length, newCapacity);
+//             }
+//         }
+//         this._defrag();
+//         this._length = offsetMap.size;
+//         this._capacity = newCapacity;
+//         this.tombstoneOffsets = [];
+//     }
+//     /**
+//      * Flushes metadata and sets length to 0 without actualize change on buffers
+//      * This method created for cases in which data is loaded on each frame
+//      */
+//     flush({ capacity = 10 } = {}) {
+//         this._length = 0;
+//         this._capacity = capacity;
+//         this.tombstoneOffsets = []
+//         this.offsetMap.clear();
+//     }
+//     _defrag() {
+//         const newOffsetMap = new Map();
+//         let newOffset = 0;
+//         for (const [key, offset] of this.offsetMap) {
+//             newOffsetMap.set(key, newOffset++);
+//         }
+//         this.offsetMap = newOffsetMap
+//     }
+//     get length() {
+//         return this._length;
+//     }
+//     get emptySpace() {
+//         return this._capacity - this.offsetMap.size;
+//     }
+//     get capacity() {
+//         return this._capacity;
+//     }
+// }