@pirireis/webglobeplugins 0.9.9 → 0.9.11

package/wind/plugin.js

@@ -0,0 +1,724 @@
+"use strict";
+/**
+ * Author: Toprak Nihat Deniz Ozturk
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var util = __importStar(require("../util"));
+var imagetovectorfieldandmagnitude_1 = __importDefault(require("./imagetovectorfieldandmagnitude"));
+var util_1 = require("../util");
+/**
+ * Shader Dökümanı:
+ * * Vektör alan haritasında kaçış değeri
+ * texture2D(u_wind, pos).rg == vec2(0.0, 0.0) değerini kaçış için kullandım.
+ * Deniz rüzgarları gibi haritalarda kara için rg değerleri 0.0 oluyor.
+ * Gerçek bir partikülün rg == vec2(0.0, 0.0) değerinde olma olasılığı düşük.
+ * Hem yatay ve hem dikey boyutta en düşük değere sahip olmalı.
+ *
+
+ *
+ */
+/**
+ * @typedef {Object} WindData for setWindDataWithImageBase64
+ * @property {string} image - base64 encoded image
+ * @property {number} width - image width
+ * @property {number} height - image height
+ * @property {number} uMin - minimum u value
+ * @property {number} vMin - minimum v value
+ * @property {number} uMax - maximum u value
+ * @property {number} vMax - maximum v value
+ * @property {Array} bbox - bounding box [minLon, minLat, maxLon, maxLat]
+ * @property {LegendData} legendData - legend data
+
+ */
+/**
+ * @typedef {Object} LegendData
+ * @property {Array} thresholds - list of integers
+ * @property {Array} values - list of colors
+ */
+var quadVert = "\nprecision mediump float;\n\nattribute vec2 a_pos;\n\nvarying vec2 v_tex_pos;\n\nvoid main() {\n    v_tex_pos = a_pos;\n    gl_Position = vec4(1.0 - 2.0 * a_pos, 0, 1);\n}";
+var screenFrag = "precision mediump float;\n\nuniform sampler2D u_screen;\nuniform float u_opacity;\n\nvarying vec2 v_tex_pos;\n\nvoid main() {\n    vec4 color = texture2D(u_screen, 1.0 - v_tex_pos);\n    // a hack to guarantee opacity fade out even with a value close to 1.0\n    gl_FragColor = vec4( floor(255.0 * color * u_opacity) / 255.0);\n}\n\n";
+var updateFrag = "\nprecision highp float;\n\nuniform sampler2D u_particles;\nuniform sampler2D u_wind;\nuniform vec2 u_wind_res;\nuniform vec2 u_wind_min;\nuniform vec2 u_wind_max;\nuniform float u_rand_seed;\nuniform float u_speed_factor;\nuniform float u_drop_rate;\nuniform float u_drop_rate_bump;\n\nvarying vec2 v_tex_pos;\n\n// pseudo-random generator\nconst vec3 rand_constants = vec3(12.9898, 78.233, 4375.85453);\nfloat rand(const vec2 co) {\n    float t = dot(rand_constants.xy, co);\n    return fract(sin(t) * (rand_constants.z + t));\n}\n\n// wind speed lookup; use manual bilinear filtering based on 4 adjacent pixels for smooth interpolation\nvec2 lookup_wind(const vec2 uv) {\n    // return texture2D(u_wind, uv).rg; // lower-res hardware filtering\n    vec2 px = 1.0 / u_wind_res;\n    vec2 vc = (floor(uv * u_wind_res)) * px;\n    vec2 f = fract(uv * u_wind_res);\n    vec2 tl = texture2D(u_wind, vc).rg;\n    vec2 tr = texture2D(u_wind, vc + vec2(px.x, 0)).rg;\n    vec2 bl = texture2D(u_wind, vc + vec2(0, px.y)).rg;\n    vec2 br = texture2D(u_wind, vc + px).rg;\n    return mix(mix(tl, tr, f.x), mix(bl, br, f.x), f.y);\n}\n\nvoid main() {\n    vec4 color = texture2D(u_particles, v_tex_pos);\n    vec2 pos = vec2(\n        color.r / 255.0 + color.b,\n        color.g / 255.0 + color.a); // decode particle position from pixel RGBA\n\n    if ( texture2D(u_wind, pos).rg == vec2(0.0, 0.0) ) {\n        discard;\n    }\n\n    vec2 velocity = mix(u_wind_min, u_wind_max, lookup_wind(pos));\n    float speed_t = length(velocity) / length(u_wind_max);\n\n    // take EPSG:4236 distortion into account for calculating where the particle moved\n    // float distortion = 1.0; //cos(radians(pos.y * 180.0 - 90.0));\n    // vec2 offset = vec2(velocity.x / distortion, -velocity.y) * 0.0001 * u_speed_factor;\n    vec2 offset = vec2(velocity.x, velocity.y) * 0.0001 * u_speed_factor;\n\n    // update particle position, wrapping around the date line\n    pos = fract(1.0 + pos + offset);\n\n    // a random seed to use for the particle drop\n    vec2 seed = (pos + v_tex_pos) * u_rand_seed;\n\n    // drop rate is a chance a particle will restart at random position, to avoid degeneration\n    float drop_rate = u_drop_rate + speed_t * u_drop_rate_bump;\n    float drop = step(1.0 - drop_rate, rand(seed));\n\n    vec2 random_pos = vec2(\n        rand(seed + 1.3),\n        rand(seed + 2.1));\n    pos = mix(pos, random_pos, drop);\n\n    // encode the new particle position back into RGBA\n    gl_FragColor = vec4(\n        fract(pos * 255.0),\n        floor(pos * 255.0) / 255.0);\n}\n";
+var drawFrag = "precision mediump float;\n\nuniform sampler2D u_wind;\nuniform vec2 u_wind_min;\nuniform vec2 u_wind_max;\nuniform sampler2D u_color_ramp;\nuniform float u_color_ramp_max;\nuniform float u_base_opacity;\n\nuniform float u_min_speed;\nuniform float u_max_speed;\n\nvarying vec2 v_particle_pos;\n\nvoid main() {\n    \n\n    if ( texture2D(u_wind, v_particle_pos).rg == vec2(0.0, 0.0) ) {\n        discard;\n    }\n    vec2 velocity = mix(u_wind_min, u_wind_max, texture2D(u_wind, v_particle_pos).rg);\n    float speed = length(velocity);\n    if (speed < u_min_speed || speed > u_max_speed) {\n        discard;\n    }\n    if (speed >= u_color_ramp_max) {\n        gl_FragColor = texture2D(u_color_ramp, \n            vec2( 0.99999 , 0.0001 )) * u_base_opacity;\n        return;\n    }\n\n    float speed_t = speed / u_color_ramp_max; // length(u_wind_max); // \n    // color ramp olusturulan method finalde texture ters \u00E7evriliyor. bu y\u00FCzden speed_t 1.0 - speed_t oluyor.\n    speed_t = 1.0 - speed_t;\n    // color ramp is encoded in a 16.0 x 16.0 texture\n    vec2 ramp_pos = vec2(\n        fract(16.0 * speed_t),\n        floor(16.0 * speed_t) / 16.0);\n\n\n    gl_FragColor = texture2D(u_color_ramp, ramp_pos) * u_base_opacity;\n}\n";
+var drawSphereVert = "\nprecision mediump float;\n\nattribute float a_index;\n\nuniform float u_point_size;\nuniform sampler2D u_particles;\nuniform float u_particles_res;\n\nuniform float u_height;\n\nvarying vec2 v_particle_pos;\nvarying float v_z;\n\nuniform mat3 u_bbox_matrix;\n\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\nuniform vec3 uTranslate;\n\nconst float PI = 3.141592653589793;\nconst float R = 6378.137;\n\nvec3 cartesian3DPoint( float longRad, float latRad, float height) {\n    float radius = R + height;\n    float x = radius * sin(latRad) * cos(longRad);\n    float y = radius * sin(latRad) * sin(longRad);\n    float z = radius * cos(latRad);\n    return vec3(\n        x, \n        y, \n        z) ;\n}\n\nvoid main() {\n    vec4 color = texture2D(u_particles, vec2(\n        fract(a_index / u_particles_res),\n        floor(a_index / u_particles_res) / u_particles_res));\n\n    v_particle_pos = vec2(\n        color.r / 255.0 + color.b,\n        color.g / 255.0 + color.a);\n    \n\n    if ( v_particle_pos.y < 0.0265 || v_particle_pos.y > 0.9735 ) {\n        gl_Position = vec4(-2.0, -2.0, -2.0, 1.0);\n        return;\n    }\n    vec3 pos = u_bbox_matrix * vec3(v_particle_pos.x, v_particle_pos.y, 1.0);\n    \n\n    float xRad = PI * (2.0 * pos.x - 1.0);\n    float yRad = pos.y * PI;\n\n    pos = cartesian3DPoint(xRad, yRad, u_height);\n    gl_Position = uProjectionMatrix * uModelViewMatrix * vec4(pos - uTranslate, 1.0);\n    gl_PointSize = u_point_size;\n\n}";
+var drawFlatVert = "\nprecision mediump float;\n\nuniform mat3 u_bbox_matrix;\n\nuniform vec3 uTranslate;\n// uniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\n\nattribute float a_index;\nuniform sampler2D u_particles;\nuniform float u_particles_res;\nuniform float u_point_size;\nuniform vec2 u_mapWH;\nuniform vec2 u_scrWH;\n\nvarying vec2 v_particle_pos;\n\nconst float PI = 3.141592653589793;\nconst float POLE = 20037508.34;\nconst float POLE_BY_PI = POLE / PI;\nconst float HALF_PI = PI / 2.0;\n\n\nvoid main() {\n\n    vec4 color = texture2D(u_particles, vec2(\n        fract(a_index / u_particles_res),\n        floor(a_index / u_particles_res) / u_particles_res));\n\n    v_particle_pos = vec2(\n        color.r / 255.0 + color.b,\n        color.g / 255.0 + color.a);\n\n    if ( v_particle_pos.y < 0.0265 || v_particle_pos.y > 0.9735 ) {\n        gl_Position = vec4(-2.0, -2.0, -2.0, 1.0);\n        return;\n    }\n    vec3 pos = u_bbox_matrix * vec3(v_particle_pos.x, v_particle_pos.y, 1.0);\n    \n    float x = (2.0 * pos.x - 1.0);\n    float mercator_x = x * POLE;\n    float mercator_y = log( tan( ( 1.0 - pos.y ) * HALF_PI  ) ) * POLE_BY_PI;\n\n    float normalizedX = ( mercator_x - uTranslate.x) / u_mapWH.x;\n    float normalizedY = ( mercator_y - uTranslate.y) / u_mapWH.y;\n    gl_Position = uProjectionMatrix * vec4(normalizedX * u_scrWH.x, (1.0 - normalizedY) * u_scrWH.y, 0.0, 1.0);\n\n    gl_PointSize = u_point_size;\n}";
+var defaultRampColors = [
+    [0.0, '#5e4fa2'],
+    [0.08, '#3288bd'],
+    [0.2, '#66c2a5'],
+    [0.3, '#abdda4'],
+    [0.4, '#e6f598'],
+    [0.5, '#fee08b'],
+    [0.6, '#fdae61'],
+    [0.7, '#f46d43'],
+    [1.0, '#d53e4f']
+];
+var windyLegendData = {
+    "thresholds": [0, 3, 3, 5, 5, 7, 10, 10, 13, 15, 15, 17, 20, 20, 25, 25, 30],
+    //  0 5 10 20 30 40 60
+    // "thresholds": [0, 5, 5, 10, 10, 15, 15, 20, 20, 25, 25, 30, 30, 35, 40, 60],
+    "values": [
+        "#6271B8",
+        "#6271B8",
+        "#6271B8",
+        "#6271B8",
+        "#3D6EA3",
+        "#4A94AA",
+        "#4A9294",
+        "#4D8E7C",
+        "#4CA44C",
+        "#67A436",
+        "#A28740",
+        "#A26D5C",
+        "#8D3F5C",
+        "#974B91",
+        "#5F64A0",
+        "#5B88A1",
+        "#5B88A1"
+    ]
+};
+var WindPlugin = /** @class */ (function () {
+    /**
+     * @param {String} id
+     * @param {Object} windDataMeta
+     * @param {number} windDataMeta.width - image width
+     * @param {number} windDataMeta.height - image height
+     * @param {Array} windDataMeta.bbox - bounding box [minLon, minLat, maxLon, maxLat]
+     * @param {Object} options
+     * @param {number} options.fadeOpacity - how fast the particle trails fade on each frame | between 0 - 1 | default 0.746
+     * @param {number} options.speedFactor - how fast the particles move | between 0 - 1 | default 0.6
+     * @param {number} options.dropRate - how often the particles move to a random place | between 0 - 1 | default 0.007
+     * @param {number} options.dropRateBump - drop rate increase relative to individual particle speed
+     * @param {number} options.baseOpacity - opacity of drawn particle trails | between 0 - 1 | default 1.0
+     * @param {number} options.pointSize - draw size of each particle | positive number | default 2.0
+     * @param {number} options.minSpeed - minimum speed value | positive number | default 0.0
+     * @param {number} options.maxSpeed - maximum speed value | positive number | default 1000.0
+     * @param {number} options.height - height of the particles | number | default 0.0
+     * @param {number} numParticles - number of particles | positive integer
+     * @param {LegendData} options.legendData - legend data
+     */
+    function WindPlugin(id, windDataMeta, _a) {
+        var _b = _a === void 0 ? {} : _a, _c = _b.fadeOpacity, fadeOpacity = _c === void 0 ? 0.746 : _c, _d = _b.speedFactor, speedFactor = _d === void 0 ? 0.6 : _d, _e = _b.dropRate, dropRate = _e === void 0 ? 0.007 : _e, _f = _b.dropRateBump, dropRateBump = _f === void 0 ? 0.001 : _f, _g = _b.baseOpacity, baseOpacity = _g === void 0 ? 1.0 : _g, _h = _b.pointSize, pointSize = _h === void 0 ? 2.0 : _h, _j = _b.minSpeed, minSpeed = _j === void 0 ? 0.0 : _j, _k = _b.maxSpeed, maxSpeed = _k === void 0 ? 1000.0 : _k, _l = _b.height, height = _l === void 0 ? 0.0 : _l, _m = _b.numParticles, numParticles = _m === void 0 ? 40000 : _m, _o = _b.legendData, legendData = _o === void 0 ? windyLegendData : _o;
+        this.id = id;
+        this._windDataMeta = windDataMeta;
+        this.globe = null;
+        this.gl = null;
+        this._screenMoved = false;
+        this.projMatrix = null;
+        this.modelviewMatrix = null;
+        this.transPos = new Float32Array([0, 0, 0]);
+        this.windData = null;
+        this._fadeOpacity = fadeOpacity;
+        this._speedFactor = speedFactor;
+        this._dropRate = dropRate;
+        this._dropRateBump = dropRateBump;
+        this._baseOpacity = baseOpacity;
+        this._pointSize = pointSize;
+        this._minSpeed = minSpeed;
+        this._maxSpeed = maxSpeed;
+        this._height = height;
+        this._numParticles = numParticles;
+        this._legendData = legendData;
+        this.lastdatas = [[], [], { x: 0, y: 0, z: 0 }];
+        this._drawParticles = this._drawParticlesSphere;
+        this._lastLOD = 0;
+    }
+    Object.defineProperty(WindPlugin.prototype, "height", {
+        // Uniforms are loaded once, on initiation and when they are changed.
+        set: function (value) {
+            this._height = value;
+            this._loadHeight();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(WindPlugin.prototype, "minSpeed", {
+        set: function (value) {
+            this._minSpeed = value;
+            this._loadMinMaxSpeed();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(WindPlugin.prototype, "maxSpeed", {
+        set: function (value) {
+            this._maxSpeed = value;
+            this._loadMinMaxSpeed();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(WindPlugin.prototype, "fadeOpacity", {
+        set: function (value) {
+            this._fadeOpacity = value;
+            this._loadFadeOpacity();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(WindPlugin.prototype, "speedFactor", {
+        set: function (value) {
+            this._speedFactor = value;
+            this._loadSpeedFactor();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(WindPlugin.prototype, "dropRate", {
+        set: function (value) {
+            this._dropRate = value;
+            this._loadDropRate();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(WindPlugin.prototype, "dropRateBump", {
+        set: function (value) {
+            this._dropRateBump = value;
+            this._loadDropRateBump();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(WindPlugin.prototype, "baseOpacity", {
+        set: function (value) {
+            this._baseOpacity = value;
+            this._loadBaseOpacity();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(WindPlugin.prototype, "pointSize", {
+        set: function (value) {
+            this._pointSize = value;
+            this._loadPointSize();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    // Color ramp methods. 
+    // Color ramp is used to colorize the particles according to their speed.
+    // Legend max value is used to normalize the speed values.
+    WindPlugin.prototype.setColorRamp = function (colors) {
+        // lookup texture for colorizing the particles according to their speed
+        if (this.gl == null) {
+            return;
+        }
+        this.colorRampTexture = util.createTexture(this.gl, this.gl.LINEAR, util.getColorRamp(colors), 16, 16);
+    };
+    WindPlugin.prototype.setColorRampDefault = function () {
+        var _a = this.windData, uMax = _a.uMax, uMin = _a.uMin, vMax = _a.vMax, vMin = _a.vMin;
+        var maxSpeed = Math.sqrt(uMax * uMax + vMax * vMax);
+        var minSpeed = Math.sqrt(uMin * uMin + vMin * vMin);
+        // console.log("maxSpeed", maxSpeed, "minSpeed", minSpeed);
+        this._rampMax = maxSpeed > minSpeed ? maxSpeed : minSpeed;
+        this._loadRampMax();
+        this.setColorRamp(defaultRampColors);
+    };
+    /**
+     *
+     * @param {*} legendData
+     * @param {Array} legendData.thresholds - list of integers
+     * @param {Array} legendData.values - list of colors in hex format like #ff0000 (alpha is not included)
+     *
+     */
+    WindPlugin.prototype.setLegend = function (legendData) {
+        var gl = this.gl;
+        if (gl === null) {
+            throw new Error("wind plugin. setColorRampFromService is called before plugin is registered.");
+        }
+        var thresholds = legendData.thresholds, values = legendData.values;
+        if (thresholds.length === 0 || values.length === 0) {
+            return;
+        }
+        thresholds.push(thresholds[thresholds.length - 1]);
+        values.push(values[values.length - 1]);
+        var maxVelocity = thresholds[thresholds.length - 1];
+        var colors = [];
+        for (var i = 0; i < thresholds.length; i++) {
+            colors.push([
+                thresholds[i] / maxVelocity,
+                values[i]
+            ]);
+        }
+        var colorRamp = util.getColorRamp(colors);
+        this.colorRampTexture = util.createTexture(gl, gl.LINEAR, colorRamp, 16, 16);
+        this._rampMax = maxVelocity;
+        this._loadRampMax();
+    };
+    Object.defineProperty(WindPlugin.prototype, "numParticles", {
+        get: function () {
+            return this._numParticles;
+        },
+        // particle coordinates are encoded into RGBA texture
+        set: function (numParticles) {
+            var gl = this.gl;
+            // we create a square texture where each pixel will hold a particle position encoded as RGBA
+            var particleRes = this.particleStateResolution = Math.ceil(Math.sqrt(numParticles));
+            this._numParticles = particleRes * particleRes;
+            var particleState = new Uint8Array(this._numParticles * 4);
+            for (var i = 0; i < particleState.length; i++) {
+                particleState[i] = Math.floor(Math.random() * 256); // randomize the initial particle positions
+            }
+            // textures to hold the particle state for the current and the next frame
+            this.particleStateTexture0 = util.createTexture(gl, gl.NEAREST, particleState, particleRes, particleRes);
+            this.particleStateTexture1 = util.createTexture(gl, gl.NEAREST, particleState, particleRes, particleRes);
+            var currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
+            gl.useProgram(this.updateProgram.program);
+            gl.uniform1f(this.updateProgram.u_wind_res, this.particleStateResolution);
+            gl.useProgram(this.drawSphereProgram.program);
+            gl.uniform1f(this.drawSphereProgram.u_particles_res, this.particleStateResolution);
+            gl.useProgram(this.drawFlatProgram.program);
+            gl.uniform1f(this.drawFlatProgram.u_particles_res, this.particleStateResolution);
+            gl.useProgram(currentProgram);
+            // console.log("numParticles", this._numParticles);
+            var particleIndices = new Float32Array(this._numParticles);
+            for (var i = 0; i < this._numParticles; i++)
+                particleIndices[i] = i;
+            this.particleIndexBuffer = util.createBuffer(gl, particleIndices);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    // Vector field texture is used to calculate the particle movement.
+    /**
+     * @param {Object} windData
+     * @param {HTMLImageElement} windData.image - image element
+     
+     * @param {number} windData.uMin - minimum u value
+     * @param {number} windData.vMin - minimum v value
+     * @param {number} windData.uMax - maximum u value
+     * @param {number} windData.vMax - maximum v value
+     */
+    WindPlugin.prototype.setWind = function (windData) {
+        if (windData === null) {
+            return;
+        }
+        var windDataMeta = this._windDataMeta;
+        var gl = this.gl;
+        this.windData = windData;
+        this.windTexture = util.createTexture(gl, gl.LINEAR, windData.image);
+        var currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
+        gl.useProgram(this.updateProgram.program);
+        gl.uniform2f(this.updateProgram.u_wind_res, windDataMeta.width, windDataMeta.height);
+        gl.uniform2f(this.updateProgram.u_wind_min, this.windData.uMin, this.windData.vMin);
+        gl.uniform2f(this.updateProgram.u_wind_max, this.windData.uMax, this.windData.vMax);
+        this.setGeometry();
+        var minXY = this._latLongToPixelXY(windDataMeta.bbox[1], windDataMeta.bbox[0]);
+        var maxXY = this._latLongToPixelXY(windDataMeta.bbox[3], windDataMeta.bbox[2]);
+        this._loadBoundingBoxData(minXY.x, minXY.y, maxXY.x, maxXY.y);
+        gl.useProgram(currentProgram);
+        this._setCoorcinatesDataCalculatorData();
+        this.resize();
+    };
+    // Vector field texture is used to calculate the particle movement.
+    /**
+     * @param {Object} windData
+     * @param {BaseInt64} windData.image - image element
+     * @param {number} windData.width - image width
+     * @param {number} windData.height - image height
+     * @param {number} windData.uMin - minimum u value
+     * @param {number} windData.vMin - minimum v value
+     * @param {number} windData.uMax - maximum u value
+     * @param {number} windData.vMax - maximum v value
+     * @param {Array} windData.bbox - bounding box [minLon, minLat, maxLon, maxLat]
+     */
+    WindPlugin.prototype.setWindDataWithImageBase64 = function (windData) {
+        var _this = this;
+        var image = util.createImageFromBase64(windData.image);
+        image.onload = function () {
+            windData.image = image;
+            _this.setWind(windData);
+        };
+    };
+    WindPlugin.prototype.getPointCoordinatesDataCalculator = function () {
+        if (!this.coordinatesDataCalculator)
+            this._createPointCoordinatesDataCalculator();
+        return this.coordinatesDataCalculator;
+    };
+    WindPlugin.prototype._createPointCoordinatesDataCalculator = function () {
+        var _a = this._windDataMeta, bbox = _a.bbox, width = _a.width, height = _a.height;
+        this.coordinatesDataCalculator = new util_1.PointCoordinatesDataCalculator(bbox, width, height);
+        this._setCoorcinatesDataCalculatorData();
+    };
+    WindPlugin.prototype._setCoorcinatesDataCalculatorData = function () {
+        if (!this.windData || !this.coordinatesDataCalculator) {
+            return;
+        }
+        var magnitude = (0, imagetovectorfieldandmagnitude_1.default)(this.windData);
+        this.coordinatesDataCalculator.updateData(0, magnitude, magnitude);
+    };
+    // -----------------------------------------------
+    //             --- inner methods ---
+    // -----------------------------------------------
+    WindPlugin.prototype._latLongToPixelXY = function (latitude, longitude) {
+        return {
+            x: (longitude + 180) / 360,
+            y: (90 - latitude) / 180
+        };
+    };
+    WindPlugin.prototype._loadBoundingBoxData = function (minX, minY, maxX, maxY) {
+        // console.log("minX", minX, "minY", minY, "maxX", maxX, "maxY", maxY)
+        var gl = this.gl;
+        var bboxMatrix = new Float32Array([
+            maxX - minX, 0, 0,
+            0, maxY - minY, 0,
+            minX, minY, 1
+        ]);
+        var currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
+        gl.useProgram(this.drawSphereProgram.program);
+        gl.uniformMatrix3fv(this.drawSphereProgram.u_bbox_matrix, false, bboxMatrix);
+        gl.useProgram(this.drawFlatProgram.program);
+        gl.uniformMatrix3fv(this.drawFlatProgram.u_bbox_matrix, false, bboxMatrix);
+        gl.useProgram(currentProgram);
+    };
+    // When the screen is moved, the particles are reset to random positions.
+    // During movement plugin should not draw the particles.
+    WindPlugin.prototype._doDraw = function () {
+        var globe = this.globe;
+        if (this.windData === null) {
+            return false;
+        }
+        if (globe.api_IsScreenMoving() || this._lastLOD !== globe.api_GetCurrentLODWithDecimal()) {
+            if (!this._screenMoved) {
+                this._screenMoved = true;
+            }
+            this._lastLOD = globe.api_GetCurrentLODWithDecimal();
+            return false;
+        }
+        else {
+            if (this._screenMoved) {
+                this._loadSpeedFactor();
+                this.resize();
+                this._screenMoved = false;
+            }
+            return true;
+        }
+    };
+    WindPlugin.prototype._draw = function () {
+        var gl = this.gl;
+        this._drawScreen();
+        this._updateParticles();
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+    };
+    // globe calls `draw3D` method on each frame
+    WindPlugin.prototype.draw3D = function (projMatrix, modelviewMatrix, transPos) {
+        var gl = this.gl;
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+        this.transPos.set([transPos.x, transPos.y, transPos.z], 0);
+        this.projMatrix = projMatrix;
+        this.modelviewMatrix = modelviewMatrix;
+        gl.activeTexture(gl.TEXTURE0);
+        if (this._doDraw()) {
+            var depthTest = gl.isEnabled(gl.DEPTH_TEST);
+            if (depthTest)
+                gl.disable(gl.DEPTH_TEST);
+            // if (gl.disable(gl.STENCIL_TEST); // 
+            this._draw();
+            if (depthTest)
+                gl.enable(gl.DEPTH_TEST);
+        }
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+        // test visuals
+        // gl.viewport(0, 0, 100, 100);
+        // this._drawTexture(this.windTexture, 1.0);
+        // gl.viewport(0, 100, 100, 100);
+        // this._drawTexture(this.particleStateTexture0, 1.0);
+        // gl.viewport(0, 200, 100, 100);
+        // this._drawTexture(this.colorRampTexture, 1.0);
+        this._resetMachineStates();
+        this.globe.DrawRender();
+    };
+    WindPlugin.prototype._drawScreen = function () {
+        var _a = this, gl = _a.gl, globe = _a.globe;
+        util.bindTexture(gl, this.windTexture, 0);
+        util.bindTexture(gl, this.particleStateTexture0, 1);
+        // draw the screen into a temporary framebuffer to retain it as the background on the next frame
+        util.bindFramebuffer(gl, this.framebuffer, this.screenTexture);
+        gl.viewport(0, 0, globe.api_ScrW(), globe.api_ScrH());
+        gl.enable(gl.BLEND);
+        gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA); // non-premultiplied alpha
+        this._drawTexture(this.backgroundTexture, this._fadeOpacity);
+        this._drawParticles();
+        util.bindFramebuffer(gl, null);
+        this._drawTexture(this.screenTexture, 1.0);
+        gl.disable(gl.BLEND);
+        // save the current screen as the background for the next frame
+        var temp = this.backgroundTexture;
+        this.backgroundTexture = this.screenTexture;
+        this.screenTexture = temp;
+    };
+    WindPlugin.prototype._drawTexture = function (texture, opacity) {
+        var gl = this.gl;
+        var program = this.screenProgram;
+        gl.useProgram(program.program);
+        util.bindAttribute(gl, this.quadBuffer, program.a_pos, 2);
+        util.bindTexture(gl, texture, 2);
+        gl.uniform1i(program.u_screen, 2);
+        gl.uniform1f(program.u_opacity, opacity);
+        gl.drawArrays(gl.TRIANGLES, 0, 6);
+    };
+    WindPlugin.prototype._loadRampMax = function () {
+        var gl = this.gl;
+        var currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
+        // console.log("load ramp max", this._rampMax);
+        gl.useProgram(this.drawSphereProgram.program);
+        gl.uniform1f(this.drawSphereProgram.u_color_ramp_max, this._rampMax);
+        gl.useProgram(this.drawFlatProgram.program);
+        gl.uniform1f(this.drawFlatProgram.u_color_ramp_max, this._rampMax);
+        gl.useProgram(currentProgram);
+    };
+    WindPlugin.prototype._drawParticlesSphere = function () {
+        var _a = this, gl = _a.gl, projMatrix = _a.projMatrix, modelviewMatrix = _a.modelviewMatrix, transPos = _a.transPos;
+        var program = this.drawSphereProgram;
+        gl.useProgram(program.program);
+        util.bindAttribute(gl, this.particleIndexBuffer, program.a_index, 1);
+        util.bindTexture(gl, this.colorRampTexture, 2);
+        gl.uniform1i(program.u_wind, 0);
+        gl.uniform1i(program.u_particles, 1);
+        gl.uniform1i(program.u_color_ramp, 2);
+        gl.uniformMatrix4fv(program.uProjectionMatrix, false, projMatrix);
+        gl.uniformMatrix4fv(program.uModelViewMatrix, false, modelviewMatrix);
+        gl.uniform3fv(program.uTranslate, transPos);
+        gl.drawArrays(gl.POINTS, 0, this._numParticles);
+    };
+    WindPlugin.prototype._drawParticlesFlat = function () {
+        var _a = this, gl = _a.gl, transPos = _a.transPos, projMatrix = _a.projMatrix, globe = _a.globe;
+        var program = this.drawFlatProgram;
+        gl.useProgram(program.program);
+        util.bindAttribute(gl, this.particleIndexBuffer, program.a_index, 1);
+        util.bindTexture(gl, this.colorRampTexture, 2);
+        gl.uniform1i(program.u_wind, 0);
+        gl.uniform1i(program.u_particles, 1);
+        gl.uniform1i(program.u_color_ramp, 2);
+        gl.uniform2f(program.u_scrWH, globe.api_ScrW(), globe.api_ScrH());
+        var _b = globe.api_GetCurrentWorldWH(), width = _b.width, height = _b.height;
+        gl.uniform2f(program.u_mapWH, width, height);
+        gl.uniformMatrix4fv(program.uProjectionMatrix, false, projMatrix);
+        gl.uniform3fv(program.uTranslate, transPos);
+        gl.drawArrays(gl.POINTS, 0, this._numParticles);
+    };
+    // globe calls `setGeometry` method on map projection change. FLAT or SPHERE
+    WindPlugin.prototype.setGeometry = function () {
+        if (this.windData === null) {
+            return;
+        }
+        var _a = this, globe = _a.globe, gl = _a.gl;
+        var geometry = globe.api_GetCurrentGeometry();
+        var currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
+        if (geometry === globe.api_GeometryTypes().SPHERE) {
+            this._drawParticles = this._drawParticlesSphere;
+            gl.useProgram(this.drawSphereProgram.program);
+            gl.uniform2f(this.drawSphereProgram.u_wind_min, this.windData.uMin, this.windData.vMin);
+            gl.uniform2f(this.drawSphereProgram.u_wind_max, this.windData.uMax, this.windData.vMax);
+        }
+        else if (geometry === globe.api_GeometryTypes().FLAT) {
+            this._drawParticles = this._drawParticlesFlat;
+            gl.useProgram(this.drawFlatProgram.program);
+            gl.uniform2f(this.drawFlatProgram.u_wind_min, this.windData.uMin, this.windData.vMin);
+            gl.uniform2f(this.drawFlatProgram.u_wind_max, this.windData.uMax, this.windData.vMax);
+        }
+        else {
+            alert("Geometry is not supported");
+        }
+        gl.useProgram(currentProgram);
+        this.resize();
+    };
+    WindPlugin.prototype._updateParticles = function () {
+        var gl = this.gl;
+        var program = this.updateProgram;
+        gl.useProgram(program.program);
+        gl.viewport(0, 0, this.particleStateResolution, this.particleStateResolution);
+        util.bindAttribute(gl, this.quadBuffer, program.a_pos, 2);
+        gl.uniform1i(program.u_wind, 0);
+        gl.uniform1i(program.u_particles, 1);
+        util.bindAttribute(gl, this.quadBuffer, program.a_pos, 2);
+        gl.uniform1f(program.u_rand_seed, Math.random());
+        util.bindFramebuffer(gl, this.framebuffer, this.particleStateTexture1);
+        gl.drawArrays(gl.TRIANGLES, 0, 6);
+        // swap the particle state textures so the new one becomes the current one
+        var temp = this.particleStateTexture0;
+        this.particleStateTexture0 = this.particleStateTexture1;
+        this.particleStateTexture1 = temp;
+    };
+    WindPlugin.prototype._resetMachineStates = function () {
+        var _a = this, gl = _a.gl, globe = _a.globe;
+        // gl.disable(gl.DEPTH_TEST);
+        // gl.disable(gl.STENCIL_TEST);
+        gl.activeTexture(gl.TEXTURE0);
+        gl.viewport(0, 0, globe.api_ScrW(), globe.api_ScrH());
+    };
+    WindPlugin.prototype._loadHeight = function () {
+        var _a = this, gl = _a.gl, drawSphereProgram = _a.drawSphereProgram;
+        if (gl == null)
+            return;
+        var currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
+        gl.useProgram(drawSphereProgram.program);
+        gl.uniform1f(drawSphereProgram.u_height, this._height);
+        gl.useProgram(currentProgram);
+    };
+    WindPlugin.prototype._loadMinMaxSpeed = function () {
+        var _a = this, gl = _a.gl, drawSphereProgram = _a.drawSphereProgram, drawFlatProgram = _a.drawFlatProgram;
+        if (gl == null)
+            return;
+        var currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
+        gl.useProgram(drawSphereProgram.program);
+        gl.uniform1f(drawSphereProgram.u_min_speed, this._minSpeed);
+        gl.uniform1f(drawSphereProgram.u_max_speed, this._maxSpeed);
+        gl.useProgram(drawFlatProgram.program);
+        gl.uniform1f(drawFlatProgram.u_min_speed, this._minSpeed);
+        gl.uniform1f(drawFlatProgram.u_max_speed, this._maxSpeed);
+        gl.useProgram(currentProgram);
+    };
+    WindPlugin.prototype._loadFadeOpacity = function () {
+        var _a = this, gl = _a.gl, screenProgram = _a.screenProgram;
+        if (gl == null) {
+            return;
+        }
+        var currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
+        gl.useProgram(screenProgram.program);
+        gl.uniform1f(screenProgram.u_opacity, this._fadeOpacity);
+        gl.useProgram(currentProgram);
+    };
+    WindPlugin.prototype._loadSpeedFactor = function () {
+        var _a = this, gl = _a.gl, globe = _a.globe, updateProgram = _a.updateProgram;
+        if (gl == null) {
+            return;
+        }
+        var currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
+        gl.useProgram(updateProgram.program);
+        gl.uniform1f(updateProgram.u_speed_factor, this._speedFactor / Math.ceil(Math.sqrt(globe.api_GetCurrentLOD())));
+        gl.useProgram(currentProgram);
+    };
+    WindPlugin.prototype._loadDropRate = function () {
+        var _a = this, gl = _a.gl, updateProgram = _a.updateProgram;
+        if (gl == null) {
+            return;
+        }
+        var currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
+        gl.useProgram(updateProgram.program);
+        gl.uniform1f(updateProgram.u_drop_rate, this._dropRate);
+        gl.useProgram(currentProgram);
+    };
+    WindPlugin.prototype._loadDropRateBump = function () {
+        var _a = this, gl = _a.gl, updateProgram = _a.updateProgram;
+        if (gl == null) {
+            return;
+        }
+        var currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
+        gl.useProgram(updateProgram.program);
+        gl.uniform1f(updateProgram.u_drop_rate_bump, this._dropRateBump);
+        gl.useProgram(currentProgram);
+    };
+    WindPlugin.prototype._loadBaseOpacity = function () {
+        var _a = this, gl = _a.gl, drawSphereProgram = _a.drawSphereProgram, drawFlatProgram = _a.drawFlatProgram;
+        if (gl == null) {
+            return;
+        }
+        var currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
+        gl.useProgram(drawSphereProgram.program);
+        gl.uniform1f(drawSphereProgram.u_base_opacity, this._baseOpacity);
+        gl.useProgram(drawFlatProgram.program);
+        gl.uniform1f(drawFlatProgram.u_base_opacity, this._baseOpacity);
+        gl.useProgram(currentProgram);
+    };
+    WindPlugin.prototype._loadPointSize = function () {
+        var _a = this, gl = _a.gl, drawSphereProgram = _a.drawSphereProgram, drawFlatProgram = _a.drawFlatProgram;
+        if (gl == null) {
+            return;
+        }
+        var currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
+        gl.useProgram(drawSphereProgram.program);
+        gl.uniform1f(drawSphereProgram.u_point_size, this._pointSize);
+        gl.useProgram(drawFlatProgram.program);
+        gl.uniform1f(drawFlatProgram.u_point_size, this._pointSize);
+        gl.useProgram(currentProgram);
+    };
+    // globe plugin init methodu
+    WindPlugin.prototype.init = function (globe, gl) {
+        // console.log("init wind plugin")
+        this.globe = globe;
+        this.gl = gl;
+        this.drawSphereProgram = util.createProgramWrapper(gl, drawSphereVert, drawFrag);
+        this.screenProgram = util.createProgramWrapper(gl, quadVert, screenFrag);
+        this.updateProgram = util.createProgramWrapper(gl, quadVert, updateFrag);
+        this.drawFlatProgram = util.createProgramWrapper(gl, drawFlatVert, drawFrag);
+        this.quadBuffer = util.createBuffer(gl, new Float32Array([0, 0, 1, 0, 0, 1, 0, 1, 1, 0, 1, 1]));
+        this.framebuffer = gl.createFramebuffer();
+        this._loadFadeOpacity();
+        this._loadSpeedFactor();
+        this._loadDropRate();
+        this._loadDropRateBump();
+        this._loadBaseOpacity();
+        this._loadPointSize();
+        this._loadMinMaxSpeed();
+        this._loadHeight();
+        if (this._legendData != null) {
+            this.setLegend(this._legendData);
+        }
+        this.numParticles = this._numParticles;
+        this.resize();
+    };
+    WindPlugin.prototype.resize = function (a, b) {
+        var _a = this, gl = _a.gl, globe = _a.globe;
+        var emptyPixels = new Uint8Array(globe.api_ScrW() * globe.api_ScrH() * 4);
+        // screen textures to hold the drawn screen for the previous and the current frame
+        this.backgroundTexture = util.createTexture(gl, gl.LINEAR, emptyPixels, globe.api_ScrW(), globe.api_ScrH());
+        this.screenTexture = util.createTexture(gl, gl.LINEAR, emptyPixels, globe.api_ScrW(), globe.api_ScrH());
+        gl.viewport(0, 0, globe.api_ScrW(), globe.api_ScrH());
+    };
+    // globe calls this `free` on plugin object unregistration
+    WindPlugin.prototype.free = function () {
+        var gl = this.gl;
+        gl.deleteBuffer(this.quadBuffer);
+        gl.deleteFramebuffer(this.framebuffer);
+        gl.deleteTexture(this.backgroundTexture);
+        gl.deleteTexture(this.screenTexture);
+        gl.deleteTexture(this.particleStateTexture0);
+        gl.deleteTexture(this.particleStateTexture1);
+        gl.deleteTexture(this.windTexture);
+        gl.deleteTexture(this.colorRampTexture);
+        gl.deleteProgram(this.drawSphereProgram.program);
+        gl.deleteProgram(this.screenProgram.program);
+        gl.deleteProgram(this.updateProgram.program);
+        gl.deleteProgram(this.drawFlatProgram.program);
+        gl.deleteBuffer(this.particleIndexBuffer);
+    };
+    return WindPlugin;
+}());
+exports.default = WindPlugin;