@antv/l7-layers 2.20.5 → 2.20.8

package/lib/point/models/{fillmage.js → fillImage.js}

@@ -7,7 +7,6 @@ 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 _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
@@ -20,13 +19,13 @@ var _l7Utils = require("@antv/l7-utils");
 var _BaseModel2 = _interopRequireDefault(require("../../core/BaseModel"));
 var _interface = require("../../core/interface");
 var _triangulation = require("../../core/triangulation");
+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; } }
-/* babel-plugin-inline-import '../shaders/image/fillImage_frag.glsl' */
-// static pointLayer shader - not support animate
-var pointFillFrag = "uniform sampler2D u_texture;\nuniform vec2 u_textSize;\nuniform float u_opacity : 1;\n\n#pragma include \"sdf_2d\"\n#pragma include \"picking\"\nvarying vec2 v_uv; // \u672C\u8EAB\u7684 uv \u5750\u6807\nvarying vec2 v_Iconuv;\nvarying float v_opacity;\n\nvoid main() {\n\n  vec2 pos = v_Iconuv / u_textSize + v_uv / u_textSize * 64.;\n  gl_FragColor = texture2D(u_texture, pos);\n  gl_FragColor.a *= v_opacity;\n\n  gl_FragColor = filterColor(gl_FragColor);\n}\n";
-/* babel-plugin-inline-import '../shaders/image/fillImage_vert.glsl' */
-var pointFillVert = "attribute vec4 a_Color;\nattribute vec3 a_Position;\nattribute vec3 a_Extrude;\nattribute float a_Size;\nattribute vec2 a_Uv;\n\nuniform mat4 u_ModelMatrix;\n\nuniform mat2 u_RotateMatrix;\nuniform int u_size_unit;\n\nvarying vec2 v_uv; // \u672C\u8EAB\u7684 uv \u5750\u6807\nvarying vec2 v_Iconuv; // icon \u8D34\u56FE\u7684 uv \u5750\u6807\n\nuniform float u_raisingHeight: 0.0;\nuniform float u_heightfixed: 0.0;\nvarying float v_opacity;\n// uniform vec2 u_offsets; // shader \u6CE8\u5165\n\n\n#pragma include \"projection\"\n#pragma include \"picking\"\n#pragma include \"rotation_2d\"\n\nvoid main() {\n  vec3 extrude = a_Extrude;\n  v_uv = (a_Extrude.xy + 1.0)/2.0;\n  v_uv.y = 1.0 - v_uv.y;\n  v_Iconuv = a_Uv;\n  v_opacity = opacity;\n  float newSize = a_Size;\n  if(u_size_unit == 1) {\n    newSize = newSize  * u_PixelsPerMeter.z;\n  }\n  \n  // vec2 offset = (u_RotateMatrix * extrude.xy * (a_Size) + textrueOffsets);\n  vec2 offset = (extrude.xy * (newSize) + offsets);\n\n  offset = rotate_matrix(offset,rotation);\n\n  vec3 aPosition = a_Position;\n\n  offset = project_pixel(offset);\n\n  vec4 project_pos = project_position(vec4(aPosition.xy, 0.0, 1.0));\n  float raisingHeight = u_raisingHeight;\n  if(u_heightfixed < 1.0) { // height fixed\n    raisingHeight = project_pixel(u_raisingHeight);\n  } else {\n    if(u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT || u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET) {\n      float mapboxZoomScale = 4.0/pow(2.0, 21.0 - u_Zoom);\n      raisingHeight = u_raisingHeight * mapboxZoomScale;\n    }\n  }\n\n  gl_Position = project_common_position_to_clipspace_v2(vec4(project_pos.xy + offset, 0.0, 1.0));\n\n  setPickingColor(a_PickingColor);\n}\n";
+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; } } // static pointLayer shader - not support animate
+/* babel-plugin-inline-import '../shaders/fillImage/fillImage_frag.glsl' */
+var pointFillFrag = "in vec4 v_color;\nin vec2 v_uv;// \u672C\u8EAB\u7684 uv \u5750\u6807\nin vec2 v_Iconuv;\nin float v_opacity;\nout vec4 outputColor;\n\nuniform sampler2D u_texture;\nlayout(std140) uniform commonUniform {\n  vec2 u_textSize;\n  float u_heightfixed: 0.0;\n  float u_raisingHeight: 0.0;\n  float u_size_unit;\n};\n\n#pragma include \"sdf_2d\"\n#pragma include \"picking\"\n\n\nvoid main() {\n  vec2 pos = v_Iconuv / u_textSize + v_uv / u_textSize * 64.;\n  outputColor = texture(SAMPLER_2D(u_texture), pos);\n  outputColor.a *= v_opacity;\n  outputColor = filterColor(outputColor);\n}\n";
+/* babel-plugin-inline-import '../shaders/fillImage/fillImage_vert.glsl' */
+var pointFillVert = "layout(location = 0) in vec3 a_Position;\nlayout(location = 1) in vec4 a_Color;\nlayout(location = 9) in float a_Size;\nlayout(location = 11) in vec3 a_Extrude;\nlayout(location = 14) in vec2 a_Uv;\n\nlayout(std140) uniform commonUniform {\n  vec2 u_textSize;\n  float u_heightfixed: 0.0;\n  float u_raisingHeight: 0.0;\n  float u_size_unit;\n};\n\nout vec2 v_uv;\nout vec2 v_Iconuv;\nout float v_opacity;\n\n\n#pragma include \"projection\"\n#pragma include \"picking\"\n#pragma include \"rotation_2d\"\n\nvoid main() {\n  vec3 extrude = a_Extrude;\n  v_uv = (a_Extrude.xy + 1.0)/2.0;\n  v_uv.y = 1.0 - v_uv.y;\n  v_Iconuv = a_Uv;\n  v_opacity = opacity;\n  float newSize = a_Size;\n  if(u_size_unit == 1.0) {\n    newSize = newSize  * u_PixelsPerMeter.z;\n  }\n  \n  // vec2 offset = (u_RotateMatrix * extrude.xy * (a_Size) + textrueOffsets);\n  vec2 offset = (extrude.xy * (newSize) + offsets);\n\n  offset = rotate_matrix(offset,rotation);\n\n  vec3 aPosition = a_Position;\n\n  offset = project_pixel(offset);\n\n  vec4 project_pos = project_position(vec4(aPosition.xy, 0.0, 1.0));\n  float raisingHeight = u_raisingHeight;\n  if(u_heightfixed < 1.0) { // height fixed\n    raisingHeight = project_pixel(u_raisingHeight);\n  } else {\n    if(u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT || u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET) {\n      float mapboxZoomScale = 4.0/pow(2.0, 21.0 - u_Zoom);\n      raisingHeight = u_raisingHeight * mapboxZoomScale;\n    }\n  }\n\n  gl_Position = project_common_position_to_clipspace_v2(vec4(project_pos.xy + offset, 0.0, 1.0));\n\n  setPickingColor(a_PickingColor);\n}\n";
 var FillImageModel = exports.default = /*#__PURE__*/function (_BaseModel) {
   (0, _inherits2.default)(FillImageModel, _BaseModel);
   var _super = _createSuper(FillImageModel);
@@ -62,14 +61,15 @@ var FillImageModel = exports.default = /*#__PURE__*/function (_BaseModel) {
         height: _this.iconService.canvasHeight || 128,
         mipmap: true
       });
+      _this.textures = [_this.texture];
     });
     return _this;
   }
   (0, _createClass2.default)(FillImageModel, [{
-    key: "getUninforms",
+    key: "getCommonUniformsInfo",
     value:
     // 旋转的弧度
-    function getUninforms() {
+    function getCommonUniformsInfo() {
       var _ref = this.layer.getLayerConfig(),
         _ref$raisingHeight = _ref.raisingHeight,
         raisingHeight = _ref$raisingHeight === void 0 ? 0.0 : _ref$raisingHeight,
@@ -88,13 +88,16 @@ var FillImageModel = exports.default = /*#__PURE__*/function (_BaseModel) {
        * GAODE1.x         -1
        */
 
-      return (0, _objectSpread2.default)({
-        u_raisingHeight: Number(raisingHeight),
+      var commonOptions = {
+        u_textSize: [1024, this.iconService.canvasHeight || 128],
         u_heightfixed: Number(heightfixed),
+        u_raisingHeight: Number(raisingHeight),
         u_size_unit: _interface.SizeUnitType[unit],
-        u_texture: this.texture,
-        u_textSize: [1024, this.iconService.canvasHeight || 128]
-      }, this.getStyleAttribute());
+        u_texture: this.texture
+      };
+      this.textures = [this.texture];
+      var commonBufferInfo = this.getUniformsBufferInfo(commonOptions);
+      return commonBufferInfo;
     }
   }, {
     key: "getAttribute",
@@ -130,7 +133,8 @@ var FillImageModel = 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: 'pointFillImage',
                 vertexShader: pointFillVert,
@@ -145,10 +149,10 @@ var FillImageModel = exports.default = /*#__PURE__*/function (_BaseModel) {
                   face: (0, _l7Utils.getCullFace)(this.mapService.version)
                 }
               });
-            case 2:
+            case 3:
               model = _context2.sent;
               return _context2.abrupt("return", [model]);
-            case 4:
+            case 5:
             case "end":
               return _context2.stop();
           }
@@ -177,6 +181,7 @@ var FillImageModel = 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,
@@ -202,6 +207,7 @@ var FillImageModel = exports.default = /*#__PURE__*/function (_BaseModel) {
         type: _l7Core.AttributeType.Attribute,
         descriptor: {
           name: 'a_Extrude',
+          shaderLocation: _CommonStyleAttribute.ShaderLocation.EXTRUDE,
           buffer: {
             // give the WebGL driver a hint that this buffer may change
             usage: _l7Core.gl.DYNAMIC_DRAW,
@@ -223,6 +229,7 @@ var FillImageModel = exports.default = /*#__PURE__*/function (_BaseModel) {
         type: _l7Core.AttributeType.Attribute,
         descriptor: {
           name: 'a_Size',
+          shaderLocation: _CommonStyleAttribute.ShaderLocation.SIZE,
           buffer: {
             // give the WebGL driver a hint that this buffer may change
             usage: _l7Core.gl.DYNAMIC_DRAW,

package/lib/point/models/image.js

@@ -17,13 +17,14 @@ 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");
 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/image_frag.glsl' */
-var pointImageFrag = "\nuniform sampler2D u_texture;\nvarying vec4 v_color;\nvarying vec2 v_uv;\nvarying float v_opacity;\nuniform vec2 u_textSize;\n\n#pragma include \"picking\"\n\nvoid main(){\n      vec2 pos = v_uv / u_textSize + gl_PointCoord / u_textSize * 64.;\n      vec4 textureColor;\n\n      // Y = 0.299R + 0.587G + 0.114B // \u4EAE\u5EA6\u63D0\u53D6\n     \n      textureColor = texture2D(u_texture, pos);\n\n      // Tip: \u53BB\u9664\u8FB9\u7F18\u90E8\u5206 mipmap \u5BFC\u81F4\u7684\u6DF7\u5408\u53D8\u6697\n      float fragmengTocenter = distance(vec2(0.5), gl_PointCoord);\n      if(fragmengTocenter >= 0.5) {\n            float luma = 0.299 * textureColor.r + 0.587 * textureColor.g + 0.114 * textureColor.b;\n            textureColor.a *= luma;\n      }\n      \n      \n\n      if(all(lessThan(v_color, vec4(1.0+0.00001))) && all(greaterThan(v_color, vec4(1.0-0.00001))) || v_color==vec4(1.0)){\n            gl_FragColor= textureColor;\n      }else {\n            gl_FragColor= step(0.01, textureColor.z) * v_color;\n      }\n      gl_FragColor.a *= v_opacity;\n      if (gl_FragColor.a < 0.01) {\n         discard;\n      }\n      gl_FragColor = filterColor(gl_FragColor);\n}\n";
-/* babel-plugin-inline-import '../shaders/image_vert.glsl' */
-var pointImageVert = "precision highp float;\nattribute vec3 a_Position;\nattribute vec4 a_Color;\nattribute vec2 a_Uv;\nattribute float a_Size;\nvarying vec4 v_color;\nvarying vec2 v_uv;\nvarying float v_opacity;\nuniform mat4 u_ModelMatrix;\n\n\nuniform float u_raisingHeight: 0.0;\nuniform float u_heightfixed: 0.0;\n\n#pragma include \"projection\"\n#pragma include \"picking\"\n\nvoid main() {\n\n  // cal style mapping - \u6570\u636E\u7EB9\u7406\u6620\u5C04\u90E8\u5206\u7684\u8BA1\u7B97\n  v_color = a_Color;\n  v_opacity = opacity;\n  v_uv = a_Uv;\n  vec4 project_pos = project_position(vec4(a_Position, 1.0));\n   \n  vec2 offset = project_pixel(offsets);\n\n  float raisingHeight = u_raisingHeight;\n  if(u_heightfixed < 1.0) { // false\n    raisingHeight = project_pixel(u_raisingHeight);\n  } else {\n     if(u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT || u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET) {\n      float mapboxZoomScale = 4.0/pow(2.0, 21.0 - u_Zoom);\n      raisingHeight = u_raisingHeight * mapboxZoomScale;\n    }\n  }\n\n\n  gl_Position = project_common_position_to_clipspace_v2(vec4(project_pos.xy + offset, raisingHeight, 1.0));\n\n  gl_PointSize = a_Size * 2.0 * u_DevicePixelRatio;\n  setPickingColor(a_PickingColor);\n}\n";
+/* babel-plugin-inline-import '../shaders/image/image_frag.glsl' */
+var pointImageFrag = "layout(std140) uniform commonUniforms {\n  vec2 u_textSize;\n  float u_raisingHeight;\n  float u_heightfixed;\n};\n\nuniform sampler2D u_texture;\n\nin vec4 v_color;\nin vec2 v_uv;\nin float v_opacity;\n\n#pragma include \"picking\"\n\nout vec4 outputColor;\n\nvoid main(){\n  vec2 pos = v_uv / u_textSize + gl_PointCoord / u_textSize * 64.;\n  vec4 textureColor;\n\n  // Y = 0.299R + 0.587G + 0.114B // \u4EAE\u5EA6\u63D0\u53D6\n  \n  textureColor = texture(SAMPLER_2D(u_texture), pos);\n\n  // Tip: \u53BB\u9664\u8FB9\u7F18\u90E8\u5206 mipmap \u5BFC\u81F4\u7684\u6DF7\u5408\u53D8\u6697\n  float fragmengTocenter = distance(vec2(0.5), gl_PointCoord);\n  if(fragmengTocenter >= 0.5) {\n        float luma = 0.299 * textureColor.r + 0.587 * textureColor.g + 0.114 * textureColor.b;\n        textureColor.a *= luma;\n  }\n  \n  if(all(lessThan(v_color, vec4(1.0+0.00001))) && all(greaterThan(v_color, vec4(1.0-0.00001))) || v_color==vec4(1.0)){\n        outputColor= textureColor;\n  }else {\n        outputColor= step(0.01, textureColor.z) * v_color;\n  }\n  outputColor.a *= v_opacity;\n  if (outputColor.a < 0.01) {\n      discard;\n  }\n  outputColor = filterColor(outputColor);\n}\n";
+/* babel-plugin-inline-import '../shaders/image/image_vert.glsl' */
+var pointImageVert = "layout(location = 0) in vec3 a_Position;\nlayout(location = 1) in vec4 a_Color;\nlayout(location = 9) in float a_Size;\nlayout(location = 14) in vec2 a_Uv;\n\nlayout(std140) uniform commonUniforms {\n  vec2 u_textSize;\n  float u_raisingHeight;\n  float u_heightfixed;\n};\n\nout vec4 v_color;\nout vec2 v_uv;\nout float v_opacity;\n\n#pragma include \"projection\"\n#pragma include \"picking\"\n\nvoid main() {\n\n  // cal style mapping - \u6570\u636E\u7EB9\u7406\u6620\u5C04\u90E8\u5206\u7684\u8BA1\u7B97\n  v_color = a_Color;\n  v_opacity = opacity;\n  v_uv = a_Uv;\n  vec4 project_pos = project_position(vec4(a_Position, 1.0));\n   \n  vec2 offset = project_pixel(offsets);\n\n  float raisingHeight = u_raisingHeight;\n  if(u_heightfixed < 1.0) { // false\n    raisingHeight = project_pixel(u_raisingHeight);\n  } else {\n     if(u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT || u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET) {\n      float mapboxZoomScale = 4.0/pow(2.0, 21.0 - u_Zoom);\n      raisingHeight = u_raisingHeight * mapboxZoomScale;\n    }\n  }\n\n\n  gl_Position = project_common_position_to_clipspace_v2(vec4(project_pos.xy + offset, raisingHeight, 1.0));\n\n  gl_PointSize = a_Size * 2.0 * u_DevicePixelRatio;\n  setPickingColor(a_PickingColor);\n}\n";
 var ImageModel = exports.default = /*#__PURE__*/function (_BaseModel) {
   (0, _inherits2.default)(ImageModel, _BaseModel);
   var _super = _createSuper(ImageModel);
@@ -66,22 +67,32 @@ var ImageModel = exports.default = /*#__PURE__*/function (_BaseModel) {
   (0, _createClass2.default)(ImageModel, [{
     key: "getUninforms",
     value: function getUninforms() {
+      // ThreeJS 图层兼容
+      if (this.rendererService.getDirty()) {
+        this.texture.bind();
+      }
+      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(),
         _ref$raisingHeight = _ref.raisingHeight,
         raisingHeight = _ref$raisingHeight === void 0 ? 0 : _ref$raisingHeight,
         _ref$heightfixed = _ref.heightfixed,
         heightfixed = _ref$heightfixed === void 0 ? false : _ref$heightfixed;
-
-      // ThreeJS 图层兼容
-      if (this.rendererService.getDirty()) {
-        this.texture.bind();
-      }
-      return (0, _objectSpread2.default)({
+      var commonOptions = {
+        u_textSize: [1024, this.iconService.canvasHeight || 128],
         u_raisingHeight: Number(raisingHeight),
         u_heightfixed: Number(heightfixed),
-        u_texture: this.texture,
-        u_textSize: [1024, this.iconService.canvasHeight || 128]
-      }, this.getStyleAttribute());
+        u_texture: this.texture
+      };
+      this.textures = [this.texture];
+      var commonBufferInfo = this.getUniformsBufferInfo(commonOptions);
+      return commonBufferInfo;
     }
   }, {
     key: "initModels",
@@ -119,7 +130,8 @@ var ImageModel = 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: 'pointImage',
                 vertexShader: pointImageVert,
@@ -131,10 +143,10 @@ var ImageModel = exports.default = /*#__PURE__*/function (_BaseModel) {
                 },
                 primitive: _l7Core.gl.POINTS
               });
-            case 2:
+            case 3:
               model = _context2.sent;
               return _context2.abrupt("return", [model]);
-            case 4:
+            case 5:
             case "end":
               return _context2.stop();
           }
@@ -155,6 +167,7 @@ var ImageModel = exports.default = /*#__PURE__*/function (_BaseModel) {
         type: _l7Core.AttributeType.Attribute,
         descriptor: {
           name: 'a_Size',
+          shaderLocation: _CommonStyleAttribute.ShaderLocation.SIZE,
           buffer: {
             // give the WebGL driver a hint that this buffer may change
             usage: _l7Core.gl.DYNAMIC_DRAW,
@@ -170,12 +183,13 @@ var ImageModel = exports.default = /*#__PURE__*/function (_BaseModel) {
         }
       });
 
-      // point layer size;
+      // point layer uv;
       this.styleAttributeService.registerStyleAttribute({
         name: 'uv',
         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/point/models/index.js

@@ -10,7 +10,7 @@ var _earthExtrude = _interopRequireDefault(require("./earthExtrude"));
 var _earthFill = _interopRequireDefault(require("./earthFill"));
 var _extrude = _interopRequireDefault(require("./extrude"));
 var _fill = _interopRequireDefault(require("./fill"));
-var _fillmage = _interopRequireDefault(require("./fillmage"));
+var _fillImage = _interopRequireDefault(require("./fillImage"));
 var _image = _interopRequireDefault(require("./image"));
 var _normal = _interopRequireDefault(require("./normal"));
 var _radar = _interopRequireDefault(require("./radar"));
@@ -18,7 +18,7 @@ var _text = _interopRequireDefault(require("./text"));
 // earth
 
 var PointModels = {
-  fillImage: _fillmage.default,
+  fillImage: _fillImage.default,
   fill: _fill.default,
   radar: _radar.default,
   image: _image.default,

package/lib/point/models/normal.js

@@ -8,7 +8,6 @@ exports.PointTriangulation = PointTriangulation;
 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"));
@@ -20,9 +19,9 @@ 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; } }
-/* babel-plugin-inline-import '../shaders/normal_frag.glsl' */
+/* babel-plugin-inline-import '../shaders/normal/normal_frag.glsl' */
 var normalFrag = "in vec4 v_color;\nout vec4 outputColor;\nvoid main() {\n  outputColor = v_color;\n}";
-/* babel-plugin-inline-import '../shaders/normal_vert.glsl' */
+/* babel-plugin-inline-import '../shaders/normal/normal_vert.glsl' */
 var normalVert = "layout(location = 0) in vec3 a_Position;\nlayout(location = 1) in vec4 a_Color;\nlayout(location = 9) in float a_Size;\n\nlayout(std140) uniform u_Common {\n  float u_size_scale;\n};\n\nout vec4 v_color;\n\n#pragma include \"projection\"\n#pragma include \"project\"\n\nvoid main() {\n  v_color = vec4(a_Color.xyz, a_Color.w * opacity);\n\n  if (u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x\n    gl_Position = u_Mvp * vec4(a_Position, 1.0);\n  } else {\n    vec4 project_pos = project_position(vec4(a_Position, 1.0)) + vec4(a_Size / 2., -a_Size /2., 0., 0.);\n    gl_Position = project_common_position_to_clipspace(project_pos);\n  }\n\n  gl_PointSize = a_Size * u_size_scale *  2.0  * u_DevicePixelRatio;\n}\n";
 function PointTriangulation(feature) {
   var coordinates = feature.coordinates;
@@ -47,21 +46,13 @@ var NormalModel = exports.default = /*#__PURE__*/function (_BaseModel) {
       };
     }
   }, {
-    key: "getUninforms",
-    value: function getUninforms() {
-      var attributes = this.getStyleAttribute();
-      // FIXME: No need to update each frame
-      this.uniformBuffers[0].subData({
-        offset: 0,
-        data: new Uint8Array(new Float32Array([].concat((0, _toConsumableArray2.default)(attributes.u_stroke), (0, _toConsumableArray2.default)(attributes.u_offsets), [attributes.u_opacity, attributes.u_rotation])).buffer)
-      });
-      this.uniformBuffers[1].subData({
-        offset: 0,
-        data: new Uint8Array(new Float32Array([0.5]).buffer)
-      });
-      return (0, _objectSpread2.default)({
+    key: "getCommonUniformsInfo",
+    value: function getCommonUniformsInfo() {
+      var commonOptions = {
         u_size_scale: 0.5
-      }, attributes);
+      };
+      var commonBufferInfo = this.getUniformsBufferInfo(commonOptions);
+      return commonBufferInfo;
     }
   }, {
     key: "initModels",
@@ -86,21 +77,13 @@ var NormalModel = exports.default = /*#__PURE__*/function (_BaseModel) {
     key: "buildModels",
     value: function () {
       var _buildModels = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
-        var uniformBuffer, commonBuffer, model;
+        var model;
         return _regenerator.default.wrap(function _callee2$(_context2) {
           while (1) switch (_context2.prev = _context2.next) {
             case 0:
               this.layer.triangulation = PointTriangulation;
-              uniformBuffer = this.rendererService.createBuffer({
-                data: new Float32Array(4 + 2 + 1 + 1),
-                isUBO: true
-              });
-              commonBuffer = this.rendererService.createBuffer({
-                data: new Float32Array(4),
-                isUBO: true
-              });
-              this.uniformBuffers.push(uniformBuffer, commonBuffer);
-              _context2.next = 6;
+              this.initUniformsBuffer();
+              _context2.next = 4;
               return this.layer.buildLayerModel({
                 moduleName: 'pointNormal',
                 vertexShader: normalVert,
@@ -113,10 +96,10 @@ var NormalModel = exports.default = /*#__PURE__*/function (_BaseModel) {
                 primitive: _l7Core.gl.POINTS,
                 pick: false
               });
-            case 6:
+            case 4:
               model = _context2.sent;
               return _context2.abrupt("return", [model]);
-            case 8:
+            case 6:
             case "end":
               return _context2.stop();
           }

package/lib/point/models/radar.js

@@ -16,12 +16,13 @@ var _l7Core = require("@antv/l7-core");
 var _BaseModel2 = _interopRequireDefault(require("../../core/BaseModel"));
 var _interface = require("../../core/interface");
 var _triangulation = require("../../core/triangulation");
+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; } }
 /* babel-plugin-inline-import '../shaders/radar/radar_frag.glsl' */
-var pointFillFrag = "\nuniform float u_additive;\nuniform float u_opacity: 1.0;\n\nvarying vec4 v_data;\nvarying vec4 v_color;\nvarying float v_radius;\nvarying vec2 v_exteude;\n#pragma include \"sdf_2d\"\n#pragma include \"picking\"\n\nvoid main() {\n\n  lowp float antialiasblur = v_data.z;\n  float r = v_radius / (v_radius);\n\n  float outer_df = sdCircle(v_data.xy, 1.0);\n  float inner_df = sdCircle(v_data.xy, r);\n\n  float opacity_t = smoothstep(0.0, antialiasblur, outer_df);\n\n  gl_FragColor = vec4(v_color.rgb, v_color.a * u_opacity);\n\n  if(u_additive > 0.0) {\n    gl_FragColor *= opacity_t;\n  } else {\n    gl_FragColor.a *= opacity_t;\n  }\n\n  if(gl_FragColor.a > 0.0) {\n    gl_FragColor = filterColor(gl_FragColor);\n  }\n\n  vec2 extrude =  v_exteude;\n  vec2 dir = normalize(extrude);\n  vec2 baseDir = vec2(1.0, 0.0);\n  float pi = 3.14159265359;\n  float flag = sign(dir.y);\n  float rades = dot(dir, baseDir);\n  float radar_v = (flag - 1.0) * -0.5 * acos(rades)/pi;\n  // simple AA\n  if(radar_v > 0.99) {\n    radar_v = 1.0 - (radar_v - 0.99)/0.01;\n  }\n\n  gl_FragColor.a *= radar_v;\n}\n";
+var pointFillFrag = "\nlayout(std140) uniform commonUniorm{\n  float u_additive;\n  float u_size_unit;\n  float u_speed: 1.0;\n  float u_time;\n};\nin vec4 v_data;\nin vec4 v_color;\nin float v_radius;\nin vec2 v_extrude;\n#pragma include \"sdf_2d\"\n#pragma include \"picking\"\n\nout vec4 outputColor;\n\nvoid main() {\n\n  lowp float antialiasblur = v_data.z;\n  float r = v_radius / (v_radius);\n\n  float outer_df = sdCircle(v_data.xy, 1.0);\n  float inner_df = sdCircle(v_data.xy, r);\n\n  float opacity_t = smoothstep(0.0, antialiasblur, outer_df);\n\n  outputColor = vec4(v_color.rgb, v_color.a);\n\n  if(u_additive > 0.0) {\n    outputColor *= opacity_t;\n  } else {\n    outputColor.a *= opacity_t;\n  }\n\n  if(outputColor.a > 0.0) {\n    outputColor = filterColor(outputColor);\n  }\n\n  vec2 extrude =  v_extrude;\n  vec2 dir = normalize(extrude);\n  vec2 baseDir = vec2(1.0, 0.0);\n  float pi = 3.14159265359;\n  float flag = sign(dir.y);\n  float rades = dot(dir, baseDir);\n  float radar_v = (flag - 1.0) * -0.5 * acos(rades)/pi;\n  // simple AA\n  if(radar_v > 0.99) {\n    radar_v = 1.0 - (radar_v - 0.99)/0.01;\n  }\n\n  outputColor.a *= radar_v;\n}\n";
 /* babel-plugin-inline-import '../shaders/radar/radar_vert.glsl' */
-var pointFillVert = "attribute vec4 a_Color;\nattribute vec3 a_Position;\nattribute vec3 a_Extrude;\nattribute float a_Size;\nuniform float u_speed: 1.0;\nuniform float u_time;\n\nuniform mat4 u_ModelMatrix;\n\nuniform int u_size_unit;\n\nvarying vec4 v_data;\nvarying vec4 v_color;\nvarying float v_radius;\nvarying vec2 v_exteude;\n\n#pragma include \"projection\"\n#pragma include \"picking\"\n\nvoid main() {\n  vec3 extrude = a_Extrude;\n  float newSize = setPickingSize(a_Size);\n\n  float time = u_time * u_speed;\n  mat2 rotateMatrix = mat2( \n    cos(time), sin(time), \n    -sin(time), cos(time)\n  );\n  v_exteude = rotateMatrix * a_Extrude.xy;\n\n  // unpack color(vec2)\n  v_color = a_Color;\n\n  // anti-alias\n  float blur = 0.0;\n  float antialiasblur = -max(2.0 / u_DevicePixelRatio / a_Size, blur);\n\n  if(u_size_unit == 1) {\n    newSize = newSize  * u_PixelsPerMeter.z;\n  }\n  // radius(16-bit)\n  v_radius = newSize;\n\n  vec2 offset = (extrude.xy * (newSize));\n  vec3 aPosition = a_Position;\n  \n    // \u4E0D\u4EE5\u7C73\u4E3A\u5B9E\u9645\u5355\u4F4D\n  offset = project_pixel(offset);\n  \n  v_data = vec4(extrude.x, extrude.y, antialiasblur, -1.0);\n\n  vec4 project_pos = project_position(vec4(aPosition.xy, 0.0, 1.0));\n  gl_Position = project_common_position_to_clipspace_v2(vec4(project_pos.xy + offset, project_pixel(setPickingOrder(0.0)), 1.0));\n\n  setPickingColor(a_PickingColor);\n}\n";
+var pointFillVert = "layout(location = 0) in vec3 a_Position;\nlayout(location = 1) in vec4 a_Color;\nlayout(location = 11) in vec4 a_ExtrudeAndSize;\n\nlayout(std140) uniform commonUniorm {\n  float u_additive;\n  float u_size_unit;\n  float u_speed: 1.0;\n  float u_time;\n};\n\nout vec4 v_data;\nout vec4 v_color;\nout float v_radius;\nout vec2 v_extrude;\n\n#pragma include \"projection\"\n#pragma include \"picking\"\n\nvoid main() {\n  vec3 extrude = a_ExtrudeAndSize.xyz;\n  float newSize = setPickingSize(a_ExtrudeAndSize.w);\n\n  float time = u_time * u_speed;\n  mat2 rotateMatrix = mat2( \n    cos(time), sin(time), \n    -sin(time), cos(time)\n  );\n  v_extrude = rotateMatrix * a_ExtrudeAndSize.xy;\n\n  v_color = a_Color;\n  v_color.a *= opacity;\n\n  float blur = 0.0;\n  float antialiasblur = -max(2.0 / u_DevicePixelRatio / a_ExtrudeAndSize.w, blur);\n\n  if(u_size_unit == 1.) {\n    newSize = newSize  * u_PixelsPerMeter.z;\n  }\n  v_radius = newSize;\n\n  vec2 offset = (extrude.xy * (newSize));\n  vec3 aPosition = a_Position;\n  \n  offset = project_pixel(offset);\n  \n  v_data = vec4(extrude.x, extrude.y, antialiasblur, -1.0);\n\n  vec4 project_pos = project_position(vec4(aPosition.xy, 0.0, 1.0));\n  gl_Position = project_common_position_to_clipspace_v2(vec4(project_pos.xy + offset, project_pixel(setPickingOrder(0.0)), 1.0));\n\n  setPickingColor(a_PickingColor);\n}\n";
 var RadarModel = exports.default = /*#__PURE__*/function (_BaseModel) {
   (0, _inherits2.default)(RadarModel, _BaseModel);
   var _super = _createSuper(RadarModel);
@@ -30,35 +31,27 @@ var RadarModel = exports.default = /*#__PURE__*/function (_BaseModel) {
     return _super.apply(this, arguments);
   }
   (0, _createClass2.default)(RadarModel, [{
-    key: "getUninforms",
-    value: function getUninforms() {
+    key: "getCommonUniformsInfo",
+    value: function getCommonUniformsInfo() {
       var _ref = this.layer.getLayerConfig(),
-        _ref$opacity = _ref.opacity,
-        opacity = _ref$opacity === void 0 ? 1 : _ref$opacity,
         blend = _ref.blend,
         _ref$speed = _ref.speed,
         speed = _ref$speed === void 0 ? 1 : _ref$speed,
         _ref$unit = _ref.unit,
         unit = _ref$unit === void 0 ? 'pixel' : _ref$unit;
-      return {
+      var commonOptions = {
+        u_additive: blend === 'additive' ? 1.0 : 0.0,
         u_size_unit: _interface.SizeUnitType[unit],
         u_speed: speed,
-        u_additive: blend === 'additive' ? 1.0 : 0.0,
-        u_opacity: opacity
-      };
+        u_time: this.layer.getLayerAnimateTime()
+      }; //1+1+1+1
+      var commonBufferInfo = this.getUniformsBufferInfo(commonOptions);
+      return commonBufferInfo;
     }
   }, {
     key: "getAnimateUniforms",
     value: function getAnimateUniforms() {
-      var _ref2 = this.layer.getLayerConfig(),
-        _ref2$animateOption = _ref2.animateOption,
-        animateOption = _ref2$animateOption === void 0 ? {
-          enable: false
-        } : _ref2$animateOption;
-      return {
-        u_animate: this.animateOption2Array(animateOption),
-        u_time: this.layer.getLayerAnimateTime()
-      };
+      return {};
     }
   }, {
     key: "getAttribute",
@@ -92,20 +85,22 @@ var RadarModel = 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: 'pointRadar',
                 vertexShader: pointFillVert,
                 fragmentShader: pointFillFrag,
                 triangulation: _triangulation.PointFillTriangulation,
+                inject: this.getInject(),
                 depth: {
                   enable: false
                 }
               });
-            case 2:
+            case 3:
               model = _context2.sent;
               return _context2.abrupt("return", [model]);
-            case 4:
+            case 5:
             case "end":
               return _context2.stop();
           }
@@ -125,42 +120,25 @@ var RadarModel = exports.default = /*#__PURE__*/function (_BaseModel) {
     key: "registerBuiltinAttributes",
     value: function registerBuiltinAttributes() {
       this.styleAttributeService.registerStyleAttribute({
-        name: 'extrude',
+        name: 'extrudeAndSize',
         type: _l7Core.AttributeType.Attribute,
         descriptor: {
-          name: 'a_Extrude',
+          name: 'a_ExtrudeAndSize',
+          shaderLocation: _CommonStyleAttribute.ShaderLocation.EXTRUDE,
           buffer: {
             // give the WebGL driver a hint that this buffer may change
             usage: _l7Core.gl.DYNAMIC_DRAW,
             data: [],
             type: _l7Core.gl.FLOAT
           },
-          size: 3,
+          size: 4,
           update: function update(feature, featureIdx, vertex, attributeIdx) {
             var extrude = [1, 1, 0, -1, 1, 0, -1, -1, 0, 1, -1, 0];
             var extrudeIndex = attributeIdx % 4 * 3;
-            return [extrude[extrudeIndex], extrude[extrudeIndex + 1], extrude[extrudeIndex + 2]];
-          }
-        }
-      });
-
-      // point layer size;
-      this.styleAttributeService.registerStyleAttribute({
-        name: 'size',
-        type: _l7Core.AttributeType.Attribute,
-        descriptor: {
-          name: 'a_Size',
-          buffer: {
-            // give the WebGL driver a hint that this buffer may change
-            usage: _l7Core.gl.DYNAMIC_DRAW,
-            data: [],
-            type: _l7Core.gl.FLOAT
-          },
-          size: 1,
-          update: function update(feature) {
             var _feature$size = feature.size,
               size = _feature$size === void 0 ? 5 : _feature$size;
-            return Array.isArray(size) ? [size[0]] : [size];
+            var a_Size = Array.isArray(size) ? size[0] : size;
+            return [extrude[extrudeIndex], extrude[extrudeIndex + 1], extrude[extrudeIndex + 2], a_Size];
           }
         }
       });