@pirireis/webglobeplugins 0.17.1 → 1.0.3

package/vectorfield/waveparticles/plugin.js

@@ -1,48 +1,84 @@
-import { BBOXGlobeShell } from "../../semiplugins/shell/bbox-renderer";
-import { defaultblendfunction } from "../../util/webglobe/gldefaultstates";
+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 { SeaWaveUbo } from "../../programs/vectorfields/logics/ubo-new";
+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 {
-    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 } = {}) {
+    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.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.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._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,
+            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;
@@ -52,55 +88,75 @@ export default class Plugin {
         this.fadeAway = FadeAwayProgramCache.get(gl);
         this.globeShellWiggle = new BBOXGlobeShell(gl, globe, this._globeshellparameters);
         const inPositionLocation = this.moveParticle.getInPositionLocation();
-        this.bufferManager = new PingPongBufferManager(gl, this._particleCount, inPositionLocation);
+        this.bufferManager = new PingPongBufferManager(gl, this.options.particleCount, inPositionLocation);
         this._rgVectorFieldTexture = this._createRGTexture();
-        this.waveUbo = SeaWaveUbo.createUBO(gl);
+        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._opacity);
+        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);
-        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);
+        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();
@@ -113,62 +169,68 @@ export default class Plugin {
         }
         this._fullCycleStepCount = value;
     }
-    // TODO: free all resources
     free() {
         if (this._isFreed) {
             console.warn("WaveParticle plugin is already freed");
             return;
         }
-        ;
         this._isFreed = true;
         const { gl, globeShellWiggle, _rgVectorFieldTexture, bufferManager, waveUbo, _drawTextures, _frameBuffer } = this;
-        this.fadeAway = null;
+        if (!gl)
+            return;
         FadeAwayProgramCache.release(gl);
-        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();
+        globeShellWiggle?.free();
+        if (_rgVectorFieldTexture)
+            gl.deleteTexture(_rgVectorFieldTexture);
+        pixelBasedMoveProgramCache.releaseProgram(gl);
+        drawRectangleParticlesProgramCache.releaseProgram(gl);
+        bufferManager?.free();
+        waveUbo?.free();
         _drawTextures.forEach(texture => gl.deleteTexture(texture));
-        gl.deleteFramebuffer(_frameBuffer);
+        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;
+        }
     }
-    // setters 
     setParticleCount(value) {
-        this._particleCount = value;
-        this.bufferManager.setParticleCount(value);
+        this.options.particleCount = value;
+        this.bufferManager?.setParticleCount(value);
     }
     setVectorFieldData(data, { dataWidth = null, dataHeight = null, flipY } = {}) {
         if (dataWidth !== null && dataHeight !== null) {
-            this._dataWidth = dataWidth;
-            this._dataHeight = dataHeight;
+            this.options.dataWidth = dataWidth;
+            this.options.dataHeight = dataHeight;
         }
         if (flipY !== undefined) {
-            this._flipY = flipY;
+            this.options.flipY = flipY;
         }
         this.__data = data;
-        const { gl, _dataWidth, _dataHeight } = this;
+        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._flipY);
-        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RG32F, _dataWidth, _dataHeight, 0, gl.RG, gl.FLOAT, data);
+        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);
+        this.globeShellWiggle?.setHeight(value);
     }
     setDropRate(value) {
-        this.waveUbo.updateSingle("drop_rate", new Float32Array([value]));
-        ;
+        this.waveUbo?.updateSingle("drop_rate", new Float32Array([value]));
     }
     setDrawTextureMaxPixelOnDimension(value) {
-        this._drawTextureMaxPixelOnDimension = 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.waveUbo?.updateSingle("draw_texture_size", new Float32Array([this._drawTextureResolution.width, this._drawTextureResolution.height]));
         this._drawTextures = [this._createDrawTexture(), this._createDrawTexture()];
     }
     setParticleSpeed(value) {
@@ -179,26 +241,27 @@ export default class Plugin {
         if (value > 100) {
             console.warn("Particle speed is too high, it may cause performance issues");
         }
-        this.waveUbo.updateSingle("range", new Float32Array([value]));
+        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;
+        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);
+        this.globeShellWiggle?.setOpacity(value);
     }
     setParticleDimensions(tail, wing) {
         if (0 < tail && 0 < wing) {
-            this.waveUbo.updateSingle("tail_wing_base_limp", new Float32Array([tail, 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");
@@ -210,28 +273,88 @@ export default class Plugin {
             console.error("color must be an array of rgb elements");
             return;
         }
-        this.waveUbo.updateSingle("color", new Float32Array(color));
-        ;
+        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.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.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
+        const { gl, _rgVectorFieldTexture } = this;
+        if (!gl || !_rgVectorFieldTexture)
+            return;
         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);
+        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);
-        // 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);
     }
@@ -246,12 +369,12 @@ export default class Plugin {
         const vertical = maxLat - minLat;
         let width, height;
         if (horizon > vertical) {
-            width = this._drawTextureMaxPixelOnDimension;
-            height = Math.floor(this._drawTextureMaxPixelOnDimension * vertical / horizon);
+            width = this.options.drawTextureMaxPixelOnDimension;
+            height = Math.floor(this.options.drawTextureMaxPixelOnDimension * vertical / horizon);
         }
         else {
-            height = this._drawTextureMaxPixelOnDimension;
-            width = Math.floor(this._drawTextureMaxPixelOnDimension * horizon / vertical);
+            height = this.options.drawTextureMaxPixelOnDimension;
+            width = Math.floor(this.options.drawTextureMaxPixelOnDimension * horizon / vertical);
         }
         return {
             width,
@@ -259,11 +382,12 @@ export default class Plugin {
         };
     }
     _createRGTexture() {
-        const { gl, _dataWidth, _dataHeight, } = this;
+        const { gl } = this;
+        if (!gl)
+            return null;
         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.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);
@@ -273,9 +397,10 @@ export default class Plugin {
     }
     _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, 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);

package/vectorfield/wind/adapters/image-to-fields.js

@@ -0,0 +1,61 @@
+export function imageToFields(data, legendData) {
+    const { image, uMin, vMin, uMax, vMax } = data;
+    const width = image.width;
+    const height = image.height;
+    const canvas = document.createElement("canvas");
+    canvas.width = width;
+    canvas.height = height;
+    const ctx = canvas.getContext("2d");
+    ctx?.drawImage(image, 0, 0);
+    const imageData = ctx?.getImageData(0, 0, width, height);
+    if (!imageData) {
+        throw new Error("Failed to get image data from canvas.");
+    }
+    const vectorFieldData = new Float32Array(width * height * 2);
+    const speedFieldData = new Float32Array(width * height);
+    const colorFieldData = new Uint8Array(width * height * 4);
+    // Pre-parse color values for better performance
+    const parsedColors = legendData.values.map(hex => {
+        const colorValue = parseInt(hex.replace("#", ""), 16);
+        return {
+            r: (colorValue >> 16) & 0xff,
+            g: (colorValue >> 8) & 0xff,
+            b: colorValue & 0xff
+        };
+    });
+    const uDiff = uMax - uMin;
+    const vDiff = vMax - vMin;
+    const uHeight = Math.max(Math.abs(uMin), Math.abs(uMax));
+    const scaler = Math.max(Math.abs(vMin), Math.abs(vMax), uHeight);
+    for (let y = 0; y < height; y++) {
+        for (let x = 0; x < width; x++) {
+            const index = (y * width + x) * 4;
+            const r = imageData.data[index];
+            const g = imageData.data[index + 1];
+            // Map texel [0,255] to actual speed values [uMin,uMax] and [vMin,vMax]
+            const uSpeed = uMin + (r / 255) * uDiff;
+            const vSpeed = vMin + (g / 255) * vDiff;
+            // Normalize to [-1,1] range for vector field
+            const u = uMin + (uDiff * r) / 255;
+            const v = vMin + (vDiff * g) / 255;
+            vectorFieldData[(y * width + x) * 2] = u / scaler;
+            vectorFieldData[(y * width + x) * 2 + 1] = -v / scaler;
+            const speed = Math.sqrt(uSpeed * uSpeed + vSpeed * vSpeed);
+            speedFieldData[y * width + x] = speed;
+            // Determine color based on speed and legendData
+            let colorIndex = legendData.thresholds.length - 1;
+            for (let i = 0; i < legendData.thresholds.length; i++) {
+                if (speed < legendData.thresholds[i]) {
+                    colorIndex = i;
+                    break;
+                }
+            }
+            const color = parsedColors[colorIndex];
+            colorFieldData[index] = color.r;
+            colorFieldData[index + 1] = color.g;
+            colorFieldData[index + 2] = color.b;
+            colorFieldData[index + 3] = 255; // Alpha channel
+        }
+    }
+    return { vectorFieldData, speedFieldData, colorFieldData };
+}

package/vectorfield/wind/adapters/types.js

@@ -0,0 +1 @@
+export {};

package/vectorfield/wind/imagetovectorfieldandmagnitude.js

@@ -1,16 +1,10 @@
-/**
- * @param {ImageData} imageData
- * image
- * uMax
- * vMax
- * height
- * width
- * @returns {Float32Array}
-*/
 export default function imageToMagnitude(imageData) {
     const { image, uMax, vMax, uMin, vMin, height, width } = imageData;
     const canvas = document.createElement('canvas');
     const ctx = canvas.getContext('2d');
+    if (!ctx) {
+        throw new Error('Failed to get 2D context');
+    }
     canvas.width = width;
     canvas.height = height;
     ctx.drawImage(image, 0, 0, width, height);
@@ -34,6 +28,9 @@ export function imageToRadianAngle(imageData) {
     const { image, uMax, vMax, uMin, vMin, height, width } = imageData;
     const canvas = document.createElement('canvas');
     const ctx = canvas.getContext('2d');
+    if (!ctx) {
+        throw new Error('Failed to get 2D context');
+    }
     canvas.width = width;
     canvas.height = height;
     ctx.drawImage(image, 0, 0, width, height);