@pirireis/webglobeplugins 0.0.1

package/timetracks/adaptors.js

@@ -0,0 +1,133 @@
+import { latLongToPixelXY } from "../util";
+const _latLongToPixelXY = latLongToPixelXY;
+
+
+
+class Adaptor {
+    /**
+     * @param {Object.<string, Color>} groupColorMap 
+     * @typedef {Array} Color | [r, g, b] | between 0-1
+     */
+    constructor(groupColorMap) {
+        this._groupColorMap = groupColorMap;
+    }
+
+    /**
+     * @param {Object} geojsonObject
+     * @param {number} startTime
+     * @param {string} timePropertyName
+     * @param {string} styleGroupPropertyName
+     * @returns {lineData} lineData for Plugin
+     */
+    fromGeoJson(geojsonObject, startTime, timePropertyName = "messageTime", styleGroupPropertyName = "styleGroup") {
+        const features = geojsonObject.features.filter(feature => feature.geometry.coordinates.length > 1);
+
+        const buffer = createFloat32Array(features.map(feature => feature.geometry.coordinates));
+
+        let offset = 0;
+        for (let feature of features) {
+            const coordinates = feature.geometry.coordinates;
+            const timestamps = feature.properties[timePropertyName].map((time) => (time - startTime) / 1000);
+            const styleGroupNameArray = feature.properties[styleGroupPropertyName];
+            offset = fillSliceOfFloat32Array(coordinates, timestamps, styleGroupNameArray, this._groupColorMap, buffer, offset);
+        }
+        return buffer;
+    }
+
+    /**
+     * Inputs are lists of tracks. Each track is a list of coordinates, timestamps and styleGroupNames.
+     * @param {Array.<Array.<Array.<number>>>} coordinatesList | [ [ [lon, lat, z], [lon, lat, z], ...], ...
+     * @param {Array.<Array.<number>>} timestampsList | [ [time, time, ...], ...
+     * @param {Array.<Array.<String>>} colorGroupList | [ [styleGroupName, styleGroupName, ...], ...
+     * @param {number} startTime | epoch time
+     * @returns {lineData} lineData for Plugin
+     */
+    fromLists(coordinatesList, timestampsList, colorGroupList, startTime) {
+
+        const buffer = createFloat32Array(coordinatesList);
+
+        let offset = 0;
+        for (let i = 0; i < coordinatesList.length; i++) {
+            const coordinates = coordinatesList[i];
+            const timestamps = timestampsList[i].map((time) => (time - startTime) / 1000);
+            const styleGroupNameArray = colorGroupList[i];
+            offset = fillSliceOfFloat32Array(coordinates, timestamps, styleGroupNameArray, this._groupColorMap, buffer, offset);
+        }
+        return buffer;
+    }
+}
+
+/**
+ * @param {Array.<Array.<number>>} coordinates
+ * @param {Array.<number>} timestamps
+ * @param {Array.<String>} styleGroupNameArray
+ * @param {Object.<string, TrackStyleGroup>} _groupColorMap
+ * @param {Float32Array} floatArray
+ * @param {number} offset
+ * 
+ * create floatArray with createFloat32Array before calling this function.
+ * start offset from 0.
+ * feed the floatArray with a track data and offset that is returned from the previous call.
+ */
+function fillSliceOfFloat32Array(coordinates, timestamps, styleGroupNameArray, _groupColorMap, floatArray, offset) {
+
+    if (coordinates[0].length === 2) {
+        const startTime = timestamps[0];
+        const endTime = timestamps[timestamps.length - 1];
+        let prevPointData = null;
+        { // first point
+            const { x, y } = _latLongToPixelXY(coordinates[0][1], coordinates[0][0]);
+            prevPointData = [x, y, 0, timestamps[0], ..._groupColorMap[styleGroupNameArray[0]]];
+        }
+        { // middle points until end
+            for (let i = 1; i < coordinates.length; i++) {
+                const time = timestamps[i];
+                const coord = coordinates[i];
+                const { x, y } = _latLongToPixelXY(coord[1], coord[0]);
+                floatArray.set([...prevPointData, startTime, endTime, x, y, 0, time, ..._groupColorMap[styleGroupNameArray[i]], startTime, endTime], offset);
+                prevPointData = [x, y, 0, time, ..._groupColorMap[styleGroupNameArray[i]]];
+                offset += 18;
+            }
+        }
+    } else {
+
+        const startTime = timestamps[0];
+        const endTime = timestamps[timestamps.length - 1];
+        let prevPointData = null;
+        { // first point
+            const { x, y } = _latLongToPixelXY(coordinates[0][1], coordinates[0][0]);
+            prevPointData = [x, y, coordinates[0][2] / 1000.0, timestamps[0], ..._groupColorMap[styleGroupNameArray[0]]];
+        }
+        { // middle points until end
+            for (let i = 1; i < coordinates.length; i++) {
+                const time = timestamps[i];
+                const coord = coordinates[i];
+                const { x, y } = _latLongToPixelXY(coord[1], coord[0]);
+                floatArray.set([...prevPointData, startTime, endTime, x, y, coord[2] / 1000.0, time, ..._groupColorMap[styleGroupNameArray[i]], startTime, endTime], offset);
+                prevPointData = [x, y, coord[2] / 1000.0, time, ..._groupColorMap[styleGroupNameArray[i]]];
+                offset += 18;
+            }
+        }
+    }
+    return offset;
+}
+
+
+/**
+ * 
+ * @param {*} coordinatesArray 
+ * @returns Float32Array
+ * Coordinates array is needed to calculate the size of the buffer.
+ */
+function createFloat32Array(coordinatesArray) {
+    let filteredSize = 0;
+    for (let coordinates of coordinatesArray) {
+        filteredSize += coordinates.length * 2 - 2;
+    }
+    const array = new Float32Array(filteredSize * 9);
+    return array;
+}
+
+
+
+export { Adaptor, fillSliceOfFloat32Array, createFloat32Array };

package/timetracks/index.js

@@ -0,0 +1,3 @@
+import TimeTracks from './plugin';
+import { Adaptor, fillSliceOfFloat32Array, createFloat32Array } from './adaptors';
+export { Adaptor, fillSliceOfFloat32Array, createFloat32Array, TimeTracks };

package/timetracks/plugin.js

@@ -0,0 +1,304 @@
+/**
+ * Author: Toprak Nihat Deniz Ozturk
+ */
+
+
+
+import TrackGlowLineProgram from './program';
+import PointProgram from './programpoint';
+
+/**
+ * @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, 
+     *  a2x, a2y, a2z, a2time, a2r, a2g, a2b, a1time, a3time, a3x, a3y, a3z, a3time, a3r, a3g, a3b, a1time, a3time,
+     *  b1x, b1y, b1z, b1time, b1r, b1g, b1b, b1time, b2time, b2x, b2y, b2z, b2time, b2r, b2g, b2b, BstartTime, BendTime
+     * ]
+     * As you can see, the middle points of a line is repeated.
+     * Start Time is the first time of the line, End Time is the last time of the line.
+     * startTime of A = a1time, endTime time of A = a3time
+     * Check Adaptor to create TimeTrackMultiColorData. import {Adaptor} from '.';
+*/
+
+
+
+
+
+/**
+  * Access following methods through `plugin.program.` :
+    * * setGamma
+    * * setExposure
+    * * setAlphaThreshold
+    * * setWeights
+    * * setHeadPercentage
+    * * setRouteAlpha
+    * * setFinalAlphaRatio 
+    
+    uses float32array in a * {@link TimeTrackMultiColorData} format
+
+ */
+export default class TimeTrackMultiColorPlugin {
+    /**
+     * @param {String} id 
+     * @param {Object} options 
+     * @param {TimeTrackMultiColorData} options.data {@link TimeTrackMultiColorData}
+     * @param {number} options.headPercentage 0 ~ 1
+     * @param {number} options.routeAlpha 0 ~ 1
+     * @param {Array.<Number>} options.weights  [w1, w2, w3, w4, w5]
+     * @param {number} options.alphaThreshold 0 ~ 1
+     * @param {number} options.exposure 0 ~ inf
+     * @param {number} options.gamma 0 ~ inf
+     * @param {number} options.finalAlphaRatio 0 ~ 1
+     * @param {number} pointOptions.opacity 0 ~ 1
+     * @param {number} pointOptions.pointSize 0 ~ inf
+     * @param {boolean} pointOptions.isOn true | false
+    */
+    constructor(id, options = {}, { opacity = 1.0, pointSize = 1, isOn = false } = {}) {
+        this.id = id;
+
+        this.globe = null;
+        this.gl = null;
+        this.program = null;
+        this._headTime = 0;
+        this._tailTime = 0;
+
+        this._data = options.data || null;
+        this._options = options;
+        this._pointOptions = { opacity, pointSize, isOn };
+        this.program = null;
+
+        this._transporArr = new Float32Array(3);
+
+        this._ready = false;
+
+        this.pointProgram = null;
+
+        this._attrBuffer = null;
+    }
+
+    // ----------------------------------
+    //     --- user methods ---
+    // ----------------------------------
+
+    setHeadAndTailTime(headTime, tailTime) {
+        this._headTime = headTime;
+        this._tailTime = tailTime;
+        this.pointProgram?.setHeadTime(headTime);
+        this.globe.DrawRender();
+    }
+
+    setGlow(isGlow) {
+        this.program.setGlow(isGlow);
+        this.globe.DrawRender();
+    }
+
+    setPremultipliedAlpha(isPremultiplied) {
+        this.program.setPremultipliedAlpha(isPremultiplied);
+        this.globe.DrawRender();
+    }
+
+    setBlurWeights(weights) {
+        this.program.setBlurWeights(weights);
+        this.globe.DrawRender();
+    }
+
+    setHeadPercentage(headPercentage) {
+        this.program.setHeadPercentage(headPercentage);
+        this.globe.DrawRender();
+    }
+
+    setRouteAlpha(routeAlpha) {
+        this.program.setRouteAlpha(routeAlpha);
+        this.globe.DrawRender();
+    }
+
+    setFinalAlphaRatio(finalAlphaRatio) {
+        this.program.setFinalAlphaRatio(finalAlphaRatio);
+        this.globe.DrawRender();
+    }
+
+    setGamma(gamma) {
+        this.program.setGamma(gamma);
+        this.globe.DrawRender();
+    }
+
+    setExposure(exposure) {
+        this.program.setExposure(exposure);
+        this.globe.DrawRender();
+    }
+
+    setBlurRepetition(repetition) {
+        this.program.setBlurRepetition(repetition);
+        this.globe.DrawRender();
+    }
+
+    setAlphaThreshold(alphaThreshold) {
+        this.program.setAlphaThreshold(alphaThreshold);
+        this.globe.DrawRender();
+    }
+
+    // ---------------point program setters-------------------
+
+    setPointOpacity(opacity) {
+        this._pointOptions.opacity = opacity;
+        if (this.pointProgram) {
+            this.pointProgram.setOpacity(opacity);
+            this.globe.DrawRender();
+        }
+    }
+
+    setPointSize(size) {
+        this._pointOptions.pointSize = size;
+        if (this.pointProgram) {
+            this.pointProgram.setPointSize(size);
+            this.globe.DrawRender();
+        }
+    }
+
+    pointSwitch(isOn) {
+        if (isOn && !this.pointProgram) {
+            this.pointProgram = this._createPointProgram();
+        } else {
+            this._deletePointProgram();
+        }
+
+    }
+
+    // ------------------------------------------------------------
+
+    _createPointProgram() {
+        const { gl } = this;
+        const program = new PointProgram(gl, this.globe, this._attrBuffer, this._pointOptions);
+        program.setDrawCount(this._totalSize / 2);
+        return program;
+    }
+
+    _deletePointProgram() {
+        if (this.pointProgram) this.pointProgram.free();
+        this.pointProgram = null;
+    }
+
+    // -------------------------------------------------------------
+
+    isReady() {
+        return this._ready;
+    }
+
+    /**
+     * @param {TimeTrackMultiColorData} data {@link TimeTrackMultiColorData}
+     * Check Class constructor
+     */
+    setData(data) {
+        if (this.gl) {
+            this._ready = false;
+            this.setDataAsFloat32Array(data);
+            this._ready = true;
+        } else {
+            this._data = data;
+            this._ready = false;
+        }
+    }
+
+    /**
+     * @param {TimeTrackMultiColorData} data {@link TimeTrackMultiColorData}
+     * @param {number} totalSize | if not provided, it is calculated from float32Array.length / 9. Use if you want to draw first n points.
+     */
+    setDataAsFloat32Array(data, totalSize = null) {
+
+        const { gl, _attrBuffer } = this;
+        gl.bindBuffer(gl.ARRAY_BUFFER, _attrBuffer);
+        gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
+
+
+        // this.program.setInBuffer(data);
+
+        // this.pointProgram.setData(data);
+        if (totalSize) {
+            this._totalSize = totalSize;
+        } else {
+            this._totalSize = data.length / 9;
+        }
+        this.program.setTotalLength(this._totalSize);
+        this.pointProgram?.setDrawCount(this._totalSize / 2);
+
+        this._ready = true;
+    }
+
+    // ------------------------------
+    //      --- globe Methods ---
+    // ------------------------------
+
+    draw3D(projMatrix, modelviewMatrix, transPos) {
+        if (!this._ready) return;
+        const { _headTime, _tailTime, program, _transporArr, globe } = this;
+        this.pointProgram?.draw();
+
+        _transporArr.set([transPos.x, transPos.y, transPos.z], 0);
+        const geomType = globe.api_GetCurrentGeometry();
+        if (geomType === 0) {
+            program.draw(_headTime, _tailTime, projMatrix, modelviewMatrix, _transporArr);
+        } else if (geomType === 1) {
+            const { width, height } = globe.api_GetCurrentWorldWH();
+            program.draw(_headTime, _tailTime, projMatrix, modelviewMatrix, _transporArr,
+                [width, height]);
+        } else {
+            console.error("Unknown geometry type", geomType);
+        }
+    }
+
+    resize(width, height) {
+        const { program, globe } = this;
+        width = width || globe.api_ScrW();
+        height = height || globe.api_ScrH();
+        program.resize(width, height);
+    }
+
+
+    init(globe, gl) {
+        this.globe = globe;
+        this.gl = gl;
+        this._attrBuffer = gl.createBuffer();
+        this.program = new TrackGlowLineProgram(gl, this._attrBuffer, globe.api_ScrW(), globe.api_ScrH(), this._options);
+        if (this._pointOptions?.isOn) this.pointProgram = new PointProgram(gl, globe, this._attrBuffer);
+
+        // this.pointProgram.setAttrBuffer(_attrBuffer);
+        this.setGeometry();
+        if (this._data) {
+            this._ready = true;
+            this.setDataAsFloat32Array(this._data);
+
+            this._data = null;
+        }
+        this.resize();
+    }
+
+
+    free() {
+        const { gl, _attrBuffer } = this;
+        this.program.free();
+        gl.deleteBuffer(_attrBuffer);
+    }
+
+
+    setGeometry() {
+        const { globe, program } = this;
+        program.setIs3D(globe.api_GetCurrentGeometry() === 0);
+    }
+
+    // ----------------------------------
+    //      --- implicit methods ---
+    // ----------------------------------
+
+
+    _latLongToPixelXY(latitude, longitude) {
+        return {
+            x: (longitude + 180) / 360,
+            y: (90 - latitude) / 180
+        };
+    }
+}
+
+
+
+