@pirireis/webglobeplugins 0.8.2 → 0.8.4

package/algorithms/search-binary.js

@@ -0,0 +1,14 @@
+const findFirstIndexInRange = (container, value) => {
+    let start = 0;
+    let end = container.length - 1;
+    let mid = 0;
+    while (start <= end) {
+        mid = Math.floor((start + end) / 2);
+        if (container[mid] <= value && value <= container[mid + 1]) return mid;
+        if (container[mid] < value) start = mid + 1;
+        else end = mid - 1;
+    }
+    return null;
+}
+
+export { findFirstIndexInRange };

package/depth-locator/readme.md

@@ -0,0 +1,26 @@
+# Programs
+
+1) points with depth (3d/2d), draw to framebuffer and use this until projection or data changes, has picking
+2) glow hearth-beat effect points on the target point
+3) glow plane effect on surface projection of target point
+4) a line from the target point to the surface
+5) info box on the target point
+
+all except 1 are optional
+
+# Inputs
+
+1) Target point ( long, lat, depth in meter)
+2) info box content
+
+# Derived Cases
+
+## Time dimension
+
+Either:
+1) load all points at once ordered by time. Draw range of points
+2) Select points on time window and load them. Draw them
+
+Approach 1 is simple yet it needs time series as input.
+Approach 2 flexible, memory efficient. Client side is complex.
+

package/package.json

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

package/point-tracks/plugin.js

@@ -33,6 +33,7 @@ class PointTracksPlugin {
         this._opacity = opacity;
         this.program = null
         this._lastWH = { w: 0, h: 0 };
+        this._focusParams = { on: false, length: 0, elementBuffer: null };
         this.pointSizes = {
             pointSize,
             selectionPointFilling,
@@ -47,6 +48,7 @@ class PointTracksPlugin {
         this.gl = gl;
         this._pickerDisplayer = new PickerDisplayer(globe);
         this._pointProgram = pointOnGlobeProgramCache.get(globe);
+        this._focusParams.elementBuffer = gl.createBuffer();
         this._initBufferManagers();
     }
 
@@ -161,13 +163,20 @@ class PointTracksPlugin {
             throw new Error("Too many points, Point count cannot exceed 2147483647");
         }
         const { _bufferManagersMap, _bufferOrchestrator } = this;
-        console.log("point tracks plugin insert bulk", flattenedPoints);
         _bufferOrchestrator.insertBulk(flattenedPoints, _bufferManagersMap);
         this.globe?.DrawRender();
 
     }
 
 
+    flush() {
+        const capacity = 100
+        this._bufferOrchestrator?.flush({ capacity });
+        this._bufferManagersMap.forEach(({ bufferManager }) => bufferManager.resetWithCapacity(capacity));
+        this._tracksToPointsMap.clear();
+        this.globe?.DrawRender();
+    }
+
     /**
      * @param {string} trackID
      */
@@ -184,6 +193,17 @@ class PointTracksPlugin {
         this.globe?.DrawRender();
     }
 
+    focusTracks(trackIDs = null) {
+        if (!this.globe) return;
+        if (!trackIDs) {
+            this._focusParams.on = false;
+            this.globe?.DrawRender();
+            return;
+        }
+
+        this._focusParams.on = this._fillElementBuffer(trackIDs);
+        this.globe.DrawRender();
+    }
 
     /**
      * @param {string} trackID
@@ -206,6 +226,7 @@ class PointTracksPlugin {
         this._isFreed = true;
         this._pickerDisplayer.free();
         pointOnGlobeProgramCache.release(this.globe);
+        this.gl.deleteBuffer(this._focusParams.elementBuffer);
         this._bufferManagersMap.forEach(
             ({ bufferManager, adaptor }) => bufferManager.free()
         );
@@ -218,17 +239,28 @@ class PointTracksPlugin {
 
         _pickerDisplayer.bindFBO();
         _pickerDisplayer.clearTextures();
-        _pointProgram.draw(_vao, _bufferOrchestrator.length,
-            {
-                hoveredID: this._selectedID,
-                opacity: this._opacity,
-                pointSize: this.pointSizes.pointSize,
-                hoveredPointSize: this.pointSizes.hoveredPointSize
-
-            });
-        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
 
+        if (this._focusParams.on) {
+            _pointProgram.draw(_vao, this._focusParams.length,
+                {
+                    hoveredID: this._selectedID,
+                    opacity: this._opacity,
+                    pointSize: this.pointSizes.pointSize,
+                    hoveredPointSize: this.pointSizes.hoveredPointSize,
+                    elementBuffer: this._focusParams.elementBuffer
+                });
+        } else {
+            _pointProgram.draw(_vao, _bufferOrchestrator.length,
+                {
+                    hoveredID: this._selectedID,
+                    opacity: this._opacity,
+                    pointSize: this.pointSizes.pointSize,
+                    hoveredPointSize: this.pointSizes.hoveredPointSize
+                });
+        }
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
         _pickerDisplayer.drawColorTexture();
+
         this._selfSelect();
     }
 
@@ -237,7 +269,6 @@ class PointTracksPlugin {
         const w = this.globe.api_ScrW();
         const h = this.globe.api_ScrH();
         if (w === this._lastWH.w && h === this._lastWH.h) return;
-        console.log("point tracks plugin resize", w, h);
 
         this._lastWH.w = w;
         this._lastWH.h = h;
@@ -280,6 +311,35 @@ class PointTracksPlugin {
         });
 
     }
+
+
+    _fillElementBuffer(trackIDs) {
+
+        let length = 0;
+        const indexes = [];
+
+        for (const trackID of trackIDs) {
+            const pointSet = this._tracksToPointsMap.get(trackID);
+            if (!pointSet) continue;
+            const points = Array.from(pointSet);
+            for (const pointID of points) {
+                const key = keyMethod(trackID, pointID);
+                const index = this._bufferOrchestrator.offsetMap.get(key);
+                indexes.push(index);
+                length++;
+            }
+        }
+        this._focusParams.length = length;
+        if (length === 0) {
+            return false;
+        }
+        const { gl } = this;
+        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this._focusParams.elementBuffer);
+        gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint32Array(indexes), gl.STATIC_DRAW);
+        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
+        return true;
+    }
+
 }
 
 

package/programs/point-on-globe/square-pixel-point.js

@@ -135,7 +135,7 @@ class PointOnGlobeProgram {
     }
 
 
-    draw(vao, length, { opacity = 1.0, hoveredID = -1, pointSize = 2.0, hoveredPointSize = 4.0 } = {}) {
+    draw(vao, length, { opacity = 1.0, hoveredID = -1, pointSize = 2.0, hoveredPointSize = 4.0, elementBuffer = null } = {}) {
         if (length === 0 || opacity === 0) return;
         const { gl, program, uniforms } = this;
         gl.useProgram(program);
@@ -157,12 +157,19 @@ class PointOnGlobeProgram {
         }
         gl.bindVertexArray(vao);
         this.cameraBlockTotem.bind(this.cameraBlockBingingPoint);
-        gl.drawArrays(gl.POINTS, 0, length);
+        if (elementBuffer) {
+            gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, elementBuffer);
+            gl.drawElements(gl.POINTS, length, gl.UNSIGNED_INT, 0);
+            gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
+        } else {
+            gl.drawArrays(gl.POINTS, 0, length);
+        }
         this.cameraBlockTotem.unbind(this.cameraBlockBingingPoint);
         gl.bindVertexArray(null);
     }
 
 
+
     free() {
         if (this._isFreed) return;
         const { gl, globe } = this;

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

@@ -111,7 +111,6 @@ export class BufferOrchestrator {
     }
 
 
-
     getOffset(key) {
         return this.offsetMap.get(key);
     }
@@ -166,8 +165,9 @@ export class BufferOrchestrator {
      * Flushes metadata and sets length to 0 without actualize change on buffers
      * This method created for cases in which data is loaded on each frame
      */
-    flush() {
+    flush({ capacity = 10 } = {}) {
         this._length = 0;
+        this._capacity = capacity;
         this.tombstoneOffSet = []
         this.offsetMap.clear();
     }

package/wind/plugin.js

@@ -327,6 +327,32 @@ const defaultRampColors = [
 ];
 
 
+const windyLegendData = {
+    "thresholds": [0, 3, 3, 5, 5, 7, 10, 10, 13, 15, 15, 17, 20, 20, 25, 25, 30],
+    //  0 5 10 20 30 40 60
+    // "thresholds": [0, 5, 5, 10, 10, 15, 15, 20, 20, 25, 25, 30, 30, 35, 40, 60],
+    "values": [
+        "#6271B8",
+        "#6271B8",
+        "#6271B8",
+        "#6271B8",
+        "#3D6EA3",
+        "#4A94AA",
+        "#4A9294",
+        "#4D8E7C",
+        "#4CA44C",
+        "#67A436",
+        "#A28740",
+        "#A26D5C",
+        "#8D3F5C",
+        "#974B91",
+        "#5F64A0",
+        "#5B88A1",
+        "#5B88A1"
+    ]
+};
+
+
 export default class WindPlugin {
 
     /**
@@ -355,7 +381,7 @@ export default class WindPlugin {
         maxSpeed = 1000.0,
         height = 0.0,
         numParticles = 40000,
-        legendData = null
+        legendData = windyLegendData
     } = {}) {
 
         this.id = id;