@pirireis/webglobeplugins 1.0.2 → 1.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@pirireis/webglobeplugins",
-    "version": "1.0.2",
+    "version": "1.0.4",
     "main": "index.js",
     "author": "Toprak Nihat Deniz Ozturk",
     "license": "MIT",
@@ -13,6 +13,6 @@
         "rbush": "^4.0.1"
     },
     "peerDependencies": {
-        "@pirireis/webglobe": "^6.2.22"
+        "@pirireis/webglobe": "6.2.51^"
     }
 }

package/plugins/alarms/alarmFadeInFadeOutPlugin/AlarmTimeLineFadeInFadeOutPlugin.js

@@ -0,0 +1,399 @@
+/**
+ * Parametreler
+ * Toplam Animasyon suresi
+ * nokta konumu lat long
+ * nokta boyutu
+ * nokta rengi
+ * buyume kusulme olamlimi? Varsa fade in ile buyuyup, fade out ile kuculecek.
+ * fade in suresi
+ * fade out suresi
+ *   */
+/**
+ * TODO:
+ * AFAD verisini hizli yuklenmesi icin bir formata ceviren kod ekle
+ * CONTENT basligi altina veri cevirici ve webgl programini yaz
+ */
+/**
+ * @typedef {Number[]} Color [r, g, b]
+ */
+/**
+ * @typedef {Object} FadeAlarmPoint
+ * @property {number} long
+ * @property {number} lat
+ * @property {number} height
+ * @property {number} minSize
+ * @property {number} maxSize
+ * @property {Color} color
+ * @property {number} startTime
+ * @property {number} fadeInTime
+ * @property {number} fadeOutTime
+ * @property {number} minAlpha
+ * @property {number} maxAlpha
+ */
+const floatCount = 13;
+const TIME_STEP = 26;
+export default class AlarmTimeLineFadeInFadeOut {
+    constructor(id) {
+        this.id = id;
+        this.pause();
+        this.globe = null;
+        this.gl = null;
+        this._buildLOD = 6;
+        this._lastLOD = 0;
+        this._shaderProgram = null;
+        this._animationDeltaTime = 0;
+        this._animationFullTimeLength = 50000.0;
+        this._continue = false;
+        this._speedMultiplier = 1.0;
+        // time relevant 
+        this._tickTimerId = null;
+        // @type {FadeAlarmPoint[]}
+        this._dataArray = [];
+        this._translateFloat32Array = new Float32Array(3);
+        this._mixtureBuffer = null;
+        this._buildTimerId = null;
+        this._projectionFunction = null;
+    }
+    _vertexShaderSource = `
+        precision highp float;
+
+        attribute vec3 aVertexPosition;
+        attribute vec3 aVertexColor;
+        attribute float aMinSize;
+        attribute float aMaxSize;
+        attribute float aStartTime;
+        attribute float aFadeInTime;
+        attribute float aFadeOutTime;
+        attribute float aMinAlpha;
+        attribute float aMaxAlpha;
+
+        uniform bool u_is_flat;
+        uniform vec2 u_mapWH;
+        uniform vec2 u_scrWH;
+
+        varying vec3 vColor;
+        varying float vAlpha;
+
+        uniform float uDeltaTime;
+
+        uniform mat4 uModelViewMatrix;
+        uniform mat4 uProjectionMatrix;
+        uniform vec3 uTranslate;
+
+        void main(void) {
+            float time = uDeltaTime - aStartTime;
+
+            // exit case
+            if (time < 0.0 || (time > (aFadeInTime + aFadeOutTime)) ) {
+                gl_Position = vec4(-2.0, -2.0, 0.0, 1.0);
+                vColor = vec3(0.0, 0.0, 0.0);
+                vAlpha = 0.0;
+                return;
+            }
+            float ratio; 
+            // fade in case
+            if (time < aFadeInTime) {
+                ratio = time / aFadeInTime;
+            }
+            // fade out case
+            if (time > aFadeInTime) {
+                ratio = 1.0 - ((time - aFadeInTime) / aFadeOutTime);
+            }
+            if(u_is_flat==true){
+                float normalizedX = ( aVertexPosition.x - uTranslate.x) / u_mapWH.x;
+                float normalizedY = ( aVertexPosition.y - uTranslate.y) / u_mapWH.y;
+                gl_Position = uProjectionMatrix * vec4(normalizedX * u_scrWH.x, (1.0 - normalizedY) * u_scrWH.y, 0.0, 1.0);
+            }else{
+                gl_Position = uProjectionMatrix * uModelViewMatrix * vec4(aVertexPosition - uTranslate, 1.0);
+            } 
+            gl_PointSize = mix(aMinSize, aMaxSize, ratio);
+
+            vColor = aVertexColor;
+            vAlpha = mix(aMinAlpha, aMaxAlpha, ratio);
+        }
+    `;
+    _fragmentShaderSource = `
+        precision highp float;
+
+        varying vec3 vColor;
+        varying float vAlpha;
+
+        void main(void) {
+            // circle
+            vec2 cxy = 2.0 * gl_PointCoord - 1.0;
+            float r = dot(cxy, cxy);
+            if (r > 1.0) discard; 
+            // square
+            // float t = abs(cxy.x) * abs(cxy.y);
+            // if (t > 0.1) discard;
+            if (vAlpha == 0.0) { discard;}
+            float alphaRatio = sqrt(1.0 - r) ;
+            gl_FragColor =  vec4(vColor, vAlpha  ) * alphaRatio;
+        }
+    `;
+    _createProgram() {
+        const { gl, _vertexShaderSource, _fragmentShaderSource } = this;
+        let vertexShader = gl.createShader(gl.VERTEX_SHADER);
+        gl.shaderSource(vertexShader, _vertexShaderSource);
+        gl.compileShader(vertexShader);
+        if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
+            alert("An error occurred compiling the vertex shader: " + gl.getShaderInfoLog(vertexShader));
+            return null;
+        }
+        let fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
+        gl.shaderSource(fragmentShader, _fragmentShaderSource);
+        gl.compileShader(fragmentShader);
+        if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
+            alert("An error occurred compiling the fragment shader: " + gl.getShaderInfoLog(fragmentShader));
+            return null;
+        }
+        this._shaderProgram = gl.createProgram();
+        gl.attachShader(this._shaderProgram, vertexShader);
+        gl.attachShader(this._shaderProgram, fragmentShader);
+        gl.linkProgram(this._shaderProgram);
+        if (!gl.getProgramParameter(this._shaderProgram, gl.LINK_STATUS)) {
+            alert("Could not initialise shaders");
+            console.log(gl.getProgramInfoLog(this._shaderProgram));
+        }
+        gl.detachShader(this._shaderProgram, vertexShader);
+        gl.detachShader(this._shaderProgram, fragmentShader);
+        gl.deleteShader(vertexShader);
+        gl.deleteShader(fragmentShader);
+    }
+    _assignProgramLocations() {
+        const { gl, _shaderProgram } = this;
+        this._aVertexPosition = gl.getAttribLocation(_shaderProgram, "aVertexPosition");
+        this._aVertexColor = gl.getAttribLocation(_shaderProgram, "aVertexColor");
+        this._aMinSize = gl.getAttribLocation(_shaderProgram, "aMinSize");
+        this._aMaxSize = gl.getAttribLocation(_shaderProgram, "aMaxSize");
+        this._aStartTime = gl.getAttribLocation(_shaderProgram, "aStartTime");
+        this._aFadeInTime = gl.getAttribLocation(_shaderProgram, "aFadeInTime");
+        this._aFadeOutTime = gl.getAttribLocation(_shaderProgram, "aFadeOutTime");
+        this._aMinAlpha = gl.getAttribLocation(_shaderProgram, "aMinAlpha");
+        this._aMaxAlpha = gl.getAttribLocation(_shaderProgram, "aMaxAlpha");
+        this._uDeltaTime = gl.getUniformLocation(_shaderProgram, "uDeltaTime");
+        this._uModelViewMatrix = gl.getUniformLocation(_shaderProgram, "uModelViewMatrix");
+        this._uProjectionMatrix = gl.getUniformLocation(_shaderProgram, "uProjectionMatrix");
+        this._uTranslate = gl.getUniformLocation(_shaderProgram, "uTranslate");
+        this._uMapWH = gl.getUniformLocation(_shaderProgram, "u_mapWH");
+        this._uScrWH = gl.getUniformLocation(_shaderProgram, "u_scrWH");
+        this._uIsFlat = gl.getUniformLocation(_shaderProgram, "u_is_flat");
+    }
+    // registry takes place here
+    init(globe, gl) {
+        console.log("init AlarmFadeInFadeOut");
+        this.globe = globe;
+        this.gl = gl;
+        this._mixtureBuffer = gl.createBuffer();
+        this.setGeometry();
+        this._createProgram();
+        this._assignProgramLocations();
+        this._startTickTimer();
+        this._resizeHandler = this._resizeEventHandler.bind(this);
+        window.addEventListener('resize', this._resizeHandler, true);
+    }
+    _resizeEventHandler() {
+        this._loadUniforms();
+    }
+    addPoint(long, lat, height, minSize, maxSize, color, startTime, fadeInTime, fadeOutTime, minAlpha, maxAlpha) {
+        // add point to the array
+        this._dataArray.push({
+            long,
+            lat,
+            height,
+            minSize,
+            maxSize,
+            color,
+            startTime,
+            fadeInTime,
+            fadeOutTime,
+            minAlpha,
+            maxAlpha
+        });
+    }
+    setAnimationFullTimeLength(time) {
+        this._animationFullTimeLength = time;
+    }
+    updateBuffer() {
+        if (this._dataArray.length === 0)
+            return;
+        this._build();
+    }
+    clearPoints() {
+        this._dataArray = [];
+        this._build();
+    }
+    setCurrentTimeByPercentage(percentage) {
+        const passingTime = this._animationFullTimeLength * (percentage % 100) / 100;
+        this._animationDeltaTime = passingTime;
+    }
+    setSpeedMultiplier(multiplier) {
+        this._speedMultiplier = multiplier;
+    }
+    continue() {
+        if (this._animationFullTimeLength == null)
+            throw new Error("Animation full time length is not set");
+        this._continue = true;
+        if (this._tickTimerId == null) {
+            this._startTickTimer();
+        }
+        console.log("continue");
+    }
+    isContinuing() {
+        return this._continue;
+    }
+    pause() {
+        this._continue = false;
+        if (this._tickTimerId != null) {
+            clearInterval(this._tickTimerId);
+            this._tickTimerId = null;
+        }
+        console.log("pause");
+    }
+    _tick() {
+        this._animationDeltaTime = (this._animationDeltaTime + TIME_STEP * this._speedMultiplier) % this._animationFullTimeLength;
+    }
+    _startTickTimer() {
+        this._tickTimerId = setInterval(() => {
+            if (this._continue)
+                this._tick();
+        }, TIME_STEP);
+    }
+    getPercentage() {
+        return this._animationDeltaTime / this._animationFullTimeLength;
+    }
+    // globe calls this function
+    draw3D(projMatrix, modelMatrix, transPos) {
+        // if (this._continue) this._tick();
+        this._draw(projMatrix, modelMatrix, transPos);
+    }
+    _draw(projMatrix, modelMatrix, transPos) {
+        if (this._dataArray.length === 0)
+            return;
+        const { gl, globe } = this;
+        if (globe == null) {
+            console.log("globe is null");
+            return;
+        }
+        const lastDepth = gl.getParameter(gl.DEPTH_TEST);
+        gl.disable(gl.DEPTH_TEST);
+        gl.enable(gl.BLEND);
+        gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+        this._translateFloat32Array.set([transPos.x, transPos.y, transPos.z], 0);
+        gl.useProgram(this._shaderProgram);
+        gl.bindBuffer(gl.ARRAY_BUFFER, this._mixtureBuffer);
+        gl.enableVertexAttribArray(this._aVertexPosition); // devamli enable edilmesine gerek olmayabilir mi?
+        gl.vertexAttribPointer(this._aVertexPosition, 3, gl.FLOAT, false, floatCount * 4, 0);
+        gl.enableVertexAttribArray(this._aVertexColor);
+        gl.vertexAttribPointer(this._aVertexColor, 3, gl.FLOAT, false, floatCount * 4, 3 * 4);
+        gl.enableVertexAttribArray(this._aMinSize);
+        gl.vertexAttribPointer(this._aMinSize, 1, gl.FLOAT, false, floatCount * 4, 6 * 4);
+        gl.enableVertexAttribArray(this._aMaxSize);
+        gl.vertexAttribPointer(this._aMaxSize, 1, gl.FLOAT, false, floatCount * 4, 7 * 4);
+        gl.enableVertexAttribArray(this._aStartTime);
+        gl.vertexAttribPointer(this._aStartTime, 1, gl.FLOAT, false, floatCount * 4, 8 * 4);
+        gl.enableVertexAttribArray(this._aFadeInTime);
+        gl.vertexAttribPointer(this._aFadeInTime, 1, gl.FLOAT, false, floatCount * 4, 9 * 4);
+        gl.enableVertexAttribArray(this._aFadeOutTime);
+        gl.vertexAttribPointer(this._aFadeOutTime, 1, gl.FLOAT, false, floatCount * 4, 10 * 4);
+        gl.enableVertexAttribArray(this._aMinAlpha);
+        gl.vertexAttribPointer(this._aMinAlpha, 1, gl.FLOAT, false, floatCount * 4, 11 * 4);
+        gl.enableVertexAttribArray(this._aMaxAlpha);
+        gl.vertexAttribPointer(this._aMaxAlpha, 1, gl.FLOAT, false, floatCount * 4, 12 * 4);
+        gl.uniform1f(this._uDeltaTime, this._animationDeltaTime);
+        if (globe.api_GetCurrentGeometry() === globe.api_GeometryTypes().FLAT) {
+            const { width, height } = globe.api_GetCurrentWorldWH();
+            gl.uniform2f(this._uMapWH, width, height);
+        }
+        else {
+            gl.uniformMatrix4fv(this._uModelViewMatrix, false, modelMatrix);
+        }
+        gl.uniformMatrix4fv(this._uProjectionMatrix, false, projMatrix);
+        gl.uniform3fv(this._uTranslate, this._translateFloat32Array);
+        gl.drawArrays(gl.POINTS, 0, this._dataArray.length);
+        if (lastDepth) {
+            gl.enable(gl.DEPTH_TEST);
+        }
+        gl.disable(gl.BLEND);
+        globe.DrawRender();
+    }
+    _build() {
+        // build data and fill the buffer
+        const { gl, globe, _mixtureBuffer } = this;
+        if (globe == null || _mixtureBuffer == null) {
+            console.log("globe is null");
+            return;
+        }
+        const floatArray = new Float32Array(this._dataArray.length * floatCount);
+        for (let i = 0; i < this._dataArray.length; i += 1) {
+            const data = this._dataArray[i];
+            const { long, lat, height, minSize, maxSize, color, fadeInTime, fadeOutTime } = data;
+            const [x, y, z] = globe.api_Get3DPoint(long, lat, height, false);
+            const [r, g, b] = color;
+            const startTime = data.startTime;
+            const minAlpha = data.minAlpha;
+            const maxAlpha = data.maxAlpha;
+            floatArray.set([x, y, z, r, g, b, minSize, maxSize, startTime, fadeInTime, fadeOutTime, minAlpha, maxAlpha], i * floatCount);
+        }
+        console.log("floatArray", floatArray);
+        gl.bindBuffer(gl.ARRAY_BUFFER, _mixtureBuffer);
+        gl.bufferData(gl.ARRAY_BUFFER, floatArray, gl.STATIC_DRAW);
+        console.log("build");
+        if (this._buildTimerId == null) {
+            this._startBuildTimer();
+        }
+    }
+    _startBuildTimer() {
+        const { globe, _buildLOD } = this;
+        this._buildTimerId = setInterval(() => {
+            if (globe.api_GetCurrentGeometry() != globe.api_GeometryTypes().SPHERE)
+                return;
+            const LOD = globe.api_GetCurrentLOD();
+            if (!globe.api_IsScreenMoving() && LOD >= _buildLOD && LOD !== this._lastLOD) {
+                this._build();
+                this._lastLOD = LOD;
+            }
+        }, 1000);
+        console.log("startBuildTimer");
+    }
+    setGeometry() {
+        // arazi yuksekligine gore build tetikleyecek push mekanizmasi globeta yok
+        // timer start edilip durdurulacak
+        this._loadUniforms();
+        this.updateBuffer();
+        console.log("setGeometry");
+    }
+    _loadUniforms() {
+        const { gl, globe } = this;
+        const currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
+        gl.useProgram(this._shaderProgram);
+        const geometry = globe.api_GetCurrentGeometry();
+        if (geometry === globe.api_GeometryTypes().SPHERE) {
+            gl.uniform1f(this._uIsFlat, false);
+        }
+        else if (geometry === globe.api_GeometryTypes().FLAT) {
+            gl.uniform1f(this._uIsFlat, true);
+            gl.uniform2f(this._uScrWH, globe.api_ScrW(), globe.api_ScrH());
+        }
+        else {
+            alert("Geometry is not supported");
+        }
+        gl.useProgram(currentProgram);
+    }
+    free() {
+        console.log("free AlarmFadeInFadeOut");
+        const { gl } = this;
+        this.globe = null;
+        this.gl = null;
+        this.draw3D = null;
+        this._build = null;
+        clearInterval(this._buildTimerId);
+        clearInterval(this._tickTimerId);
+        gl.disableVertexAttribArray(this._aVertexPosition);
+        // gl.deleteBuffer(this._mixtureBuffer);
+        // gl.deleteProgram(this._shaderProgram);
+        this._shaderProgram = null;
+        this._mixtureBuffer = null;
+        window.removeEventListener('resize', this._resizeHandler, true);
+    }
+}

package/{Math/angle-calculation.ts → webglobeplugins/Math/angle-calculation.js}

@@ -1,18 +1,14 @@
-import { Degree } from "../types";
-
-const Radians = Math.PI / 180;
-
-function bearingRealAngle(long: Degree, lat: Degree, endLong: Degree, endLat: Degree): Degree {
-    const rLong = Radians * long;
-    const rLat = Radians * lat;
-    const rEndLong = Radians * endLong;
-    const rEndLat = Radians * endLat;
-    const delta_long = rEndLong - rLong;
-    const x = Math.sin(delta_long) * Math.cos(rEndLat);
-    const y = Math.cos(rLat) * Math.sin(rEndLat) - Math.sin(rLat) * Math.cos(rEndLat) * Math.cos(delta_long);
-    let initialBearing = Math.atan2(x, y) / Radians;
-    initialBearing = (initialBearing + 360) % 360;
-    return initialBearing;
-}
-
-export { bearingRealAngle };
+const Radians = Math.PI / 180;
+function bearingRealAngle(long, lat, endLong, endLat) {
+    const rLong = Radians * long;
+    const rLat = Radians * lat;
+    const rEndLong = Radians * endLong;
+    const rEndLat = Radians * endLat;
+    const delta_long = rEndLong - rLong;
+    const x = Math.sin(delta_long) * Math.cos(rEndLat);
+    const y = Math.cos(rLat) * Math.sin(rEndLat) - Math.sin(rLat) * Math.cos(rEndLat) * Math.cos(delta_long);
+    let initialBearing = Math.atan2(x, y) / Radians;
+    initialBearing = (initialBearing + 360) % 360;
+    return initialBearing;
+}
+export { bearingRealAngle };