@pirireis/webglobeplugins 0.0.5 → 0.0.7

package/package.json

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

package/partialrings/program.js

@@ -240,8 +240,6 @@ export class Logic {
     }
 }
 
-
-
 export const programCache = Object.freeze({
     get: (globe) => noRegisterGlobeProgramCache.getProgram(globe, Logic),
     free: (globe) => noRegisterGlobeProgramCache.releaseProgram(globe, Logic)

package/programs/rings/distancering/circleflatprogram.js

@@ -105,7 +105,7 @@ class Logic {
             gl.uniform1f(this._circleEdgeCountLocation, circle_edge_count);
             this._circle_edge_count = circle_edge_count;
         }
-        gl.drawArraysInstanced(gl.LINE_LOOP, 0, CIRCLE_EDGE_COUNT, attrBufferManager.length);
+        gl.drawArraysInstanced(gl.LINE_LOOP, 0, circle_edge_count, attrBufferManager.length);
         gl.bindVertexArray(null);
         cameraBlockTotem.unbind(cameraBlockBindingPoint);
     }

package/programs/rings/distancering/circlepaddingfreeangleprogram.js

@@ -0,0 +1,382 @@
+import { createProgram, shaderfunctions } from "../../../util";
+import { BufferOffsetManager } from "../../../util/account";
+import CameraUniformBlockTotem, { CameraUniformBlockString } from "../../totems/camerauniformblock";
+import { globeProgramCache, noRegisterGlobeProgramCache } from "../../programcache";
+
+
+const vertexShader = `#version 300 es ` +
+    shaderfunctions.PI +
+    shaderfunctions.R +
+    shaderfunctions.POLE +
+    CameraUniformBlockString +
+    shaderfunctions.mercatorXYTo2DPoint +
+    shaderfunctions.longLatRadToMercator +
+    shaderfunctions.longLatRadToCartesian3D +
+    shaderfunctions.circleLimpFromLongLatRadCenterCartesian3D +
+    shaderfunctions.circleLimpFromLongLatRadCenterMercatorCompass +
+    shaderfunctions.circleLimpFromLongLatRadCenterMercatorRealDistance + `
+
+in vec2 center;
+in float radius;
+in float pad_range;
+in vec4 color;
+in float flag;
+in float pad_angle;
+
+uniform int compass;
+
+out vec2 v_limp;
+out vec4 v_color;
+
+
+void main() {   
+    if( flag == 1.0 || radius == 0.0 ) return; // 1.0 is hide 
+    v_color = color;
+    gl_PointSize = 2.0;
+
+    float odd = mod(float(gl_VertexID), 2.0);
+    float index = (float(gl_VertexID)- odd ) / 2.0;
+    float angle = pad_angle - 1.5707963267948966192313216916398;
+    float radius_ = radius - (pad_range * odd);
+
+    if (is3D){  
+        gl_Position = projection * view * vec4(
+            circleLimpFromLongLatRadCenterCartesian3D( center, radius_, angle) - translate, 1.0);
+        v_limp = vec2(0.0, 0.0);
+        return;
+    }
+    vec2 limp;
+    if ( compass == 1 ){
+        limp = circleLimpFromLongLatRadCenterMercatorCompass(center , radius_, angle);
+    } else {
+        limp = circleLimpFromLongLatRadCenterMercatorRealDistance(center, radius_, angle);
+    }
+    v_limp = limp;
+    gl_Position = mercatorXYTo2DPoint(limp);
+}`;
+
+const fragmentShader = `#version 300 es
+precision highp float; ` +
+    shaderfunctions.POLE + `
+in vec4 v_color;
+in vec2 v_limp;
+out vec4 outColor;
+void main() {
+    if ( v_limp.x < -POLE || v_limp.x > POLE || v_limp.y < -POLE || v_limp.y > POLE ){ discard; }
+    outColor = v_color;
+}`;
+
+
+
+
+class Logic {
+
+    constructor(globe) {
+
+        this.globe = globe;
+        this.gl = globe.gl;
+        this.program = createProgram(this.gl, vertexShader, fragmentShader);
+
+        {
+            const gl = this.gl;
+            this.center = gl.getAttribLocation(this.program, "center");
+            this.radius = gl.getAttribLocation(this.program, "radius");
+            this.pad_range = gl.getAttribLocation(this.program, "pad_range");
+            this.color = gl.getAttribLocation(this.program, "color");
+            this.flag = gl.getAttribLocation(this.program, "flag");
+            this.pad_angle = gl.getAttribLocation(this.program, "pad_angle");
+
+        }
+
+        this.cameraBlockBindingPoint = 0;
+        const cameraBlockIndex = this.gl.getUniformBlockIndex(this.program, "CameraUniformBlock");
+        this.gl.uniformBlockBinding(this.program, cameraBlockIndex, this.cameraBlockBindingPoint);
+        this.cameraBlockTotem = globeProgramCache.getProgram(globe, CameraUniformBlockTotem);
+        this._compassLocation = this.gl.getUniformLocation(this.program, "compass");
+
+
+        {
+            const currentProgram = this.gl.getParameter(this.gl.CURRENT_PROGRAM);
+            this.gl.useProgram(this.program);
+            this.gl.uniform1i(this._compassLocation, 1);
+            this._lastCompass = 1;
+            this.gl.useProgram(currentProgram);
+        }
+    }
+
+
+    draw(attrBufferManager, compass) {
+
+        const { gl, program, cameraBlockBindingPoint, cameraBlockTotem, _compassLocation } = this;
+
+        gl.useProgram(program);
+        attrBufferManager.bindPaddingVAO();
+        cameraBlockTotem.bind(cameraBlockBindingPoint);
+        if (compass !== this._lastCompass) {
+            gl.uniform1i(_compassLocation, compass);
+            this._lastCompass = compass;
+        }
+        gl.disable(gl.DEPTH_TEST);
+        gl.drawArraysInstanced(gl.LINES, 0, 2, attrBufferManager.length);
+        gl.enable(gl.DEPTH_TEST);
+        cameraBlockTotem.unbind(cameraBlockBindingPoint);
+        gl.bindVertexArray(null);
+
+    }
+    initilizeBufferManager({ bufferType = "DYNAMIC_DRAW", initialRingCapacity = 10 } = {}) {
+        return new BufferManager(this.gl, bufferType, initialRingCapacity);
+
+    }
+
+}
+
+
+export const PaddingFreeAngleCache = Object.freeze({
+    getProgram: (globe) => noRegisterGlobeProgramCache.getProgram(globe, Logic),
+    releaseProgram: (globe) => globeProgramCache.releaseProgram(globe, Logic)
+})
+
+
+
+export class BufferManager extends BufferOffsetManager {
+    constructor(gl, bufferType, initialRingCapacity = 10) {
+        super(10, { capacity: initialRingCapacity, bufferType });
+        this.gl = gl;
+        this.bufferType = bufferType;
+        this.buffer = gl.createBuffer();
+        gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
+        gl.bufferData(gl.ARRAY_BUFFER, this.capacity * this.itemSize * 4, gl[bufferType]);
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
+        this._centerMaps = new Map();
+        this.vao = gl.createVertexArray();
+
+        {
+            gl.bindVertexArray(this.vao);
+            gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
+            gl.enableVertexAttribArray(0);
+            gl.enableVertexAttribArray(1);
+            gl.enableVertexAttribArray(2);
+            gl.enableVertexAttribArray(3);
+            gl.enableVertexAttribArray(4);
+            gl.enableVertexAttribArray(5);
+            gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 40, 0);
+            gl.vertexAttribPointer(1, 1, gl.FLOAT, false, 40, 8);
+            gl.vertexAttribPointer(2, 1, gl.FLOAT, false, 40, 12);
+            gl.vertexAttribPointer(3, 4, gl.FLOAT, false, 40, 16);
+            gl.vertexAttribPointer(4, 1, gl.FLOAT, false, 40, 32);
+            gl.vertexAttribPointer(5, 1, gl.FLOAT, false, 40, 36);
+            // divisor
+            gl.vertexAttribDivisor(0, 1);
+            gl.vertexAttribDivisor(1, 1);
+            gl.vertexAttribDivisor(2, 1);
+            gl.vertexAttribDivisor(3, 1);
+            gl.vertexAttribDivisor(4, 1);
+            gl.vertexAttribDivisor(5, 1);
+            gl.bindBuffer(gl.ARRAY_BUFFER, null);
+            gl.bindVertexArray(null);
+        }
+    }
+
+
+    __centerMapMethod(x, y, rgba, rings, hide, paddingAngles) {
+        return new Map([
+            ["x", x],
+            ["y", y],
+            ["rgba", rgba],
+            ["rings", rings],
+            ["hide", hide],
+            ["paddingAngles", paddingAngles]
+        ])
+    }
+
+
+
+
+    bindPaddingVAO() {
+        this.gl.bindVertexArray(this.vao);
+    }
+
+    //TODO: implement this
+    // insertBulk is gone. no update feature
+    // addBulk is added.
+    // deletes old centers given 
+    insertBulk(data) {
+        const { gl, buffer } = this;
+
+        const deleteCentersList = [];
+        for (const { centerID } of data) {
+            if (this._centerMaps.has(centerID)) {
+                deleteCentersList.push(centerID);
+            }
+        }
+        if (deleteCentersList.length > 0) {
+            this.removeCenters(deleteCentersList);
+        }
+
+
+        const requiredSpace = this.__requiredSpaceForBulk(data);
+
+        const spaceLeft = this.spaceLeft;
+        console.log("space left:", spaceLeft, "required space:", requiredSpace);
+        if (requiredSpace > spaceLeft) {
+            console.log("new capacity:", this.capacity + requiredSpace - spaceLeft)
+            this.extendBuffer(gl, buffer, this.bufferType, this.capacity + requiredSpace - spaceLeft);
+        }
+
+        const items = [];
+
+        for (const { centerID, x, y, rgba, paddingAngles, hide = false, rings } of data) {
+
+            this._centerMaps.set(centerID, this.__centerMapMethod(x, y, rgba, rings, hide, paddingAngles)); // x,y, rgba, hide prograbably not needed
+
+            const hideFlag = hide ? 1 : 0;
+            for (const { ringID, radius, padding } of rings) {
+                for (const paddingAngle of paddingAngles) {
+                    const _offsetMapKey = `${centerID}_${ringID}_${paddingAngle}`;
+                    const offset = this.getOffset(_offsetMapKey) | this.nextOffset();
+                    items.push({
+                        offset: offset,
+                        payload: new Float32Array([x, y, radius, padding, rgba[0], rgba[1], rgba[2], rgba[3], hideFlag, paddingAngle])
+                    })
+                    this.offSetMap.set(_offsetMapKey, offset);
+                }
+            }
+        }
+        const partOffset = 0;
+
+        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+        for (let { offset, payload } of items) {
+            gl.bufferSubData(gl.ARRAY_BUFFER, offset, payload);
+        }
+    }
+
+
+    updateCentersXY(data) {
+        const { gl, buffer } = this;
+        const items = [];
+
+        for (const { centerID, x, y } of data) {
+            const center = this._centerMaps.get(centerID);
+            center.set("x", x);
+            center.set("y", y);
+            const payload = new Float32Array([x, y]);
+            const paddingAngles = center.get("paddingAngles");
+            const rings = center.get("rings");
+            for (const { ringID } of rings) {
+                for (const paddingAngle of paddingAngles) {
+                    const offsetKey = offsetMapKey(centerID, ringID, paddingAngle);
+                    items.push({ offset: this.getOffset(offsetKey), payload });
+                }
+            }
+        }
+        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+        for (let { offset, payload } of items) {
+            gl.bufferSubData(gl.ARRAY_BUFFER, offset, payload);
+        }
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
+    }
+
+
+
+    //TODO: test
+    updateCentersHide(data) {
+        const { gl, buffer } = this;
+        const items = [];
+        for (const { centerID, hide } of data) {
+            const block = new Float32Array([hide]);
+            const center = this._centerMaps.get(centerID);
+            if (!center) continue;
+            const paddingAngles = center.get("paddingAngles");
+            const rings = center.get("rings");
+            for (const { ringID } of rings) {
+                for (const paddingAngle of paddingAngles) {
+                    const offsetKey = offsetMapKey(centerID, ringID, paddingAngle);
+                    items.push({ key: offsetKey, payload: block });
+                }
+            }
+        }
+        this._updatePartial(items, 8, gl, buffer);
+    }
+
+    updateCentersColor(data) {
+        const { gl, buffer } = this;
+        const items = [];
+        for (const { centerID, rgba } of data) {
+            const center = this._centerMaps.get(centerID);
+            if (!center) continue;
+            center.set("rgba", rgba);
+            const paddingAngles = center.get("paddingAngles");
+            const rings = center.get("rings");
+            const payload = new Float32Array(rgba);
+            for (const { ringID } of rings) {
+                for (const paddingAngle of paddingAngles) {
+                    const offsetKey = offsetMapKey(centerID, ringID, paddingAngle);
+                    items.push({ key: offsetKey, payload });
+                }
+            }
+        }
+        this._updatePartial(items, 4, gl, buffer);
+    }
+
+
+
+    __requiredSpaceForBulk(data) {
+        let space = 0;
+        for (const { paddingAngles, rings } of data) {
+            space += paddingAngles.length * rings.length;
+        }
+        return space;
+    }
+
+    // TODO: TEST IT WITH INSERT
+    removeCenters(centerIDs) {
+        const keys = [];
+        for (const centerID of centerIDs) {
+            const center = this._centerMaps.get(centerID);
+            if (!center) continue;
+            const rings = center.get("rings");
+            const paddingAngles = center.get("paddingAngles");
+            for (const { ringID } of rings) {
+                for (const paddingAngle of paddingAngles) {
+                    keys.push(offsetMapKey(centerID, ringID, paddingAngle));
+                }
+            }
+            this._centerMaps.delete(centerID);
+        }
+        this._removeFromBuffer(keys);
+    }
+}
+
+
+const offsetMapKey = (centerID, ringID, paddingAngle) => `${centerID}_${ringID}_${paddingAngle}`;
+
+
+
+/**
+ * {center has x,y, color, paddingAngles, rings} key: centerID
+ * {ring has ranges, paddings} key: ringKey
+ * _offSetMap => | key: centerID_ringKey_paddingAngle | value: offset |
+ * 
+ * insertCenter
+ * 
+ * insertRing
+ * 
+ * updateCenter ---> updatesRings ---> updatesPaddings
+ *  centerMap          ringMap           
+ *   keeps              keeps
+ *  list of Rings   list of Paddings
+ * 
+ * 
+ * needs an adaptor to convert currently implemented data into this format. 
+ * current format:
+ * center = {
+ *  centerID,
+ * x,
+ * y,
+ * rings: [
+ *  radius,
+ *  paddingRadius,
+ *  rgba,
+ * ]
+ * }
+ */

package/programs/rings/distancering/circlepaddysharedbuffer.js

@@ -5,6 +5,14 @@
  *  Buffer is initialized with ring capacity and buffer is created with that capacity. It might be called buffer orphaning.
  * 
  * */
+
+
+/**
+ * TODO 
+ * delete registerCenter
+ * 
+ * 
+ */
 const RING_SIZE = 9;
 
 export default class {
@@ -14,7 +22,7 @@ export default class {
      * @param {Number} options.initialRingCapacity
      * @param {String} options.bufferType - "static" or "dynamic"
      * */
-    constructor(gl, globe, { initialRingCapacity = 20, bufferType = "static", implicitExtentionRate = 1.2 } = {}) {
+    constructor(gl, globe, { initialRingCapacity = 20, bufferType = "STATIC_DRAW", implicitExtentionRate = 1.2 } = {}) {
         this.gl = gl;
         this.globe = globe;
         this._capacity = initialRingCapacity;
@@ -158,78 +166,8 @@ export default class {
     }
 
 
-    /**
-     * @typedef centerIdringIdRadiusPaddingRgbaHide
-     * @property {String} centerID
-     * @property {String} ringID
-     * @property {Number} radius
-     * @property {Number} padding
-     * @property {Array<Number>} rgba - [r,g,b,a]
-     * @param {Array<centerIdringIdRadiusPaddingRgbaHide>} centerIdringIdRadiusPaddingRgbaHideList
-     * */
-    insertRings(centerIdringIdRadiusPaddingRgbaHideList) {
-        { // capacity check
-            this._implicitExtendBufferInNeed(centerIdringIdRadiusPaddingRgbaHideList.length);
-        }
-        const { gl, buffer } = this;
-        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
-        for (let { centerID, ringID, radius, padding, rgba, hide = false } of centerIdringIdRadiusPaddingRgbaHideList) {
-            if (!this._centerMap.has(centerID)) {
-                console.warn("Center is not registered yet");
-                return;
-            }
-            const x = this._centerMap.get(centerID).get("x");
-            const y = this._centerMap.get(centerID).get("y");
-            const bufferData = new Float32Array([x, y, radius, padding, ...rgba, hide ? 1 : 0]);
-            const key = this._ringKey(centerID, ringID);
-            let offset;
-            if (!this._ringOffsets.has(key)) {
-                offset = this._nextBufferOffset();
-                this._ringOffsets.set(key, offset);
-                this._centerMap.get(centerID).get("rings").push(key);
-            } else {
-                offset = this._ringOffsets.get(key);
-            }
-            gl.bufferSubData(gl.ARRAY_BUFFER, offset, bufferData);
-        }
-        gl.bindBuffer(gl.ARRAY_BUFFER, null);
-        this.globe.DrawRender();
-    }
 
 
-    /**
-     * @typedef centerIDringID
-     * @property {String} centerID
-     * @property {String} ringID
-     * @param {Array<centerIDringID>} centerIDringIDs 
-     * @returns 
-     */
-    removeRings(centerIDringIDs) {
-        const { gl, buffer } = this;
-        const zero = new Float32Array([0]);
-        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
-        for (let { centerID, ringID } of centerIDringIDs) {
-            if (!this._centerMap.has(centerID)) {
-                console.warn("Center is not registered yet");
-                return;
-            }
-            const key = this._ringKey(centerID, ringID);
-            if (!this._ringOffsets.has(key)) {
-                console.warn("Ring is not registered yet");
-                return;
-            }
-            const offset = this._ringOffsets.get(key);
-            this._removedRingsOffsetStack.push(offset);
-            this._ringOffsets.delete(key);
-            //  set range to 0, 3rd index of float32array 
-            gl.bufferSubData(gl.ARRAY_BUFFER, offset + 8, zero);
-            this._centerMap.get(centerID).get("rings").splice(this._centerMap.get(centerID).get("rings").indexOf(key), 1);
-            this._ringCounter--;
-        }
-        gl.bindBuffer(gl.ARRAY_BUFFER, null);
-        this.globe.DrawRender();
-    }
-
     /**
      * @param {Array<string>} centerIDs
      * */
@@ -239,8 +177,9 @@ export default class {
         gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
         for (let centerID of centerIDs) {
             if (!this._centerMap.has(centerID)) {
-                console.warn("Center is not registered yet");
-                return;
+                // console.warn("Center is not registered yet");
+                // return;
+                continue;
             }
             const center = this._centerMap.get(centerID);
             const rings = center.get("rings");
@@ -260,10 +199,10 @@ export default class {
 
 
     /**
-     * @typedef centerIDxyList
+     *
      * @property {String} centerID
-     * @property {Number} x mercator x
-     * @property {Number} y mercator y
+     * @property {Number} x radians x
+     * @property {Number} y radians y
      * @param {*} centerIDxyList 
      */
     updateCentersXY(centerIDxyList) {
@@ -282,10 +221,23 @@ export default class {
         }
         gl.bindBuffer(gl.ARRAY_BUFFER, null);
         this.globe.DrawRender();
-
     }
 
 
+    updateCentersHide(data) {
+        const { gl, buffer } = this;
+        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+        for (let { centerID, hide } of data) {
+            const rings = this._centerMap.get(centerID).get("rings");
+            for (let i = 0; i < rings.length; i++) {
+                const offset = this._ringOffsets.get(rings[i]);
+                gl.bufferSubData(gl.ARRAY_BUFFER, offset + 32, new Float32Array([hide]));
+            }
+        }
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
+        this.globe.DrawRender();
+    }
+
     /**
      * 
      * @typedef centerData
@@ -312,10 +264,19 @@ export default class {
         this.globe.DrawRender();
     }
 
-
-
     insertBulk(rangeRingDatas) {
         const { gl, buffer } = this;
+
+        {// remove existring centers
+            const existingCenterIDs = [];
+            for (let { centerID } of rangeRingDatas) {
+                if (this._centerMap.has(centerID)) {
+                    existingCenterIDs.push(centerID);
+                }
+            }
+            this.removeCenters(existingCenterIDs);
+        }
+
         { // capacity check
             let incomingRingSize = 0;
             for (let { rings } of rangeRingDatas) {
@@ -325,19 +286,19 @@ export default class {
             }
             this._implicitExtendBufferInNeed(incomingRingSize);
         }
-
         gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
         for (let { centerID, x, y, rings } of rangeRingDatas) {
-            if (!this._centerMap.has(centerID)) {
-                this.registerCenter(centerID, { x, y })
-            } else {
-                const rings = this._centerMap.get(centerID).get("rings");
-                const xy = new Float32Array([x, y]);
-                for (let i = 0; i < rings.length; i++) {
-                    const offset = this._ringOffsets.get(rings[i]);
-                    gl.bufferSubData(gl.ARRAY_BUFFER, offset, xy);
-                }
-            }
+            // if (!this._centerMap.has(centerID)) {
+            this.registerCenter(centerID, { x, y })
+            // } else {
+            //     const rings = this._centerMap.get(centerID).get("rings");
+            //     const xy = new Float32Array([x, y]);
+            //     const emptyBlock =
+            //     for (let i = 0; i < rings.length; i++) {
+            //         const offset = this._ringOffsets.get(rings[i]);
+            //         gl.bufferSubData(gl.ARRAY_BUFFER, offset, );
+            //     }
+            // }
             for (let { ringID, radius, padding, rgba, hide = false } of rings) {
                 const key = this._ringKey(centerID, ringID);
                 const bufferData = new Float32Array([x, y, radius, padding, ...rgba, hide ? 1 : 0]);
@@ -350,10 +311,8 @@ export default class {
                 } else {
                     const offset = this._ringOffsets.get(key);
                     gl.bufferSubData(gl.ARRAY_BUFFER, offset, bufferData);
-
                 }
             }
-
         }
         gl.bindBuffer(gl.ARRAY_BUFFER, null);
         this.globe.DrawRender();
@@ -388,7 +347,7 @@ export default class {
      * 
      * @param {Array<{centerID, rgba}} centersColors 
      */
-    updateCenterColor(centersColors) {
+    updateCentersColor(centersColors) {
         const { gl, buffer } = this;
         gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
         for (let { centerID, rgba } of centersColors) {
@@ -461,7 +420,6 @@ export default class {
 
 
     _implicitExtendBufferInNeed(incomingRingSize) {
-        console.log("implicitExtendBufferInNeed", { incomingRingSize, "capacity left": this.capacityLeft(), "capacity": this._capacity, "ring counter": this._ringCounter });
         const overCapacity = incomingRingSize - this.capacityLeft();
         if (overCapacity <= 0) return;
         const newCapacity = Math.ceil((this._capacity + overCapacity) * this.implicitExtentionRate);

package/programs/rings/distancering/index.js

@@ -1,5 +1,5 @@
 import CircleFlatProgram from './circleflatprogram';
 import PaddyFlatProgram from './paddyflatprogram';
 import CirclePaddySharedBuffer from './circlepaddysharedbuffer';
-
-export default { CircleFlatProgram, PaddyFlatProgram, CirclePaddySharedBuffer }
+import { PaddingFreeAngleCache } from './circlepaddingfreeangleprogram';
+export { CircleFlatProgram, PaddyFlatProgram, CirclePaddySharedBuffer, PaddingFreeAngleCache };

package/programs/rings/distancering/paddyflatprogram.js

@@ -28,8 +28,11 @@ out vec4 v_color;
 
 
 void main() {   
-    if( flag == 1.0 || radius == 0.0 ) return; // 1.0 is hide 
-    v_color = color;
+
+    float alpha_padding =  z_level * z_level / (pad_range/ 100.0 );
+    if( flag == 2.0 || flag == 1.0 || radius == 0.0 || alpha_padding < 0.1 || z_level < 3.0 ) return; // 1.0 is hide 
+    v_color = vec4(color.rgb, alpha_padding);
+
     gl_PointSize = 2.0;
 
     float odd = mod(float(gl_VertexID), 2.0);

package/rangerings/index.js

@@ -1,3 +1,3 @@
-import RangeRings from './rangerings';
+import RangeRings, { ENUM_HIDE } from './rangerings';
 
-export { RangeRings };
+export { RangeRings, ENUM_HIDE };

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

@@ -19,9 +19,9 @@
  */
 
 export default class {
-    constructor(itemSize, { capacity = 10 }) {
+    constructor(itemSize, { capacity = 10, bufferType = "STATIC_DRAW" } = {}) {
         this.itemSize = itemSize;
-
+        this.bufferType = bufferType;
         this.offSetMap = new Map();
         this.tombstoneOffSet = [];
         this._capacity = capacity;
@@ -46,8 +46,9 @@ export default class {
     }
 
     nextOffset() {
-        if (this.tombstoneOffSet._length > 0) {
-            return this.tombstoneOffSet.pop();
+        if (this.tombstoneOffSet.length > 0) {
+            const offset = this.tombstoneOffSet.pop();
+            return offset;
         }
         if (this._length < this._capacity) {
             return this._length++ * this.itemSize * 4;
@@ -55,8 +56,12 @@ export default class {
         return false;
     }
 
-    spaceLeft() {
-        return this._capacity - this._length;
+    get spaceLeft() {
+        return this._capacity - (this._length - this.tombstoneOffSet.length);
+    }
+
+    get itemCount() {
+        return this._length - this.tombstoneOffSet.length;
     }
 
     deleteFromAccount(key) {
@@ -76,43 +81,47 @@ export default class {
         return this.offSetMap.entries();
     }
 
-
-    defragBuffer(gl, buffer, bufferType, newCapacity = null) {
-
+    // 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._length - this.tombstoneOffSet.length;
+        const itemCount = this.itemCount;
         const capacity = (newCapacity && newCapacity > itemCount) ? newCapacity : itemCount;
 
-        const bufferData = this._getBufferData();
 
         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);
+            // this.offSetMap.set(key, newOffSet * 4);
+            newOffSetMap.set(key, newOffSet * 4);
             newOffSet += itemSize;
         }
 
-        gl.bindBuffern(gl.ARRAY_BUFFER, buffer);
+        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();
-        const newArray = new Float32Array(newCapacity * itemSize);
-        newArray.set(bufferData);
         gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
         gl.bufferData(gl.ARRAY_BUFFER, newCapacity * itemSize * 4, gl[bufferType]);
-        gl.bufferSubData(gl.ARRAY_BUFFER, 0, newArray);
+        gl.bufferSubData(gl.ARRAY_BUFFER, 0, bufferData);
         gl.bindBuffer(gl.ARRAY_BUFFER, null);
         this._capacity = newCapacity;
     }
@@ -151,13 +160,15 @@ export default class {
 
 
 
-    _removefromBuffer(gl, buffer, keys, block, byteOffset = 0) {
+    _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, this._emptyBlock());
+                gl.bufferSubData(gl.ARRAY_BUFFER, offset, emptyBlock);
             }
         }
         gl.bindBuffer(gl.ARRAY_BUFFER, null);

package/util/shaderfunctions/geometrytransformations.js

@@ -99,11 +99,11 @@ export const circleLimpFromLongLatRadCenterCartesian3D = R + `
 vec3 circleLimpFromLongLatRadCenterCartesian3D( vec2 center, float radius, float angle) {
     vec3 geoW = longLatRadToCartesian3D(center);
     vec3 normal = normalize(geoW);
-    vec3 tangent1 = cross(normal, vec3(0.0, 0.0, 1.0));
-    if ( length(tangent1) < 0.1 ){ tangent1 = cross(normal, vec3(0.0, 1.0, 0.0)); }
+    vec3 tangent1 = cross(normal, vec3(0.0, 0.0, -1.0));
+    if ( length(tangent1) < 0.1 ){ tangent1 = cross(normal, vec3(0.0, -1.0, 0.0)); }
     tangent1 = normalize(tangent1);
     // rotate tangent with given angle
-    tangent1 = cos(angle) * tangent1 + sin(angle) * cross(normal, tangent1);
+    tangent1 =  cos(angle) * tangent1 - sin(angle) * cross(normal, tangent1);
     return (geoW * cos(radius/R))+ tangent1 * radius / 1000.0;
     }
 `;
@@ -113,12 +113,12 @@ export const circleLimpFromLongLatRadCenterMercatorRealDistance = `
 vec2 circleLimpFromLongLatRadCenterMercatorRealDistance(vec2 center, float radius, float angle){
     
     float radius_radian =  radius / R;
-    float lat = center.y + radius_radian * sin(angle);
+    float lat = center.y - radius_radian * sin(angle);
 
     float scale = 1.0/abs( cos( lat ) );
     vec2 center_ = longLatRadToMercator(center);
-    float x = center_.x +  scale * radius * cos(angle);
-    float y = center_.y +  scale * radius * sin(angle);
+    float x = center_.x + scale * radius * cos(angle);
+    float y = center_.y - scale * radius * sin(angle);
     return vec2(x, y);
 }
 `;
@@ -127,7 +127,7 @@ vec2 circleLimpFromLongLatRadCenterMercatorRealDistance(vec2 center, float radiu
 export const circleLimpFromLongLatRadCenterMercatorCompass = `
 vec2 circleLimpFromLongLatRadCenterMercatorCompass(vec2 center, float radius, float angle){
     vec2 center_ = longLatRadToMercator(center);
-    float y = sin(angle) * radius + center_.y;
+    float y = -sin(angle) * radius + center_.y;
     float x = cos(angle) * radius + center_.x;
     return vec2(x, y);
 }`;