@pirireis/webglobeplugins 0.15.34 → 0.16.0

package/dist/wind/plugin.js

@@ -0,0 +1,921 @@
+/**
+ * Author: Toprak Nihat Deniz Ozturk
+ */
+import * as util from "../util";
+import imageToMagnitude, { imageToRadianAngle } from "./imagetovectorfieldandmagnitude";
+import { TexturePointSampler } from "../util/heatwavedatamanager/texture-point-sampler";
+/**
+ * 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
+ */
+const quadVert = `
+precision mediump float;
+
+attribute vec2 a_pos;
+
+varying vec2 v_tex_pos;
+
+void main() {
+    v_tex_pos = a_pos;
+    gl_Position = vec4(1.0 - 2.0 * a_pos, 0, 1);
+}`;
+const screenFrag = `precision mediump float;
+
+uniform sampler2D u_screen;
+uniform float u_opacity;
+
+varying vec2 v_tex_pos;
+
+void main() {
+    vec4 color = texture2D(u_screen, 1.0 - v_tex_pos);
+    // a hack to guarantee opacity fade out even with a value close to 1.0
+    if ( color.a < 0.005) {
+        discard;
+    }
+    gl_FragColor = vec4( floor(255.0 * color * u_opacity) / 255.0);
+}
+
+`;
+const updateFrag = `
+precision highp float;
+
+uniform sampler2D u_particles;
+uniform sampler2D u_wind;
+uniform vec2 u_wind_res;
+uniform vec2 u_wind_min;
+uniform vec2 u_wind_max;
+uniform float u_rand_seed;
+uniform float u_speed_factor;
+uniform float u_drop_rate;
+uniform float u_drop_rate_bump;
+
+varying vec2 v_tex_pos;
+
+// pseudo-random generator
+const vec3 rand_constants = vec3(12.9898, 78.233, 4375.85453);
+float rand(const vec2 co) {
+    float t = dot(rand_constants.xy, co);
+    return fract(sin(t) * (rand_constants.z + t));
+}
+
+// wind speed lookup; use manual bilinear filtering based on 4 adjacent pixels for smooth interpolation
+vec2 lookup_wind(const vec2 uv) {
+    return texture2D(u_wind, uv).rg; // lower-res hardware filtering
+    // vec2 px = 1.0 / u_wind_res;
+    // vec2 vc = (floor(uv * u_wind_res)) * px;
+    // vec2 f = fract(uv * u_wind_res);
+    // vec2 tl = texture2D(u_wind, vc).rg;
+    // vec2 tr = texture2D(u_wind, vc + vec2(px.x, 0)).rg;
+    // vec2 bl = texture2D(u_wind, vc + vec2(0, px.y)).rg;
+    // vec2 br = texture2D(u_wind, vc + px).rg;
+    // return mix(mix(tl, tr, f.x), mix(bl, br, f.x), f.y);
+}
+
+void main() {
+    vec4 color = texture2D(u_particles, v_tex_pos);
+    vec2 pos = vec2(
+        color.r / 255.0 + color.b,
+        color.g / 255.0 + color.a); // decode particle position from pixel RGBA
+
+    if ( texture2D(u_wind, pos).rg == vec2(0.0, 0.0) ) {
+        discard;
+    }
+
+    vec2 velocity = mix(u_wind_min, u_wind_max, lookup_wind(pos));
+    float speed_t = length(velocity) / length(u_wind_max);
+
+    // take EPSG:4236 distortion into account for calculating where the particle moved
+    // float distortion = 1.0; //cos(radians(pos.y * 180.0 - 90.0));
+    // vec2 offset = vec2(velocity.x / distortion, -velocity.y) * 0.0001 * u_speed_factor;
+    vec2 offset = vec2(velocity.x, velocity.y) * 0.0001 * u_speed_factor;
+
+    // update particle position, wrapping around the date line
+    pos = fract(1.0 + pos + offset);
+
+    // a random seed to use for the particle drop
+    vec2 seed = (pos + v_tex_pos) * u_rand_seed;
+
+    // drop rate is a chance a particle will restart at random position, to avoid degeneration
+    float drop_rate = u_drop_rate + speed_t * u_drop_rate_bump;
+    float drop = step(1.0 - drop_rate, rand(seed));
+
+    vec2 random_pos = vec2(
+        rand(seed + 1.3),
+        rand(seed + 2.1));
+    pos = mix(pos, random_pos, drop);
+
+    // encode the new particle position back into RGBA
+    gl_FragColor = vec4(
+        fract(pos * 255.0),
+        floor(pos * 255.0) / 255.0);
+}
+`;
+const drawFrag = `precision mediump float;
+
+uniform sampler2D u_wind;
+uniform vec2 u_wind_min;
+uniform vec2 u_wind_max;
+uniform sampler2D u_color_ramp;
+uniform float u_color_ramp_max;
+uniform float u_base_opacity;
+
+uniform float u_min_speed;
+uniform float u_max_speed;
+
+varying vec2 v_particle_pos;
+
+void main() {
+    
+
+    if ( texture2D(u_wind, v_particle_pos).rg == vec2(0.0, 0.0) ) {
+        discard;
+    }
+    vec2 velocity = mix(u_wind_min, u_wind_max, texture2D(u_wind, v_particle_pos).rg);
+    float speed = length(velocity);
+    if (speed < u_min_speed || speed > u_max_speed) {
+        discard;
+    }
+    if (speed >= u_color_ramp_max) {
+        gl_FragColor = texture2D(u_color_ramp, 
+            vec2( 0.99999 , 0.0001 )) * u_base_opacity;
+        return;
+    }
+
+    float speed_t = speed / u_color_ramp_max; // length(u_wind_max); // 
+    // color ramp olusturulan method finalde texture ters çevriliyor. bu yüzden speed_t 1.0 - speed_t oluyor.
+    speed_t = 1.0 - speed_t;
+    // color ramp is encoded in a 16.0 x 16.0 texture
+    vec2 ramp_pos = vec2(
+        fract(16.0 * speed_t),
+        floor(16.0 * speed_t) / 16.0);
+
+
+    gl_FragColor = texture2D(u_color_ramp, ramp_pos) * u_base_opacity;
+}
+`;
+const drawSphereVert = `
+precision mediump float;
+
+attribute float a_index;
+
+uniform float u_point_size;
+uniform sampler2D u_particles;
+uniform float u_particles_res;
+
+uniform float u_height;
+
+varying vec2 v_particle_pos;
+varying float v_z;
+
+uniform mat3 u_bbox_matrix;
+
+uniform mat4 uModelViewMatrix;
+uniform mat4 uProjectionMatrix;
+uniform vec3 uTranslate;
+
+const float PI = 3.141592653589793;
+const float R = 6378.137;
+
+vec3 cartesian3DPoint( float longRad, float latRad, float height) {
+    float radius = R + height;
+    float x = radius * sin(latRad) * cos(longRad);
+    float y = radius * sin(latRad) * sin(longRad);
+    float z = radius * cos(latRad);
+    return vec3(
+        x, 
+        y, 
+        z) ;
+}
+
+void main() {
+    vec4 color = texture2D(u_particles, vec2(
+        fract(a_index / u_particles_res),
+        floor(a_index / u_particles_res) / u_particles_res));
+
+    v_particle_pos = vec2(
+        color.r / 255.0 + color.b,
+        color.g / 255.0 + color.a);
+    
+    
+    // if ( v_particle_pos.y < 0.0265 || v_particle_pos.y > 0.9735 ) {
+    float y = v_particle_pos.y - 0.0055;//a
+    if ( y > 0.9735 || y < 0.0265 ) {
+        gl_Position = vec4(-2.0, -2.0, -2.0, 1.0);
+        return;
+    }
+    // vec3 pos = u_bbox_matrix * vec3(v_particle_pos.x, v_particle_pos.y, 1.0);
+    vec3 pos = u_bbox_matrix * vec3(v_particle_pos.x, y, 1.0);
+
+
+    float xRad = PI * (2.0 * pos.x - 1.0);
+    float yRad = pos.y * PI;
+
+    pos = cartesian3DPoint(xRad, yRad, u_height);
+    gl_Position = uProjectionMatrix * uModelViewMatrix * vec4(pos - uTranslate, 1.0);
+    gl_PointSize = u_point_size;
+
+}`;
+const drawFlatVert = `
+precision mediump float;
+
+uniform mat3 u_bbox_matrix;
+
+uniform vec3 uTranslate;
+// uniform mat4 uModelViewMatrix;
+uniform mat4 uProjectionMatrix;
+
+attribute float a_index;
+uniform sampler2D u_particles;
+uniform float u_particles_res;
+uniform float u_point_size;
+uniform vec2 u_mapWH;
+uniform vec2 u_scrWH;
+
+varying vec2 v_particle_pos;
+
+const float PI = 3.141592653589793;
+const float POLE = 20037508.34;
+const float POLE_BY_PI = POLE / PI;
+const float HALF_PI = PI / 2.0;
+
+
+void main() {
+
+    vec4 color = texture2D(u_particles, vec2(
+        fract(a_index / u_particles_res),
+        floor(a_index / u_particles_res) / u_particles_res));
+
+    v_particle_pos = vec2(
+        color.r / 255.0 + color.b,
+        color.g / 255.0 + color.a);
+    float y = v_particle_pos.y - 0.0055;//a
+    if ( y < 0.0265 || y > 0.9735 ) {
+        gl_Position = vec4(-2.0, -2.0, -2.0, 1.0);
+        return;
+    }
+    vec3 pos = u_bbox_matrix * vec3(v_particle_pos.x, y, 1.0);
+    
+    float x = (2.0 * pos.x - 1.0);
+    float mercator_x = x * POLE;
+    float mercator_y = log( tan( ( 1.0 - pos.y ) * HALF_PI  ) ) * POLE_BY_PI;
+
+    float normalizedX = ( mercator_x - uTranslate.x) / u_mapWH.x;
+    float normalizedY = ( mercator_y - uTranslate.y) / u_mapWH.y;
+    gl_Position = uProjectionMatrix * vec4(normalizedX * u_scrWH.x, (1.0 - normalizedY) * u_scrWH.y, 0.0, 1.0);
+
+    gl_PointSize = u_point_size;
+}`;
+const 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']
+];
+const 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"
+    ]
+};
+export default class WindPlugin {
+    /**
+     * @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
+     */
+    constructor(id, windDataMeta, { fadeOpacity = 0.746, speedFactor = 0.6, dropRate = 0.007, dropRateBump = 0.001, baseOpacity = 1.0, pointSize = 2.0, minSpeed = 0.0, maxSpeed = 1000.0, height = 0.0, numParticles = 40000, legendData = windyLegendData } = {}) {
+        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;
+    }
+    // Uniforms are loaded once, on initiation and when they are changed.
+    set height(value) {
+        this._height = value;
+        this._loadHeight();
+    }
+    set minSpeed(value) {
+        this._minSpeed = value;
+        this._loadMinMaxSpeed();
+    }
+    set maxSpeed(value) {
+        this._maxSpeed = value;
+        this._loadMinMaxSpeed();
+    }
+    set fadeOpacity(value) {
+        this._fadeOpacity = value;
+        this._loadFadeOpacity();
+    }
+    set speedFactor(value) {
+        this._speedFactor = value;
+        this._loadSpeedFactor();
+    }
+    set dropRate(value) {
+        this._dropRate = value;
+        this._loadDropRate();
+    }
+    set dropRateBump(value) {
+        this._dropRateBump = value;
+        this._loadDropRateBump();
+    }
+    set baseOpacity(value) {
+        this._baseOpacity = value;
+        this._loadBaseOpacity();
+    }
+    set pointSize(value) {
+        this._pointSize = value;
+        this._loadPointSize();
+    }
+    // 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.
+    setColorRamp(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);
+    }
+    setColorRampDefault() {
+        const { uMax, uMin, vMax, vMin } = this.windData;
+        const maxSpeed = Math.sqrt(uMax * uMax + vMax * vMax);
+        const 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)
+     *
+     */
+    setLegend(legendData) {
+        const { gl } = this;
+        if (gl === null) {
+            throw new Error("wind plugin. setColorRampFromService is called before plugin is registered.");
+        }
+        const { thresholds, values } = legendData;
+        if (thresholds.length === 0 || values.length === 0) {
+            return;
+        }
+        thresholds.push(thresholds[thresholds.length - 1]);
+        values.push(values[values.length - 1]);
+        const maxVelocity = thresholds[thresholds.length - 1];
+        const colors = [];
+        for (let i = 0; i < thresholds.length; i++) {
+            colors.push([
+                thresholds[i] / maxVelocity,
+                values[i]
+            ]);
+        }
+        const colorRamp = util.getColorRamp(colors);
+        this.colorRampTexture = util.createTexture(gl, gl.LINEAR, colorRamp, 16, 16);
+        this._rampMax = maxVelocity;
+        this._loadRampMax();
+    }
+    // particle coordinates are encoded into RGBA texture
+    set numParticles(numParticles) {
+        const gl = this.gl;
+        // we create a square texture where each pixel will hold a particle position encoded as RGBA
+        const particleRes = this.particleStateResolution = Math.ceil(Math.sqrt(numParticles));
+        this._numParticles = particleRes * particleRes;
+        const particleState = new Uint8Array(this._numParticles * 4);
+        for (let 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);
+        const 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);
+        const particleIndices = new Float32Array(this._numParticles);
+        for (let i = 0; i < this._numParticles; i++)
+            particleIndices[i] = i;
+        this.particleIndexBuffer = util.createBuffer(gl, particleIndices);
+    }
+    get numParticles() {
+        return this._numParticles;
+    }
+    // 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
+     */
+    setWind(windData) {
+        if (windData === null) {
+            return;
+        }
+        const windDataMeta = this._windDataMeta;
+        const gl = this.gl;
+        this.windData = windData;
+        this.windTexture = util.createTexture(gl, gl.LINEAR, windData.image);
+        const 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();
+        console.log("windData bbox", windData.bbox);
+        const minXY = this._latLongToPixelXY(windDataMeta.bbox[1], windDataMeta.bbox[0]);
+        const 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]
+     */
+    setWindDataWithImageBase64(windData) {
+        const image = util.createImageFromBase64(windData.image);
+        image.onload = () => {
+            windData.image = image;
+            this.setWind(windData);
+        };
+    }
+    /**
+     * @param
+     * @returns
+     */
+    getTexturePointSampler(type = `magnitude`) {
+        if (type == `magnitude`) {
+            if (!this.texturePointSampler) {
+                this._createTexturePointSampler();
+                this._setCoorcinatesDataCalculatorData();
+            }
+            return this.texturePointSampler;
+        }
+        else if (type == `angle`) {
+            if (!this.texturePointSamplerAngle) {
+                this._createTexturePointSamplerAngle();
+                this._setCoorcinatesDataCalculatorData();
+            }
+            return this.texturePointSamplerAngle;
+        }
+        else {
+            throw new Error(`WindPlugin.getTexturePointSampler: type must be either 'magnitude' or 'angle'.`);
+        }
+    }
+    _createTexturePointSamplerAngle() {
+        const { bbox, width, height } = this._windDataMeta;
+        this.texturePointSamplerAngle = new TexturePointSampler(bbox, width, height);
+    }
+    _createTexturePointSampler() {
+        const { bbox, width, height } = this._windDataMeta;
+        this.texturePointSampler = new TexturePointSampler(bbox, width, height);
+    }
+    _setCoorcinatesDataCalculatorData() {
+        if (!this.windData) {
+            return;
+        }
+        if (this.texturePointSamplerAngle) {
+            const angle = imageToRadianAngle(this.windData);
+            this.texturePointSamplerAngle.updateTextureData(0, angle, angle);
+        }
+        if (this.texturePointSampler) {
+            const magnitude = imageToMagnitude(this.windData);
+            this.texturePointSampler.updateTextureData(0, magnitude, magnitude);
+        }
+    }
+    // -----------------------------------------------
+    //             --- inner methods ---
+    // -----------------------------------------------
+    _latLongToPixelXY(latitude, longitude) {
+        return {
+            x: (longitude + 180) / 360,
+            y: (90 - latitude) / 180
+        };
+    }
+    _loadBoundingBoxData(minX, minY, maxX, maxY) {
+        // console.log("minX", minX, "minY", minY, "maxX", maxX, "maxY", maxY)
+        const gl = this.gl;
+        const bboxMatrix = new Float32Array([
+            maxX - minX, 0, 0,
+            0, maxY - minY, 0,
+            minX, minY, 1
+        ]);
+        const 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.
+    _doDraw() {
+        const 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;
+        }
+    }
+    _draw() {
+        const gl = this.gl;
+        this._drawScreen();
+        this._updateParticles();
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+    }
+    // globe calls `draw3D` method on each frame
+    draw3D(projMatrix, modelviewMatrix, transPos) {
+        const 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()) {
+            const 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();
+    }
+    _drawScreen() {
+        const { gl, globe } = this;
+        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
+        const temp = this.backgroundTexture;
+        this.backgroundTexture = this.screenTexture;
+        this.screenTexture = temp;
+    }
+    _drawTexture(texture, opacity) {
+        const gl = this.gl;
+        const 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);
+    }
+    _loadRampMax() {
+        const { gl } = this;
+        const 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);
+    }
+    _drawParticlesSphere() {
+        const { gl, projMatrix, modelviewMatrix, transPos } = this;
+        const 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);
+    }
+    _drawParticlesFlat() {
+        const { gl, transPos, projMatrix, globe } = this;
+        const 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());
+        const { width, height } = globe.api_GetCurrentWorldWH();
+        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
+    setGeometry() {
+        if (this.windData === null) {
+            return;
+        }
+        const { globe, gl } = this;
+        const geometry = globe.api_GetCurrentGeometry();
+        const 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();
+    }
+    _updateParticles() {
+        const gl = this.gl;
+        const 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
+        const temp = this.particleStateTexture0;
+        this.particleStateTexture0 = this.particleStateTexture1;
+        this.particleStateTexture1 = temp;
+    }
+    _resetMachineStates() {
+        const { gl, globe } = this;
+        // gl.disable(gl.DEPTH_TEST);
+        // gl.disable(gl.STENCIL_TEST);
+        gl.activeTexture(gl.TEXTURE0);
+        gl.viewport(0, 0, globe.api_ScrW(), globe.api_ScrH());
+    }
+    _loadHeight() {
+        const { gl, drawSphereProgram } = this;
+        if (gl == null)
+            return;
+        const currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
+        gl.useProgram(drawSphereProgram.program);
+        gl.uniform1f(drawSphereProgram.u_height, this._height);
+        gl.useProgram(currentProgram);
+    }
+    _loadMinMaxSpeed() {
+        const { gl, drawSphereProgram, drawFlatProgram } = this;
+        if (gl == null)
+            return;
+        const 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);
+    }
+    _loadFadeOpacity() {
+        const { gl, screenProgram } = this;
+        if (gl == null) {
+            return;
+        }
+        const currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
+        gl.useProgram(screenProgram.program);
+        gl.uniform1f(screenProgram.u_opacity, this._fadeOpacity);
+        gl.useProgram(currentProgram);
+    }
+    _loadSpeedFactor() {
+        const { gl, globe, updateProgram } = this;
+        if (gl == null) {
+            return;
+        }
+        const 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);
+    }
+    _loadDropRate() {
+        const { gl, updateProgram } = this;
+        if (gl == null) {
+            return;
+        }
+        const currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
+        gl.useProgram(updateProgram.program);
+        gl.uniform1f(updateProgram.u_drop_rate, this._dropRate);
+        gl.useProgram(currentProgram);
+    }
+    _loadDropRateBump() {
+        const { gl, updateProgram } = this;
+        if (gl == null) {
+            return;
+        }
+        const currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
+        gl.useProgram(updateProgram.program);
+        gl.uniform1f(updateProgram.u_drop_rate_bump, this._dropRateBump);
+        gl.useProgram(currentProgram);
+    }
+    _loadBaseOpacity() {
+        const { gl, drawSphereProgram, drawFlatProgram } = this;
+        if (gl == null) {
+            return;
+        }
+        const 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);
+    }
+    _loadPointSize() {
+        const { gl, drawSphereProgram, drawFlatProgram } = this;
+        if (gl == null) {
+            return;
+        }
+        const 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
+    init(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();
+    }
+    resize(a, b) {
+        const { gl, globe } = this;
+        const 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
+    free() {
+        const 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);
+    }
+}