@antv/l7-layers 2.20.5 → 2.20.8

package/lib/geometry/models/plane.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
@@ -18,12 +19,13 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _l7Core = require("@antv/l7-core");
 var _BaseModel2 = _interopRequireDefault(require("../../core/BaseModel"));
+var _CommonStyleAttribute = require("../../core/CommonStyleAttribute");
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } // import { mat4, vec3 } from 'gl-matrix';
 /* babel-plugin-inline-import '../shaders/plane_frag.glsl' */
-var planeFrag = "\nuniform sampler2D u_texture;\nuniform float u_mapFlag;\nuniform float u_opacity;\n\nvarying vec3 v_Color;\nvarying vec2 v_uv;\nvarying float v_clip;\n\n#pragma include \"picking\"\nvoid main() {\n  // gl_FragColor = vec4(v_Color, u_opacity);\n  if(u_mapFlag > 0.0) {\n    gl_FragColor = texture2D(u_texture, vec2(v_uv.x, 1.0 - v_uv.y));\n    gl_FragColor.a *= u_opacity;\n  } else {\n    // gl_FragColor = vec4(v_uv, 0.0, u_opacity);\n    gl_FragColor = vec4(v_Color, u_opacity);\n  }\n  gl_FragColor.a *= v_clip;\n  gl_FragColor = filterColor(gl_FragColor);\n}\n";
+var planeFrag = "\nuniform sampler2D u_texture;\nlayout(std140) uniform commonUniforms {\n  float u_opacity;\n  float u_mapFlag;\n  float u_terrainClipHeight;\n};\n\nin vec3 v_Color;\nin vec2 v_uv;\nin float v_clip;\nout vec4 outputColor;\n\n#pragma include \"picking\"\nvoid main() {\n  // gl_FragColor = vec4(v_Color, u_opacity);\n  if(u_mapFlag > 0.0) {\n    outputColor = texture(SAMPLER_2D(u_texture), vec2(v_uv.x, 1.0 - v_uv.y));\n    outputColor.a *= u_opacity;\n  } else {\n    // gl_FragColor = vec4(v_uv, 0.0, u_opacity);\n    outputColor = vec4(v_Color, u_opacity);\n  }\n  outputColor.a *= v_clip;\n  outputColor = filterColor(outputColor);\n}\n";
 /* babel-plugin-inline-import '../shaders/plane_vert.glsl' */
-var planeVert = "precision highp float;\nuniform mat4 u_ModelMatrix;\n\nuniform float u_opacity;\nuniform float u_terrainClipHeight;\n\nattribute vec3 a_Position;\nattribute vec2 a_Uv;\nattribute vec3 a_Color;\n\nvarying vec3 v_Color;\nvarying vec2 v_uv;\nvarying float v_clip;\n\n#pragma include \"projection\"\n#pragma include \"picking\"\nvoid main() {\n   v_Color = a_Color;\n   v_uv = a_Uv;\n  \n   vec4 project_pos = project_position(vec4(a_Position, 1.0));\n\n   v_clip = 1.0;\n   if(a_Position.z < u_terrainClipHeight) {\n      v_clip = 0.0;\n   }\n  \n  gl_Position = project_common_position_to_clipspace_v2(vec4(project_pos.xy, a_Position.z, 1.0));\n\n   setPickingColor(a_PickingColor);\n}\n";
+var planeVert = "\nlayout(location = 0) in vec3 a_Position;\nlayout(location = 1) in vec3 a_Color;\nlayout(location = 14) in vec2 a_Uv;\n\nlayout(std140) uniform commonUniforms {\n  float u_opacity;\n  float u_mapFlag;\n  float u_terrainClipHeight;\n};\n\nout vec3 v_Color;\nout vec2 v_uv;\nout float v_clip;\n\n#pragma include \"projection\"\n#pragma include \"picking\"\nvoid main() {\n   v_Color = a_Color;\n   v_uv = a_Uv;\n  \n   vec4 project_pos = project_position(vec4(a_Position, 1.0));\n\n   v_clip = 1.0;\n   if(a_Position.z < u_terrainClipHeight) {\n      v_clip = 0.0;\n   }\n  \n  gl_Position = project_common_position_to_clipspace_v2(vec4(project_pos.xy, a_Position.z, 1.0));\n\n   setPickingColor(a_PickingColor);\n}\n";
 var PlaneModel = exports.default = /*#__PURE__*/function (_BaseModel) {
   (0, _inherits2.default)(PlaneModel, _BaseModel);
   var _super = _createSuper(PlaneModel);
@@ -120,6 +122,14 @@ var PlaneModel = exports.default = /*#__PURE__*/function (_BaseModel) {
   }, {
     key: "getUninforms",
     value: function getUninforms() {
+      var commoninfo = this.getCommonUniformsInfo();
+      var attributeInfo = this.getUniformsBufferInfo(this.getStyleAttribute());
+      this.updateStyleUnifoms();
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, commoninfo.uniformsOption), attributeInfo.uniformsOption);
+    }
+  }, {
+    key: "getCommonUniformsInfo",
+    value: function getCommonUniformsInfo() {
       var _ref4 = this.layer.getLayerConfig(),
         opacity = _ref4.opacity,
         mapTexture = _ref4.mapTexture,
@@ -132,12 +142,15 @@ var PlaneModel = exports.default = /*#__PURE__*/function (_BaseModel) {
         (_this$texture = this.texture) === null || _this$texture === void 0 || _this$texture.destroy();
         this.updateTexture(mapTexture);
       }
-      return {
+      var commonOptions = {
         u_opacity: opacity || 1,
         u_mapFlag: mapTexture ? 1 : 0,
         u_terrainClipHeight: terrainTexture ? terrainClipHeight : -1,
         u_texture: this.texture
       };
+      this.textures = [this.texture];
+      var commonBufferInfo = this.getUniformsBufferInfo(commonOptions);
+      return commonBufferInfo;
     }
   }, {
     key: "clearModels",
@@ -146,6 +159,7 @@ var PlaneModel = exports.default = /*#__PURE__*/function (_BaseModel) {
       // @ts-ignore
       this.terrainImage = null;
       (_this$texture2 = this.texture) === null || _this$texture2 === void 0 || _this$texture2.destroy();
+      this.textures = [];
     }
   }, {
     key: "initModels",
@@ -163,12 +177,14 @@ var PlaneModel = exports.default = /*#__PURE__*/function (_BaseModel) {
                 width: 0
               });
               this.updateTexture(mapTexture);
-              _context.next = 7;
+              this.initUniformsBuffer();
+              _context.next = 8;
               return this.layer.buildLayerModel({
                 moduleName: 'geometryPlane',
                 vertexShader: planeVert,
                 fragmentShader: planeFrag,
                 triangulation: this.planeGeometryTriangulation,
+                inject: this.getInject(),
                 primitive: _l7Core.gl.TRIANGLES,
                 depth: {
                   enable: true
@@ -178,10 +194,10 @@ var PlaneModel = exports.default = /*#__PURE__*/function (_BaseModel) {
                   face: _l7Core.gl.BACK // gl.FRONT | gl.BACK;
                 }
               });
-            case 7:
+            case 8:
               model = _context.sent;
               return _context.abrupt("return", [model]);
-            case 9:
+            case 10:
             case "end":
               return _context.stop();
           }
@@ -363,6 +379,7 @@ var PlaneModel = exports.default = /*#__PURE__*/function (_BaseModel) {
         type: _l7Core.AttributeType.Attribute,
         descriptor: {
           name: 'a_Uv',
+          shaderLocation: _CommonStyleAttribute.ShaderLocation.UV,
           buffer: {
             // give the WebGL driver a hint that this buffer may change
             usage: _l7Core.gl.DYNAMIC_DRAW,

package/lib/geometry/models/sprite.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
@@ -21,9 +22,9 @@ var _BaseModel2 = _interopRequireDefault(require("../../core/BaseModel"));
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 /* babel-plugin-inline-import '../shaders/sprite_frag.glsl' */
-var spriteFrag = "\nuniform sampler2D u_texture;\nuniform float u_mapFlag;\nuniform float u_opacity;\n\nvarying vec3 v_Color;\nvarying float v_d;\n\nvoid main() {\n\n  if(v_d < 0.0) {\n    discard;\n  }\n\n  if(u_mapFlag > 0.0) {\n    gl_FragColor = texture2D(u_texture, gl_PointCoord);\n    gl_FragColor.a *= u_opacity;\n  } else {\n    gl_FragColor = vec4(v_Color, u_opacity);\n  }\n}\n";
+var spriteFrag = "\nlayout(std140) uniform commonUniforms {\n  float u_opacity;\n  float u_mapFlag;\n  float u_Scale;\n};\nuniform sampler2D u_texture;\n\nin vec3 v_Color;\nin float v_d;\nout vec4 outputColor;\n\nvoid main() {\n\n  if(v_d < 0.0) {\n    discard;\n  }\n\n  if(u_mapFlag > 0.0) {\n    outputColor = texture(SAMPLER_2D(u_texture), gl_PointCoord);\n    outputColor.a *= u_opacity;\n  } else {\n    outputColor = vec4(v_Color, u_opacity);\n  }\n}\n";
 /* babel-plugin-inline-import '../shaders/sprite_vert.glsl' */
-var spriteVert = "precision highp float;\n\nattribute vec3 a_Position;\nattribute vec3 a_Color;\n\nuniform mat4 u_ModelMatrix;\nuniform float u_opacity;\nuniform float u_Scale;\nvarying vec3 v_Color;\nvarying float v_d;\n\n#pragma include \"projection\"\nvoid main() {\n   v_Color = a_Color;\n  \n   vec4 project_pos = project_position(vec4(a_Position, 1.0));\n\n   v_d = a_Position.z;\n\n  gl_Position = project_common_position_to_clipspace_v2(vec4(project_pos.xy, a_Position.z, 1.0));\ngl_PointSize = pow((u_Zoom - 1.0), 2.0) * u_Scale;\n}\n";
+var spriteVert = "layout(location = 0) in vec3 a_Position;\nlayout(location = 1) in vec3 a_Color;\n\nlayout(std140) uniform commonUniforms {\n  float u_opacity;\n  float u_mapFlag;\n  float u_Scale;\n};\n\nout vec3 v_Color;\nout float v_d;\n\n#pragma include \"projection\"\nvoid main() {\n   v_Color = a_Color.xyz;\n  \n   vec4 project_pos = project_position(vec4(a_Position, 1.0));\n\n   v_d = a_Position.z;\n\n  gl_Position = project_common_position_to_clipspace_v2(vec4(project_pos.xy, a_Position.z, 1.0));\ngl_PointSize = pow((u_Zoom - 1.0), 2.0) * u_Scale;\n}\n";
 var SPRITE_ANIMATE_DIR = /*#__PURE__*/function (SPRITE_ANIMATE_DIR) {
   SPRITE_ANIMATE_DIR["UP"] = "up";
   SPRITE_ANIMATE_DIR["DOWN"] = "down";
@@ -65,16 +66,26 @@ var SpriteModel = exports.default = /*#__PURE__*/function (_BaseModel) {
         size: 5
       };
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "updateModel", function () {
-      // @ts-ignore
-      var attributes = _this.layer.createAttributes({
-        triangulation: _this.planeGeometryUpdateTriangulation
-      });
-      _this.layer.models.map(function (m) {
-        m.updateAttributes(attributes);
-      });
+    /**
+     * Recalculate and update position attribute.
+     */
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "updatePosition", function () {
+      var _this$styleAttributeS;
+      _this.planeGeometryUpdateTriangulation();
+      var vertexAttribute = (_this$styleAttributeS = _this.styleAttributeService.getLayerStyleAttribute('position')) === null || _this$styleAttributeS === void 0 ? void 0 : _this$styleAttributeS.vertexAttribute;
+      if (vertexAttribute) {
+        // [x1, y1, z1, x2, y2, z2...]
+        var updated = [];
+        for (var i = 0; i < _this.positions.length; i += 5) {
+          updated.push(_this.positions[i], _this.positions[i + 1], _this.positions[i + 2]);
+        }
+        vertexAttribute.updateBuffer({
+          data: updated,
+          offset: 0
+        });
+      }
       _this.layerService.throttleRenderLayers();
-      _this.timer = requestAnimationFrame(_this.updateModel);
+      _this.timer = requestAnimationFrame(_this.updatePosition);
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "planeGeometryTriangulation", function () {
       var _this2;
@@ -140,6 +151,14 @@ var SpriteModel = exports.default = /*#__PURE__*/function (_BaseModel) {
   }, {
     key: "getUninforms",
     value: function getUninforms() {
+      var commoninfo = this.getCommonUniformsInfo();
+      var attributeInfo = this.getUniformsBufferInfo(this.getStyleAttribute());
+      this.updateStyleUnifoms();
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, commoninfo.uniformsOption), attributeInfo.uniformsOption);
+    }
+  }, {
+    key: "getCommonUniformsInfo",
+    value: function getCommonUniformsInfo() {
       var _ref5 = this.layer.getLayerConfig(),
         opacity = _ref5.opacity,
         mapTexture = _ref5.mapTexture,
@@ -149,14 +168,18 @@ var SpriteModel = exports.default = /*#__PURE__*/function (_BaseModel) {
         var _this$texture;
         this.mapTexture = mapTexture;
         (_this$texture = this.texture) === null || _this$texture === void 0 || _this$texture.destroy();
+        this.textures = [];
         this.updateTexture(mapTexture);
       }
-      return {
+      var commonOptions = {
         u_opacity: opacity || 1,
         u_mapFlag: mapTexture ? 1 : 0,
-        u_texture: this.texture,
-        u_Scale: spriteScale
+        u_Scale: spriteScale,
+        u_texture: this.texture
       };
+      this.textures = [this.texture];
+      var commonBufferInfo = this.getUniformsBufferInfo(commonOptions);
+      return commonBufferInfo;
     }
   }, {
     key: "clearModels",
@@ -164,6 +187,7 @@ var SpriteModel = exports.default = /*#__PURE__*/function (_BaseModel) {
       var _this$texture2;
       cancelAnimationFrame(this.timer);
       (_this$texture2 = this.texture) === null || _this$texture2 === void 0 || _this$texture2.destroy();
+      this.textures = [];
     }
   }, {
     key: "initModels",
@@ -175,6 +199,7 @@ var SpriteModel = exports.default = /*#__PURE__*/function (_BaseModel) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
               _ref6 = this.layer.getLayerConfig(), mapTexture = _ref6.mapTexture, _ref6$spriteTop = _ref6.spriteTop, spriteTop = _ref6$spriteTop === void 0 ? 5000000 : _ref6$spriteTop, _ref6$spriteUpdate = _ref6.spriteUpdate, spriteUpdate = _ref6$spriteUpdate === void 0 ? 10000 : _ref6$spriteUpdate, _ref6$spriteAnimate = _ref6.spriteAnimate, spriteAnimate = _ref6$spriteAnimate === void 0 ? SPRITE_ANIMATE_DIR.DOWN : _ref6$spriteAnimate;
+              this.initUniformsBuffer();
               this.mapTexture = mapTexture;
               this.spriteTop = spriteTop;
               this.spriteUpdate = spriteUpdate;
@@ -186,24 +211,25 @@ var SpriteModel = exports.default = /*#__PURE__*/function (_BaseModel) {
               });
               this.updateTexture(mapTexture);
               setTimeout(function () {
-                _this3.updateModel();
+                _this3.updatePosition();
               }, 100);
-              _context.next = 11;
+              _context.next = 12;
               return this.layer.buildLayerModel({
                 moduleName: 'geometrySprite',
                 vertexShader: spriteVert,
                 fragmentShader: spriteFrag,
                 triangulation: this.planeGeometryTriangulation,
+                inject: this.getInject(),
                 primitive: _l7Core.gl.POINTS,
                 depth: {
                   enable: false
                 },
                 blend: this.getBlend()
               });
-            case 11:
+            case 12:
               model = _context.sent;
               return _context.abrupt("return", [model]);
-            case 13:
+            case 14:
             case "end":
               return _context.stop();
           }

package/lib/geometry/shaders/billboard_frag.glsl

@@ -1,13 +1,18 @@
+layout(std140) uniform commonUniforms {
+ vec2 u_size;
+ float u_raisingHeight;
+ float u_rotation;
+ float u_opacity;
+};
 
 uniform sampler2D u_texture;
-uniform float u_opacity;
 
-varying vec3 v_Color;
-varying vec2 v_uv;
+in vec2 v_uv;
+out vec4 outputColor;
 
 #pragma include "picking"
 void main() {
-  gl_FragColor = texture2D(u_texture, vec2(v_uv.x, 1.0 - v_uv.y));
-  gl_FragColor.a *= u_opacity;
-  gl_FragColor = filterColor(gl_FragColor);
+  outputColor = texture(SAMPLER_2D(u_texture), vec2(v_uv.x, 1.0 - v_uv.y));
+  outputColor.a *= u_opacity;
+  outputColor = filterColor(outputColor);
 }

package/lib/geometry/shaders/billboard_vert.glsl

@@ -1,25 +1,22 @@
-precision highp float;
-uniform mat4 u_ModelMatrix;
-uniform float u_raisingHeight: 0.0;
-uniform float u_opacity;
-uniform vec2 u_size: [1.0, 1.0];
-uniform mat2 u_RotateMatrix;
+layout(location = 0) in vec3 a_Position;
+layout(location = 11) in vec3 a_Extrude;
+layout(location = 14) in vec2 a_Uv;
 
-attribute vec3 a_Extrude;
-attribute vec3 a_Position;
-attribute vec2 a_Uv;
-attribute vec3 a_Color;
+layout(std140) uniform commonUniforms {
+ vec2 u_size;
+ float u_raisingHeight;
+ float u_rotation;
+ float u_opacity;
+};
 
-varying vec3 v_Color;
-varying vec2 v_uv;
+out vec2 v_uv;
 
 #pragma include "projection"
 #pragma include "picking"
+#pragma include "rotation_2d"
 void main() {
    vec3 extrude = a_Extrude;
-   v_Color = a_Color;
    v_uv = a_Uv;
-
    float raiseHeight = u_raisingHeight;
    if(u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT || u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET) {
       float mapboxZoomScale = 4.0/pow(2.0, 21.0 - u_Zoom);
@@ -30,7 +27,7 @@ void main() {
    vec4 project_pos = project_position(vec4(a_Position.xy, 0.0, 1.0));
 
    // 计算绕 z 轴旋转后的偏移
-   vec2 offsetXY = project_pixel(u_RotateMatrix * vec2(extrude.x * u_size.x, 0.0));
+   vec2 offsetXY = project_pixel(rotate_matrix(vec2(extrude.x * u_size.x, 0.0),u_rotation));
    // 绕 z 轴旋转
    float x = project_pos.x + offsetXY.x;
    float y = project_pos.y + offsetXY.y;

package/lib/geometry/shaders/plane_frag.glsl

@@ -1,22 +1,26 @@
 
 uniform sampler2D u_texture;
-uniform float u_mapFlag;
-uniform float u_opacity;
+layout(std140) uniform commonUniforms {
+  float u_opacity;
+  float u_mapFlag;
+  float u_terrainClipHeight;
+};
 
-varying vec3 v_Color;
-varying vec2 v_uv;
-varying float v_clip;
+in vec3 v_Color;
+in vec2 v_uv;
+in float v_clip;
+out vec4 outputColor;
 
 #pragma include "picking"
 void main() {
   // gl_FragColor = vec4(v_Color, u_opacity);
   if(u_mapFlag > 0.0) {
-    gl_FragColor = texture2D(u_texture, vec2(v_uv.x, 1.0 - v_uv.y));
-    gl_FragColor.a *= u_opacity;
+    outputColor = texture(SAMPLER_2D(u_texture), vec2(v_uv.x, 1.0 - v_uv.y));
+    outputColor.a *= u_opacity;
   } else {
     // gl_FragColor = vec4(v_uv, 0.0, u_opacity);
-    gl_FragColor = vec4(v_Color, u_opacity);
+    outputColor = vec4(v_Color, u_opacity);
   }
-  gl_FragColor.a *= v_clip;
-  gl_FragColor = filterColor(gl_FragColor);
+  outputColor.a *= v_clip;
+  outputColor = filterColor(outputColor);
 }

package/lib/geometry/shaders/plane_vert.glsl

@@ -1,16 +1,17 @@
-precision highp float;
-uniform mat4 u_ModelMatrix;
 
-uniform float u_opacity;
-uniform float u_terrainClipHeight;
+layout(location = 0) in vec3 a_Position;
+layout(location = 1) in vec3 a_Color;
+layout(location = 14) in vec2 a_Uv;
 
-attribute vec3 a_Position;
-attribute vec2 a_Uv;
-attribute vec3 a_Color;
+layout(std140) uniform commonUniforms {
+  float u_opacity;
+  float u_mapFlag;
+  float u_terrainClipHeight;
+};
 
-varying vec3 v_Color;
-varying vec2 v_uv;
-varying float v_clip;
+out vec3 v_Color;
+out vec2 v_uv;
+out float v_clip;
 
 #pragma include "projection"
 #pragma include "picking"

package/lib/geometry/shaders/sprite_frag.glsl

@@ -1,10 +1,14 @@
 
+layout(std140) uniform commonUniforms {
+  float u_opacity;
+  float u_mapFlag;
+  float u_Scale;
+};
 uniform sampler2D u_texture;
-uniform float u_mapFlag;
-uniform float u_opacity;
 
-varying vec3 v_Color;
-varying float v_d;
+in vec3 v_Color;
+in float v_d;
+out vec4 outputColor;
 
 void main() {
 
@@ -13,9 +17,9 @@ void main() {
   }
 
   if(u_mapFlag > 0.0) {
-    gl_FragColor = texture2D(u_texture, gl_PointCoord);
-    gl_FragColor.a *= u_opacity;
+    outputColor = texture(SAMPLER_2D(u_texture), gl_PointCoord);
+    outputColor.a *= u_opacity;
   } else {
-    gl_FragColor = vec4(v_Color, u_opacity);
+    outputColor = vec4(v_Color, u_opacity);
   }
 }

package/lib/geometry/shaders/sprite_vert.glsl

@@ -1,17 +1,18 @@
-precision highp float;
+layout(location = 0) in vec3 a_Position;
+layout(location = 1) in vec3 a_Color;
 
-attribute vec3 a_Position;
-attribute vec3 a_Color;
+layout(std140) uniform commonUniforms {
+  float u_opacity;
+  float u_mapFlag;
+  float u_Scale;
+};
 
-uniform mat4 u_ModelMatrix;
-uniform float u_opacity;
-uniform float u_Scale;
-varying vec3 v_Color;
-varying float v_d;
+out vec3 v_Color;
+out float v_d;
 
 #pragma include "projection"
 void main() {
-   v_Color = a_Color;
+   v_Color = a_Color.xyz;
   
    vec4 project_pos = project_position(vec4(a_Position, 1.0));
 

package/lib/heatmap/models/grid.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
@@ -17,10 +18,10 @@ var _BaseModel2 = _interopRequireDefault(require("../../core/BaseModel"));
 var _triangulation = require("../../core/triangulation");
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-/* babel-plugin-inline-import '../shaders/grid_vert.glsl' */
-var heatmapGridVert = "precision highp float;\r\n// \u591A\u8FB9\u5F62\u9876\u70B9\u5750\u6807\r\nattribute vec3 a_Position;\r\n// \u591A\u8FB9\u5F62\u7ECF\u7EAC\u5EA6\u5750\u6807\r\nattribute vec3 a_Pos;\r\nattribute float a_Size;\r\nattribute vec4 a_Color;\r\nuniform vec2 u_radius;\r\nuniform float u_coverage: 0.9;\r\nuniform float u_angle: 0;\r\nuniform mat4 u_ModelMatrix;\r\n\r\nvarying vec4 v_color;\r\n\r\nuniform vec2 u_sceneCenterMercator;\r\n\r\n#pragma include \"projection\"\r\n#pragma include \"project\"\r\n#pragma include \"picking\"\r\n\r\nvoid main() {\r\n  v_color = a_Color;\r\n\r\n  mat2 rotationMatrix = mat2(cos(u_angle), sin(u_angle), -sin(u_angle), cos(u_angle));\r\n  vec2 offset = a_Position.xy * u_radius * rotationMatrix * u_coverage ;\r\n  // vec2 lnglat = unProjectFlat(a_Pos.xy + offset);\r\n  // vec4 project_pos = project_position(vec4(lnglat, 0, 1.0));\r\n  // gl_Position = project_common_position_to_clipspace(project_pos);\r\n\r\n  if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x\r\n    vec2 lnglat = unProjectFlat(a_Pos.xy + offset);\r\n    vec2 customLnglat = customProject(lnglat) - u_sceneCenterMercator; // \u5C06\u7ECF\u7EAC\u5EA6\u8F6C\u6362\u4E3A\u9AD8\u5FB72.0\u9700\u8981\u7684\u5E73\u9762\u5750\u6807\r\n    vec4 project_pos = project_position(vec4(customLnglat, 0, 1.0));\r\n    gl_Position = u_Mvp * (project_pos);\r\n  } else {\r\n     vec2 lnglat = unProjectFlat(a_Pos.xy + offset);\r\n    vec4 project_pos = project_position(vec4(lnglat, 0, 1.0));\r\n    gl_Position = project_common_position_to_clipspace(project_pos);\r\n  }\r\n\r\n  setPickingColor(a_PickingColor);\r\n}\r\n";
-/* babel-plugin-inline-import '../shaders/hexagon_frag.glsl' */
-var heatmapGridFrag = "precision highp float;\nvarying vec4 v_color;\nuniform float u_opacity: 1;\n\n#pragma include \"picking\"\n\nvoid main() {\n  gl_FragColor = v_color;\n  gl_FragColor.a *= u_opacity;\n\n  gl_FragColor = filterColor(gl_FragColor);\n}\n";
+/* babel-plugin-inline-import '../shaders/grid/grid_vert.glsl' */
+var grid_vert = "layout(location = 0) in vec3 a_Position;\r\nlayout(location = 1) in vec4 a_Color;\r\nlayout(location = 10) in vec3 a_Pos;\r\n\r\nlayout(std140) uniform commonUniforms {\r\n    vec2 u_radius;\r\n    float u_opacity;\r\n    float u_coverage;\r\n    float u_angle;\r\n};\r\n\r\n\r\nout vec4 v_color;\r\n\r\n\r\n#pragma include \"projection\"\r\n#pragma include \"project\"\r\n#pragma include \"picking\"\r\n\r\nvoid main() {\r\n  v_color = a_Color;\r\n  v_color.a *= u_opacity;\r\n\r\n  mat2 rotationMatrix = mat2(cos(u_angle), sin(u_angle), -sin(u_angle), cos(u_angle));\r\n  vec2 offset = a_Position.xy * u_radius * rotationMatrix * u_coverage ;\r\n  // vec2 lnglat = unProjectFlat(a_Pos.xy + offset);\r\n  // vec4 project_pos = project_position(vec4(lnglat, 0, 1.0));\r\n  // gl_Position = project_common_position_to_clipspace(project_pos);\r\n\r\n  if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x\r\n    vec2 lnglat = unProjectFlat(a_Pos.xy + offset);\r\n    vec2 customLnglat = customProject(lnglat) - u_sceneCenterMercator; // \u5C06\u7ECF\u7EAC\u5EA6\u8F6C\u6362\u4E3A\u9AD8\u5FB72.0\u9700\u8981\u7684\u5E73\u9762\u5750\u6807\r\n    vec4 project_pos = project_position(vec4(customLnglat, 0, 1.0));\r\n    gl_Position = u_Mvp * (project_pos);\r\n  } else {\r\n     vec2 lnglat = unProjectFlat(a_Pos.xy + offset);\r\n    vec4 project_pos = project_position(vec4(lnglat, 0, 1.0));\r\n    gl_Position = project_common_position_to_clipspace(project_pos);\r\n  }\r\n\r\n  setPickingColor(a_PickingColor);\r\n}\r\n";
+/* babel-plugin-inline-import '../shaders/grid/grid_frag.glsl' */
+var grid_frag = "in vec4 v_color;\n\n#pragma include \"picking\"\nout vec4 outputColor;\nvoid main() {\n  outputColor = v_color;\n  outputColor = filterColor(outputColor);\n}\n";
 var GridModel = exports.default = /*#__PURE__*/function (_BaseModel) {
   (0, _inherits2.default)(GridModel, _BaseModel);
   var _super = _createSuper(GridModel);
@@ -31,16 +32,26 @@ var GridModel = exports.default = /*#__PURE__*/function (_BaseModel) {
   (0, _createClass2.default)(GridModel, [{
     key: "getUninforms",
     value: function getUninforms() {
+      var commoninfo = this.getCommonUniformsInfo();
+      var attributeInfo = this.getUniformsBufferInfo(this.getStyleAttribute());
+      this.updateStyleUnifoms();
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, commoninfo.uniformsOption), attributeInfo.uniformsOption);
+    }
+  }, {
+    key: "getCommonUniformsInfo",
+    value: function getCommonUniformsInfo() {
       var _ref = this.layer.getLayerConfig(),
         opacity = _ref.opacity,
         coverage = _ref.coverage,
         angle = _ref.angle;
-      return {
+      var commonOptions = {
+        u_radius: [this.layer.getSource().data.xOffset, this.layer.getSource().data.yOffset],
         u_opacity: opacity || 1.0,
         u_coverage: coverage || 0.9,
-        u_angle: angle || 0,
-        u_radius: [this.layer.getSource().data.xOffset, this.layer.getSource().data.yOffset]
+        u_angle: angle || 0
       };
+      var commonBufferInfo = this.getUniformsBufferInfo(commonOptions);
+      return commonBufferInfo;
     }
   }, {
     key: "initModels",
@@ -69,21 +80,22 @@ var GridModel = exports.default = /*#__PURE__*/function (_BaseModel) {
         return _regenerator.default.wrap(function _callee2$(_context2) {
           while (1) switch (_context2.prev = _context2.next) {
             case 0:
-              _context2.next = 2;
+              this.initUniformsBuffer();
+              _context2.next = 3;
               return this.layer.buildLayerModel({
                 moduleName: 'heatmapGrid',
-                vertexShader: heatmapGridVert,
-                fragmentShader: heatmapGridFrag,
+                vertexShader: grid_vert,
+                fragmentShader: grid_frag,
                 triangulation: _triangulation.HeatmapGridTriangulation,
                 primitive: _l7Core.gl.TRIANGLES,
                 depth: {
                   enable: false
                 }
               });
-            case 2:
+            case 3:
               model = _context2.sent;
               return _context2.abrupt("return", [model]);
-            case 4:
+            case 5:
             case "end":
               return _context2.stop();
           }
@@ -102,6 +114,7 @@ var GridModel = exports.default = /*#__PURE__*/function (_BaseModel) {
         // 顶点经纬度位置
         type: _l7Core.AttributeType.Attribute,
         descriptor: {
+          shaderLocation: 10,
           name: 'a_Pos',
           buffer: {
             usage: _l7Core.gl.DYNAMIC_DRAW,