@pirireis/webglobeplugins 0.1.9 → 0.2.0

package/bearing-line/plugin.js

@@ -0,0 +1,151 @@
+import { programCache as ringProgramCache } from '../partialrings/program';
+import { LineOnGlobeCache } from '../programs/line-on-globe/naive';
+
+export const RINGPARTIAL_DRAW_MODE = Object.freeze({
+    LINE_STRIP: "LINE_STRIP",
+    TRIANGLE_FAN: "TRIANGLE_FAN",
+});
+
+export default class Plugin {
+
+    constructor(id, { opacity = 1 } = {}) {
+        this.id = id;
+        this._opacity = opacity;
+    }
+
+    setOpacity(opacity) {
+        this._opacity = opacity;
+        this.globe.DrawRender();
+    }
+
+    init(globe, gl) {
+        this.gl = gl;
+        this.globe = globe;
+        this.lineProgram = LineOnGlobeCache.get(globe);
+        this.ringProgram = ringProgramCache.get(globe);
+        this.lineBufferManager = this.lineProgram.createBufferManager();
+        const { bufferManager, vao } = this.ringProgram.getBufferManagerAndVao();
+        this.ringBufferManager = bufferManager;
+        this.ringVao = vao;
+    }
+
+
+    draw3D() {
+        // vao, edgeCount, alphaMultiplier, drawMode,
+        this.lineProgram.draw(this.lineBufferManager.vao, this.lineBufferManager.length, this._opacity);
+        //bufferManager, vao, edgeCount, alphaMultiplier, drawMode
+        this.gl.disable(this.gl.DEPTH_TEST);
+        this.ringProgram.draw(this.ringBufferManager.length, this.ringVao, 32, this._opacity * 0.9, RINGPARTIAL_DRAW_MODE.TRIANGLE_FAN);
+        this.ringProgram.draw(this.ringBufferManager.length, this.ringVao, 32, this._opacity, RINGPARTIAL_DRAW_MODE.LINE_STRIP);
+        this.gl.enable(this.gl.DEPTH_TEST);
+    }
+
+
+    /**
+     * 
+     * @param {Array<{key, long, lat, endLong, endLat, bearingAngle, radius,  rgba:[4numbers]}>} items 
+     */
+
+    insertBulk(items) {
+        for (let item of items) {
+            const { lat, long, endLat, endLong, radius = null, rgbaMode = null, bearingAngle = 0 } = item;
+            item.long = radian(long);
+            item.lat = radian(lat);
+            item.endLong = radian(endLong);
+            item.endLat = radian(endLat);
+            if (radius === null) {
+                item.radius = 100000;
+            }
+            if (rgbaMode === null) {
+                item.rgbaMode = 0;
+            }
+            const startAngle = calculateStartAngle(item.long, item.lat, item.endLong, item.endLat);
+
+            item.startAngle = startAngle;
+            const shaderBearingAngle = radian(bearingAngle - 90);
+            item.tailAngle = shaderBearingAngle - startAngle;
+        }
+        this.lineBufferManager.insertBulk(items);
+        this.ringBufferManager.insertBulk(items);
+        this.globe.DrawRender();
+    }
+
+    /**
+     * 
+     * @param {Array<{key, long, lat, endLong, endLat, bearingAngle, rgba:[4numbers], colorMode}>} items // TIDI
+     */
+    updateBulk(items) { //TODO
+        this.lineBufferManager.updateBulk(items);
+        for (let item of items) {
+            const { long, lat, endLong, endLat } = item;
+            item.long = radian(long);
+            item.lat = radian(lat);
+            item.endLong = radian(endLong);
+            item.endLat = radian(endLat);
+            const startAngle = calculateStartAngle(item.long, item.lat, item.endLong, item.endLat);
+            item.startAngle = startAngle;
+        }
+        this.ringBufferManager.updateBulk(items);
+        this.globe.DrawRender();
+    }
+
+
+    deleteBulk(keys) {
+        this.lineBufferManager.deleteBulk(keys);
+        this.ringBufferManager.deleteBulk(keys);
+        this.globe.DrawRender();
+    }
+
+
+    defrag() {
+        this.lineBufferManager.defrag();
+        this.ringBufferManager.defrag();
+        this.globe.DrawRender();
+    }
+
+    /**
+     * 
+     * @param {Array<{key, long, lat, endLong, endLat, bearing}>} items // TODO
+     */
+    updateCoordinatesBulk(items) { //TODO
+        for (let item of items) {
+            const { long, lat, endLong, endLat, bearingAngle } = item;
+            item.long = radian(long);
+            item.lat = radian(lat);
+            item.endLong = radian(endLong);
+            item.endLat = radian(endLat);
+            const startAngle = calculateStartAngle(item.long, item.lat, item.endLong, item.endLat);
+            item.startAngle = startAngle;
+            item.tailAngle = radian(bearingAngle - 90) - startAngle;
+        }
+        this.ringBufferManager.updateCenterAndAngleBulk(items);
+        this.lineBufferManager.updateCoordinatesBulk(items);
+        this.globe.DrawRender();
+    }
+
+    //TODO free
+    free() {
+        if (this.isFreed) return;
+        this.lineBufferManager.free();
+        this.ringBufferManager.free();
+        LineOnGlobeCache.free(this.globe);
+        ringProgramCache.free(this.globe);
+        this.isFreed = true;
+    }
+}
+
+
+const radian = (degree) => degree * Math.PI / 180;
+
+const integralSec = (angle) => {
+    return Math.log(Math.tan(angle / 2 + Math.PI / 4));
+}
+
+const calculateStartAngle = (long, lat, endLong, endLat) => {
+    const dLat = (integralSec(endLat) - integralSec(lat)); // Because lines are strectes toward poles.
+    const dLong = endLong - long;
+
+    let angle = -Math.atan2(dLat, dLong);
+    return angle;
+}
+

package/bearing-line/roadmap.md

@@ -0,0 +1,3 @@
+# Two proglems:
+lines are curved to to arrive perpendicular to the longitude lines
+patrial rings are not fit to the lines nor the bearing angle

package/package.json

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

package/partialrings/buffer-manager.js

@@ -0,0 +1,89 @@
+import BufferOffsetManager from "../util/account/bufferoffsetmanager";
+
+
+
+const ITEM_SIZE = 10;
+export default class BufferManager extends BufferOffsetManager {
+    constructor(globe, gl, buffer, { initialCapacity = 10, bufferType = "DYNAMIC_DRAW" } = {}) {
+        super(ITEM_SIZE, { capacity: initialCapacity });
+        this.globe = globe;
+        this.gl = gl;
+        this.buffer = buffer;
+        this.bufferType = bufferType;
+
+
+        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+        gl.bufferData(gl.ARRAY_BUFFER, initialCapacity * ITEM_SIZE * 4, gl[bufferType]);
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
+    }
+
+    /**
+     * 
+     * @param { Array<{key, long, lat, startAngle, tailAngle, radius, rgba[4], rgbaMode }>} rings 
+     * @returns 
+     */
+    insertBulk(items) {
+        if (items.length === 0) return;
+        this.autoExtendBuffer(items.length);
+        const { gl, buffer } = this;
+        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+        for (let { key, long, lat, startAngle, tailAngle, rgba, radius, rgbaMode } of items) {
+            const offset = this.getOffset(key) | this.nextOffset();
+            this.setOffset(key, offset);
+            const block = new Float32Array([
+                long, lat, startAngle, tailAngle, ...rgba, radius, rgbaMode]);
+            gl.bufferSubData(gl.ARRAY_BUFFER, offset, block);
+            // 2         1       1           1         4       1 = 10
+        }
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
+        this.globe.DrawRender();
+    }
+
+
+    /**
+     * @param {Array<{key, long, lat, startAngle, tailAngle}>} items
+     * 
+     * */
+    updateCenterAndAngleBulk(items) {
+        const { gl, buffer } = this;
+        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+        for (let { key, long, lat, startAngle, tailAngle } of items) {
+            const offset = this.getOffset(key);
+            if (offset === null) {
+                console.warn(`key ${key} not found`);
+                continue;
+            }
+            const block = new Float32Array([long, lat, startAngle, tailAngle]);
+            gl.bufferSubData(gl.ARRAY_BUFFER, offset, block);
+        }
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
+        this.globe.DrawRender();
+    }
+    /**
+     * 
+     * @param {Array<{key:string, payload:Float32Array}} items 
+     * @param {PART_OFFSET_LOOPUP} part | long, lat, START_ANGLE, ROTATION_ANGLE, RADIUS, rgba, rgba_MODE
+     * @returns 
+     */
+    updatePartial(items, part) {
+        const { gl, buffer } = this;
+        this._updatePartial(items, part, gl, buffer);
+        this.globe.DrawRender();
+
+    }
+
+
+
+    deleteBulk(keys) {
+        this._deleteBulk(keys);
+        this.globe.DrawRender();
+    }
+
+
+
+
+    free() {
+        this.gl.deleteBuffer(this.buffer);
+        this.buffer = null;
+    }
+}

package/partialrings/index.js

@@ -1,3 +1,3 @@
 import PartialRing, { RINGPARTIAL_ALPHA_MODE, RINGPARTIAL_DRAW_MODE, PART_OFFSET_LOOPUP } from './plugin';
 
-export { PartialRing, RINGPARTIAL_ALPHA_MODE, RINGPARTIAL_DRAW_MODE, PART_OFFSET_LOOPUP };
+export { PartialRing, RINGPARTIAL_ALPHA_MODE, RINGPARTIAL_DRAW_MODE, PART_OFFSET_LOOPUP };

package/partialrings/plugin.js

@@ -20,12 +20,13 @@ export const RINGPARTIAL_ALPHA_MODE = Object.freeze({
 
 
 export const PART_OFFSET_LOOPUP = Object.freeze({
-    CENTER: 0,
+    LONG: 0,
+    LAT: 1,
     START_ANGLE: 2,
     TAIL_ANGLE: 3,
-    COLOR: 4,
+    RGBA: 4,
     RADIUS: 8,
-    COLOR_MODE: 9,
+    RGBA_MODE: 9,
 });
 
 
@@ -47,8 +48,6 @@ export default class {
         const { vao, buffer } = this.program.getVaoBuffer();
         this.vao = vao;
         this.buffer = buffer;
-
-
     }
 
 
@@ -57,7 +56,7 @@ export default class {
 
         if (LOD < this.startLod || LOD > this.endLod) return;
         this.program.draw(
-            this.bufferManager,
+            this.bufferManager.length,
             this.vao,
             this.edgeCount,
             this.alphaMultiplier,
@@ -82,8 +81,8 @@ export default class {
         if (endLod !== null) this.endLod = endLod;
     }
 
-    createBufferMAnager(initialCapacity = 10, extendRatio = 1.2, bufferType = 'DYNAMIC_DRAW') {
-        if (!this.bufferManager) { this.bufferManager = new BufferManager(this.globe, this.gl, this.buffer, bufferType, { initialCapacity, extendRatio }); }
+    createBufferMAnager(initialCapacity = 10, bufferType = 'DYNAMIC_DRAW') {
+        if (!this.bufferManager) { this.bufferManager = new BufferManager(this.globe, this.gl, this.buffer, { initialCapacity, bufferType, }); }
         return this.bufferManager;
     }
 
@@ -96,13 +95,12 @@ export default class {
 
 class BufferManager extends BufferOffsetManager {
 
-    constructor(globe, gl, buffer, bufferType, { initialCapacity = 10, extendRatio = 1.2 } = {}) {
-        super(10, { capacity: initialCapacity });
+    constructor(globe, gl, buffer, { initialCapacity = 10, bufferType, } = {}) {
+        super(10, { capacity: initialCapacity, bufferType, });
         this.globe = globe;
         this.gl = gl;
         this.buffer = buffer;
         this.bufferType = bufferType;
-        this.extendRatio = extendRatio;
 
 
         gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
@@ -112,22 +110,20 @@ class BufferManager extends BufferOffsetManager {
 
     /**
      * 
-     * @param { Array<{key, center[2], startAngle, tailAngle, radius, color[4], color_mode }>} rings 
+     * @param { Array<{key, long, lat, startAngle, tailAngle, radius, rgba[4], rgbaMode }>} rings 
      * @returns 
      */
-    insertRings(rings) {
-        if (rings.length === 0) return;
-        this._autoExtendBuffer(rings.length);
+    insertBulk(items) {
+        if (items.length === 0) return;
+        console.log(items)
+        this.autoExtendBuffer(items.length);
         const { gl, buffer } = this;
         gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
-        for (let { key, center, startAngle, tailAngle, color, radius, colorMode } of rings) {
-            let offset = this.getOffset(key);
-            if (offset === undefined) {
-                offset = this.nextOffset();
-                this.setOffset(key, offset);
-            }
+        for (let { key, long, lat, startAngle, tailAngle, rgba, radius, rgbaMode } of items) {
+            const offset = this.getOffset(key) | this.nextOffset();
+            this.setOffset(key, offset);
             const block = new Float32Array([
-                ...center, startAngle, tailAngle, ...color, radius, colorMode]);
+                long, lat, startAngle, tailAngle, ...rgba, radius, rgbaMode]);
             gl.bufferSubData(gl.ARRAY_BUFFER, offset, block);
             // 2         1       1           1         4       1 = 10
         }
@@ -138,13 +134,13 @@ class BufferManager extends BufferOffsetManager {
 
     /**
      * 
-     * @param {Array<{key:string, payload:Float32Array}} rings 
-     * @param {PART_OFFSET_LOOPUP} part | CENTER, START_ANGLE, ROTATION_ANGLE, RADIUS, COLOR, COLOR_MODE
+     * @param {Array<{key:string, payload:Float32Array}} items 
+     * @param {PART_OFFSET_LOOPUP} part | long, lat, START_ANGLE, ROTATION_ANGLE, RADIUS, rgba, rgba_MODE
      * @returns 
      */
-    updatePartial(rings, part) {
+    updatePartial(items, part) {
         const { gl, buffer } = this;
-        this._updatePartial(rings, part, gl, buffer);
+        this._updatePartial(items, part, gl, buffer);
         this.globe.DrawRender();
 
     }
@@ -156,13 +152,6 @@ 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() {
         this.gl.deleteBuffer(this.buffer);

package/partialrings/program.js

@@ -1,6 +1,6 @@
 import { createProgram, shaderfunctions } from "../util";
 import { CameraUniformBlockTotem, CameraUniformBlockString, noRegisterGlobeProgramCache, globeProgramCache } from "../programs";
-
+import BufferManager from "./buffer-manager";
 import {
     POLE,
     PI,
@@ -8,7 +8,7 @@ import {
     mercatorXYTo2DPoint,
     longLatRadToCartesian3D,
     circleLimpFromLongLatRadCenterCartesian3D,
-    circleLimpFromLongLatRadCenterMercatorCompass,
+    circleLimpFromLongLatRadCenterMercatorRealDistance,
     cartesian3DToGLPosition
 
 
@@ -35,13 +35,13 @@ const vertexShaderSource = `#version 300 es` +
     mercatorXYTo2DPoint +
     longLatRadToCartesian3D +
     circleLimpFromLongLatRadCenterCartesian3D +
-    circleLimpFromLongLatRadCenterMercatorCompass +
+    circleLimpFromLongLatRadCenterMercatorRealDistance +
     cartesian3DToGLPosition + `
 
 uniform float edge_count;
 uniform int draw_mode; // %2 => 0: LINE_STRIP, 1: TRIANGLE_FAN 
 uniform float plugin_alpha_multiplier;
-
+//, lat, startAngle, tailAngle, ...rgba, radius, rgbaMode
 in vec2 center; // long, lat in radian
 in float start_angle; // the start of partial circle from bearing point
 in float tail_angle; // the rotation of the partial circle
@@ -56,20 +56,17 @@ out vec4 v_color;
 void main() {
     if (color_mode == 2.0 || radius == 0.0) { return; }
 
-    float vertexID;
+    float vertexID = float(gl_VertexID);
     float radius_ = radius;
     float alpha = plugin_alpha_multiplier;
     if (draw_mode == 1) { // TRIANGLE_FAN
-        vertexID = float(gl_VertexID - 1);
         if (gl_VertexID == 0) { 
-            radius_ = 0.0; vertexID = 0.0; 
+            radius_ = 0.0; 
             if ( color_mode == 1.0 ) { alpha = 0.0; }
         }
-    } else { // LINE_STRIP
-        vertexID = float(gl_VertexID); 
+        vertexID -= 1.0;
     }
-    
-    float phase = ( vertexID / edge_count);
+    float phase = ( vertexID  / edge_count);
 
     if ( color_mode == 1.0 ) {
         if ( tail_angle < 0.0 ) {
@@ -83,7 +80,7 @@ void main() {
 
     float angle;
     if ( tail_angle > 0.0 ) { 
-        angle =  tail_angle * (-phase + 1.0) + start_angle;
+        angle =  tail_angle * (-phase + 1.0 - 1.0 / edge_count) + start_angle;
         } else {
         angle = tail_angle * phase + start_angle;
     }
@@ -94,13 +91,14 @@ void main() {
         gl_Position = cartesian3DToGLPosition(pos);
     }
     else {
-        vec2 pos = circleLimpFromLongLatRadCenterMercatorCompass(center, radius_, angle);
+        
+        vec2 pos = circleLimpFromLongLatRadCenterMercatorRealDistance(center, radius_, angle);
         v_pos = pos;
         gl_Position = mercatorXYTo2DPoint(pos);
     }
 
 
-    gl_PointSize = 2.0;
+    gl_PointSize = 10.0;
 }`;
 
 
@@ -162,7 +160,7 @@ export class Logic {
 
 
 
-    draw(bufferManager, vao, edgeCount, alphaMultiplier, drawMode) {
+    draw(length, vao, edgeCount, alphaMultiplier, drawMode) {
         const { gl, program, cameraBlockTotem, cameraBlockBindingPoint } = this
 
         gl.disable(gl.DEPTH_TEST);
@@ -182,7 +180,7 @@ export class Logic {
         const overdraw = drawModeMap[drawMode];
         cameraBlockTotem.bind(cameraBlockBindingPoint);
         gl.bindVertexArray(vao);
-        gl.drawArraysInstanced(gl[drawMode], 0, edgeCount + overdraw, bufferManager.length);
+        gl.drawArraysInstanced(gl[drawMode], 0, edgeCount + overdraw, length);
         cameraBlockTotem.unbind(cameraBlockBindingPoint);
         gl.bindVertexArray(null);
         gl.enable(gl.DEPTH_TEST);
@@ -237,9 +235,17 @@ export class Logic {
             buffer,
         }
     }
+
+    getBufferManagerAndVao({ capacity = 10, bufferType = "DYNAMIC_DRAW" } = {}) {
+        const { vao, buffer } = this.getVaoBuffer();
+        return {
+            bufferManager: new BufferManager(this.globe, this.gl, buffer, { capacity, bufferType }),
+            vao
+        };
+    }
 }
 
 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/naive.js

@@ -0,0 +1,267 @@
+import { CameraUniformBlockString, CameraUniformBlockTotem } from "../totems";
+import { longLatRadToMercator, longLatRadToCartesian3D, cartesian3DToGLPosition, mercatorXYTo2DPoint } from "../../util/shaderfunctions/geometrytransformations";
+import { createProgram } from "../../util";
+import { noRegisterGlobeProgramCache, globeProgramCache } from "../programcache";
+import BufferOffsetManger from "../../util/account/bufferoffsetmanager";
+const Radian = Math.PI / 180.0;
+const GLOBE_MIDPOINT_COUNT = 100;
+const ITEM_SIZE = 8;
+
+const vertexShader = `#version 300 es
+precision highp float;
+${CameraUniformBlockString}
+${longLatRadToMercator}
+${longLatRadToCartesian3D}
+${cartesian3DToGLPosition}
+${mercatorXYTo2DPoint}
+
+in vec2 start_position;
+in vec2 end_position;
+in vec4 color;
+out vec4 v_color;
+
+void main() {
+    
+    vec2 longLat;
+    if (is3D) {
+        float interpolation = float(gl_VertexID) / ${GLOBE_MIDPOINT_COUNT}.0;
+        longLat = mix(start_position, end_position, interpolation);
+        vec3 cartesian = longLatRadToCartesian3D(longLat);
+        gl_Position = cartesian3DToGLPosition(cartesian);
+    } else {
+        if ( gl_VertexID == 0 ) {
+            longLat = start_position;
+        } else {
+            longLat = end_position;
+        }
+        vec2 mercator = longLatRadToMercator(longLat);
+        gl_Position = mercatorXYTo2DPoint(mercator);
+    }
+    v_color = color;
+}
+`
+
+const fragmentShader = `#version 300 es
+precision highp float;
+uniform float opacity;
+in vec4 v_color;
+out vec4 color;
+void main() {
+    color = v_color;
+    color.a *= opacity;
+}
+`
+
+
+class Logic {
+
+    constructor(globe) {
+        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");
+        }
+
+        {
+            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");
+        this.cameraBlockTotem = globeProgramCache.getProgram(globe, CameraUniformBlockTotem);
+        gl.uniformBlockBinding(this.program, cameraBlockIndex, this.cameraBlockBindingPoint);
+
+
+    }
+
+
+    draw(vao, length, opacity) {
+        const { gl, program, globe } = this;
+        gl.useProgram(program);
+        const { cameraBlockTotem, cameraBlockBindingPoint } = this;
+        cameraBlockTotem.bind(cameraBlockBindingPoint);
+        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, 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 });
+    }
+}
+
+
+class BufferManager extends BufferOffsetManger {
+
+    constructor(globe, { capacity = 10, bufferType = "DYNAMIC_DRAW" } = {}) {
+        super(ITEM_SIZE, { capacity, bufferType });
+        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.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, 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, long, lat, endLong, endLat, rgba } of items) {
+
+            const payload = new Float32Array([
+                long,
+                lat,
+                endLong,
+                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, 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, long, lat, endLong, endLat, rgba } of items) {
+            const payload = new Float32Array([
+                long,
+                lat,
+                endLong,
+                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, 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, long, lat, endLong, endLat } of items) {
+            const payload = new Float32Array([
+                long,
+                lat,
+                endLong,
+                endLat]);
+            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, 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 LineOnGlobeCache = Object.freeze({
+    get: (globe) => { return noRegisterGlobeProgramCache.getProgram(globe, Logic) },
+    free: (globe) => { return noRegisterGlobeProgramCache.releaseProgram(globe, Logic) }
+});
+

package/programs/rings/distancering/circlepaddingfreeangleprogram.js

@@ -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/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;
     }
 
 
@@ -56,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;
@@ -157,8 +163,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

@@ -75,6 +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.
@@ -91,7 +104,6 @@ export default class {
         const itemCount = this.itemCount;
         const capacity = (newCapacity && newCapacity > itemCount) ? newCapacity : itemCount;
 
-
         const newArray = new Float32Array(itemCount * itemSize);
 
         const bufferData = this._getBufferData();
@@ -112,9 +124,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;
@@ -139,8 +158,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) {
@@ -161,7 +180,6 @@ export default class {
     }
 
 
-
     _removeFromBuffer(keys) {
         const { gl, buffer } = this;
         const emptyBlock = new Float32Array(this.itemSize).fill(0)
@@ -175,6 +193,16 @@ export default class {
         }
         gl.bindBuffer(gl.ARRAY_BUFFER, null);
     }
+
+
+
+
+    free() {
+        this.gl.deleteBuffer(this.buffer);
+        this.buffer = null;
+        this.vao = null;
+        this.gl = null;
+    }
 }
 
 

package/util/shaderfunctions/geometrytransformations.js

@@ -159,3 +159,93 @@ vec2 circleLimpFromLongLatRadCenterMercatorCompass(vec2 center, float radius, fl
 }`;
 
 
+// Function to interpolate between two Cartesian points using spherical interpolation (slerp)
+export const slerp = `
+vec3 slerp(vec3 A, vec3 B, float t) {
+    float cosTheta = dot(A, B);
+    float theta = acos(clamp(cosTheta, -1.0, 1.0)); // Angle between the points
+
+    float sinTheta = sin(theta);
+
+    // Avoid division by zero // many points falls in to this category
+    if (sinTheta < 0.00001) {
+        return mix(A, B, t); // Linear interpolation as fallback
+    }
+
+    float factorA = sin((1.0 - t) * theta) / sinTheta;
+    float factorB = sin(t * theta) / sinTheta;
+
+    return factorA * A + factorB * B;
+}
+`;
+
+// Function to convert Cartesian coordinates back to spherical (latitude, longitude)
+export const cartesianToSpherical = `
+vec2 cartesianToSpherical(vec3 point) {
+    float lat = degrees(asin(point.z));             // Latitude
+    float lon = degrees(atan(point.y, point.x));    // Longitude
+
+    return vec2(lat, lon);
+}`;
+
+// Main function to calculate an intermediate point
+
+export const interpolateGeographicPoint = slerp + cartesianToSpherical + longLatRadToCartesian3D + `
+vec3 interpolateGeographicPoint(vec2 start, vec2 end, float t) {
+    vec3 pointA = longLatRadToCartesian3D(start);
+    vec3 pointB = longLatRadToCartesian3D(end);
+    vec3 interpolatedPoint = slerp(pointA, pointB, t);
+    return interpolatedPoint;
+    // return cartesianToSpherical(interpolatedPoint);
+}
+`;
+
+
+
+export const angleBetweenTwoPointsRadian = `
+float angleBetweenTwoPointsRadian(vec2 start_, vec2 end_) {
+    float start_lat = log( tan( ( 1.0 - start_.y ) * PI / 2.0  ) );
+    float end_lat = log( tan( ( 1.0 - end_.y ) * PI / 2.0  ) );
+    float angle = atan( (end_lat - start_lat )/ (end_.x - start_.x));
+    return angle;   
+}
+`
+
+export const circleCircumferenceInterPolationOf2PointsRadian = `
+float circleCircumferenceInterPolationOf2PointsRadian(vec2 center, vec2 target, float bearing_angle, float ratio) {
+    vec2 t = target - center;
+    float mainAngle = atan(t.x, t.y);
+    float angle = mainAngle -  * ratio;
+    return angle;
+}
+`
+
+export const circumferencePoints = `
+vec2 circumferencePoints(vec2 center, vec2 target, vec2 target2, float phase, float radius) {
+    // Calculate vectors from center to target and target2
+    vec2 v1 = target - center;
+    vec2 v2 = target2 - center;
+
+    // Normalize the vectors to ensure they are on the unit circle
+    v1 = normalize(v1);
+    v2 = normalize(v2);
+
+    // Calculate the angle between the vectors
+    float angle1 = atan(v1.y, v1.x);
+    float angle2 = atan(v2.y, v2.x);
+
+    // Ensure the angles are continuous (handle wrap-around at 2π)
+    if (angle2 < angle1) {
+        angle2 += 2.0 * 3.14159265359; // Add 2π to angle2 if it is smaller
+    }
+
+    // Interpolate the angle based on the phase
+    float interpolatedAngle = mix(angle1, angle2, phase);
+
+    // Calculate the new point on the circle
+    vec2 result = vec2(cos(interpolatedAngle), sin(interpolatedAngle));
+
+    // Scale back to the original circle radius and shift to center
+    return center + radius * result;
+}
+`

package/wind/plugin.js

@@ -696,9 +696,12 @@ export default class WindPlugin {
 
         gl.activeTexture(gl.TEXTURE0);
         if (this._doDraw()) {
-            gl.disable(gl.DEPTH_TEST);
-            gl.disable(gl.STENCIL_TEST);
+            const depthTest = gl.isEnabled(gl.DEPTH_TEST);
+            if (depthTest) gl.disable(gl.DEPTH_TEST);
+            // if (gl.disable(gl.STENCIL_TEST); // 
             this._draw();
+            // if (depthTest) gl.enable(gl.DEPTH_TEST); // TODO: stencil 
+
         }
 
         gl.bindFramebuffer(gl.FRAMEBUFFER, null);
@@ -862,8 +865,8 @@ export default class WindPlugin {
 
     _resetMachineStates() {
         const { gl, globe } = this;
-        gl.disable(gl.DEPTH_TEST);
-        gl.disable(gl.STENCIL_TEST);
+        // gl.disable(gl.DEPTH_TEST);
+        // gl.disable(gl.STENCIL_TEST);
         gl.activeTexture(gl.TEXTURE0);
         gl.viewport(0, 0, globe.api_ScrW(), globe.api_ScrH());
     }

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

@@ -1,115 +0,0 @@
-import { CameraUniformBlockString, CameraUniformBlockTotem } from "../totems";
-import { longLatRadToMercator, longLatRadToCartesian3D, cartesian3DToGLPosition, mercatorXYTo2DPoint } from "../shaderfunctions/geometrytransformations";
-import { createProgram } from "../webgl/program";
-import { noRegisterGlobeProgramCache, globeProgramCache } from "../programcache";
-import { BufferOffsetManger } from "../../util/account";
-
-const GLOBE_MIDPOINT_COUNT = 100;
-const ITEM_SIZE = 8;
-
-const vertexShader = `#version 300 es
-precision highp float;
-${CameraUniformBlockString}
-${longLatRadToMercator}
-${longLatRadToCartesian3D}
-${cartesian3DToGLPosition}
-${mercatorXYTo2DPoint}
-
-in vec2 start_position;
-in vec2 end_position;
-in vec4 color;
-out vec4 v_color;
-
-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);
-        gl_Position = cartesian3DToGLPosition(cartesian);
-    } else {
-        if ( gl_VertexID == 0 ) {
-            longLat = start_position;
-        } else {
-            longLat = end_position;
-        }
-        vec2 mercator = longLatRadToMercator(longLat);
-        gl_Position = mercatorXYTo2DPoint(mercator);
-    }
-    v_color = color;
-}
-`
-
-const fragmentShader = `#version 300 es
-precision highp float;
-in vec4 v_color;
-out vec4 color;
-void main() {
-    color = v_color;
-}
-`
-
-
-class Logic {
-
-    constructor(globe) {
-        this.globe = globe;
-        this.gl = gl;
-        this.program = createProgram(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);
-
-    }
-
-
-    draw(bufferManager) {
-
-    }
-
-
-
-}
-
-
-class BufferManager extends BufferOffsetManger {
-
-    constructor(gl, { capacity = 10, bufferType = "DYNAMIC_DRAW" } = {}) {
-        super(ITEM_SIZE, { capacity, bufferType });
-        this.gl = gl;
-        this.buffer = gl.createBuffer();
-
-        const { gl, buffer } = this;
-        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
-        gl.bufferData(gl.ARRAY_BUFFER, _capacity * ITEM_SIZE * 4, gl[bufferType]);
-        gl.bindBuffer(gl.ARRAY_BUFFER, null);
-
-        this.vao = gl.createVertexArray();
-        {
-
-        }
-    }
-
-    insertBulk(items) {
-
-    }
-}
-
-
-
-export const programCache = Object.freeze({
-    get: (globe) => { return noRegisterGlobeProgramCache.getProgram(globe, Logic) },
-    release: (globe) => { noRegisterGlobeProgramCache.releaseProgram(globe, Logic) }
-});
-