@antv/l7-layers 2.9.21 → 2.9.22-alpha.0

package/es/wind/models/utils.js

@@ -1,21 +1,29 @@
 export function createProgram(gl, vshader, fshader) {
-  var vertexShader = loadShader(gl, gl.VERTEX_SHADER, vshader);
-  var fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fshader);
+  // Create shader object
+  var vertexShader = loadShader(gl, gl.VERTEX_SHADER, vshader); // 创建顶点着色器对象
+
+  var fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fshader); // 创建片元着色器对象
 
   if (!vertexShader || !fragmentShader) {
     return null;
-  }
+  } // Create a program object
 
-  var program = gl.createProgram();
+
+  var program = gl.createProgram(); // 创建程序对象
 
   if (!program) {
     return null;
-  }
+  } // Attach the shader objects
+
+
+  gl.attachShader(program, vertexShader); // 绑定着色器对象
+
+  gl.attachShader(program, fragmentShader); // Link the program object
 
-  gl.attachShader(program, vertexShader);
-  gl.attachShader(program, fragmentShader);
-  gl.linkProgram(program);
-  var linked = gl.getProgramParameter(program, gl.LINK_STATUS);
+  gl.linkProgram(program); // 链接着色器对象
+  // Check the result of linking
+
+  var linked = gl.getProgramParameter(program, gl.LINK_STATUS); // 判断着色器对象是否链接成功
 
   if (!linked) {
     var error = gl.getProgramInfoLog(program);
@@ -29,32 +37,43 @@ export function createProgram(gl, vshader, fshader) {
   var numAttributes = gl.getProgramParameter(program, gl.ACTIVE_ATTRIBUTES);
 
   for (var i = 0; i < numAttributes; i++) {
-    var attribute = gl.getActiveAttrib(program, i);
+    var attribute = gl.getActiveAttrib(program, i); // @ts-ignore
+
     program[attribute.name] = gl.getAttribLocation(program, attribute.name);
   }
 
   var numUniforms = gl.getProgramParameter(program, gl.ACTIVE_UNIFORMS);
 
   for (var i$1 = 0; i$1 < numUniforms; i$1++) {
-    var uniform = gl.getActiveUniform(program, i$1);
+    var uniform = gl.getActiveUniform(program, i$1); // @ts-ignore
+
     program[uniform.name] = gl.getUniformLocation(program, uniform.name);
-  }
+  } // @ts-ignore
+
+
+  program.vertexShader = vertexShader; // @ts-ignore
 
-  program.vertexShader = vertexShader;
   program.fragmentShader = fragmentShader;
   return program;
 }
 export function loadShader(gl, type, source) {
-  var shader = gl.createShader(type);
+  // Create shader object
+  var shader = gl.createShader(type); // 生成着色器对象
 
   if (shader == null) {
     console.warn('unable to create shader');
     return null;
-  }
+  } // Set the shader program
+
+
+  gl.shaderSource(shader, source); // 载入着色器
+  // Compile the shader
+
+  gl.compileShader(shader); // 编译着色器代码
+  // Check the result of compilation
 
-  gl.shaderSource(shader, source);
-  gl.compileShader(shader);
-  var compiled = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
+  var compiled = gl.getShaderParameter(shader, gl.COMPILE_STATUS); // 判断着色器对象是否生成成功
+  // gl.SHADER_TYPE、gl.DELETE_STATUS、gl.COMPILE_STATUS
 
   if (!compiled) {
     var error = gl.getShaderInfoLog(shader);
@@ -104,8 +123,10 @@ export function bindAttriBuffer(gl, attrName, vertices, count, program) {
     console.warn('failed create vertex buffer');
   }
 
-  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
-  gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
+  gl.bindBuffer(gl.ARRAY_BUFFER, buffer); // 将缓冲区对象绑定到目标
+
+  gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); // 向缓冲区对象中写入数据
+
   var attr = gl.getAttribLocation(program, attrName);
   gl.vertexAttribPointer(attr, count, gl.FLOAT, false, 0, 0);
   gl.enableVertexAttribArray(attr);
@@ -158,7 +179,8 @@ export function setUnifrom(gl, location, data, vec) {
       break;
 
     case 'bool':
-      gl.uniform1i(location, data);
+      gl.uniform1i(location, data); // 1 - true    0 - false
+
       break;
 
     case 'sampler2d':
@@ -180,9 +202,12 @@ export function initFramebuffer(gl) {
   gl.bindRenderbuffer(gl.RENDERBUFFER, depthbuffer);
   gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT16, OFFER_SCREEN_WIDTH, OFFER_SCREEN_HEIGHT);
   gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, depthbuffer);
-  var texture = gl.createTexture();
-  FRAMEBUFFER.texture = texture;
-  FRAMEBUFFER.width = OFFER_SCREEN_WIDTH;
+  var texture = gl.createTexture(); // @ts-ignore
+
+  FRAMEBUFFER.texture = texture; // @ts-ignore
+
+  FRAMEBUFFER.width = OFFER_SCREEN_WIDTH; // @ts-ignore
+
   FRAMEBUFFER.height = OFFER_SCREEN_HEIGHT;
   gl.bindTexture(gl.TEXTURE_2D, texture);
   gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
@@ -198,5 +223,4 @@ export function initFramebuffer(gl) {
     OFFER_SCREEN_WIDTH: OFFER_SCREEN_WIDTH,
     OFFER_SCREEN_HEIGHT: OFFER_SCREEN_HEIGHT
   };
-}
-//# sourceMappingURL=utils.js.map
+}

package/es/wind/models/wind.js

@@ -12,11 +12,15 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 import { AttributeType, gl } from '@antv/l7-core';
 import { FrequencyController } from '@antv/l7-utils';
-import BaseModel from '../../core/BaseModel';
-import { RasterImageTriangulation } from '../../core/triangulation';
+import BaseModel from "../../core/BaseModel";
+import { RasterImageTriangulation } from "../../core/triangulation";
+
+/* babel-plugin-inline-import '../shaders/wind_frag.glsl' */
 var WindFrag = "precision mediump float;\nuniform float u_opacity: 1.0;\nuniform sampler2D u_texture;\nvarying vec2 v_texCoord;\nvoid main() {\n  vec4 color = texture2D(u_texture,vec2(v_texCoord.x,v_texCoord.y));\n  gl_FragColor = color;\n  gl_FragColor.a *= u_opacity;\n}\n";
+
+/* babel-plugin-inline-import '../shaders/wind_vert.glsl' */
 var WindVert = "precision highp float;\nuniform mat4 u_ModelMatrix;\nuniform mat4 u_Mvp;\nattribute vec3 a_Position;\nattribute vec2 a_Uv;\nvarying vec2 v_texCoord;\n#pragma include \"projection\"\nvoid main() {\n   v_texCoord = a_Uv;\n   vec4 project_pos = project_position(vec4(a_Position, 1.0));\n   // gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy,0., 1.0));\n   if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x\n      gl_Position = u_Mvp * (vec4(project_pos.xy,0., 1.0));\n   } else {\n      gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy,0., 1.0));\n   }\n}\n";
-import { Wind } from './windRender';
+import { Wind } from "./windRender";
 var defaultRampColors = {
   0.0: '#3288bd',
   0.1: '#66c2a5',
@@ -28,7 +32,7 @@ var defaultRampColors = {
   1.0: '#d53e4f'
 };
 
-var WindModel = function (_BaseModel) {
+var WindModel = /*#__PURE__*/function (_BaseModel) {
   _inherits(WindModel, _BaseModel);
 
   var _super = _createSuper(WindModel);
@@ -44,20 +48,10 @@ var WindModel = function (_BaseModel) {
 
     _this = _super.call.apply(_super, [this].concat(args));
 
-    _defineProperty(_assertThisInitialized(_this), "texture", void 0);
-
-    _defineProperty(_assertThisInitialized(_this), "colorModel", void 0);
-
-    _defineProperty(_assertThisInitialized(_this), "wind", void 0);
-
-    _defineProperty(_assertThisInitialized(_this), "imageCoords", void 0);
-
     _defineProperty(_assertThisInitialized(_this), "sizeScale", 0.5);
 
     _defineProperty(_assertThisInitialized(_this), "frequency", new FrequencyController(7.2));
 
-    _defineProperty(_assertThisInitialized(_this), "cacheZoom", void 0);
-
     return _this;
   }
 
@@ -66,6 +60,7 @@ var WindModel = function (_BaseModel) {
     value: function render() {
       var _this2 = this;
 
+      // Tip: 控制风场的平均更新频率
       this.frequency.run(function () {
         _this2.drawWind();
       });
@@ -138,7 +133,7 @@ var WindModel = function (_BaseModel) {
           dropRateBump: dropRateBump,
           rampColors: rampColors
         };
-        _this3.wind = new Wind(options);
+        _this3.wind = new Wind(options); // imageData[0] 风场图
 
         _this3.wind.setWind({
           uMin: uMin,
@@ -217,12 +212,14 @@ var WindModel = function (_BaseModel) {
   }, {
     key: "registerBuiltinAttributes",
     value: function registerBuiltinAttributes() {
+      // point layer size;
       this.styleAttributeService.registerStyleAttribute({
         name: 'uv',
         type: AttributeType.Attribute,
         descriptor: {
           name: 'a_Uv',
           buffer: {
+            // give the WebGL driver a hint that this buffer may change
             usage: gl.DYNAMIC_DRAW,
             data: [],
             type: gl.FLOAT
@@ -294,7 +291,8 @@ var WindModel = function (_BaseModel) {
         var _this$wind$draw = this.wind.draw(),
             d = _this$wind$draw.d,
             w = _this$wind$draw.w,
-            h = _this$wind$draw.h;
+            h = _this$wind$draw.h; // TODO: 恢复 L7 渲染流程中 gl 状态
+
 
         this.rendererService.setBaseState();
         this.texture.update({
@@ -330,5 +328,4 @@ var WindModel = function (_BaseModel) {
   return WindModel;
 }(BaseModel);
 
-export { WindModel as default };
-//# sourceMappingURL=wind.js.map
+export { WindModel as default };

package/es/wind/models/windRender.js

@@ -1,8 +1,8 @@
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import * as glUtils from './utils';
-import { drawFrag, drawVert, fullScreenFrag, fullScreenVert, updateFrag, updateVert } from './windShader';
+import * as glUtils from "./utils";
+import { drawFrag, drawVert, fullScreenFrag, fullScreenVert, updateFrag, updateVert } from "./windShader";
 
 function getColorRamp(colors) {
   var canvas = document.createElement('canvas');
@@ -17,7 +17,8 @@ function getColorRamp(colors) {
   }
 
   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);
 }
@@ -36,7 +37,7 @@ function bindFramebuffer(gl, framebuffer, texture) {
   }
 }
 
-export var Wind = function () {
+export var Wind = /*#__PURE__*/function () {
   function Wind(options) {
     _classCallCheck(this, Wind);
 
@@ -44,52 +45,8 @@ export var Wind = function () {
 
     _defineProperty(this, "height", 512);
 
-    _defineProperty(this, "pixels", void 0);
-
-    _defineProperty(this, "fadeOpacity", void 0);
-
-    _defineProperty(this, "speedFactor", void 0);
-
-    _defineProperty(this, "dropRate", void 0);
-
-    _defineProperty(this, "dropRateBump", void 0);
-
-    _defineProperty(this, "gl", void 0);
-
-    _defineProperty(this, "drawProgram", void 0);
-
-    _defineProperty(this, "fullScreenProgram", void 0);
-
-    _defineProperty(this, "updateProgram", void 0);
-
-    _defineProperty(this, "rampColors", void 0);
-
     _defineProperty(this, "numParticles", 65536);
 
-    _defineProperty(this, "numParticlesSize", void 0);
-
-    _defineProperty(this, "particleStateResolution", void 0);
-
-    _defineProperty(this, "quadBuffer", void 0);
-
-    _defineProperty(this, "particleIndexBuffer", void 0);
-
-    _defineProperty(this, "framebuffer", void 0);
-
-    _defineProperty(this, "colorRampTexture", void 0);
-
-    _defineProperty(this, "backgroundTexture", void 0);
-
-    _defineProperty(this, "screenTexture", void 0);
-
-    _defineProperty(this, "particleStateTexture0", void 0);
-
-    _defineProperty(this, "particleStateTexture1", void 0);
-
-    _defineProperty(this, "windTexture", void 0);
-
-    _defineProperty(this, "windData", void 0);
-
     this.gl = options.glContext;
     this.width = options.imageWidth;
     this.height = options.imageHeight;
@@ -105,26 +62,34 @@ export var Wind = function () {
     key: "init",
     value: function init() {
       var gl = this.gl;
-      this.fadeOpacity = 0.996;
-      this.speedFactor = 0.25;
-      this.dropRate = 0.003;
-      this.dropRateBump = 0.01;
+      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, drawVert, drawFrag);
       this.fullScreenProgram = glUtils.createProgram(gl, fullScreenVert, fullScreenFrag);
       this.updateProgram = glUtils.createProgram(gl, updateVert, 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);
+      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);
-      var particleRes = this.particleStateResolution = Math.ceil(Math.sqrt(this.numParticles));
+      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;
       var particleState = new Uint8Array(this.numParticlesSize * 4);
 
       for (var i = 0; i < particleState.length; i++) {
-        particleState[i] = Math.floor(Math.random() * 256);
-      }
+        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);
@@ -142,20 +107,28 @@ export var Wind = function () {
       this.windData = windData;
       this.windTexture = glUtils.createDataTexture(this.gl, this.gl.LINEAR, windData.image);
     }
+    /**
+     * 更新风场粒子数量
+     * @param num
+     */
+
   }, {
     key: "updateParticelNum",
     value: function updateParticelNum(num) {
       var gl = this.gl;
 
       if (num !== this.numParticles) {
-        this.numParticles = num;
+        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);
-        }
+          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);
@@ -168,6 +141,14 @@ export var Wind = function () {
         this.particleIndexBuffer = glUtils.createBuffer(gl, particleIndices);
       }
     }
+    /**
+     * 更新风场风向风速
+     * @param uMin
+     * @param uMax
+     * @param vMin
+     * @param vMax
+     */
+
   }, {
     key: "updateWindDir",
     value: function updateWindDir(uMin, uMax, vMin, vMax) {
@@ -176,6 +157,11 @@ export var Wind = function () {
       this.windData.vMin = vMin;
       this.windData.vMax = vMax;
     }
+    /**
+     * update rampColors
+     * @param rampColors
+     */
+
   }, {
     key: "updateColorRampTexture",
     value: function updateColorRampTexture(rampColors) {
@@ -194,11 +180,13 @@ export var Wind = function () {
       for (var _i2 = 0, _keys = keys; _i2 < _keys.length; _i2++) {
         var item = _keys[_i2];
 
-        var _key = Number(item);
+        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;
@@ -216,7 +204,8 @@ export var Wind = function () {
         gl.deleteTexture(this.screenTexture);
         this.width = width;
         this.height = height;
-        var emptyPixels = new Uint8Array(width * height * 4);
+        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);
       }
@@ -230,7 +219,8 @@ export var Wind = function () {
         var gl = this.gl;
         glUtils.bindTexture(gl, this.windTexture, 0);
         glUtils.bindTexture(gl, this.particleStateTexture0, 1);
-        this.drawScreen();
+        this.drawScreen(); // draw Particles into framebuffer
+
         this.updateParticles();
         return {
           d: this.pixels,
@@ -248,7 +238,8 @@ export var Wind = function () {
   }, {
     key: "drawScreen",
     value: function drawScreen() {
-      var gl = this.gl;
+      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);
@@ -257,7 +248,8 @@ export var Wind = function () {
       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);
+      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;
@@ -267,7 +259,8 @@ export var Wind = function () {
     value: function drawFullTexture(texture, opacity) {
       var gl = this.gl;
       var program = this.fullScreenProgram;
-      gl.useProgram(program);
+      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);
@@ -275,7 +268,7 @@ export var Wind = function () {
       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.TRIANGLES, 0, 6); // gl.drawArrays(gl.POINTS, 0, 6);
     }
   }, {
     key: "drawParticles",
@@ -311,25 +304,44 @@ export var Wind = function () {
       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);
+      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);
+      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);
-      this.gl.deleteShader(this.drawProgram.vertexShader);
+      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);
-      this.gl.deleteShader(this.fullScreenProgram.vertexShader);
+      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);
-      this.gl.deleteShader(this.updateProgram.vertexShader);
+      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);
@@ -342,5 +354,4 @@ export var Wind = function () {
   }]);
 
   return Wind;
-}();
-//# sourceMappingURL=windRender.js.map
+}();

package/es/wind/models/windShader.d.ts

@@ -4,9 +4,9 @@
  * updateProgram        updateVert updateFrag
  * fullScreenProgram    fullScreenVert fullScreenFrag
  */
-export declare const drawVert = "\n precision mediump float;\n \n attribute float a_index;\n \n uniform sampler2D u_particles;\n uniform float u_particles_res;\n \n varying vec2 v_particle_pos;\n \n void main() {\n     vec4 color = texture2D(u_particles, vec2(\n         fract(a_index / u_particles_res),\n         floor(a_index / u_particles_res) / u_particles_res)\n     );\n                \n     // decode current particle position from the pixel's RGBA value\n     v_particle_pos = vec2( color.r / 255.0 + color.b, color.g / 255.0 + color.a);\n                         \n     gl_PointSize = 1.0;\n     gl_Position = vec4(2.0 * v_particle_pos.x - 1.0, 1.0 - 2.0 * v_particle_pos.y, 0, 1);\n }";
-export declare const drawFrag = "\n precision mediump float;\n \n uniform sampler2D u_wind;\n uniform vec2 u_wind_min;\n uniform vec2 u_wind_max;\n uniform sampler2D u_color_ramp;\n \n varying vec2 v_particle_pos;\n \n void main() {\n     vec2 velocity = mix(u_wind_min, u_wind_max, texture2D(u_wind, v_particle_pos).rg);\n     float speed_t = length(velocity) / length(u_wind_max);\n     \n     // color ramp is encoded in a 16x16 texture    \n     vec2 ramp_pos = vec2( fract(16.0 * speed_t), floor(16.0 * speed_t) / 16.0);  \n \n     gl_FragColor = texture2D(u_color_ramp, ramp_pos);\n }";
-export declare const updateVert = "\n precision mediump float;\n \n attribute vec2 a_pos;\n \n varying vec2 v_tex_pos;\n \n void main() {\n     v_tex_pos = a_pos;\n     gl_Position = vec4(1.0 - 2.0 * a_pos, 0, 1);\n     // framebuffer \u59CB\u7EC8\u7528\u94FA\u6EE1\u5C4F\u5E55\u7684 texture\n }";
-export declare const updateFrag = "\n precision highp float;\n \n uniform sampler2D u_particles;\n uniform sampler2D u_wind;\n uniform vec2 u_wind_res;\n uniform vec2 u_wind_min;\n uniform vec2 u_wind_max;\n uniform float u_rand_seed;\n uniform float u_speed_factor;\n uniform float u_drop_rate;\n uniform float u_drop_rate_bump;\n \n varying vec2 v_tex_pos;\n \n // pseudo-random generator\n const vec3 rand_constants = vec3(12.9898, 78.233, 4375.85453);\n float rand(const vec2 co) {\n float t = dot(rand_constants.xy, co);\n     return fract(sin(t) * (rand_constants.z + t));\n }\n     \n // wind speed lookup; use manual bilinear filtering based on 4 adjacent pixels for smooth interpolation\n vec2 lookup_wind(const vec2 uv) {\n     // return texture2D(u_wind, uv).rg; // lower-res hardware filtering\n     vec2 px = 1.0 / u_wind_res;\n     vec2 vc = (floor(uv * u_wind_res)) * px;\n     vec2 f = fract(uv * u_wind_res);\n     vec2 tl = texture2D(u_wind, vc).rg;\n     vec2 tr = texture2D(u_wind, vc + vec2(px.x, 0)).rg;\n     vec2 bl = texture2D(u_wind, vc + vec2(0, px.y)).rg;\n     vec2 br = texture2D(u_wind, vc + px).rg;\n     return mix(mix(tl, tr, f.x), mix(bl, br, f.x), f.y);\n }\n \n void main() {\n     vec4 color = texture2D(u_particles, v_tex_pos);\n     vec2 pos = vec2(\n         color.r / 255.0 + color.b,\n         color.g / 255.0 + color.a); // decode particle position from pixel RGBA\n     vec2 velocity = mix(u_wind_min, u_wind_max, lookup_wind(pos));\n     float speed_t = length(velocity) / length(u_wind_max);\n                 \n     // take EPSG:4236 distortion into account for calculating where the particle moved\n     float distortion = cos(radians(pos.y * 180.0 - 90.0));\n     vec2 offset = vec2(velocity.x / distortion, -velocity.y) * 0.0001 * u_speed_factor;\n \n     // update particle position, wrapping around the date line\n     pos = fract(1.0 + pos + offset);\n     \n     // a random seed to use for the particle drop\n     vec2 seed = (pos + v_tex_pos) * u_rand_seed;\n     \n     // drop rate is a chance a particle will restart at random position, to avoid degeneration\n     float drop_rate = u_drop_rate + speed_t * u_drop_rate_bump;\n     float drop = step(1.0 - drop_rate, rand(seed));\n     \n     vec2 random_pos = vec2(\n         rand(seed + 1.3),\n         rand(seed + 2.1));\n         pos = mix(pos, random_pos, drop);\n         \n     // encode the new particle position back into RGBA\n     gl_FragColor = vec4(\n         fract(pos * 255.0),\n         floor(pos * 255.0) / 255.0);\n }";
-export declare const fullScreenVert = "\n     precision mediump float;\n     \n     attribute vec2 a_pos;\n     \n     varying vec2 v_tex_pos;\n     \n     void main() {\n         v_tex_pos = a_pos;\n         gl_Position = vec4(1.0 - 2.0 * a_pos, 0.0, 1.0);\n         gl_PointSize = 100.0;\n }";
-export declare const fullScreenFrag = "\n precision mediump float;\n \n uniform sampler2D u_screen;\n uniform float u_opacity;\n varying vec2 v_tex_pos;\n \n void main() {\n     vec4 color = texture2D(u_screen, 1.0 - v_tex_pos);\n     \n     // a hack to guarantee opacity fade out even with a value close to 1.0\n     gl_FragColor = vec4(floor(255.0 * color * u_opacity) / 255.0);\n }";
+export declare const drawVert = "\n precision mediump float;\n\n attribute float a_index;\n\n uniform sampler2D u_particles;\n uniform float u_particles_res;\n\n varying vec2 v_particle_pos;\n\n void main() {\n     vec4 color = texture2D(u_particles, vec2(\n         fract(a_index / u_particles_res),\n         floor(a_index / u_particles_res) / u_particles_res)\n     );\n\n     // decode current particle position from the pixel's RGBA value\n     v_particle_pos = vec2( color.r / 255.0 + color.b, color.g / 255.0 + color.a);\n\n     gl_PointSize = 1.0;\n     gl_Position = vec4(2.0 * v_particle_pos.x - 1.0, 1.0 - 2.0 * v_particle_pos.y, 0, 1);\n }";
+export declare const drawFrag = "\n precision mediump float;\n\n uniform sampler2D u_wind;\n uniform vec2 u_wind_min;\n uniform vec2 u_wind_max;\n uniform sampler2D u_color_ramp;\n\n varying vec2 v_particle_pos;\n\n void main() {\n     vec2 velocity = mix(u_wind_min, u_wind_max, texture2D(u_wind, v_particle_pos).rg);\n     float speed_t = length(velocity) / length(u_wind_max);\n\n     // color ramp is encoded in a 16x16 texture\n     vec2 ramp_pos = vec2( fract(16.0 * speed_t), floor(16.0 * speed_t) / 16.0);\n\n     gl_FragColor = texture2D(u_color_ramp, ramp_pos);\n }";
+export declare const updateVert = "\n precision mediump float;\n\n attribute vec2 a_pos;\n\n varying vec2 v_tex_pos;\n\n void main() {\n     v_tex_pos = a_pos;\n     gl_Position = vec4(1.0 - 2.0 * a_pos, 0, 1);\n     // framebuffer \u59CB\u7EC8\u7528\u94FA\u6EE1\u5C4F\u5E55\u7684 texture\n }";
+export declare const updateFrag = "\n precision highp float;\n\n uniform sampler2D u_particles;\n uniform sampler2D u_wind;\n uniform vec2 u_wind_res;\n uniform vec2 u_wind_min;\n uniform vec2 u_wind_max;\n uniform float u_rand_seed;\n uniform float u_speed_factor;\n uniform float u_drop_rate;\n uniform float u_drop_rate_bump;\n\n varying vec2 v_tex_pos;\n\n // pseudo-random generator\n const vec3 rand_constants = vec3(12.9898, 78.233, 4375.85453);\n float rand(const vec2 co) {\n float t = dot(rand_constants.xy, co);\n     return fract(sin(t) * (rand_constants.z + t));\n }\n\n // wind speed lookup; use manual bilinear filtering based on 4 adjacent pixels for smooth interpolation\n vec2 lookup_wind(const vec2 uv) {\n     // return texture2D(u_wind, uv).rg; // lower-res hardware filtering\n     vec2 px = 1.0 / u_wind_res;\n     vec2 vc = (floor(uv * u_wind_res)) * px;\n     vec2 f = fract(uv * u_wind_res);\n     vec2 tl = texture2D(u_wind, vc).rg;\n     vec2 tr = texture2D(u_wind, vc + vec2(px.x, 0)).rg;\n     vec2 bl = texture2D(u_wind, vc + vec2(0, px.y)).rg;\n     vec2 br = texture2D(u_wind, vc + px).rg;\n     return mix(mix(tl, tr, f.x), mix(bl, br, f.x), f.y);\n }\n\n void main() {\n     vec4 color = texture2D(u_particles, v_tex_pos);\n     vec2 pos = vec2(\n         color.r / 255.0 + color.b,\n         color.g / 255.0 + color.a); // decode particle position from pixel RGBA\n     vec2 velocity = mix(u_wind_min, u_wind_max, lookup_wind(pos));\n     float speed_t = length(velocity) / length(u_wind_max);\n\n     // take EPSG:4236 distortion into account for calculating where the particle moved\n     float distortion = cos(radians(pos.y * 180.0 - 90.0));\n     vec2 offset = vec2(velocity.x / distortion, -velocity.y) * 0.0001 * u_speed_factor;\n\n     // update particle position, wrapping around the date line\n     pos = fract(1.0 + pos + offset);\n\n     // a random seed to use for the particle drop\n     vec2 seed = (pos + v_tex_pos) * u_rand_seed;\n\n     // drop rate is a chance a particle will restart at random position, to avoid degeneration\n     float drop_rate = u_drop_rate + speed_t * u_drop_rate_bump;\n     float drop = step(1.0 - drop_rate, rand(seed));\n\n     vec2 random_pos = vec2(\n         rand(seed + 1.3),\n         rand(seed + 2.1));\n         pos = mix(pos, random_pos, drop);\n\n     // encode the new particle position back into RGBA\n     gl_FragColor = vec4(\n         fract(pos * 255.0),\n         floor(pos * 255.0) / 255.0);\n }";
+export declare const fullScreenVert = "\n     precision mediump float;\n\n     attribute vec2 a_pos;\n\n     varying vec2 v_tex_pos;\n\n     void main() {\n         v_tex_pos = a_pos;\n         gl_Position = vec4(1.0 - 2.0 * a_pos, 0.0, 1.0);\n         gl_PointSize = 100.0;\n }";
+export declare const fullScreenFrag = "\n precision mediump float;\n\n uniform sampler2D u_screen;\n uniform float u_opacity;\n varying vec2 v_tex_pos;\n\n void main() {\n     vec4 color = texture2D(u_screen, 1.0 - v_tex_pos);\n\n     // a hack to guarantee opacity fade out even with a value close to 1.0\n     gl_FragColor = vec4(floor(255.0 * color * u_opacity) / 255.0);\n }";

package/es/wind/models/windShader.js

@@ -1,7 +1,12 @@
-export var drawVert = "\n precision mediump float;\n \n attribute float a_index;\n \n uniform sampler2D u_particles;\n uniform float u_particles_res;\n \n varying vec2 v_particle_pos;\n \n void main() {\n     vec4 color = texture2D(u_particles, vec2(\n         fract(a_index / u_particles_res),\n         floor(a_index / u_particles_res) / u_particles_res)\n     );\n                \n     // decode current particle position from the pixel's RGBA value\n     v_particle_pos = vec2( color.r / 255.0 + color.b, color.g / 255.0 + color.a);\n                         \n     gl_PointSize = 1.0;\n     gl_Position = vec4(2.0 * v_particle_pos.x - 1.0, 1.0 - 2.0 * v_particle_pos.y, 0, 1);\n }";
-export var drawFrag = "\n precision mediump float;\n \n uniform sampler2D u_wind;\n uniform vec2 u_wind_min;\n uniform vec2 u_wind_max;\n uniform sampler2D u_color_ramp;\n \n varying vec2 v_particle_pos;\n \n void main() {\n     vec2 velocity = mix(u_wind_min, u_wind_max, texture2D(u_wind, v_particle_pos).rg);\n     float speed_t = length(velocity) / length(u_wind_max);\n     \n     // color ramp is encoded in a 16x16 texture    \n     vec2 ramp_pos = vec2( fract(16.0 * speed_t), floor(16.0 * speed_t) / 16.0);  \n \n     gl_FragColor = texture2D(u_color_ramp, ramp_pos);\n }";
-export var updateVert = "\n precision mediump float;\n \n attribute vec2 a_pos;\n \n varying vec2 v_tex_pos;\n \n void main() {\n     v_tex_pos = a_pos;\n     gl_Position = vec4(1.0 - 2.0 * a_pos, 0, 1);\n     // framebuffer \u59CB\u7EC8\u7528\u94FA\u6EE1\u5C4F\u5E55\u7684 texture\n }";
-export var updateFrag = "\n precision highp float;\n \n uniform sampler2D u_particles;\n uniform sampler2D u_wind;\n uniform vec2 u_wind_res;\n uniform vec2 u_wind_min;\n uniform vec2 u_wind_max;\n uniform float u_rand_seed;\n uniform float u_speed_factor;\n uniform float u_drop_rate;\n uniform float u_drop_rate_bump;\n \n varying vec2 v_tex_pos;\n \n // pseudo-random generator\n const vec3 rand_constants = vec3(12.9898, 78.233, 4375.85453);\n float rand(const vec2 co) {\n float t = dot(rand_constants.xy, co);\n     return fract(sin(t) * (rand_constants.z + t));\n }\n     \n // wind speed lookup; use manual bilinear filtering based on 4 adjacent pixels for smooth interpolation\n vec2 lookup_wind(const vec2 uv) {\n     // return texture2D(u_wind, uv).rg; // lower-res hardware filtering\n     vec2 px = 1.0 / u_wind_res;\n     vec2 vc = (floor(uv * u_wind_res)) * px;\n     vec2 f = fract(uv * u_wind_res);\n     vec2 tl = texture2D(u_wind, vc).rg;\n     vec2 tr = texture2D(u_wind, vc + vec2(px.x, 0)).rg;\n     vec2 bl = texture2D(u_wind, vc + vec2(0, px.y)).rg;\n     vec2 br = texture2D(u_wind, vc + px).rg;\n     return mix(mix(tl, tr, f.x), mix(bl, br, f.x), f.y);\n }\n \n void main() {\n     vec4 color = texture2D(u_particles, v_tex_pos);\n     vec2 pos = vec2(\n         color.r / 255.0 + color.b,\n         color.g / 255.0 + color.a); // decode particle position from pixel RGBA\n     vec2 velocity = mix(u_wind_min, u_wind_max, lookup_wind(pos));\n     float speed_t = length(velocity) / length(u_wind_max);\n                 \n     // take EPSG:4236 distortion into account for calculating where the particle moved\n     float distortion = cos(radians(pos.y * 180.0 - 90.0));\n     vec2 offset = vec2(velocity.x / distortion, -velocity.y) * 0.0001 * u_speed_factor;\n \n     // update particle position, wrapping around the date line\n     pos = fract(1.0 + pos + offset);\n     \n     // a random seed to use for the particle drop\n     vec2 seed = (pos + v_tex_pos) * u_rand_seed;\n     \n     // drop rate is a chance a particle will restart at random position, to avoid degeneration\n     float drop_rate = u_drop_rate + speed_t * u_drop_rate_bump;\n     float drop = step(1.0 - drop_rate, rand(seed));\n     \n     vec2 random_pos = vec2(\n         rand(seed + 1.3),\n         rand(seed + 2.1));\n         pos = mix(pos, random_pos, drop);\n         \n     // encode the new particle position back into RGBA\n     gl_FragColor = vec4(\n         fract(pos * 255.0),\n         floor(pos * 255.0) / 255.0);\n }";
-export var fullScreenVert = "\n     precision mediump float;\n     \n     attribute vec2 a_pos;\n     \n     varying vec2 v_tex_pos;\n     \n     void main() {\n         v_tex_pos = a_pos;\n         gl_Position = vec4(1.0 - 2.0 * a_pos, 0.0, 1.0);\n         gl_PointSize = 100.0;\n }";
-export var fullScreenFrag = "\n precision mediump float;\n \n uniform sampler2D u_screen;\n uniform float u_opacity;\n varying vec2 v_tex_pos;\n \n void main() {\n     vec4 color = texture2D(u_screen, 1.0 - v_tex_pos);\n     \n     // a hack to guarantee opacity fade out even with a value close to 1.0\n     gl_FragColor = vec4(floor(255.0 * color * u_opacity) / 255.0);\n }";
-//# sourceMappingURL=windShader.js.map
+/**
+ * drawProgram          drawVert drawFrag
+ * screenProgram        screenVert screenFrag
+ * updateProgram        updateVert updateFrag
+ * fullScreenProgram    fullScreenVert fullScreenFrag
+ */
+export var drawVert = "\n precision mediump float;\n\n attribute float a_index;\n\n uniform sampler2D u_particles;\n uniform float u_particles_res;\n\n varying vec2 v_particle_pos;\n\n void main() {\n     vec4 color = texture2D(u_particles, vec2(\n         fract(a_index / u_particles_res),\n         floor(a_index / u_particles_res) / u_particles_res)\n     );\n\n     // decode current particle position from the pixel's RGBA value\n     v_particle_pos = vec2( color.r / 255.0 + color.b, color.g / 255.0 + color.a);\n\n     gl_PointSize = 1.0;\n     gl_Position = vec4(2.0 * v_particle_pos.x - 1.0, 1.0 - 2.0 * v_particle_pos.y, 0, 1);\n }";
+export var drawFrag = "\n precision mediump float;\n\n uniform sampler2D u_wind;\n uniform vec2 u_wind_min;\n uniform vec2 u_wind_max;\n uniform sampler2D u_color_ramp;\n\n varying vec2 v_particle_pos;\n\n void main() {\n     vec2 velocity = mix(u_wind_min, u_wind_max, texture2D(u_wind, v_particle_pos).rg);\n     float speed_t = length(velocity) / length(u_wind_max);\n\n     // color ramp is encoded in a 16x16 texture\n     vec2 ramp_pos = vec2( fract(16.0 * speed_t), floor(16.0 * speed_t) / 16.0);\n\n     gl_FragColor = texture2D(u_color_ramp, ramp_pos);\n }";
+export var updateVert = "\n precision mediump float;\n\n attribute vec2 a_pos;\n\n varying vec2 v_tex_pos;\n\n void main() {\n     v_tex_pos = a_pos;\n     gl_Position = vec4(1.0 - 2.0 * a_pos, 0, 1);\n     // framebuffer \u59CB\u7EC8\u7528\u94FA\u6EE1\u5C4F\u5E55\u7684 texture\n }";
+export var updateFrag = "\n precision highp float;\n\n uniform sampler2D u_particles;\n uniform sampler2D u_wind;\n uniform vec2 u_wind_res;\n uniform vec2 u_wind_min;\n uniform vec2 u_wind_max;\n uniform float u_rand_seed;\n uniform float u_speed_factor;\n uniform float u_drop_rate;\n uniform float u_drop_rate_bump;\n\n varying vec2 v_tex_pos;\n\n // pseudo-random generator\n const vec3 rand_constants = vec3(12.9898, 78.233, 4375.85453);\n float rand(const vec2 co) {\n float t = dot(rand_constants.xy, co);\n     return fract(sin(t) * (rand_constants.z + t));\n }\n\n // wind speed lookup; use manual bilinear filtering based on 4 adjacent pixels for smooth interpolation\n vec2 lookup_wind(const vec2 uv) {\n     // return texture2D(u_wind, uv).rg; // lower-res hardware filtering\n     vec2 px = 1.0 / u_wind_res;\n     vec2 vc = (floor(uv * u_wind_res)) * px;\n     vec2 f = fract(uv * u_wind_res);\n     vec2 tl = texture2D(u_wind, vc).rg;\n     vec2 tr = texture2D(u_wind, vc + vec2(px.x, 0)).rg;\n     vec2 bl = texture2D(u_wind, vc + vec2(0, px.y)).rg;\n     vec2 br = texture2D(u_wind, vc + px).rg;\n     return mix(mix(tl, tr, f.x), mix(bl, br, f.x), f.y);\n }\n\n void main() {\n     vec4 color = texture2D(u_particles, v_tex_pos);\n     vec2 pos = vec2(\n         color.r / 255.0 + color.b,\n         color.g / 255.0 + color.a); // decode particle position from pixel RGBA\n     vec2 velocity = mix(u_wind_min, u_wind_max, lookup_wind(pos));\n     float speed_t = length(velocity) / length(u_wind_max);\n\n     // take EPSG:4236 distortion into account for calculating where the particle moved\n     float distortion = cos(radians(pos.y * 180.0 - 90.0));\n     vec2 offset = vec2(velocity.x / distortion, -velocity.y) * 0.0001 * u_speed_factor;\n\n     // update particle position, wrapping around the date line\n     pos = fract(1.0 + pos + offset);\n\n     // a random seed to use for the particle drop\n     vec2 seed = (pos + v_tex_pos) * u_rand_seed;\n\n     // drop rate is a chance a particle will restart at random position, to avoid degeneration\n     float drop_rate = u_drop_rate + speed_t * u_drop_rate_bump;\n     float drop = step(1.0 - drop_rate, rand(seed));\n\n     vec2 random_pos = vec2(\n         rand(seed + 1.3),\n         rand(seed + 2.1));\n         pos = mix(pos, random_pos, drop);\n\n     // encode the new particle position back into RGBA\n     gl_FragColor = vec4(\n         fract(pos * 255.0),\n         floor(pos * 255.0) / 255.0);\n }";
+export var fullScreenVert = "\n     precision mediump float;\n\n     attribute vec2 a_pos;\n\n     varying vec2 v_tex_pos;\n\n     void main() {\n         v_tex_pos = a_pos;\n         gl_Position = vec4(1.0 - 2.0 * a_pos, 0.0, 1.0);\n         gl_PointSize = 100.0;\n }";
+export var fullScreenFrag = "\n precision mediump float;\n\n uniform sampler2D u_screen;\n uniform float u_opacity;\n varying vec2 v_tex_pos;\n\n void main() {\n     vec4 color = texture2D(u_screen, 1.0 - v_tex_pos);\n\n     // a hack to guarantee opacity fade out even with a value close to 1.0\n     gl_FragColor = vec4(floor(255.0 * color * u_opacity) / 255.0);\n }";

package/es/wind/shaders/wind_frag.glsl

@@ -0,0 +1,9 @@
+precision mediump float;
+uniform float u_opacity: 1.0;
+uniform sampler2D u_texture;
+varying vec2 v_texCoord;
+void main() {
+  vec4 color = texture2D(u_texture,vec2(v_texCoord.x,v_texCoord.y));
+  gl_FragColor = color;
+  gl_FragColor.a *= u_opacity;
+}

package/es/wind/shaders/wind_vert.glsl

@@ -0,0 +1,17 @@
+precision highp float;
+uniform mat4 u_ModelMatrix;
+uniform mat4 u_Mvp;
+attribute vec3 a_Position;
+attribute vec2 a_Uv;
+varying vec2 v_texCoord;
+#pragma include "projection"
+void main() {
+   v_texCoord = a_Uv;
+   vec4 project_pos = project_position(vec4(a_Position, 1.0));
+   // gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy,0., 1.0));
+   if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x
+      gl_Position = u_Mvp * (vec4(project_pos.xy,0., 1.0));
+   } else {
+      gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy,0., 1.0));
+   }
+}