@antv/l7-layers 2.20.5 → 2.20.6

package/es/point/models/fill.js

@@ -1,6 +1,4 @@
 import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
@@ -13,14 +11,11 @@ import { AttributeType, gl } from '@antv/l7-core';
 import { PointFillTriangulation } from '@antv/l7-utils';
 import BaseModel from "../../core/BaseModel";
 import { ShaderLocation } from "../../core/CommonStyleAttribute";
+/* babel-plugin-inline-import '../shaders/fill/fill_frag.glsl' */
+var pointFillFrag = "layout(std140) uniform commonUniforms {\n  vec3 u_blur_height_fixed;\n  float u_stroke_width;\n  float u_additive;\n  float u_stroke_opacity;\n  float u_size_unit;\n  float u_time;\n  vec4 u_animate;\n};\n\n\nin vec4 v_color;\nin vec4 v_stroke;\nin vec4 v_data;\nin float v_radius;\n\n#pragma include \"scene_uniforms\"\n#pragma include \"sdf_2d\"\n#pragma include \"picking\"\n\nout vec4 outputColor;\n\nvoid main() {\n  int shape = int(floor(v_data.w + 0.5));\n  lowp float antialiasblur = v_data.z;\n  float r = v_radius / (v_radius + u_stroke_width);\n\n  float outer_df;\n  float inner_df;\n  // 'circle', 'triangle', 'square', 'pentagon', 'hexagon', 'octogon', 'hexagram', 'rhombus', 'vesica'\n  if (shape == 0) {\n    outer_df = sdCircle(v_data.xy, 1.0);\n    inner_df = sdCircle(v_data.xy, r);\n  } else if (shape == 1) {\n    outer_df = sdEquilateralTriangle(1.1 * v_data.xy);\n    inner_df = sdEquilateralTriangle(1.1 / r * v_data.xy);\n  } else if (shape == 2) {\n    outer_df = sdBox(v_data.xy, vec2(1.));\n    inner_df = sdBox(v_data.xy, vec2(r));\n  } else if (shape == 3) {\n    outer_df = sdPentagon(v_data.xy, 0.8);\n    inner_df = sdPentagon(v_data.xy, r * 0.8);\n  } else if (shape == 4) {\n    outer_df = sdHexagon(v_data.xy, 0.8);\n    inner_df = sdHexagon(v_data.xy, r * 0.8);\n  } else if (shape == 5) {\n    outer_df = sdOctogon(v_data.xy, 1.0);\n    inner_df = sdOctogon(v_data.xy, r);\n  } else if (shape == 6) {\n    outer_df = sdHexagram(v_data.xy, 0.52);\n    inner_df = sdHexagram(v_data.xy, r * 0.52);\n  } else if (shape == 7) {\n    outer_df = sdRhombus(v_data.xy, vec2(1.0));\n    inner_df = sdRhombus(v_data.xy, vec2(r));\n  } else if (shape == 8) {\n    outer_df = sdVesica(v_data.xy, 1.1, 0.8);\n    inner_df = sdVesica(v_data.xy, r * 1.1, r * 0.8);\n  }\n\n  float opacity_t = smoothstep(0.0, antialiasblur, outer_df);\n\n  float color_t = u_stroke_width < 0.01 ? 0.0 : smoothstep(\n    antialiasblur,\n    0.0,\n    inner_df\n  );\n\n  float PI = 3.14159;\n  float N_RINGS = 3.0;\n  float FREQ = 1.0;\n\n  if(u_stroke_width < 0.01) {\n    outputColor = v_color;\n  } else {\n    outputColor = mix(v_color, v_stroke * u_stroke_opacity, color_t);\n  }\n  float intensity = 1.0;\n  if(u_time!=-1.0){\n    //wave\u76F8\u5173\u903B\u8F91\n    float d = length(v_data.xy);\n    if(d > 0.5) {\n      discard;\n    }\n    intensity = clamp(cos(d * PI), 0.0, 1.0) * clamp(cos(2.0 * PI * (d * 2.0 * u_animate.z - u_animate.y * u_time)), 0.0, 1.0);\n  }\n\n  if(u_additive > 0.0) {\n    outputColor *= opacity_t;\n    outputColor *= intensity;//wave\n    outputColor = filterColorAlpha(outputColor, outputColor.a);\n  } else {\n    outputColor.a *= opacity_t;\n    outputColor.a *= intensity;//wave \n    outputColor = filterColor(outputColor);\n  }\n   // \u4F5C\u4E3A mask \u6A21\u677F\u65F6\u9700\u8981\u4E22\u5F03\u900F\u660E\u7684\u50CF\u7D20\n  if(outputColor.a < 0.01) {\n    discard;\n  } \n}\n";
+/* babel-plugin-inline-import '../shaders/fill/fill_vert.glsl' */
+var pointFillVert = "layout(location = 0) in vec3 a_Position;\nlayout(location = 1) in vec4 a_Color;\nlayout(location = 9) in vec2 a_SizeAndShape;\nlayout(location = 11) in vec3 a_Extrude;\n\nlayout(std140) uniform commonUniforms {\n  vec3 u_blur_height_fixed;\n  float u_stroke_width;\n  float u_additive;\n  float u_stroke_opacity;\n  float u_size_unit;\n  float u_time;\n  vec4 u_animate;   \n};\n\nout vec4 v_color;\nout vec4 v_stroke;\nout vec4 v_data;\nout float v_radius;\n\n#pragma include \"projection\"\n#pragma include \"picking\"\n#pragma include \"rotation_2d\"\n\nvoid main() {\n  // \u900F\u660E\u5EA6\u8BA1\u7B97\n   v_stroke = stroke;  \n  vec3 extrude = a_Extrude;\n  float shape_type = a_SizeAndShape.y;\n  /*\n  *  setPickingSize \u8BBE\u7F6E\u62FE\u53D6\u5927\u5C0F\n  *  u_meter2coord \u5728\u7B49\u9762\u79EF\u5927\u5C0F\u7684\u65F6\u5019\u8BBE\u7F6E\u5355\u4F4D\n  */\n  float newSize = setPickingSize(a_SizeAndShape.x);\n  // float newSize = setPickingSize(a_Size) * 0.00001038445708445579;\n\n\n\n  // unpack color(vec2)\n  v_color = vec4(a_Color.xyz, a_Color.w * opacity);\n\n  if(u_size_unit == 1.0) {\n    newSize = newSize  * u_PixelsPerMeter.z;\n  }\n\n   v_radius = newSize;\n\n  // anti-alias\n  //  float antialiased_blur = -max(u_blur, antialiasblur);\n  float antialiasblur = -max(2.0 / u_DevicePixelRatio / newSize, u_blur_height_fixed.x);\n\n  vec2 offset = (extrude.xy * (newSize + u_stroke_width) + u_offsets);\n  vec3 aPosition = a_Position;\n\n  offset = project_pixel(offset);\n  offset = rotate_matrix(offset,rotation);\n  \n  // TODP: /abs(extrude.x) \u662F\u4E3A\u4E86\u517C\u5BB9\u5730\u7403\u6A21\u5F0F\n  v_data = vec4(extrude.x/abs(extrude.x), extrude.y/abs(extrude.y), antialiasblur,shape_type);\n\n\n  // vec4 project_pos = project_position(vec4(a_Position.xy, 0.0, 1.0));\n  vec4 project_pos = project_position(vec4(aPosition.xy, 0.0, 1.0));\n  // gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy + offset, project_pixel(setPickingOrder(0.0)), 1.0));\n\n  float raisingHeight = u_blur_height_fixed.y;\n\n  if(u_blur_height_fixed.z < 1.0) { // false\n    raisingHeight = project_pixel(u_blur_height_fixed.y);\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_blur_height_fixed.y * mapboxZoomScale;\n    }\n  }\n  \n  gl_Position = project_common_position_to_clipspace_v2(vec4(project_pos.xy + offset, raisingHeight, 1.0));\n\n  setPickingColor(a_PickingColor);\n}\n";
 import { SizeUnitType } from "../../core/interface";
-// animate pointLayer shader - support animate
-/* babel-plugin-inline-import '../shaders/animate/wave_frag.glsl' */
-var waveFillFrag = "\nuniform float u_additive;\n\n\nvarying vec4 v_data;\nvarying vec4 v_color;\nvarying float v_radius;\nuniform float u_time;\nuniform vec4 u_animate: [ 1., 2., 1.0, 0.2 ];\n\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;\n  float inner_df;\n  // 'circle', 'triangle', 'square', 'pentagon', 'hexagon', 'octogon', 'hexagram', 'rhombus', 'vesica'\n  \n  outer_df = sdCircle(v_data.xy, 1.0);\n  inner_df = sdCircle(v_data.xy, r);\n\n\n  float opacity_t = smoothstep(0.0, antialiasblur, outer_df);\n\n  float color_t = smoothstep(\n    antialiasblur,\n    0.0,\n    inner_df\n  );\n  float PI = 3.14159;\n  float N_RINGS = 3.0;\n  float FREQ = 1.0;\n\n  gl_FragColor = v_color;\n\n  float d = length(v_data.xy);\n  if(d > 0.5) {\n    discard;\n  }\n  float intensity = clamp(cos(d * PI), 0.0, 1.0) * clamp(cos(2.0 * PI * (d * 2.0 * u_animate.z - u_animate.y * u_time)), 0.0, 1.0);\n  \n  // \u6839\u636E\u53E0\u52A0\u6A21\u5F0F\u9009\u62E9\u6548\u679C\n  if(u_additive > 0.0) {\n    gl_FragColor *= intensity;\n    // \u4F18\u5316\u6C34\u6CE2\u70B9 blend additive \u6A21\u5F0F\u4E0B\u6709\u7684\u62FE\u53D6\u6548\u679C \n    gl_FragColor = filterColorAlpha(gl_FragColor, gl_FragColor.a);\n  } else {\n    gl_FragColor = vec4(gl_FragColor.xyz, gl_FragColor.a * intensity);\n    gl_FragColor = filterColor(gl_FragColor);\n  }\n}\n"; // static pointLayer shader - not support animate
-/* babel-plugin-inline-import '../shaders/fill_frag.glsl' */
-var pointFillFrag = "\nlayout(std140) uniform commonUniforms {\n  vec3 u_blur_height_fixed;\n  float u_stroke_width;\n  float u_additive;\n  float u_stroke_opacity;\n  float u_size_unit;\n};\n\nin vec4 v_color;\nin vec4 v_stroke;\nin vec4 v_data;\nin float v_radius;\n\n#pragma include \"scene_uniforms\"\n#pragma include \"sdf_2d\"\n#pragma include \"picking\"\n\nout vec4 outputColor;\n\nvoid main() {\n  int shape = int(floor(v_data.w + 0.5));\n  lowp float antialiasblur = v_data.z;\n  float r = v_radius / (v_radius + u_stroke_width);\n\n  float outer_df;\n  float inner_df;\n  // 'circle', 'triangle', 'square', 'pentagon', 'hexagon', 'octogon', 'hexagram', 'rhombus', 'vesica'\n  if (shape == 0) {\n    outer_df = sdCircle(v_data.xy, 1.0);\n    inner_df = sdCircle(v_data.xy, r);\n  } else if (shape == 1) {\n    outer_df = sdEquilateralTriangle(1.1 * v_data.xy);\n    inner_df = sdEquilateralTriangle(1.1 / r * v_data.xy);\n  } else if (shape == 2) {\n    outer_df = sdBox(v_data.xy, vec2(1.));\n    inner_df = sdBox(v_data.xy, vec2(r));\n  } else if (shape == 3) {\n    outer_df = sdPentagon(v_data.xy, 0.8);\n    inner_df = sdPentagon(v_data.xy, r * 0.8);\n  } else if (shape == 4) {\n    outer_df = sdHexagon(v_data.xy, 0.8);\n    inner_df = sdHexagon(v_data.xy, r * 0.8);\n  } else if (shape == 5) {\n    outer_df = sdOctogon(v_data.xy, 1.0);\n    inner_df = sdOctogon(v_data.xy, r);\n  } else if (shape == 6) {\n    outer_df = sdHexagram(v_data.xy, 0.52);\n    inner_df = sdHexagram(v_data.xy, r * 0.52);\n  } else if (shape == 7) {\n    outer_df = sdRhombus(v_data.xy, vec2(1.0));\n    inner_df = sdRhombus(v_data.xy, vec2(r));\n  } else if (shape == 8) {\n    outer_df = sdVesica(v_data.xy, 1.1, 0.8);\n    inner_df = sdVesica(v_data.xy, r * 1.1, r * 0.8);\n  }\n\n  float opacity_t = smoothstep(0.0, antialiasblur, outer_df);\n\n  float color_t = u_stroke_width < 0.01 ? 0.0 : smoothstep(\n    antialiasblur,\n    0.0,\n    inner_df\n  );\n\n  if(u_stroke_width < 0.01) {\n    outputColor = v_color;\n  } else {\n    outputColor = mix(v_color, v_stroke * u_stroke_opacity, color_t);\n  }\n\n  if(u_additive > 0.0) {\n    outputColor *= opacity_t;\n    outputColor = filterColorAlpha(outputColor, outputColor.a);\n  } else {\n    outputColor.a *= opacity_t;\n    outputColor = filterColor(outputColor);\n  }\n   // \u4F5C\u4E3A mask \u6A21\u677F\u65F6\u9700\u8981\u4E22\u5F03\u900F\u660E\u7684\u50CF\u7D20\n  if(outputColor.a < 0.01) {\n    discard;\n  } \n}\n";
-/* babel-plugin-inline-import '../shaders/fill_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 = 10) in float a_Shape;\n\nlayout(std140) uniform commonUniforms {\n  vec3 u_blur_height_fixed;\n  float u_stroke_width;\n  float u_additive;\n  float u_stroke_opacity;\n  float u_size_unit;\n};\n\nout vec4 v_color;\nout vec4 v_stroke;\nout vec4 v_data;\nout float v_radius;\n\n#pragma include \"projection\"\n#pragma include \"picking\"\n#pragma include \"rotation_2d\"\n\nvoid main() {\n  // \u900F\u660E\u5EA6\u8BA1\u7B97\n   v_stroke = stroke;  \n  vec3 extrude = a_Extrude;\n  float shape_type = a_Shape;\n  /*\n  *  setPickingSize \u8BBE\u7F6E\u62FE\u53D6\u5927\u5C0F\n  *  u_meter2coord \u5728\u7B49\u9762\u79EF\u5927\u5C0F\u7684\u65F6\u5019\u8BBE\u7F6E\u5355\u4F4D\n  */\n  float newSize = setPickingSize(a_Size);\n  // float newSize = setPickingSize(a_Size) * 0.00001038445708445579;\n\n\n\n  // unpack color(vec2)\n  v_color = vec4(a_Color.xyz, a_Color.w * opacity);\n\n  if(u_size_unit == 1.0) {\n    newSize = newSize  * u_PixelsPerMeter.z;\n  }\n\n   v_radius = newSize;\n\n  // anti-alias\n  //  float antialiased_blur = -max(u_blur, antialiasblur);\n  float antialiasblur = -max(2.0 / u_DevicePixelRatio / newSize, u_blur_height_fixed.x);\n\n  vec2 offset = (extrude.xy * (newSize + u_stroke_width) + u_offsets);\n  vec3 aPosition = a_Position;\n\n  offset = project_pixel(offset);\n  offset = rotate_matrix(offset,rotation);\n  \n  // TODP: /abs(extrude.x) \u662F\u4E3A\u4E86\u517C\u5BB9\u5730\u7403\u6A21\u5F0F\n  v_data = vec4(extrude.x/abs(extrude.x), extrude.y/abs(extrude.y), antialiasblur,shape_type);\n\n\n  // vec4 project_pos = project_position(vec4(a_Position.xy, 0.0, 1.0));\n  vec4 project_pos = project_position(vec4(aPosition.xy, 0.0, 1.0));\n  // gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy + offset, project_pixel(setPickingOrder(0.0)), 1.0));\n\n  float raisingHeight = u_blur_height_fixed.y;\n\n  if(u_blur_height_fixed.z < 1.0) { // false\n    raisingHeight = project_pixel(u_blur_height_fixed.y);\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_blur_height_fixed.y * mapboxZoomScale;\n    }\n  }\n  \n  gl_Position = project_common_position_to_clipspace_v2(vec4(project_pos.xy + offset, raisingHeight, 1.0));\n\n  setPickingColor(a_PickingColor);\n}\n";
 var FillModel = /*#__PURE__*/function (_BaseModel) {
   _inherits(FillModel, _BaseModel);
   var _super = _createSuper(FillModel);
@@ -29,8 +24,8 @@ var FillModel = /*#__PURE__*/function (_BaseModel) {
     return _super.apply(this, arguments);
   }
   _createClass(FillModel, [{
-    key: "getUninforms",
-    value: function getUninforms() {
+    key: "getCommonUniformsInfo",
+    value: function getCommonUniformsInfo() {
       var _ref = this.layer.getLayerConfig(),
         _ref$strokeOpacity = _ref.strokeOpacity,
         strokeOpacity = _ref$strokeOpacity === void 0 ? 1 : _ref$strokeOpacity,
@@ -45,23 +40,21 @@ var FillModel = /*#__PURE__*/function (_BaseModel) {
         heightfixed = _ref$heightfixed === void 0 ? false : _ref$heightfixed,
         _ref$unit = _ref.unit,
         unit = _ref$unit === void 0 ? 'pixel' : _ref$unit;
-      var commonIniform = _objectSpread({
+      var u_time = this.getAnimateUniforms().u_time;
+      if (isNaN(u_time)) {
+        u_time = -1.0;
+      }
+      var commonOptions = {
         u_blur_height_fixed: [blur, Number(raisingHeight), Number(heightfixed)],
+        u_stroke_width: strokeWidth,
         u_additive: blend === 'additive' ? 1.0 : 0.0,
         u_stroke_opacity: strokeOpacity,
-        u_stroke_width: strokeWidth,
-        u_size_unit: SizeUnitType[unit]
-      }, this.getStyleAttribute());
-      var attributes = this.getStyleAttribute();
-      this.uniformBuffers[0].subData({
-        offset: 0,
-        data: new Uint8Array(new Float32Array([].concat(_toConsumableArray(attributes.u_stroke), _toConsumableArray(attributes.u_offsets), [attributes.u_opacity, attributes.u_rotation])).buffer)
-      });
-      this.uniformBuffers[1].subData({
-        offset: 0,
-        data: new Uint8Array(new Float32Array([].concat(_toConsumableArray(commonIniform.u_blur_height_fixed), [commonIniform.u_stroke_width, commonIniform.u_stroke_opacity, commonIniform.u_additive, commonIniform.u_size_unit])).buffer)
-      });
-      return commonIniform;
+        u_size_unit: SizeUnitType[unit],
+        u_time: u_time,
+        u_animate: this.getAnimateUniforms().u_animate
+      };
+      var commonBufferInfo = this.getUniformsBufferInfo(commonOptions);
+      return commonBufferInfo;
     }
   }, {
     key: "getAnimateUniforms",
@@ -104,7 +97,7 @@ var FillModel = /*#__PURE__*/function (_BaseModel) {
     key: "buildModels",
     value: function () {
       var _buildModels = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
-        var _ref3, _ref3$animateOption, animateOption, _this$getShaders, frag, vert, type, attributeUniformBuffer, commonUniforms, model;
+        var _ref3, _ref3$animateOption, animateOption, _this$getShaders, frag, vert, type, model;
         return _regeneratorRuntime.wrap(function _callee2$(_context2) {
           while (1) switch (_context2.prev = _context2.next) {
             case 0:
@@ -113,16 +106,8 @@ var FillModel = /*#__PURE__*/function (_BaseModel) {
               } : _ref3$animateOption;
               _this$getShaders = this.getShaders(animateOption), frag = _this$getShaders.frag, vert = _this$getShaders.vert, type = _this$getShaders.type;
               this.layer.triangulation = PointFillTriangulation;
-              attributeUniformBuffer = this.rendererService.createBuffer({
-                data: new Float32Array(4 + 2 + 1 + 1),
-                isUBO: true
-              });
-              commonUniforms = this.rendererService.createBuffer({
-                data: new Float32Array(8),
-                isUBO: true
-              });
-              this.uniformBuffers.push(attributeUniformBuffer, commonUniforms);
-              _context2.next = 8;
+              this.initUniformsBuffer();
+              _context2.next = 6;
               return this.layer.buildLayerModel({
                 moduleName: type,
                 vertexShader: vert,
@@ -133,10 +118,10 @@ var FillModel = /*#__PURE__*/function (_BaseModel) {
                   enable: false
                 }
               });
-            case 8:
+            case 6:
               model = _context2.sent;
               return _context2.abrupt("return", [model]);
-            case 10:
+            case 8:
             case "end":
               return _context2.stop();
           }
@@ -154,28 +139,11 @@ var FillModel = /*#__PURE__*/function (_BaseModel) {
   }, {
     key: "getShaders",
     value: function getShaders(animateOption) {
-      if (animateOption.enable) {
-        switch (animateOption.type) {
-          case 'wave':
-            return {
-              frag: waveFillFrag,
-              vert: pointFillVert,
-              type: 'pointWave'
-            };
-          default:
-            return {
-              frag: waveFillFrag,
-              vert: pointFillVert,
-              type: 'pointWave'
-            };
-        }
-      } else {
-        return {
-          frag: pointFillFrag,
-          vert: pointFillVert,
-          type: 'pointFill'
-        };
-      }
+      return {
+        frag: pointFillFrag,
+        vert: pointFillVert,
+        type: 'pointFill'
+      };
     }
 
     // overwrite baseModel func
@@ -212,10 +180,10 @@ var FillModel = /*#__PURE__*/function (_BaseModel) {
 
       // point layer size;
       this.styleAttributeService.registerStyleAttribute({
-        name: 'size',
+        name: 'sizeAndShape',
         type: AttributeType.Attribute,
         descriptor: {
-          name: 'a_Size',
+          name: 'a_SizeAndShape',
           shaderLocation: ShaderLocation.SIZE,
           buffer: {
             // give the WebGL driver a hint that this buffer may change
@@ -223,34 +191,15 @@ var FillModel = /*#__PURE__*/function (_BaseModel) {
             data: [],
             type: gl.FLOAT
           },
-          size: 1,
+          size: 2,
           update: function update(feature) {
             var _feature$size = feature.size,
               size = _feature$size === void 0 ? 5 : _feature$size;
-            return Array.isArray(size) ? [size[0]] : [size];
-          }
-        }
-      });
-
-      // point layer shape;
-      this.styleAttributeService.registerStyleAttribute({
-        name: 'shape',
-        type: AttributeType.Attribute,
-        descriptor: {
-          name: 'a_Shape',
-          shaderLocation: ShaderLocation.SHAPE,
-          buffer: {
-            // give the WebGL driver a hint that this buffer may change
-            usage: gl.DYNAMIC_DRAW,
-            data: [],
-            type: gl.FLOAT
-          },
-          size: 1,
-          update: function update(feature) {
             var _feature$shape = feature.shape,
               shape = _feature$shape === void 0 ? 2 : _feature$shape;
             var shapeIndex = shape2d.indexOf(shape);
-            return [shapeIndex];
+            var a_Size = Array.isArray(size) ? size[0] : size;
+            return [a_Size, shapeIndex];
           }
         }
       });

package/es/point/models/{fillmage.d.ts → fillImage.d.ts}

@@ -1,11 +1,17 @@
-import { IAttribute, IElements, IModel, IModelUniform } from '@antv/l7-core';
+import type { IAttribute, IElements, IModel } from '@antv/l7-core';
 import BaseModel from '../../core/BaseModel';
 export default class FillImageModel extends BaseModel {
     private meter2coord;
     private texture;
     private isMeter;
     private radian;
-    getUninforms(): IModelUniform;
+    protected getCommonUniformsInfo(): {
+        uniformsArray: number[];
+        uniformsLength: number;
+        uniformsOption: {
+            [key: string]: any;
+        };
+    };
     getAttribute(): {
         attributes: {
             [attributeName: string]: IAttribute;

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

@@ -1,5 +1,4 @@
 import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
 import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
@@ -16,10 +15,11 @@ import BaseModel from "../../core/BaseModel";
 import { SizeUnitType } from "../../core/interface";
 import { PointFillTriangulation } from "../../core/triangulation";
 // static pointLayer shader - not support animate
-/* babel-plugin-inline-import '../shaders/image/fillImage_frag.glsl' */
-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";
+import { ShaderLocation } from "../../core/CommonStyleAttribute";
+/* 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 = /*#__PURE__*/function (_BaseModel) {
   _inherits(FillImageModel, _BaseModel);
   var _super = _createSuper(FillImageModel);
@@ -55,14 +55,15 @@ var FillImageModel = /*#__PURE__*/function (_BaseModel) {
         height: _this.iconService.canvasHeight || 128,
         mipmap: true
       });
+      _this.textures = [_this.texture];
     });
     return _this;
   }
   _createClass(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,
@@ -81,13 +82,16 @@ var FillImageModel = /*#__PURE__*/function (_BaseModel) {
        * GAODE1.x         -1
        */
 
-      return _objectSpread({
-        u_raisingHeight: Number(raisingHeight),
+      var commonOptions = {
+        u_textSize: [1024, this.iconService.canvasHeight || 128],
         u_heightfixed: Number(heightfixed),
+        u_raisingHeight: Number(raisingHeight),
         u_size_unit: 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",
@@ -123,7 +127,8 @@ var FillImageModel = /*#__PURE__*/function (_BaseModel) {
         return _regeneratorRuntime.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,
@@ -138,10 +143,10 @@ var FillImageModel = /*#__PURE__*/function (_BaseModel) {
                   face: 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();
           }
@@ -170,6 +175,7 @@ var FillImageModel = /*#__PURE__*/function (_BaseModel) {
         type: AttributeType.Attribute,
         descriptor: {
           name: 'a_Uv',
+          shaderLocation: ShaderLocation.UV,
           buffer: {
             // give the WebGL driver a hint that this buffer may change
             usage: gl.DYNAMIC_DRAW,
@@ -195,6 +201,7 @@ var FillImageModel = /*#__PURE__*/function (_BaseModel) {
         type: AttributeType.Attribute,
         descriptor: {
           name: 'a_Extrude',
+          shaderLocation: ShaderLocation.EXTRUDE,
           buffer: {
             // give the WebGL driver a hint that this buffer may change
             usage: gl.DYNAMIC_DRAW,
@@ -216,6 +223,7 @@ var FillImageModel = /*#__PURE__*/function (_BaseModel) {
         type: AttributeType.Attribute,
         descriptor: {
           name: 'a_Size',
+          shaderLocation: ShaderLocation.SIZE,
           buffer: {
             // give the WebGL driver a hint that this buffer may change
             usage: gl.DYNAMIC_DRAW,

package/es/point/models/image.d.ts

@@ -1,8 +1,15 @@
-import { IModel, IModelUniform } from '@antv/l7-core';
+import type { IModel, IModelUniform } from '@antv/l7-core';
 import BaseModel from '../../core/BaseModel';
 export default class ImageModel extends BaseModel {
     private texture;
     getUninforms(): IModelUniform;
+    protected getCommonUniformsInfo(): {
+        uniformsArray: number[];
+        uniformsLength: number;
+        uniformsOption: {
+            [key: string]: any;
+        };
+    };
     initModels(): Promise<IModel[]>;
     clearModels(): void;
     buildModels(): Promise<IModel[]>;

package/es/point/models/image.js

@@ -12,11 +12,12 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 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 { AttributeType, gl } from '@antv/l7-core';
 import BaseModel from "../../core/BaseModel";
+import { ShaderLocation } from "../../core/CommonStyleAttribute";
 import { PointImageTriangulation } from "../../core/triangulation";
-/* 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 = /*#__PURE__*/function (_BaseModel) {
   _inherits(ImageModel, _BaseModel);
   var _super = _createSuper(ImageModel);
@@ -59,22 +60,32 @@ var ImageModel = /*#__PURE__*/function (_BaseModel) {
   _createClass(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 _objectSpread(_objectSpread({}, 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 _objectSpread({
+      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",
@@ -112,7 +123,8 @@ var ImageModel = /*#__PURE__*/function (_BaseModel) {
         return _regeneratorRuntime.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,
@@ -124,10 +136,10 @@ var ImageModel = /*#__PURE__*/function (_BaseModel) {
                 },
                 primitive: gl.POINTS
               });
-            case 2:
+            case 3:
               model = _context2.sent;
               return _context2.abrupt("return", [model]);
-            case 4:
+            case 5:
             case "end":
               return _context2.stop();
           }
@@ -148,6 +160,7 @@ var ImageModel = /*#__PURE__*/function (_BaseModel) {
         type: AttributeType.Attribute,
         descriptor: {
           name: 'a_Size',
+          shaderLocation: ShaderLocation.SIZE,
           buffer: {
             // give the WebGL driver a hint that this buffer may change
             usage: gl.DYNAMIC_DRAW,
@@ -163,12 +176,13 @@ var ImageModel = /*#__PURE__*/function (_BaseModel) {
         }
       });
 
-      // point layer size;
+      // point layer uv;
       this.styleAttributeService.registerStyleAttribute({
         name: 'uv',
         type: AttributeType.Attribute,
         descriptor: {
           name: 'a_Uv',
+          shaderLocation: ShaderLocation.UV,
           buffer: {
             // give the WebGL driver a hint that this buffer may change
             usage: gl.DYNAMIC_DRAW,

package/es/point/models/index.js

@@ -4,7 +4,7 @@ import EarthExtrudeModel from "./earthExtrude";
 import EarthFillModel from "./earthFill";
 import ExtrudeModel from "./extrude";
 import FillModel from "./fill";
-import FillImageModel from "./fillmage";
+import FillImageModel from "./fillImage";
 import IMageModel from "./image";
 import NormalModel from "./normal";
 import Radar from "./radar";

package/es/point/models/normal.d.ts

@@ -1,6 +1,6 @@
-import { IEncodeFeature, IModel, IModelUniform } from '@antv/l7-core';
+import type { IEncodeFeature, IModel } from '@antv/l7-core';
 import BaseModel from '../../core/BaseModel';
-import { IPointLayerStyleOptions } from '../../core/interface';
+import type { IPointLayerStyleOptions } from '../../core/interface';
 export declare function PointTriangulation(feature: IEncodeFeature): {
     vertices: number[];
     indices: number[];
@@ -8,7 +8,13 @@ export declare function PointTriangulation(feature: IEncodeFeature): {
 };
 export default class NormalModel extends BaseModel {
     getDefaultStyle(): Partial<IPointLayerStyleOptions>;
-    getUninforms(): IModelUniform;
+    protected getCommonUniformsInfo(): {
+        uniformsArray: number[];
+        uniformsLength: number;
+        uniformsOption: {
+            [key: string]: any;
+        };
+    };
     initModels(): Promise<IModel[]>;
     buildModels(): Promise<IModel[]>;
     clearModels(): void;

package/es/point/models/normal.js

@@ -1,5 +1,4 @@
 import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
@@ -12,9 +11,9 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 import { AttributeType, gl } from '@antv/l7-core';
 import BaseModel from "../../core/BaseModel";
 import { ShaderLocation } from "../../core/CommonStyleAttribute";
-/* 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";
 export function PointTriangulation(feature) {
   var coordinates = feature.coordinates;
@@ -39,21 +38,13 @@ var NormalModel = /*#__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(_toConsumableArray(attributes.u_stroke), _toConsumableArray(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 _objectSpread({
+    key: "getCommonUniformsInfo",
+    value: function getCommonUniformsInfo() {
+      var commonOptions = {
         u_size_scale: 0.5
-      }, attributes);
+      };
+      var commonBufferInfo = this.getUniformsBufferInfo(commonOptions);
+      return commonBufferInfo;
     }
   }, {
     key: "initModels",
@@ -78,21 +69,13 @@ var NormalModel = /*#__PURE__*/function (_BaseModel) {
     key: "buildModels",
     value: function () {
       var _buildModels = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
-        var uniformBuffer, commonBuffer, model;
+        var model;
         return _regeneratorRuntime.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,
@@ -105,10 +88,10 @@ var NormalModel = /*#__PURE__*/function (_BaseModel) {
                 primitive: 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/es/point/models/radar.d.ts

@@ -1,7 +1,13 @@
-import { IAnimateOption, IAttribute, IElements, IModel, IModelUniform } from '@antv/l7-core';
+import type { IAnimateOption, IAttribute, IElements, IModel, IModelUniform } from '@antv/l7-core';
 import BaseModel from '../../core/BaseModel';
 export default class RadarModel extends BaseModel {
-    getUninforms(): IModelUniform;
+    protected getCommonUniformsInfo(): {
+        uniformsArray: number[];
+        uniformsLength: number;
+        uniformsOption: {
+            [key: string]: any;
+        };
+    };
     getAnimateUniforms(): IModelUniform;
     getAttribute(): {
         attributes: {