@pirireis/webglobeplugins 0.17.0 → 1.0.2

package/vectorfield/wind/plugin.js

@@ -1,38 +1,60 @@
-/**
- * Author: Toprak Nihat Deniz Ozturk
- */
-import { createImageFromBase64, createProgramWrapper, createTexture, createBuffer, bindAttribute, bindFramebuffer, bindTexture, getColorRamp } from "../../util/webglobjectbuilders";
-import imageToMagnitude, { imageToRadianAngle } from "./imagetovectorfieldandmagnitude";
-import { TexturePointSampler } from "../../heatwave/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
- */
+/**
+ * Author: Toprak Nihat Deniz Ozturk
+ */
+
+
+
+import {
+    createImageFromBase64,
+    createProgramWrapper,
+    createTexture,
+    createBuffer,
+    bindAttribute,
+    bindFramebuffer,
+    bindTexture,
+    getColorRamp
+} from "../../util/webglobjectbuilders";
+import { defaultblendfunction } from "../../util/globe-default-gl-states";
+
+import imageToMagnitude, { imageToRadianAngle } from "./imagetovectorfieldandmagnitude";
+import { TexturePointSampler } from "../../heatwave/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;
 
@@ -43,7 +65,8 @@ 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;
@@ -60,7 +83,8 @@ void main() {
     gl_FragColor = vec4( floor(255.0 * color * u_opacity) / 255.0);
 }
 
-`;
+`;
+
 const updateFrag = `
 precision highp float;
 
@@ -111,7 +135,6 @@ void main() {
 
     // 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
@@ -134,7 +157,9 @@ void main() {
         fract(pos * 255.0),
         floor(pos * 255.0) / 255.0);
 }
-`;
+`;
+
+
 const drawFrag = `precision mediump float;
 
 uniform sampler2D u_wind;
@@ -177,7 +202,9 @@ void main() {
 
     gl_FragColor = texture2D(u_color_ramp, ramp_pos) * u_base_opacity;
 }
-`;
+`;
+
+
 const drawSphereVert = `
 precision mediump float;
 
@@ -239,7 +266,8 @@ void main() {
     gl_Position = uProjectionMatrix * uModelViewMatrix * vec4(pos - uTranslate, 1.0);
     gl_PointSize = u_point_size;
 
-}`;
+}`;
+
 const drawFlatVert = `
 precision mediump float;
 
@@ -289,633 +317,817 @@ void main() {
     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 = createTexture(this.gl, this.gl.LINEAR, 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 = getColorRamp(colors);
-        this.colorRampTexture = 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 = createTexture(gl, gl.NEAREST, particleState, particleRes, particleRes);
-        this.particleStateTexture1 = 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 = 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 = 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 = 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;
-        bindTexture(gl, this.windTexture, 0);
-        bindTexture(gl, this.particleStateTexture0, 1);
-        // draw the screen into a temporary framebuffer to retain it as the background on the next frame
-        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();
-        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);
-        bindAttribute(gl, this.quadBuffer, program.a_pos, 2);
-        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);
-        bindAttribute(gl, this.particleIndexBuffer, program.a_index, 1);
-        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);
-        bindAttribute(gl, this.particleIndexBuffer, program.a_index, 1);
-        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);
-        bindAttribute(gl, this.quadBuffer, program.a_pos, 2);
-        gl.uniform1i(program.u_wind, 0);
-        gl.uniform1i(program.u_particles, 1);
-        bindAttribute(gl, this.quadBuffer, program.a_pos, 2);
-        gl.uniform1f(program.u_rand_seed, Math.random());
-        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 = createProgramWrapper(gl, drawSphereVert, drawFrag);
-        this.screenProgram = createProgramWrapper(gl, quadVert, screenFrag);
-        this.updateProgram = createProgramWrapper(gl, quadVert, updateFrag);
-        this.drawFlatProgram = createProgramWrapper(gl, drawFlatVert, drawFrag);
-        this.quadBuffer = 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 = createTexture(gl, gl.LINEAR, emptyPixels, globe.api_ScrW(), globe.api_ScrH());
-        this.screenTexture = 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);
-    }
-}
+}`;
+
+
+
+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 = createTexture(this.gl, this.gl.LINEAR, 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 = getColorRamp(colors);
+        this.colorRampTexture = 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 = createTexture(gl, gl.NEAREST, particleState, particleRes, particleRes);
+        this.particleStateTexture1 = 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 = 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 = 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 = 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;
+        if (this._doDraw()) {
+            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);
+            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);
+
+
+            // 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;
+
+        bindTexture(gl, this.windTexture, 0);
+        bindTexture(gl, this.particleStateTexture0, 1);
+
+        // draw the screen into a temporary framebuffer to retain it as the background on the next frame
+        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();
+
+        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);
+
+        bindAttribute(gl, this.quadBuffer, program.a_pos, 2);
+        bindTexture(gl, texture, 2);
+        gl.uniform1i(program.u_screen, 2);
+        gl.uniform1f(program.u_opacity, opacity);
+
+        gl.drawArrays(gl.TRIANGLES, 0, 6);
+
+
+        gl.bindTexture(gl.TEXTURE_2D, null);
+        gl.activeTexture(gl.TEXTURE0);
+
+    }
+
+    _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);
+
+        bindAttribute(gl, this.particleIndexBuffer, program.a_index, 1);
+        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);
+
+        bindAttribute(gl, this.particleIndexBuffer, program.a_index, 1);
+        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.disable(gl.BLEND);
+
+        gl.useProgram(program.program);
+        gl.viewport(0, 0, this.particleStateResolution, this.particleStateResolution);
+
+        bindAttribute(gl, this.quadBuffer, program.a_pos, 2);
+
+        gl.uniform1i(program.u_wind, 0);
+        gl.uniform1i(program.u_particles, 1);
+
+        bindAttribute(gl, this.quadBuffer, program.a_pos, 2);
+
+        gl.uniform1f(program.u_rand_seed, Math.random());
+
+        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;
+
+        // Add this line to restore the viewport
+
+        gl.viewport(0, 0, this.globe.api_ScrW(), this.globe.api_ScrH());
+    }
+
+
+
+    _resetMachineStates() {
+        const { gl, globe } = this;
+
+        // Unbind all textures
+        for (let i = 0; i < 3; i++) {
+            gl.activeTexture(gl.TEXTURE0 + i);
+            gl.bindTexture(gl.TEXTURE_2D, null);
+        }
+        gl.activeTexture(gl.TEXTURE0);
+
+        // Unbind buffers
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
+        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
+        gl.bindVertexArray(null); // Add this line
+        gl.enable(gl.BLEND);
+        defaultblendfunction(gl);
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+        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 = createProgramWrapper(gl, drawSphereVert, drawFrag);
+        this.screenProgram = createProgramWrapper(gl, quadVert, screenFrag);
+        this.updateProgram = createProgramWrapper(gl, quadVert, updateFrag);
+
+        this.drawFlatProgram = createProgramWrapper(gl, drawFlatVert, drawFrag);
+        this.quadBuffer = 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 = createTexture(gl, gl.LINEAR, emptyPixels, globe.api_ScrW(), globe.api_ScrH());
+        this.screenTexture = 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);
+
+    }
+}
+