@antv/l7-layers 2.20.3 → 2.20.6

package/es/earth/models/bloomsphere.js

@@ -11,10 +11,11 @@ import { AttributeType, gl } from '@antv/l7-core';
 import { lodashUtil } from '@antv/l7-utils';
 import BaseModel from "../../core/BaseModel";
 import { earthOuterTriangulation } from "../../core/triangulation";
-/* babel-plugin-inline-import '../shaders/bloomsphere_frag.glsl' */
-var bloomSphereFrag = "\nuniform float u_opacity;\nuniform vec3 u_CameraPosition;\nvarying vec3 vVertexNormal;\n\nvarying vec4 v_Color;\nvoid main() {\n\n\n    float intensity =  - dot(normalize(vVertexNormal), normalize(u_CameraPosition));\n    // \u53BB\u9664\u80CC\u9762\n    if(intensity > 1.0) intensity = 0.0;\n\n    gl_FragColor = vec4(v_Color.rgb, v_Color.a * intensity * u_opacity);\n}\n";
-/* babel-plugin-inline-import '../shaders/bloomsphere_vert.glsl' */
-var bloomSphereVert = "\nattribute vec3 a_Position;\nattribute vec3 a_Normal;\nattribute vec2 a_Uv;\nattribute vec4 a_Color;\nuniform vec3 u_CameraPosition;\nuniform mat4 u_ViewProjectionMatrix;\nuniform mat4 u_ModelMatrix;\nuniform mat4 u_ViewMatrix;\n\nvarying vec3 vVertexNormal;\nvarying vec4 v_Color;\n\nvoid main() {\n    v_Color = a_Color;\n\n    vVertexNormal = a_Normal;\n\n    gl_Position = u_ViewProjectionMatrix * u_ModelMatrix * vec4(a_Position, 1.0);\n}\n";
+/* babel-plugin-inline-import '../shaders/bloomshpere/bloomsphere_frag.glsl' */
+var bloomSphereFrag = "\nin vec3 vVertexNormal;\nin vec4 v_Color;\n\nlayout(std140) uniform commonUniforms {\n float u_opacity;\n};\nout vec4 outputColor;\n#pragma include \"scene_uniforms\"\nvoid main() {\n    float intensity =  - dot(normalize(vVertexNormal), normalize(u_CameraPosition));\n    // \u53BB\u9664\u80CC\u9762\n    if(intensity > 1.0) intensity = 0.0;\n\n    outputColor = vec4(v_Color.rgb, v_Color.a * intensity * u_opacity);\n}\n";
+/* babel-plugin-inline-import '../shaders/bloomshpere/bloomsphere_vert.glsl' */
+var bloomSphereVert = "layout(location = 0) in vec3 a_Position;\nlayout(location = 1) vec4 a_Color;\nlayout(location = 13) in vec3 a_Normal;\nlayout(location = 14) in vec2 a_Uv;\nlayout(std140) uniform commonUniforms {\n float u_opacity;\n};\n#pragma include \"scene_uniforms\"\n\nout vec3 vVertexNormal;\nout vec4 v_Color;\n\nvoid main() {\n    v_Color = a_Color;\n\n    vVertexNormal = a_Normal;\n\n    gl_Position = u_ViewProjectionMatrix * u_ModelMatrix * vec4(a_Position, 1.0);\n}\n";
+import { ShaderLocation } from "../../core/CommonStyleAttribute";
 var isNumber = lodashUtil.isNumber;
 var EarthBloomSphereModel = /*#__PURE__*/function (_BaseModel) {
   _inherits(EarthBloomSphereModel, _BaseModel);
@@ -24,14 +25,16 @@ var EarthBloomSphereModel = /*#__PURE__*/function (_BaseModel) {
     return _super.apply(this, arguments);
   }
   _createClass(EarthBloomSphereModel, [{
-    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;
-      return {
+      var commonOptions = {
         u_opacity: isNumber(opacity) ? opacity : 1.0
       };
+      var commonBufferInfo = this.getUniformsBufferInfo(commonOptions);
+      return commonBufferInfo;
     }
   }, {
     key: "initModels",
@@ -40,8 +43,9 @@ var EarthBloomSphereModel = /*#__PURE__*/function (_BaseModel) {
         return _regeneratorRuntime.wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
+              this.initUniformsBuffer();
               return _context.abrupt("return", this.buildModels());
-            case 1:
+            case 2:
             case "end":
               return _context.stop();
           }
@@ -100,6 +104,7 @@ var EarthBloomSphereModel = /*#__PURE__*/function (_BaseModel) {
         type: AttributeType.Attribute,
         descriptor: {
           name: 'a_Size',
+          shaderLocation: ShaderLocation.SIZE,
           buffer: {
             usage: gl.DYNAMIC_DRAW,
             data: [],
@@ -118,6 +123,7 @@ var EarthBloomSphereModel = /*#__PURE__*/function (_BaseModel) {
         type: AttributeType.Attribute,
         descriptor: {
           name: 'a_Normal',
+          shaderLocation: ShaderLocation.NORMAL,
           buffer: {
             usage: gl.STATIC_DRAW,
             data: [],
@@ -134,6 +140,7 @@ var EarthBloomSphereModel = /*#__PURE__*/function (_BaseModel) {
         type: AttributeType.Attribute,
         descriptor: {
           name: 'a_Uv',
+          shaderLocation: ShaderLocation.UV,
           buffer: {
             usage: gl.DYNAMIC_DRAW,
             data: [],

package/es/earth/shaders/{atmosphere_frag.glsl → atmosphere/atmosphere_frag.glsl}

@@ -1,10 +1,13 @@
 
-uniform float u_opacity;
-uniform vec3 u_CameraPosition;
+layout(std140) uniform commonUniforms {
+ float u_opacity;
+};
+in vec3 vVertexNormal;
+in float v_offset;
+in vec4 v_Color;
 
-varying vec3 vVertexNormal;
-varying float v_offset;
-varying vec4 v_Color;
+#pragma include "scene_uniforms"
+out vec4 outputColor;
 void main() {
     
     
@@ -13,5 +16,5 @@ void main() {
     // 去除背面
     if(intensity > 1.0) intensity = 0.0;
 
-    gl_FragColor = vec4(v_Color.rgb, v_Color.a * intensity * u_opacity);
+    outputColor = vec4(v_Color.rgb, v_Color.a * intensity * u_opacity);
 }

package/es/earth/shaders/atmosphere/atmosphere_vert.glsl

@@ -0,0 +1,22 @@
+layout(location = 0) in vec3 a_Position;
+layout(location = 1) vec4 a_Color;
+layout(location = 13) in vec3 a_Normal;
+layout(location = 14) in vec2 a_Uv;
+layout(std140) uniform commonUniforms {
+ float u_opacity;
+};
+#pragma include "scene_uniforms"
+out vec3 vVertexNormal;
+out vec4 v_Color;
+out float v_offset;
+
+void main() {
+    float EARTH_RADIUS = 100.0;
+    
+    v_Color = a_Color;
+
+    v_offset = min(((length(u_CameraPosition) - EARTH_RADIUS)/600.0) * 0.5 + 0.4, 1.0);
+    vVertexNormal = a_Normal;
+
+    gl_Position = u_ViewProjectionMatrix * u_ModelMatrix * vec4(a_Position, 1.0);
+}

package/es/earth/shaders/base/base_frag.glsl

@@ -0,0 +1,11 @@
+uniform sampler2D u_texture;
+
+in vec2 v_texCoord;
+in float v_lightWeight;
+out vec4 outputColor;
+
+void main() {
+    vec4 color = texture(SAMPLER_2D(u_texture),vec2(v_texCoord.x,v_texCoord.y));
+    color.xyz = color.xyz * v_lightWeight;
+    outputColor = color;
+}

package/es/earth/shaders/base/base_vert.glsl

@@ -0,0 +1,52 @@
+// attribute vec4 a_Color;
+layout(location = 0) in vec3 a_Position;
+layout(location = 13) in vec3 a_Normal;
+layout(location = 14) in vec2 a_Uv;
+
+// attribute vec2 a_Extrude;
+// attribute float a_Size;
+// attribute float a_Shape;
+
+layout(std140) uniform commonUniforms {
+	vec4 u_sunLight: [1.0, -10.5, 12.0,0.0];
+	float u_ambientRatio : 0.5;
+	float u_diffuseRatio : 0.3;
+	float u_specularRatio : 0.2;
+};
+
+#pragma include "scene_uniforms"
+
+out vec2 v_texCoord;
+out float v_lightWeight;
+
+float calc_lighting(vec4 pos) {
+
+	vec3 worldPos = vec3(pos * u_ModelMatrix);
+
+	vec3 worldNormal = a_Normal;
+
+	// cal light weight
+	vec3 viewDir = normalize(u_CameraPosition - worldPos);
+
+	vec3 lightDir = normalize(u_sunLight.xyz);
+
+	vec3 halfDir = normalize(viewDir+lightDir);
+	// lambert
+	float lambert = dot(worldNormal, lightDir);
+	// specular
+	float specular = pow(max(0.0, dot(worldNormal, halfDir)), 32.0);
+	//sum to light weight
+	float lightWeight = u_ambientRatio + u_diffuseRatio * lambert + u_specularRatio * specular;
+
+	return lightWeight;
+}
+
+void main() {
+
+	v_texCoord = a_Uv;
+
+	float lightWeight = calc_lighting(vec4(a_Position, 1.0));
+	v_lightWeight = lightWeight;
+
+	gl_Position = u_ViewProjectionMatrix * u_ModelMatrix * vec4(a_Position, 1.0);
+}

package/es/earth/shaders/bloomshpere/bloomsphere_frag.glsl

@@ -0,0 +1,16 @@
+
+in vec3 vVertexNormal;
+in vec4 v_Color;
+
+layout(std140) uniform commonUniforms {
+ float u_opacity;
+};
+out vec4 outputColor;
+#pragma include "scene_uniforms"
+void main() {
+    float intensity =  - dot(normalize(vVertexNormal), normalize(u_CameraPosition));
+    // 去除背面
+    if(intensity > 1.0) intensity = 0.0;
+
+    outputColor = vec4(v_Color.rgb, v_Color.a * intensity * u_opacity);
+}

package/es/earth/shaders/bloomshpere/bloomsphere_vert.glsl

@@ -0,0 +1,19 @@
+layout(location = 0) in vec3 a_Position;
+layout(location = 1) vec4 a_Color;
+layout(location = 13) in vec3 a_Normal;
+layout(location = 14) in vec2 a_Uv;
+layout(std140) uniform commonUniforms {
+ float u_opacity;
+};
+#pragma include "scene_uniforms"
+
+out vec3 vVertexNormal;
+out vec4 v_Color;
+
+void main() {
+    v_Color = a_Color;
+
+    vVertexNormal = a_Normal;
+
+    gl_Position = u_ViewProjectionMatrix * u_ModelMatrix * vec4(a_Position, 1.0);
+}

package/es/geometry/index.d.ts

@@ -1,6 +1,6 @@
 import BaseLayer from '../core/BaseLayer';
-import { IGeometryLayerStyleOptions } from '../core/interface';
-import { GeometryModelType } from './models';
+import type { IGeometryLayerStyleOptions } from '../core/interface';
+import type { GeometryModelType } from './models';
 export default class GeometryLayer extends BaseLayer<IGeometryLayerStyleOptions> {
     type: string;
     defaultSourceConfig: {

package/es/geometry/models/billboard.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 BillBoardModel extends BaseModel {
     protected texture: ITexture2D;
@@ -9,6 +9,13 @@ export default class BillBoardModel extends BaseModel {
         vertices: 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/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();
           }