@pirireis/webglobeplugins 0.7.5 → 0.8.1

package/Math/methods.js

@@ -147,6 +147,31 @@ const wgs84ToUnitVector = (coordinates) => {
     return [x, y, z];
 }
 
+/**
+ * @param {number} long wgs84
+ * @param {number} lat wgs84
+ * @param {number} height
+ * @returns {vec3} cartesian3D
+ */
+const wgs84ToCartesian3d = (long, lat, height) => {
+    const longRad = long * RADIANS;
+    const latRad = lat * RADIANS;
+    const x = Math.cos(latRad) * Math.cos(longRad);
+    const y = Math.cos(latRad) * Math.sin(longRad);
+    const z = Math.sin(latRad);
+    const radius = WORLD_RADIUS_3D + height;
+    return [x * radius, y * radius, z * radius];
+}
+
+/**
+ * @param {number} long
+ * @param {number} lat
+ * @returns {vec2} mercator
+ */
+const wgs84ToMercator = (long, lat) => {
+    return [WORLD_RADIUS_MERCATOR * long * RADIANS, WORLD_RADIUS_MERCATOR * Math.log(Math.tan(Math.PI / 4 + lat * RADIANS / 2))];
+}
+
 
 /**
  * @param {vec3} cartesian
@@ -190,6 +215,8 @@ export {
     sphericalLinearInterpolation_Mercator,
     sphericalLinearInterpolation_Cartesian3d,
     wgs84ToUnitVector,
+    wgs84ToCartesian3d,
+    wgs84ToMercator,
     cartesian3dToUnitVectorWithHeight,
     pixelXYLenghtToUnitVectorWithHeight
 }

package/package.json

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

package/point-heat-map/point-to-heat-map-flow.js

@@ -1,6 +1,6 @@
 import { densityToLegendProgramCache } from "../programs/data2legend/density-to-legend";
 import { pointToDensityTextureCache } from "../programs/data2legend/point-to-density-texture";
-import { textureOnCanvasProgramCache } from "../util/programs/draw-texture-on-canvas";
+// import { textureOnCanvasProgramCache } from "../util/programs/draw-texture-on-canvas";
 import { defaultblendfunction } from "../util/webglobe/gldefaultstates";
 class PointHeatmapFlow {
 
@@ -13,7 +13,7 @@ class PointHeatmapFlow {
         this.gl = globe.gl;
         this.pointToDensityProgram = pointToDensityTextureCache.get(globe);
         this.densityToLegendProgram = densityToLegendProgramCache.get(globe);
-        // this.testTextureProgram = textureOnCanvasProgramCache.get(globe);
+        // this.testTextureProgram = textureOnCanvasProgramCache.get(globe.gl);
         this._lookInfo = globe.api_GetCurrentLookInfo();
         const { gl } = this;
         {
@@ -143,6 +143,7 @@ class PointHeatmapFlow {
         this._isFreed = true;
         densityToLegendProgramCache.release(this.globe);
         pointToDensityTextureCache.release(this.globe);
+        // textureOnCanvasProgramCache.release(this.gl);
         this.gl.deleteTexture(this.densityTexture);
         this.gl.deleteFramebuffer(this.framebuffer);
         this.gl.deleteBuffer(this.buffer);

package/point-tracks/plugin.js

@@ -1,20 +1,43 @@
-import { BufferOrchestrator, BufferManager } from "../util/account";
+import { BufferOrchestrator, BufferManager, ObjectStore } from "../util/account";
 
+import { PickerDisplayer } from "../util/picking/picker-displayer";
+import { pointOnGlobeProgramCache } from "../programs/point-on-globe/square-pixel-point";
+
+import { wgs84ToCartesian3d, wgs84ToMercator } from "../Math/methods";
 
 /**
- * 
+ * @typedef {number} long
+ * @typedef {number} lat
+ * @typedef {number} height
+ * @typedef {string} ID
+ * @typedef {string} trackID
+ * @typedef {[number, number, number, number]} rgba 0-1
  * @typedef { long ,lat, height, ID } Point
- * @typedef {Array<Point>, rgba, TrackID} Track
+ * @typedef {Array<Point>, rgba, trackID} Track
  */
 
+
 class PointTracksPlugin {
 
-    constructor(id, { } = {}) {
+    constructor(id, { pointSize = 2, hoveredPointSize = 4, selectionPointFilling = 4, opacity = 1.0 } = {}) {
         this.id = id;
         this._isFreed = false;
-        this._tracksInfoMap = new Map();
-
+        this._pointProgram = null
+        this._vao = null;
+        this._bufferManagersMap = null;
+        this._bufferOrchestrator = null;
+        this._pickerDisplayer = null
+        this._selectedID = -1;
+        this._selectedObj = null;
+        this._tracksToPointsMap = new Map(); // one to many
+        this._opacity = opacity;
         this.program = null
+        this._lastWH = { w: 0, h: 0 };
+        this.pointSizes = {
+            pointSize,
+            selectionPointFilling,
+            hoveredPointSize
+        }
     }
 
 
@@ -22,59 +45,265 @@ class PointTracksPlugin {
 
         this.globe = globe;
         this.gl = gl;
-
+        this._pickerDisplayer = new PickerDisplayer(globe);
+        this._pointProgram = pointOnGlobeProgramCache.get(globe);
         this._initBufferManagers();
     }
 
-    _initBufferManagers() {
-
 
+    _initBufferManagers() {
         const { gl } = this;
         const initialCapacity = 10;
-
+        const bufferType = "DYNAMIC_DRAW";
         this._bufferOrchestrator = new BufferOrchestrator({ initialCapacity });
         this._bufferManagersMap = new Map(
             [
-                ["pos3D", new BufferManager(gl, 3, { bufferType: gl.ARRAY_BUFFER, initialCapacity })],
-                ["pos2D", new BufferManager(gl, 2, { bufferType: gl.ARRAY_BUFFER, initialCapacity })],
-                ["rgba", new BufferManager(gl, 4, { bufferType: gl.ARRAY_BUFFER, initialCapacity })],
+                ["pos3D", {
+                    bufferManager: new BufferManager(gl, 3, { bufferType, initialCapacity }),
+                    adaptor: (item) => new Float32Array(wgs84ToCartesian3d(item.long, item.lat, item.height))
+                }],
+                ["pos2D", {
+                    bufferManager: new BufferManager(gl, 2, { bufferType, initialCapacity }),
+                    adaptor: (item) => new Float32Array(wgs84ToMercator(item.long, item.lat))
+                }],
+                ["rgba", {
+                    bufferManager: new BufferManager(gl, 4, { bufferType, initialCapacity }),
+                    adaptor: (item) => item.rgba
+                }],
+                ["objectStore", {
+                    bufferManager: new ObjectStore({ initialCapacity }),
+                    adaptor: (item) => {
+                        return {
+                            trackID: item.trackID, pointID: item.pointID
+                        }
+                    }
+                }]
             ]
         );
 
-        this._vao = this.program.createVAO(
-            this._bufferManagersMap.get("pos3D"),
-            this._bufferManagersMap.get("pos2D"),
-            this._bufferManagersMap.get("rgba"),
+        this._vao = this._pointProgram.createVAO(
+            this._bufferManagersMap.get("pos3D").bufferManager.buffer,
+            this._bufferManagersMap.get("pos2D").bufferManager.buffer,
+            this._bufferManagersMap.get("rgba").bufferManager.buffer,
         );
+    }
+
 
+    setPointSize(size) {
+        this.pointSizes.pointSize = size;
+        this.globe?.DrawRender();
+    }
 
+    setSelectionPointFilling(size) {
+        this.pointSizes.selectionPointFilling = size;
+        this.globe?.DrawRender();
     }
 
+    setHoveredPointSize(size) {
+        this.pointSizes.hoveredPointSize = size;
+        this.globe?.DrawRender();
+    }
+
+    setOpacity(opacity) {
+        if (opacity < 0 || opacity > 1) return;
+        this._opacity = opacity;
+        this.globe?.DrawRender();
+    }
+
+    getCurrentSelection() {
+        return this._selectedObj;
+    }
 
 
     /**
      * 
+     * @param {*} x screen x
+     * @param {*} y screen y
+     * @param {*} callback callback on selection
+     */
+    screenSelection(x, y, callback) {
+        const { pointSizes, _pickerDisplayer } = this;
+        const objectStore = this._bufferManagersMap.get("objectStore").bufferManager;
+        const wrapper = (selectedIDsSet) => {
+            const selectedIDs = Array.from(selectedIDsSet);
+            if (selectedIDs.length === 0) {
+                this._selectedObj = null;
+                this._selectedID = -1;
+                callback([]);
+                return;
+            }
+            const selectedPoints = [];
+            for (let i = 0; i < selectedIDs.length; i++) {
+                const id = selectedIDs[i];
+                if (i === 0) {
+                    this._selectedID = id;
+                    this._selectedObj = objectStore.get(id);
+                }
+                const obj = objectStore.get(id);
+                selectedPoints.push(obj);
+            }
+
+            callback(selectedPoints);
+        }
+        _pickerDisplayer.pickXY(x, y, pointSizes.selectionPointFilling, wrapper);
+    }
+
+
+    /**
      * @param {Array<Track>} tracks 
-     *
      * @returns 
      */
     insertBulk(tracks) {
-        const { _bufferManagersMap, _bufferOrchestrator, _tracksInfoMap } = this;
+        this._fillTracksToPointsMap(tracks);
+        const flattenedPoints = tracks.map(trackToFlatPoints).flat();
+        const currentLoad = this._bufferOrchestrator.length;
+        if (currentLoad + flattenedPoints.length >= 2147483647) {
+            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();
 
-        const { pos3DIndex, pos2DIndex, rgbaIndex } = _bufferOrchestrator.insertBulk(tracks);
-        const trackID = tracks[0].trackID;
-        _tracksInfoMap.set(trackID, { pos3DIndex, pos2DIndex, rgbaIndex });
-        return trackID;
     }
 
 
+    /**
+     * @param {string} trackID
+     */
+    deleteTrack(trackID) {
+        const pointSet = this._tracksToPointsMap.get(trackID);
+        const points = Array.from(pointSet);
+        const { _bufferOrchestrator, _bufferManagersMap } = this;
+        _bufferOrchestrator.deleteBulk(
+            points.map((pointID) => keyMethod(trackID, pointID)),
+            _bufferManagersMap
+        );
+        this._tracksToPointsMap.delete(trackID);
+        this._redraw = true;
+        this.globe?.DrawRender();
+    }
+
+
+    /**
+     * @param {string} trackID
+     * @param {Array<string>} pointIDs
+     */
+    deletePoints(trackID, pointIDs) {
+        const { _bufferOrchestrator, _bufferManagersMap } = this;
+        _bufferOrchestrator.deleteBulk(
+            pointIDs.map((pointID) => keyMethod(trackID, pointID)),
+            _bufferManagersMap
+        );
+        this._deletePointsFromTracksMap(trackID, pointIDs);
+        this.globe?.DrawRender();
+    }
+
+    // GLOBE API METHODS
+
     free() {
         if (this._isFreed) return;
         this._isFreed = true;
+        this._pickerDisplayer.free();
+        pointOnGlobeProgramCache.release(this.globe);
+        this._bufferManagersMap.forEach(
+            ({ bufferManager, adaptor }) => bufferManager.free()
+        );
+    }
+
+
+    draw3D() {
+        const { gl, _pointProgram, _pickerDisplayer, _bufferOrchestrator, _vao } = this;
+        this.resize();
+
+        _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);
+
+        _pickerDisplayer.drawColorTexture();
+        this._selfSelect();
+    }
+
+
+    resize() {
+        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;
+        this._pickerDisplayer.resize();
+        this.globe?.DrawRender();
+    }
+
+    // IMPLICIT METHODS
+
+    _fillTracksToPointsMap(tracks) {
+        for (const track of tracks) {
+            const trackID = track.trackID;
+            const points = track.points;
+            if (!this._tracksToPointsMap.has(trackID)) {
+                this._tracksToPointsMap.set(trackID, new Set());
+            }
+            const pointSet = this._tracksToPointsMap.get(trackID);
+            for (let p = 0; p < points.length; p++) {
+                const pointID = points[p].ID;
+                pointSet.add(pointID);
+            }
+        }
+    }
+
+
+    _deletePointsFromTracksMap(trackID, pointIDs) {
+        const trackSet = this._tracksToPointsMap.get(trackID);
+        for (const pointID of pointIDs) {
+            trackSet.delete(pointID);
+        }
     }
 
 
+    _selfSelect() {
+        const { globe } = this;
+        const pos = globe.api_GetMousePos();
+        const x = pos.canvasX;
+        const y = globe.api_ScrH() - pos.canvasY;
+        this.screenSelection(x, y, (selectedPoints) => {
+        });
+
+    }
+}
+
+
+const trackToFlatPoints = (track) => {
+
+    const trackID = track.trackID;
+    const points = track.points;
+    const rgba = new Float32Array(track.rgba);
+    const flatPoints = [];
+    for (const point of points) {
+        flatPoints.push({
+            key: keyMethod(trackID, point.ID),
+            long: point.long,
+            lat: point.lat,
+            height: point.height,
+            pointID: point.ID,
+            rgba,
+            trackID
+        });
+    }
+    return flatPoints;
+}
 
+const keyMethod = (trackID, pointID) => `${trackID}_${pointID}`;
 
 
-}
+export { PointTracksPlugin, keyMethod } 

package/programs/line-on-globe/lines-color-instanced-flat.js

@@ -62,7 +62,6 @@ in vec2 v_frame;
 out vec4 outColor;
 void main() {
     if ( v_frame.x < -POLE || v_frame.x > POLE || v_frame.y < -POLE || v_frame.y > POLE ){ discard; }
-
     outColor = v_color;
 }`;
 

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

@@ -11,14 +11,16 @@ ${cartesian3DToGLPosition}
 precision highp float;
 precision highp int;
 
-uniform int hovered_instanceID;
+uniform int hovered_vertexID; // can be removed
 
 in vec3 pos3D;
 in vec2 pos2D;
 in vec4 rgba;
 
+uniform float pointSize;
+uniform float hoveredPointSize;
 
-flat out highp int vInstanceID;
+flat out highp int vVertexID;
 
 
 out vec4 v_rgba;
@@ -31,29 +33,30 @@ void main() {
     else{
         gl_Position = mercatorXYToGLPosition(pos2D);
     }
-    if (hovered_instanceID == gl_InstanceID) {
-        gl_PointSize = 3.0;
+    if (hovered_vertexID == gl_VertexID) {
+        gl_PointSize = hoveredPointSize;
     } else {
-        gl_PointSize = 1.0;
+        gl_PointSize = pointSize;
+    }
     v_rgba = rgba;
+    vVertexID = gl_VertexID;
 }`;
 
 const fs = `#version 300 es
 precision highp float;
 
-uniform opacity;
-
-flat in highp int vInstanceID;
+uniform float opacity;
 
+flat in highp int vVertexID;
 in vec4 v_rgba;
 
 layout(location = 0) out vec4 fragColor;
-layout(location = 1) out int instanceID;
+layout(location = 1) out int vertexID;
 
 void main() {
+    vertexID = vVertexID; 
     fragColor = v_rgba;
     fragColor.a *= opacity;
-    instanceID = vInstanceID; 
 }`;
 
 
@@ -68,8 +71,26 @@ class PointOnGlobeProgram {
 
         const { gl, program } = this;
 
+
         this.uniforms = {
             opacity: gl.getUniformLocation(program, "opacity"),
+            hovered_vertexID: gl.getUniformLocation(program, "hovered_vertexID"),
+            hoveredPointSize: gl.getUniformLocation(program, "hoveredPointSize"),
+            pointSize: gl.getUniformLocation(program, "pointSize"),
+        }
+
+        { // assign opacity
+            this._lastOpacity = 1.0;
+            this._lastPointSize = 2.0;
+            this._lastHoveredPointSize = 4.0;
+            this._lastHoveredID = -1;
+            const currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
+            gl.useProgram(program);
+            gl.uniform1f(this.uniforms.opacity, this._lastOpacity);
+            gl.uniform1f(this.uniforms.pointSize, this._lastPointSize);
+            gl.uniform1f(this.uniforms.hoveredPointSize, this._lastHoveredPointSize);
+            gl.uniform1i(this.uniforms.hovered_vertexID, this._lastHoveredID);
+            gl.useProgram(currentProgram);
         }
 
         { // assign attribute locations
@@ -113,23 +134,35 @@ class PointOnGlobeProgram {
         return vao;
     }
 
-    draw(vao, length, { opacity = 1.0, frameBuffer = null } = {}) {
+
+    draw(vao, length, { opacity = 1.0, hoveredID = -1, pointSize = 2.0, hoveredPointSize = 4.0 } = {}) {
         if (length === 0 || opacity === 0) return;
         const { gl, program, uniforms } = this;
         gl.useProgram(program);
-        gl.uniform1f(uniforms.opacity, opacity);
-        gl.bindVertexArray(vao);
-        if (frameBuffer) {
-            gl.bindFramebuffer(gl.FRAMEBUFFER, frameBuffer);
-            gl.
-                gl.drawArrays(gl.POINTS, 0, length);
+        if (this._lastOpacity !== opacity) {
+            gl.uniform1f(uniforms.opacity, opacity);
+            this._lastOpacity = opacity;
+        }
+        if (this._lastPointSize !== pointSize) {
+            gl.uniform1f(uniforms.pointSize, pointSize);
+            this._lastPointSize = pointSize;
+        }
+        if (this._lastHoveredPointSize !== hoveredPointSize) {
+            gl.uniform1f(uniforms.hoveredPointSize, hoveredPointSize);
+            this._lastHoveredPointSize = hoveredPointSize;
         }
+        if (this._lastHoveredID !== hoveredID) {
+            gl.uniform1i(uniforms.hovered_vertexID, hoveredID);
+            this._lastHoveredID = hoveredID;
+        }
+        gl.bindVertexArray(vao);
         this.cameraBlockTotem.bind(this.cameraBlockBingingPoint);
         gl.drawArrays(gl.POINTS, 0, length);
         this.cameraBlockTotem.unbind(this.cameraBlockBingingPoint);
         gl.bindVertexArray(null);
     }
 
+
     free() {
         if (this._isFreed) return;
         const { gl, globe } = this;

package/rangerings/plugin.js

@@ -101,7 +101,8 @@ class RangeRings {
         this._ringAccount.updateCentersCoordinate(items);
         const { globe,
             bufferOrchestrator, bufferManagersCompMap,
-            paddingBufferOrchestrator, bufferManagersCompMapPadding
+            paddingBufferOrchestrator,
+            bufferManagersCompMapPadding
         } = this;
         for (const { centerID } of items) {
             const datas = this.__reconstructCentralRings(centerID);

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

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

package/util/account/single-attribute-buffer-management/object-store.js

@@ -0,0 +1,62 @@
+
+export class ObjectStore {
+    constructor({ initialCapcity = 10 } = {}) {
+        this._container = this._createEmptyList(initialCapcity);
+    }
+
+
+    resetWithCapacity(capacity) {
+        this._container = this._createEmptyList(capacity);
+    }
+
+
+    deleteBulk(offsets) {
+        for (let i = 0; i < offsets.length; i++) {
+            const offset = offsets[i];
+            if (offset !== undefined) {
+                this._container[offset] = null;
+            }
+        }
+    }
+
+
+    insertBulk(objects, offsets) {
+        for (let i = 0; i < objects.length; i++) {
+            const object = objects[i];
+            const offset = offsets[i];
+            if (offset !== undefined) {
+                this._container[offset] = object;
+            }
+        }
+    }
+
+    defrag(offsetValues, occupiedCapacity, newCapacity) {
+
+        const hold = this._createEmptyList(newCapacity);
+        for (let i = 0; i < offsetValues.length; i++) {
+            const offset = offsetValues[i];
+            if (offset !== undefined) {
+                hold[i] = this._container[offset];
+            }
+        }
+        this._container = hold;
+    }
+
+    extendBuffer(occupiedCapacity, newCapacity) {
+        const oldCapacity = this._container.length;
+        this._container = this._container.concat(this._createEmptyList(newCapacity - oldCapacity));
+    }
+
+    _createEmptyList(size) {
+        return new Array(size).fill(null);
+    }
+
+    get(index) {
+        return this._container[index];
+    }
+
+
+    free() {
+
+    }
+}

package/util/geometry/index.js

@@ -1,8 +1,3 @@
-const PI_BY_180 = Math.PI / 180;
-
-
-
-
 export function latLongToPixelXY(latitude, longitude) {
     return {
         x: (longitude + 180) / 360,
@@ -10,16 +5,6 @@ export function latLongToPixelXY(latitude, longitude) {
     };
 }
 
-
-// export function latLongToRadiansTwist(latitude, longitude) {
-
-//     return {
-//         y: (90 - latitude) * PI_BY_180,
-//         x: longitude * PI_BY_180
-//     };
-// }
-
-
 /**
  * createBBoxMatrix( minX, maxX, minY, maxY)
  * use this matrix to transform a point from 0 to 1 range to the bounding box
@@ -41,4 +26,4 @@ export function latLongBboxtoPixelXYBbox(minX, minY, maxX, maxY) {
 }
 
 
-export { GeoDataFromTexture } from './geodatafromtexture';
+// export { GeoDataFromTexture } from './geodatafromtexture';

package/util/picking/fence.js

@@ -0,0 +1,46 @@
+const fence = (gl) => new Promise((resolve, reject) => {
+    // This will create a fence. If this follows a `readPixels()` call, then it
+    // will signal to WebGL that the read instruction should be asynchronous. 
+    // This means JS can continue to work on other tasks while the read instruction
+    // completes.
+    const sync = gl.fenceSync(gl.SYNC_GPU_COMMANDS_COMPLETE, 0);
+    gl.flush();
+
+    // There are TWO possible ways to check on the status of a WebGLSync object.
+
+    // 1. This will check it using clientWaitSync()
+    const checkStatus_v1 = () => {
+        const status = gl.clientWaitSync(sync, 0, 0);
+
+        // There are four possible values for status:
+        // a. ALREADY_SIGNALED and CONDITION_SATISFIED (done)
+        // b. TIMEOUT_EXPIRED (check again later)
+        // c. WAIT_FAILED (there was an error)
+        if (status === gl.TIMEOUT_EXPIRED) {
+            setTimeout(checkStatus_v1, 1);
+        } else if (status === gl.ALREADY_SIGNALED || status === gl.CONDITION_SATISFIED) {
+            gl.deleteSync(sync);
+            resolve();
+        } else {
+            gl.deleteSync(sync);
+            reject(new Error('Fence did not resolve normally for some reason'));
+        }
+    };
+
+    // 2. This will check with getSyncParameter(s, gl.SYNC_STATUS)
+    const checkStatus_v2 = () => {
+        const status = gl.getSyncParameter(sync, gl.SYNC_STATUS);
+
+        // There are only two possible values for status: SIGNALED and UNSIGNALED
+        // Note that there is no `error` signal, so there is no reason to use `reject()` here
+        if (status === gl.SIGNALED) {
+            gl.deleteSync(sync);
+            resolve();
+        } else {
+            setTimeout(checkStatus_v2, 1);
+        }
+    };
+    setTimeout(checkStatus_v2, 1);
+});
+
+export { fence };

package/util/picking/picker-displayer.js

@@ -0,0 +1,177 @@
+/**
+ * add implicit texture display program for color
+ * add fence on query return and return id.
+*/
+
+import { textureOnCanvasProgramCache } from "../programs/draw-texture-on-canvas";
+import { fence } from "./fence";
+
+const ESCAPE_VALUE = -1;
+
+
+class PickerDisplayer {
+    constructor(globe) {
+        this.globe = globe;
+        this.gl = globe.gl;
+        const gl = this.gl;
+        this.colorTexture = gl.createTexture(); // bind to color attachment 0
+        this.indexTexture = gl.createTexture(); // bind to color attachment 1
+        this.fbo = gl.createFramebuffer();
+
+        this._pbo = undefined;
+        this._pboSize = 0;
+        this.resize();
+
+        this.displayer = textureOnCanvasProgramCache.get(this.gl);
+
+    }
+
+    resize(width = null, height = null) {
+        if (width === null || height === null) {
+            width = this.globe.api_ScrW();
+            height = this.globe.api_ScrH();
+        }
+        console.log("resize picker displayer", width, height);
+        const { gl, colorTexture, indexTexture } = this;
+
+        gl.deleteTexture(colorTexture);
+        gl.deleteTexture(indexTexture);
+        const colorTextureNew = gl.createTexture();
+        gl.bindTexture(gl.TEXTURE_2D, colorTextureNew);
+        gl.texStorage2D(gl.TEXTURE_2D, 1, gl.RGBA8, width, height);
+        const indexTextureNew = gl.createTexture();
+        gl.bindTexture(gl.TEXTURE_2D, indexTextureNew);
+        // gl.texStorage2D(gl.TEXTURE_2D, 1, gl.R16I, width, height);
+        gl.texStorage2D(gl.TEXTURE_2D, 1, gl.R32I, width, height);
+        gl.bindTexture(gl.TEXTURE_2D, null);
+
+        this.colorTexture = colorTextureNew;
+        this.indexTexture = indexTextureNew;
+    }
+
+
+    clearTextures() {
+        const { gl, colorTexture, indexTexture } = this;
+        gl.activeTexture(gl.TEXTURE1);
+        gl.bindTexture(gl.TEXTURE_2D, indexTexture);
+        gl.clearBufferiv(gl.COLOR, 1, new Int32Array([-1, -1, -1, -1]));
+
+        gl.activeTexture(gl.TEXTURE0);
+        gl.bindTexture(gl.TEXTURE_2D, colorTexture);
+        gl.clearBufferfv(gl.COLOR, 0, new Float32Array([0, 0, 0, 0]));
+    }
+
+
+    // call before drawing the scene with gl picker shader
+    bindFBO() {
+        const { gl, colorTexture, indexTexture, fbo } = this;
+        gl.activeTexture(gl.TEXTURE1);
+        gl.bindTexture(gl.TEXTURE_2D, indexTexture);
+        gl.activeTexture(gl.TEXTURE0);
+        gl.bindTexture(gl.TEXTURE_2D, colorTexture);
+        { // bind framebuffer
+            gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);
+            gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this.colorTexture, 0);
+            gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT1, gl.TEXTURE_2D, this.indexTexture, 0);
+            gl.drawBuffers([gl.COLOR_ATTACHMENT0, gl.COLOR_ATTACHMENT1]);
+        }
+    }
+
+
+    // call after drawing the scene with gl picker shader
+    drawColorTexture() {
+        const { colorTexture } = this;
+        this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, null);
+        this.displayer.draw(colorTexture);
+    }
+
+
+    pickXY(x, y, selectionPointFilling = 1, callback = () => { }) {
+        const size = Math.pow(1 + 2 * selectionPointFilling, 2);
+        this._pick(size,
+            x - selectionPointFilling,
+            y - selectionPointFilling,
+            1 + 2 * selectionPointFilling,
+            1 + 2 * selectionPointFilling,
+            callback);
+    }
+
+
+    pickBbox(left, top, right, bottom, callback) {
+        const size = (right - left) * (bottom - top) * 4;
+        this._pick(size, left, top, right - left, bottom - top, callback);
+    }
+
+
+    _pick(size, startX, startY, lengthX, lengthY, callback) {
+        if (this._inProgress) return false;
+        this._inProgress = true;
+
+        this._initHoldBuffer(size * 4);
+        const { gl, _pbo } = this;
+        gl.bindBuffer(gl.PIXEL_PACK_BUFFER, _pbo);
+        this.bindFBO();
+        gl.readBuffer(gl.COLOR_ATTACHMENT1); // This is the attachment we want to read
+        gl.readPixels(						 // This will read the pixels to the buffer asynchronously
+            startX, startY, lengthX, lengthY,
+            gl.RED_INTEGER, gl.INT,
+            0
+        );
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+        gl.bindBuffer(gl.PIXEL_PACK_BUFFER, null);
+        fence(this.gl).then(() => {
+            gl.bindBuffer(gl.PIXEL_PACK_BUFFER, _pbo);
+            // const data = new Int16Array(size);
+            const data = new Int32Array(size);
+            gl.getBufferSubData(gl.PIXEL_PACK_BUFFER, 0, data);
+            gl.bindBuffer(gl.PIXEL_PACK_BUFFER, null);
+            const result = this._pickFromBuffer(data, size);
+            callback(result);
+            // gl.deleteBuffer(pbo);
+            this._inProgress = false
+        }
+        );
+        return true;
+    }
+
+
+    _pickFromBuffer(array, size) {
+        const selectedObjects = new Set();
+        for (let i = 0; i < size; i += 1) {
+            const id = array[i];
+            if (id !== ESCAPE_VALUE) {
+                selectedObjects.add(id);
+            }
+        }
+        return selectedObjects;
+    }
+
+
+    _initHoldBuffer(size) {
+        if (this._pbo && this._pboSize >= size) {
+            return
+        }
+        const { gl } = this;
+        const pbo = gl.createBuffer();
+        gl.bindBuffer(gl.PIXEL_PACK_BUFFER, pbo);
+        gl.bufferData(gl.PIXEL_PACK_BUFFER, size, gl.STREAM_READ);
+        gl.bindBuffer(gl.PIXEL_PACK_BUFFER, null);
+        this._pboSize = size;
+        if (this._pbo !== undefined) {
+            gl.deleteBuffer(this._pbo);
+        }
+        this._pbo = pbo;
+    }
+
+
+    free() {
+        const { gl, colorTexture, indexTexture, fbo } = this;
+        gl.deleteTexture(colorTexture);
+        gl.deleteTexture(indexTexture);
+        gl.deleteFramebuffer(fbo);
+        textureOnCanvasProgramCache.release(this.gl);
+    }
+}
+
+
+export { PickerDisplayer };

package/util/programs/draw-texture-on-canvas.js

@@ -1,5 +1,5 @@
 import { createProgram } from "../webglobjectbuilders";
-import { noRegisterGlobeProgramCache } from "../../programs";
+import { glProgramCache } from "../../programs";
 // import { CameraUniformBlockTotemCache, CameraUniformBlockString } from "../../programs/totems";
 
 
@@ -30,9 +30,8 @@ void main() {
 
 
 class TextureOnCanvasProgram {
-    constructor(globe) {
-        this.globe = globe;
-        this.gl = globe.gl;
+    constructor(gl) {
+        this.gl = gl;
 
         this.vao = this.gl.createVertexArray();
         this.buffer = this.gl.createBuffer();
@@ -95,8 +94,8 @@ class TextureOnCanvasProgram {
 }
 
 const textureOnCanvasProgramCache = Object.freeze({
-    get: (globe) => noRegisterGlobeProgramCache.getProgram(globe, TextureOnCanvasProgram),
-    release: (program) => noRegisterGlobeProgramCache.releaseProgram(program)
+    get: (gl) => glProgramCache.getProgram(gl, TextureOnCanvasProgram),
+    release: (gl) => glProgramCache.releaseProgram(gl, TextureOnCanvasProgram)
 });
 
 

package/util/webglobjectbuilders.js

@@ -1,11 +1,26 @@
 
+// export function createShader(gl, type, source) {
+//     const shader = gl.createShader(type);
+//     gl.shaderSource(shader, source);
+
+//     gl.compileShader(shader);
+//     if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+//         throw new Error(gl.getShaderInfoLog(shader));
+//     }
+
+//     return shader;
+// }
+
 export function createShader(gl, type, source) {
     const shader = gl.createShader(type);
     gl.shaderSource(shader, source);
 
     gl.compileShader(shader);
     if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
-        throw new Error(gl.getShaderInfoLog(shader));
+        const errorLog = gl.getShaderInfoLog(shader);
+        const shaderType = type === gl.VERTEX_SHADER ? 'VERTEX_SHADER' : 'FRAGMENT_SHADER';
+        const sourceWithLineNumbers = source.split('\n').map((line, i) => `${i + 1}: ${line}`).join('\n');
+        throw new Error(`Error compiling ${shaderType}:\n${errorLog}\nSource:\n${sourceWithLineNumbers}`);
     }
 
     return shader;

package/util/geometry/geodatafromtexture.js

@@ -1,52 +0,0 @@
-export class GeoDataFromTexture {
-    /**
-     * @param {Array} bbox - [minLong, minLat, maxLong, maxLat]
-     * @param {Array} textureData - array of data
-     * @param {Number} width - width of the texture
-     * @param {Number} height - height of the texture
-     * */
-    constructor(bbox, textureData, width, height) {
-        this.bbox = null;
-        this.textureData = textureData;
-        this.width = width;
-        this.height = height;
-        this.setBBox(bbox);
-    }
-
-    setBBox(bbox) {
-        this.bbox = bbox;
-        this._longRatio = (this.bbox[2] - this.bbox[0]) / this.width;
-
-        this._latRatio = (this.bbox[3] - this.bbox[1]) / this.height;
-    }
-
-    setTextureData(textureData) {
-        this.textureData = textureData;
-    }
-
-    getFloored(lat, long) {
-        const x = (long - this.bbox[0]) / this._longRatio;
-        const y = (lat - this.bbox[1]) / this._latRatio;
-        //console.log(x + " = (" + long + " - " + this.bbox[0] + ") / " + this._longRatio);
-        //console.log(y + " = (" + lat + " - " + this.bbox[1] + ") / " + this._latRatio);
-        const index = Math.floor(y) * this.width + Math.floor(x);
-        //console.log({ index, x, y, w: this.width, h: this.height, "total": this.width * this.height });
-        return this.textureData[index];
-    }
-
-    getInterpolated(lat, long) {
-        // this has bug for the last row and column
-        const x = (long - this.bbox[0]) / (this.bbox[2] - this.bbox[0]);
-        const y = (lat - this.bbox[1]) / (this.bbox[3] - this.bbox[1]);
-        const xIndex = Math.floor(x * this.width);
-        const yIndex = Math.floor(y * this.height);
-        const xRatio = x * this.width - xIndex;
-        const yRatio = y * this.height - yIndex;
-        const index = yIndex * this.width + xIndex;
-        const data = this.textureData[index];
-        const data1 = this.textureData[index + 1];
-        const data2 = this.textureData[index + this.width];
-        const data3 = this.textureData[index + this.width + 1];
-        return data * (1 - xRatio) * (1 - yRatio) + data1 * xRatio * (1 - yRatio) + data2 * (1 - xRatio) * yRatio + data3 * xRatio * yRatio;
-    }
-}