@pirireis/webglobeplugins 0.15.35 → 0.16.0

package/waveparticles/plugin.js

@@ -1,290 +1,342 @@
-import { GlobeShellWiggle } from "../programs";
-import { defaultblendfunction } from "../util";
-import { vectorfield } from "../programs/index";
-import { pixelBasedMoveProgramCache } from "../programs/vectorfields/logics/pixelbased";
-import { drawRectangleParticlesProgramCache } from "../programs/vectorfields/logics/drawrectangleparticles";
-import { FadeAway } from "../programs";
-import { SeaWaveUbo } from "../programs/vectorfields/logics/ubo-new";
-const { PingPongBufferManager, WaveParticalUboManager } = vectorfield;
-/**
- * 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 {
-    constructor(id, { dataWidth, dataHeight, fadeOpacity = 0.83, opacity = 0.75, minLon = -180, minLat = -90, maxLon = 180, maxLat = 90, patricleCount = 8000, flipY = true, drawTextureMaxPixelOnDimension = MAX_PIXELS_ON_DIMENSION } = {}) {
-        this.id = id;
-        this.globe = null;
-        this.gl = null;
-        this.moveParticle = null;
-        this.drawParticle = null;
-        this.bufferManager = null;
-        this._rgVectorFieldTexture = null;
-        this.globeShellWiggle = null;
-        this.waveUbo = null;
-        this._flipY = flipY;
-        this._drawTextureResolution = {};
-        this._frameBuffer = null;
-        this._fadeOpacity = fadeOpacity;
-        this._opacity = opacity;
-        this._particleCount = patricleCount;
-        this._dataWidth = dataWidth;
-        this._dataHeight = dataHeight;
-        this._drawTextureMaxPixelOnDimension = drawTextureMaxPixelOnDimension;
-        this._globeshellparameters = {
-            minLon,
-            maxLon,
-            minLat,
-            maxLat,
-        };
-        this._stepIndex = 0;
-        this._fullCycleStepCount = 3;
-        this._isFreed = false;
-    }
-    init(globe, gl) {
-        this.globe = globe;
-        this.gl = gl;
-        this.moveParticle = pixelBasedMoveProgramCache.getProgram(gl);
-        this.drawParticle = drawRectangleParticlesProgramCache.getProgram(gl);
-        this.fadeAway = new FadeAway(gl);
-        this.globeShellWiggle = new GlobeShellWiggle(gl, globe, this._globeshellparameters);
-        const inPositionLocation = this.moveParticle.getInPositionLocation();
-        this.bufferManager = new PingPongBufferManager(gl, this._particleCount, inPositionLocation);
-        this._rgVectorFieldTexture = this._createRGTexture();
-        this.waveUbo = SeaWaveUbo.createUBO(gl);
-        this._drawTextures = [this._createDrawTexture(), this._createDrawTexture()];
-        this._frameBuffer = gl.createFramebuffer();
-        this.setBBox(this._globeshellparameters);
-        this.setOpacity(this._opacity);
-        this.____drawIndex = 0;
-    }
-    draw3D() {
-        if (this._isFreed)
-            return;
-        const { gl, moveParticle, drawParticle, bufferManager, globeShellWiggle, waveUbo, fadeAway, _rgVectorFieldTexture } = this;
-        gl.disable(gl.DEPTH_TEST);
-        if (this._stepIndex === 0) {
-            // waveUbo.update({ random_seed: Math.random() });
-            this.waveUbo.updateSingle("random_seed", new Float32Array([Math.random()]));
-            ;
-            moveParticle.move(bufferManager, _rgVectorFieldTexture, waveUbo);
-            // 1s swap buffer b1 <-> b2
-            bufferManager.swap();
-        }
-        else if (this._stepIndex === 1) {
-            this.____drawIndex = 1 - this.____drawIndex;
-            const canvasWidth = gl.canvas.width;
-            const canvasHeight = gl.canvas.height;
-            // gl.viewport(0, 0, 2200, 2200);
-            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);
-            // 2s bound frame buffer to null
-            gl.bindFramebuffer(gl.FRAMEBUFFER, null);
-            gl.viewport(0, 0, canvasWidth, canvasHeight);
-        }
-        else {
-            const canvasWidth = gl.canvas.width;
-            const canvasHeight = gl.canvas.height;
-            // gl.viewport(0, 0, 2200, 2200);
-            gl.viewport(0, 0, this._drawTextureResolution.width, this._drawTextureResolution.height);
-            gl.bindFramebuffer(gl.FRAMEBUFFER, this._frameBuffer);
-            gl.enable(gl.BLEND);
-            // gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
-            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._fadeOpacity);
-            gl.bindFramebuffer(gl.FRAMEBUFFER, null);
-            defaultblendfunction(gl);
-            gl.viewport(0, 0, canvasWidth, canvasHeight);
-        }
-        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;
-    }
-    // TODO: free all resources
-    free() {
-        if (this._isFreed) {
-            console.warn("WaveParticle plugin is already freed");
-            return;
-        }
-        ;
-        this._isFreed = true;
-        const { gl, fadeAway, globeShellWiggle, _rgVectorFieldTexture, bufferManager, waveUbo, _drawTextures, _frameBuffer } = this;
-        fadeAway.free();
-        globeShellWiggle.free();
-        gl.deleteTexture(_rgVectorFieldTexture);
-        // glProgramCache.releaseProgram(gl, MoveParticle);
-        pixelBasedMoveProgramCache.getProgram(gl);
-        this.moveParticle = null;
-        // glProgramCache.releaseProgram(gl, DrawParticle);
-        drawRectangleParticlesProgramCache.getProgram(gl);
-        this.drawParticle = null;
-        bufferManager.free();
-        waveUbo.free();
-        _drawTextures.forEach(texture => gl.deleteTexture(texture));
-        gl.deleteFramebuffer(_frameBuffer);
-    }
-    // setters 
-    setParticleCount(value) {
-        this._particleCount = value;
-        this.bufferManager.setParticleCount(value);
-    }
-    setVectorFieldData(data, { dataWidth = null, dataHeight = null, flipY } = {}) {
-        if (dataWidth !== null && dataHeight !== null) {
-            this._dataWidth = dataWidth;
-            this._dataHeight = dataHeight;
-        }
-        if (flipY !== undefined) {
-            this._flipY = flipY;
-        }
-        this.__data = data;
-        const { gl, _dataWidth, _dataHeight } = this;
-        gl.bindTexture(gl.TEXTURE_2D, this._rgVectorFieldTexture);
-        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, this._flipY);
-        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RG32F, _dataWidth, _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._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._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.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));
-        ;
-    }
-    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, _dataWidth, _dataHeight } = this;
-        // Step 1: Bind the texture to a framebuffer
-        // Step 2: Read the texture data into a Float32Array
-        gl.bindTexture(gl.TEXTURE_2D, _rgVectorFieldTexture);
-        const textureData = new Float32Array(_dataWidth * _dataHeight * 2); // RG32F has 2 components per pixel
-        gl.readPixels(0, 0, _dataWidth, _dataHeight, gl.RG, gl.FLOAT, textureData);
-        gl.bindTexture(gl.TEXTURE_2D, null);
-        // Step 3: Create a new texture and write the data back
-        // Step 4: Clean up
-        gl.deleteTexture(this._rgVectorFieldTexture);
-        // Replace the old texture with the new one
-        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._drawTextureMaxPixelOnDimension;
-            height = Math.floor(this._drawTextureMaxPixelOnDimension * vertical / horizon);
-        }
-        else {
-            height = this._drawTextureMaxPixelOnDimension;
-            width = Math.floor(this._drawTextureMaxPixelOnDimension * horizon / vertical);
-        }
-        return {
-            width,
-            height
-        };
-    }
-    _createRGTexture() {
-        const { gl, _dataWidth, _dataHeight, } = this;
-        const texture = gl.createTexture();
-        // R32F
-        gl.bindTexture(gl.TEXTURE_2D, texture);
-        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RG32F, _dataWidth, _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;
-        const texture = gl.createTexture();
-        gl.bindTexture(gl.TEXTURE_2D, texture);
-        // gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 2200, 2200, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
-        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;
-    }
-}
+import { GlobeShellWiggle } from "../programs";
+import { defaultblendfunction } from "../util";
+import { vectorfield } from "../programs/index";
+import { pixelBasedMoveProgramCache } from "../programs/vectorfields/logics/pixelbased";
+import { drawRectangleParticlesProgramCache } from "../programs/vectorfields/logics/drawrectangleparticles";
+
+import { FadeAway } from "../programs";
+import { SeaWaveUbo } from "../programs/vectorfields/logics/ubo-new";
+const { PingPongBufferManager, WaveParticalUboManager } = vectorfield;
+
+/**
+ * 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 {
+    constructor(id, { dataWidth, dataHeight, fadeOpacity = 0.83, opacity = 0.75, minLon = -180, minLat = -90, maxLon = 180, maxLat = 90, patricleCount = 8000, flipY = true, drawTextureMaxPixelOnDimension = MAX_PIXELS_ON_DIMENSION } = {}) {
+
+        this.id = id;
+        this.globe = null;
+        this.gl = null;
+        this.moveParticle = null;
+        this.drawParticle = null;
+        this.bufferManager = null;
+        this._rgVectorFieldTexture = null;
+        this.globeShellWiggle = null;
+        this.waveUbo = null;
+        this._flipY = flipY;
+        this._drawTextureResolution = {};
+        this._frameBuffer = null;
+        this._fadeOpacity = fadeOpacity;
+        this._opacity = opacity;
+        this._particleCount = patricleCount;
+        this._dataWidth = dataWidth;
+        this._dataHeight = dataHeight;
+        this._drawTextureMaxPixelOnDimension = drawTextureMaxPixelOnDimension;
+        this._globeshellparameters = {
+            minLon,
+            maxLon,
+            minLat,
+            maxLat,
+        }
+        this._stepIndex = 0;
+        this._fullCycleStepCount = 3;
+        this._isFreed = false;
+    }
+
+    init(globe, gl) {
+        this.globe = globe;
+        this.gl = gl;
+        this.moveParticle = pixelBasedMoveProgramCache.getProgram(gl);
+        this.drawParticle = drawRectangleParticlesProgramCache.getProgram(gl);
+
+        this.fadeAway = new FadeAway(gl);
+
+        this.globeShellWiggle = new GlobeShellWiggle(gl, globe, this._globeshellparameters);
+        const inPositionLocation = this.moveParticle.getInPositionLocation();
+        this.bufferManager = new PingPongBufferManager(gl, this._particleCount, inPositionLocation);
+
+        this._rgVectorFieldTexture = this._createRGTexture();
+
+        this.waveUbo = SeaWaveUbo.createUBO(gl);
+
+        this._drawTextures = [this._createDrawTexture(), this._createDrawTexture()];
+        this._frameBuffer = gl.createFramebuffer();
+        this.setBBox(this._globeshellparameters);
+        this.setOpacity(this._opacity);
+        this.____drawIndex = 0;
+    }
+
+
+    draw3D() {
+        if (this._isFreed) return;
+        const { gl, moveParticle, drawParticle, bufferManager, globeShellWiggle, waveUbo, fadeAway, _rgVectorFieldTexture } = this;
+
+        gl.disable(gl.DEPTH_TEST);
+        if (this._stepIndex === 0) {
+            // waveUbo.update({ random_seed: Math.random() });
+            this.waveUbo.updateSingle("random_seed", new Float32Array([Math.random()]));;
+
+            moveParticle.move(bufferManager, _rgVectorFieldTexture, waveUbo);
+            // 1s swap buffer b1 <-> b2
+            bufferManager.swap();
+        } else if (this._stepIndex === 1) {
+            this.____drawIndex = 1 - this.____drawIndex;
+            const canvasWidth = gl.canvas.width;
+            const canvasHeight = gl.canvas.height;
+            // gl.viewport(0, 0, 2200, 2200);
+            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);
+            // 2s bound frame buffer to null
+            gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+            gl.viewport(0, 0, canvasWidth, canvasHeight);
+        } else {
+            const canvasWidth = gl.canvas.width;
+            const canvasHeight = gl.canvas.height;
+            // gl.viewport(0, 0, 2200, 2200);
+            gl.viewport(0, 0, this._drawTextureResolution.width, this._drawTextureResolution.height);
+            gl.bindFramebuffer(gl.FRAMEBUFFER, this._frameBuffer);
+            gl.enable(gl.BLEND);
+            // gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+            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._fadeOpacity);
+            gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+            defaultblendfunction(gl);
+            gl.viewport(0, 0, canvasWidth, canvasHeight);
+        }
+        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;
+    }
+
+
+
+    // TODO: free all resources
+    free() {
+        if (this._isFreed) {
+            console.warn("WaveParticle plugin is already freed");
+            return;
+        };
+        this._isFreed = true;
+        const { gl, fadeAway, globeShellWiggle, _rgVectorFieldTexture, bufferManager, waveUbo, _drawTextures, _frameBuffer } = this;
+
+        fadeAway.free();
+        globeShellWiggle.free();
+        gl.deleteTexture(_rgVectorFieldTexture);
+        // glProgramCache.releaseProgram(gl, MoveParticle);
+        pixelBasedMoveProgramCache.getProgram(gl);
+        this.moveParticle = null;
+        // glProgramCache.releaseProgram(gl, DrawParticle);
+        drawRectangleParticlesProgramCache.getProgram(gl);
+        this.drawParticle = null
+        bufferManager.free();
+        waveUbo.free();
+        _drawTextures.forEach(texture => gl.deleteTexture(texture));
+        gl.deleteFramebuffer(_frameBuffer);
+    }
+
+
+    // setters 
+    setParticleCount(value) {
+        this._particleCount = value;
+        this.bufferManager.setParticleCount(value);
+    }
+
+
+    setVectorFieldData(data, { dataWidth = null, dataHeight = null, flipY } = {}) {
+        if (dataWidth !== null && dataHeight !== null) {
+            this._dataWidth = dataWidth;
+            this._dataHeight = dataHeight;
+        }
+        if (flipY !== undefined) {
+            this._flipY = flipY;
+        }
+        this.__data = data;
+        const { gl, _dataWidth, _dataHeight } = this;
+        gl.bindTexture(gl.TEXTURE_2D, this._rgVectorFieldTexture);
+        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, this._flipY);
+        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RG32F, _dataWidth, _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._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._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.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));;
+    }
+
+
+    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, _dataWidth, _dataHeight } = this;
+
+        // Step 1: Bind the texture to a framebuffer
+
+        // Step 2: Read the texture data into a Float32Array
+        gl.bindTexture(gl.TEXTURE_2D, _rgVectorFieldTexture);
+        const textureData = new Float32Array(_dataWidth * _dataHeight * 2); // RG32F has 2 components per pixel
+        gl.readPixels(0, 0, _dataWidth, _dataHeight, gl.RG, gl.FLOAT, textureData);
+        gl.bindTexture(gl.TEXTURE_2D, null);
+        // Step 3: Create a new texture and write the data back
+
+        // Step 4: Clean up
+
+        gl.deleteTexture(this._rgVectorFieldTexture);
+
+        // Replace the old texture with the new one
+        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._drawTextureMaxPixelOnDimension;
+            height = Math.floor(this._drawTextureMaxPixelOnDimension * vertical / horizon);
+        } else {
+            height = this._drawTextureMaxPixelOnDimension;
+            width = Math.floor(this._drawTextureMaxPixelOnDimension * horizon / vertical);
+        }
+        return {
+            width,
+            height
+        }
+
+    }
+
+    _createRGTexture() {
+        const { gl, _dataWidth, _dataHeight, } = this;
+        const texture = gl.createTexture();
+        // R32F
+        gl.bindTexture(gl.TEXTURE_2D, texture);
+        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RG32F, _dataWidth, _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
+        const texture = gl.createTexture();
+        gl.bindTexture(gl.TEXTURE_2D, texture);
+        // gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 2200, 2200, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
+        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;
+    }
+}
+
+