@pirireis/webglobeplugins 0.0.1

package/timetracks/programpoint.js

@@ -0,0 +1,168 @@
+import { createProgram, shaderfunctions } from "../util";
+import { CameraUniformBlockTotem, globeProgramCache } from "../programs";
+
+
+const vertexShader = `#version 300 es
+
+layout(std140) uniform GlobeCamera {
+    mat4 view; // 64 bytes           0
+    mat4 projection; // 64 bytes     64
+    vec3 translate; // 12 bytes      128
+    bool is3D; // 4 bytes            140
+    vec2 mapWH; // 8 bytes           144
+    vec2 screenWH; //  8 bytes       152
+    float z_level; // 4 bytes        160
+};
+
+layout(std140) uniform Globals {
+    float head_time;
+    float final_opacity;
+    float point_size;
+};
+
+in vec3 start_position;
+in float start_time;
+in vec3 start_color;
+in vec3 end_position;
+in float end_time;
+in vec3 end_color;
+out vec4 v_color;
+
+`+ shaderfunctions.pixelXYToCartesian3DPoint + shaderfunctions.pixelXYToCartesian2DPoint + `
+
+void main() {
+    if (head_time < start_time || head_time > end_time) { return; }
+    float t = (head_time - start_time) / (end_time - start_time);
+    vec3 position = mix(start_position, end_position, t);
+    if (is3D){
+        vec3 pos = pixelXYToCartesian3DPoint(position);
+        gl_Position = projection * view * vec4(pos - translate, 1.0);
+    }  else {
+        vec2 xy = pixelXYToCartesian2DPoint(position.xy, translate.xy, mapWH, screenWH);
+        gl_Position = projection * vec4(xy.x, xy.y, 0.0, 1.0);
+    }
+    v_color = vec4(mix(start_color, end_color, t), final_opacity);
+    gl_PointSize = point_size;
+}`;
+
+const fragmentShader = `#version 300 es
+precision highp float;
+in vec4 v_color;
+out vec4 outColor;
+void main() {
+    outColor = v_color;
+}`;
+
+
+export default class {
+
+    constructor(gl, globe, attrBuffer, options) {
+
+        this.gl = gl;
+        this._cameraBlockBindingPoint = 0;
+        this._globalsBlockBindingPoint = 1;
+        this.cameraUniformBlockTotem = globeProgramCache.getProgram(globe, CameraUniformBlockTotem);
+        this._vao = gl.createVertexArray();
+        this._attbuffer = attrBuffer;
+        this.program = this._createProgram();
+        this._drawCount = 0;
+
+        this._globalsbuffer = gl.createBuffer();
+        {
+            const { gl, _globalsbuffer } = this;
+            gl.bindBuffer(gl.UNIFORM_BUFFER, _globalsbuffer);
+            gl.bufferData(gl.UNIFORM_BUFFER, 12, gl.STREAM_DRAW); // TODO: sperate head time to make it dynamic maybe?
+            gl.bufferSubData(gl.UNIFORM_BUFFER, 0, new Float32Array([0, options.opacity, options.pointSize]));
+            gl.bindBufferBase(gl.UNIFORM_BUFFER, this._globalsBlockBindingPoint, _globalsbuffer);
+            gl.bindBuffer(gl.UNIFORM_BUFFER, null);
+        }
+    }
+
+
+    _createProgram() {
+        const gl = this.gl
+
+        const program = createProgram(gl, vertexShader, fragmentShader);
+        const ubo = this.cameraUniformBlockTotem.getUBO(); // ubo bl
+        const cameraBlockIndex = gl.getUniformBlockIndex(program, "GlobeCamera");
+        gl.uniformBlockBinding(program, cameraBlockIndex, this._cameraBlockBindingPoint);
+        const globalsBlockIndex = gl.getUniformBlockIndex(program, "Globals");
+        gl.bindBufferBase(gl.UNIFORM_BUFFER, this._cameraBlockBindingPoint, ubo);
+        gl.uniformBlockBinding(program, globalsBlockIndex, this._globalsBlockBindingPoint);
+        gl.bindBufferBase(gl.UNIFORM_BUFFER, this._globalsBlockBindingPoint, this._globalsbuffer);
+
+        // numaralarda yanlışlık olabilir
+        const start_position = gl.getAttribLocation(program, "start_position");
+        const start_time = gl.getAttribLocation(program, "start_time");
+        const start_color = gl.getAttribLocation(program, "start_color");
+        const end_position = gl.getAttribLocation(program, "end_position");
+        const end_time = gl.getAttribLocation(program, "end_time");
+        const end_color = gl.getAttribLocation(program, "end_color");
+
+        gl.bindVertexArray(this._vao);
+        gl.bindBuffer(gl.ARRAY_BUFFER, this._attbuffer);
+        gl.enableVertexAttribArray(start_position);
+        gl.vertexAttribPointer(start_position, 3, gl.FLOAT, false, 72, 0);
+        gl.enableVertexAttribArray(start_time);
+        gl.vertexAttribPointer(start_time, 1, gl.FLOAT, false, 72, 12);
+        gl.enableVertexAttribArray(start_color);
+        gl.vertexAttribPointer(start_color, 3, gl.FLOAT, false, 72, 16);
+        gl.enableVertexAttribArray(end_position);
+        gl.vertexAttribPointer(end_position, 3, gl.FLOAT, false, 72, 36);
+        gl.enableVertexAttribArray(end_time);
+        gl.vertexAttribPointer(end_time, 1, gl.FLOAT, false, 72, 48);
+        gl.enableVertexAttribArray(end_color);
+        gl.vertexAttribPointer(end_color, 3, gl.FLOAT, false, 72, 52);
+        gl.bindVertexArray(null);
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
+        return program;
+    }
+
+
+    setOpacity(opacity) {
+        const { gl, _globalsbuffer } = this;
+        gl.bindBuffer(gl.UNIFORM_BUFFER, _globalsbuffer);
+        gl.bufferSubData(gl.UNIFORM_BUFFER, 4, new Float32Array([opacity]));
+        gl.bindBuffer(gl.UNIFORM_BUFFER, null);
+    }
+
+    setDrawCount(count) {
+        this._drawCount = count;
+    }
+
+
+    setPointSize(size) {
+        const { gl, _globalsbuffer } = this;
+        gl.bindBuffer(gl.UNIFORM_BUFFER, _globalsbuffer);
+        gl.bufferSubData(gl.UNIFORM_BUFFER, 8, new Float32Array([size]));
+        gl.bindBuffer(gl.UNIFORM_BUFFER, null);
+    }
+
+
+    setHeadTime(time) {
+        const { gl, _globalsbuffer } = this;
+        gl.bindBuffer(gl.UNIFORM_BUFFER, _globalsbuffer);
+        gl.bufferSubData(gl.UNIFORM_BUFFER, 0, new Float32Array([time]));
+        gl.bindBuffer(gl.UNIFORM_BUFFER, null);
+    }
+
+
+    draw() {
+        const { gl, program, _vao, _drawCount } = this;
+        gl.useProgram(program);
+        gl.bindVertexArray(_vao);
+        gl.disable(gl.DEPTH_TEST);
+        gl.drawArrays(gl.POINTS, 0, _drawCount);
+        gl.enable(gl.DEPTH_TEST);
+        gl.bindVertexArray(null);
+    }
+
+
+    free() {
+        const { gl, _vao, _globalsbuffer, program } = this;
+        gl.deleteVertexArray(_vao);
+        // gl.deleteBuffer(_attbuffer);
+        gl.deleteBuffer(_globalsbuffer);
+        gl.deleteProgram(program);
+    }
+}

package/util/datamanager/datamanager.js

@@ -0,0 +1,168 @@
+/**
+ * todo: 
+ * data must be processed before being set to the cache
+ */
+
+export default class DataManager {
+    /**
+     * 
+     * @param {Array<number>} timeEpocs | array of time epocs
+     * @param {Function} fetchMethod | fetchMethod(time) => Promise<data> 
+     * @param {boolean} autoDownload | auto download data or not
+    */
+    constructor(timeEpocs, fetchMethod, { autoDownload = true } = {}) {
+
+        this._timeEpocs = timeEpocs.sort((a, b) => a - b);
+        this._datas = []; this._datas.length = timeEpocs.length;
+
+        // in construction
+        this._dataPromises = []; this._dataPromises.length = timeEpocs.length;
+
+        this._fetchMethod = fetchMethod;
+        this._callbackmethods = [];
+        this._callbackmethodOwners = [];
+        this._lastTime = -1;
+        this._lastIndex = -1;
+        this.autoDownload(autoDownload);
+    }
+
+
+    autoDownload(bool, time) {
+        if (!bool) {
+            this._autoDownload = false;
+            return;
+        }
+        let index = this._lastIndex === -1 ? 0 : this._lastIndex;
+        if (time !== undefined) {
+            if (time < this._timeEpocs[0] || time > this._timeEpocs[this._timeEpocs.length - 1]) {
+                this._autoDownload = bool;
+                return;
+            }
+            index = this._findIndex(time);
+        }
+
+        if (this._downloadStartIndex === index && this._autoDownload === bool) return;
+        this._downloadStartIndex = index;
+        this._autoDownload = bool;
+        const recursion = (startId, currentDownloadId) => {
+            if (startId !== this._downloadStartIndex) return;
+            if (currentDownloadId < this._timeEpocs.length && this._autoDownload) {
+                this._getData(currentDownloadId).then(() => {
+                    recursion(startId, currentDownloadId + 1);
+                });
+            }
+        }
+        recursion(index, index);
+        // save index as start index
+        //start recursive download
+
+        // use started id as a flag to stop the download
+    }
+
+
+
+    /**
+     * @param {number} time 
+     * It looks like async function is not needed here. changes just overwrites the previous changes.
+     */
+    updateTime(time) {
+        if (time < this._timeEpocs[0] || time > this._timeEpocs[this._timeEpocs.length - 1]) {
+            this._dontRender();
+            return;
+        }
+        this._lastTime = time;
+        const index = this._findIndex(time);
+        const ratio = this._getRatio(time, index);
+        Promise.all([this._getData(index - 1), this._getData(index)]).then((datas) => {
+            if (this._lastTime === time) {
+                this._lastIndex = index;
+                this._ratio = ratio;
+                this._pushCallback(ratio, datas);
+            }
+        });
+    }
+
+
+    register(key, callback) {
+        if (this._callbackmethodOwners.indexOf(key) !== -1) {
+            console.warn("key already registered, old one is unregistered");
+            this.unregister(key);
+        }
+        this._callbackmethods.push(callback);
+        this._callbackmethodOwners.push(key);
+        if (this._lastIndex !== -1) callback(this._ratio, this._datas[this._lastIndex - 1], this._datas[this._lastIndex]);
+    }
+
+
+    /**
+     * @param {*} key | id of the owner of the callback
+     */
+    unregister(key) {
+        let index = this._callbackmethodOwners.indexOf(key);
+        if (index !== -1) {
+            this._callbackmethods.splice(index, 1);
+            this._callbackmethodOwners.splice(index, 1);
+        }
+        if (this._callbackmethods.length === 0) {
+            this.free();
+        }
+    }
+
+
+    free() {
+        this._callbackmethods = [];
+        this._callbackmethodOwners = [];
+        this._autoDownload = false;
+    }
+
+    _findIndex(time) {
+        const { _timeEpocs } = this;
+        let index = this._lastIndex === -1 ? 1 : this._lastIndex;
+        if (this)
+            if (time < _timeEpocs[index - 1]) {
+                while (index > 1 && time < _timeEpocs[index - 1]) {
+                    index--;
+                }
+            } else if (time > _timeEpocs[index]) {
+                while (index < _timeEpocs.length - 1 && time > _timeEpocs[index]) {
+                    index++;
+                }
+            }
+        return index;
+    }
+
+
+    _getRatio(time, index) {
+        return (time - this._timeEpocs[index - 1]) / (this._timeEpocs[index] - this._timeEpocs[index - 1]);
+    }
+
+
+    _pushCallback(ratio, datas) {
+        for (let i = 0; i < this._callbackmethods.length; i++) {
+            this._callbackmethods[i](ratio, ...datas);
+        }
+    }
+
+
+    async _getData(index) {
+        if (index < 0 || index >= this._timeEpocs.length) {
+            throw new Error("Index out of range");
+        }
+        if (!this._datas[index]) {
+            if (!this._dataPromises[index]) this._dataPromises[index] = this._fetchMethod(this._timeEpocs[index]).then((data) => {
+                this._datas[index] = data;
+            }, (error) => {
+                console.error("error", error);
+            }).finally(() => {
+                this._dataPromises[index] = null;
+            });
+        }
+        await this._dataPromises[index];
+        return this._datas[index];
+    }
+
+    _dontRender() {
+        this._pushCallback(0, [null, null]);
+    }
+
+}

package/util/datamanager/index.js

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

package/util/datamanager/pointcoordinatesdatacalculator.js

@@ -0,0 +1,133 @@
+import PointCoordsMeta from "./pointcoordsmeta";
+
+
+const pointObject = (long, lat, posIndex, callback) => {
+    return { long, lat, posIndex, callback };
+}
+
+export default class PointCoordinatesDataCalculator {
+    constructor(bbox, width, height) {
+        this._pointObjects = {};
+
+        this._ratio = 0.0;
+
+        this._bbox = bbox;
+        this._width = width;
+        this._height = height;
+        this._metaCalculater = new PointCoordsMeta(bbox, width, height);
+
+        this._texture0 = null;
+        this._texture1 = null;
+    }
+
+    /**
+     * 
+     * @param {*} key 
+     * @param {*} lat 
+     * @param {*} long 
+     * @param {*} callback | callback(data0, data1, interpolated)
+     */
+    registerPoint(key, long, lat, callback) {
+        if (key in this._pointObjects) {
+            console.warn("key already registered, old one is unregistered");
+            this.unregisterPoint(key);
+        }
+        if (!this._isInBBox(long, lat)) return false;
+
+        const meta = this._metaCalculater.getFlooredMeta(long, lat)
+
+        this._pointObjects[key] = pointObject(long, lat, meta.index, callback);
+        if (this._texture0 && this._texture1) {
+            const { data0, data1, interpolated } = this._findAPoint(meta.index);
+            callback(data0, data1, interpolated);
+        }
+        return true;
+    }
+
+    _isInBBox(long, lat) {
+        return lat >= this._bbox[1] && lat <= this._bbox[3] && long >= this._bbox[0] && long <= this._bbox[2];
+    }
+
+
+    unregisterPoint(key) {
+        if (!(key in this._pointObjects)) return false;
+        delete this._pointObjects[key];
+        return true;
+    }
+
+    updatePoint(key, long, lat) {
+
+        if (!(key in this._pointObjects)) return false;
+        if (!this._isInBBox(long, lat)) return false;
+        this._pointObjects[key].long = long;
+        this._pointObjects[key].lat = lat;
+        const meta = this._metaCalculater.getFlooredMeta(long, lat);
+        this._pointObjects[key].posIndex = meta.index;
+        const { data0, data1, interpolated } = this._findAPoint(meta.index);
+        this._pointObjects[key].callback(data0, data1, interpolated);
+        return true;
+    }
+
+    /**
+     * @param {Number} ratio 0-1
+     * @param {} textureData0 
+     * @param {*} textureData1 
+     */
+    updateData(ratio, textureData0 = null, textureData1 = null) {
+        if (!textureData0 && !textureData1) {
+            this._pushPointCallBackEmpty();
+            return;
+        }
+        if (textureData0 && textureData1) {
+            this._texture0 = textureData0;
+            this._texture1 = textureData1;
+        }
+        this._ratio = ratio;
+        this._pushPointCallbackAll();
+    }
+
+
+    _findAPoint(posIndex) {
+        const data0 = this._texture0[posIndex];
+        const data1 = this._texture1[posIndex];
+        const interpolated = data0 * (1 - this._ratio) + data1 * this._ratio;
+        return { data0, data1, interpolated };
+    }
+
+    _pushPointCallbackAll() {
+        for (const key in this._pointObjects) {
+            const { posIndex, callback } = this._pointObjects[key];
+            const { data0, data1, interpolated } = this._findAPoint(posIndex);
+            callback(data0, data1, interpolated);
+        }
+    }
+
+    _pushPointCallBackEmpty() {
+        for (const key in this._pointObjects) {
+            const { callback } = this._pointObjects[key];
+            callback(null, null, null);
+        }
+    }
+
+    flush() {
+        this._pointObjects = {};
+    }
+}
+
+function test() {
+    const cp = window.plugin.getPointCoordinatesDataCalculator();
+    const bbox = [-15, 25, 70, 60];
+    cp.registerPoint("left up", -15, 60, (data0, data1, interpolated) => {
+        console.log("left up", data0, data1, interpolated);
+    });
+    cp.registerPoint("right up", 70, 60, (data0, data1, interpolated) => {
+        console.log("right up", data0, data1, interpolated);
+    });
+    cp.registerPoint("left down", -15, 25, (data0, data1, interpolated) => {
+        console.log("right down", data0, data1, interpolated);
+    });
+    cp.registerPoint("right down", 70, 25, (data0, data1, interpolated) => {
+        console.log("right down", data0, data1, interpolated);
+    });
+    return cp;
+}

package/util/datamanager/pointcoordsmeta.js

@@ -0,0 +1,22 @@
+export default class PointCoordsMeta {
+
+    constructor(bbox, width, height) {
+        this._bbox = bbox;
+        this._width = width;
+        this._height = height;
+        this._xRatio = this._width / (this._bbox[2] - this._bbox[0]);
+        this._yRatio = this._height / (this._bbox[3] - this._bbox[1]);
+
+    }
+
+    getFlooredMeta(long, lat) {
+        let x = (long - this._bbox[0]) * this._xRatio;
+        let y = (this._bbox[3] - lat) * this._yRatio;
+        x = x > 0 ? x - 1 : 0;
+        y = y > 0 ? y - 1 : 0;
+        const index = Math.floor(y) * this._width + Math.floor(x);
+        return { index };
+    }
+}
+
+

package/util/geometry/geodatafromtexture.js

@@ -0,0 +1,52 @@
+export class GeoDataFromTexture {
+    /**
+     * @param {Array} bbox - [minLong, minLat, maxLong, maxLat]
+     * @param {Array} textureData - array of data
+     * @param {Number} width - width of the texture
+     * @param {Number} height - height of the texture
+     * */
+    constructor(bbox, textureData, width, height) {
+        this.bbox = null;
+        this.textureData = textureData;
+        this.width = width;
+        this.height = height;
+        this.setBBox(bbox);
+    }
+
+    setBBox(bbox) {
+        this.bbox = bbox;
+        this._longRatio = (this.bbox[2] - this.bbox[0]) / this.width;
+
+        this._latRatio = (this.bbox[3] - this.bbox[1]) / this.height;
+    }
+
+    setTextureData(textureData) {
+        this.textureData = textureData;
+    }
+
+    getFloored(lat, long) {
+        const x = (long - this.bbox[0]) / this._longRatio;
+        const y = (lat - this.bbox[1]) / this._latRatio;
+        console.log(x + " = (" + long + " - " + this.bbox[0] + ") / " + this._longRatio);
+        console.log(y + " = (" + lat + " - " + this.bbox[1] + ") / " + this._latRatio);
+        const index = Math.floor(y) * this.width + Math.floor(x);
+        console.log({ index, x, y, w: this.width, h: this.height, "total": this.width * this.height });
+        return this.textureData[index];
+    }
+
+    getInterpolated(lat, long) {
+        // this has bug for the last row and column
+        const x = (long - this.bbox[0]) / (this.bbox[2] - this.bbox[0]);
+        const y = (lat - this.bbox[1]) / (this.bbox[3] - this.bbox[1]);
+        const xIndex = Math.floor(x * this.width);
+        const yIndex = Math.floor(y * this.height);
+        const xRatio = x * this.width - xIndex;
+        const yRatio = y * this.height - yIndex;
+        const index = yIndex * this.width + xIndex;
+        const data = this.textureData[index];
+        const data1 = this.textureData[index + 1];
+        const data2 = this.textureData[index + this.width];
+        const data3 = this.textureData[index + this.width + 1];
+        return data * (1 - xRatio) * (1 - yRatio) + data1 * xRatio * (1 - yRatio) + data2 * (1 - xRatio) * yRatio + data3 * xRatio * yRatio;
+    }
+}

package/util/geometry/index.js

@@ -0,0 +1,44 @@
+const PI_BY_180 = Math.PI / 180;
+
+
+
+
+export function latLongToPixelXY(latitude, longitude) {
+    return {
+        x: (longitude + 180) / 360,
+        y: (90 - latitude) / 180
+    };
+}
+
+
+// export function latLongToRadiansTwist(latitude, longitude) {
+
+//     return {
+//         y: (90 - latitude) * PI_BY_180,
+//         x: longitude * PI_BY_180
+//     };
+// }
+
+
+/**
+ * createBBoxMatrix( minX, maxX, minY, maxY)
+ * use this matrix to transform a point from 0 to 1 range to the bounding box
+ * for example: Transform image coordinates to map coordinates
+ * glsl`vec3 pos = u_bbox_matrix * vec3(v_particle_pos.x, v_particle_pos.y, 1.0);`
+ */
+export function createBBoxMatrix(minX, maxX, minY, maxY) {
+    return new Float32Array([
+        maxX - minX, 0, 0,
+        0, maxY - minY, 0,
+        minX, minY, 1
+    ])
+}
+
+export function latLongBboxtoPixelXYBbox(minX, minY, maxX, maxY) {
+    const minXY = latLongToPixelXY(minY, minX);
+    const maxXY = latLongToPixelXY(maxY, maxX);
+    return createBBoxMatrix(minXY.x, maxXY.x, minXY.y, maxXY.y);
+}
+
+
+export { GeoDataFromTexture } from './geodatafromtexture';

package/util/index.js

@@ -0,0 +1,13 @@
+import * as webglobjectbuilders from './webglobjectbuilders';
+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 };
+export * from './webglobe';
+export * from './webglobjectbuilders';
+export * from './shaderfunctions';
+export * from './geometry';
+export * from './programs';
+export * from './datamanager';

package/util/jshelpers/index.js

@@ -0,0 +1 @@
+export * as timefilters from './timefilters';

package/util/jshelpers/timefilters.js

@@ -0,0 +1,32 @@
+// TODO: fix logic error in instantDebounce
+function instantDebounce(func, delay) {
+    let timeout = null;
+    let lastArgs = null;
+    let runAtEnd = false;
+
+    const timeoutMethod = () => {
+        setTimeout(() => {
+            if (runAtEnd) {
+                func(...lastArgs);
+                lastArgs = null;
+                console.log("processed with delay")
+                runAtEnd = false;
+            }
+            timeout = null;
+        }, delay);
+    }
+
+    return function () {
+        if (timeout) {
+            lastArgs = arguments;
+            runAtEnd = true;
+            return;
+        } else {
+            func(...args);
+            console.log("processed instantly")
+            timeout = timeoutMethod();
+        }
+    }
+}
+
+export { instantDebounce };

package/util/jshelpers/timemethods.js

@@ -0,0 +1,19 @@
+function instantDebounce(func, delay) {
+    let timeout = null;
+    let lastArgs = null;
+    return function (arguments) {
+        if (timeout) {
+            lastArgs = arguments;
+            return;
+        } else {
+            func(...arguments);
+            timeout = setTimeout(() => {
+                if (lastArgs) {
+                    func(...lastArgs);
+                    lastArgs = null;
+                }
+                timeout = null;
+            }, delay);
+        }
+    }
+}

package/util/programs/index.js

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