@antv/l7-layers 2.20.5 → 2.20.6

package/es/geometry/models/billboard.js

@@ -1,4 +1,5 @@
 import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
@@ -13,9 +14,10 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 import { AttributeType, gl } from '@antv/l7-core';
 import BaseModel from "../../core/BaseModel";
 /* babel-plugin-inline-import '../shaders/billboard_frag.glsl' */
-var planeFrag = "\nuniform sampler2D u_texture;\nuniform float u_opacity;\n\nvarying vec3 v_Color;\nvarying vec2 v_uv;\n\n#pragma include \"picking\"\nvoid main() {\n  gl_FragColor = texture2D(u_texture, vec2(v_uv.x, 1.0 - v_uv.y));\n  gl_FragColor.a *= u_opacity;\n  gl_FragColor = filterColor(gl_FragColor);\n}\n";
+var planeFrag = "layout(std140) uniform commonUniforms {\n vec2 u_size;\n float u_raisingHeight;\n float u_rotation;\n float u_opacity;\n};\n\nuniform sampler2D u_texture;\n\nin vec2 v_uv;\nout vec4 outputColor;\n\n#pragma include \"picking\"\nvoid main() {\n  outputColor = texture(SAMPLER_2D(u_texture), vec2(v_uv.x, 1.0 - v_uv.y));\n  outputColor.a *= u_opacity;\n  outputColor = filterColor(outputColor);\n}\n";
 /* babel-plugin-inline-import '../shaders/billboard_vert.glsl' */
-var planeVert = "precision highp float;\nuniform mat4 u_ModelMatrix;\nuniform float u_raisingHeight: 0.0;\nuniform float u_opacity;\nuniform vec2 u_size: [1.0, 1.0];\nuniform mat2 u_RotateMatrix;\n\nattribute vec3 a_Extrude;\nattribute vec3 a_Position;\nattribute vec2 a_Uv;\nattribute vec3 a_Color;\n\nvarying vec3 v_Color;\nvarying vec2 v_uv;\n\n#pragma include \"projection\"\n#pragma include \"picking\"\nvoid main() {\n   vec3 extrude = a_Extrude;\n   v_Color = a_Color;\n   v_uv = a_Uv;\n\n   float raiseHeight = u_raisingHeight;\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      raiseHeight = u_raisingHeight * mapboxZoomScale;\n   }\n\n   // \u8BA1\u7B97\u7ECF\u7EAC\u5EA6\u70B9\u4F4D\u5750\u6807\n   vec4 project_pos = project_position(vec4(a_Position.xy, 0.0, 1.0));\n\n   // \u8BA1\u7B97\u7ED5 z \u8F74\u65CB\u8F6C\u540E\u7684\u504F\u79FB\n   vec2 offsetXY = project_pixel(u_RotateMatrix * vec2(extrude.x * u_size.x, 0.0));\n   // \u7ED5 z \u8F74\u65CB\u8F6C\n   float x = project_pos.x + offsetXY.x;\n   float y = project_pos.y + offsetXY.y;\n   // z \u8F74\u4E0D\u53C2\u4E0E\u65CB\u8F6C\n   float z = project_pixel(extrude.y * u_size.y + raiseHeight);\n\n   gl_Position = project_common_position_to_clipspace_v2(vec4(x , y, z , 1.0));\n\n   setPickingColor(a_PickingColor);\n}\n";
+var planeVert = "layout(location = 0) in vec3 a_Position;\nlayout(location = 11) in vec3 a_Extrude;\nlayout(location = 14) in vec2 a_Uv;\n\nlayout(std140) uniform commonUniforms {\n vec2 u_size;\n float u_raisingHeight;\n float u_rotation;\n float u_opacity;\n};\n\nout vec2 v_uv;\n\n#pragma include \"projection\"\n#pragma include \"picking\"\n#pragma include \"rotation_2d\"\nvoid main() {\n   vec3 extrude = a_Extrude;\n   v_uv = a_Uv;\n   float raiseHeight = u_raisingHeight;\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      raiseHeight = u_raisingHeight * mapboxZoomScale;\n   }\n\n   // \u8BA1\u7B97\u7ECF\u7EAC\u5EA6\u70B9\u4F4D\u5750\u6807\n   vec4 project_pos = project_position(vec4(a_Position.xy, 0.0, 1.0));\n\n   // \u8BA1\u7B97\u7ED5 z \u8F74\u65CB\u8F6C\u540E\u7684\u504F\u79FB\n   vec2 offsetXY = project_pixel(rotate_matrix(vec2(extrude.x * u_size.x, 0.0),u_rotation));\n   // \u7ED5 z \u8F74\u65CB\u8F6C\n   float x = project_pos.x + offsetXY.x;\n   float y = project_pos.y + offsetXY.y;\n   // z \u8F74\u4E0D\u53C2\u4E0E\u65CB\u8F6C\n   float z = project_pixel(extrude.y * u_size.y + raiseHeight);\n\n   gl_Position = project_common_position_to_clipspace_v2(vec4(x , y, z , 1.0));\n\n   setPickingColor(a_PickingColor);\n}\n";
+import { ShaderLocation } from "../../core/CommonStyleAttribute";
 var BillBoardModel = /*#__PURE__*/function (_BaseModel) {
   _inherits(BillBoardModel, _BaseModel);
   var _super = _createSuper(BillBoardModel);
@@ -43,6 +45,14 @@ var BillBoardModel = /*#__PURE__*/function (_BaseModel) {
   _createClass(BillBoardModel, [{
     key: "getUninforms",
     value: function getUninforms() {
+      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 _ref2 = this.layer.getLayerConfig(),
         opacity = _ref2.opacity,
         _ref2$width = _ref2.width,
@@ -65,15 +75,16 @@ var BillBoardModel = /*#__PURE__*/function (_BaseModel) {
       }
       // 控制图标的旋转角度（绕 Z 轴旋转）
       this.radian = rotateFlag * Math.PI * (this.mapService.getRotation() % 360) / 180;
-      return {
+      var commonOptions = {
+        u_size: [width, height],
         u_raisingHeight: Number(raisingHeight),
-        u_RotateMatrix: new Float32Array([
-        // z
-        Math.cos(this.radian), Math.sin(this.radian), -Math.sin(this.radian), Math.cos(this.radian)]),
+        u_rotation: this.radian,
         u_opacity: opacity || 1,
-        u_texture: this.texture,
-        u_size: [width, height]
+        u_texture: this.texture
       };
+      this.textures = [this.texture];
+      var commonBufferInfo = this.getUniformsBufferInfo(commonOptions);
+      return commonBufferInfo;
     }
   }, {
     key: "clearModels",
@@ -98,21 +109,23 @@ var BillBoardModel = /*#__PURE__*/function (_BaseModel) {
               if (drawCanvas) {
                 this.updateTexture(drawCanvas);
               }
-              _context.next = 6;
+              this.initUniformsBuffer();
+              _context.next = 7;
               return this.layer.buildLayerModel({
                 moduleName: 'geometryBillboard',
                 vertexShader: planeVert,
                 fragmentShader: planeFrag,
                 triangulation: this.planeGeometryTriangulation,
+                inject: this.getInject(),
                 primitive: gl.TRIANGLES,
                 depth: {
                   enable: true
                 }
               });
-            case 6:
+            case 7:
               model = _context.sent;
               return _context.abrupt("return", [model]);
-            case 8:
+            case 9:
             case "end":
               return _context.stop();
           }
@@ -175,6 +188,7 @@ var BillBoardModel = /*#__PURE__*/function (_BaseModel) {
         type: AttributeType.Attribute,
         descriptor: {
           name: 'a_Extrude',
+          shaderLocation: ShaderLocation.EXTRUDE,
           buffer: {
             usage: gl.DYNAMIC_DRAW,
             data: [],
@@ -193,6 +207,7 @@ var BillBoardModel = /*#__PURE__*/function (_BaseModel) {
         type: AttributeType.Attribute,
         descriptor: {
           name: 'a_Uv',
+          shaderLocation: ShaderLocation.UV,
           buffer: {
             usage: gl.DYNAMIC_DRAW,
             data: [],

package/es/geometry/models/plane.d.ts

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

package/es/geometry/models/plane.js

@@ -1,4 +1,5 @@
 import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
@@ -15,9 +16,10 @@ import { AttributeType, gl } from '@antv/l7-core';
 // import { mat4, vec3 } from 'gl-matrix';
 import BaseModel from "../../core/BaseModel";
 /* 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";
+import { ShaderLocation } from "../../core/CommonStyleAttribute";
 var PlaneModel = /*#__PURE__*/function (_BaseModel) {
   _inherits(PlaneModel, _BaseModel);
   var _super = _createSuper(PlaneModel);
@@ -114,6 +116,14 @@ var PlaneModel = /*#__PURE__*/function (_BaseModel) {
   }, {
     key: "getUninforms",
     value: function getUninforms() {
+      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 _ref4 = this.layer.getLayerConfig(),
         opacity = _ref4.opacity,
         mapTexture = _ref4.mapTexture,
@@ -126,12 +136,15 @@ var PlaneModel = /*#__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",
@@ -140,6 +153,7 @@ var PlaneModel = /*#__PURE__*/function (_BaseModel) {
       // @ts-ignore
       this.terrainImage = null;
       (_this$texture2 = this.texture) === null || _this$texture2 === void 0 || _this$texture2.destroy();
+      this.textures = [];
     }
   }, {
     key: "initModels",
@@ -157,12 +171,14 @@ var PlaneModel = /*#__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: gl.TRIANGLES,
                 depth: {
                   enable: true
@@ -172,10 +188,10 @@ var PlaneModel = /*#__PURE__*/function (_BaseModel) {
                   face: 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();
           }
@@ -357,6 +373,7 @@ var PlaneModel = /*#__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,

package/es/geometry/models/sprite.d.ts

@@ -1,4 +1,4 @@
-import { IModel, IModelUniform, ITexture2D } from '@antv/l7-core';
+import type { IModel, IModelUniform, ITexture2D } from '@antv/l7-core';
 import BaseModel from '../../core/BaseModel';
 declare enum SPRITE_ANIMATE_DIR {
     'UP' = "up",
@@ -22,13 +22,23 @@ export default class SpriteModel extends BaseModel {
         indices: number[];
         size: number;
     };
-    updateModel: () => void;
+    /**
+     * Recalculate and update position attribute.
+     */
+    private updatePosition;
     planeGeometryTriangulation: () => {
         vertices: number[];
         indices: number[];
         size: number;
     };
     getUninforms(): IModelUniform;
+    protected getCommonUniformsInfo(): {
+        uniformsArray: number[];
+        uniformsLength: number;
+        uniformsOption: {
+            [key: string]: any;
+        };
+    };
     clearModels(): void;
     initModels(): Promise<IModel[]>;
     buildModels(): Promise<IModel[]>;

package/es/geometry/models/sprite.js

@@ -1,4 +1,5 @@
 import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
@@ -14,9 +15,9 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 import { gl } from '@antv/l7-core';
 import BaseModel from "../../core/BaseModel";
 /* 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";
@@ -58,16 +59,26 @@ var SpriteModel = /*#__PURE__*/function (_BaseModel) {
         size: 5
       };
     });
-    _defineProperty(_assertThisInitialized(_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.
+     */
+    _defineProperty(_assertThisInitialized(_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);
     });
     _defineProperty(_assertThisInitialized(_this), "planeGeometryTriangulation", function () {
       var _this2;
@@ -133,6 +144,14 @@ var SpriteModel = /*#__PURE__*/function (_BaseModel) {
   }, {
     key: "getUninforms",
     value: function getUninforms() {
+      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 _ref5 = this.layer.getLayerConfig(),
         opacity = _ref5.opacity,
         mapTexture = _ref5.mapTexture,
@@ -142,14 +161,18 @@ var SpriteModel = /*#__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",
@@ -157,6 +180,7 @@ var SpriteModel = /*#__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",
@@ -168,6 +192,7 @@ var SpriteModel = /*#__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;
@@ -179,24 +204,25 @@ var SpriteModel = /*#__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: 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/es/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/es/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/es/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/es/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/es/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/es/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/es/heatmap/index.d.ts

@@ -1,7 +1,7 @@
-import { IAttributeAndElements, IRenderOptions } from '@antv/l7-core';
+import type { IAttributeAndElements, IRenderOptions } from '@antv/l7-core';
 import BaseLayer from '../core/BaseLayer';
-import { IHeatMapLayerStyleOptions } from '../core/interface';
-import { HeatMapModelType } from './models';
+import type { IHeatMapLayerStyleOptions } from '../core/interface';
+import type { HeatMapModelType } from './models';
 export default class HeatMapLayer extends BaseLayer<IHeatMapLayerStyleOptions> {
     type: string;
     buildModels(): Promise<void>;

package/es/heatmap/models/grid.d.ts

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