@pirireis/webglobeplugins 0.6.49-a → 0.7.1

package/Math/angle-calculation.js

@@ -1,4 +1,4 @@
-export function bearingRealAngle(long, lat, endLong, endLat) {
+function bearingRealAngle(long, lat, endLong, endLat) {
     const rLong = Radians * long;
     const rLat = Radians * lat;
     const rEndLong = Radians * endLong;
@@ -9,4 +9,6 @@ export function bearingRealAngle(long, lat, endLong, endLat) {
     let initialBearing = Math.atan2(x, y) / Radians;
     initialBearing = (initialBearing + 360) % 360;
     return initialBearing;
-}
+}
+
+export { bearingRealAngle };

package/Math/methods.js

@@ -0,0 +1,196 @@
+
+const WORLD_RADIUS_3D = 6378.137;
+const WORLD_RADIUS_MERCATOR = 6378136.99911;
+
+/**
+ * @typedef {Array<number>} vec3 [x, y, z]
+ * @typedef {Array<number>} vec2 [x, y]
+ * @typedef {Array<number>} vec4 [x, y, z, w]
+ * @typedef {number} fraction a number between 0 and 1
+ * @typedef {Array<number>} wgs84 [long, lat]
+ */
+
+// *********************************************************
+// **************** VECTOR OPERATIONS **********************
+// *********************************************************
+const RADIANS = Math.PI / 180;
+
+
+/** 
+ * @param {vec3} a 
+ * @returns {vec3}
+ */
+const normalize3 = (a) => {
+    const len = length3(a);
+    return [a[0] / len, a[1] / len, a[2] / len];
+}
+
+
+/**
+ * @param {vec3} a 
+ * @param {vec3} b 
+ * @returns {number}
+ */
+const dot3 = (a, b) => {
+    return a[0] * b[0] + a[1] * b[1] + a[2] * b[2];
+}
+
+
+/**
+ * @param {vec3} a 
+ * @returns {number}
+ */
+const length3 = (a) => {
+    return Math.sqrt(dot3(a, a));
+}
+
+
+// *********************************************************
+// **************** TRANSFORMATIONS ************************
+// *********************************************************
+
+/**
+ * @param {vec3} cartesian 
+ * @returns {vec2} long lat in radians
+ */
+const cartesian3dToRadian = (cartesian) => {
+    const x = cartesian[0];
+    const y = cartesian[1];
+    const z = cartesian[2];
+    // const length = Math.sqrt(x * x + y * y + z * z);
+    const long = Math.atan2(y, x);
+    const lat = Math.asin(z)// length);
+    return [long, lat];
+}
+
+
+/**
+ * @param {vec2} xy long lat in radians
+ * @returns {vec2} long lat in mercator meters
+ */
+const radianToMercator = (xy) => {
+    return [WORLD_RADIUS_MERCATOR * xy[0], WORLD_RADIUS_MERCATOR * Math.log(Math.tan(Math.PI / 4 + xy[1] / 2))];
+}
+
+/**
+ * @param {vec2} xy long lat radians
+ * @returns {vec3} cartesian
+ */
+
+const radianToCartesian3d = (xy) => {
+    const x = Math.cos(xy[1]) * Math.cos(xy[0]);
+    const y = Math.cos(xy[1]) * Math.sin(xy[0]);
+    const z = -Math.sin(xy[1]);
+    return [x, y, z];
+}
+
+
+// *********************************************************
+// ***************** INTERPOLATIONS ************************
+// *********************************************************
+
+/**
+ * @param {vec3} normalizedA
+ * @param {vec3} normalizedB
+ * @param {fraction} ratio
+ * @returns {vec3}
+ */
+const sphericalLinearInterpolation_UnitVector = (normalizedA, normalizedB, ratio) => {
+    const theta = Math.acos(dot3(normalizedA, normalizedB));
+    if (theta < 0.000001) return normalizedA; // CALIBRATE?
+    const sinTheta = Math.sin(theta);
+    const result = [
+        (Math.sin((1.0 - ratio) * theta) * normalizedA[0] + Math.sin(ratio * theta) * normalizedB[0]) / sinTheta,
+        (Math.sin((1.0 - ratio) * theta) * normalizedA[1] + Math.sin(ratio * theta) * normalizedB[1]) / sinTheta,
+        (Math.sin((1.0 - ratio) * theta) * normalizedA[2] + Math.sin(ratio * theta) * normalizedB[2]) / sinTheta
+    ];
+    return result;
+}
+
+
+/**
+ * @param {vec3} normalizedA 
+ * @param {vec3} normalizedB 
+ * @param {fraction} ratio 
+ * @returns 
+ */
+const sphericalLinearInterpolation_Mercator = (normalizedA, normalizedB, ratio) => {
+    const unitVector = sphericalLinearInterpolation_UnitVector(normalizedA, normalizedB, ratio);
+    const angles = cartesian3dToRadian(unitVector);
+    return radianToMercator(angles);
+}
+
+/**
+ * @param {vec4} a vec3 unit vector and length
+ * @param {vec4} b vec3 unit vector and length
+ * @param {fraction} ratio
+ */
+const sphericalLinearInterpolation_Cartesian3d = (a, b, ratio) => {
+    const unitVector = sphericalLinearInterpolation_UnitVector(a, b, ratio);
+    const height = a[3] + (b[3] - a[3]) * ratio;
+    return [unitVector[0] * height, unitVector[1] * height, unitVector[2] * height];
+}
+
+
+/**
+ * 
+ * @param {wgs84} coordinates 
+ * @returns {vec3}
+ */
+const wgs84ToUnitVector = (coordinates) => {
+    const long = coordinates[0] * RADIANS;
+    const lat = coordinates[1] * RADIANS;
+
+    const x = Math.cos(lat) * Math.cos(long);
+    const y = Math.cos(lat) * Math.sin(long);
+    const z = Math.sin(lat);
+    return [x, y, z];
+}
+
+
+/**
+ * @param {vec3} cartesian
+ * @returns {vec4} unit vector and length
+ */
+const cartesian3dToUnitVectorWithHeight = (cartesian) => {
+    const x = cartesian[0];
+    const y = cartesian[1];
+    const z = cartesian[2];
+    const height = Math.sqrt(x * x + y * y + z * z);
+    return [x / height, y / height, z / height, height];
+}
+
+/**
+ * @param {vec2} pixelXY
+ * @returns {vec2} long lat in radians
+ */
+
+const pixelXYToRadians = (pixelXY) => {
+    const long = (2.0 * pixelXY[0] - 1.0) * Math.PI;
+    const lat = (2.0 * pixelXY[1] - 1.0) * Math.PI / 2.0;
+    return [long, lat]
+}
+
+const pixelXYLenghtToUnitVectorWithHeight = (pixelXYHeight) => {
+    const [long, lat] = pixelXYToRadians(pixelXYHeight);
+    const radius = WORLD_RADIUS_3D + pixelXYHeight[2];
+    return radianToCartesian3d([long, lat]).concat(radius);
+}
+
+export {
+    RADIANS,
+    WORLD_RADIUS_3D,
+    normalize3,
+    dot3,
+    length3,
+    cartesian3dToRadian,
+    radianToMercator,
+    radianToCartesian3d,
+    sphericalLinearInterpolation_UnitVector,
+    sphericalLinearInterpolation_Mercator,
+    sphericalLinearInterpolation_Cartesian3d,
+    wgs84ToUnitVector,
+    cartesian3dToUnitVectorWithHeight,
+    pixelXYLenghtToUnitVectorWithHeight
+}
+

package/index.js

@@ -8,4 +8,5 @@ import * as compassrose from "./compassrose";
 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, partialring };
+import * as pointheatmap from "./point-heat-map";
+export { wind, waveparticles, timetracks, rangerings, compassrose, heatwave, util, programs, arrowfield, partialring, pointheatmap };

package/package.json

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

package/point-heat-map/adaptors/timetracksplugin-format-to-this.js

@@ -0,0 +1,78 @@
+/**
+ * @typedef {Float32Array} TimeTrackMultiColorData  | A linestring is representation, let A{a1, a2, a3}, B{b1, b2} be the points of the line.
+     * TimeTrackMultiColorData is [
+     *  a1x, a1y, a1z, a1time, a1r, a1g, a1b, a1time, a3time,
+     *  a2x, a2y, a2z, a2time, a2r, a2g, a2b, a1time, a3time, 
+     *  a3x, a3y, a3z, a3time, a3r, a3g, a3b, a1time, a3time,
+     *  0, 0, 0, 0, -1, -1, -1, 0, 0,
+     *  b1x, b1y, b1z, b1time, b1r, b1g, b1b, b1time, b2time, 
+     *  b2x, b2y, b2z, b2time, b2r, b2g, b2b, BstartTime, BendTime
+     * ]
+     * there is a cutting point between A and B
+     * 
+*/
+
+/**
+ * ABOVE 
+ *  TO
+ * BELOW
+
+/**
+ * @typedef {Array<number>} vec3 [x, y, z]
+ * @typedef {Array<number>} vec2 [x, y]
+ * @typedef {Array<number>} vec4 [x, y, z, w]
+ * @typedef {number} fraction a number between 0 and 1
+ * @typedef {Array<number>} wgs84 [long, lat]
+ */
+
+
+/**
+ * @typedef Timetrack
+ * @property {Array<vec4>}} coordinates [x,y,z, length]
+ * @property {Array<Number>} times  
+ * @param {Array<Timetrack>} timeTracks 
+ */
+
+
+
+import { pixelXYLenghtToUnitVectorWithHeight } from "../../Math/methods";
+
+
+
+const processACut = (array, offset) => {
+    // first 3 values of array
+    const v3 = array.slice(offset, offset + 3);
+    const v4 = pixelXYLenghtToUnitVectorWithHeight(v3);
+    const time = array[offset + 3];
+    return [v4, time];
+}
+
+
+const timeTrackPluginDataToPointHeatInterpolatorAdapter = (timeTrackPluginData) => {
+    const timeTracks = []
+
+    let offset = 0;
+
+    let timeTrack = {
+        coordinates: [],
+        times: []
+    }
+    while (offset < timeTrackPluginData.length) {
+        if (!timeTrackPluginData[offset]) {
+            timeTracks.push(timeTrack);
+            timeTrack = {
+                coordinates: [],
+                times: []
+            }
+            offset += 9;
+        }
+        const point = processACut(timeTrackPluginData, offset);
+        offset += 9;
+        timeTrack.coordinates.push(point[0]);
+        timeTrack.times.push(point[1]);
+    }
+    return timeTracks;
+}
+
+
+export { timeTrackPluginDataToPointHeatInterpolatorAdapter };

package/point-heat-map/index.js

@@ -0,0 +1,3 @@
+import { PointHeatmapPlugin } from "./plugin-webworker";
+import { timeTrackPluginDataToPointHeatInterpolatorAdapter } from "./adaptors/timetracksplugin-format-to-this";
+// export { PointHeatmapPlugin, timeTrackPluginDataToPointHeatInterpolatorAdapter };

package/point-heat-map/plugin-webworker.js

@@ -0,0 +1,166 @@
+import { PointHeatmapFlow } from "./point-to-heat-map-flow";
+import { webworkerStr } from "../util/interpolation/timetrack/web-worker-str";
+import { createTexture, getColorRampModed } from "../util";
+
+class PointHeatmapPlugin {
+
+    constructor(id, { opacity = 1.0, pointSize = 5.0, onInterpolationComplete = () => { } } = {}) {
+        this.id = id;
+        this.globe = null;
+        this.gl = null;
+        this.densityToLegendProgram = null;
+        this._time = null;
+
+        this._opacity = opacity;
+        this._pointSize = pointSize;
+        this._legendTexture = null;
+
+        this._throttleListener = null;
+
+        try {
+
+            this.timeTrackInterpolationWorker = new Worker(
+                new URL(
+                    '../util/interpolation/timetrack/web-worker.js',
+                    import.meta.url
+                ), { type: 'module' }
+            );
+        } catch (e) {
+            console.log(e);
+            const blob = new Blob([webworkerStr], { type: 'application/javascript' });
+            this.timeTrackInterpolationWorker = new Worker(URL.createObjectURL(blob), { type: 'module' });
+        }
+        this.timeTrackInterpolationWorker.onmessage = (e) => {
+            if (e.data.error) {
+                throw new Error(e.data.error);
+            }
+            if (e.data === true) {
+                onInterpolationComplete()
+            }
+            if (e.data instanceof Float32Array) {
+                this.flow.setData(e.data);
+                this._throttleListener = null;
+                onInterpolationComplete();
+            }
+        }
+    }
+
+    // globe interaction
+
+    init(globe, gl) {
+        this.globe = globe;
+        this.gl = gl;
+        this.flow = new PointHeatmapFlow(globe);
+
+    }
+
+
+    setPointSize(pointSize) {
+        if (typeof pointSize !== 'number' || pointSize <= 0) {
+            throw new Error('Invalid pointSize');
+        }
+        this._pointSize = pointSize;
+        this.globe.DrawRender();
+    }
+
+
+    /**
+     * @param {Array<string>} 
+     * @param {string} mode "interpolated" | "discrete"
+     */
+
+    setColorRamp(values, thresholds, mode = "interpolated") {
+        const gl = this.gl
+        if (this.gl === null) {
+            throw new Error('Plugin not initialized');
+        };
+        console.log(values, thresholds, mode);
+        const rampData = getColorRampModed(values, thresholds, mode);
+        console.log(rampData);
+        const texture = createTexture(gl, gl.LINEAR, rampData, 256, 1);
+        console.log(texture);
+        if (this._legendTexture) {
+            this.gl.deleteTexture(this._legendTexture);
+        }
+        this._legendTexture = texture;
+        this.globe.DrawRender();
+    }
+
+
+    setTime(time) {
+        // TODO: WORK ON THIS
+        this._time = time;
+        if (this._throttleListener === null) {
+            this._throttleListener = setTimeout(() => {
+                this.timeTrackInterpolationWorker.postMessage({ time: this._time });
+            }, 0);
+        }
+    }
+
+
+    setTimetracks(timeTracks) {
+        this.timeTrackInterpolationWorker.postMessage({ timeTracks });
+        if (this._time !== null) {
+            this.setTime(this._time);
+        }
+        this.globe.DrawRender();
+    }
+
+
+    setOpacity(opacity) {
+        if (typeof opacity !== 'number' || opacity < 0 || opacity > 1) {
+            throw new Error('Invalid opacity');
+        }
+        this._opacity = opacity;
+        this.globe.DrawRender();
+    }
+
+
+
+    setGeometry() {
+        const geometry = this.globe.api_GetCurrentGeometry();
+        this.timeTrackInterpolationWorker.postMessage({ geometry });
+        if (this._time !== null) {
+            this.setTime(this._time);
+        }
+    }
+
+
+    draw3D() {
+        if (this.isReady()) {
+            this.flow.draw(this._legendTexture, this._pointSize, this._opacity);
+        }
+    }
+
+
+    resize() {
+        this.flow.resize();
+        if (this._time !== null) {
+            this.setTime(this._time);
+        }
+    }
+
+
+    isReady() {
+        return (this.gl !== null && this._legendTexture !== null);
+    }
+
+    free() {
+        if (this._isFreed) return;
+        this.gl.deleteTexture(this._legendTexture);
+        this.flow.free();
+        this.flow = null;
+        this.gl = null;
+        this._isFreed = true;
+        this.timeTrackInterpolator = null;
+        this._legendTexture = null;
+        this.timeTrackInterpolationWorker.terminate();
+        this.timeTrackInterpolationWorker = null;
+    }
+}
+
+
+
+
+
+export { PointHeatmapPlugin };

package/point-heat-map/plugin.js

@@ -0,0 +1,134 @@
+import { PointHeatmapFlow } from "./point-to-heat-map-flow";
+import { TimeTrackInterpolator } from "../util/interpolation/timetrack/timetrack-interpolator";
+import { createTexture, getColorRampModed } from "../util";
+
+class PointHeatmapPlugin {
+
+    constructor(id, { opacity = 1.0, pointSize = 5.0 } = {}) {
+        this.id = id;
+        this.globe = null;
+        this.gl = null;
+        this.densityToLegendProgram = null;
+        this._time = null;
+
+
+        this._opacity = opacity;
+        this._pointSize = pointSize;
+        this._legendTexture = null;
+        this.timeTrackInterpolator = new TimeTrackInterpolator();
+    }
+
+    // globe interaction
+
+    init(globe, gl) {
+        this.globe = globe;
+        this.gl = gl;
+        this.flow = new PointHeatmapFlow(globe);
+
+    }
+
+
+    setPointSize(pointSize) {
+        if (typeof pointSize !== 'number' || pointSize <= 0) {
+            throw new Error('Invalid pointSize');
+        }
+        this._pointSize = pointSize;
+        this.globe.DrawRender();
+    }
+
+
+    /**
+     * @param {Array<string>} 
+     * @param {string} mode "interpolated" | "discrete"
+     */
+
+    setColorRamp(values, thresholds, mode = "interpolated") {
+        const gl = this.gl
+        if (this.gl === null) {
+            throw new Error('Plugin not initialized');
+        };
+        console.log(values, thresholds, mode);
+        const rampData = getColorRampModed(values, thresholds, mode);
+        console.log(rampData);
+        const texture = createTexture(gl, gl.LINEAR, rampData, 256, 1);
+        console.log(texture);
+        if (this._legendTexture) {
+            this.gl.deleteTexture(this._legendTexture);
+        }
+        this._legendTexture = texture;
+        this.globe.DrawRender();
+    }
+
+
+    setTime(time) {
+        this._time = time;
+        const data = this.timeTrackInterpolator.interpolate(time);
+        if (data === null) {
+            return;
+        }
+        this.flow.setData(data);
+    }
+
+
+    setTimetracks(timeTracks) {
+        this.timeTrackInterpolator.setTimetracks(timeTracks);
+        if (this._time !== null) {
+            this.setTime(this._time);
+        }
+        this.globe.DrawRender();
+    }
+
+
+    setOpacity(opacity) {
+        if (typeof opacity !== 'number' || opacity < 0 || opacity > 1) {
+            throw new Error('Invalid opacity');
+        }
+        this._opacity = opacity;
+        this.globe.DrawRender();
+    }
+
+
+
+    setGeometry() {
+        const geometry = this.globe.api_GetCurrentGeometry();
+        this.timeTrackInterpolator.setGeometry(geometry);
+        if (this._time !== null) {
+            this.setTime(this._time);
+        }
+    }
+
+
+    draw3D() {
+        if (this.isReady()) {
+            this.flow.draw(this._legendTexture, this._pointSize, this._opacity);
+        }
+    }
+
+
+    resize() {
+        this.timeTrackInterpolator.setGeometry(this.globe.api_GetCurrentGeometry());
+        this.flow.resize();
+        if (this._time !== null) {
+            this.setTime(this._time);
+        }
+    }
+
+
+    isReady() {
+        return (this.gl !== null && this._legendTexture !== null);
+    }
+
+    free() {
+        if (this._isFreed) return;
+        this.gl.deleteTexture(this._legendTexture);
+        this.flow.free();
+        this.flow = null;
+        this.gl = null;
+        this._isFreed = true;
+        this.timeTrackInterpolator = null;
+        this._legendTexture = null;
+    }
+}
+
+
+export { PointHeatmapPlugin };