@pirireis/webglobeplugins 0.17.0 → 1.0.2

package/altitude-locator/plugin.js

@@ -1,345 +1,445 @@
-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';
-import { BufferOrchestrator, BufferManager } from "../util/account";
-// @ts-ignore
-import { PickerDisplayer } from '../util/picking/picker-displayer.js';
-import { wgs84ToCartesian3d, wgs84ToMercator } from '../Math/methods';
-import { constraintFloat, opacityCheck } from '../util/check/typecheck';
-import { createBufferAndReadInfo } from '../util/gl-util/buffer/attribute-loader';
-import { CameraUniformBlockTotemCache } from '../programs/totems/camerauniformblock';
-/**
- * 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
-const _0vec6 = /* @__PURE__ */ new Float32Array(6);
-const _0vec6_3_6subarray = /* @__PURE__ */ _0vec6.subarray(3, 6);
-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) => {
-                        wgs84ToCartesian3d(_0vec6, item.long, item.lat, item.altitude / 1000);
-                        wgs84ToCartesian3d(_0vec6_3_6subarray, item.long, item.lat, 0 / 1000);
-                        return new Float32Array(_0vec6);
-                    }
-                }],
-            ['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.globe.api_IsScreenMoving();
-    }
-    _changed() {
-        this._parametersChanged = true;
-        this.globe.DrawRender();
-    }
-}
-export { PointGlowLineToEarthPlugin };
+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';
+
+import { BufferOrchestrator, BufferManager } from "../util/account";
+import { PickerDisplayer } from '../util/picking/picker-displayer';
+import { wgs84ToCartesian3d, wgs84ToMercator } from '../Math/methods';
+import { constraintFloat, opacityCheck } from '../util/check/typecheck';
+import { createBufferAndReadInfo } from '../util/gl-util/buffer/attribute-loader';
+import { CameraUniformBlockTotemCache } from '../programs/totems/camerauniformblock';
+
+/**
+ * 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
+
+const _0vec6 = /* @__PURE__ */new Float32Array(6);
+const _0vec6_3_6subarray = /* @__PURE__ */ _0vec6.subarray(3, 6);
+
+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) => {
+                        wgs84ToCartesian3d(_0vec6, item.long, item.lat, item.altitude / 1000)
+                        wgs84ToCartesian3d(_0vec6_3_6subarray, item.long, item.lat, 0 / 1000)
+                        return new Float32Array(_0vec6)
+                    }
+                }],
+                ['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.globe.api_IsScreenMoving();
+    }
+
+    _changed() {
+        this._parametersChanged = true;
+        this.globe.DrawRender();
+    }
+}
+
+export { PointGlowLineToEarthPlugin };