@pirireis/webglobeplugins 0.9.6 → 0.9.7

package/wind/plugin.js

@@ -1,1057 +0,0 @@
-/**
- * Author: Toprak Nihat Deniz Ozturk
- */
-
-
-import * as util from "../util";
-import imageToMagnitude from "./imagetovectorfieldandmagnitude";
-import { PointCoordinatesDataCalculator } from "../util";
-/**
- * Shader Dökümanı:
- * * Vektör alan haritasında kaçış değeri
- * texture2D(u_wind, pos).rg == vec2(0.0, 0.0) değerini kaçış için kullandım.
- * Deniz rüzgarları gibi haritalarda kara için rg değerleri 0.0 oluyor.
- * Gerçek bir partikülün rg == vec2(0.0, 0.0) değerinde olma olasılığı düşük.
- * Hem yatay ve hem dikey boyutta en düşük değere sahip olmalı. 
- *
-
- * 
- */
-
-
-/**
- * @typedef {Object} WindData for setWindDataWithImageBase64
- * @property {string} image - base64 encoded image
- * @property {number} width - image width
- * @property {number} height - image height
- * @property {number} uMin - minimum u value
- * @property {number} vMin - minimum v value
- * @property {number} uMax - maximum u value
- * @property {number} vMax - maximum v value
- * @property {Array} bbox - bounding box [minLon, minLat, maxLon, maxLat]
- * @property {LegendData} legendData - legend data
-
- */
-
-
-/**
- * @typedef {Object} LegendData
- * @property {Array} thresholds - list of integers
- * @property {Array} values - list of colors
- */
-
-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
-    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 ) {
-        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);
-    
-
-    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);
-
-    if ( v_particle_pos.y < 0.0265 || v_particle_pos.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, v_particle_pos.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();
-        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);
-        }
-    }
-
-    getPointCoordinatesDataCalculator() {
-        if (!this.coordinatesDataCalculator) this._createPointCoordinatesDataCalculator();
-        return this.coordinatesDataCalculator;
-    }
-
-
-    _createPointCoordinatesDataCalculator() {
-        const { bbox, width, height } = this._windDataMeta;
-        this.coordinatesDataCalculator = new PointCoordinatesDataCalculator(bbox, width, height);
-        this._setCoorcinatesDataCalculatorData();
-    }
-
-
-    _setCoorcinatesDataCalculatorData() {
-        if (!this.windData || !this.coordinatesDataCalculator) {
-            return;
-        }
-        const magnitude = imageToMagnitude(this.windData);
-        this.coordinatesDataCalculator.updateData(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);
-
-    }
-}
-