@pirireis/webglobeplugins 0.8.5 → 0.8.7

package/point-glow-line-to-earth/plugin.js

@@ -0,0 +1,439 @@
+import './types.js';
+
+import { PickableRendererProgramCache } from '../programs/picking/pickable-renderer.js'
+import { ElementPointGlowProgramCache } from '../programs/point-on-globe/element-point-glow.js';
+import { ElementGlobeSufaceGlowCache } from '../programs/point-on-globe/element-globe-surface-glow.js';
+
+import { LineOnGlobeCache } from '../programs/line-on-globe/naive-accurate-flexible.js';
+
+import { BufferOrchestrator, BufferManager } from "../util/account";
+
+import { PickerDisplayer } from '../util/picking/picker-displayer.js';
+import { wgs84ToCartesian3d, wgs84ToMercator } from '../Math/methods.js';
+import { constraintFloat, opacityCheck } from '../util/check/typecheck.js';
+import { createBufferAndReadInfo } from '../util/gl-util/buffer/integrate-buffer.js';
+import { CameraUniformBlockTotemCache } from '../programs/totems/camerauniformblock.js';
+
+/**
+ * is used with depth we can create a line from surface to the point. 
+ */
+const glowOverSize = 1.35; // 1.25 is the default value in the shader
+
+class PointGlowLineToEarthPlugin {
+    constructor({ isGlowPointOn = true, isGlowSurfaceOn = true }) {
+        this.globe = null;
+        this.gl = null;
+        this._pickableWrapper = {};
+        this._glowPointWrapper = {};
+        this._glowSurfaceWrapper = {};
+        this._lineProgramWrapper = {};
+        this._modes = {
+            isGlowPointOn,
+            isGlowSurfaceOn
+        }
+        this._hoveredObjectId = null;
+        this._lastWH = { w: 0, h: 0 };
+
+        this._opacity = 1.0;
+        this._hoverAgentParams = {
+            timePass: 0,
+            timeGap: 150,
+            stillPicking: false
+        };
+        this._cameraBlockTotem = null;
+        this._tickPhase = 0;
+        this._parametersChanged = false;
+    }
+
+    init(globe, gl) {
+        this.globe = globe;
+        this.gl = gl;
+        this._init();
+        this._cameraBlockTotem = CameraUniformBlockTotemCache.get(this.globe);
+    }
+
+    _init() {
+        const { globe, gl, _pickableWrapper, _glowPointWrapper, _glowSurfaceWrapper, _lineProgramWrapper } = this;
+        const bufferType = "STATIC_DRAW";
+        const initialCapacity = 50;
+        this._bufferOrchestrator = new BufferOrchestrator({ initialCapacity });
+
+        this._bufferManagersMap = new Map(
+            [
+                ['pos3D', {
+                    bufferManager: new BufferManager(gl, 6, { bufferType, initialCapacity }),
+                    adaptor: (item) => new Float32Array([...wgs84ToCartesian3d(item.long, item.lat, item.height / 1000), ...wgs84ToCartesian3d(item.long, item.lat, 0 / 1000)])
+                }],
+                ['pos2D', {
+                    bufferManager: new BufferManager(gl, 2, { bufferType, initialCapacity }),
+                    adaptor: (item) => new Float32Array(wgs84ToMercator(item.long, item.lat))
+                }],
+                ['rgba', {
+                    bufferManager: new BufferManager(gl, 8, { bufferType, initialCapacity }),
+                    adaptor: (item) => new Float32Array([...item.color, ...item.color])
+                }],
+                ['size', {
+                    bufferManager: new BufferManager(gl, 1, { bufferType, initialCapacity }),
+                    adaptor: (item) => new Float32Array([item.size])
+                }],
+
+            ]);
+
+
+        _pickableWrapper.program = PickableRendererProgramCache.get(globe);
+        _glowPointWrapper.program = ElementPointGlowProgramCache.get(globe);
+        _lineProgramWrapper.program = LineOnGlobeCache.get(globe);
+
+        this._pickerDisplayer = new PickerDisplayer(globe);
+
+        const obj = (key) => key === null ? null : createBufferAndReadInfo(this._bufferManagersMap.get(key).bufferManager.buffer);
+
+
+
+        _pickableWrapper.vao = _pickableWrapper.program.createVAO(
+            createBufferAndReadInfo(this._bufferManagersMap.get('pos3D').bufferManager.buffer, 6 * 4, 0),
+            createBufferAndReadInfo(this._bufferManagersMap.get('pos2D').bufferManager.buffer),
+            createBufferAndReadInfo(this._bufferManagersMap.get('rgba').bufferManager.buffer, 8 * 4, 0),
+            createBufferAndReadInfo(this._bufferManagersMap.get('size').bufferManager.buffer),
+        );
+        _pickableWrapper.vaoLine = _pickableWrapper.program.createVAO(
+            ...['pos3D', 'pos2D', 'rgba', null].map(obj)
+        );
+
+        _pickableWrapper.vaoHoverPoint = _pickableWrapper.program.createVAO(
+            createBufferAndReadInfo(this._bufferManagersMap.get('pos3D').bufferManager.buffer, 6 * 4, 0),
+            createBufferAndReadInfo(this._bufferManagersMap.get('pos2D').bufferManager.buffer),
+            null,
+            createBufferAndReadInfo(this._bufferManagersMap.get('size').bufferManager.buffer),
+        );
+
+        _pickableWrapper.vaoHoverLine = _pickableWrapper.program.createVAO(
+            ...['pos3D', 'pos2D', null, null].map(obj));
+
+        _glowPointWrapper.vao = _glowPointWrapper.program.createVAO(
+            createBufferAndReadInfo(this._bufferManagersMap.get('pos3D').bufferManager.buffer, 6 * 4, 0),
+            createBufferAndReadInfo(this._bufferManagersMap.get('pos2D').bufferManager.buffer),
+            null,
+            createBufferAndReadInfo(this._bufferManagersMap.get('size').bufferManager.buffer),
+        );
+
+
+        // _lineProgramWrapper.vao = _lineProgramWrapper.program.createVAO(
+        //     ...[null, 'pos3D', null, 'reverse3D', null, null, "rgba"].map(obj)
+        // );
+
+        // _pickableWrapper.vaoRev = _pickableWrapper.program.createVAO(
+        //     ...['reverse3D', 'pos2D', 'rgba', 'size'].map(obj)
+        // );
+
+
+        _pickableWrapper.ubo = _pickableWrapper.program.createUBO();
+        _pickableWrapper.ubo.update(
+            new Map([
+                ["u_rgba", [1, 1, 1, 1]],
+                ["u_opacity", [1.0]],
+                ["u_size_multiplier", [1.0]],
+                ["u_size", [1.0]],
+                ["u_is_circle", [1.0]],
+                ["u_dash_opacity_multiplier", [0.75]],
+                ["u_dash_phase", [1.57]],
+                ["u_dash_count", [0.5]],
+                ["u_is_circle", [1.0]]
+            ]));
+
+
+        _pickableWrapper.uboLine = _pickableWrapper.program.createUBO();
+        _pickableWrapper.uboLine.update(
+            new Map([
+                ["u_rgba", [1, 1, 1, 1]],
+                ["u_opacity", [1.0]],
+                ["u_size_multiplier", [1.0]],
+                ["u_size", [1.0]],
+                ["u_draw_mode", [1.0]], // 0.0 for default, 1.0 for line
+                ["u_dash_phase", [1.0]],
+                ["u_dash_count", [1.0]],
+                ["u_dash_opacity_multiplier", [1.0]],
+                ["u_is_circle", [0.0]]
+            ]));
+
+        _pickableWrapper.uboLineGlow = _pickableWrapper.program.createUBO();
+        _pickableWrapper.uboLineGlow.update(
+            new Map([
+                ["u_rgba", [1, 1, 1, 1]],
+                ["u_opacity", [1.0]],
+                ["u_size_multiplier", [1.0]],
+                ["u_size", [1.0]],
+                ["u_draw_mode", [1]], // 0.0 for default, 1.0 for line
+                ["u_dash_phase", [0.0]],
+                ["u_dash_count", [5.0]],
+                ["u_dash_opacity_multiplier", [0.5]],
+                ["u_is_circle", [0.0]]
+            ]));
+
+
+        // _pickableWrapper._phase = 1;
+        // _pickableWrapper.phaseTick = () => {
+        //     _pickableWrapper._phase -= 0.003;
+        //     if (_pickableWrapper._phase < 0) {
+        //         _pickableWrapper._phase = 1;
+        //     }
+        //     _pickableWrapper.uboLineGlow.update(new Map([["u_dash_phase", [_pickableWrapper._phase]]]));
+        // }
+
+        _glowPointWrapper.ubo = _glowPointWrapper.program.createUBO();
+        _glowPointWrapper.ubo.update(
+            new Map([
+                ["u_size", new Float32Array([30.0])],
+                ["u_size_multiplier", new Float32Array([glowOverSize])],
+            ]));
+        // _glowPointWrapper._phase = 0;
+        // _glowPointWrapper.phaseTick = () => {
+        //     _glowPointWrapper._phase += 0.0175;
+        //     if (_glowPointWrapper._phase < 0) {
+        //         _glowPointWrapper._phase = 1;
+        //     }
+        //     _glowPointWrapper.ubo.update(new Map([["u_phase", [_glowPointWrapper._phase]]]));
+        // }
+    }
+
+    /**
+     * 
+     * @param {Array<PointGlowData>} data 
+     */
+    insertBulk(data) {
+        const { _bufferManagersMap, _bufferOrchestrator, globe } = this;
+        _bufferOrchestrator.insertBulk(data, _bufferManagersMap);
+        this._changed();
+    }
+
+    setPointSizeMultiplier(sizeMultiplier) {
+        constraintFloat(sizeMultiplier, 0.1, null);
+        this._pickableWrapper.ubo.update(new Map([["u_size_multiplier", [sizeMultiplier]]]));
+        this._glowPointWrapper.ubo.update(new Map([["u_size_multiplier", [sizeMultiplier * 1.25]]]));
+        this._changed();
+    }
+
+    /**
+     * @param {DrawRange} drawRange if null draws all
+     * @returns 
+     */
+    setDrawRange(drawRange = null) {
+        this._drawRange = drawRange;
+        this._changed();
+    }
+
+    /**
+     * 
+     * sophisticated setDrawRange, 
+     * 3 concepts:
+     */
+
+
+
+    setGlowIndexes(glowIndexes) {
+        const { gl } = this;
+        if (!this._elementBuffer) {
+            this._elementBuffer = gl.createBuffer();
+        }
+        // filter glowIndexes with DrawRange
+        gl.bindElementArrayBuffer(this._elementBuffer);
+        this._parametersChanged = true;
+        gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint32Array(glowIndexes), gl.DYNAMIC_DRAW);
+    }
+
+    setOpacity(opacity) {
+        opacityCheck(opacity);
+        this._opacity = opacity;
+        this._pickableWrapper.ubo.update(new Map([["u_opacity", [opacity]]]));
+        this._pickableWrapper.uboLine.update(new Map([["u_opacity", [opacity]]]));
+        this._glowPointWrapper.ubo.update(new Map([["u_opacity", [opacity * glowOverSize]]]));
+        this._changed();
+    }
+
+
+    draw3D() {
+
+        const { _pickableWrapper, _bufferOrchestrator, _drawRange, _pickerDisplayer } = this;
+        const { globe, gl } = this;
+        this._hoverAgent();
+        this.resize();
+        const is3D = globe.api_GetCurrentGeometry() == 0;
+
+        const drawRange = _drawRange || { first: 0, count: _bufferOrchestrator.length };
+
+        const drawOptionsPoint = {
+            drawRange,
+        }
+
+        this._doDraw(drawOptionsPoint, is3D, drawRange);
+
+        _pickerDisplayer.drawColorTexture();
+
+        if (this._hoveredObjectId === -1) {
+            return;
+        }
+
+        // hover draw
+        gl.disable(gl.DEPTH_TEST);
+        const { program, vaoHoverPoint, vaoHoverLine, uboLineGlow } = _pickableWrapper;
+        const drawOptionsHoveredPoint = {
+            drawRange: {
+                first: this._hoveredObjectId,
+                count: 1
+            },
+
+        }
+
+        // program.draw(vaoHoverPoint, drawptionsHoveredPoint, ubo);
+        if (true || this._modes.isGlowPointOn) {
+
+            const { program, vao, ubo } = this._glowPointWrapper;
+            // this._glowPointWrapper.phaseTick();
+            program.draw(vao, drawOptionsHoveredPoint, ubo);
+        } else {
+        }
+        this.globe.DrawRender();
+
+        if (is3D) {
+            const drawOptionsHoveredLine = {
+                drawRange: {
+                    first: this._hoveredObjectId * 2,
+                    count: 2
+                },
+                drawMode: gl.LINES
+            }
+            // _pickableWrapper.phaseTick();
+            program.draw(vaoHoverLine, drawOptionsHoveredLine, uboLineGlow);
+        }
+
+        this._phaseTick();
+
+
+        gl.enable(gl.DEPTH_TEST);
+    }
+
+
+    _doDraw(drawOptionsPoint, is3D, drawRange) {
+        const { gl, _pickableWrapper, _pickerDisplayer } = this;
+        const { program, vao, ubo, uboLine, vaoLine } = _pickableWrapper;
+
+        if (this._doesChanged()) {
+            _pickerDisplayer.bindFBO();
+            _pickerDisplayer.clearTextures();
+            gl.enable(gl.DEPTH_TEST);
+            program.draw(vao, drawOptionsPoint, ubo);
+        }
+
+
+        if (is3D) {
+            const drawOptionsLine = {
+                drawRange: {
+                    first: drawRange.first * 2,
+                    count: drawRange.count * 2
+                },
+                drawMode: gl.LINES
+            }
+            if (this._doesChanged) {
+                uboLine.update(new Map([
+                    ["u_opacity", [0.01]]
+                ]));
+
+                program.draw(vaoLine, drawOptionsLine, uboLine);
+            }
+
+            gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+            uboLine.update(new Map([
+                ["u_opacity", [this._opacity]]
+            ]));
+            program.draw(vaoLine, drawOptionsLine, uboLine);
+        }
+    }
+
+
+
+    getCurrentSelection() {
+        return this._hoveredObjectId;
+    }
+
+
+    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._changed();
+    }
+
+
+    free() {
+
+        const { _pickableWrapper, _glowPointWrapper, _glowSurfaceWrapper, _lineProgramWrapper } = this;
+
+        [_pickableWrapper, _glowPointWrapper, _glowSurfaceWrapper, _lineProgramWrapper].forEach((item) => {
+            const { vao, ubo } = item;
+            ubo?.free();
+            this.gl.deleteVertexArray(vao);
+        });
+
+        PickableRendererProgramCache.release(this.globe);
+        ElementPointGlowProgramCache.release(this.globe);
+        // ElementGlobeSufaceGlowCache.release(this.globe); // TODO: uncomment when needed
+        LineOnGlobeCache.release(this.globe);
+        if (this._elementBuffer) this.gl.deleteBuffer(this._elementBuffer);
+        this._pickerDisplayer.free();
+        this._bufferManagersMap.forEach((item) => item.bufferManager.free());
+        this._bufferManagersMap.clear();
+        CameraUniformBlockTotemCache.release(this.globe);
+    }
+
+
+    _phaseTick() {
+        this._tickPhase += 0.003;
+        if (this._tickPhase > 1) {
+            this._tickPhase = 0;
+        }
+        this._glowPointWrapper.ubo.update(new Map([["u_phase", [this._tickPhase * 2]]]));
+        this._pickableWrapper.uboLineGlow.update(new Map([["u_dash_phase", [1 - this._tickPhase]]]));
+    }
+
+
+    _hoverAgent() {
+        const { globe, _hoverAgentParams } = this;
+        const pos = globe.api_GetMousePos();
+        const currentTime = new Date().getTime();
+        if (_hoverAgentParams.stillPicking || _hoverAgentParams.timePass > currentTime) {
+            return
+        };
+
+        _hoverAgentParams.timePass = currentTime + _hoverAgentParams.timeGap;
+
+        const x = pos.canvasX;
+        const y = globe.api_ScrH() - pos.canvasY;
+        _hoverAgentParams.stillPicking = true;
+        this._pickerDisplayer.pickXY(x, y, 1, (idSet) => {
+            _hoverAgentParams.stillPicking = false;
+            if (idSet.size === 0) {
+                this._hoveredObjectId = -1;
+                return;
+            }
+            const index = [...idSet][0];
+            if (index !== this._hoveredObjectId) {
+                this._hoveredObjectId = index;
+                this.globe.DrawRender();
+            }
+        });
+    }
+
+    _doesChanged() {
+        return this._cameraBlockTotem.isMoved() || this._parametersChanged; // TODO: implement
+    }
+
+    _changed() {
+        this._parametersChanged = true;
+        this.globe.DrawRender();
+    }
+}
+
+export { PointGlowLineToEarthPlugin };

package/point-glow-line-to-earth/types.js

@@ -0,0 +1,26 @@
+import "../types";
+
+/**
+ * @typedef PointGlowData
+ * @type {Object}
+ * @property {number} key
+ * @property {number} latitude
+ * @property {number} longitude
+ * @property {number} height
+ * @property {number} size
+ * @property {[number, number, number]} color
+ */
+
+
+
+
+/**
+ * 
+ * 
+ * drawSubsetOptions
+ * @typedef DrawSubsetOptions
+ * @type {Object}
+ * @property {null|Color} color if provided, it will override the color
+ * @property {Opacity} opacity default 1.0
+ * @property {DrawRangeIndexParams} drawOptions
+ */

package/point-heat-map/index.js

@@ -1,3 +0,0 @@
-import { PointHeatmapPlugin } from "./plugin-webworker";
-import { timeTrackPluginDataToPointHeatInterpolatorAdapter } from "./adaptors/timetracksplugin-format-to-this";
-// export { PointHeatmapPlugin, timeTrackPluginDataToPointHeatInterpolatorAdapter };

package/point-heat-map/plugin-webworker.js

@@ -1,6 +1,7 @@
 import { PointHeatmapFlow } from "./point-to-heat-map-flow";
 import { webworkerStr } from "../util/interpolation/timetrack/web-worker-str";
 import { createTexture, getColorRampModed } from "../util";
+import { opacityCheck, constraintFloat } from "../util/check/typecheck";
 
 class PointHeatmapPlugin {
 
@@ -46,9 +47,7 @@ class PointHeatmapPlugin {
 
 
     setPointSize(pointSize) {
-        if (typeof pointSize !== 'number' || pointSize <= 0) {
-            throw new Error('Invalid pointSize');
-        }
+        constraintFloat(pointSize, 1);
         this._pointSize = pointSize;
         this.globe.DrawRender();
     }
@@ -96,9 +95,7 @@ class PointHeatmapPlugin {
 
 
     setOpacity(opacity) {
-        if (typeof opacity !== 'number' || opacity < 0 || opacity > 1) {
-            throw new Error('Invalid opacity');
-        }
+        opacityCheck(opacity);
         this._opacity = opacity;
         this.globe.DrawRender();
     }
@@ -148,7 +145,5 @@ class PointHeatmapPlugin {
 }
 
 
+export { PointHeatmapPlugin };
 
-
-
-export { PointHeatmapPlugin };

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

@@ -25,7 +25,6 @@ class PointHeatmapFlow {
             this.framebuffer = gl.createFramebuffer();
             this.densityTexture = this._createDensityTexture();
             this._bindTextureToFramebuffer();
-
         }
     }
 
@@ -51,11 +50,6 @@ class PointHeatmapFlow {
             gl.bindFramebuffer(gl.FRAMEBUFFER, null);
         }
         defaultblendfunction(gl);
-        // gl.viewport(0, 0, 400, 400);
-        // this.testTextureProgram.draw(legendTexture, 1.0);
-        // gl.viewport(0, 400, 400, 400);
-        // this.testTextureProgram.draw(this.densityTexture, 1.0);
-        // gl.viewport(0, 0, globe.api_ScrW(), globe.api_ScrH());
         this._drawLegend(legendTexture, opacity);
     }
 

package/point-tracks/plugin.js

@@ -1,7 +1,7 @@
 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 { PointOnGlobeProgramCache } from "../programs/point-on-globe/square-pixel-point";
 
 import { wgs84ToCartesian3d, wgs84ToMercator } from "../Math/methods";
 
@@ -33,7 +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._focusParams = { on: false, length: 0, elementBuffer: null, trackIDs: [] };
         this.pointSizes = {
             pointSize,
             selectionPointFilling,
@@ -47,7 +47,7 @@ class PointTracksPlugin {
         this.globe = globe;
         this.gl = gl;
         this._pickerDisplayer = new PickerDisplayer(globe);
-        this._pointProgram = pointOnGlobeProgramCache.get(globe);
+        this._pointProgram = PointOnGlobeProgramCache.get(globe);
         this._focusParams.elementBuffer = gl.createBuffer();
         this._initBufferManagers();
     }
@@ -156,7 +156,7 @@ class PointTracksPlugin {
      * @returns 
      */
     insertBulk(tracks) {
-        this._fillTracksToPointsMap(tracks);
+        this._fillTracksToPointsMap(tracks); // TODO error should be at the top
         const flattenedPoints = tracks.map(trackToFlatPoints).flat();
         const currentLoad = this._bufferOrchestrator.length;
         if (currentLoad + flattenedPoints.length >= 2147483647) {
@@ -164,6 +164,8 @@ class PointTracksPlugin {
         }
         const { _bufferManagersMap, _bufferOrchestrator } = this;
         _bufferOrchestrator.insertBulk(flattenedPoints, _bufferManagersMap);
+        this._refillFocus();
+
         this.globe?.DrawRender();
 
     }
@@ -173,6 +175,7 @@ class PointTracksPlugin {
         const capacity = 100
         this._bufferOrchestrator?.flush({ capacity });
         this._bufferManagersMap.forEach(({ bufferManager }) => bufferManager.resetWithCapacity(capacity));
+        this._turnOffFocus();
         this._tracksToPointsMap.clear();
         this.globe?.DrawRender();
     }
@@ -190,20 +193,11 @@ class PointTracksPlugin {
         );
         this._tracksToPointsMap.delete(trackID);
         this._redraw = true;
+        this._refillFocus();
+
         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
@@ -216,16 +210,32 @@ class PointTracksPlugin {
             _bufferManagersMap
         );
         this._deletePointsFromTracksMap(trackID, pointIDs);
+        this._refillFocus();
         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);
+        if (!this._focusParams.on) {
+            this._turnOffFocus();
+        }
+        this.globe.DrawRender();
+    }
+
+
     // GLOBE API METHODS
 
     free() {
         if (this._isFreed) return;
         this._isFreed = true;
         this._pickerDisplayer.free();
-        pointOnGlobeProgramCache.release(this.globe);
+        PointOnGlobeProgramCache.release(this.globe);
         this.gl.deleteBuffer(this._focusParams.elementBuffer);
         this._bufferManagersMap.forEach(
             ({ bufferManager, adaptor }) => bufferManager.free()
@@ -293,6 +303,11 @@ class PointTracksPlugin {
         }
     }
 
+    _refillFocus() {
+        if (this._focusParams.on) {
+            this.focusTracks(this._focusParams.trackIDs);
+        }
+    }
 
     _deletePointsFromTracksMap(trackID, pointIDs) {
         const trackSet = this._tracksToPointsMap.get(trackID);
@@ -312,15 +327,24 @@ class PointTracksPlugin {
 
     }
 
+    _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 pointSet = this._tracksToPointsMap.get(trackID);
             if (!pointSet) continue;
+            foundTracks.push(trackID);
             const points = Array.from(pointSet);
             for (const pointID of points) {
                 const key = keyMethod(trackID, pointID);
@@ -329,6 +353,7 @@ class PointTracksPlugin {
                 length++;
             }
         }
+        this._focusParams.trackIDs = foundTracks;
         this._focusParams.length = length;
         if (length === 0) {
             return false;