@pirireis/webglobeplugins 1.3.0 → 1.4.1

package/Math/methods.js

@@ -76,6 +76,13 @@ export const wgs84ToCartesian3d = (output, long, lat, height) => {
     output[1] = y * radius;
     output[2] = z * radius;
 };
+export const unitVectorFromLongLat = (output, long, lat) => {
+    const longRad = long * RADIAN;
+    const latRad = lat * RADIAN;
+    output[0] = Math.cos(latRad) * Math.cos(longRad);
+    output[1] = Math.cos(latRad) * Math.sin(longRad);
+    output[2] = Math.sin(latRad);
+};
 export const wgs84ToMercator = (long, lat) => {
     return [
         WORLD_RADIUS_MERCATOR * long * RADIAN,

package/constants.js

@@ -4,3 +4,4 @@ export const CSRenderPassPluginKeys = ["supportNormalPass",
 export const GLOBE_DEFAULT_MIN_LOD = 2;
 export const GLOBE_DEFAULT_MAX_LOD = 25;
 export const POLE2 = 12756274.0;
+export const POLE_BY_PI = 6378136.99911;

package/package.json

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

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

@@ -1,36 +1,92 @@
 import { createProgram } from "../../util/webglobjectbuilders";
-import { CameraUniformBlockTotemCache, CameraUniformBlockString } from "../totems";
-import { mercatorXYToGLPosition, cartesian3DToGLPosition } from "../../util/shaderfunctions/geometrytransformations";
+import { CameraUniformBlockTotemCache, CameraUniformBlockString } from "../totems/camerauniformblock";
+import { mercatorXYToGLPosition, cartesian3DToGLPosition, POLE_BY_PI, relativeBBoxPositionRadian } from "../../util/shaderfunctions/geometrytransformations";
 import { noRegisterGlobeProgramCache } from "../programcache";
-const vs = `#version 300 es
+import { DEM_TEXTURE_BLOCK_STRING, DemTextureManagerCache } from "../totems/attachments/dem-textures-manager";
+import { UniformBlockManager } from "../../util/gl-util/uniform-block/manager";
+import { WORLD_RADIUS_3D } from "../../Math/constants";
+const uniformBindingPoints = Object.freeze({
+    camera: 0,
+    style: 1,
+    dem: 2,
+});
+const styleBlockManager = new UniformBlockManager('StyleBlock', [
+    { name: "opacity", type: "float", value: new Float32Array([1.0]) },
+    { name: "pointSize", type: "float", value: new Float32Array([2.0]) },
+    { name: "hoveredPointSize", type: "float", value: new Float32Array([4.0]) },
+    { name: "hovered_vertexID", type: "int", value: new Int32Array([-1]) },
+], uniformBindingPoints.style);
+const DEM_TEXTURE_GLPOSITION_SCRIPT = `
+const float elevation = ${WORLD_RADIUS_3D};
+// altitude =  0.0 / 0.0; can raise "invalid operation" before the calculation,
+// so altitude is 0.0 and hasDemSample is used to determine validity. 
+float altitude = 0.0;
+bool hasDemSample = false;
+if (is3D == true) {
+    for (int i = 0; i < 6; i++) {
+        if( i == u_breakLoopIndex - 1 ) {
+            break;
+        }
+        vec2 uv = relativeBBoxPositionRadian(pos2D, u_demTextureBBOX[i]);
+        if (uv.x != -1.0) {
+            uv.y = 1.0 - uv.y; // flip y coordinate
+            // rescale and transform uv to fit in the texture data cover bbox
+            uv *= u_textureDataCoverRatio[i].xy;
+
+            //
+            altitude = texture(u_demTexture, vec3(uv, float(i))).r;
+            hasDemSample = true;
+            break;
+        }
+    }
+
+    // If the geometry is outside all given bboxes, force NaN so the primitive gets discarded.
+    if (!hasDemSample) {
+        altitude = 0.0 / 0.0;
+    }
+    vec3 position = pos3D * (elevation + (altitude + height) * elevation_scale);
+    gl_Position = cartesian3DToGLPosition(position);
+} else {
+    vec2 mercatorXY = pos2D * POLE_BY_PI;
+    gl_Position = mercatorXYToGLPosition(mercatorXY);
+}
+`;
+const vsF = (fitMode) => `#version 300 es
+#pragma vscode_glsllint_stage : vert
+
+precision highp float;
+precision highp sampler2DArray;
+
+${fitMode ? DEM_TEXTURE_BLOCK_STRING : ""}
 ${CameraUniformBlockString}
+${styleBlockManager.glslCode()}
 ${mercatorXYToGLPosition}
 ${cartesian3DToGLPosition}
+${relativeBBoxPositionRadian}
+${POLE_BY_PI}
+
+
 precision highp float;
 precision highp int;
 
-uniform int hovered_vertexID; // can be removed
-
 in vec3 pos3D;
 in vec2 pos2D;
 in vec4 rgba;
-
-uniform float pointSize;
-uniform float hoveredPointSize;
+${fitMode ? "in float height;" : ""}
 
 flat out highp int vVertexID;
 
-
 out vec4 v_rgba;
 
 void main() {
 
+${fitMode ? DEM_TEXTURE_GLPOSITION_SCRIPT : `
     if(is3D){
         gl_Position = cartesian3DToGLPosition(pos3D);
-    }
-    else{
+    } else {
         gl_Position = mercatorXYToGLPosition(pos2D);
     }
+`}
     if (hovered_vertexID == gl_VertexID) {
         gl_PointSize = hoveredPointSize;
     } else {
@@ -40,9 +96,12 @@ void main() {
     vVertexID = gl_VertexID;
 }`;
 const fs = `#version 300 es
+#pragma vscode_glsllint_stage : frag
+
 precision highp float;
+precision highp int;
 
-uniform float opacity;
+${styleBlockManager.glslCode()}
 
 flat in highp int vVertexID;
 in vec4 v_rgba;
@@ -56,46 +115,46 @@ void main() {
     fragColor.a *= opacity;
 }`;
 class PointOnGlobeProgram {
-    constructor(globe) {
+    globe;
+    gl;
+    program;
+    demTextureManager = null; // assigned in constructor if fitMode is Dynamic, otherwise remains undefined
+    cameraBlockTotem;
+    fitMode;
+    _publishedUBOs = [];
+    _isFreed = false;
+    constructor(globe, fitMode) {
         this.globe = globe;
         this.gl = globe.gl;
+        if (fitMode != "GroundElevation" && fitMode != "SeaLevel") {
+            throw new Error(`Invalid fitMode: ${fitMode}. Supported values are "GroundElevation" and "SeaLevel".`);
+        }
+        this.fitMode = (fitMode === "GroundElevation");
+        const vs = vsF(this.fitMode);
         this.program = createProgram(this.gl, vs, fs);
-        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"),
-        };
-        // eslint-disable-next-line
-        { // 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);
+        if (this.fitMode) {
+            this.demTextureManager = DemTextureManagerCache.get(globe);
+            this.demTextureManager.assignBindingPoint(this.program, uniformBindingPoints.dem);
         }
+        const { gl, program } = this;
+        styleBlockManager.assignBindingPoint(this.gl, this.program);
+        const styleBlockIndex = gl.getUniformBlockIndex(program, 'StyleBlock');
+        gl.uniformBlockBinding(program, styleBlockIndex, uniformBindingPoints.style);
         // eslint-disable-next-line
         { // assign attribute locations
             gl.bindAttribLocation(program, 0, "pos3D");
             gl.bindAttribLocation(program, 1, "pos2D");
             gl.bindAttribLocation(program, 2, "rgba");
+            this.fitMode && gl.bindAttribLocation(program, 3, "height");
         }
         // eslint-disable-next-line
         { // arrange camera uniform block
-            this.cameraBlockBingingPoint = 0;
             this.cameraBlockTotem = CameraUniformBlockTotemCache.get(globe);
             const cameraBlockIndex = gl.getUniformBlockIndex(program, "CameraUniformBlock");
-            gl.uniformBlockBinding(program, cameraBlockIndex, this.cameraBlockBingingPoint);
+            gl.uniformBlockBinding(program, cameraBlockIndex, uniformBindingPoints.camera);
         }
     }
-    createVAO(pos3DBuffer, pos2DBuffer, rgbaBuffer) {
+    createVAO(pos3DBuffer, pos2DBuffer, rgbaBuffer, heightBuffer) {
         const { gl } = this;
         const vao = gl.createVertexArray();
         gl.bindVertexArray(vao);
@@ -118,33 +177,35 @@ class PointOnGlobeProgram {
             gl.vertexAttribPointer(2, 4, gl.FLOAT, false, 0, 0);
             // gl.vertexAttribPointer(2, 4, gl.UNSIGNED_INT, true, 0, 0);
         }
+        if (this.fitMode) {
+            if (heightBuffer) {
+                gl.bindBuffer(gl.ARRAY_BUFFER, heightBuffer || null);
+                gl.enableVertexAttribArray(3);
+                gl.vertexAttribPointer(3, 1, gl.FLOAT, false, 0, 0);
+            }
+            else {
+                gl.disableVertexAttribArray(3);
+                gl.vertexAttrib4f(3, 0, 0, 0, 1);
+            }
+        }
         gl.bindVertexArray(null);
         gl.bindBuffer(gl.ARRAY_BUFFER, null);
         return vao;
     }
-    draw(vao, length, { opacity = 1.0, hoveredID = -1, pointSize = 2.0, hoveredPointSize = 4.0, elementBuffer = null } = {}) {
-        if (length === 0 || opacity === 0)
+    createUBO(bufferReadType = "DYNAMIC_DRAW") {
+        const ubo = styleBlockManager.createUBO(this.gl, bufferReadType);
+        this._publishedUBOs.push(ubo);
+        return ubo;
+    }
+    draw(vao, length, drawOptionsUBO, elementBuffer = null) {
+        if (length === 0)
             return;
-        const { gl, program, uniforms } = this;
+        const { gl, program } = this;
         gl.useProgram(program);
-        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);
+        this.cameraBlockTotem.bind(uniformBindingPoints.camera);
+        drawOptionsUBO.bind();
+        this.fitMode && this.demTextureManager.bindData(0, uniformBindingPoints.dem);
         if (elementBuffer) {
             gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, elementBuffer);
             gl.drawElements(gl.POINTS, length, gl.UNSIGNED_INT, 0);
@@ -153,20 +214,29 @@ class PointOnGlobeProgram {
         else {
             gl.drawArrays(gl.POINTS, 0, length);
         }
-        this.cameraBlockTotem.unbind(this.cameraBlockBingingPoint);
+        this.fitMode && this.demTextureManager.unbindData(0, uniformBindingPoints.dem);
+        drawOptionsUBO.unbind();
+        this.cameraBlockTotem.unbind(uniformBindingPoints.camera);
         gl.bindVertexArray(null);
     }
     free() {
         if (this._isFreed)
             return;
         const { gl, globe } = this;
+        this._publishedUBOs.forEach(ubo => ubo.free());
+        this._publishedUBOs = [];
         CameraUniformBlockTotemCache.release(globe);
+        this.fitMode && DemTextureManagerCache.release(globe);
         gl.deleteProgram(this.program);
         this._isFreed = true;
     }
 }
 const PointOnGlobeProgramCache = Object.freeze({
-    get: (globe) => noRegisterGlobeProgramCache.getProgram(globe, PointOnGlobeProgram),
-    release: (globe) => noRegisterGlobeProgramCache.releaseProgram(globe, PointOnGlobeProgram)
+    get(globe, fitMode) {
+        return noRegisterGlobeProgramCache.getProgram(globe, PointOnGlobeProgram, fitMode);
+    },
+    release(globe, fitMode) {
+        noRegisterGlobeProgramCache.releaseProgram(globe, PointOnGlobeProgram, fitMode);
+    }
 });
 export { PointOnGlobeProgramCache };

package/programs/programcache.js

@@ -89,32 +89,35 @@ const glProgramCache = (function () {
 })();
 const noRegisterGlobeProgramCache = (function () {
     const cache = new Map();
-    function getProgram(globe, ProgramClass) {
+    const keyFunction = (globe, ProgramClass, mode) => `${globe.id}_${ProgramClass.name}_${mode}`;
+    function getProgram(globe, ProgramClass, mode) {
+        const key = keyFunction(globe, ProgramClass, mode);
         if (!cache.has(globe)) {
             cache.set(globe, new Map());
         }
         ;
-        if (!cache.get(globe).has(ProgramClass)) {
-            cache.get(globe).set(ProgramClass, {
-                program: new ProgramClass(globe),
+        if (!cache.get(globe).has(key)) {
+            cache.get(globe).set(key, {
+                program: new ProgramClass(globe, mode),
                 count: 1
             });
         }
         else {
-            cache.get(globe).get(ProgramClass).count++;
+            cache.get(globe).get(key).count++;
         }
-        return cache.get(globe).get(ProgramClass).program;
+        return cache.get(globe).get(key).program;
     }
     ;
-    function releaseProgram(globe, ProgramClass) {
-        if (cache.has(globe) && cache.get(globe).has(ProgramClass)) {
-            if (cache.get(globe).get(ProgramClass).count === 0) {
+    function releaseProgram(globe, ProgramClass, mode) {
+        const key = keyFunction(globe, ProgramClass, mode);
+        if (cache.has(globe) && cache.get(globe).has(key)) {
+            if (cache.get(globe).get(key).count === 0) {
                 throw new Error("The program counter is already 0, cannot release program");
             }
-            cache.get(globe).get(ProgramClass).count--;
-            if (cache.get(globe).get(ProgramClass).count === 0) {
-                cache.get(globe).get(ProgramClass).program.free();
-                cache.get(globe).delete(ProgramClass);
+            cache.get(globe).get(key).count--;
+            if (cache.get(globe).get(key).count === 0) {
+                cache.get(globe).get(key).program.free();
+                cache.get(globe).delete(key);
             }
         }
     }

package/programs/totems/attachments/dem-textures-manager.js

@@ -174,6 +174,7 @@ export class DemTextureManager {
         for (const obj of this.registry) {
             obj.setMergedTiles(this.mergedData);
         }
+        console.log("DEM Texture Manager updated with new merged tiles data");
     }
     bindData(textureUnit, bindingPoint) {
         const gl = this._globe.gl;

package/tracks/point-tracks/adapters.js

@@ -0,0 +1 @@
+"use strict";

package/tracks/point-tracks/plugin.js

@@ -1,31 +1,51 @@
-import { BufferOrchestrator, BufferManager, ObjectStore } from "../../util/account/index";
+import { BufferOrchestrator, BufferManager, ObjectStore } from "../../util/account/single-attribute-buffer-management/index";
 import { PickerDisplayer } from "../../util/picking/picker-displayer";
-import { PointOnGlobeProgramCache } from "../../programs/point-on-globe/square-pixel-point";
-import { defaultblendfunction } from "../../util/globe-default-gl-states";
-import { wgs84ToCartesian3d, wgs84ToMercator } from "../../Math/methods";
+import { PointOnGlobeProgramCache, } from "../../programs/point-on-globe/square-pixel-point";
+import { wgs84ToCartesian3d, wgs84ToMercator, unitVectorFromLongLat } from "../../Math/methods";
+import { POLE_BY_PI } from "../../constants";
 const _0vec3 = /* @__PURE__ */ [0, 0, 0];
-/**
- * @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
- */
 class PointTracksPlugin {
-    constructor(id, { pointSize = 2, hoveredPointSize = 4, selectionPointFilling = 4, opacity = 1.0, objectStoreExtraParameters = ["long", "lat", "height"], initialCapacity = 1000 } = {}) {
+    id;
+    globe = null;
+    gl = null;
+    program;
+    pointSizes;
+    _isFreed;
+    _useElevationWithTerrainFit;
+    _pointProgram;
+    _vao;
+    _StorageManagersMap = null;
+    _bufferOrchestrator = null;
+    _pickerDisplayer;
+    _selectedID;
+    _terrainFitMode;
+    _terrainFit;
+    _selectedObj;
+    _tracksToPointsMap;
+    _opacity;
+    _lastWH;
+    _focusParams;
+    _objectStoreExtraParameters;
+    _objectStoreExtraParametersFiltered;
+    _drawOptionsUBO;
+    _lastSelectedID = -1;
+    constructor(id, { terrainFitMode = "SeaLevel", useElevationWithTerrainFit = false, pointSize = 2, hoveredPointSize = 4, selectionPointFilling = 4, opacity = 1.0, objectStoreExtraParameters = ["long", "lat", "height"], initialCapacity = 1000 } = {}) {
         this.id = id;
         this._isFreed = false;
+        this._useElevationWithTerrainFit = useElevationWithTerrainFit;
         this._pointProgram = null;
         this._vao = null;
-        this._bufferManagersMap = null;
-        this._bufferOrchestrator = null;
         this._pickerDisplayer = null;
         this._selectedID = -1;
+        // check _terrainFitMode
+        if (terrainFitMode !== "SeaLevel" && terrainFitMode !== "GroundElevation") {
+            console.warn(`Invalid terrainFitMode: ${terrainFitMode}. Falling back to "SeaLevel".`);
+            throw new Error(`Invalid terrainFitMode: ${terrainFitMode}. Valid options are "SeaLevel" or "GroundElevation".`);
+        }
+        this._terrainFitMode = terrainFitMode;
+        this._terrainFit = terrainFitMode === "GroundElevation";
         this._selectedObj = null;
-        this._tracksToPointsMap = new Map(); // one to many
+        this._tracksToPointsMap = new Map();
         this._opacity = opacity ? opacity : 1.0;
         this.program = null;
         this._lastWH = { w: 0, h: 0 };
@@ -45,7 +65,14 @@ class PointTracksPlugin {
         this.globe = globe;
         this.gl = gl;
         this._pickerDisplayer = new PickerDisplayer(globe);
-        this._pointProgram = PointOnGlobeProgramCache.get(globe);
+        this._pointProgram = PointOnGlobeProgramCache.get(globe, this._terrainFitMode);
+        this._drawOptionsUBO = this._pointProgram.createUBO();
+        this._lastSelectedID = -1;
+        this._drawOptionsUBO.update(new Map([
+            ["pointSize", this.pointSizes.pointSize],
+            ["hoveredPointSize", this.pointSizes.hoveredPointSize],
+            ["opacity", this._opacity],
+        ]));
         this._focusParams.elementBuffer = gl.createBuffer();
         this._initBufferManagers();
     }
@@ -53,26 +80,31 @@ class PointTracksPlugin {
         const { gl } = this;
         const initialCapacity = this._bufferOrchestrator.capacity;
         const bufferType = "DYNAMIC_DRAW";
-        this._bufferManagersMap = new Map([
+        this._StorageManagersMap = new Map([
             ["pos3D", {
                     bufferManager: new BufferManager(gl, 3, { bufferType, initialCapacity }),
-                    adaptor: (item) => {
-                        wgs84ToCartesian3d(_0vec3, item.long, item.lat, item.height / 1000); // height is in meters
-                        return new Float32Array(_0vec3); // height is in meters
-                    }
+                    adaptor: this._terrainFit ?
+                        (item) => {
+                            unitVectorFromLongLat(_0vec3, item.long, item.lat);
+                            return new Float32Array(_0vec3);
+                        } :
+                        (item) => {
+                            wgs84ToCartesian3d(_0vec3, item.long, item.lat, item.height / 1000);
+                            return new Float32Array(_0vec3);
+                        }
                 }],
             ["pos2D", {
                     bufferManager: new BufferManager(gl, 2, { bufferType, initialCapacity }),
-                    adaptor: (item) => new Float32Array(wgs84ToMercator(item.long, item.lat))
+                    adaptor: this._terrainFit ? (item) => {
+                        const xy = new Float32Array(wgs84ToMercator(item.long, item.lat));
+                        xy[0] /= POLE_BY_PI;
+                        xy[1] /= POLE_BY_PI;
+                        return xy;
+                    } :
+                        (item) => new Float32Array(wgs84ToMercator(item.long, item.lat))
                 }],
             ["rgba", {
                     bufferManager: new BufferManager(gl, 4, { bufferType, initialCapacity, typedArrayConstructor: Float32Array }),
-                    // adaptor: (item) => new Uint8Array([
-                    //     item.rgba[0] * 255,
-                    //     item.rgba[1] * 255,
-                    //     item.rgba[2] * 255,
-                    //     item.rgba[3] * 255
-                    // ])
                     adaptor: (item) => new Float32Array(item.rgba)
                 }],
             ["objectStore", {
@@ -92,53 +124,57 @@ class PointTracksPlugin {
                     }
                 }]
         ]);
-        this._vao = this._pointProgram.createVAO(this._bufferManagersMap.get("pos3D").bufferManager.buffer, this._bufferManagersMap.get("pos2D").bufferManager.buffer, this._bufferManagersMap.get("rgba").bufferManager.buffer);
+        if (this._terrainFit && this._useElevationWithTerrainFit) {
+            this._StorageManagersMap.set("height", {
+                bufferManager: new BufferManager(gl, 1, { bufferType, initialCapacity }),
+                adaptor: (item) => new Float32Array([item.height / 1000])
+            });
+        }
+        this._vao = this._pointProgram.createVAO(this._StorageManagersMap.get("pos3D").bufferManager.buffer, this._StorageManagersMap.get("pos2D").bufferManager.buffer, this._StorageManagersMap.get("rgba").bufferManager.buffer, (this._terrainFit && this._useElevationWithTerrainFit) ? this._StorageManagersMap.get("height").bufferManager.buffer : undefined);
     }
     setPointSize(size) {
         this.pointSizes.pointSize = size;
+        this._drawOptionsUBO.update({ pointSize: size });
         this.globe?.DrawRender();
     }
     setSelectionPointFilling(size) {
         this.pointSizes.selectionPointFilling = size;
+        this._drawOptionsUBO.update({ selectionPointFilling: size });
         this.globe?.DrawRender();
     }
     setHoveredPointSize(size) {
         this.pointSizes.hoveredPointSize = size;
+        this._drawOptionsUBO.update({ hoveredPointSize: size });
         this.globe?.DrawRender();
     }
     setOpacity(opacity) {
         if (opacity < 0 || opacity > 1)
             return;
         this._opacity = opacity;
+        this._drawOptionsUBO.update({ opacity });
         this.globe?.DrawRender();
     }
     getCurrentSelection() {
         return this._selectedObj;
     }
     /**
-     *
-     * @param {*} x screen x
-     * @param {*} y screen y
-     * @param {*} callback callback on selection
+     * Select points at screen coordinates
+     * @param x screen x coordinate
+     * @param y screen y coordinate
+     * @param callback callback on selection
      */
     screenSelection(x, y, callback) {
         const { pointSizes, _pickerDisplayer } = this;
-        const objectStore = this._bufferManagersMap.get("objectStore").bufferManager;
+        const objectStore = this._StorageManagersMap.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);
             }
@@ -147,8 +183,8 @@ class PointTracksPlugin {
         _pickerDisplayer.pickXY(x, y, pointSizes.selectionPointFilling, wrapper);
     }
     /**
-     * @param {Array<Track>} tracks
-     * @returns
+     * Insert multiple tracks at once
+     * @param tracks Array of tracks to insert
      */
     insertBulk(tracks) {
         this._fillTracksToPointsMap(tracks);
@@ -157,21 +193,22 @@ class PointTracksPlugin {
         if (currentLoad + flattenedPoints.length >= 2147483647) {
             throw new Error("Too many points, Point count cannot exceed 2147483647");
         }
-        const { _bufferManagersMap, _bufferOrchestrator } = this;
-        _bufferOrchestrator.insertBulk(flattenedPoints, _bufferManagersMap);
+        const { _StorageManagersMap, _bufferOrchestrator } = this;
+        _bufferOrchestrator.insertBulk(flattenedPoints, _StorageManagersMap);
         this._refillFocus();
         this.globe?.DrawRender();
     }
     flush() {
         const capacity = 100;
         this._bufferOrchestrator?.flush({ capacity });
-        this._bufferManagersMap.forEach(({ bufferManager }) => bufferManager.resetWithCapacity(capacity));
+        this._StorageManagersMap.forEach(({ bufferManager }) => bufferManager.free());
         this._turnOffFocus();
         this._tracksToPointsMap.clear();
         this.globe?.DrawRender();
     }
     /**
-     * @param {string} trackID
+     * Delete a track by ID
+     * @param trackID The track ID to delete
      */
     deleteTrack(trackID) {
         const pointList = this._tracksToPointsMap.get(trackID);
@@ -179,26 +216,29 @@ class PointTracksPlugin {
             console.warn(`Track with ID ${trackID} does not exist.`);
             return;
         }
-        ;
         const points = Array.from(pointList);
-        const { _bufferOrchestrator, _bufferManagersMap } = this;
-        _bufferOrchestrator.deleteBulk(points.map((pointID) => keyMethod(trackID, pointID)), _bufferManagersMap);
+        const { _bufferOrchestrator, _StorageManagersMap } = this;
+        _bufferOrchestrator.deleteBulk(points.map((pointID) => keyMethod(trackID, pointID)), _StorageManagersMap);
         this._tracksToPointsMap.delete(trackID);
-        this._redraw = true;
         this._refillFocus();
         this.globe?.DrawRender();
     }
     /**
-     * @param {string} trackID
-     * @param {Array<string>} pointIDs
+     * Delete specific points from a track
+     * @param trackID The track ID
+     * @param pointIDs Array of point IDs to delete
      */
     deletePoints(trackID, pointIDs) {
-        const { _bufferOrchestrator, _bufferManagersMap } = this;
-        _bufferOrchestrator.deleteBulk(pointIDs.map((pointID) => keyMethod(trackID, pointID)), _bufferManagersMap);
+        const { _bufferOrchestrator, _StorageManagersMap } = this;
+        _bufferOrchestrator.deleteBulk(pointIDs.map((pointID) => keyMethod(trackID, pointID)), _StorageManagersMap);
         this._deletePointsFromTracksMap(trackID, pointIDs);
         this._refillFocus();
         this.globe?.DrawRender();
     }
+    /**
+     * Focus on specific tracks (or disable focus with null)
+     * @param trackIDs Array of track IDs to focus on, or null to disable focus
+     */
     focusTracks(trackIDs = null) {
         if (!this.globe)
             return;
@@ -214,6 +254,11 @@ class PointTracksPlugin {
         }
         this.globe.DrawRender();
     }
+    /**
+     * Update the color of a track
+     * @param trackID The track ID
+     * @param rgba The new RGBA color values (0-1)
+     */
     updateTrackColor(trackID, rgba) {
         if (!this._tracksToPointsMap.has(trackID)) {
             console.warn(`Track with ID ${trackID} does not exist.`);
@@ -221,13 +266,13 @@ class PointTracksPlugin {
         }
         const pointList = this._tracksToPointsMap.get(trackID);
         const points = Array.from(pointList);
-        const { _bufferOrchestrator, _bufferManagersMap } = this;
+        const { _bufferOrchestrator, _StorageManagersMap } = this;
         _bufferOrchestrator.updateBulk(points.map((pointID) => {
             return {
                 key: keyMethod(trackID, pointID),
                 rgba: rgba
             };
-        }), _bufferManagersMap, ["rgba"]);
+        }), _StorageManagersMap, ["rgba"]);
         this._refillFocus();
         this.globe?.DrawRender();
     }
@@ -237,9 +282,9 @@ class PointTracksPlugin {
             return;
         this._isFreed = true;
         this._pickerDisplayer.free();
-        PointOnGlobeProgramCache.release(this.globe);
+        PointOnGlobeProgramCache.release(this.globe, this._terrainFitMode);
         this.gl.deleteBuffer(this._focusParams.elementBuffer);
-        this._bufferManagersMap.forEach(({ bufferManager, adaptor }) => bufferManager.free());
+        this._StorageManagersMap.forEach(({ bufferManager }) => bufferManager.free());
     }
     draw3D() {
         const { gl, _pointProgram, _pickerDisplayer, _bufferOrchestrator, _vao } = this;
@@ -253,21 +298,10 @@ class PointTracksPlugin {
         _pickerDisplayer.bindFBO();
         _pickerDisplayer.clearTextures();
         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
-            });
+            _pointProgram.draw(_vao, this._focusParams.length, this._drawOptionsUBO, this._focusParams.elementBuffer);
         }
         else {
-            _pointProgram.draw(_vao, _bufferOrchestrator.length, {
-                hoveredID: this._selectedID,
-                opacity: this._opacity,
-                pointSize: this.pointSizes.pointSize,
-                hoveredPointSize: this.pointSizes.hoveredPointSize
-            });
+            _pointProgram.draw(_vao, _bufferOrchestrator.length, this._drawOptionsUBO, null);
         }
         gl.bindFramebuffer(gl.FRAMEBUFFER, null);
         _pickerDisplayer.drawColorTexture();
@@ -326,13 +360,38 @@ class PointTracksPlugin {
             this._tracksToPointsMap.delete(trackID);
         }
     }
+    _updateHoverState(x, y) {
+        const { pointSizes, _pickerDisplayer } = this;
+        const objectStore = this._StorageManagersMap.get("objectStore").bufferManager;
+        const wrapper = (selectedIDsSet) => {
+            const selectedIDs = Array.from(selectedIDsSet);
+            if (selectedIDs.length === 0) {
+                this._selectedObj = null;
+                this._selectedID = -1;
+                if (this._lastSelectedID !== -1) {
+                    this._lastSelectedID = -1;
+                    this._drawOptionsUBO.updateSingle("hovered_vertexID", -1);
+                    this.globe.DrawRender();
+                }
+                return;
+            }
+            const id = selectedIDs[0];
+            this._selectedID = id;
+            this._selectedObj = objectStore.get(id);
+            if (this._lastSelectedID !== this._selectedID) {
+                this._lastSelectedID = this._selectedID;
+                this._drawOptionsUBO.updateSingle("hovered_vertexID", this._selectedID);
+                this.globe.DrawRender();
+            }
+        };
+        _pickerDisplayer.pickXY(x, y, pointSizes.selectionPointFilling, wrapper);
+    }
     _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) => {
-        });
+        this._updateHoverState(x, y);
     }
     _turnOffFocus() {
         const { gl } = this;

package/tracks/point-tracks/pluginold.js

@@ -0,0 +1,437 @@
+import { BufferOrchestrator, BufferManager, ObjectStore } from "../../util/account/index";
+import { PickerDisplayer } from "../../util/picking/picker-displayer";
+import { PointOnGlobeProgramCache, } from "../../programs/point-on-globe/square-pixel-point";
+import { defaultblendfunction } from "../../util/globe-default-gl-states";
+import { wgs84ToCartesian3d, wgs84ToMercator, unitVectorFromLongLat } from "../../Math/methods";
+import { POLE_BY_PI } from "../../constants";
+const _0vec3 = /* @__PURE__ */ [0, 0, 0];
+/**
+ * @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
+ */
+class PointTracksPlugin {
+    constructor(id, { terrainFitMode = "SeaLevel", // "SeaLevel" or "GroundElevation"
+    useElevationWithTerrainFit = false, // opens a buffer
+    pointSize = 2, hoveredPointSize = 4, selectionPointFilling = 4, opacity = 1.0, objectStoreExtraParameters = ["long", "lat", "height"], initialCapacity = 1000 } = {}) {
+        this.id = id;
+        this._isFreed = false;
+        this._useElevationWithTerrainFit = useElevationWithTerrainFit;
+        this._pointProgram = null;
+        this._vao = null;
+        this._bufferManagersMap = null;
+        this._bufferOrchestrator = null;
+        this._pickerDisplayer = null;
+        this._selectedID = -1;
+        // check _terrainFitMode
+        if (terrainFitMode !== "SeaLevel" && terrainFitMode !== "GroundElevation") {
+            console.warn(`Invalid terrainFitMode: ${terrainFitMode}. Falling back to "SeaLevel".`);
+            throw new Error(`Invalid terrainFitMode: ${terrainFitMode}. Valid options are "SeaLevel" or "GroundElevation".`);
+        }
+        this._terrainFitMode = terrainFitMode;
+        this._terrainFit = terrainFitMode === "GroundElevation";
+        this._selectedObj = null;
+        this._tracksToPointsMap = new Map(); // one to many
+        this._opacity = opacity ? opacity : 1.0;
+        this.program = null;
+        this._lastWH = { w: 0, h: 0 };
+        this._focusParams = { on: false, length: 0, elementBuffer: null, trackIDs: [] };
+        this.pointSizes = {
+            pointSize: pointSize ? pointSize : 2,
+            selectionPointFilling: selectionPointFilling ? selectionPointFilling : 4,
+            hoveredPointSize: hoveredPointSize ? hoveredPointSize : 4
+        };
+        this._objectStoreExtraParameters = objectStoreExtraParameters ? objectStoreExtraParameters : [];
+        this._objectStoreExtraParametersFiltered = objectStoreExtraParameters.filter(param => {
+            return !["long", "lat", "height", "ID", "trackID"].includes(param);
+        });
+        this._bufferOrchestrator = new BufferOrchestrator({ capacity: initialCapacity ? initialCapacity : 1000 });
+    }
+    init(globe, gl) {
+        this.globe = globe;
+        this.gl = gl;
+        this._pickerDisplayer = new PickerDisplayer(globe);
+        this._pointProgram = PointOnGlobeProgramCache.get(globe, this._terrainFitMode);
+        this._drawOptionsUBO = this._pointProgram.createUBO();
+        this._lastSelectedID = -1;
+        this._drawOptionsUBO.update(new Map([
+            ["pointSize", this.pointSizes.pointSize],
+            ["hoveredPointSize", this.pointSizes.hoveredPointSize],
+            ["opacity", this._opacity],
+        ]));
+        this._focusParams.elementBuffer = gl.createBuffer();
+        this._initBufferManagers();
+    }
+    _initBufferManagers() {
+        const { gl } = this;
+        const initialCapacity = this._bufferOrchestrator.capacity;
+        const bufferType = "DYNAMIC_DRAW";
+        this._bufferManagersMap = new Map([
+            ["pos3D", {
+                    bufferManager: new BufferManager(gl, 3, { bufferType, initialCapacity }),
+                    adaptor: this._terrainFit ?
+                        (item) => {
+                            unitVectorFromLongLat(_0vec3, item.long, item.lat); // height is in meters
+                            return new Float32Array(_0vec3); // height is in meters
+                        } :
+                        (item) => {
+                            wgs84ToCartesian3d(_0vec3, item.long, item.lat, item.height / 1000); // height is in meters
+                            return new Float32Array(_0vec3); // height is in meters
+                        }
+                }],
+            ["pos2D", {
+                    bufferManager: new BufferManager(gl, 2, { bufferType, initialCapacity }),
+                    adaptor: this._terrainFit ? (item) => {
+                        const xy = new Float32Array(wgs84ToMercator(item.long, item.lat));
+                        xy[0] /= POLE_BY_PI;
+                        xy[1] /= POLE_BY_PI;
+                        return xy;
+                    } :
+                        (item) => new Float32Array(wgs84ToMercator(item.long, item.lat))
+                }],
+            ["rgba", {
+                    bufferManager: new BufferManager(gl, 4, { bufferType, initialCapacity, typedArrayConstructor: Float32Array }),
+                    adaptor: (item) => new Float32Array(item.rgba)
+                }],
+            ["objectStore", {
+                    bufferManager: new ObjectStore({ initialCapacity }),
+                    adaptor: (item) => {
+                        const result = {
+                            trackID: item.trackID,
+                            pointID: item.pointID,
+                        };
+                        // Add extra parameters specified in _objectStoreExtraParameters
+                        this._objectStoreExtraParameters.forEach(param => {
+                            if (item.hasOwnProperty(param)) {
+                                result[param] = item[param];
+                            }
+                        });
+                        return result;
+                    }
+                }]
+        ]);
+        if (this._terrainFit && this._useElevationWithTerrainFit) {
+            this._bufferManagersMap.set("height", {
+                bufferManager: new BufferManager(gl, 1, { bufferType, initialCapacity }),
+                adaptor: (item) => new Float32Array([item.height / 1000])
+            });
+        }
+        this._vao = this._pointProgram.createVAO(this._bufferManagersMap.get("pos3D").bufferManager.buffer, this._bufferManagersMap.get("pos2D").bufferManager.buffer, this._bufferManagersMap.get("rgba").bufferManager.buffer, (this._terrainFit && this._useElevationWithTerrainFit) ? this._bufferManagersMap.get("height").bufferManager.buffer : undefined);
+    }
+    setPointSize(size) {
+        this.pointSizes.pointSize = size;
+        this._drawOptionsUBO.update({ pointSize: size });
+        this.globe?.DrawRender();
+    }
+    setSelectionPointFilling(size) {
+        this.pointSizes.selectionPointFilling = size;
+        this._drawOptionsUBO.update({ selectionPointFilling: size });
+        this.globe?.DrawRender();
+    }
+    setHoveredPointSize(size) {
+        this.pointSizes.hoveredPointSize = size;
+        this._drawOptionsUBO.update({ hoveredPointSize: size });
+        this.globe?.DrawRender();
+    }
+    setOpacity(opacity) {
+        if (opacity < 0 || opacity > 1)
+            return;
+        this._opacity = opacity;
+        this._drawOptionsUBO.update({ 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) {
+        this._fillTracksToPointsMap(tracks);
+        const flattenedPoints = tracks.map(track => trackToFlatPoints(track, this._objectStoreExtraParametersFiltered)).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;
+        _bufferOrchestrator.insertBulk(flattenedPoints, _bufferManagersMap);
+        this._refillFocus();
+        this.globe?.DrawRender();
+    }
+    flush() {
+        const capacity = 100;
+        this._bufferOrchestrator?.flush({ capacity });
+        this._bufferManagersMap.forEach(({ bufferManager }) => bufferManager.resetWithCapacity(capacity));
+        this._turnOffFocus();
+        this._tracksToPointsMap.clear();
+        this.globe?.DrawRender();
+    }
+    /**
+     * @param {string} trackID
+     */
+    deleteTrack(trackID) {
+        const pointList = this._tracksToPointsMap.get(trackID);
+        if (!pointList) {
+            console.warn(`Track with ID ${trackID} does not exist.`);
+            return;
+        }
+        ;
+        const points = Array.from(pointList);
+        const { _bufferOrchestrator, _bufferManagersMap } = this;
+        _bufferOrchestrator.deleteBulk(points.map((pointID) => keyMethod(trackID, pointID)), _bufferManagersMap);
+        this._tracksToPointsMap.delete(trackID);
+        this._redraw = true;
+        this._refillFocus();
+        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._refillFocus();
+        this.globe?.DrawRender();
+    }
+    focusTracks(trackIDs = null) {
+        if (!this.globe)
+            return;
+        if (trackIDs === null) {
+            this._focusParams.on = false;
+            this.globe?.DrawRender();
+            return;
+        }
+        this._focusParams.on = true;
+        this._fillElementBuffer(trackIDs);
+        if (!this._focusParams.on) {
+            this._turnOffFocus();
+        }
+        this.globe.DrawRender();
+    }
+    updateTrackColor(trackID, rgba) {
+        if (!this._tracksToPointsMap.has(trackID)) {
+            console.warn(`Track with ID ${trackID} does not exist.`);
+            return;
+        }
+        const pointList = this._tracksToPointsMap.get(trackID);
+        const points = Array.from(pointList);
+        const { _bufferOrchestrator, _bufferManagersMap } = this;
+        _bufferOrchestrator.updateBulk(points.map((pointID) => {
+            return {
+                key: keyMethod(trackID, pointID),
+                rgba: rgba
+            };
+        }), _bufferManagersMap, ["rgba"]);
+        this._refillFocus();
+        this.globe?.DrawRender();
+    }
+    // GLOBE API METHODS
+    free() {
+        if (this._isFreed)
+            return;
+        this._isFreed = true;
+        this._pickerDisplayer.free();
+        PointOnGlobeProgramCache.release(this.globe, this._terrainFitMode);
+        this.gl.deleteBuffer(this._focusParams.elementBuffer);
+        this._bufferManagersMap.forEach(({ bufferManager, adaptor }) => bufferManager.free());
+    }
+    draw3D() {
+        const { gl, _pointProgram, _pickerDisplayer, _bufferOrchestrator, _vao } = this;
+        if (!gl) {
+            throw new Error("GL is not loaded, PointTracks Plugin");
+        }
+        if (this._isFreed) {
+            throw new Error("Plugin is unregistered, PointTracks Plugin");
+        }
+        this.resize();
+        _pickerDisplayer.bindFBO();
+        _pickerDisplayer.clearTextures();
+        if (this._focusParams.on) {
+            _pointProgram.draw(_vao, this._focusParams.length, this._drawOptionsUBO, this._focusParams.elementBuffer);
+        }
+        else {
+            _pointProgram.draw(_vao, _bufferOrchestrator.length, this._drawOptionsUBO, null);
+        }
+        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;
+        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;
+                if (!pointSet.has(pointID)) {
+                    pointSet.add(pointID);
+                }
+                else {
+                    console.warn(`Point with ID ${pointID} already exists in track ${trackID}. Skipping duplicate.`);
+                }
+            }
+        }
+    }
+    _refillFocus() {
+        if (this._focusParams.on) {
+            this.focusTracks(this._focusParams.trackIDs);
+        }
+    }
+    _deletePointsFromTracksMap(trackID, pointIDs) {
+        const trackIDs = this._tracksToPointsMap.get(trackID);
+        if (trackIDs === undefined) {
+            console.warn(`Track with ID ${trackID} not found.`);
+            return;
+        }
+        for (const pointID of pointIDs) {
+            if (!trackIDs.has(pointID)) {
+                console.warn(`Point with ID ${pointID} not found in track ${trackID}.`);
+            }
+            else {
+                trackIDs.delete(pointID);
+            }
+        }
+        if (trackIDs.size === 0) {
+            this._tracksToPointsMap.delete(trackID);
+        }
+    }
+    _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) => {
+            if (selectedPoints.length > 0) {
+                if (this._lastSelectedID !== this._selectedID) {
+                    this._lastSelectedID = this._selectedID;
+                    this._drawOptionsUBO.updateSingle("hovered_vertexID", this._selectedID);
+                    this.globe.DrawRender();
+                }
+            }
+            else {
+                if (this._lastSelectedID !== -1) {
+                    this._lastSelectedID = -1;
+                    this._drawOptionsUBO.updateSingle("hovered_vertexID", -1);
+                    this.globe.DrawRender();
+                }
+            }
+        });
+    }
+    _turnOffFocus() {
+        const { gl } = this;
+        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this._focusParams.elementBuffer);
+        gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint32Array([]), gl.STATIC_DRAW);
+        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
+        this._focusParams.length = 0;
+        this._focusParams.on = false;
+    }
+    _fillElementBuffer(trackIDs) {
+        let length = 0;
+        const indexes = [];
+        const foundTracks = [];
+        for (const trackID of trackIDs) {
+            const pointList = this._tracksToPointsMap.get(trackID);
+            if (!pointList)
+                continue;
+            foundTracks.push(trackID);
+            for (const pointID of pointList) {
+                const key = keyMethod(trackID, pointID);
+                const index = this._bufferOrchestrator.offsetMap.get(key);
+                if (index === undefined) {
+                    throw new Error(`Point with key ${key} not found in buffer orchestrator.`);
+                }
+                indexes.push(index);
+                length++;
+            }
+        }
+        this._focusParams.trackIDs = foundTracks;
+        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;
+    }
+}
+const trackToFlatPoints = (track, extraParameters) => {
+    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
+        });
+        for (let i = 0; i < extraParameters.length; i++) {
+            const param = extraParameters[i];
+            if (point.hasOwnProperty(param)) {
+                flatPoints[flatPoints.length - 1][param] = point[param];
+            }
+        }
+    }
+    return flatPoints;
+};
+const keyMethod = (trackID, pointID) => `${trackID}_${pointID}`;
+export { PointTracksPlugin, keyMethod };

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

@@ -1,7 +1,8 @@
 export class ObjectStore {
     _container;
-    constructor({ initialCapcity = 10 } = {}) {
-        this._container = this._createEmptyList(initialCapcity);
+    buffer = undefined; // For compatibility with BufferManager interface
+    constructor({ initialCapacity = 10 } = {}) {
+        this._container = this._createEmptyList(initialCapacity);
     }
     resetWithCapacity(capacity) {
         this._container = this._createEmptyList(capacity);