@pirireis/webglobeplugins 0.1.10 → 0.3.0

package/programs/line-on-globe/{program.js → naive.js}

@@ -1,11 +1,12 @@
 import { CameraUniformBlockString, CameraUniformBlockTotem } from "../totems";
-import { longLatRadToMercator, longLatRadToCartesian3D, cartesian3DToGLPosition, mercatorXYTo2DPoint } from "../../util/shaderfunctions/geometrytransformations";
+import { longLatRadToMercator, longLatRadToCartesian3D, cartesian3DToGLPosition, mercatorXYToGLPosition, POLE } from "../../util/shaderfunctions/geometrytransformations";
 import { createProgram } from "../../util";
 import { noRegisterGlobeProgramCache, globeProgramCache } from "../programcache";
 import BufferOffsetManger from "../../util/account/bufferoffsetmanager";
+import { programCache } from "../rings/distancering/circleflatprogram";
 const Radian = Math.PI / 180.0;
 const GLOBE_MIDPOINT_COUNT = 100;
-const ITEM_SIZE = 8;
+const ITEM_SIZE = 9;
 
 const vertexShader = `#version 300 es
 precision highp float;
@@ -13,42 +14,63 @@ ${CameraUniformBlockString}
 ${longLatRadToMercator}
 ${longLatRadToCartesian3D}
 ${cartesian3DToGLPosition}
-${mercatorXYTo2DPoint}
+${mercatorXYToGLPosition}
+
 
 in vec2 start_position;
 in vec2 end_position;
+in float dash_ratio;
 in vec4 color;
 out vec4 v_color;
+out vec2 v_limp;
+out float interpolation;
+out float v_dash_ratio;
+
 
 void main() {
-    
     vec2 longLat;
     if (is3D) {
-        float interpolation = float(gl_VertexID) / ${GLOBE_MIDPOINT_COUNT}.0;
+        interpolation = float(gl_VertexID) / ${GLOBE_MIDPOINT_COUNT - 1}.0;
         longLat = mix(start_position, end_position, interpolation);
         vec3 cartesian = longLatRadToCartesian3D(longLat);
         gl_Position = cartesian3DToGLPosition(cartesian);
+        v_limp = vec2(0.0, 0.0);
     } else {
-        if ( gl_VertexID == 0 ) {
+        interpolation = float(gl_VertexID);
+        if (gl_VertexID % 2 == 0) {
             longLat = start_position;
         } else {
             longLat = end_position;
         }
         vec2 mercator = longLatRadToMercator(longLat);
-        gl_Position = mercatorXYTo2DPoint(mercator);
+        v_limp = mercator;
+        gl_Position = mercatorXYToGLPosition(mercator);
     }
+    // if ( gl_VertexID % 2 == 0) {v_color = color;}
+    // else {v_color = vec4(0.0, 0.0, 0.0, 0.0);}
     v_color = color;
+    v_dash_ratio = dash_ratio;
 }
-`
+`;
 
 const fragmentShader = `#version 300 es
+${POLE}
 precision highp float;
+uniform float opacity;
 in vec4 v_color;
 out vec4 color;
+in float interpolation;
+in float v_dash_ratio;
+in vec2 v_limp;
 void main() {
+    if (v_limp.x < -POLE || v_limp.x > POLE || v_limp.y < -POLE || v_limp.y > POLE) { discard; }
     color = v_color;
+    color.a *= opacity;
+    if (interpolation > 0.95) { return; }
+    if (fract(interpolation / (2.0 * v_dash_ratio)) < 0.5) { color.a /= 4.0; }
+
 }
-`
+`;
 
 
 class Logic {
@@ -57,14 +79,24 @@ class Logic {
         this.globe = globe;
         this.gl = globe.gl;
         this.program = createProgram(this.gl, vertexShader, fragmentShader);
+        this._lastOpacity = 1.0;
         const { gl, program } = this;
         {
             // assign attribute locations
             gl.bindAttribLocation(program, 0, "start_position");
             gl.bindAttribLocation(program, 1, "end_position");
-            gl.bindAttribLocation(program, 2, "color");
+            gl.bindAttribLocation(program, 2, "dash_ratio");
+            gl.bindAttribLocation(program, 3, "color");
         }
 
+        {
+            this._opacityLocation = gl.getUniformLocation(program, "opacity");
+            const currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
+            gl.useProgram(program);
+            gl.uniform1f(this._opacityLocation, this._lastOpacity);
+            gl.useProgram(currentProgram);
+
+        }
 
         this.cameraBlockBindingPoint = 0;
         const cameraBlockIndex = this.gl.getUniformBlockIndex(this.program, "CameraUniformBlock");
@@ -75,30 +107,85 @@ class Logic {
     }
 
 
-    draw(bufferManager) {
-        const { gl, program, globe } = this;
+    draw(vao, length, opacity) {
+        const { gl, program, globe, cameraBlockTotem, cameraBlockBindingPoint } = this;
         gl.useProgram(program);
-        const { cameraBlockTotem, cameraBlockBindingPoint } = this;
         cameraBlockTotem.bind(cameraBlockBindingPoint);
-        gl.bindVertexArray(bufferManager.vao);
+        gl.bindVertexArray(vao);
+        if (opacity !== this._lastOpacity) {
+            gl.uniform1f(this._opacityLocation, opacity);
+            this._lastOpacity = opacity;
+        }
         const drawCount = globe.api_GetCurrentGeometry() === 0 ? GLOBE_MIDPOINT_COUNT : 2;
-        gl.disable(gl.DEPTH_TEST);
-        gl.drawArraysInstanced(gl.LINE_STRIP, 0, drawCount, bufferManager.length);
-        gl.enable(gl.DEPTH_TEST);
+        // gl.disable(gl.DEPTH_TEST);
+        gl.drawArraysInstanced(gl.LINE_STRIP, 0, drawCount, length);
         gl.bindVertexArray(null);
         cameraBlockTotem.unbind(cameraBlockBindingPoint);
+        // gl.enable(gl.DEPTH_TEST);
     }
 
 
     createBufferManager({ capacity = 10, bufferType = "DYNAMIC_DRAW" } = {}) {
         return new BufferManager(this.globe, { capacity, bufferType });
     }
+
+
+
+    //
+    createVAO(startPotisionBufferObj, endPositionBufferObj, dashRatioBufferObj, colorBufferObj) {
+        const { gl } = this;
+        const vao = gl.createVertexArray();
+        gl.bindVertexArray(vao);
+        {
+            const { buffer, stride = 0, offset = 0 } = startPotisionBufferObj;
+            gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+            gl.enableVertexAttribArray(0);
+            gl.vertexAttribPointer(0, 2, gl.FLOAT, false, stride, offset);
+            gl.vertexAttribDivisor(0, 1);
+        }
+        {
+
+            const { buffer, stride = 0, offset = 0 } = endPositionBufferObj;
+            gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+            gl.enableVertexAttribArray(1);
+            gl.vertexAttribPointer(1, 2, gl.FLOAT, false, stride, offset);
+            gl.vertexAttribDivisor(1, 1);
+        }
+
+        {
+            const { buffer, stride = 0, offset = 0 } = dashRatioBufferObj;
+            gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+            gl.enableVertexAttribArray(2);
+            gl.vertexAttribPointer(2, 1, gl.FLOAT, false, stride, offset);
+            gl.vertexAttribDivisor(2, 1);
+        }
+
+        {
+            const { buffer, stride = 0, offset = 0 } = colorBufferObj;
+            gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+            gl.enableVertexAttribArray(3);
+            gl.vertexAttribPointer(3, 4, gl.FLOAT, false, stride, offset);
+            gl.vertexAttribDivisor(3, 1);
+        }
+        gl.bindVertexArray(null);
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
+        return vao;
+
+    }
+
+
+    free() {
+        if (this.isFreed) return;
+        programCache.releaseProgram(this.globe, CameraUniformBlockTotem);
+        this.gl.deleteProgram(this.program);
+        this.isFreed = true;
+    }
 }
 
 
 class BufferManager extends BufferOffsetManger {
 
-    constructor(globe, { capacity = 10, bufferType = "DYNAMIC_DRAW" } = {}) {
+    constructor(globe, { capacity = 10, bufferType = "DYNAMIC_DRAW", } = {}) {
         super(ITEM_SIZE, { capacity, bufferType });
         this.globe = globe
         this.gl = globe.gl;
@@ -118,10 +205,13 @@ class BufferManager extends BufferOffsetManger {
             gl.enableVertexAttribArray(1);
             gl.vertexAttribPointer(1, 2, gl.FLOAT, false, ITEM_SIZE * 4, 8);
             gl.enableVertexAttribArray(2);
-            gl.vertexAttribPointer(2, 4, gl.FLOAT, false, ITEM_SIZE * 4, 16);
+            gl.vertexAttribPointer(2, 1, gl.FLOAT, false, ITEM_SIZE * 4, 16);
+            gl.enableVertexAttribArray(3);
+            gl.vertexAttribPointer(3, 4, gl.FLOAT, false, ITEM_SIZE * 4, 20);
             gl.vertexAttribDivisor(0, 1);
             gl.vertexAttribDivisor(1, 1);
             gl.vertexAttribDivisor(2, 1);
+            gl.vertexAttribDivisor(3, 1);
             gl.bindVertexArray(null);
         }
     }
@@ -129,19 +219,22 @@ class BufferManager extends BufferOffsetManger {
 
     /**
      * 
-     * @param {Array<{key:string, startLong:number, startLat:number, endLong:number, endLat:number, rgba:[4numbers] }} items 
+     * @param {Array<{key:string, long:number, lat:number, endLong:number, endLat:number, rgba:[4numbers] }} items 
      */
     insertBulk(items) {
         this.autoExtendBuffer(items.length)
         const { gl, buffer, globe } = this;
         gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
-        for (let { key, startLong, startLat, endLong, endLat, rgba } of items) {
+        for (let { key, long, lat, endLong, endLat, rgba, dashRatio = 1 } of items) {
+            console.log(key, dashRatio, "dashRatio");
             const payload = new Float32Array([
-                Radian * startLong,
-                Radian * startLat,
-                Radian * endLong,
-                Radian * endLat,
+                long,
+                lat,
+                endLong,
+                endLat,
+                dashRatio,
                 ...rgba]);
+
             const offset = this.getOffset(key) | this.nextOffset();
             gl.bufferSubData(gl.ARRAY_BUFFER, offset, payload);
             this.setOffset(key, offset);
@@ -152,17 +245,18 @@ class BufferManager extends BufferOffsetManger {
 
     /**
      * 
-     * @param {Array<{key:string, startLong:number, startLat:number, endLong:number, endLat:number, rgba:[4numbers] }} items 
+     * @param {Array<{key:string, long:number, lat:number, endLong:number, endLat:number, rgba:[4numbers] }} items 
      */
     updateBulk(items) {
         const { gl, buffer, globe } = this;
         gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
-        for (let { key, startLong, startLat, endLong, endLat, rgba } of items) {
+        for (let { key, long, lat, endLong, endLat, rgba, dashRatio = 1 } of items) {
             const payload = new Float32Array([
-                Radian * startLong,
-                Radian * startLat,
-                Radian * endLong,
-                Radian * endLat,
+                long,
+                lat,
+                endLong,
+                endLat,
+                dashRatio,
                 ...rgba]);
             const offset = this.getOffset(key);
             if (offset !== undefined) {
@@ -177,17 +271,18 @@ class BufferManager extends BufferOffsetManger {
 
     /**
      * 
-     * @param {Array<{key:string, startLong:number, startLat:number, endLong:number, endLat:number }} items 
+     * @param {Array<{key:string, long:number, lat:number, endLong:number, endLat:number }} items 
      */
     updateCoordinatesBulk(items) {
         const { gl, buffer, globe } = this;
         gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
-        for (let { key, startLong, startLat, endLong, endLat } of items) {
+        for (let { key, long, lat, endLong, endLat, dashRatio = 1 } of items) {
             const payload = new Float32Array([
-                Radian * startLong,
-                Radian * startLat,
-                Radian * endLong,
-                Radian * endLat]);
+                long,
+                lat,
+                endLong,
+                endLat,
+                dashRatio]);
             const offset = this.getOffset(key);
             if (offset !== undefined) {
                 gl.bufferSubData(gl.ARRAY_BUFFER, offset, payload);
@@ -195,6 +290,7 @@ class BufferManager extends BufferOffsetManger {
                 console.warn("key not found", key);
             }
         }
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
         globe.DrawRender();
     }
 
@@ -210,7 +306,7 @@ class BufferManager extends BufferOffsetManger {
             const payload = new Float32Array([...rgba]);
             const offset = this.getOffset(key);
             if (offset !== undefined) {
-                gl.bufferSubData(gl.ARRAY_BUFFER, offset + 16, payload);
+                gl.bufferSubData(gl.ARRAY_BUFFER, offset + 20, payload);
             } else {
                 console.warn("key not found", key);
             }
@@ -245,6 +341,6 @@ class BufferManager extends BufferOffsetManger {
 
 export const LineOnGlobeCache = Object.freeze({
     get: (globe) => { return noRegisterGlobeProgramCache.getProgram(globe, Logic) },
-    free: (globe) => { return noRegisterGlobeProgramCache.releaseProgram(globe, Logic) }
+    release: (globe) => { return noRegisterGlobeProgramCache.releaseProgram(globe, Logic) }
 });
 

package/programs/rings/distancering/circleflatprogram.js

@@ -9,7 +9,7 @@ const vertexShader = `#version 300 es ` +
     shaderfunctions.R +
     shaderfunctions.POLE +
     CameraUniformBlockString +
-    shaderfunctions.mercatorXYTo2DPoint +
+    shaderfunctions.mercatorXYToGLPosition +
     shaderfunctions.longLatRadToMercator +
     shaderfunctions.longLatRadToCartesian3D +
     shaderfunctions.circleLimpFromLongLatRadCenterCartesian3D +
@@ -46,7 +46,7 @@ void main() {
         limp = circleLimpFromLongLatRadCenterMercatorRealDistance(center, radius, angle);
     }   
     v_limp = limp;
-    gl_Position = mercatorXYTo2DPoint(limp);
+    gl_Position = mercatorXYToGLPosition(limp);
     
 }`;
 

package/programs/rings/distancering/circlepaddingfreeangleprogram.js

@@ -9,7 +9,7 @@ const vertexShader = `#version 300 es ` +
     shaderfunctions.R +
     shaderfunctions.POLE +
     CameraUniformBlockString +
-    shaderfunctions.mercatorXYTo2DPoint +
+    shaderfunctions.mercatorXYToGLPosition +
     shaderfunctions.longLatRadToMercator +
     shaderfunctions.longLatRadToCartesian3D +
     shaderfunctions.circleLimpFromLongLatRadCenterCartesian3D +
@@ -56,7 +56,7 @@ void main() {
         limp = circleLimpFromLongLatRadCenterMercatorRealDistance(center, radius_, angle);
     }
     v_limp = limp;
-    gl_Position = mercatorXYTo2DPoint(limp);
+    gl_Position = mercatorXYToGLPosition(limp);
 }`;
 
 const fragmentShader = `#version 300 es
@@ -128,8 +128,8 @@ class Logic {
         }
         gl.disable(gl.DEPTH_TEST);
         gl.drawArraysInstanced(gl.LINES, 0, 2, attrBufferManager.length);
-        gl.enable(gl.DEPTH_TEST);
         cameraBlockTotem.unbind(cameraBlockBindingPoint);
+        gl.enable(gl.DEPTH_TEST);
         gl.bindVertexArray(null);
 
     }

package/programs/rings/distancering/paddyflatprogram.js

@@ -7,7 +7,7 @@ const vertexShader = `#version 300 es ` +
     shaderfunctions.R +
     shaderfunctions.POLE +
     CameraUniformBlockString +
-    shaderfunctions.mercatorXYTo2DPoint +
+    shaderfunctions.mercatorXYToGLPosition +
     shaderfunctions.longLatRadToMercator +
     shaderfunctions.longLatRadToCartesian3D +
     shaderfunctions.circleLimpFromLongLatRadCenterCartesian3D +
@@ -58,7 +58,7 @@ void main() {
         limp = circleLimpFromLongLatRadCenterMercatorRealDistance(center, radius_, angle);
     }
     v_limp = limp;
-    gl_Position = mercatorXYTo2DPoint(limp);
+    gl_Position = mercatorXYToGLPosition(limp);
 }`;
 
 const fragmentShader = `#version 300 es

package/programs/totems/camerauniformblock.js

@@ -1,3 +1,6 @@
+import { globeProgramCache } from "../programcache";
+
+
 export const CameraUniformBlockString = `
 layout(std140) uniform CameraUniformBlock {
     mat4 view; // 64 bytes           0
@@ -126,3 +129,9 @@ export default class
         }
     }
 }
+
+
+export const CameraUniformBlockTotemCache = Object.freeze({
+    get: (globe) => { return globeProgramCache.getProgram(globe, CameraUniformBlockTotem) },
+    release: (globe) => { return globeProgramCache.releaseProgram(globe, CameraUniformBlockTotem) }
+});

package/programs/totems/index.js

@@ -1,2 +1,2 @@
-import CameraUniformBlockTotem, { CameraUniformBlockString } from "./camerauniformblock";
-export { CameraUniformBlockTotem, CameraUniformBlockString };
+import CameraUniformBlockTotem, { CameraUniformBlockString, CameraUniformBlockTotemCache } from "./camerauniformblock";
+export { CameraUniformBlockTotem, CameraUniformBlockString, CameraUniformBlockTotemCache };

package/rangerings/rangerings.js

@@ -59,6 +59,9 @@ export default class {
         this.circleProgramCache?.releaseProgram(this.globe);
         this.PaddingProgramCache?.releaseProgram(this.globe);
         this.PaddingFreeAngleCache?.releaseProgram(this.globe);
+        this.gl.deleteVertexArray(this.bufferManager?.vao);
+        this.gl.deleteVertexArray(this.paddingBufferManager?.vao);
+        this.paddingBufferManager?.free();
         this.bufferManager?.free();
         this.textPlugin?.free();
         this.circleFlatProgram = null;
@@ -84,8 +87,6 @@ export default class {
         const { circleFlatProgram, paddyFlatProgram, paddingFreeAngleProgram, bufferManager, compass, gl, circleEdgeCount, paddingBufferManager, _opacity } = this;
         if (this.bufferManager !== null && bufferManager.length > 0) {
             gl.disable(gl.DEPTH_TEST);
-            // gl.enable(gl.BLEND);
-            // gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
             console.log("the opacity", _opacity);
             circleFlatProgram.draw(bufferManager, compass, circleEdgeCount, _opacity);
             if (this._onedegreepaddingOn) paddyFlatProgram.draw(bufferManager, 360, compass, _opacity);

package/util/account/bufferoffsetmanager.js

@@ -75,7 +75,19 @@ export default class {
         }
     }
 
-
+    _deleteBulk(keys) {
+        const { gl, buffer } = this;
+        const emptyBlock = new Float32Array(this.itemSize).fill(0)
+        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+        for (let key of keys) {
+            const offset = this.getOffset(key);
+            if (offset !== undefined) {
+                this.deleteFromAccount(key);
+                gl.bufferSubData(gl.ARRAY_BUFFER, offset, emptyBlock);
+            }
+        }
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
+    }
 
     offsetMapIterator() { // can be used for defraging the real buffer.
         return this.offSetMap.entries();
@@ -90,7 +102,6 @@ export default class {
         const itemSize = this.itemSize;
         const itemCount = this.itemCount;
         const capacity = (newCapacity && newCapacity > itemCount) ? newCapacity : itemCount;
-        console.log("defrag", itemCount, capacity);
 
         const newArray = new Float32Array(itemCount * itemSize);
 
@@ -98,7 +109,6 @@ export default class {
         let newOffSet = 0;
         const newOffSetMap = new Map();
         for (const [key, offSet] of this.offSetMap) {
-            console.log(key, offSet);
             const itemOffSet = offSet / 4;
             newArray.set(bufferData.slice(itemOffSet, itemOffSet + itemSize), newOffSet);
             // this.offSetMap.set(key, newOffSet * 4);
@@ -147,8 +157,8 @@ export default class {
      */
     _updatePartial(items, partOffset) {
         const { gl, buffer } = this;
-        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
         const partStart = partOffset * 4;
+        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
         for (let { key, payload } of items) {
             let offset = this.getOffset(key);
             if (offset !== undefined) {
@@ -183,9 +193,11 @@ export default class {
         gl.bindBuffer(gl.ARRAY_BUFFER, null);
     }
 
+
+
+
     free() {
         this.gl.deleteBuffer(this.buffer);
-        this.gl.deleteVertexArray(this.vao);
         this.buffer = null;
         this.vao = null;
         this.gl = null;

package/util/account/index.js

@@ -1,3 +1,7 @@
 import BufferOffsetManager from './bufferoffsetmanager.js';
 
-export { BufferOffsetManager };
+export { BufferOffsetManager };
+
+
+
+export * from './single-attribute-buffer-management';

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

@@ -0,0 +1,119 @@
+/**
+ * BufferOffsetManager
+ * Purpose: To manage the offset of the buffer. Plus extend and defrag the buffer. 
+ * ------------------------------------------------------------------------------------------------------------------------------------------- * Functions:
+ * 1. getOffet(key) : return the offset of the key if not found return false.
+ * 2. setOffset(key, offset) : set the offset of the key.
+ * 3. nextOffset() : return the next available offset if not return false.
+ * 4. delete(key) : delete the key and return true if not found return false.
+ * 5. defragBuffer(gl, buffer, bufferType, newCapacity = null) : defrag the buffer. if newCapacity is not provided the buffer is vacumed.
+ * 6. extendBuffer(gl, buffer, bufferType, newCapacity) : extend the buffer.
+ * -------------------------------------------------------------------------------------------------------------------------------------------
+ * What this class does NOT do:
+ * ADD, DELETE, READ
+ * ADD, inputs needs to be turn into a block and put into buffer. Bulk will be more performant.
+ * DELETE, might be a set to single byte to indicate the tombstone.
+ * READ, most of the time is not needed to be read, unless for defraging.
+ * This unpredicatable behavior is not handled by this class.
+ */
+
+export class BufferManager {
+    constructor(gl, itemSize, { bufferType = "STATIC_DRAW", buffer = null, initialCapacity = null } = {}) {
+        this.gl = gl;
+        this.itemSize = itemSize;
+        this.bufferType = bufferType;
+        this.buffer = buffer === null ? gl.createBuffer() : buffer;
+        if (initialCapacity !== null) this.resetWithCapacity(initialCapacity);
+    }
+
+    resetWithCapacity(capacity) {
+        const { gl, buffer, bufferType, itemSize } = this;
+        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+        gl.bufferData(gl.ARRAY_BUFFER, capacity * itemSize * 4, gl[bufferType]);
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
+    }
+
+    deleteBulk(offsets) {
+        const { gl, buffer, itemSize } = this;
+        const emptyBlock = new Float32Array(this.itemSize).fill(0)
+        const offsetMultiplier = itemSize * 4;
+        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+        for (let offset of offsets) {
+            if (offset !== undefined) {
+
+                gl.bufferSubData(gl.ARRAY_BUFFER, offset * offsetMultiplier, emptyBlock);
+            }
+        }
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
+    }
+
+
+    insertBulk(blocks, offsets) {
+        const { gl, buffer, itemSize } = this;
+        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+        const offsetMultiplier = itemSize * 4;
+        for (let i = 0; i < blocks.length; i++) {
+            const block = blocks[i];
+            const offset = offsets[i] * offsetMultiplier;
+            if (offset !== undefined) gl.bufferSubData(gl.ARRAY_BUFFER, offset, block);
+        }
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
+    }
+
+
+    // TODO: this is broken
+    defrag(offsetValues, occupiedCapacity, newCapacity) {
+        const { gl, buffer, bufferType, itemSize } = this;
+
+        const newArray = new Float32Array(newCapacity * itemSize);
+        const bufferData = this._getBufferData(occupiedCapacity);
+        console.log("bufferData", bufferData);
+        let newOffset = 0;
+        for (const offset of offsetValues) {
+            const itemOffset = offset * itemSize;
+            newArray.set(bufferData.slice(itemOffset, itemOffset + itemSize), newOffset);
+            console.log("oldOffset", itemOffset, "newOffset", newOffset);
+            newOffset += itemSize;
+        }
+
+        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+        gl.bufferData(gl.ARRAY_BUFFER, newCapacity * itemSize * 4, gl[bufferType]);
+        gl.bufferSubData(gl.ARRAY_BUFFER, 0, newArray);
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
+
+    }
+
+    extendBuffer(occupiedCapacity, newCapacity) {
+        const { gl, buffer, bufferType } = this;
+        const itemSize = this.itemSize;
+        const bufferData = this._getBufferData(occupiedCapacity);
+        console.log("extending buffer from", occupiedCapacity, "to", newCapacity, 'item size', itemSize);
+        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+        gl.bufferData(gl.ARRAY_BUFFER, newCapacity * itemSize * 4, gl[bufferType]);
+        gl.bufferSubData(gl.ARRAY_BUFFER, 0, bufferData);
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
+    }
+
+    _getBufferData(occupiedCapacity) {
+        const { gl, buffer } = this;
+        console.log(occupiedCapacity, this.itemSize)
+        const size = occupiedCapacity * this.itemSize;
+        console.log("size", 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;
+    }
+
+    free() {
+        if (this.isFreed) return;
+        this.gl.deleteBuffer(this.buffer);
+        this.buffer = null;
+        this.gl = null;
+        this.isFreed = true;
+    }
+}
+
+
+