@pirireis/webglobeplugins 0.9.9 → 0.9.10

package/heatwave/plugins/heatwaveglobeshell.js

@@ -0,0 +1,206 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const util_1 = require("../../util");
+const programs_1 = require("../../programs");
+const typecheck_1 = require("../../util/check/typecheck");
+/**
+ * @param id : string
+ * @param dataManager : DataManager
+ * @param colorRampData : {values: string[], thresholds: number[], mode: string}
+ * @param dataWidthHeight : {width: number, height: number}
+ * @param options : {bbox: number[], minMaxEdges: {min: number, max: number}, escapeValue: number, resolution: number[], meshPartition: number[]}
+ */
+class HeatWaveGlobeShellPlugin {
+    constructor(id, dataManager, colorRampData, dataWidthHeight, { bbox = [-180, -90, 180, 90], minMaxEdges = { min: -99999, max: 99999 }, escapeValue = 99999, resolution = [2056, 2056], yFlip = true, } = {}) {
+        this.id = id;
+        this.dataManager = dataManager;
+        this._dataWidthHeight = dataWidthHeight;
+        this._isOn = true;
+        this._bbox = bbox;
+        this._minMaxEdges = minMaxEdges;
+        this._escapeValue = escapeValue;
+        this._resolution = resolution;
+        this._colorRampData = colorRampData; // holds until init
+        this._yFlip = yFlip;
+        this._lastTexture0data = null;
+        this._lastTexture1data = null;
+        // output of heatProgram is written to ._coloredHeatTexture
+        this._frameBuffer = null;
+        this._coloredHeatTexture = null;
+        this.enabled = false;
+        this.isAble = false;
+    }
+    setHeight(height) {
+        this.globeShell.setHeight(height);
+    }
+    drawHeat() {
+        const gl = this.gl;
+        gl.bindFramebuffer(gl.FRAMEBUFFER, this._frameBuffer);
+        gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this._coloredHeatTexture, 0);
+        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+        const currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
+        const currentWidth = gl.canvas.width;
+        const currentHeight = gl.canvas.height;
+        gl.viewport(0, 0, ...this._resolution);
+        this.heatProgram.draw();
+        gl.viewport(0, 0, currentWidth, currentHeight);
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+        gl.useProgram(currentProgram);
+        this.globe.DrawRender();
+    }
+    setEscapeValue(escapeValue) {
+        this._escapeValue = escapeValue;
+        this.heatProgram.setEscapeValue(escapeValue);
+    }
+    _createPointCoordinatesDataCalculator() {
+        this.coordinatesDataCalculator = new util_1.PointCoordinatesDataCalculator(this._bbox, this._dataWidthHeight.width, this._dataWidthHeight.height);
+        this.dataManager.register(this._coordinatesDataCalculatorID(), this.coordinatesDataCalculator.updateData.bind(this.coordinatesDataCalculator));
+    }
+    _coordinatesDataCalculatorID() {
+        return this.id + "_coordinatesDataCalculator";
+    }
+    updateTime(time) {
+        this.dataManager.updateTime(time);
+        this.globe.DrawRender();
+    }
+    setWiggle({ wiggleInKm = null, wiggleSpeed = null } = {}) {
+        this.globeShell.setWiggle({ wiggleInKm, wiggleSpeed });
+    }
+    setMinMaxEdges(min = null, max = null) {
+        if (min)
+            this._minMaxEdges.min = min;
+        if (max)
+            this._minMaxEdges.max = max;
+        this.heatProgram.setMinMaxEdges(this._minMaxEdges.min, this._minMaxEdges.max);
+        this.drawHeat();
+    }
+    setBBox(minLon, minLat, maxLon, maxLat) {
+        this._bbox = [minLon, minLat, maxLon, maxLat];
+        this.globeShell.setBBox({ minLon, minLat, maxLon, maxLat });
+        this.drawHeat();
+    }
+    getPointCoordinatesDataCalculator() {
+        if (!this.coordinatesDataCalculator)
+            this._createPointCoordinatesDataCalculator();
+        return this.coordinatesDataCalculator;
+    }
+    /**
+     * @param {*} values n + 1 number of color hex values without alpha channel. Ex: ["#ff0000", "#00ff00", "#0000ff"]
+     * @param {*} thresholds n number of thresholds. Ex: [0, 10, 20]
+     * @param {*} mode "discrete" or "interpolated"
+     *
+     * There are maximum 256 pixels in the color ramp.
+     * The first values array is minimum edge value which is the first pixel, the second comes one pixel after the first.
+     */
+    setColorRamp(values, thresholds, mode = "interpolated") {
+        const lowest = thresholds[0];
+        const highest = thresholds[thresholds.length - 1];
+        const range = highest - lowest;
+        const clampedThresholds = thresholds.map((t) => (t - lowest) / range);
+        const colors = (0, util_1.getColorRampModed)(values, clampedThresholds, mode);
+        this.heatProgram.setColorRampTextureData(colors, 256);
+        this.heatProgram.setColorRampRange(lowest, highest);
+        this.drawHeat();
+    }
+    off() {
+        this._isOn = false;
+    }
+    on() {
+        this._isOn = true;
+    }
+    _updateData(ratio, textureData0 = null, textureData1 = null) {
+        if (!textureData0 || !textureData1) {
+            if (this._disCarded)
+                return;
+            this.heatProgram.discard();
+            this.drawHeat();
+            this._disCarded = true;
+            return;
+        }
+        ;
+        this.heatProgram.setBlendRatio(ratio);
+        if (this._lastTexture0data !== textureData0 || this._lastTexture1data !== textureData1) {
+            this._disCarded = false;
+            this._lastTexture0data = textureData0;
+            this._lastTexture1data = textureData1;
+            this.heatProgram.setFloatTextureData(textureData0, textureData1, this._dataWidthHeight.width, this._dataWidthHeight.height, this._yFlip);
+        }
+        this.drawHeat();
+    }
+    setDataWidthHeight(width, height) {
+        this._dataWidthHeight = { width, height };
+        this.heatProgram.setDataWidthHeight(width, height);
+        this.setGeometry();
+    }
+    draw3D() {
+        if (!this._isOn)
+            return;
+        // if (!this.isAble) return;
+        this.gl.disable(this.gl.DEPTH_TEST);
+        this.globeShell.draw();
+        this.gl.enable(this.gl.DEPTH_TEST);
+    }
+    setOpacity(opacity) {
+        (0, typecheck_1.opacityCheck)(opacity);
+        this.globeShell.setOpacity(opacity);
+    }
+    _setAfterInit() {
+        const [minLon, minLat, maxLon, maxLat] = this._bbox;
+        this.globeShell.setBBox({ minLon, minLat, maxLon, maxLat });
+        this.setColorRamp(this._colorRampData.values, this._colorRampData.thresholds, this._colorRampData.mode);
+        delete this._colorRampData;
+        this.setMinMaxEdges(this._minMaxEdges.min, this._minMaxEdges.max);
+        this.setEscapeValue(this._escapeValue);
+    }
+    _init(globe, gl) {
+        this.globeShell = new programs_1.GlobeShellWiggle(gl, globe, {
+            minLon: this._bbox[0],
+            minLat: this._bbox[1],
+            maxLon: this._bbox[2],
+            maxLat: this._bbox[3],
+            color: [1.0, 0.1, 0.4, 0.2],
+            height: 0,
+            wiggleInKM: 2,
+            eastWestTied: false,
+            displayMesh: false
+        });
+        this.heatProgram = new programs_1.Float2LegendWithRatio(gl);
+        this._frameBuffer = gl.createFramebuffer();
+        this.dataManager.register(this.id, (ratio, t1, t2) => this._updateData(ratio, t1, t2));
+        this.setResolution(this._resolution[0], this._resolution[1]);
+    }
+    init(globe, gl) {
+        this.globe = globe;
+        this.gl = gl;
+        this._init(globe, gl);
+        this._setAfterInit();
+    }
+    setGeometry() {
+        // globeShell has an implicit program, registered and sets its own geometry.
+        return;
+    }
+    // sets Density of middle texture which is used with framebuffers
+    setResolution(width, height) {
+        const gl = this.gl;
+        this._resolution = [width, height];
+        this._coloredHeatTexture = gl.createTexture();
+        gl.bindTexture(gl.TEXTURE_2D, this._coloredHeatTexture);
+        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+        gl.bindTexture(gl.TEXTURE_2D, null);
+        this.globeShell.setTexture(this._coloredHeatTexture);
+    }
+    free() {
+        if (this.coordinatesDataCalculator) {
+            this.dataManager.unregister(this._coordinatesDataCalculatorID());
+            this.coordinatesDataCalculator = null;
+        }
+        this.dataManager.unregister(this.id);
+        this.globeShell.free();
+        this.heatProgram.free();
+    }
+}
+exports.default = HeatWaveGlobeShellPlugin;

package/jest.config.js

@@ -0,0 +1,7 @@
+"use strict";
+module.exports = {
+    preset: 'ts-jest',
+    testEnvironment: 'node',
+    testMatch: ['**/tests/**/*.test.ts'],
+    moduleFileExtensions: ['ts', 'js'],
+};

package/package.json

@@ -1,13 +1,13 @@
 {
     "name": "@pirireis/webglobeplugins",
-    "version": "0.9.9",
+    "version": "0.9.10",
     "main": "index.js",
     "author": "Toprak Nihat Deniz Ozturk",
     "license": "MIT",
     "scripts": {
         "build": "tsc"
     },
-    "files": [
-        "dist"
-    ]
+    "devDependencies": {
+        "typescript": "^5.0.0"
+    }
 }

package/partialrings/buffer-manager.js

@@ -0,0 +1,81 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const bufferoffsetmanager_1 = __importDefault(require("../util/account/bufferoffsetmanager"));
+const ITEM_SIZE = 10;
+class BufferManager extends bufferoffsetmanager_1.default {
+    constructor(globe, gl, buffer, { initialCapacity = 10, bufferType = "DYNAMIC_DRAW" } = {}) {
+        super(ITEM_SIZE, { capacity: initialCapacity });
+        this.globe = globe;
+        this.gl = gl;
+        this.buffer = buffer;
+        this.bufferType = bufferType;
+        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+        gl.bufferData(gl.ARRAY_BUFFER, initialCapacity * ITEM_SIZE * 4, gl[bufferType]);
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
+    }
+    /**
+     *
+     * @param { Array<{key, long, lat, startAngle, tailAngle, radius, rgba[4], rgbaMode }>} rings
+     * @returns
+     */
+    insertBulk(items) {
+        if (items.length === 0)
+            return;
+        this.autoExtendBuffer(items.length);
+        const { gl, buffer } = this;
+        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+        for (let { key, long, lat, startAngle, tailAngle, rgba, radius, rgbaMode } of items) {
+            const offset = this.getOffset(key) | this.nextOffset();
+            this.setOffset(key, offset);
+            const block = new Float32Array([
+                long, lat, startAngle, tailAngle, ...rgba, radius, rgbaMode
+            ]);
+            gl.bufferSubData(gl.ARRAY_BUFFER, offset, block);
+            // 2         1       1           1         4       1 = 10
+        }
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
+        this.globe.DrawRender();
+    }
+    /**
+     * @param {Array<{key, long, lat, startAngle, tailAngle}>} items
+     *
+     * */
+    updateCenterAndAngleBulk(items) {
+        const { gl, buffer } = this;
+        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+        for (let { key, long, lat, startAngle, tailAngle } of items) {
+            const offset = this.getOffset(key);
+            if (offset === null) {
+                console.warn(`key ${key} not found`);
+                continue;
+            }
+            const block = new Float32Array([long, lat, startAngle, tailAngle]);
+            gl.bufferSubData(gl.ARRAY_BUFFER, offset, block);
+        }
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
+        this.globe.DrawRender();
+    }
+    /**
+     *
+     * @param {Array<{key:string, payload:Float32Array}} items
+     * @param {PART_OFFSET_LOOPUP} part | long, lat, START_ANGLE, ROTATION_ANGLE, RADIUS, rgba, rgba_MODE
+     * @returns
+     */
+    updatePartial(items, part) {
+        const { gl, buffer } = this;
+        this._updatePartial(items, part, gl, buffer);
+        this.globe.DrawRender();
+    }
+    deleteBulk(keys) {
+        this._deleteBulk(keys);
+        this.globe.DrawRender();
+    }
+    free() {
+        this.gl.deleteBuffer(this.buffer);
+        this.buffer = null;
+    }
+}
+exports.default = BufferManager;

package/partialrings/index.js

@@ -0,0 +1,41 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PART_OFFSET_LOOPUP = exports.RINGPARTIAL_DRAW_MODE = exports.RINGPARTIAL_ALPHA_MODE = exports.PartialRing = void 0;
+const plugin_1 = __importStar(require("./plugin"));
+exports.PartialRing = plugin_1.default;
+Object.defineProperty(exports, "RINGPARTIAL_ALPHA_MODE", { enumerable: true, get: function () { return plugin_1.RINGPARTIAL_ALPHA_MODE; } });
+Object.defineProperty(exports, "RINGPARTIAL_DRAW_MODE", { enumerable: true, get: function () { return plugin_1.RINGPARTIAL_DRAW_MODE; } });
+Object.defineProperty(exports, "PART_OFFSET_LOOPUP", { enumerable: true, get: function () { return plugin_1.PART_OFFSET_LOOPUP; } });

package/partialrings/plugin.js

@@ -0,0 +1,135 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PART_OFFSET_LOOPUP = exports.RINGPARTIAL_ALPHA_MODE = exports.RINGPARTIAL_DRAW_MODE = void 0;
+const bufferoffsetmanager_1 = __importDefault(require("../util/account/bufferoffsetmanager"));
+const program_1 = require("./program");
+const typecheck_1 = require("../util/check/typecheck");
+const emptyBlock = new Float32Array([0, 0, 0, 0, 0, 0, 0, 0, 0, 0]);
+exports.RINGPARTIAL_DRAW_MODE = Object.freeze({
+    LINE_STRIP: "LINE_STRIP",
+    TRIANGLE_FAN: "TRIANGLE_FAN",
+});
+exports.RINGPARTIAL_ALPHA_MODE = Object.freeze({
+    CONSTANT: 0,
+    FADING: 1,
+    HIDE: 2,
+});
+exports.PART_OFFSET_LOOPUP = Object.freeze({
+    LONG: 0,
+    LAT: 1,
+    START_ANGLE: 2,
+    TAIL_ANGLE: 3,
+    RGBA: 4,
+    RADIUS: 8,
+    RGBA_MODE: 9,
+});
+class default_1 {
+    constructor(id, { edgeCount = 10, drawMode = exports.RINGPARTIAL_DRAW_MODE.LINE_STRIP, startLod = 3, endLod = 13, alphaMultiplier = 1 } = {}) {
+        this.id = id;
+        this.edgeCount = edgeCount;
+        this.drawMode = drawMode;
+        this.startLod = startLod;
+        this.endLod = endLod;
+        this.alphaMultiplier = alphaMultiplier;
+    }
+    init(globe, gl) {
+        this.gl = gl;
+        this.globe = globe;
+        this.program = program_1.programCache.get(globe);
+        const { vao, buffer } = this.program.getVaoBuffer();
+        this.vao = vao;
+        this.buffer = buffer;
+    }
+    draw3D() {
+        const LOD = this.globe.api_GetCurrentLOD();
+        if (LOD < this.startLod || LOD > this.endLod)
+            return;
+        this.program.draw(this.bufferManager.length, this.vao, this.edgeCount, this.alphaMultiplier, this.drawMode);
+    }
+    /**
+     *
+     * @param {RINGPARTIAL_DRAW_MODE} drawMode
+     */
+    setDrawMode(drawMode) {
+        this.drawMode = drawMode;
+    }
+    setOpacity(opacity) {
+        (0, typecheck_1.opacityCheck)(opacity);
+        this.alphaMultiplier = opacity;
+    }
+    setStartEndLOD({ startLod = null, endLod = null } = {}) {
+        if (startLod !== null)
+            this.startLod = startLod;
+        if (endLod !== null)
+            this.endLod = endLod;
+    }
+    createBufferMAnager(initialCapacity = 10, bufferType = 'DYNAMIC_DRAW') {
+        if (!this.bufferManager) {
+            this.bufferManager = new BufferManager(this.globe, this.gl, this.buffer, { initialCapacity, bufferType, });
+        }
+        return this.bufferManager;
+    }
+    free() {
+        program_1.programCache.free(this.globe);
+        this.bufferManager.free();
+    }
+}
+exports.default = default_1;
+class BufferManager extends bufferoffsetmanager_1.default {
+    constructor(globe, gl, buffer, { initialCapacity = 10, bufferType, } = {}) {
+        super(10, { capacity: initialCapacity, bufferType, });
+        this.globe = globe;
+        this.gl = gl;
+        this.buffer = buffer;
+        this.bufferType = bufferType;
+        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+        gl.bufferData(gl.ARRAY_BUFFER, initialCapacity * program_1.ITEM_SIZE * 4, gl[bufferType]);
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
+    }
+    /**
+     *
+     * @param { Array<{key, long, lat, startAngle, tailAngle, radius, rgba[4], rgbaMode }>} rings
+     * @returns
+     */
+    insertBulk(items) {
+        if (items.length === 0)
+            return;
+        this.autoExtendBuffer(items.length);
+        const { gl, buffer } = this;
+        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+        for (let { key, long, lat, startAngle, tailAngle, rgba, radius, rgbaMode } of items) {
+            const offset = this.getOffset(key) | this.nextOffset();
+            this.setOffset(key, offset);
+            const block = new Float32Array([
+                long, lat, startAngle, tailAngle, ...rgba, radius, rgbaMode
+            ]);
+            gl.bufferSubData(gl.ARRAY_BUFFER, offset, block);
+            // 2         1       1           1         4       1 = 10
+        }
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
+        this.globe.DrawRender();
+    }
+    /**
+     *
+     * @param {Array<{key:string, payload:Float32Array}} items
+     * @param {PART_OFFSET_LOOPUP} part | long, lat, START_ANGLE, ROTATION_ANGLE, RADIUS, rgba, rgba_MODE
+     * @returns
+     */
+    updatePartial(items, part) {
+        const { gl, buffer } = this;
+        this._updatePartial(items, part, gl, buffer);
+        this.globe.DrawRender();
+    }
+    delete(keys) {
+        const { gl, buffer } = this;
+        this._removefromBuffer(gl, buffer, keys, emptyBlock);
+        this.globe.DrawRender();
+    }
+    free() {
+        this.gl.deleteBuffer(this.buffer);
+        this.buffer = null;
+    }
+}