@pirireis/webglobeplugins 0.1.10 → 0.3.0

package/util/account/single-attribute-buffer-management/buffer-orchestrator.js

@@ -0,0 +1,256 @@
+
+
+/**
+ * OffsetManager
+ * 1) Capacity
+ * 2) Offset account
+ * 3) Command Buffers in its regisration list. 
+ * 
+ * How insertBulk works:
+ * 0) autoExtendBuffers..
+ * 1) assign offset to all keys if not already assigned.
+ * 2) send item list to each buffer manager and let them do their job. 
+ *          This cannot work. BufferManager does not know the which data to insert.
+ *          Solutions:
+ *          1) selectMethod: insertBulk(items, offsets, selectMethod)
+ *             selectMethod(item) => itemToBlock(item)
+ *          2) att1manager.insertBulk(items.map(item => this.att1ItemToBlock(item)), offsets)
+ *   Idea about future:
+ *      insert first tombstone.length items one by one.
+ *      insert the rest in a big float32array. IT CAN BE DONE
+ * 3) DrawRender
+ * 
+ * How autoExtendBuffers works:
+ * 1) if incoming items length is greater then space left in buffer, calculate new capacity and extend all buffers.
+ * 
+ * 
+ 
+*/
+
+
+
+/**
+ * Scratchpad
+ * 
+ * plugin insertBulk(items){
+ *  this.offsetManager.autoExtendBuffers(items.length);
+ *  this.offsetManager.assignOffsets(items); // read item.keys and assign offsets to them.
+ *  this.attrib1BufferManager.insertBulk(items.map(item => this.attrib1Block(item)), ); 
+ *  this.attrib2BufferManager.insertBulk();
+ *  if (this.attrib3isInNeed) this.attrib3BufferManager.insertBulk(items);
+ *  this.globe.DrawRender();
+ * }
+ * 
+ * useTheCaseThatRequiresAttrib3(){
+ *  // generate items from other buffers if possible.
+ * }
+ * 
+ * 
+ * assignOffsets(items){
+ * for (const item of items){
+ * const offset = this.offsetManager.getOffset(item.key) || this.offsetManager.nextOffset();
+ * item.__offset__ = offset;
+ * 
+ * allBuffers = [attrib1BufferManager, attrib2BufferManager, attrib3BufferManager]
+ *  // // not single responsibility .. 
+ * defrag(allBuffers){
+ *  for (const bufferManager of allBuffers){
+ *     bufferManager.defrag(this.offsetManager.offsetMap);
+ *  }
+ *  this.offsetManager._defrag();  
+ * }
+ * 
+ */
+
+
+/**
+ * 
+ * attrib1BufferManager.insertBulk( items) { 
+ *  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+ *  for (const item of items) {
+ *      const block = this.itemToBlock(item); // this changes based on inserted data structure and expected block structure.
+ *      gl.bufferSubData(gl.ARRAY_BUFFER, item.__offset__, block);
+ *  }
+ * gl.bindBuffer(gl.ARRAY_BUFFER, null);
+ * }
+ * 
+ * deleteBulk(offsets){
+ *  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+ * for (const offset of offsets) {
+ * gl.bufferSubData(gl.ARRAY_BUFFER, offset, emptyBlock);
+ * }
+ * gl.bindBuffer(gl.ARRAY_BUFFER, null);
+ * }
+ * 
+ * 
+ * // 
+ * defrag(offsetMap){
+ *  const newArray = new Float32Array(itemCount * itemSize);
+ *  const bufferData = this._getBufferData();
+ *  let newOffSet = 0;
+ *  for (const [key, offSet] of offsetMap) {
+ *     const bufferOffset = offset;
+ *    newArray.set(bufferData.slice(bufferOffset, bufferOffset + itemSize), newOffSet);
+        newOffset += itemSize * 4;
+    }
+    *
+    * gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+    * 
+ * }
+ * 
+ * ---------------- 
+ 
+ */
+
+export class BufferOrchestrator {
+
+    constructor({ capacity = 10 } = {}) {
+        this._capacity = capacity;
+        this.offsetMap = new Map();
+        this.tombstoneOffsets = [];
+        this._length = 0;
+    }
+
+
+    resetWithCapacity(bufferManagersMap, capacity = null) {
+        this._capacity = capacity !== null ? capacity : this._capacity;
+        for (const [key, { bufferManager }] of bufferManagersMap) {
+            bufferManager.resetWithCapacity(this._capacity);
+        }
+        this.offsetMap.clear();
+        this.tombstoneOffsets = [];
+        this._length = 0;
+    }
+
+    insertBulk(items, bufferManagersMap) {
+        this.autoExtendBuffers(items.length, bufferManagersMap);
+        const { offsetMap } = this;
+        const offsets = [];
+        for (const item of items) {
+            const offset = offsetMap.get(item.key) || this.nextOffset();
+            offsetMap.set(item.key, offset);
+            offsets.push(offset);
+        }
+        for (const [key, { bufferManager, adaptor }] of bufferManagersMap) {
+            bufferManager.insertBulk(items.map(adaptor), offsets);
+        }
+    }
+
+
+    // doesnot assign offset to the new items.
+    updateBulk(items, bufferManagersMap, bufferKeys) {
+        const { offsetMap } = this;
+        const offsets = [];
+        for (const item of items) {
+            const offset = offsetMap.get(item.key);
+            offsets.push(offset);
+        }
+        if (bufferKeys) {
+            for (const key of bufferKeys) {
+                const { bufferManager, adaptor } = bufferManagersMap.get(key);
+                bufferManager.insertBulk(items.map(adaptor), offsets);
+            }
+        } else {
+            for (const [key, { bufferManager, adaptor }] of bufferManagersMap) {
+                bufferManager.insertBulk(items.map(adaptor), offsets);
+            }
+        }
+
+    }
+
+
+    deleteBulk(keys, bufferManagersMap) {
+        const offsets = [];
+        for (const key of keys) {
+            const offset = this.getOffset(key);
+            if (offset !== undefined) {
+                offsets.push(offset);
+                this.offsetMap.delete(key);
+                this.tombstoneOffsets.push(offset);
+            }
+        }
+        for (const [key, { bufferManager }] of bufferManagersMap) {
+            bufferManager.deleteBulk(offsets);
+        }
+        console.log("deleteBulk after item size", this.offsetMap.size);
+    }
+
+
+
+    getOffset(key) {
+        return this.offsetMap.get(key);
+    }
+
+    nextOffset() {
+        if (this.tombstoneOffsets.length > 0) {
+            const offset = this.tombstoneOffsets.pop();
+            return offset;
+        }
+        if (this._length < this._capacity) {
+            return this._length++;
+        }
+        return false;
+    }
+
+
+    autoExtendBuffers(itemsLength, bufferManagersMap) {
+        if (itemsLength <= this.emptySpace) return;
+        const newCapacity = this.length + itemsLength;
+        console.log("autoExtendBuffers", "item L", itemsLength, "E space", this.emptySpace, "cap", this.capacity, "length", this.length, 'new Cap', newCapacity);
+        for (const [key, { bufferManager }] of bufferManagersMap) {
+            console.log("length", this.length, "newCapacity", newCapacity);
+            bufferManager.extendBuffer(this.length, newCapacity);
+        }
+        this._capacity = newCapacity;
+    }
+
+
+    defrag(bufferManagers, bufferKeys) { // TODO defrag and leave some empty space
+        const offsetMap = this.offsetMap;
+        console.log("defrag size", offsetMap.size, "cap", this.capacity, "length", this.length);
+        if (bufferKeys) {
+            for (const key of bufferKeys) {
+                const offset = offsetMap.get(key);
+                if (offset !== undefined) {
+                    for (const [key, { bufferManager }] of bufferManagers) {
+                        bufferManager.defrag([offset], this.length, offsetMap.size);
+                    }
+                }
+            }
+        } else {
+            for (const [key, { bufferManager }] of bufferManagers) {
+                bufferManager.defrag(offsetMap.values(), this.length, offsetMap.size);
+            }
+        }
+        this._defrag();
+        this._length = this._capacity = offsetMap.size;
+        this.tombstoneOffsets = [];
+    }
+
+
+
+    _defrag() {
+        const newOffsetMap = new Map();
+        let newOffset = 0;
+        for (const [key, offset] of this.offsetMap) {
+            console.log("defrag", key, offset, newOffset);
+            newOffsetMap.set(key, newOffset++);
+        }
+        this.offsetMap = newOffsetMap
+    }
+
+    get length() {
+        return this._length;
+    }
+
+    get emptySpace() {
+        return this._capacity - this.offsetMap.size;
+    }
+
+    get capacity() {
+        return this._capacity;
+    }
+}
+
+
+

package/util/account/single-attribute-buffer-management/index.js

@@ -0,0 +1,4 @@
+import { BufferOrchestrator } from "./buffer-orchestrator";
+import { BufferManager } from "./buffer-manager";
+
+export { BufferOrchestrator, BufferManager };

package/util/account/util.js

@@ -0,0 +1,9 @@
+export const vaoAttributeLoader = (gl, buffer, position, length, stride, offset, divisor = null) => {
+    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+    gl.enableVertexAttribArray(position);
+    gl.vertexAttribPointer(position, length, gl.FLOAT, false, stride, offset);
+    if (divisor !== null) {
+        gl.vertexAttribDivisor(position, divisor);
+    }
+
+}

package/util/shaderfunctions/geometrytransformations.js

@@ -11,7 +11,7 @@ export const POLE = `
 
 export const R = `
 #ifndef R
-#define R 6378136.99911
+#define R 6378137.0
 #endif
 `;
 
@@ -23,13 +23,13 @@ export const PI = `
 
 export const POLE_BY_PI = ` 
 #ifndef POLE_BY_PI
-#define POLE_BY_PI 6378136.99911
+#define POLE_BY_PI 6378137.0
 #endif
 `;
 
 export const R_3D = `
 #ifndef R_3D
-#define R_3D 6378.137699911
+#define R_3D 6378.137
 #endif
 `;
 
@@ -55,9 +55,9 @@ vec2 pixelXYToCartesian2DPoint( vec2 position, vec2 translate, vec2 mapWH, vec2
 }
 `;
 
-
-export const mercatorXYTo2DPoint = `
-vec4 mercatorXYTo2DPoint( vec2 position) { // projection, translate, mapWH, screenWH comes from camera uniform block
+// TODO: rename it to mercatorXYToGLPosition
+export const mercatorXYToGLPosition = `
+vec4 mercatorXYToGLPosition( vec2 position) { // projection, translate, mapWH, screenWH comes from camera uniform block
     float x = (( position.x - translate.x ) / mapWH.x) * screenWH.x;
     float y = (1.0 - (position.y - translate.y) / mapWH.y) * screenWH.y;
     return projection * vec4(x, y, 0.0, 1.0);
@@ -159,3 +159,104 @@ 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;
+}
+`
+
+const circumferencePoints = `
+vec2 circumferencePoints(vec2 center, vec2 target, vec2 target2, float phase) {
+    // 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 + length(target - center) * result;
+}
+`
+
+
+export const realDistanceOnSphereR1 = `
+float realDistanceOnSphereR1(vec2 longLat1, vec2 longLat2) {
+    float dLat = longLat2.y - longLat1.y;
+    float dLong = longLat2.x - longLat1.x;
+    float a = sin(dLat / 2.0) * sin(dLat / 2.0) + cos(longLat1.y) * cos(longLat2.y) * sin(dLong / 2.0) * sin(dLong / 2.0);
+    float c = 2.0 * atan(sqrt(a), sqrt(1.0 - a));
+    return c;
+}
+`;

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);
+
         }
 
         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/write-text/context-text.js

@@ -0,0 +1,86 @@
+import { CSZMode } from "@pirireis/webglobe";
+
+const defaultStyle = {
+    textFont: {
+        name: 'Arial',
+        textColor: '#FFFFFF', // beyaz
+        hollowColor: '#000000', // siyah
+        size: 12, // piksel
+        hollow: true,
+        bold: true,
+        italic: false,
+    },
+    opacity: 1.0,
+    zMode: CSZMode.Z_GROUND_PERVERTEX,
+}
+
+export class ContextTextWriter {
+    constructor(globe, { style = null } = {}) {
+        this.globe = globe;
+        this.itemMap = new Map();
+        this.style = style || defaultStyle;
+    }
+
+    setStyle(style) {
+        this.style = style;
+    }
+
+
+    draw() {
+        const { globe, style, itemMap } = this;
+        const { textFont, opacity } = style;
+        for (const [key, { lat, long, text }] of itemMap) {
+            const { x, y } = globe.api_GetScreenPointFromGeo(
+                {
+                    long: long,
+                    lat: lat,
+                    z: 0,
+                },
+                style.zMode === CSZMode.Z_MSL,
+            );
+
+            globe.api_DrawContextTextMultiLine(text, textFont, opacity, { x, y });
+        }
+    }
+
+
+    insertText(key, lat, long, text) {
+        this.itemMap.set(key, { lat, long, text });
+    }
+
+
+    updateText(key, text) {
+        const item = this.itemMap.get(key);
+        item.text = text;
+    }
+
+    updateCoords(key, lat, long) {
+        const item = this.itemMap.get(key);
+        item.lat = lat; item.long = long;
+    }
+
+
+    insertTextBulk(items) {
+        for (const item of items) {
+            this.itemMap.set(item.key, item);
+        }
+    }
+
+    updateTextCoordsBulk(items) {
+        for (const { key, lat, long } of items) {
+            const item = this.itemMap.get(key);
+            item.lat = lat; item.long = long;
+        }
+    }
+
+
+    deleteTextBulk(keys) {
+        for (const key of keys) {
+            this.itemMap.delete(key);
+        }
+    }
+
+    clear() {
+        this.itemMap.clear();
+    }
+}

package/write-text/index.js

@@ -0,0 +1 @@
+export { ContextTextWriter } from "./context-text";