@pirireis/webglobeplugins 0.0.1 → 0.0.2

package/heatwave/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

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

package/package.json

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

package/util/heatwavedatamanager/index.js

@@ -0,0 +1,3 @@
+import PointCoordinatesDataCalculator from "./pointcoordinatesdatacalculator";
+import HeatWaveDataManager from "./datamanager";
+export { HeatWaveDataManager, PointCoordinatesDataCalculator };

package/util/index.js

@@ -3,11 +3,11 @@ import * as shaderfunctions from './shaderfunctions';
 import * as geometry from './geometry';
 import * as webglobe from './webglobe';
 import * as programs from './programs';
-import * as DataManagers from './datamanager';
-export { webglobjectbuilders, shaderfunctions, geometry, webglobe, programs, DataManagers };
+import * as heatwavedatamanager from './heatwavedatamanager';
+export { webglobjectbuilders, shaderfunctions, geometry, webglobe, programs, heatwavedatamanager };
 export * from './webglobe';
 export * from './webglobjectbuilders';
 export * from './shaderfunctions';
 export * from './geometry';
 export * from './programs';
-export * from './datamanager';
+export * from './heatwavedatamanager';

package/util/programs/index.js

@@ -1,2 +1 @@
-export * from "./texturetoglobe";
 export * from "./shapesonglobe";

package/util/shaderfunctions/geometrytransformations.js

@@ -104,15 +104,15 @@ vec3 circleLimpFromLongLatRadCenterCartesian3D( vec2 center, float radius, float
     }
 `;
 
-
+// TODO: Make it precise
 export const circleLimpFromLongLatRadCenterMercatorRealDistance = `
 vec2 circleLimpFromLongLatRadCenterMercatorRealDistance(vec2 center, float radius, float angle){
     
     float radius_radian =  radius / R;
     float lat = center.y + radius_radian * sin(angle);
+
     float scale = 1.0/abs( cos( lat ) );
     vec2 center_ = longLatRadToMercator(center);
-
     float x = center_.x +  scale * radius * cos(angle);
     float y = center_.y +  scale * radius * sin(angle);
     return vec2(x, y);

package/waveparticles/index.js

@@ -1,4 +1,3 @@
 import VectorFieldWaveParticle from "./plugin";
 import { centigradePlus90ToVectorArray } from "./adaptor";
-export default VectorFieldWaveParticle;
-export { centigradePlus90ToVectorArray };
+export { centigradePlus90ToVectorArray, VectorFieldWaveParticle };

package/util/datamanager/index.js

@@ -1,3 +0,0 @@
-import PointCoordinatesDataCalculator from "./pointcoordinatesdatacalculator";
-import DataManager from "./datamanager";
-export { DataManager, PointCoordinatesDataCalculator };