@pirireis/webglobeplugins 0.15.34 → 0.16.0

package/util/account/bufferoffsetmanager.js

@@ -1,176 +1,209 @@
-/**
- * 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 default class {
-    constructor(itemSize, { capacity = 10, bufferType = "STATIC_DRAW" } = {}) {
-        this.itemSize = itemSize;
-        this.bufferType = bufferType;
-        this.offSetMap = new Map();
-        this.tombstoneOffSet = [];
-        this._capacity = capacity;
-        this._length = 0;
-    }
-    get length() {
-        return this._length;
-    }
-    get capacity() {
-        return this._capacity;
-    }
-    getOffset(key) {
-        return this.offSetMap.get(key);
-    }
-    setOffset(key, offset) {
-        this.offSetMap.set(key, offset);
-    }
-    nextOffset() {
-        if (this.tombstoneOffSet.length > 0) {
-            const offset = this.tombstoneOffSet.pop();
-            return offset;
-        }
-        if (this._length < this._capacity) {
-            return this._length++ * this.itemSize * 4;
-        }
-        return false;
-    }
-    get spaceLeft() {
-        return this._capacity - (this._length - this.tombstoneOffSet.length);
-    }
-    get itemCount() {
-        return this._length - this.tombstoneOffSet.length;
-    }
-    deleteFromAccount(key) {
-        const offSet = this.offSetMap.get(key);
-        if (offSet !== undefined) {
-            this.tombstoneOffSet.push(offSet);
-            this.offSetMap.delete(key);
-            return true;
-        }
-        else {
-            return false;
-        }
-    }
-    _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() {
-        return this.offSetMap.entries();
-    }
-    // TODO: this is broken
-    defrag(newCapacity = null) {
-        const { gl, buffer, bufferType } = this;
-        if (gl === undefined || buffer === undefined || bufferType === undefined) {
-            throw new Error("gl, buffer, bufferType are required");
-        }
-        const itemSize = this.itemSize;
-        const itemCount = this.itemCount;
-        const capacity = (newCapacity && newCapacity > itemCount) ? newCapacity : itemCount;
-        const newArray = new Float32Array(itemCount * itemSize);
-        const bufferData = this._getBufferData();
-        let newOffSet = 0;
-        const newOffSetMap = new Map();
-        for (const [key, offSet] of this.offSetMap) {
-            const itemOffSet = offSet / 4;
-            newArray.set(bufferData.slice(itemOffSet, itemOffSet + itemSize), newOffSet);
-            // this.offSetMap.set(key, newOffSet * 4);
-            newOffSetMap.set(key, newOffSet * 4);
-            newOffSet += itemSize;
-        }
-        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
-        gl.bufferData(gl.ARRAY_BUFFER, capacity * itemSize * 4, gl[bufferType]);
-        gl.bufferSubData(gl.ARRAY_BUFFER, 0, newArray);
-        gl.bindBuffer(gl.ARRAY_BUFFER, null);
-        this._capacity = capacity;
-        this.tombstoneOffSet = [];
-        this._length = itemCount;
-        this.offSetMap = newOffSetMap;
-    }
-    autoExtendBuffer(payloadSize) {
-        if (payloadSize <= this.spaceLeft)
-            return;
-        const newCapacity = Math.ceil((payloadSize + this.length));
-        this.extendBuffer(newCapacity);
-    }
-    extendBuffer(newCapacity) {
-        const { gl, buffer, bufferType } = this;
-        const itemSize = this.itemSize;
-        const bufferData = this._getBufferData();
-        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);
-        this._capacity = newCapacity;
-    }
-    /** implicit methods to be used by the child class */
-    /**
-     * @typedef {Float32Array} payload
-     * @param {Array<{key, payload}>} items
-     * @param {number} partOffset
-     * @returns
-     */
-    _updatePartial(items, partOffset) {
-        const { gl, buffer } = this;
-        const partStart = partOffset * 4;
-        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
-        for (let { key, payload } of items) {
-            let offset = this.getOffset(key);
-            if (offset !== undefined) {
-                gl.bufferSubData(gl.ARRAY_BUFFER, offset + partStart, payload);
-            }
-        }
-        gl.bindBuffer(gl.ARRAY_BUFFER, null);
-    }
-    _getBufferData() {
-        const { gl, buffer } = this;
-        const size = new Float32Array(this.length * this.itemSize);
-        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;
-    }
-    _removeFromBuffer(keys) {
-        const { gl, buffer } = this;
-        const emptyBlock = new Float32Array(this.itemSize).fill(0);
-        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
-        for (let key of keys) {
-            let offset = this.getOffset(key);
-            if (offset !== undefined) {
-                this.deleteFromAccount(key);
-                gl.bufferSubData(gl.ARRAY_BUFFER, offset, emptyBlock);
-            }
-        }
-        gl.bindBuffer(gl.ARRAY_BUFFER, null);
-    }
-    free() {
-        this.gl.deleteBuffer(this.buffer);
-        this.buffer = null;
-        this.vao = null;
-        this.gl = null;
-    }
-}
+/**
+ * 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 default class {
+    constructor(itemSize, { capacity = 10, bufferType = "STATIC_DRAW" } = {}) {
+        this.itemSize = itemSize;
+        this.bufferType = bufferType;
+        this.offSetMap = new Map();
+        this.tombstoneOffSet = [];
+        this._capacity = capacity;
+        this._length = 0;
+    }
+
+    get length() {
+        return this._length;
+    }
+
+    get capacity() {
+        return this._capacity;
+    }
+
+
+    getOffset(key) {
+        return this.offSetMap.get(key);
+    }
+
+    setOffset(key, offset) {
+        this.offSetMap.set(key, offset);
+    }
+
+    nextOffset() {
+        if (this.tombstoneOffSet.length > 0) {
+            const offset = this.tombstoneOffSet.pop();
+            return offset;
+        }
+        if (this._length < this._capacity) {
+            return this._length++ * this.itemSize * 4;
+        }
+        return false;
+    }
+
+    get spaceLeft() {
+        return this._capacity - (this._length - this.tombstoneOffSet.length);
+    }
+
+    get itemCount() {
+        return this._length - this.tombstoneOffSet.length;
+    }
+
+    deleteFromAccount(key) {
+        const offSet = this.offSetMap.get(key);
+        if (offSet !== undefined) {
+            this.tombstoneOffSet.push(offSet);
+            this.offSetMap.delete(key);
+            return true;
+        } else {
+            return false;
+        }
+    }
+
+    _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();
+    }
+
+    // TODO: this is broken
+    defrag(newCapacity = null) {
+        const { gl, buffer, bufferType } = this;
+        if (gl === undefined || buffer === undefined || bufferType === undefined) {
+            throw new Error("gl, buffer, bufferType are required");
+        }
+        const itemSize = this.itemSize;
+        const itemCount = this.itemCount;
+        const capacity = (newCapacity && newCapacity > itemCount) ? newCapacity : itemCount;
+
+        const newArray = new Float32Array(itemCount * itemSize);
+
+        const bufferData = this._getBufferData();
+        let newOffSet = 0;
+        const newOffSetMap = new Map();
+        for (const [key, offSet] of this.offSetMap) {
+            const itemOffSet = offSet / 4;
+            newArray.set(bufferData.slice(itemOffSet, itemOffSet + itemSize), newOffSet);
+            // this.offSetMap.set(key, newOffSet * 4);
+            newOffSetMap.set(key, newOffSet * 4);
+            newOffSet += itemSize;
+        }
+
+        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+        gl.bufferData(gl.ARRAY_BUFFER, capacity * itemSize * 4, gl[bufferType]);
+        gl.bufferSubData(gl.ARRAY_BUFFER, 0, newArray);
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
+
+        this._capacity = capacity;
+        this.tombstoneOffSet = [];
+        this._length = itemCount;
+        this.offSetMap = newOffSetMap;
+    }
+
+    autoExtendBuffer(payloadSize) {
+        if (payloadSize <= this.spaceLeft) return;
+        const newCapacity = Math.ceil((payloadSize + this.length));
+        this.extendBuffer(newCapacity);
+    }
+
+
+
+    extendBuffer(newCapacity) {
+        const { gl, buffer, bufferType } = this;
+        const itemSize = this.itemSize;
+        const bufferData = this._getBufferData();
+        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);
+        this._capacity = newCapacity;
+    }
+
+
+
+    /** implicit methods to be used by the child class */
+
+    /**
+     * @typedef {Float32Array} payload
+     * @param {Array<{key, payload}>} items
+     * @param {number} partOffset
+     * @returns 
+     */
+    _updatePartial(items, partOffset) {
+        const { gl, buffer } = this;
+        const partStart = partOffset * 4;
+        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+        for (let { key, payload } of items) {
+            let offset = this.getOffset(key);
+            if (offset !== undefined) {
+                gl.bufferSubData(gl.ARRAY_BUFFER, offset + partStart, payload);
+            }
+        }
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
+    }
+
+    _getBufferData() {
+        const { gl, buffer } = this;
+        const size = new Float32Array(this.length * this.itemSize);
+        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;
+    }
+
+
+    _removeFromBuffer(keys) {
+        const { gl, buffer } = this;
+        const emptyBlock = new Float32Array(this.itemSize).fill(0)
+        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+        for (let key of keys) {
+            let offset = this.getOffset(key);
+            if (offset !== undefined) {
+                this.deleteFromAccount(key);
+                gl.bufferSubData(gl.ARRAY_BUFFER, offset, emptyBlock);
+            }
+        }
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
+    }
+
+
+
+
+    free() {
+        this.gl.deleteBuffer(this.buffer);
+        this.buffer = null;
+        this.vao = null;
+        this.gl = null;
+    }
+}
+
+
+

package/util/account/create-buffermap-orchastration.ts

@@ -0,0 +1,85 @@
+// IN construction
+
+
+import { BufferManagersMap } from "./single-attribute-buffer-management/types";
+import { BufferManager } from "./single-attribute-buffer-management/buffer-manager";
+import { BufferOrchestrator } from "./single-attribute-buffer-management/buffer-orchestrator";
+
+
+
+export type BufferDetails = {
+    bufferType: "STATIC_DRAW" | "DYNAMIC_DRAW" | "STREAM_DRAW";
+    itemSize: number;
+    adaptor: (x: any) => Float32Array;
+}
+
+
+export type BufferDetailsMap = Map<string, BufferDetails>;
+
+
+export class BufferMapOrchestrator {
+    gl: WebGL2RenderingContext;
+    bufferManagersMap: BufferManagersMap;
+    bufferOrchestrator: BufferOrchestrator;
+
+
+
+    constructor(
+        gl: WebGL2RenderingContext,
+        bufferDetailsMap: BufferDetailsMap,
+        initialCapacity: number = 10
+    ) {
+        this.gl = gl;
+        this.bufferManagersMap = new Map();
+        this.bufferOrchestrator = new BufferOrchestrator({ capacity: 10 });
+
+        for (const [key, details] of bufferDetailsMap) {
+            const { itemSize, bufferType, adaptor } = details;
+            const bufferManager = new BufferManager(gl, itemSize, { bufferType, initialCapacity });
+            this.bufferManagersMap.set(key, { bufferManager, adaptor });
+        }
+
+
+    }
+
+
+    insertBulk<T>(items: T[]): void {
+        // @ts-ignore
+        this.bufferOrchestrator.insertBulk(
+            items,
+            this.bufferManagersMap
+        );
+    }
+
+
+    updateBulk<T>(items: T[], bufferKeys: string[] = []): void {
+        // @ts-ignore
+        this.bufferOrchestrator.updateBulk(
+            items,
+            this.bufferManagersMap,
+            bufferKeys
+        );
+    }
+
+
+    deleteBulk(keys: string[]): void {
+        // @ts-ignore
+        this.bufferOrchestrator.deleteBulk(
+            keys,
+            this.bufferManagersMap
+        );
+    }
+
+
+    resetWithCapacity(capacity: number): void {
+        this.bufferOrchestrator.resetWithCapacity(this.bufferManagersMap, capacity);
+    }
+
+
+    free(): void {
+        for (const [key, { bufferManager }] of this.bufferManagersMap) {
+            bufferManager.free();
+        }
+        this.bufferManagersMap.clear();
+    }
+}

package/util/account/index.js

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

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

@@ -0,0 +1,149 @@
+/**
+ * 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.
+ */
+
+
+import { TypedArray } from "../../../types"
+
+
+
+type BufferManagerOptions = {
+    bufferType?: string;
+    buffer?: WebGLBuffer | null;
+    initialCapacity?: number;
+};
+
+
+export class BufferManager {
+    gl: WebGL2RenderingContext;
+    buffer: WebGLBuffer;
+    itemSize: number;
+    bufferType: string;
+    isFreed: boolean = false;
+
+    constructor(gl: WebGL2RenderingContext, itemSize: number, { bufferType = "STATIC_DRAW", buffer = null, initialCapacity = 10 }: BufferManagerOptions = {}) {
+        this.gl = gl;
+        this.itemSize = itemSize;
+        this.bufferType = bufferType;
+        this.buffer = buffer === null ? gl.createBuffer() : buffer;
+        this.resetWithCapacity(initialCapacity);
+    }
+
+    resetWithCapacity(capacity: number) {
+        const { gl, buffer, bufferType, itemSize } = this;
+        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+        // @ts-ignore
+        gl.bufferData(gl.ARRAY_BUFFER, capacity * itemSize * 4, gl[bufferType]);
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
+    }
+
+    deleteBulk(offsets: number[]) {
+        const { gl, buffer, itemSize } = this;
+        const emptyBlock = new Float32Array(this.itemSize).fill(NaN)
+        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: any[], offsets: number[]) {
+        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);
+    }
+
+
+
+    insertBlock<T extends TypedArray>(
+        items: any[],
+        offset: number,
+        adapter: (item: any) => ArrayLike<number>,
+        Constructor: { new(length: number): T } = Float32Array as any
+    ) {
+        const { gl, buffer, itemSize } = this;
+        const cpuBuffer = new Constructor(itemSize * items.length);
+        for (let i = 0; i < items.length; i++) {
+            cpuBuffer.set(adapter(items[i]), i * itemSize);
+        }
+        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+        gl.bufferSubData(gl.ARRAY_BUFFER, offset * itemSize * 4, cpuBuffer as ArrayBufferView);
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
+    }
+
+
+    // TODO: this is broken
+    defrag(offsetValues: MapIterator<number> | number[], occupiedCapacity: number, newCapacity: number) {
+        const { gl, buffer, bufferType, itemSize } = this;
+
+        const newArray = new Float32Array(newCapacity * itemSize);
+        const bufferData = this._getBufferData(occupiedCapacity);
+        let newOffset = 0;
+        for (const offset of offsetValues) {
+            const itemOffset = offset * itemSize;
+            newArray.set(bufferData.slice(itemOffset, itemOffset + itemSize), newOffset);
+            newOffset += itemSize;
+        }
+
+        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+        // @ts-ignore
+        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: number, newCapacity: number) {
+        const { gl, buffer, bufferType } = this;
+        const itemSize = this.itemSize;
+        const bufferData = this._getBufferData(occupiedCapacity);
+        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+        // @ts-ignore
+        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: number): Float32Array {
+        const { gl, buffer } = this;
+        const size = occupiedCapacity * this.itemSize;
+        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;
+    }
+}