@pirireis/webglobeplugins 0.0.4 → 0.0.6

package/rangerings/rangerings.js

@@ -1,5 +1,6 @@
 import { rings } from "../programs";
 
+import { PaddingFreeAngleCache } from "../programs/rings/distancering";
 const { CircleFlatProgram, PaddyFlatProgram, CirclePaddySharedBuffer } = rings;
 
 
@@ -16,27 +17,31 @@ const { CircleFlatProgram, PaddyFlatProgram, CirclePaddySharedBuffer } = rings;
  * 
  */
 
-/**
- * TODO: Tasarim dusunceleri
- * Static Dynamic icin farkli pluginler olusturulabilir. 
- * Boylelikle bir pluginin iki bufferManageri yonetmesi gerekmez. 
- */
+
+export const ENUM_HIDE = Object.freeze({ SHOW: 0, HIDE: 1, HIDE_1_DEGREE_PADDINGS: 2 });
+
 
 export default class {
 
-    constructor(id, padCount = 12, compass = 1, circleEdgeCount = 72) {
+    constructor(id, paddingOn = true, compass = 1, circleEdgeCount = 360) {
         this.id = id;
         this.compass = compass;
-        this.padCount = padCount;
         this.circleEdgeCount = circleEdgeCount;
+        this._paddingOn = paddingOn;
         this.bufferManager = null;
     }
 
+    setPaddingOn(paddingOn) {
+        this._paddingOn = paddingOn;
+    }
+
     init(globe, gl) {
         this.gl = gl;
         this.globe = globe;
         this.circleFlatProgram = new CircleFlatProgram(globe, gl);
         this.paddyFlatProgram = new PaddyFlatProgram(globe, gl);
+
+        this.paddingFreeAngleProgram = PaddingFreeAngleCache.getProgram(globe);
     }
 
     free() {
@@ -49,14 +54,16 @@ export default class {
 
 
     draw3D() {
-        const { circleFlatProgram, paddyFlatProgram, padCount, bufferManager, compass, gl, circleEdgeCount } = this;
+        const { circleFlatProgram, paddyFlatProgram, padCount, paddingFreeAngleProgram, bufferManager, compass, gl, circleEdgeCount, paddingBufferManager } = this;
         // if (globe.api_GetCurrentGeometry() === 0) return; // do not draw in 3D mode
         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);
             circleFlatProgram.draw(bufferManager, compass, circleEdgeCount);
-            paddyFlatProgram.draw(bufferManager, padCount, compass);
+            if (this._paddingOn) paddyFlatProgram.draw(bufferManager, 360, compass);
+            paddingFreeAngleProgram.draw(paddingBufferManager, compass);
+
             gl.enable(gl.DEPTH_TEST);
         }
     }
@@ -77,12 +84,84 @@ export default class {
     initilizeBufferManager(initialRingCapacity, bufferDrawType) {
         const { gl, globe } = this
         this.bufferDrawType = bufferDrawType;
-        this.bufferManager = new CirclePaddySharedBuffer(gl, globe, { bufferType: this.bufferDrawType, initialRingCapacity: initialRingCapacity });
-        return this.bufferManager;
+        this.bufferManager = new CirclePaddySharedBuffer(gl, globe, { bufferType: bufferDrawType, initialRingCapacity: initialRingCapacity });
+        this.paddingBufferManager = this.paddingFreeAngleProgram.initilizeBufferManager({ bufferType: bufferDrawType, initialRingCapacity });
     }
 
-    getBufferManager() {
-        return this.bufferManager;
+    // getBufferManager() {
+    //     return this.bufferManager;
+    // }
+
+
+
+    /**
+     * @typedef {Array<{ringID, radius, paddingRange}>} rings
+     * @param {Array<centerID:string, x:number, y:number, paddingAngles:Array<number>, rgba:[4number], rings:rings} items
+     */
+    insertBulk(items) {
+        const insertData = ringItemsToCircleBufferInsertDataAdaptor(items);
+
+        this.bufferManager.insertBulk(insertData);
+        this.paddingBufferManager.insertBulk(items);
+        this.globe.DrawRender();
     }
 
-}
+
+    updateCentersXY(items) {
+        this.bufferManager.updateCentersXY(items);
+        this.paddingBufferManager.updateCentersXY(items);
+        this.globe.DrawRender();
+    }
+
+
+    updateCentersColor(centerColors) {
+        this.bufferManager.updateCentersColor(centerColors);
+        this.paddingBufferManager.updateCentersColor(centerColors);
+        this.globe.DrawRender();
+    }
+
+
+    // TODO: test
+    removeCenters(centerIds) {
+
+        this.bufferManager.removeCenters(centerIds);
+        this.paddingBufferManager.removeCenters(centerIds);
+        // this.bufferManager.defrag();
+        // this.paddingBufferManager.defrag();
+        this.globe.DrawRender();
+
+    }
+
+    //TODO: test
+    updateCentersHide(centerHides) {
+        this.bufferManager.updateCentersHide(centerHides);
+        this.paddingBufferManager.updateCentersHide(centerHides);
+        this.globe.DrawRender();
+    }
+}
+
+
+const ringItemsToCircleBufferInsertDataAdaptor = (ringItems) => {
+
+    const result = [];
+    for (const { centerID, x, y, paddingAngles, rgba, rings, hide = 0 } of ringItems) {
+        const resultRings = [];
+        for (const { ringID, radius, padding } of rings) {
+            resultRings.push({
+                ringID,
+                radius,
+                padding: padding / 7,
+                rgba,
+                hide
+            });
+        }
+
+        result.push({
+            centerID,
+            x,
+            y,
+            rings: resultRings
+        });
+    }
+    return result;
+};

package/util/account/bufferoffsetmanager.js

@@ -0,0 +1,179 @@
+/**
+ * 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;
+        }
+    }
+
+
+
+    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.offSetMap = newOffSetMap;
+    }
+
+
+    extendBuffer(gl, buffer, bufferType, newCapacity) {
+        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, gl, buffer) {
+        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+        const partStart = partOffset * 4;
+        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);
+    }
+}
+
+
+

package/util/account/index.js

@@ -0,0 +1,3 @@
+import BufferOffsetManager from './bufferoffsetmanager.js';
+
+export { BufferOffsetManager };

package/util/shaderfunctions/geometrytransformations.js

@@ -21,7 +21,7 @@ export const PI = `
 #endif
 `;
 
-export const POLE_BY_PI = `
+export const POLE_BY_PI = ` 
 #ifndef POLE_BY_PI
 #define POLE_BY_PI 6378136.99911
 #endif
@@ -29,7 +29,7 @@ export const POLE_BY_PI = `
 
 export const R_3D = `
 #ifndef R_3D
-#define R_3D 6378.137
+#define R_3D 6378.137699911
 #endif
 `;