@pirireis/webglobeplugins 0.9.9 → 0.9.10

package/altitude-locator/plugin.js

@@ -0,0 +1,341 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PointGlowLineToEarthPlugin = void 0;
+require("./types.js");
+const pickable_renderer_js_1 = require("../programs/picking/pickable-renderer.js");
+const element_point_glow_js_1 = require("../programs/point-on-globe/element-point-glow.js");
+const element_globe_surface_glow_js_1 = require("../programs/point-on-globe/element-globe-surface-glow.js");
+const naive_accurate_flexible_js_1 = require("../programs/line-on-globe/naive-accurate-flexible.js");
+const account_1 = require("../util/account");
+const picker_displayer_js_1 = require("../util/picking/picker-displayer.js");
+const methods_js_1 = require("../Math/methods.js");
+const typecheck_js_1 = require("../util/check/typecheck.js");
+const attribute_loader_1 = require("../util/gl-util/buffer/attribute-loader");
+const camerauniformblock_js_1 = require("../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 = camerauniformblock_js_1.CameraUniformBlockTotemCache.get(this.globe);
+    }
+    _init() {
+        const { globe, gl, _pickableWrapper, _glowPointWrapper, _glowSurfaceWrapper, _lineProgramWrapper } = this;
+        const bufferType = "STATIC_DRAW";
+        const initialCapacity = 50;
+        this._bufferOrchestrator = new account_1.BufferOrchestrator({ initialCapacity });
+        this._bufferManagersMap = new Map([
+            ['pos3D', {
+                    bufferManager: new account_1.BufferManager(gl, 6, { bufferType, initialCapacity }),
+                    adaptor: (item) => new Float32Array([...(0, methods_js_1.wgs84ToCartesian3d)(item.long, item.lat, item.altitude / 1000), ...(0, methods_js_1.wgs84ToCartesian3d)(item.long, item.lat, 0 / 1000)])
+                }],
+            ['pos2D', {
+                    bufferManager: new account_1.BufferManager(gl, 2, { bufferType, initialCapacity }),
+                    adaptor: (item) => new Float32Array((0, methods_js_1.wgs84ToMercator)(item.long, item.lat))
+                }],
+            ['rgba', {
+                    bufferManager: new account_1.BufferManager(gl, 8, { bufferType, initialCapacity }),
+                    adaptor: (item) => new Float32Array([...item.color, ...item.color])
+                }],
+            ['size', {
+                    bufferManager: new account_1.BufferManager(gl, 1, { bufferType, initialCapacity }),
+                    adaptor: (item) => new Float32Array([item.size])
+                }],
+        ]);
+        _pickableWrapper.program = pickable_renderer_js_1.PickableRendererProgramCache.get(globe);
+        _glowPointWrapper.program = element_point_glow_js_1.ElementPointGlowProgramCache.get(globe);
+        _lineProgramWrapper.program = naive_accurate_flexible_js_1.LineOnGlobeCache.get(globe);
+        this._pickerDisplayer = new picker_displayer_js_1.PickerDisplayer(globe);
+        const obj = (key) => key === null ? null : (0, attribute_loader_1.createBufferAndReadInfo)(this._bufferManagersMap.get(key).bufferManager.buffer);
+        _pickableWrapper.vao = _pickableWrapper.program.createVAO((0, attribute_loader_1.createBufferAndReadInfo)(this._bufferManagersMap.get('pos3D').bufferManager.buffer, 6 * 4, 0), (0, attribute_loader_1.createBufferAndReadInfo)(this._bufferManagersMap.get('pos2D').bufferManager.buffer), (0, attribute_loader_1.createBufferAndReadInfo)(this._bufferManagersMap.get('rgba').bufferManager.buffer, 8 * 4, 0), (0, attribute_loader_1.createBufferAndReadInfo)(this._bufferManagersMap.get('size').bufferManager.buffer));
+        _pickableWrapper.vaoLine = _pickableWrapper.program.createVAO(...['pos3D', 'pos2D', 'rgba', null].map(obj));
+        _pickableWrapper.vaoHoverPoint = _pickableWrapper.program.createVAO((0, attribute_loader_1.createBufferAndReadInfo)(this._bufferManagersMap.get('pos3D').bufferManager.buffer, 6 * 4, 0), (0, attribute_loader_1.createBufferAndReadInfo)(this._bufferManagersMap.get('pos2D').bufferManager.buffer), null, (0, attribute_loader_1.createBufferAndReadInfo)(this._bufferManagersMap.get('size').bufferManager.buffer));
+        _pickableWrapper.vaoHoverLine = _pickableWrapper.program.createVAO(...['pos3D', 'pos2D', null, null].map(obj));
+        _glowPointWrapper.vao = _glowPointWrapper.program.createVAO((0, attribute_loader_1.createBufferAndReadInfo)(this._bufferManagersMap.get('pos3D').bufferManager.buffer, 6 * 4, 0), (0, attribute_loader_1.createBufferAndReadInfo)(this._bufferManagersMap.get('pos2D').bufferManager.buffer), null, (0, attribute_loader_1.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) {
+        (0, typecheck_js_1.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) {
+        (0, typecheck_js_1.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 === null || ubo === void 0 ? void 0 : ubo.free();
+            this.gl.deleteVertexArray(vao);
+        });
+        pickable_renderer_js_1.PickableRendererProgramCache.release(this.globe);
+        element_point_glow_js_1.ElementPointGlowProgramCache.release(this.globe);
+        // ElementGlobeSufaceGlowCache.release(this.globe); // TODO: uncomment when needed
+        naive_accurate_flexible_js_1.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();
+        camerauniformblock_js_1.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();
+    }
+}
+exports.PointGlowLineToEarthPlugin = PointGlowLineToEarthPlugin;

package/altitude-locator/types.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("../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/arrowfield/adaptor.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.centigradePlus90ToRadians = centigradePlus90ToRadians;
+function centigradePlus90ToRadians(centigradeArray, noDataValue = -9999) {
+    const radiansArray = new Float32Array(centigradeArray.length);
+    for (let i = 0; i < centigradeArray.length; i++) {
+        if (centigradeArray[i] === noDataValue) {
+            radiansArray[i] = noDataValue;
+            continue;
+        }
+        radiansArray[i] = (centigradeArray[i] + 90.0) * Math.PI / 180;
+    }
+    return radiansArray;
+}

package/arrowfield/index.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.centigradePlus90ToRadians = exports.ArrowField = void 0;
+const plugin_1 = __importDefault(require("./plugin"));
+exports.ArrowField = plugin_1.default;
+const adaptor_1 = require("./adaptor");
+Object.defineProperty(exports, "centigradePlus90ToRadians", { enumerable: true, get: function () { return adaptor_1.centigradePlus90ToRadians; } });

package/arrowfield/plugin.js

@@ -0,0 +1,86 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const programs_1 = require("../programs");
+class ArrowFieldPlugin {
+    constructor(id, { minLon = -180, maxLon = 180, minLat = -90, maxLat = 90, height = 0, opacity = 1, tailLengthRatio = 1, wingLengthRatio = 0.5, color = [0.04, 0.2, 0.8], targetWidth = 100, targetHeight = 100, data = null, dataWidth = null, dataHeight = null, maxMagnitude = null, noDataValue = null } = {}) {
+        this.id = id;
+        this.options = {
+            minLon,
+            maxLon,
+            minLat,
+            maxLat,
+            height,
+            tailLengthRatio,
+            wingLengthRatio,
+            opacity,
+            color,
+            data,
+            targetHeight,
+            targetWidth,
+            dataWidth,
+            dataHeight,
+            maxMagnitude,
+            noDataValue
+        };
+        this.arrowFieldObj = null;
+        this._doDraw = true;
+    }
+    init(globe, gl) {
+        this.globe = globe;
+        this.gl = gl;
+        this.arrowFieldObj = new programs_1.ArrowField(gl, globe, this.options);
+    }
+    draw3D() {
+        if (this._doDraw) {
+            const { gl, arrowFieldObj } = this;
+            gl.disable(gl.DEPTH_TEST);
+            arrowFieldObj.draw();
+            gl.enable(gl.DEPTH_TEST);
+        }
+    }
+    free() {
+        this.arrowFieldObj.free();
+        this.arrowFieldObj = null;
+    }
+    // user interaction methods
+    on() {
+        this._doDraw = true;
+    }
+    off() {
+        this._doDraw = false;
+    }
+    setBBox({ minLon = -180, maxLon = 180, minLat = -90, maxLat = 90 } = {}) {
+        this.arrowFieldObj.setBBox({ minLon, maxLon, minLat, maxLat });
+    }
+    setHeight(height) {
+        this.arrowFieldObj.update({ height });
+    }
+    setColor(color) {
+        this.arrowFieldObj.update({ color });
+    }
+    setOpacity(opacity) {
+        this.arrowFieldObj.update({ opacity });
+    }
+    setTailLengthRatio(tailLengthRatio) {
+        this.arrowFieldObj.update({ tailLengthRatio });
+    }
+    setWingLengthRatio(wingLengthRatio) {
+        this.arrowFieldObj.update({ wingLengthRatio });
+    }
+    setDataResolution(dataWidth, dataHeight) {
+        this.arrowFieldObj.update({ dataWidth, dataHeight });
+    }
+    setTargetResolution(targetWidth, targetHeight) {
+        this.arrowFieldObj.update({ resolution: [targetWidth, targetHeight] });
+    }
+    setMaxMagnitude(maxMagnitude) {
+        this.arrowFieldObj.update({ maxMagnitude });
+    }
+    setNoDataValue(noDataValue) {
+        this.arrowFieldObj.update({ noDataValue });
+    }
+    setData(rotationData) {
+        this.arrowFieldObj.setData(rotationData);
+    }
+}
+exports.default = ArrowFieldPlugin;

package/bearing-line/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BearingLinePlugin = void 0;
+const plugin_1 = __importDefault(require("./plugin"));
+exports.BearingLinePlugin = plugin_1.default;