@pirireis/webglobeplugins 0.1.9 → 0.1.10

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@pirireis/webglobeplugins",
-    "version": "0.1.9",
+    "version": "0.1.10",
     "main": "index.js",
     "author": "Toprak Nihat Deniz Ozturk",
     "license": "MIT"

package/partialrings/plugin.js

@@ -117,7 +117,7 @@ class BufferManager extends BufferOffsetManager {
      */
     insertRings(rings) {
         if (rings.length === 0) return;
-        this._autoExtendBuffer(rings.length);
+        this.autoExtendBuffer(rings.length);
         const { gl, buffer } = this;
         gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
         for (let { key, center, startAngle, tailAngle, color, radius, colorMode } of rings) {
@@ -156,12 +156,7 @@ class BufferManager extends BufferOffsetManager {
         this.globe.DrawRender();
     }
 
-    _autoExtendBuffer(payloadSize) {
-        const { gl, buffer, bufferType, extendRatio } = this;
-        if (payloadSize <= this.spaceLeft) return;
-        const newCapacity = Math.ceil((payloadSize + this.length) * extendRatio);
-        this.extendBuffer(gl, buffer, bufferType, newCapacity);
-    }
+
 
 
     free() {

package/partialrings/program.js

@@ -241,5 +241,5 @@ export class Logic {
 
 export const programCache = Object.freeze({
     get: (globe) => noRegisterGlobeProgramCache.getProgram(globe, Logic),
-    free: (globe) => noRegisterGlobeProgramCache.releaseProgram(globe, Logic)
+    release: (globe) => noRegisterGlobeProgramCache.releaseProgram(globe, Logic)
 });

package/programs/line-on-globe/index.js

@@ -0,0 +1 @@
+import { LineOnGlobeCache } from './program.js';

package/programs/line-on-globe/program.js

@@ -1,9 +1,9 @@
 import { CameraUniformBlockString, CameraUniformBlockTotem } from "../totems";
-import { longLatRadToMercator, longLatRadToCartesian3D, cartesian3DToGLPosition, mercatorXYTo2DPoint } from "../shaderfunctions/geometrytransformations";
-import { createProgram } from "../webgl/program";
+import { longLatRadToMercator, longLatRadToCartesian3D, cartesian3DToGLPosition, mercatorXYTo2DPoint } from "../../util/shaderfunctions/geometrytransformations";
+import { createProgram } from "../../util";
 import { noRegisterGlobeProgramCache, globeProgramCache } from "../programcache";
-import { BufferOffsetManger } from "../../util/account";
-
+import BufferOffsetManger from "../../util/account/bufferoffsetmanager";
+const Radian = Math.PI / 180.0;
 const GLOBE_MIDPOINT_COUNT = 100;
 const ITEM_SIZE = 8;
 
@@ -25,8 +25,8 @@ void main() {
     vec2 longLat;
     if (is3D) {
         float interpolation = float(gl_VertexID) / ${GLOBE_MIDPOINT_COUNT}.0;
-        longLat = mix(start_position, end_position, interpolation)
-        vec3 cartesian = longLatRadToMercator(longLat);
+        longLat = mix(start_position, end_position, interpolation);
+        vec3 cartesian = longLatRadToCartesian3D(longLat);
         gl_Position = cartesian3DToGLPosition(cartesian);
     } else {
         if ( gl_VertexID == 0 ) {
@@ -55,61 +55,196 @@ class Logic {
 
     constructor(globe) {
         this.globe = globe;
-        this.gl = gl;
-        this.program = createProgram(gl, vertexShader, fragmentShader);
+        this.gl = globe.gl;
+        this.program = createProgram(this.gl, vertexShader, fragmentShader);
         const { gl, program } = this;
         {
             // assign attribute locations
             gl.bindAttribLocation(program, 0, "start_position");
             gl.bindAttribLocation(program, 1, "end_position");
             gl.bindAttribLocation(program, 2, "color");
-
         }
 
 
         this.cameraBlockBindingPoint = 0;
         const cameraBlockIndex = this.gl.getUniformBlockIndex(this.program, "CameraUniformBlock");
         this.cameraBlockTotem = globeProgramCache.getProgram(globe, CameraUniformBlockTotem);
+        gl.uniformBlockBinding(this.program, cameraBlockIndex, this.cameraBlockBindingPoint);
+
 
     }
 
 
     draw(bufferManager) {
-
+        const { gl, program, globe } = this;
+        gl.useProgram(program);
+        const { cameraBlockTotem, cameraBlockBindingPoint } = this;
+        cameraBlockTotem.bind(cameraBlockBindingPoint);
+        gl.bindVertexArray(bufferManager.vao);
+        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.bindVertexArray(null);
+        cameraBlockTotem.unbind(cameraBlockBindingPoint);
     }
 
 
-
+    createBufferManager({ capacity = 10, bufferType = "DYNAMIC_DRAW" } = {}) {
+        return new BufferManager(this.globe, { capacity, bufferType });
+    }
 }
 
 
 class BufferManager extends BufferOffsetManger {
 
-    constructor(gl, { capacity = 10, bufferType = "DYNAMIC_DRAW" } = {}) {
+    constructor(globe, { capacity = 10, bufferType = "DYNAMIC_DRAW" } = {}) {
         super(ITEM_SIZE, { capacity, bufferType });
-        this.gl = gl;
-        this.buffer = gl.createBuffer();
+        this.globe = globe
+        this.gl = globe.gl;
+        this.buffer = this.gl.createBuffer();
 
         const { gl, buffer } = this;
         gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
-        gl.bufferData(gl.ARRAY_BUFFER, _capacity * ITEM_SIZE * 4, gl[bufferType]);
+        gl.bufferData(gl.ARRAY_BUFFER, capacity * ITEM_SIZE * 4, gl[bufferType]);
         gl.bindBuffer(gl.ARRAY_BUFFER, null);
 
         this.vao = gl.createVertexArray();
         {
-
+            gl.bindVertexArray(this.vao);
+            gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+            gl.enableVertexAttribArray(0);
+            gl.vertexAttribPointer(0, 2, gl.FLOAT, false, ITEM_SIZE * 4, 0);
+            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.vertexAttribDivisor(0, 1);
+            gl.vertexAttribDivisor(1, 1);
+            gl.vertexAttribDivisor(2, 1);
+            gl.bindVertexArray(null);
         }
     }
 
+
+    /**
+     * 
+     * @param {Array<{key:string, startLong:number, startLat: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) {
+            const payload = new Float32Array([
+                Radian * startLong,
+                Radian * startLat,
+                Radian * endLong,
+                Radian * endLat,
+                ...rgba]);
+            const offset = this.getOffset(key) | this.nextOffset();
+            gl.bufferSubData(gl.ARRAY_BUFFER, offset, payload);
+            this.setOffset(key, offset);
+        }
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
+        globe.DrawRender();
+    }
 
+    /**
+     * 
+     * @param {Array<{key:string, startLong:number, startLat: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) {
+            const payload = new Float32Array([
+                Radian * startLong,
+                Radian * startLat,
+                Radian * endLong,
+                Radian * endLat,
+                ...rgba]);
+            const offset = this.getOffset(key);
+            if (offset !== undefined) {
+                gl.bufferSubData(gl.ARRAY_BUFFER, offset, payload);
+            } else {
+                console.warn("key not found", key);
+            }
+        }
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
+        globe.DrawRender();
     }
-}
 
+    /**
+     * 
+     * @param {Array<{key:string, startLong:number, startLat: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) {
+            const payload = new Float32Array([
+                Radian * startLong,
+                Radian * startLat,
+                Radian * endLong,
+                Radian * endLat]);
+            const offset = this.getOffset(key);
+            if (offset !== undefined) {
+                gl.bufferSubData(gl.ARRAY_BUFFER, offset, payload);
+            } else {
+                console.warn("key not found", key);
+            }
+        }
+        globe.DrawRender();
+    }
+
+
+    /**
+     * 
+     * @param {Array<{key:string, rgba:[4numbers] }} items 
+     */
+    updateColorBulk(items) {
+        const { gl, buffer, globe } = this;
+        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+        for (let { key, rgba } of items) {
+            const payload = new Float32Array([...rgba]);
+            const offset = this.getOffset(key);
+            if (offset !== undefined) {
+                gl.bufferSubData(gl.ARRAY_BUFFER, offset + 16, payload);
+            } else {
+                console.warn("key not found", key);
+            }
+        }
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
+        globe.DrawRender();
+    }
+
+
+    /**
+     * 
+     * @param {Array<string>} keys 
+     */
+    deleteBulk(keys) {
+        const { gl, buffer, globe } = this;
+        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+        const emptyBlock = new Float32Array(ITEM_SIZE).fill(0);
+        for (let key of keys) {
+            const offset = this.getOffset(key);
+            if (offset !== undefined) {
+                this.deleteFromAccount(key);
+                gl.bufferSubData(gl.ARRAY_BUFFER, offset, emptyBlock);
+            } else {
+                console.warn("key not found", key);
+            }
+        }
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
+        globe.DrawRender();
+    }
+}
 
 
-export const programCache = Object.freeze({
+export const LineOnGlobeCache = Object.freeze({
     get: (globe) => { return noRegisterGlobeProgramCache.getProgram(globe, Logic) },
-    release: (globe) => { noRegisterGlobeProgramCache.releaseProgram(globe, Logic) }
+    free: (globe) => { return noRegisterGlobeProgramCache.releaseProgram(globe, Logic) }
 });
 

package/rangerings/rangerings.js

@@ -31,6 +31,9 @@ export default class {
         this.circleEdgeCount = 360;
         this._onedegreepaddingOn = oneDegreePadding;
         this.bufferManager = null;
+
+        this._deleteCounter = 0;
+        this._deleteThreshold = 10;
     }
 
 
@@ -157,8 +160,14 @@ export default class {
         this.bufferManager.removeCenters(centerIds);
         this.paddingBufferManager.removeCenters(centerIds);
         this.textPlugin?.removeCenters(centerIds);
-        // this.bufferManager.defrag();
-        // this.paddingBufferManager.defrag();
+        this._deleteCounter += centerIds.length;
+        if (this._deleteCounter > this._deleteThreshold) {
+            // this is naive since we are not checking the actual deletion
+            // but it works
+            this._deleteCounter = 0;
+            this.bufferManager.defrag();
+            this.paddingBufferManager.defrag();
+        }
         this.globe.DrawRender();
 
     }

package/util/account/bufferoffsetmanager.js

@@ -90,7 +90,7 @@ 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,6 +98,7 @@ 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);
@@ -112,9 +113,16 @@ export default class {
 
         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;
@@ -161,7 +169,6 @@ export default class {
     }
 
 
-
     _removeFromBuffer(keys) {
         const { gl, buffer } = this;
         const emptyBlock = new Float32Array(this.itemSize).fill(0)
@@ -175,6 +182,14 @@ 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;
+    }
 }