@pirireis/webglobeplugins 0.0.1

package/heatwavemaps/isobar/quadtreecontours.js

@@ -0,0 +1,338 @@
+// © 2019 3D Robotics. License: Apache-2.0
+/* eslint no-plusplus: "off", prefer-rest-params: "off" */
+const OUTSIDE = 0;
+const ABOVE = 1;
+const BELOW = 2;
+const WITHIN = 3;
+
+// Build mipmap layer N from layer N+1
+function mipmapReduce({ min, max, width, height, scale }) {
+    const outWidth = Math.ceil(width / 2);
+    const outHeight = Math.ceil(height / 2);
+
+    function reduceWith(data, reduce) {
+        const out = new Float32Array(outWidth * outHeight);
+        let x;
+        let y;
+
+        for (y = 0; y < Math.floor(height / 2); y++) {
+            for (x = 0; x < Math.floor(width / 2); x++) {
+                out[y * outWidth + x] = reduce(
+                    data[(y * 2 + 0) * width + (x * 2 + 0)], data[(y * 2 + 0) * width + (x * 2 + 1)],
+                    data[(y * 2 + 1) * width + (x * 2 + 0)], data[(y * 2 + 1) * width + (x * 2 + 1)],
+                );
+            }
+            if (x < outWidth) {
+                out[y * outWidth + x] = reduce(
+                    data[(y * 2 + 0) * width + (x * 2 + 0)],
+                    data[(y * 2 + 1) * width + (x * 2 + 0)],
+                );
+            }
+        }
+        if (y < outHeight) {
+            for (x = 0; x < Math.floor(width / 2); x++) {
+                out[y * outWidth + x] = reduce(
+                    data[(y * 2 + 0) * width + (x * 2 + 0)], data[(y * 2 + 0) * width + (x * 2 + 1)],
+                );
+            }
+        }
+        if (x < outWidth && y < outHeight) {
+            out[y * outWidth + x] = reduce(data[(y * 2 + 0) * width + (x * 2 + 0)]);
+        }
+        return out;
+    }
+
+    function minFinite() {
+        let r = Infinity;
+        for (let i = 0; i < arguments.length; i++) { // significantly faster than the code Babel generates for ...args
+            const v = arguments[i];
+            if (v < r) r = v;
+        }
+        return r;
+    }
+
+    function maxFinite() {
+        let r = -Infinity;
+        for (let i = 0; i < arguments.length; i++) {
+            const v = arguments[i];
+            if (v > r) r = v;
+        }
+        return r;
+    }
+
+    return {
+        min: reduceWith(min, minFinite),
+        max: reduceWith(max, maxFinite),
+        width: outWidth,
+        height: outHeight,
+        scale: scale * 2,
+    };
+}
+
+class ContourMipmap {
+    constructor(raster, width, height) {
+        // Bottom mipmap layer is just the raster: at each pixel the minimum and maximum are the same
+        this.levels = [{ min: raster, max: raster, width, height, scale: 1 }];
+
+        while (this.levels[0].width > 1 || this.levels[0].height > 1) {
+            this.levels.unshift(mipmapReduce(this.levels[0]));
+        }
+    }
+
+    // Get the minimum elevation in the mipmap
+    min() { return this.levels[0].min[0] }
+
+    // Get the maximum elevation in the mipmap
+    max() { return this.levels[0].max[0] }
+
+    // Get an array of contour levels for a specified contour interval
+    intervals(interval) {
+        if (interval <= 0) throw new Error('Contour interval must be positive');
+
+        const min = this.min();
+        const max = this.max();
+
+        const levels = [];
+        let level = Math.ceil(min / interval) * interval;
+        while (level < max) {
+            levels.push(level);
+            level += interval;
+        }
+        return levels;
+    }
+
+    // Walk the quadtree for a specified contour level, and pass quadtree nodes
+    // and contour line segments to the callbacks. This is used for visualizing
+    // the quadtree; in most cases you should use .contour() instead, which
+    // assembles the line segments into lines and rings.
+    evaluateContour(contourLevel, { maxMipmapLevel }, addLine, addNode) {
+        maxMipmapLevel = maxMipmapLevel || this.levels.length - 1;
+        // Test the mipmap at the given coordinate and level, returning whether the contour line is ABOVE, BELOW, or WITHIN this mipmap cell
+        // If the mipmap is out of bounds or NaN at that point, OUTSIDE is returned.
+        const evaluate = (l, x, y) => {
+            const ml = this.levels[l];
+            const i = ml.width * y + x;
+            if (x >= ml.width || y >= ml.height || !Number.isFinite(ml.min[i]) || !Number.isFinite(ml.max[i])) return OUTSIDE;
+            if (ml.min[i] >= contourLevel) return ABOVE;
+            if (ml.max[i] < contourLevel) return BELOW;
+
+            // If we've reached the maximum mipmap level, arbitrarily decide that cells that contain
+            // the contour elevation go inside the contour line.
+            if (l >= maxMipmapLevel) return ABOVE;
+
+            return WITHIN;
+        }
+
+        // Add any vertical contour lines that exist between passed mipmap cell and
+        // its horizontal neighbor to the right. If the line exists at this mipmap
+        // level, it is added directly, otherwise split the edge and recurse at a
+        // more detailed mipmap level.
+        function edgeH(l, x, y) {
+            const e1 = evaluate(l, x, y);
+            const e2 = evaluate(l, x + 1, y);
+
+            if (e1 === ABOVE && e2 === BELOW) {
+                addLine(l, x + 1, y + 1, x + 1, y);
+            } else if (e2 === ABOVE && e1 === BELOW) {
+                // reverse order of coordinates compared to case above so that lines
+                // go counterclockwise around the region above the contour value
+                addLine(l, x + 1, y, x + 1, y + 1);
+            } else if (e1 === WITHIN || e2 === WITHIN) {
+                edgeH(l + 1, x * 2 + 1, y * 2 + 0);
+                edgeH(l + 1, x * 2 + 1, y * 2 + 1);
+            }
+        }
+
+        // Like edgeH, but for horizontal contour lines between the passed cell
+        // and its vertical neighbor below.
+        function edgeV(l, x, y) {
+            const e1 = evaluate(l, x, y);
+            const e2 = evaluate(l, x, y + 1);
+
+            if (e1 === ABOVE && e2 === BELOW) {
+                addLine(l, x, y + 1, x + 1, y + 1);
+            } else if (e2 === ABOVE && e1 === BELOW) {
+                addLine(l, x + 1, y + 1, x, y + 1);
+            } else if (e1 === WITHIN || e2 === WITHIN) {
+                edgeV(l + 1, x * 2 + 0, y * 2 + 1);
+                edgeV(l + 1, x * 2 + 1, y * 2 + 1);
+            }
+        }
+
+        // Add all contour lines within a mipmap cell.
+        // It recurses into the four quadrants of the cell, and also uses edgeH and
+        // edgeV to add the contour lines that exist between quadrants.
+        function node(l, x, y) {
+            let e = evaluate(l, x, y);
+            if (e === WITHIN) {
+                node(l + 1, x * 2 + 0, y * 2 + 0);
+                node(l + 1, x * 2 + 1, y * 2 + 0);
+                node(l + 1, x * 2 + 0, y * 2 + 1);
+                node(l + 1, x * 2 + 1, y * 2 + 1);
+                edgeH(l + 1, x * 2 + 0, y * 2 + 0);
+                edgeV(l + 1, x * 2 + 0, y * 2 + 0);
+                edgeH(l + 1, x * 2 + 0, y * 2 + 1);
+                edgeV(l + 1, x * 2 + 1, y * 2 + 0);
+            } else {
+                if (addNode) addNode(l, x, y, e);
+            }
+        }
+
+        node(0, 0, 0);
+    }
+
+    // Generate a contour line for a specified value
+    //
+    // level: Value in the input array at which to draw a contour line
+    // opts: {
+    //   maxMipmapLevel: Maximum recursion depth in the mipmap. As if you rescaled
+    //                   the input to a maximum dimension of 2^n pixels.
+    //                   (default unlimited)
+    //   minPoints: Lines and rings with fewer points are removed. (default 0)
+    //   smoothKernelWidth: Width of the rectangular filter for smoothing (default 2)
+    //   smoothCycles: Number of iterations of smoothing (default 2)
+    // }
+    //
+    // Returns an array of lines, where each line is an array of [x, y] pairs.
+    contour(level, { maxMipmapLevel, smoothKernelWidth = 2, smoothCycles = 2, minPoints = 0 } = {}) {
+        // Use the quadtree algorithm to generate line segments that make up the contour
+        const segments = [];
+        this.evaluateContour(level, { maxMipmapLevel }, (l, x1, y1, x2, y2) => {
+            const scale = this.levels[l].scale;
+
+            const start = [scale * x1, scale * y1];
+            const end = [scale * x2, scale * y2];
+
+            segments.push({ start, end });
+        });
+
+        segments.sort((a, b) => key(a.start) - key(b.start));
+
+        // .. and then join them together into rings
+
+        // An arbitrary function to use a 2D point as a Map key
+        function key(a) { return a[0] + a[1] * 65536; }
+
+        const fragmentStart = new Map();
+        const fragmentEnd = new Map();
+        const rings = [];
+
+        segments.forEach(({ start, end }) => {
+            const a = fragmentEnd.get(key(start));
+            const b = fragmentStart.get(key(end));
+
+            if (a && b) {
+                fragmentEnd.delete(key(start));
+                fragmentStart.delete(key(end));
+
+                if (a === b) {
+                    // Close a ring
+                    a.push(end);
+                    rings.push(a);
+                } else {
+                    // Join two lines together
+                    const c = a.concat(b);
+                    fragmentStart.set(key(c[0]), c);
+                    fragmentEnd.set(key(c[c.length - 1]), c);
+                }
+            } else if (a) {
+                // Extend an existing line from the end
+                fragmentEnd.delete(key(start));
+                a.push(end);
+                fragmentEnd.set(key(end), a);
+            } else if (b) {
+                // Extend an existing line from the start
+                fragmentStart.delete(key(end));
+                b.unshift(start);
+                fragmentStart.set(key(start), b);
+            } else {
+                // New line doesn't connect to any existing line
+                const c = [start, end];
+                fragmentStart.set(key(start), c);
+                fragmentEnd.set(key(end), c);
+            }
+
+            if (fragmentStart.size !== fragmentEnd.size) {
+                // TODO: is there a better assert function to use?
+                // eslint-disable-next-line
+                console.error(`Contour remaining fragment size mismatch ${fragmentStart.size} ${fragmentEnd.size}`);
+            }
+        });
+
+        const smoothOpts = {
+            kernelWidth: smoothKernelWidth,
+            cycles: smoothCycles,
+        };
+
+        // Closed rings and any unclosed line strings
+        return [...rings, ...fragmentStart.values()]
+            .filter(l => l.length >= minPoints && l.length >= smoothKernelWidth * 2)
+            .map(l => smooth(l, smoothOpts))
+    }
+}
+
+// Smooth a line by repeatedly applying a rectangular filter to approximate
+// a gaussian filter. It detects closed loops and preserves them.
+// The line is passed as an array of `[x, y]` pairs.
+//
+// kernelWidth: Width of the rectangular filter kernel
+// cycles: Number of times to apply the kernel
+function smooth(line, { kernelWidth = 2, cycles = 2 }) {
+    const isLoop = line[0][0] === line[line.length - 1][0] && line[0][1] === line[line.length - 1][1];
+
+    let pointAt;
+    if (isLoop) {
+        pointAt = i => line[(i + line.length) % line.length];
+    } else {
+        pointAt = i => line[Math.min(Math.max(i, 0), line.length - 1)];
+    }
+
+    const sc = 1.0 / (kernelWidth * 2);
+
+    for (let cycle = 0; cycle < cycles; cycle++) {
+        let px = 0;
+        let py = 0;
+
+        if (isLoop) {
+            for (let i = line.length - kernelWidth; i < line.length; i++) {
+                px += line[i][0];
+                py += line[i][1];
+            }
+        } else {
+            px = line[0][0] * kernelWidth;
+            py = line[0][1] * kernelWidth;
+        }
+
+        for (let i = 0; i < kernelWidth; i++) {
+            px += line[i][0];
+            py += line[i][1];
+        }
+
+        const res = line.slice();
+
+        for (let i = 0; i < line.length; i++) {
+            res[i] = [px * sc, py * sc];
+            px += pointAt(i + kernelWidth)[0] - pointAt(i - kernelWidth)[0];
+            py += pointAt(i + kernelWidth)[1] - pointAt(i - kernelWidth)[1];
+        }
+
+        if (isLoop) {
+            // Keep the loop closed
+            res[res.length - 1] = res[0].slice();
+        }
+
+        line = res;
+    }
+
+    return line;
+}
+
+function scaleParameters(minLongitude, minLatitude, maxLongitude, maxLatitude, width, height) {
+    const scaleX = (maxLongitude - minLongitude) / width;
+    const scaleY = (maxLatitude - minLatitude) / height;
+    return { scaleX, scaleY };
+}
+
+
+export default ContourMipmap;
+export { scaleParameters };

package/heatwavemaps/plugins/heatwaveglobeshell.js

@@ -0,0 +1,257 @@
+import { getColorRampModed, DataManager, PointCoordinatesDataCalculator } from "../../util";
+
+import { GlobeShellWiggle, Float2LegendWithRatio } from "../../programs";
+
+
+/**
+ * @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[]}
+ */
+export default class Plugin {
+    constructor(id, dataManager, colorRampData, dataWidthHeight,
+        {
+            bbox = [-180, -90, 180, 90],
+            minMaxEdges = { min: -99999, max: 99999 },
+            escapeValue = 99999,
+            resolution = [2056, 2056],
+        } = {}) {
+        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._lastTexture0data = null;
+        this._lastTexture1data = null;
+
+        // output of heatProgram is written to ._coloredHeatTexture
+        this._frameBuffer = null
+        this._coloredHeatTexture = null;
+
+        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);
+        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 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 = 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) {
+            this.isAble = false;
+            return;
+        };
+        this.heatProgram.setBlendRatio(ratio);
+        if (this._lastTexture0data !== textureData0 || this._lastTexture1data !== textureData1) {
+            this.isAble = true;
+            this._lastTexture0data = textureData0;
+            this._lastTexture1data = textureData1;
+            this.heatProgram.setFloatTextureData(textureData0, textureData1, this._dataWidthHeight.width, this._dataWidthHeight.height);
+        }
+        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) {
+        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 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 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();
+    }
+
+
+}

package/index.js

@@ -0,0 +1,8 @@
+import * as wind from "./wind";
+import * as waveparticles from "./waveparticles";
+import * as timetracks from "./timetracks";
+import { RangeRings } from "./rangerings";
+import * as compassrose from "./compassrose";
+import * as heatmap from "./heatwavemaps";
+
+export { wind, waveparticles, timetracks, RangeRings, compassrose, heatmap };

package/package.json

@@ -0,0 +1,7 @@
+{
+    "name": "@pirireis/webglobeplugins",
+    "version": "0.0.1",
+    "main": "index.js",
+    "author": "Toprak Nihat Deniz Ozturk",
+    "license": "MIT"
+}

package/programs/arrowfield/index.js

@@ -0,0 +1,2 @@
+import ArrowField from './object';
+export default ArrowField;