@pirireis/webglobeplugins 0.9.9 → 0.9.11

package/waveparticles/plugin.js

@@ -0,0 +1,271 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var programs_1 = require("../programs");
+var util_1 = require("../util");
+var programs_2 = require("../programs");
+var programs_3 = require("../programs");
+var PixelBasedMove = programs_2.vectorfield.PixelBasedMove, DrawRectangleParticles = programs_2.vectorfield.DrawRectangleParticles, PingPongBufferManager = programs_2.vectorfield.PingPongBufferManager, WaveParticalUboManager = programs_2.vectorfield.WaveParticalUboManager;
+var MoveParticle = PixelBasedMove;
+var DrawParticle = DrawRectangleParticles;
+/**
+ * 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
+ *
+ */
+var MAX_PIXELS_ON_DIMENSION = 2200;
+var Plugin = /** @class */ (function () {
+    function Plugin(id, _a) {
+        var _b = _a === void 0 ? {} : _a, dataWidth = _b.dataWidth, dataHeight = _b.dataHeight, _c = _b.fadeOpacity, fadeOpacity = _c === void 0 ? 0.83 : _c, _d = _b.opacity, opacity = _d === void 0 ? 0.75 : _d, _e = _b.minLon, minLon = _e === void 0 ? -180 : _e, _f = _b.minLat, minLat = _f === void 0 ? -90 : _f, _g = _b.maxLon, maxLon = _g === void 0 ? 180 : _g, _h = _b.maxLat, maxLat = _h === void 0 ? 90 : _h, _j = _b.patricleCount, patricleCount = _j === void 0 ? 8000 : _j, _k = _b.flipY, flipY = _k === void 0 ? true : _k, _l = _b.drawTextureMaxPixelOnDimension, drawTextureMaxPixelOnDimension = _l === void 0 ? MAX_PIXELS_ON_DIMENSION : _l;
+        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: minLon,
+            maxLon: maxLon,
+            minLat: minLat,
+            maxLat: maxLat,
+        };
+        this._stepIndex = 0;
+        this._fullCycleStepCount = 3;
+        this._isFreed = false;
+    }
+    Plugin.prototype.init = function (globe, gl) {
+        this.globe = globe;
+        this.gl = gl;
+        this.moveParticle = new MoveParticle(gl);
+        this.drawParticle = new DrawParticle(gl);
+        this.fadeAway = new programs_3.FadeAway(gl);
+        this.globeShellWiggle = new programs_1.GlobeShellWiggle(gl, globe, this._globeshellparameters);
+        var inPositionLocation = this.moveParticle.getInPositionLocation();
+        this.bufferManager = new PingPongBufferManager(gl, this._particleCount, inPositionLocation);
+        this._rgVectorFieldTexture = this._createRGTexture();
+        this.waveUbo = new WaveParticalUboManager(gl, 0);
+        this._drawTextures = [this._createDrawTexture(), this._createDrawTexture()];
+        this._frameBuffer = gl.createFramebuffer();
+        this.setBBox(this._globeshellparameters);
+        this.setOpacity(this._opacity);
+        this.____drawIndex = 0;
+    };
+    Plugin.prototype._createDrawTexture = function () {
+        var gl = this.gl;
+        var 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;
+    };
+    Plugin.prototype._step = function () {
+        this._stepIndex = (this._stepIndex + 1) % this._fullCycleStepCount;
+    };
+    Plugin.prototype.draw3D = function () {
+        if (this._isFreed)
+            return;
+        var _a = this, gl = _a.gl, moveParticle = _a.moveParticle, drawParticle = _a.drawParticle, bufferManager = _a.bufferManager, globeShellWiggle = _a.globeShellWiggle, waveUbo = _a.waveUbo, fadeAway = _a.fadeAway, _rgVectorFieldTexture = _a._rgVectorFieldTexture;
+        gl.disable(gl.DEPTH_TEST);
+        if (this._stepIndex === 0) {
+            waveUbo.update({ random_seed: Math.random() });
+            moveParticle.move(bufferManager, _rgVectorFieldTexture, waveUbo);
+            // 1s swap buffer b1 <-> b2
+            bufferManager.swap();
+        }
+        else if (this._stepIndex === 1) {
+            this.____drawIndex = 1 - this.____drawIndex;
+            var canvasWidth = gl.canvas.width;
+            var 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 {
+            var canvasWidth = gl.canvas.width;
+            var 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);
+            (0, util_1.defaultblendfunction)(gl);
+            gl.viewport(0, 0, canvasWidth, canvasHeight);
+        }
+        globeShellWiggle.setTexture(this._drawTextures[this.____drawIndex]);
+        globeShellWiggle.draw();
+        this._step();
+        gl.enable(gl.DEPTH_TEST);
+    };
+    Plugin.prototype.setCycleStepCount = function (value) {
+        if (value < 3) {
+            this._fullCycleStepCount = 3;
+        }
+        this._fullCycleStepCount = value;
+    };
+    Plugin.prototype._createRGTexture = function () {
+        var _a = this, gl = _a.gl, _dataWidth = _a._dataWidth, _dataHeight = _a._dataHeight;
+        var 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;
+    };
+    // TODO: free all resources
+    Plugin.prototype.free = function () {
+        var _a = this, gl = _a.gl, fadeAway = _a.fadeAway, globeShellWiggle = _a.globeShellWiggle, _rgVectorFieldTexture = _a._rgVectorFieldTexture, bufferManager = _a.bufferManager, waveUbo = _a.waveUbo, _drawTextures = _a._drawTextures, _frameBuffer = _a._frameBuffer;
+        this._isFreed = true;
+        fadeAway.free();
+        globeShellWiggle.free();
+        gl.deleteTexture(_rgVectorFieldTexture);
+        // glProgramCache.releaseProgram(gl, MoveParticle);
+        this.moveParticle.free();
+        this.moveParticle = null;
+        // glProgramCache.releaseProgram(gl, DrawParticle);
+        this.drawParticle.free();
+        this.drawParticle = null;
+        bufferManager.free();
+        waveUbo.free();
+        _drawTextures.forEach(function (texture) { return gl.deleteTexture(texture); });
+        gl.deleteFramebuffer(_frameBuffer);
+    };
+    // setters 
+    Plugin.prototype.setParticleCount = function (value) {
+        this._particleCount = value;
+        this.bufferManager.setParticleCount(value);
+    };
+    Plugin.prototype.setVectorFieldData = function (data, _a) {
+        var _b = _a === void 0 ? {} : _a, _c = _b.dataWidth, dataWidth = _c === void 0 ? null : _c, _d = _b.dataHeight, dataHeight = _d === void 0 ? null : _d, flipY = _b.flipY;
+        if (dataWidth !== null && dataHeight !== null) {
+            this._dataWidth = dataWidth;
+            this._dataHeight = dataHeight;
+        }
+        if (flipY !== undefined) {
+            this._flipY = flipY;
+        }
+        this.__data = data;
+        var _e = this, gl = _e.gl, _dataWidth = _e._dataWidth, _dataHeight = _e._dataHeight;
+        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);
+    };
+    Plugin.prototype.setHeight = function (value) {
+        this.globeShellWiggle.setHeight(value);
+    };
+    Plugin.prototype.setDropRate = function (value) {
+        this.waveUbo.update({ drop_rate: value });
+    };
+    Plugin.prototype.__readAndWriteTextureData = function () {
+        var _a = this, gl = _a.gl, _rgVectorFieldTexture = _a._rgVectorFieldTexture, _dataWidth = _a._dataWidth, _dataHeight = _a._dataHeight;
+        // Step 1: Bind the texture to a framebuffer
+        // Step 2: Read the texture data into a Float32Array
+        gl.bindTexture(gl.TEXTURE_2D, _rgVectorFieldTexture);
+        var 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);
+    };
+    Plugin.prototype._drawTextureSizeFromBbox = function (_a) {
+        var minLon = _a.minLon, minLat = _a.minLat, maxLon = _a.maxLon, maxLat = _a.maxLat;
+        var horizon;
+        if (minLon > 0 && maxLon < 0) {
+            horizon = 360 - minLon + maxLon;
+        }
+        else {
+            horizon = maxLon - minLon;
+        }
+        var vertical = maxLat - minLat;
+        var 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: width,
+            height: height
+        };
+    };
+    Plugin.prototype.setDrawTextureMaxPixelOnDimension = function (value) {
+        this._drawTextureMaxPixelOnDimension = value;
+        this._drawTextureResolution = this._drawTextureSizeFromBbox(this._globeshellparameters);
+        this.waveUbo.update({ draw_texture_size: [this._drawTextureResolution.width, this._drawTextureResolution.height] });
+        this._drawTextures = [this._createDrawTexture(), this._createDrawTexture()];
+    };
+    Plugin.prototype.setParticleSpeed = function (value) {
+        this.waveUbo.update({ range: value });
+    };
+    Plugin.prototype.setFadeOpacity = function (value) {
+        this._fadeOpacity = value;
+    };
+    Plugin.prototype.setOpacity = function (value) {
+        this.globeShellWiggle.setOpacity(value);
+    };
+    Plugin.prototype.setParticleDimensions = function (tail, wing) {
+        if (0 < tail || 0 < wing) {
+            this.waveUbo.update({ tail_wing_base_limp: [tail, wing] });
+        }
+        else {
+            console.error("tail and wing must be greater than 0");
+        }
+    };
+    Plugin.prototype.setParticleColor = function (color) {
+        if (color.length !== 3) {
+            console.error("color must be an array of rgb elements");
+            return;
+        }
+        this.waveUbo.update({ color: color });
+    };
+    Plugin.prototype.setBBox = function (_a) {
+        var minLon = _a.minLon, minLat = _a.minLat, maxLon = _a.maxLon, maxLat = _a.maxLat;
+        this._globeshellparameters = { minLon: minLon, minLat: minLat, maxLon: maxLon, maxLat: maxLat };
+        this.globeShellWiggle.setBBox({ minLon: minLon, minLat: minLat, maxLon: maxLon, maxLat: maxLat });
+        this._drawTextureResolution = this._drawTextureSizeFromBbox({ minLon: minLon, minLat: minLat, maxLon: maxLon, maxLat: maxLat });
+        this.waveUbo.update({ draw_texture_size: [this._drawTextureResolution.width, this._drawTextureResolution.height] });
+        this._drawTextures = [this._createDrawTexture(), this._createDrawTexture()];
+    };
+    return Plugin;
+}());
+exports.default = Plugin;

package/wind/imagetovectorfieldandmagnitude.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = imageToMagnitude;
+/**
+ * @param {ImageData} imageData
+ * image
+ * uMax
+ * vMax
+ * height
+ * width
+ * @returns {Float32Array}
+*/
+function imageToMagnitude(imageData) {
+    var image = imageData.image, uMax = imageData.uMax, vMax = imageData.vMax, uMin = imageData.uMin, vMin = imageData.vMin, height = imageData.height, width = imageData.width;
+    var canvas = document.createElement('canvas');
+    var ctx = canvas.getContext('2d');
+    canvas.width = width;
+    canvas.height = height;
+    ctx.drawImage(image, 0, 0, width, height);
+    var img = ctx.getImageData(0, 0, width, height);
+    var data = img.data;
+    var magnitudeArray = new Float32Array(height * width);
+    var uDiff = uMax - uMin;
+    var vDiff = vMax - vMin;
+    for (var i = 0; i < data.length; i += 4) {
+        var r = data[i];
+        var g = data[i + 1];
+        var u = uMin + (uDiff * r) / 255;
+        var v = vMin + (vDiff * g) / 255;
+        var magnitude = Math.sqrt(u * u + v * v);
+        var index = i / 4;
+        magnitudeArray[index] = magnitude;
+    }
+    return magnitudeArray;
+}

package/wind/index.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createImageFromBase64 = exports.WindPlugin = exports.imageToMagnitude = exports.createVectorFieldImage = void 0;
+var plugin_1 = __importDefault(require("./plugin"));
+exports.WindPlugin = plugin_1.default;
+var vectorfieldimage_1 = __importDefault(require("./vectorfieldimage"));
+exports.createVectorFieldImage = vectorfieldimage_1.default;
+var imagetovectorfieldandmagnitude_1 = __importDefault(require("./imagetovectorfieldandmagnitude"));
+exports.imageToMagnitude = imagetovectorfieldandmagnitude_1.default;
+var webglobjectbuilders_1 = require("../util/webglobjectbuilders");
+Object.defineProperty(exports, "createImageFromBase64", { enumerable: true, get: function () { return webglobjectbuilders_1.createImageFromBase64; } });