@antv/l7-layers 2.9.25-alpha.0 → 2.9.26-alpha.1

package/lib/wind/models/windRender.js

@@ -1,62 +1,67 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/wind/models/windRender.ts
-var windRender_exports = {};
-__export(windRender_exports, {
-  Wind: () => Wind
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-module.exports = __toCommonJS(windRender_exports);
-var glUtils = __toESM(require("./utils"));
-var import_windShader = require("./windShader");
+exports.Wind = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var glUtils = _interopRequireWildcard(require("./utils"));
+
+var _windShader = require("./windShader");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 function getColorRamp(colors) {
-  let canvas = document.createElement("canvas");
-  const ctx = canvas.getContext("2d");
+  var canvas = document.createElement('canvas');
+  var ctx = canvas.getContext('2d');
   canvas.width = 256;
   canvas.height = 1;
-  const gradient = ctx.createLinearGradient(0, 0, 256, 0);
-  for (const stop of Object.keys(colors)) {
+  var gradient = ctx.createLinearGradient(0, 0, 256, 0);
+
+  for (var _i = 0, _Object$keys = Object.keys(colors); _i < _Object$keys.length; _i++) {
+    var stop = _Object$keys[_i];
     gradient.addColorStop(+stop, colors[+stop]);
   }
+
   ctx.fillStyle = gradient;
-  ctx.fillRect(0, 0, 256, 1);
+  ctx.fillRect(0, 0, 256, 1); // @ts-ignore dispose canvas element
+
   canvas = null;
   return new Uint8Array(ctx.getImageData(0, 0, 256, 1).data);
 }
+
 function bindAttribute(gl, buffer, attribute, numComponents) {
   gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
   gl.enableVertexAttribArray(attribute);
   gl.vertexAttribPointer(attribute, numComponents, gl.FLOAT, false, 0, 0);
 }
+
 function bindFramebuffer(gl, framebuffer, texture) {
   gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
+
   if (texture) {
     gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);
   }
 }
-var Wind = class {
-  constructor(options) {
-    this.width = 512;
-    this.height = 512;
-    this.numParticles = 65536;
+
+var Wind = /*#__PURE__*/function () {
+  function Wind(options) {
+    (0, _classCallCheck2.default)(this, Wind);
+    (0, _defineProperty2.default)(this, "width", 512);
+    (0, _defineProperty2.default)(this, "height", 512);
+    (0, _defineProperty2.default)(this, "numParticles", 65536);
     this.gl = options.glContext;
     this.width = options.imageWidth;
     this.height = options.imageHeight;
@@ -67,196 +72,302 @@ var Wind = class {
     this.rampColors = options.rampColors;
     this.init();
   }
-  init() {
-    const gl = this.gl;
-    this.fadeOpacity = 0.996;
-    this.speedFactor = 0.25;
-    this.dropRate = 3e-3;
-    this.dropRateBump = 0.01;
-    this.drawProgram = glUtils.createProgram(gl, import_windShader.drawVert, import_windShader.drawFrag);
-    this.fullScreenProgram = glUtils.createProgram(gl, import_windShader.fullScreenVert, import_windShader.fullScreenFrag);
-    this.updateProgram = glUtils.createProgram(gl, import_windShader.updateVert, import_windShader.updateFrag);
-    this.quadBuffer = glUtils.createBuffer(gl, new Float32Array([0, 0, 1, 0, 0, 1, 0, 1, 1, 0, 1, 1]));
-    this.framebuffer = gl.createFramebuffer();
-    this.colorRampTexture = glUtils.createTexture(this.gl, this.gl.LINEAR, getColorRamp(this.rampColors), 16, 16);
-    const emptyPixels = new Uint8Array(this.width * this.height * 4);
-    this.backgroundTexture = glUtils.createTexture(gl, gl.NEAREST, emptyPixels, this.width, this.height);
-    this.screenTexture = glUtils.createTexture(gl, gl.NEAREST, emptyPixels, this.width, this.height);
-    const particleRes = this.particleStateResolution = Math.ceil(Math.sqrt(this.numParticles));
-    this.numParticlesSize = particleRes * particleRes;
-    const particleState = new Uint8Array(this.numParticlesSize * 4);
-    for (let i = 0; i < particleState.length; i++) {
-      particleState[i] = Math.floor(Math.random() * 256);
-    }
-    this.particleStateTexture0 = glUtils.createTexture(gl, gl.NEAREST, particleState, particleRes, particleRes);
-    this.particleStateTexture1 = glUtils.createTexture(gl, gl.NEAREST, particleState, particleRes, particleRes);
-    const particleIndices = new Float32Array(this.numParticlesSize);
-    for (let i$1 = 0; i$1 < this.numParticlesSize; i$1++) {
-      particleIndices[i$1] = i$1;
-    }
-    this.particleIndexBuffer = glUtils.createBuffer(gl, particleIndices);
-  }
-  setWind(windData) {
-    this.windData = windData;
-    this.windTexture = glUtils.createDataTexture(this.gl, this.gl.LINEAR, windData.image);
-  }
-  updateParticelNum(num) {
-    const gl = this.gl;
-    if (num !== this.numParticles) {
-      this.numParticles = num;
-      const particleRes = this.particleStateResolution = Math.ceil(Math.sqrt(this.numParticles));
+
+  (0, _createClass2.default)(Wind, [{
+    key: "init",
+    value: function init() {
+      var gl = this.gl;
+      this.fadeOpacity = 0.996; // how fast the particle trails fade on each frame
+
+      this.speedFactor = 0.25; // how fast the particles move
+
+      this.dropRate = 0.003; // how often the particles move to a random place
+
+      this.dropRateBump = 0.01; // drop rate increase relative to individual particle speed
+
+      this.drawProgram = glUtils.createProgram(gl, _windShader.drawVert, _windShader.drawFrag);
+      this.fullScreenProgram = glUtils.createProgram(gl, _windShader.fullScreenVert, _windShader.fullScreenFrag);
+      this.updateProgram = glUtils.createProgram(gl, _windShader.updateVert, _windShader.updateFrag);
+      this.quadBuffer = glUtils.createBuffer(gl, new Float32Array([0, 0, 1, 0, 0, 1, 0, 1, 1, 0, 1, 1]));
+      this.framebuffer = gl.createFramebuffer();
+      this.colorRampTexture = glUtils.createTexture(this.gl, this.gl.LINEAR, getColorRamp(this.rampColors), 16, 16);
+      var emptyPixels = new Uint8Array(this.width * this.height * 4); // screen textures to hold the drawn screen for the previous and the current frame
+
+      this.backgroundTexture = glUtils.createTexture(gl, gl.NEAREST, emptyPixels, this.width, this.height);
+      this.screenTexture = glUtils.createTexture(gl, gl.NEAREST, emptyPixels, this.width, this.height); // we create a square texture where each pixel will hold a particle position encoded as RGBA
+
+      var particleRes = this.particleStateResolution = Math.ceil(Math.sqrt(this.numParticles)); // particleRes size
+
       this.numParticlesSize = particleRes * particleRes;
-      const particleState = new Uint8Array(this.numParticlesSize * 4);
-      for (let i = 0; i < particleState.length; i++) {
-        particleState[i] = Math.floor(Math.random() * 256);
-      }
+      var particleState = new Uint8Array(this.numParticlesSize * 4);
+
+      for (var i = 0; i < particleState.length; i++) {
+        particleState[i] = Math.floor(Math.random() * 256); // randomize the initial particle positions
+      } // textures to hold the particle state for the current and the next frame
+
+
       this.particleStateTexture0 = glUtils.createTexture(gl, gl.NEAREST, particleState, particleRes, particleRes);
       this.particleStateTexture1 = glUtils.createTexture(gl, gl.NEAREST, particleState, particleRes, particleRes);
-      const particleIndices = new Float32Array(this.numParticlesSize);
-      for (let i$1 = 0; i$1 < this.numParticlesSize; i$1++) {
+      var particleIndices = new Float32Array(this.numParticlesSize);
+
+      for (var i$1 = 0; i$1 < this.numParticlesSize; i$1++) {
         particleIndices[i$1] = i$1;
       }
+
       this.particleIndexBuffer = glUtils.createBuffer(gl, particleIndices);
     }
-  }
-  updateWindDir(uMin, uMax, vMin, vMax) {
-    this.windData.uMin = uMin;
-    this.windData.uMax = uMax;
-    this.windData.vMin = vMin;
-    this.windData.vMax = vMax;
-  }
-  updateColorRampTexture(rampColors) {
-    if (this.isColorChanged(rampColors)) {
-      this.rampColors = rampColors;
-      const gl = this.gl;
-      gl.deleteTexture(this.colorRampTexture);
-      this.colorRampTexture = glUtils.createTexture(gl, gl.LINEAR, getColorRamp(rampColors), 16, 16);
+  }, {
+    key: "setWind",
+    value: function setWind(windData) {
+      this.windData = windData;
+      this.windTexture = glUtils.createDataTexture(this.gl, this.gl.LINEAR, windData.image);
     }
-  }
-  isColorChanged(rampColors) {
-    const keys = Object.keys(rampColors);
-    for (const item of keys) {
-      const key = Number(item);
-      if (!this.rampColors[key]) {
-        return true;
+    /**
+     * 更新风场粒子数量
+     * @param num
+     */
+
+  }, {
+    key: "updateParticelNum",
+    value: function updateParticelNum(num) {
+      var gl = this.gl;
+
+      if (num !== this.numParticles) {
+        this.numParticles = num; // params number
+        // we create a square texture where each pixel will hold a particle position encoded as RGBA
+
+        var particleRes = this.particleStateResolution = Math.ceil(Math.sqrt(this.numParticles));
+        this.numParticlesSize = particleRes * particleRes;
+        var particleState = new Uint8Array(this.numParticlesSize * 4);
+
+        for (var i = 0; i < particleState.length; i++) {
+          particleState[i] = Math.floor(Math.random() * 256); // randomize the initial particle positions
+        } // textures to hold the particle state for the current and the next frame
+
+
+        this.particleStateTexture0 = glUtils.createTexture(gl, gl.NEAREST, particleState, particleRes, particleRes);
+        this.particleStateTexture1 = glUtils.createTexture(gl, gl.NEAREST, particleState, particleRes, particleRes);
+        var particleIndices = new Float32Array(this.numParticlesSize);
+
+        for (var i$1 = 0; i$1 < this.numParticlesSize; i$1++) {
+          particleIndices[i$1] = i$1;
+        }
+
+        this.particleIndexBuffer = glUtils.createBuffer(gl, particleIndices);
       }
-      if (this.rampColors[key] && this.rampColors[key] !== rampColors[key]) {
-        return true;
+    }
+    /**
+     * 更新风场风向风速
+     * @param uMin
+     * @param uMax
+     * @param vMin
+     * @param vMax
+     */
+
+  }, {
+    key: "updateWindDir",
+    value: function updateWindDir(uMin, uMax, vMin, vMax) {
+      this.windData.uMin = uMin;
+      this.windData.uMax = uMax;
+      this.windData.vMin = vMin;
+      this.windData.vMax = vMax;
+    }
+    /**
+     * update rampColors
+     * @param rampColors
+     */
+
+  }, {
+    key: "updateColorRampTexture",
+    value: function updateColorRampTexture(rampColors) {
+      if (this.isColorChanged(rampColors)) {
+        this.rampColors = rampColors;
+        var gl = this.gl;
+        gl.deleteTexture(this.colorRampTexture);
+        this.colorRampTexture = glUtils.createTexture(gl, gl.LINEAR, getColorRamp(rampColors), 16, 16);
       }
     }
-    return false;
-  }
-  reSize(width, height) {
-    if (width !== this.width || height !== this.height) {
-      const gl = this.gl;
-      gl.deleteTexture(this.backgroundTexture);
-      gl.deleteTexture(this.screenTexture);
-      this.width = width;
-      this.height = height;
-      const emptyPixels = new Uint8Array(width * height * 4);
-      this.backgroundTexture = glUtils.createTexture(gl, gl.NEAREST, emptyPixels, width, height);
-      this.screenTexture = glUtils.createTexture(gl, gl.NEAREST, emptyPixels, width, height);
+  }, {
+    key: "isColorChanged",
+    value: function isColorChanged(rampColors) {
+      var keys = Object.keys(rampColors);
+
+      for (var _i2 = 0, _keys = keys; _i2 < _keys.length; _i2++) {
+        var item = _keys[_i2];
+
+        var _key = Number(item); // exist new key -> color need update
+
+
+        if (!this.rampColors[_key]) {
+          return true;
+        } // value changed -> color need update
+
+
+        if (this.rampColors[_key] && this.rampColors[_key] !== rampColors[_key]) {
+          return true;
+        }
+      }
+
+      return false;
     }
-  }
-  draw() {
-    var _a;
-    if ((_a = this.windData) == null ? void 0 : _a.image) {
-      const gl = this.gl;
-      glUtils.bindTexture(gl, this.windTexture, 0);
-      glUtils.bindTexture(gl, this.particleStateTexture0, 1);
-      this.drawScreen();
-      this.updateParticles();
-      return { d: this.pixels, w: this.width, h: this.height };
-    } else {
-      return { d: new Uint8Array([0, 0, 0, 0]), w: 1, h: 1 };
+  }, {
+    key: "reSize",
+    value: function reSize(width, height) {
+      if (width !== this.width || height !== this.height) {
+        var gl = this.gl;
+        gl.deleteTexture(this.backgroundTexture);
+        gl.deleteTexture(this.screenTexture);
+        this.width = width;
+        this.height = height;
+        var emptyPixels = new Uint8Array(width * height * 4); // screen textures to hold the drawn screen for the previous and the current frame
+
+        this.backgroundTexture = glUtils.createTexture(gl, gl.NEAREST, emptyPixels, width, height);
+        this.screenTexture = glUtils.createTexture(gl, gl.NEAREST, emptyPixels, width, height);
+      }
     }
-  }
-  drawScreen() {
-    const gl = this.gl;
-    bindFramebuffer(gl, this.framebuffer, this.screenTexture);
-    gl.viewport(0, 0, this.width, this.height);
-    gl.disable(gl.BLEND);
-    this.drawFullTexture(this.backgroundTexture, this.fadeOpacity);
-    this.drawParticles();
-    this.pixels = new Uint8Array(4 * this.width * this.height);
-    gl.readPixels(0, 0, this.width, this.height, gl.RGBA, gl.UNSIGNED_BYTE, this.pixels);
-    bindFramebuffer(gl, null, null);
-    gl.viewport(0, 0, this.gl.canvas.width, this.gl.canvas.height);
-    const temp = this.backgroundTexture;
-    this.backgroundTexture = this.screenTexture;
-    this.screenTexture = temp;
-  }
-  drawFullTexture(texture, opacity) {
-    const gl = this.gl;
-    const program = this.fullScreenProgram;
-    gl.useProgram(program);
-    gl.bindBuffer(gl.ARRAY_BUFFER, this.quadBuffer);
-    gl.vertexAttribPointer(program.a_pos, 2, gl.FLOAT, false, 0, 0);
-    gl.enableVertexAttribArray(program.a_pos);
-    gl.bindBuffer(gl.ARRAY_BUFFER, null);
-    glUtils.bindTexture(gl, texture, 2);
-    gl.uniform1i(program.u_screen, 2);
-    gl.uniform1f(program.u_opacity, opacity);
-    gl.drawArrays(gl.TRIANGLES, 0, 6);
-  }
-  drawParticles() {
-    const gl = this.gl;
-    const program = this.drawProgram;
-    gl.useProgram(program);
-    bindAttribute(gl, this.particleIndexBuffer, program.a_index, 1);
-    glUtils.bindTexture(gl, this.colorRampTexture, 2);
-    gl.uniform1i(program.u_wind, 0);
-    gl.uniform1i(program.u_particles, 1);
-    gl.uniform1i(program.u_color_ramp, 2);
-    gl.uniform1f(program.u_particles_res, this.particleStateResolution);
-    gl.uniform2f(program.u_wind_min, this.windData.uMin, this.windData.vMin);
-    gl.uniform2f(program.u_wind_max, this.windData.uMax, this.windData.vMax);
-    gl.drawArrays(gl.POINTS, 0, this.numParticlesSize);
-  }
-  updateParticles() {
-    const gl = this.gl;
-    bindFramebuffer(gl, this.framebuffer, this.particleStateTexture1);
-    gl.viewport(0, 0, this.particleStateResolution, this.particleStateResolution);
-    const program = this.updateProgram;
-    gl.useProgram(program);
-    bindAttribute(gl, this.quadBuffer, program.a_pos, 2);
-    gl.uniform1i(program.u_wind, 0);
-    gl.uniform1i(program.u_particles, 1);
-    gl.uniform1f(program.u_rand_seed, Math.random());
-    gl.uniform2f(program.u_wind_res, this.windData.image.width * 2, this.windData.image.height * 2);
-    gl.uniform2f(program.u_wind_min, this.windData.uMin, this.windData.vMin);
-    gl.uniform2f(program.u_wind_max, this.windData.uMax, this.windData.vMax);
-    gl.uniform1f(program.u_speed_factor, this.speedFactor);
-    gl.uniform1f(program.u_drop_rate, this.dropRate);
-    gl.uniform1f(program.u_drop_rate_bump, this.dropRateBump);
-    gl.drawArrays(gl.TRIANGLES, 0, 6);
-    const temp = this.particleStateTexture0;
-    this.particleStateTexture0 = this.particleStateTexture1;
-    this.particleStateTexture1 = temp;
-    bindFramebuffer(gl, null, null);
-  }
-  destroy() {
-    this.gl.deleteBuffer(this.quadBuffer);
-    this.gl.deleteBuffer(this.particleIndexBuffer);
-    this.gl.deleteFramebuffer(this.framebuffer);
-    this.gl.deleteShader(this.drawProgram.vertexShader);
-    this.gl.deleteShader(this.drawProgram.fragmentShader);
-    this.gl.deleteProgram(this.drawProgram);
-    this.gl.deleteShader(this.fullScreenProgram.vertexShader);
-    this.gl.deleteShader(this.fullScreenProgram.fragmentShader);
-    this.gl.deleteProgram(this.fullScreenProgram);
-    this.gl.deleteShader(this.updateProgram.vertexShader);
-    this.gl.deleteShader(this.updateProgram.fragmentShader);
-    this.gl.deleteProgram(this.updateProgram);
-    this.gl.deleteTexture(this.colorRampTexture);
-    this.gl.deleteTexture(this.backgroundTexture);
-    this.gl.deleteTexture(this.screenTexture);
-    this.gl.deleteTexture(this.particleStateTexture0);
-    this.gl.deleteTexture(this.particleStateTexture1);
-    this.gl.deleteTexture(this.windTexture);
-  }
-};
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  Wind
-});
+  }, {
+    key: "draw",
+    value: function draw() {
+      var _this$windData;
+
+      if ((_this$windData = this.windData) !== null && _this$windData !== void 0 && _this$windData.image) {
+        var gl = this.gl;
+        glUtils.bindTexture(gl, this.windTexture, 0);
+        glUtils.bindTexture(gl, this.particleStateTexture0, 1);
+        this.drawScreen(); // draw Particles into framebuffer
+
+        this.updateParticles();
+        return {
+          d: this.pixels,
+          w: this.width,
+          h: this.height
+        };
+      } else {
+        return {
+          d: new Uint8Array([0, 0, 0, 0]),
+          w: 1,
+          h: 1
+        };
+      }
+    }
+  }, {
+    key: "drawScreen",
+    value: function drawScreen() {
+      var gl = this.gl; // draw the screen into a temporary framebuffer to retain it as the background on the next frame
+
+      bindFramebuffer(gl, this.framebuffer, this.screenTexture);
+      gl.viewport(0, 0, this.width, this.height);
+      gl.disable(gl.BLEND);
+      this.drawFullTexture(this.backgroundTexture, this.fadeOpacity);
+      this.drawParticles();
+      this.pixels = new Uint8Array(4 * this.width * this.height);
+      gl.readPixels(0, 0, this.width, this.height, gl.RGBA, gl.UNSIGNED_BYTE, this.pixels);
+      bindFramebuffer(gl, null, null);
+      gl.viewport(0, 0, this.gl.canvas.width, this.gl.canvas.height); //   save the current screen as the background for the next frame
+
+      var temp = this.backgroundTexture;
+      this.backgroundTexture = this.screenTexture;
+      this.screenTexture = temp;
+    }
+  }, {
+    key: "drawFullTexture",
+    value: function drawFullTexture(texture, opacity) {
+      var gl = this.gl;
+      var program = this.fullScreenProgram;
+      gl.useProgram(program); // bindAttribute(gl, this.quadBuffer, program.a_pos, 2);
+
+      gl.bindBuffer(gl.ARRAY_BUFFER, this.quadBuffer);
+      gl.vertexAttribPointer(program.a_pos, 2, gl.FLOAT, false, 0, 0);
+      gl.enableVertexAttribArray(program.a_pos);
+      gl.bindBuffer(gl.ARRAY_BUFFER, null);
+      glUtils.bindTexture(gl, texture, 2);
+      gl.uniform1i(program.u_screen, 2);
+      gl.uniform1f(program.u_opacity, opacity);
+      gl.drawArrays(gl.TRIANGLES, 0, 6); // gl.drawArrays(gl.POINTS, 0, 6);
+    }
+  }, {
+    key: "drawParticles",
+    value: function drawParticles() {
+      var gl = this.gl;
+      var program = this.drawProgram;
+      gl.useProgram(program);
+      bindAttribute(gl, this.particleIndexBuffer, program.a_index, 1);
+      glUtils.bindTexture(gl, this.colorRampTexture, 2);
+      gl.uniform1i(program.u_wind, 0);
+      gl.uniform1i(program.u_particles, 1);
+      gl.uniform1i(program.u_color_ramp, 2);
+      gl.uniform1f(program.u_particles_res, this.particleStateResolution);
+      gl.uniform2f(program.u_wind_min, this.windData.uMin, this.windData.vMin);
+      gl.uniform2f(program.u_wind_max, this.windData.uMax, this.windData.vMax);
+      gl.drawArrays(gl.POINTS, 0, this.numParticlesSize);
+    }
+  }, {
+    key: "updateParticles",
+    value: function updateParticles() {
+      var gl = this.gl;
+      bindFramebuffer(gl, this.framebuffer, this.particleStateTexture1);
+      gl.viewport(0, 0, this.particleStateResolution, this.particleStateResolution);
+      var program = this.updateProgram;
+      gl.useProgram(program);
+      bindAttribute(gl, this.quadBuffer, program.a_pos, 2);
+      gl.uniform1i(program.u_wind, 0);
+      gl.uniform1i(program.u_particles, 1);
+      gl.uniform1f(program.u_rand_seed, Math.random());
+      gl.uniform2f(program.u_wind_res, this.windData.image.width * 2, this.windData.image.height * 2);
+      gl.uniform2f(program.u_wind_min, this.windData.uMin, this.windData.vMin);
+      gl.uniform2f(program.u_wind_max, this.windData.uMax, this.windData.vMax);
+      gl.uniform1f(program.u_speed_factor, this.speedFactor);
+      gl.uniform1f(program.u_drop_rate, this.dropRate);
+      gl.uniform1f(program.u_drop_rate_bump, this.dropRateBump);
+      gl.drawArrays(gl.TRIANGLES, 0, 6); // swap the particle state textures so the new one becomes the current one
+
+      var temp = this.particleStateTexture0;
+      this.particleStateTexture0 = this.particleStateTexture1;
+      this.particleStateTexture1 = temp;
+      bindFramebuffer(gl, null, null); // gl.viewport(0, 0, this.gl.canvas.width, this.gl.canvas.height);
+    }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      // private drawProgram: WebGLProgram;
+      // private fullScreenProgram: WebGLProgram;
+      // private updateProgram: WebGLProgram;
+      // private quadBuffer: WebGLBuffer | null;
+      // private particleIndexBuffer: WebGLBuffer | null;
+      // private framebuffer: WebGLFramebuffer | null;
+      // private colorRampTexture: WebGLTexture | null;
+      // private backgroundTexture: WebGLTexture | null;
+      // private screenTexture: WebGLTexture | null;
+      // private particleStateTexture0: WebGLTexture | null;
+      // private particleStateTexture1: WebGLTexture | null;
+      // private windTexture: WebGLTexture | null;
+      this.gl.deleteBuffer(this.quadBuffer);
+      this.gl.deleteBuffer(this.particleIndexBuffer);
+      this.gl.deleteFramebuffer(this.framebuffer); // @ts-ignore
+
+      this.gl.deleteShader(this.drawProgram.vertexShader); // @ts-ignore
+
+      this.gl.deleteShader(this.drawProgram.fragmentShader);
+      this.gl.deleteProgram(this.drawProgram); // @ts-ignore
+
+      this.gl.deleteShader(this.fullScreenProgram.vertexShader); // @ts-ignore
+
+      this.gl.deleteShader(this.fullScreenProgram.fragmentShader);
+      this.gl.deleteProgram(this.fullScreenProgram); // @ts-ignore
+
+      this.gl.deleteShader(this.updateProgram.vertexShader); // @ts-ignore
+
+      this.gl.deleteShader(this.updateProgram.fragmentShader);
+      this.gl.deleteProgram(this.updateProgram);
+      this.gl.deleteTexture(this.colorRampTexture);
+      this.gl.deleteTexture(this.backgroundTexture);
+      this.gl.deleteTexture(this.screenTexture);
+      this.gl.deleteTexture(this.particleStateTexture0);
+      this.gl.deleteTexture(this.particleStateTexture1);
+      this.gl.deleteTexture(this.windTexture);
+    }
+  }]);
+  return Wind;
+}();
+
+exports.Wind = Wind;