@pirireis/webglobeplugins 1.0.2 → 1.0.3

package/vectorfield/waveparticles/{plugin.ts → plugin.js}

@@ -1,506 +1,415 @@
-import { BBOXGlobeShell } from "../../semiplugins/shell/bbox-renderer/index";
-import { defaultblendfunction } from "../../util/globe-default-gl-states";
-import { PingPongBufferManager } from "../../programs/vectorfields/pingpongbuffermanager";
-import { pixelBasedMoveProgramCache, MoveParticalProgram } from "../../programs/vectorfields/logics/pixelbased";
-import { drawRectangleParticlesProgramCache, DrawRectangleParticleProgram } from "../../programs/vectorfields/logics/drawrectangleparticles";
-import { FadeAwayProgramCache, FadeAwayProgram } from "../../programs/helpers/fadeaway";
-import { ParticleUBO } from "../../programs/vectorfields/logics/particle-ubo";
-import { Globe, UBOHandler } from "../../types";
-
-/**
- * STEPS:
- * 1. move particle | buffers: read b1 write b2 | swap buffers b1 <-> b2
- * 2. draw particles | read b1 to drawTexture1 |
- * 3. globe shell drawTexture1
- * 4. fade drawTexture1 to drawTexture2 | swap textures
- */
-
-const MAX_PIXELS_ON_DIMENSION = 2200;
-
-
-
-export interface ParticalPluginOptions {
-    dataWidth: number;
-    dataHeight: number;
-    fadeOpacity: number;
-    opacity: number;
-    speed: number;
-    dropRate: number;
-    height: number;
-    minLon: number;
-    minLat: number;
-    maxLon: number;
-    maxLat: number;
-    particleCount: number;
-    flipY: boolean;
-    drawTextureMaxPixelOnDimension: number;
-    useColorTexture: boolean;
-    initialColorData: Uint8Array | Uint8ClampedArray | null;
-    useSpeedTexture: boolean;
-    tailSize: number;
-    wingSize: number;
-    initialSpeedTexture: Float32Array | null;
-    minSpeedThreshold: number;
-    maxSpeedThreshold: number;
-}
-
-interface BBoxParameters {
-    minLon: number;
-    maxLon: number;
-    minLat: number;
-    maxLat: number;
-}
-
-interface DrawTextureResolution {
-    width: number;
-    height: number;
-}
-
-interface SetVectorFieldDataOptions {
-    dataWidth?: number | null;
-    dataHeight?: number | null;
-    flipY?: boolean;
-}
-
-export default class Plugin {
-    id: string;
-    options: ParticalPluginOptions;
-    globe!: Globe;
-    gl!: WebGL2RenderingContext;
-    moveParticle!: MoveParticalProgram;
-    drawParticle!: DrawRectangleParticleProgram;
-    bufferManager!: PingPongBufferManager;
-    _rgVectorFieldTexture!: WebGLTexture;
-    globeShellWiggle!: BBOXGlobeShell;
-    waveUbo!: UBOHandler;
-    fadeAway!: FadeAwayProgram;
-    _drawTextureResolution: DrawTextureResolution;
-    _frameBuffer!: WebGLFramebuffer;
-    _globeshellparameters: BBoxParameters;
-    _stepIndex: number;
-    _fullCycleStepCount: number;
-    _isFreed: boolean;
-    _drawTextures: WebGLTexture[];
-    ____drawIndex: number;
-    __data: Float32Array | null = null;
-    _colorFieldTexture: WebGLTexture | null = null;
-    _initialColorFieldData: Uint8Array | Uint8ClampedArray | null = null;
-    _speedFieldTexture: WebGLTexture | null = null;
-
-    _initialSpeedFieldData: Float32Array | null = null;
-    constructor(
-        id: string,
-        options: Partial<ParticalPluginOptions>
-    ) {
-        this.id = id;
-        this.options = {
-            tailSize: options.tailSize || 1.0,
-            wingSize: options.wingSize || 7.0,
-            dataWidth: options.dataWidth || 256,
-            dataHeight: options.dataHeight || 256,
-            fadeOpacity: options.fadeOpacity ?? 0.83,
-            opacity: options.opacity ?? 0.75,
-            speed: options.speed ?? 0.6,
-            dropRate: options.dropRate ?? 0.007,
-            height: options.height ?? 0,
-            minLon: options.minLon ?? -180,
-            minLat: options.minLat ?? -90,
-            maxLon: options.maxLon ?? 180,
-            maxLat: options.maxLat ?? 90,
-            particleCount: options.particleCount ?? 8000,
-            flipY: options.flipY ?? true,
-            drawTextureMaxPixelOnDimension: options.drawTextureMaxPixelOnDimension ?? MAX_PIXELS_ON_DIMENSION,
-            useColorTexture: options.useColorTexture ?? false,
-            initialColorData: options.initialColorData ?? null,
-            useSpeedTexture: options.useSpeedTexture ?? false,
-            initialSpeedTexture: options.initialSpeedTexture ?? null,
-            minSpeedThreshold: options.minSpeedThreshold ?? 0.0,
-            maxSpeedThreshold: options.maxSpeedThreshold ?? 150.9,
-        };
-        console.log("WaveParticle options:", this.options);
-        this._drawTextureResolution = {} as DrawTextureResolution;
-        this._globeshellparameters = {
-            minLon: this.options.minLon!,
-            maxLon: this.options.maxLon!,
-            minLat: this.options.minLat!,
-            maxLat: this.options.maxLat!,
-        };
-        this._stepIndex = 0;
-        this._fullCycleStepCount = 3;
-        this._isFreed = false;
-        this._drawTextures = [];
-        this.____drawIndex = 0;
-        this._initialColorFieldData = this.options.initialColorData ?? null;
-        this._initialSpeedFieldData = this.options.initialSpeedTexture ?? null;
-    }
-
-    init(globe: any, gl: WebGL2RenderingContext): void {
-        this.globe = globe;
-        this.gl = gl;
-        this.moveParticle = pixelBasedMoveProgramCache.getProgram(gl);
-        this.drawParticle = drawRectangleParticlesProgramCache.getProgram(gl);
-
-        this.fadeAway = FadeAwayProgramCache.get(gl);
-
-        this.globeShellWiggle = new BBOXGlobeShell(gl, globe, this._globeshellparameters);
-        const inPositionLocation = this.moveParticle.getInPositionLocation();
-        this.bufferManager = new PingPongBufferManager(gl, this.options.particleCount,
-            inPositionLocation);
-        this._rgVectorFieldTexture = this._createRGTexture()!;
-
-        this.waveUbo = ParticleUBO.createUBO(gl);
-        if (this.options.useColorTexture) {
-            this.waveUbo.updateSingle("use_color_field", new Float32Array([1]));
-            if (this._initialColorFieldData) {
-                this.setColorField(this._initialColorFieldData);
-                this._initialColorFieldData = null;
-            } else {
-                console.warn("useColorTexture is true but initialColorData is null");
-            }
-        }
-        if (this.options.useSpeedTexture) {
-            this.waveUbo.updateSingle("use_speed_field", new Float32Array([1]));
-            console.log("use speed texture");
-            if (this._initialSpeedFieldData) {
-                this.setSpeedField(this._initialSpeedFieldData);
-                this._initialSpeedFieldData = null;
-            } else {
-                console.warn("useSpeedTexture is true but initialSpeedTexture is null");
-            }
-        }
-
-
-        this._drawTextures = [this._createDrawTexture(), this._createDrawTexture()] as [WebGLTexture, WebGLTexture];
-        this._frameBuffer = gl.createFramebuffer();
-        this.setBBox(this._globeshellparameters);
-        this.setOpacity(this.options.opacity!);
-        this.setParticleDimensions(this.options.tailSize, this.options.wingSize);
-        this.setParticleSpeed(this.options.speed!);
-        this.setDropRate(this.options.dropRate!);
-        this.setHeight(this.options.height!);
-        // ensure speed thresholds are applied to UBO on init
-        this.setSpeedThresholds(this.options.minSpeedThreshold!, this.options.maxSpeedThreshold!);
-        this.____drawIndex = 0;
-    }
-
-    draw3D(): void {
-        if (this._isFreed) return;
-        const { gl, moveParticle, drawParticle, bufferManager, globeShellWiggle, waveUbo, fadeAway, _rgVectorFieldTexture } = this;
-
-        if (!gl || !bufferManager || !globeShellWiggle || !waveUbo || !fadeAway || !_rgVectorFieldTexture) return;
-
-        gl.disable(gl.DEPTH_TEST);
-        switch (this._stepIndex) {
-            case 0:
-                this.waveUbo.updateSingle("random_seed", new Float32Array([Math.random()]));
-                moveParticle.move(bufferManager, _rgVectorFieldTexture, waveUbo);
-                bufferManager.swap();
-                break;
-            case 1:
-                this.____drawIndex = 1 - this.____drawIndex;
-                gl.viewport(0, 0, this._drawTextureResolution.width, this._drawTextureResolution.height);
-                gl.bindFramebuffer(gl.FRAMEBUFFER, this._frameBuffer);
-                gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this._drawTextures[this.____drawIndex], 0);
-                drawParticle.draw(bufferManager, _rgVectorFieldTexture, waveUbo,
-                    this._colorFieldTexture,
-                    this._speedFieldTexture);
-                gl.bindFramebuffer(gl.FRAMEBUFFER, null);
-                gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
-                break;
-            case 2:
-                gl.viewport(0, 0, this._drawTextureResolution.width, this._drawTextureResolution.height);
-                gl.bindFramebuffer(gl.FRAMEBUFFER, this._frameBuffer);
-                gl.enable(gl.BLEND);
-                gl.blendFunc(gl.ONE, gl.ZERO);
-                gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this._drawTextures[1 - this.____drawIndex], 0);
-                fadeAway.draw(this._drawTextures[this.____drawIndex], this.options.fadeOpacity!);
-                gl.bindFramebuffer(gl.FRAMEBUFFER, null);
-                defaultblendfunction(gl);
-                gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
-                break;
-        }
-        globeShellWiggle.setTexture(this._drawTextures[this.____drawIndex]);
-        globeShellWiggle.draw();
-        this._step();
-        gl.enable(gl.DEPTH_TEST);
-    }
-
-    setCycleStepCount(value: number): void {
-        if (value < 3) {
-            this._fullCycleStepCount = 3;
-        }
-        this._fullCycleStepCount = value;
-    }
-
-    free(): void {
-        if (this._isFreed) {
-            console.warn("WaveParticle plugin is already freed");
-            return;
-        }
-        this._isFreed = true;
-        const { gl, globeShellWiggle, _rgVectorFieldTexture, bufferManager, waveUbo, _drawTextures, _frameBuffer } = this;
-
-        if (!gl) return;
-
-        FadeAwayProgramCache.release(gl);
-        globeShellWiggle?.free();
-        if (_rgVectorFieldTexture) gl.deleteTexture(_rgVectorFieldTexture);
-        pixelBasedMoveProgramCache.releaseProgram(gl);
-        drawRectangleParticlesProgramCache.releaseProgram(gl);
-        bufferManager?.free();
-        waveUbo?.free();
-        _drawTextures.forEach(texture => gl.deleteTexture(texture));
-        if (_frameBuffer) gl.deleteFramebuffer(_frameBuffer);
-
-        if (this._colorFieldTexture) {
-            gl.deleteTexture(this._colorFieldTexture);
-            this._colorFieldTexture = null;
-        }
-        if (this._speedFieldTexture) {
-            gl.deleteTexture(this._speedFieldTexture);
-            this._speedFieldTexture = null;
-        }
-    }
-
-    setParticleCount(value: number): void {
-        this.options.particleCount = value;
-        this.bufferManager?.setParticleCount(value);
-    }
-
-    setVectorFieldData(data: Float32Array, { dataWidth = null, dataHeight = null, flipY }: SetVectorFieldDataOptions = {}): void {
-        if (dataWidth !== null && dataHeight !== null) {
-            this.options.dataWidth = dataWidth;
-            this.options.dataHeight = dataHeight;
-        }
-        if (flipY !== undefined) {
-            this.options.flipY = flipY;
-        }
-        this.__data = data;
-        const { gl } = this;
-
-        if (!gl || !this._rgVectorFieldTexture) return;
-        console.log("flipY:", this.options.flipY);
-        gl.bindTexture(gl.TEXTURE_2D, this._rgVectorFieldTexture);
-        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, this.options.flipY!);
-        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RG32F, this.options.dataWidth, this.options.dataHeight, 0, gl.RG, gl.FLOAT, data);
-        gl.bindTexture(gl.TEXTURE_2D, null);
-        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
-    }
-
-    setHeight(value: number): void {
-        this.globeShellWiggle?.setHeight(value);
-    }
-
-    setDropRate(value: number): void {
-        this.waveUbo?.updateSingle("drop_rate", new Float32Array([value]));
-    }
-
-    setDrawTextureMaxPixelOnDimension(value: number): void {
-        this.options.drawTextureMaxPixelOnDimension = value;
-        this._drawTextureResolution = this._drawTextureSizeFromBbox(this._globeshellparameters);
-        this.waveUbo?.updateSingle("draw_texture_size", new Float32Array([this._drawTextureResolution.width, this._drawTextureResolution.height]));
-        this._drawTextures = [this._createDrawTexture(), this._createDrawTexture()] as [WebGLTexture, WebGLTexture];
-    }
-
-    setParticleSpeed(value: number): void {
-        if (typeof value !== 'number' || value <= 0) {
-            console.error("Particle speed must be a positive number");
-            return;
-        }
-        if (value > 100) {
-            console.warn("Particle speed is too high, it may cause performance issues");
-        }
-        this.waveUbo?.updateSingle("range", new Float32Array([value]));
-    }
-
-    setFadeOpacity(value: number): void {
-        if (typeof value !== 'number' || value < 0 || value > 1) {
-            console.error("Fade opacity must be a number between 0 and 1");
-            return;
-        }
-        this.options.fadeOpacity = value;
-    }
-
-    setOpacity(value: number): void {
-        if (typeof value !== 'number' || value < 0 || value > 1) {
-            console.error("Opacity must be a number between 0 and 1");
-            return;
-        }
-        this.globeShellWiggle?.setOpacity(value);
-    }
-
-    setParticleDimensions(tail: number, wing: number): void {
-        if (0 < tail && 0 < wing) {
-            this.options.tailSize = tail;
-            this.options.wingSize = wing;
-            this.waveUbo?.updateSingle("tail_wing_base_limp", new Float32Array([tail, wing]));
-        } else {
-            console.error("tail and wing must be positive numbers");
-            return;
-        }
-    }
-
-    setParticleColor(color: number[]): void {
-        if (color.length !== 3) {
-            console.error("color must be an array of rgb elements");
-            return;
-        }
-        this.waveUbo?.updateSingle("color", new Float32Array(color));
-    }
-
-
-    setColorField(data: Uint8Array | Uint8ClampedArray): void {
-        const { gl } = this;
-        if (!gl) return;
-        if (this.options.useColorTexture === false) {
-            console.warn("Color texture is not enabled.");
-            return;
-        }
-        if (!this._colorFieldTexture) {
-            this._colorFieldTexture = gl.createTexture();
-        }
-        if (data.length !== this.options.dataWidth * this.options.dataHeight * 4) {
-            console.error("Color field data length does not match the specified dataWidth and dataHeight.");
-            return;
-        }
-        gl.bindTexture(gl.TEXTURE_2D, this._colorFieldTexture);
-        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, this.options.flipY!);
-        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, this.options.dataWidth, this.options.dataHeight, 0, gl.RGBA, gl.UNSIGNED_BYTE, data);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
-        gl.bindTexture(gl.TEXTURE_2D, null);
-    }
-
-
-    setSpeedField(data: Float32Array): void {
-        const { gl } = this;
-        if (!gl) return;
-        if (!this.options.useSpeedTexture) {
-            console.warn("Speed texture is not enabled.");
-            return;
-        }
-        if (!this._speedFieldTexture) {
-            this._speedFieldTexture = gl.createTexture();
-        }
-        if (data.length !== this.options.dataWidth * this.options.dataHeight) {
-            console.error("Speed field data length does not match the specified dataWidth and dataHeight.");
-            return;
-        }
-
-        console.log(data)
-
-        gl.bindTexture(gl.TEXTURE_2D, this._speedFieldTexture);
-        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, this.options.flipY!);
-        gl.texImage2D(gl.TEXTURE_2D, 0, gl.R32F, this.options.dataWidth, this.options.dataHeight, 0, gl.RED, gl.FLOAT, data);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
-        gl.bindTexture(gl.TEXTURE_2D, null);
-    }
-
-    /**
-     * Update speed thresholds used by shaders to cull particles by magnitude
-     */
-    setMinSpeedThreshold(value: number): void {
-        this.options.minSpeedThreshold = value;
-        this.waveUbo?.updateSingle("min_speed_threshold", new Float32Array([value]));
-    }
-
-    setMaxSpeedThreshold(value: number): void {
-        this.options.maxSpeedThreshold = value;
-        this.waveUbo?.updateSingle("max_speed_threshold", new Float32Array([value]));
-    }
-
-    setSpeedThresholds(min: number, max: number): void {
-        this.setMinSpeedThreshold(min);
-        this.setMaxSpeedThreshold(max);
-    }
-
-
-    setBBox({ minLon, minLat, maxLon, maxLat }: BBoxParameters): void {
-        this._globeshellparameters = { minLon, minLat, maxLon, maxLat };
-        this.globeShellWiggle?.setBBox({ minLon, minLat, maxLon, maxLat });
-        this._drawTextureResolution = this._drawTextureSizeFromBbox({ minLon, minLat, maxLon, maxLat });
-        this.waveUbo?.updateSingle("draw_texture_size", new Float32Array([this._drawTextureResolution.width, this._drawTextureResolution.height]));
-        this._drawTextures = [this._createDrawTexture(), this._createDrawTexture()] as [WebGLTexture, WebGLTexture];
-    }
-
-    __readAndWriteTextureData(): void {
-        const { gl, _rgVectorFieldTexture } = this;
-
-        if (!gl || !_rgVectorFieldTexture) return;
-
-        gl.bindTexture(gl.TEXTURE_2D, _rgVectorFieldTexture);
-        const textureData = new Float32Array(this.options.dataWidth * this.options.dataHeight * 2);
-        gl.readPixels(0, 0, this.options.dataWidth, this.options.dataHeight, gl.RG, gl.FLOAT, textureData);
-        gl.bindTexture(gl.TEXTURE_2D, null);
-
-        gl.deleteTexture(this._rgVectorFieldTexture);
-
-        this._rgVectorFieldTexture = this._createRGTexture()!;
-        this.setVectorFieldData(textureData);
-    }
-
-    _drawTextureSizeFromBbox({ minLon, minLat, maxLon, maxLat }: BBoxParameters): DrawTextureResolution {
-        let horizon: number;
-        if (minLon > 0 && maxLon < 0) {
-            horizon = 360 - minLon + maxLon;
-        } else {
-            horizon = maxLon - minLon;
-        }
-        const vertical = maxLat - minLat;
-        let width: number, height: number;
-        if (horizon > vertical) {
-            width = this.options.drawTextureMaxPixelOnDimension!;
-            height = Math.floor(this.options.drawTextureMaxPixelOnDimension! * vertical / horizon);
-        } else {
-            height = this.options.drawTextureMaxPixelOnDimension!;
-            width = Math.floor(this.options.drawTextureMaxPixelOnDimension! * horizon / vertical);
-        }
-        return {
-            width,
-            height
-        };
-    }
-
-    _createRGTexture(): WebGLTexture | null {
-        const { gl } = this;
-
-        if (!gl) return null;
-
-        const texture = gl.createTexture();
-        gl.bindTexture(gl.TEXTURE_2D, texture);
-        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RG32F, this.options.dataWidth, this.options.dataHeight, 0, gl.RG, gl.FLOAT, null);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
-
-        gl.bindTexture(gl.TEXTURE_2D, null);
-        return texture;
-    }
-
-    _createDrawTexture(): WebGLTexture | null {
-        const gl = this.gl;
-
-        if (!gl) return null;
-
-        const texture = gl.createTexture();
-        gl.bindTexture(gl.TEXTURE_2D, texture);
-        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, this._drawTextureResolution.width, this._drawTextureResolution.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
-
-        gl.bindTexture(gl.TEXTURE_2D, null);
-        return texture;
-    }
-
-    _step(): void {
-        this._stepIndex = (this._stepIndex + 1) % this._fullCycleStepCount;
-    }
-}
+import { BBOXGlobeShell } from "../../semiplugins/shell/bbox-renderer/index";
+import { defaultblendfunction } from "../../util/globe-default-gl-states";
+import { PingPongBufferManager } from "../../programs/vectorfields/pingpongbuffermanager";
+import { pixelBasedMoveProgramCache } from "../../programs/vectorfields/logics/pixelbased";
+import { drawRectangleParticlesProgramCache } from "../../programs/vectorfields/logics/drawrectangleparticles";
+import { FadeAwayProgramCache } from "../../programs/helpers/fadeaway";
+import { ParticleUBO } from "../../programs/vectorfields/logics/particle-ubo";
+/**
+ * STEPS:
+ * 1. move particle | buffers: read b1 write b2 | swap buffers b1 <-> b2
+ * 2. draw particles | read b1 to drawTexture1 |
+ * 3. globe shell drawTexture1
+ * 4. fade drawTexture1 to drawTexture2 | swap textures
+ */
+const MAX_PIXELS_ON_DIMENSION = 2200;
+export default class Plugin {
+    id;
+    options;
+    globe;
+    gl;
+    moveParticle;
+    drawParticle;
+    bufferManager;
+    _rgVectorFieldTexture;
+    globeShellWiggle;
+    waveUbo;
+    fadeAway;
+    _drawTextureResolution;
+    _frameBuffer;
+    _globeshellparameters;
+    _stepIndex;
+    _fullCycleStepCount;
+    _isFreed;
+    _drawTextures;
+    ____drawIndex;
+    __data = null;
+    _colorFieldTexture = null;
+    _initialColorFieldData = null;
+    _speedFieldTexture = null;
+    _initialSpeedFieldData = null;
+    constructor(id, options) {
+        this.id = id;
+        this.options = {
+            tailSize: options.tailSize || 1.0,
+            wingSize: options.wingSize || 7.0,
+            dataWidth: options.dataWidth || 256,
+            dataHeight: options.dataHeight || 256,
+            fadeOpacity: options.fadeOpacity ?? 0.83,
+            opacity: options.opacity ?? 0.75,
+            speed: options.speed ?? 0.6,
+            dropRate: options.dropRate ?? 0.007,
+            height: options.height ?? 0,
+            minLon: options.minLon ?? -180,
+            minLat: options.minLat ?? -90,
+            maxLon: options.maxLon ?? 180,
+            maxLat: options.maxLat ?? 90,
+            particleCount: options.particleCount ?? 8000,
+            flipY: options.flipY ?? true,
+            drawTextureMaxPixelOnDimension: options.drawTextureMaxPixelOnDimension ?? MAX_PIXELS_ON_DIMENSION,
+            useColorTexture: options.useColorTexture ?? false,
+            initialColorData: options.initialColorData ?? null,
+            useSpeedTexture: options.useSpeedTexture ?? false,
+            initialSpeedTexture: options.initialSpeedTexture ?? null,
+            minSpeedThreshold: options.minSpeedThreshold ?? 0.0,
+            maxSpeedThreshold: options.maxSpeedThreshold ?? 150.9,
+        };
+        console.log("WaveParticle options:", this.options);
+        this._drawTextureResolution = {};
+        this._globeshellparameters = {
+            minLon: this.options.minLon,
+            maxLon: this.options.maxLon,
+            minLat: this.options.minLat,
+            maxLat: this.options.maxLat,
+        };
+        this._stepIndex = 0;
+        this._fullCycleStepCount = 3;
+        this._isFreed = false;
+        this._drawTextures = [];
+        this.____drawIndex = 0;
+        this._initialColorFieldData = this.options.initialColorData ?? null;
+        this._initialSpeedFieldData = this.options.initialSpeedTexture ?? null;
+    }
+    init(globe, gl) {
+        this.globe = globe;
+        this.gl = gl;
+        this.moveParticle = pixelBasedMoveProgramCache.getProgram(gl);
+        this.drawParticle = drawRectangleParticlesProgramCache.getProgram(gl);
+        this.fadeAway = FadeAwayProgramCache.get(gl);
+        this.globeShellWiggle = new BBOXGlobeShell(gl, globe, this._globeshellparameters);
+        const inPositionLocation = this.moveParticle.getInPositionLocation();
+        this.bufferManager = new PingPongBufferManager(gl, this.options.particleCount, inPositionLocation);
+        this._rgVectorFieldTexture = this._createRGTexture();
+        this.waveUbo = ParticleUBO.createUBO(gl);
+        if (this.options.useColorTexture) {
+            this.waveUbo.updateSingle("use_color_field", new Float32Array([1]));
+            if (this._initialColorFieldData) {
+                this.setColorField(this._initialColorFieldData);
+                this._initialColorFieldData = null;
+            }
+            else {
+                console.warn("useColorTexture is true but initialColorData is null");
+            }
+        }
+        if (this.options.useSpeedTexture) {
+            this.waveUbo.updateSingle("use_speed_field", new Float32Array([1]));
+            console.log("use speed texture");
+            if (this._initialSpeedFieldData) {
+                this.setSpeedField(this._initialSpeedFieldData);
+                this._initialSpeedFieldData = null;
+            }
+            else {
+                console.warn("useSpeedTexture is true but initialSpeedTexture is null");
+            }
+        }
+        this._drawTextures = [this._createDrawTexture(), this._createDrawTexture()];
+        this._frameBuffer = gl.createFramebuffer();
+        this.setBBox(this._globeshellparameters);
+        this.setOpacity(this.options.opacity);
+        this.setParticleDimensions(this.options.tailSize, this.options.wingSize);
+        this.setParticleSpeed(this.options.speed);
+        this.setDropRate(this.options.dropRate);
+        this.setHeight(this.options.height);
+        // ensure speed thresholds are applied to UBO on init
+        this.setSpeedThresholds(this.options.minSpeedThreshold, this.options.maxSpeedThreshold);
+        this.____drawIndex = 0;
+    }
+    draw3D() {
+        if (this._isFreed)
+            return;
+        const { gl, moveParticle, drawParticle, bufferManager, globeShellWiggle, waveUbo, fadeAway, _rgVectorFieldTexture } = this;
+        if (!gl || !bufferManager || !globeShellWiggle || !waveUbo || !fadeAway || !_rgVectorFieldTexture)
+            return;
+        gl.disable(gl.DEPTH_TEST);
+        switch (this._stepIndex) {
+            case 0:
+                this.waveUbo.updateSingle("random_seed", new Float32Array([Math.random()]));
+                moveParticle.move(bufferManager, _rgVectorFieldTexture, waveUbo);
+                bufferManager.swap();
+                break;
+            case 1:
+                this.____drawIndex = 1 - this.____drawIndex;
+                gl.viewport(0, 0, this._drawTextureResolution.width, this._drawTextureResolution.height);
+                gl.bindFramebuffer(gl.FRAMEBUFFER, this._frameBuffer);
+                gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this._drawTextures[this.____drawIndex], 0);
+                drawParticle.draw(bufferManager, _rgVectorFieldTexture, waveUbo, this._colorFieldTexture, this._speedFieldTexture);
+                gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+                gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
+                break;
+            case 2:
+                gl.viewport(0, 0, this._drawTextureResolution.width, this._drawTextureResolution.height);
+                gl.bindFramebuffer(gl.FRAMEBUFFER, this._frameBuffer);
+                gl.enable(gl.BLEND);
+                gl.blendFunc(gl.ONE, gl.ZERO);
+                gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this._drawTextures[1 - this.____drawIndex], 0);
+                fadeAway.draw(this._drawTextures[this.____drawIndex], this.options.fadeOpacity);
+                gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+                defaultblendfunction(gl);
+                gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
+                break;
+        }
+        globeShellWiggle.setTexture(this._drawTextures[this.____drawIndex]);
+        globeShellWiggle.draw();
+        this._step();
+        gl.enable(gl.DEPTH_TEST);
+    }
+    setCycleStepCount(value) {
+        if (value < 3) {
+            this._fullCycleStepCount = 3;
+        }
+        this._fullCycleStepCount = value;
+    }
+    free() {
+        if (this._isFreed) {
+            console.warn("WaveParticle plugin is already freed");
+            return;
+        }
+        this._isFreed = true;
+        const { gl, globeShellWiggle, _rgVectorFieldTexture, bufferManager, waveUbo, _drawTextures, _frameBuffer } = this;
+        if (!gl)
+            return;
+        FadeAwayProgramCache.release(gl);
+        globeShellWiggle?.free();
+        if (_rgVectorFieldTexture)
+            gl.deleteTexture(_rgVectorFieldTexture);
+        pixelBasedMoveProgramCache.releaseProgram(gl);
+        drawRectangleParticlesProgramCache.releaseProgram(gl);
+        bufferManager?.free();
+        waveUbo?.free();
+        _drawTextures.forEach(texture => gl.deleteTexture(texture));
+        if (_frameBuffer)
+            gl.deleteFramebuffer(_frameBuffer);
+        if (this._colorFieldTexture) {
+            gl.deleteTexture(this._colorFieldTexture);
+            this._colorFieldTexture = null;
+        }
+        if (this._speedFieldTexture) {
+            gl.deleteTexture(this._speedFieldTexture);
+            this._speedFieldTexture = null;
+        }
+    }
+    setParticleCount(value) {
+        this.options.particleCount = value;
+        this.bufferManager?.setParticleCount(value);
+    }
+    setVectorFieldData(data, { dataWidth = null, dataHeight = null, flipY } = {}) {
+        if (dataWidth !== null && dataHeight !== null) {
+            this.options.dataWidth = dataWidth;
+            this.options.dataHeight = dataHeight;
+        }
+        if (flipY !== undefined) {
+            this.options.flipY = flipY;
+        }
+        this.__data = data;
+        const { gl } = this;
+        if (!gl || !this._rgVectorFieldTexture)
+            return;
+        console.log("flipY:", this.options.flipY);
+        gl.bindTexture(gl.TEXTURE_2D, this._rgVectorFieldTexture);
+        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, this.options.flipY);
+        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RG32F, this.options.dataWidth, this.options.dataHeight, 0, gl.RG, gl.FLOAT, data);
+        gl.bindTexture(gl.TEXTURE_2D, null);
+        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
+    }
+    setHeight(value) {
+        this.globeShellWiggle?.setHeight(value);
+    }
+    setDropRate(value) {
+        this.waveUbo?.updateSingle("drop_rate", new Float32Array([value]));
+    }
+    setDrawTextureMaxPixelOnDimension(value) {
+        this.options.drawTextureMaxPixelOnDimension = value;
+        this._drawTextureResolution = this._drawTextureSizeFromBbox(this._globeshellparameters);
+        this.waveUbo?.updateSingle("draw_texture_size", new Float32Array([this._drawTextureResolution.width, this._drawTextureResolution.height]));
+        this._drawTextures = [this._createDrawTexture(), this._createDrawTexture()];
+    }
+    setParticleSpeed(value) {
+        if (typeof value !== 'number' || value <= 0) {
+            console.error("Particle speed must be a positive number");
+            return;
+        }
+        if (value > 100) {
+            console.warn("Particle speed is too high, it may cause performance issues");
+        }
+        this.waveUbo?.updateSingle("range", new Float32Array([value]));
+    }
+    setFadeOpacity(value) {
+        if (typeof value !== 'number' || value < 0 || value > 1) {
+            console.error("Fade opacity must be a number between 0 and 1");
+            return;
+        }
+        this.options.fadeOpacity = value;
+    }
+    setOpacity(value) {
+        if (typeof value !== 'number' || value < 0 || value > 1) {
+            console.error("Opacity must be a number between 0 and 1");
+            return;
+        }
+        this.globeShellWiggle?.setOpacity(value);
+    }
+    setParticleDimensions(tail, wing) {
+        if (0 < tail && 0 < wing) {
+            this.options.tailSize = tail;
+            this.options.wingSize = wing;
+            this.waveUbo?.updateSingle("tail_wing_base_limp", new Float32Array([tail, wing]));
+        }
+        else {
+            console.error("tail and wing must be positive numbers");
+            return;
+        }
+    }
+    setParticleColor(color) {
+        if (color.length !== 3) {
+            console.error("color must be an array of rgb elements");
+            return;
+        }
+        this.waveUbo?.updateSingle("color", new Float32Array(color));
+    }
+    setColorField(data) {
+        const { gl } = this;
+        if (!gl)
+            return;
+        if (this.options.useColorTexture === false) {
+            console.warn("Color texture is not enabled.");
+            return;
+        }
+        if (!this._colorFieldTexture) {
+            this._colorFieldTexture = gl.createTexture();
+        }
+        if (data.length !== this.options.dataWidth * this.options.dataHeight * 4) {
+            console.error("Color field data length does not match the specified dataWidth and dataHeight.");
+            return;
+        }
+        gl.bindTexture(gl.TEXTURE_2D, this._colorFieldTexture);
+        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, this.options.flipY);
+        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, this.options.dataWidth, this.options.dataHeight, 0, gl.RGBA, gl.UNSIGNED_BYTE, data);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+        gl.bindTexture(gl.TEXTURE_2D, null);
+    }
+    setSpeedField(data) {
+        const { gl } = this;
+        if (!gl)
+            return;
+        if (!this.options.useSpeedTexture) {
+            console.warn("Speed texture is not enabled.");
+            return;
+        }
+        if (!this._speedFieldTexture) {
+            this._speedFieldTexture = gl.createTexture();
+        }
+        if (data.length !== this.options.dataWidth * this.options.dataHeight) {
+            console.error("Speed field data length does not match the specified dataWidth and dataHeight.");
+            return;
+        }
+        console.log(data);
+        gl.bindTexture(gl.TEXTURE_2D, this._speedFieldTexture);
+        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, this.options.flipY);
+        gl.texImage2D(gl.TEXTURE_2D, 0, gl.R32F, this.options.dataWidth, this.options.dataHeight, 0, gl.RED, gl.FLOAT, data);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+        gl.bindTexture(gl.TEXTURE_2D, null);
+    }
+    /**
+     * Update speed thresholds used by shaders to cull particles by magnitude
+     */
+    setMinSpeedThreshold(value) {
+        this.options.minSpeedThreshold = value;
+        this.waveUbo?.updateSingle("min_speed_threshold", new Float32Array([value]));
+    }
+    setMaxSpeedThreshold(value) {
+        this.options.maxSpeedThreshold = value;
+        this.waveUbo?.updateSingle("max_speed_threshold", new Float32Array([value]));
+    }
+    setSpeedThresholds(min, max) {
+        this.setMinSpeedThreshold(min);
+        this.setMaxSpeedThreshold(max);
+    }
+    setBBox({ minLon, minLat, maxLon, maxLat }) {
+        this._globeshellparameters = { minLon, minLat, maxLon, maxLat };
+        this.globeShellWiggle?.setBBox({ minLon, minLat, maxLon, maxLat });
+        this._drawTextureResolution = this._drawTextureSizeFromBbox({ minLon, minLat, maxLon, maxLat });
+        this.waveUbo?.updateSingle("draw_texture_size", new Float32Array([this._drawTextureResolution.width, this._drawTextureResolution.height]));
+        this._drawTextures = [this._createDrawTexture(), this._createDrawTexture()];
+    }
+    __readAndWriteTextureData() {
+        const { gl, _rgVectorFieldTexture } = this;
+        if (!gl || !_rgVectorFieldTexture)
+            return;
+        gl.bindTexture(gl.TEXTURE_2D, _rgVectorFieldTexture);
+        const textureData = new Float32Array(this.options.dataWidth * this.options.dataHeight * 2);
+        gl.readPixels(0, 0, this.options.dataWidth, this.options.dataHeight, gl.RG, gl.FLOAT, textureData);
+        gl.bindTexture(gl.TEXTURE_2D, null);
+        gl.deleteTexture(this._rgVectorFieldTexture);
+        this._rgVectorFieldTexture = this._createRGTexture();
+        this.setVectorFieldData(textureData);
+    }
+    _drawTextureSizeFromBbox({ minLon, minLat, maxLon, maxLat }) {
+        let horizon;
+        if (minLon > 0 && maxLon < 0) {
+            horizon = 360 - minLon + maxLon;
+        }
+        else {
+            horizon = maxLon - minLon;
+        }
+        const vertical = maxLat - minLat;
+        let width, height;
+        if (horizon > vertical) {
+            width = this.options.drawTextureMaxPixelOnDimension;
+            height = Math.floor(this.options.drawTextureMaxPixelOnDimension * vertical / horizon);
+        }
+        else {
+            height = this.options.drawTextureMaxPixelOnDimension;
+            width = Math.floor(this.options.drawTextureMaxPixelOnDimension * horizon / vertical);
+        }
+        return {
+            width,
+            height
+        };
+    }
+    _createRGTexture() {
+        const { gl } = this;
+        if (!gl)
+            return null;
+        const texture = gl.createTexture();
+        gl.bindTexture(gl.TEXTURE_2D, texture);
+        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RG32F, this.options.dataWidth, this.options.dataHeight, 0, gl.RG, gl.FLOAT, null);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+        gl.bindTexture(gl.TEXTURE_2D, null);
+        return texture;
+    }
+    _createDrawTexture() {
+        const gl = this.gl;
+        if (!gl)
+            return null;
+        const texture = gl.createTexture();
+        gl.bindTexture(gl.TEXTURE_2D, texture);
+        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, this._drawTextureResolution.width, this._drawTextureResolution.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+        gl.bindTexture(gl.TEXTURE_2D, null);
+        return texture;
+    }
+    _step() {
+        this._stepIndex = (this._stepIndex + 1) % this._fullCycleStepCount;
+    }
+}