@antv/l7-layers 2.20.5 → 2.20.6

package/es/heatmap/models/heatmap.js

@@ -1,47 +1,57 @@
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 var _dec, _class;
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-import { AttributeType, gl } from '@antv/l7-core';
+import { AttributeType, gl, TextureUsage } from '@antv/l7-core';
 import { generateColorRamp, getCullFace, lodashUtil } from '@antv/l7-utils';
 import { mat4 } from 'gl-matrix';
 import { injectable } from 'inversify';
 import 'reflect-metadata';
 import BaseModel from "../../core/BaseModel";
 import { HeatmapTriangulation } from "../../core/triangulation";
-/* babel-plugin-inline-import '../shaders/heatmap_3d_frag.glsl' */
-var heatmap3DFrag = "uniform sampler2D u_texture;\nuniform sampler2D u_colorTexture;\nuniform float u_opacity;\nvarying vec2 v_texCoord;\nvarying float v_intensity;\n\nvoid main(){\n   \n     float intensity = texture2D(u_texture, v_texCoord).r;\n    vec4 color = texture2D(u_colorTexture,vec2(intensity, 0));\n    gl_FragColor = color;\n    // gl_FragColor.a = color.a * smoothstep(0.1,0.2,intensity)* u_opacity;\n     gl_FragColor.a = color.a * smoothstep(0.,0.1,intensity) * u_opacity;\n}\n";
-/* babel-plugin-inline-import '../shaders/heatmap_3d_vert.glsl' */
-var heatmap3DVert = "precision highp float;\nattribute vec3 a_Position;\nattribute vec2 a_Uv;\nuniform sampler2D u_texture;\nvarying vec2 v_texCoord;\nuniform mat4 u_ModelMatrix;\nuniform mat4 u_InverseViewProjectionMatrix;\nuniform mat4 u_ViewProjectionMatrixUncentered;\nvarying float v_intensity;\n\n\nvec2 toBezier(float t, vec2 P0, vec2 P1, vec2 P2, vec2 P3) {\n    float t2 = t * t;\n    float one_minus_t = 1.0 - t;\n    float one_minus_t2 = one_minus_t * one_minus_t;\n    return (P0 * one_minus_t2 * one_minus_t + P1 * 3.0 * t * one_minus_t2 + P2 * 3.0 * t2 * one_minus_t + P3 * t2 * t);\n}\nvec2 toBezier(float t, vec4 p){\n    return toBezier(t, vec2(0.0, 0.0), vec2(p.x, p.y), vec2(p.z, p.w), vec2(1.0, 1.0));\n}\n#pragma include \"projection\"\nvoid main() {\n  v_texCoord = a_Uv;\n\n  vec2 pos = a_Uv * vec2(2.0) - vec2(1.0); // \u5C06\u539F\u672C 0 -> 1 \u7684 uv \u8F6C\u6362\u4E3A -1 -> 1 \u7684\u6807\u51C6\u5750\u6807\u7A7A\u95F4\uFF08NDC\uFF09\n\n  vec4 p1 = vec4(pos, 0.0, 1.0); // x/y \u5E73\u9762\u4E0A\u7684\u70B9\uFF08z == 0\uFF09\u53EF\u4EE5\u8BA4\u4E3A\u662F\u4E09\u7EF4\u4E0A\u7684\u70B9\u88AB\u6295\u5F71\u5230\u5E73\u9762\u540E\u7684\u70B9\n\tvec4 p2 = vec4(pos, 1.0, 1.0); // \u5E73\u884C\u4E8Ex/y\u5E73\u9762\u3001z==1 \u7684\u5E73\u9762\u4E0A\u7684\u70B9\n\n\tvec4 inverseP1 = u_InverseViewProjectionMatrix * p1; // \u6839\u636E\u89C6\u56FE\u6295\u5F71\u77E9\u9635\u7684\u9006\u77E9\u9635\u5E73\u9762\u4E0A\u7684\u53CD\u7B97\u51FA\u4E09\u7EF4\u7A7A\u95F4\u4E2D\u7684\u70B9\uFF08p1\u5E73\u9762\u4E0A\u7684\u70B9\uFF09\n\tvec4 inverseP2 = u_InverseViewProjectionMatrix * p2;\n\n  inverseP1 = inverseP1 / inverseP1.w; // \u5F52\u4E00\u5316\u64CD\u4F5C\uFF08\u5F52\u4E00\u5316\u540E\u4E3A\u4E16\u754C\u5750\u6807\uFF09\n\tinverseP2 = inverseP2 / inverseP2.w;\n\n\tfloat zPos = (0.0 - inverseP1.z) / (inverseP2.z - inverseP1.z); // ??\n\tvec4 position = inverseP1 + zPos * (inverseP2 - inverseP1);\n\n  vec4 b= vec4(0.5000, 0.0, 1.0, 0.5000);\n  float fh;\n\n  v_intensity = texture2D(u_texture, v_texCoord).r;\n  fh = toBezier(v_intensity, b).y;\n  gl_Position = u_ViewProjectionMatrixUncentered * vec4(position.xy, fh * project_pixel(50.), 1.0);\n \n}\n"; // 绘制平面热力的 shader
-/* babel-plugin-inline-import '../shaders/heatmap_frag.glsl' */
-var heatmapColorFrag = "uniform sampler2D u_texture;        // \u70ED\u529B\u5F3A\u5EA6\u56FE\nuniform sampler2D u_colorTexture;   // \u6839\u636E\u5F3A\u5EA6\u5206\u5E03\u7684\u8272\u5E26\nuniform float u_opacity;\nvarying vec2 v_texCoord;\n\nuniform vec2 u_ViewportSize;\n\nfloat getBlurIndusty() {\n    float vW = 2.0/u_ViewportSize.x;\n    float vH = 2.0/u_ViewportSize.y;\n    vec2 vUv = v_texCoord;\n    float i11 = texture2D( u_texture, vec2( vUv.x - 1.0 * vW, vUv.y + 1.0 * vH) ).r;\n    float i12 = texture2D( u_texture, vec2( vUv.x - 0.0 * vW, vUv.y + 1.0 * vH) ).r;\n    float i13 = texture2D( u_texture, vec2( vUv.x + 1.0 * vW, vUv.y + 1.0 * vH) ).r;\n\n    float i21 = texture2D( u_texture, vec2( vUv.x - 1.0 * vW, vUv.y) ).r;\n    float i22 = texture2D( u_texture, vec2( vUv.x , vUv.y) ).r;\n    float i23 = texture2D( u_texture, vec2( vUv.x + 1.0 * vW, vUv.y) ).r;\n\n    float i31 = texture2D( u_texture, vec2( vUv.x - 1.0 * vW, vUv.y-1.0*vH) ).r;\n    float i32 = texture2D( u_texture, vec2( vUv.x - 0.0 * vW, vUv.y-1.0*vH) ).r;\n    float i33 = texture2D( u_texture, vec2( vUv.x + 1.0 * vW, vUv.y-1.0*vH) ).r;\n\n    return(\n        i11 + \n        i12 + \n        i13 + \n        i21 + \n        i21 + \n        i22 + \n        i23 + \n        i31 + \n        i32 + \n        i33\n        )/9.0;\n}\n\n\nvoid main(){\n    // float intensity = texture2D(u_texture, v_texCoord).r;\n    float intensity = getBlurIndusty();\n    vec4 color = texture2D(u_colorTexture, vec2(intensity, 0.0));\n\n    gl_FragColor =color;\n    gl_FragColor.a = color.a * smoothstep(0.,0.1,intensity) * u_opacity;\n\n}\n";
-/* babel-plugin-inline-import '../shaders/heatmap_vert.glsl' */
-var heatmapColorVert = "precision highp float;\nattribute vec3 a_Position;\nattribute vec2 a_Uv;\nvarying vec2 v_texCoord;\n\nvoid main() {\n  v_texCoord = a_Uv;\n\n  gl_Position = vec4(a_Position.xy, 0, 1.);\n}\n";
-/* babel-plugin-inline-import '../shaders/heatmap_framebuffer_frag.glsl' */
-var heatmapFramebufferFrag = "precision highp float;\nuniform float u_intensity;\nvarying float v_weight;\nvarying vec2 v_extrude;\n#define GAUSS_COEF  0.3989422804014327\nvoid main(){\n    float d = -0.5 * 3.0 * 3.0 * dot(v_extrude, v_extrude);\n    float val = v_weight * u_intensity * GAUSS_COEF * exp(d);\n    gl_FragColor = vec4(val, 1., 1., 1.);\n}\n";
-/* babel-plugin-inline-import '../shaders/heatmap_framebuffer_vert.glsl' */
-var heatmapFramebufferVert = "precision highp float;\nattribute vec3 a_Position;\nattribute float a_Size;\nattribute vec2 a_Dir;\nuniform float u_intensity;\nuniform float u_radius;\nvarying vec2 v_extrude;\nvarying float v_weight;\nuniform mat4 u_ModelMatrix;\n\n\n#define GAUSS_COEF  0.3989422804014327\n\n#pragma include \"projection\"\n\nvoid main(){\n    v_weight = a_Size;\n    float ZERO = 1.0 / 255.0 / 16.0;\n    float extrude_x = a_Dir.x * 2.0 -1.0;\n    float extrude_y = a_Dir.y * 2.0 -1.0;\n    vec2 extrude_dir = normalize(vec2(extrude_x,extrude_y));\n    float S = sqrt(-2.0 * log(ZERO / a_Size / u_intensity / GAUSS_COEF)) / 2.5;\n    v_extrude = extrude_dir * S;\n\n    vec2 offset = project_pixel(v_extrude * u_radius);\n    vec4 project_pos = project_position(vec4(a_Position.xy, 0.0, 1.0));\n\n    // gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy + offset, 0.0, 1.0));\n\n    if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x\n        gl_Position = u_Mvp * (vec4(project_pos.xy + offset, 0.0, 1.0));\n    } else {\n        gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy + offset, 0.0, 1.0));\n    }\n}\n";
+/* babel-plugin-inline-import '../shaders/heatmap/heatmap_3d_frag.glsl' */
+var heatmap_3d_frag = "layout(std140) uniform commonUniforms {\n  mat4 u_ViewProjectionMatrixUncentered;\n  mat4 u_InverseViewProjectionMatrix;\n  float u_opacity;\n  float u_common_uniforms_padding1;\n  float u_common_uniforms_padding2;\n  float u_common_uniforms_padding3;\n};\n\nuniform sampler2D u_texture;\nuniform sampler2D u_colorTexture;\n\nin vec2 v_texCoord;\nin float v_intensity;\nout vec4 outputColor;\n\nvoid main(){\n   \n    float intensity = texture(SAMPLER_2D(u_texture), v_texCoord).r;\n    vec4 color = texture(SAMPLER_2D(u_colorTexture),vec2(intensity, 0));\n    outputColor = color;\n    // gl_FragColor.a = color.a * smoothstep(0.1,0.2,intensity)* u_opacity;\n   outputColor.a = color.a * smoothstep(0.,0.1,intensity) * u_opacity;\n}\n";
+/* babel-plugin-inline-import '../shaders/heatmap/heatmap_3d_vert.glsl' */
+var heatmap_3d_vert = "layout(location = 0) in vec3 a_Position;\nlayout(location = 14) in vec2 a_Uv;\n\nlayout(std140) uniform commonUniforms {\n  mat4 u_ViewProjectionMatrixUncentered;\n  mat4 u_InverseViewProjectionMatrix;\n  float u_opacity;\n  float u_common_uniforms_padding1;\n  float u_common_uniforms_padding2;\n  float u_common_uniforms_padding3;\n};\n\nuniform sampler2D u_texture;\nuniform sampler2D u_colorTexture;\n\nout vec2 v_texCoord;\nout float v_intensity;\n\nvec2 toBezier(float t, vec2 P0, vec2 P1, vec2 P2, vec2 P3) {\n    float t2 = t * t;\n    float one_minus_t = 1.0 - t;\n    float one_minus_t2 = one_minus_t * one_minus_t;\n    return (P0 * one_minus_t2 * one_minus_t + P1 * 3.0 * t * one_minus_t2 + P2 * 3.0 * t2 * one_minus_t + P3 * t2 * t);\n}\nvec2 toBezier(float t, vec4 p){\n    return toBezier(t, vec2(0.0, 0.0), vec2(p.x, p.y), vec2(p.z, p.w), vec2(1.0, 1.0));\n}\n\n#pragma include \"projection\"\n#pragma include \"project\"\n\nvoid main() {\n  v_texCoord = a_Uv;\n\n  vec2 pos = a_Uv * vec2(2.0) - vec2(1.0); // \u5C06\u539F\u672C 0 -> 1 \u7684 uv \u8F6C\u6362\u4E3A -1 -> 1 \u7684\u6807\u51C6\u5750\u6807\u7A7A\u95F4\uFF08NDC\uFF09\n\n  vec4 p1 = vec4(pos, 0.0, 1.0); // x/y \u5E73\u9762\u4E0A\u7684\u70B9\uFF08z == 0\uFF09\u53EF\u4EE5\u8BA4\u4E3A\u662F\u4E09\u7EF4\u4E0A\u7684\u70B9\u88AB\u6295\u5F71\u5230\u5E73\u9762\u540E\u7684\u70B9\n\tvec4 p2 = vec4(pos, 1.0, 1.0); // \u5E73\u884C\u4E8Ex/y\u5E73\u9762\u3001z==1 \u7684\u5E73\u9762\u4E0A\u7684\u70B9\n\n\tvec4 inverseP1 = u_InverseViewProjectionMatrix * p1; // \u6839\u636E\u89C6\u56FE\u6295\u5F71\u77E9\u9635\u7684\u9006\u77E9\u9635\u5E73\u9762\u4E0A\u7684\u53CD\u7B97\u51FA\u4E09\u7EF4\u7A7A\u95F4\u4E2D\u7684\u70B9\uFF08p1\u5E73\u9762\u4E0A\u7684\u70B9\uFF09\n\tvec4 inverseP2 = u_InverseViewProjectionMatrix * p2;\n\n  inverseP1 = inverseP1 / inverseP1.w; // \u5F52\u4E00\u5316\u64CD\u4F5C\uFF08\u5F52\u4E00\u5316\u540E\u4E3A\u4E16\u754C\u5750\u6807\uFF09\n\tinverseP2 = inverseP2 / inverseP2.w;\n\n\tfloat zPos = (0.0 - inverseP1.z) / (inverseP2.z - inverseP1.z); // ??\n\tvec4 position = inverseP1 + zPos * (inverseP2 - inverseP1);\n\n  vec4 b= vec4(0.5000, 0.0, 1.0, 0.5000);\n  float fh;\n\n  v_intensity = texture(SAMPLER_2D(u_texture), v_texCoord).r;\n  fh = toBezier(v_intensity, b).y;\n  gl_Position = u_ViewProjectionMatrixUncentered * vec4(position.xy, fh * project_pixel(50.), 1.0);\n \n}\n"; // 绘制平面热力的 shader
+/* babel-plugin-inline-import '../shaders/heatmap/heatmap_frag.glsl' */
+var heatmap_frag = "uniform sampler2D u_texture;        // \u70ED\u529B\u5F3A\u5EA6\u56FE\nuniform sampler2D u_colorTexture;   // \u6839\u636E\u5F3A\u5EA6\u5206\u5E03\u7684\u8272\u5E26\n\nlayout(std140) uniform commonUniforms {\n  float u_opacity;\n  float u_common_uniforms_padding1;\n  float u_common_uniforms_padding2;\n  float u_common_uniforms_padding3;\n};\nin vec2 v_texCoord;\nout vec4 outputColor;\n\n#pragma include \"scene_uniforms\"\n\nfloat getBlurIndusty() {\n    float vW = 2.0/ u_ViewportSize.x;\n    float vH = 2.0/ u_ViewportSize.y;\n    vec2 vUv = v_texCoord;\n    float i11 = texture(SAMPLER_2D(u_texture), vec2( vUv.x - 1.0 * vW, vUv.y + 1.0 * vH) ).r;\n    float i12 = texture(SAMPLER_2D(u_texture), vec2( vUv.x - 0.0 * vW, vUv.y + 1.0 * vH) ).r;\n    float i13 = texture(SAMPLER_2D(u_texture), vec2( vUv.x + 1.0 * vW, vUv.y + 1.0 * vH) ).r;\n\n    float i21 = texture(SAMPLER_2D(u_texture), vec2( vUv.x - 1.0 * vW, vUv.y) ).r;\n    float i22 = texture(SAMPLER_2D(u_texture), vec2( vUv.x , vUv.y) ).r;\n    float i23 = texture(SAMPLER_2D(u_texture), vec2( vUv.x + 1.0 * vW, vUv.y) ).r;\n\n    float i31 = texture(SAMPLER_2D(u_texture), vec2( vUv.x - 1.0 * vW, vUv.y-1.0*vH) ).r;\n    float i32 = texture(SAMPLER_2D(u_texture), vec2( vUv.x - 0.0 * vW, vUv.y-1.0*vH) ).r;\n    float i33 = texture(SAMPLER_2D(u_texture), vec2( vUv.x + 1.0 * vW, vUv.y-1.0*vH) ).r;\n\n    return(\n        i11 + \n        i12 + \n        i13 + \n        i21 + \n        i21 + \n        i22 + \n        i23 + \n        i31 + \n        i32 + \n        i33\n        )/9.0;\n}\n\n\nvoid main(){\n    // float intensity = texture(u_texture, v_texCoord).r;\n    float intensity = getBlurIndusty();\n    vec4 color = texture(SAMPLER_2D(u_colorTexture), vec2(intensity, 0.0));\n    outputColor = color;\n    outputColor.a = color.a * smoothstep(0.,0.1,intensity) * u_opacity;\n}\n";
+/* babel-plugin-inline-import '../shaders/heatmap/heatmap_vert.glsl' */
+var heatmap_vert = "\nlayout(location = 0) in vec3 a_Position;\nlayout(location = 14) in vec2 a_Uv;\n\nlayout(std140) uniform commonUniforms {\n  float u_opacity;\n  float u_common_uniforms_padding1;\n  float u_common_uniforms_padding2;\n  float u_common_uniforms_padding3;\n};\n\n#pragma include \"scene_uniforms\"\n\nout vec2 v_texCoord;\nvoid main() {\n  v_texCoord = a_Uv;\n\n  gl_Position = vec4(a_Position.xy, 0, 1.);\n}\n";
+import { ShaderLocation } from "../../core/CommonStyleAttribute";
+/* babel-plugin-inline-import '../shaders/heatmap/heatmap_framebuffer_frag.glsl' */
+var heatmap_framebuffer_frag = "layout(std140) uniform commonUniforms {\n  float u_radius;\n  float u_intensity;\n  float u_common_uniforms_padding1;\n  float u_common_uniforms_padding2;\n};\n\nin float v_weight;\nin vec2 v_extrude;\nout vec4 outputColor;\n#define GAUSS_COEF  0.3989422804014327\nvoid main(){\n    float d = -0.5 * 3.0 * 3.0 * dot(v_extrude, v_extrude);\n    float val = v_weight * u_intensity * GAUSS_COEF * exp(d);\n    outputColor = vec4(val, 1., 1., 1.);\n}\n";
+/* babel-plugin-inline-import '../shaders/heatmap/heatmap_framebuffer_vert.glsl' */
+var heatmap_framebuffer_vert = "layout(location = 0) in vec3 a_Position;\nlayout(location = 9) in float a_Size;\nlayout(location = 10) in vec2 a_Dir;\n\n\nlayout(std140) uniform commonUniforms {\n  float u_radius;\n  float u_intensity;\n  float u_common_uniforms_padding1;\n  float u_common_uniforms_padding2;\n};\n\nout vec2 v_extrude;\nout float v_weight;\n\n\n#define GAUSS_COEF  0.3989422804014327\n\n#pragma include \"projection\"\n\nvoid main(){\n    v_weight = a_Size;\n    float ZERO = 1.0 / 255.0 / 16.0;\n    float extrude_x = a_Dir.x * 2.0 -1.0;\n    float extrude_y = a_Dir.y * 2.0 -1.0;\n    vec2 extrude_dir = normalize(vec2(extrude_x,extrude_y));\n    float S = sqrt(-2.0 * log(ZERO / a_Size / u_intensity / GAUSS_COEF)) / 2.5;\n    v_extrude = extrude_dir * S;\n\n    vec2 offset = project_pixel(v_extrude * u_radius);\n    vec4 project_pos = project_position(vec4(a_Position.xy, 0.0, 1.0));\n\n    // gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy + offset, 0.0, 1.0));\n\n    if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x\n        gl_Position = u_Mvp * (vec4(project_pos.xy + offset, 0.0, 1.0));\n    } else {\n        gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy + offset, 0.0, 1.0));\n    }\n}\n";
 import { heatMap3DTriangulation } from "../triangulation";
 var isEqual = lodashUtil.isEqual;
 var HeatMapModel = (_dec = injectable(), _dec(_class = /*#__PURE__*/function (_BaseModel) {
   _inherits(HeatMapModel, _BaseModel);
   var _super = _createSuper(HeatMapModel);
   function HeatMapModel() {
+    var _this;
     _classCallCheck(this, HeatMapModel);
-    return _super.apply(this, arguments);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "colorModelUniformBuffer", []);
+    _defineProperty(_assertThisInitialized(_this), "heat3DModelUniformBuffer", []);
+    return _this;
   }
   _createClass(HeatMapModel, [{
     key: "render",
     value: function render(options) {
-      var _this = this;
+      var _this2 = this;
       var _this$rendererService = this.rendererService,
         clear = _this$rendererService.clear,
         useFramebuffer = _this$rendererService.useFramebuffer;
@@ -52,14 +62,16 @@ var HeatMapModel = (_dec = injectable(), _dec(_class = /*#__PURE__*/function (_B
           color: [0, 0, 0, 0],
           depth: 1,
           stencil: 0,
-          framebuffer: _this.heatmapFramerBuffer
+          framebuffer: _this2.heatmapFramerBuffer
         });
-        _this.drawIntensityMode();
+        _this2.drawIntensityMode(); // 密度图
       });
+
       if (!isEqual(this.preRampColors, rampColors)) {
         this.updateColorTexture();
       }
-      this.shapeType === 'heatmap' ? this.drawColorMode(options) : this.draw3DHeatMap(options);
+      this.shapeType === 'heatmap' ? this.drawHeatMap(options) // 2D
+      : this.draw3DHeatMap(options); // 3D
     }
   }, {
     key: "getUninforms",
@@ -85,23 +97,25 @@ var HeatMapModel = (_dec = injectable(), _dec(_class = /*#__PURE__*/function (_B
             case 6:
               this.intensityModel = _context.sent;
               // 渲染到屏幕
-              this.colorModel = shapeType === 'heatmap' ? this.buildHeatmapColor() // 2D
+              this.colorModel = shapeType === 'heatmap' ? this.buildHeatmap() // 2D
               : this.build3dHeatMap(); // 3D
               _getViewportSize = getViewportSize(), width = _getViewportSize.width, height = _getViewportSize.height; // 初始化密度图纹理
+              this.heatmapTexture = createTexture2D({
+                width: Math.floor(width / 4),
+                height: Math.floor(height / 4),
+                wrapS: gl.CLAMP_TO_EDGE,
+                wrapT: gl.CLAMP_TO_EDGE,
+                min: gl.LINEAR,
+                mag: gl.LINEAR,
+                usage: TextureUsage.RENDER_TARGET
+              });
               this.heatmapFramerBuffer = createFramebuffer({
-                color: createTexture2D({
-                  width: Math.floor(width / 4),
-                  height: Math.floor(height / 4),
-                  wrapS: gl.CLAMP_TO_EDGE,
-                  wrapT: gl.CLAMP_TO_EDGE,
-                  min: gl.LINEAR,
-                  mag: gl.LINEAR
-                }),
+                color: this.heatmapTexture,
                 depth: false
               });
               this.updateColorTexture();
               return _context.abrupt("return", [this.intensityModel, this.colorModel]);
-            case 12:
+            case 13:
             case "end":
               return _context.stop();
           }
@@ -139,6 +153,7 @@ var HeatMapModel = (_dec = injectable(), _dec(_class = /*#__PURE__*/function (_B
         type: AttributeType.Attribute,
         descriptor: {
           name: 'a_Dir',
+          shaderLocation: 10,
           buffer: {
             usage: gl.DYNAMIC_DRAW,
             data: [],
@@ -155,6 +170,7 @@ var HeatMapModel = (_dec = injectable(), _dec(_class = /*#__PURE__*/function (_B
         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,
@@ -178,12 +194,18 @@ var HeatMapModel = (_dec = injectable(), _dec(_class = /*#__PURE__*/function (_B
         return _regeneratorRuntime.wrap(function _callee3$(_context3) {
           while (1) switch (_context3.prev = _context3.next) {
             case 0:
+              this.uniformBuffers = [this.rendererService.createBuffer({
+                // opacity
+                data: new Float32Array(4).fill(0),
+                // 长度需要大于等于 4
+                isUBO: true
+              })];
               this.layer.triangulation = HeatmapTriangulation;
-              _context3.next = 3;
+              _context3.next = 4;
               return this.layer.buildLayerModel({
                 moduleName: 'heatmapIntensity',
-                vertexShader: heatmapFramebufferVert,
-                fragmentShader: heatmapFramebufferFrag,
+                vertexShader: heatmap_framebuffer_vert,
+                fragmentShader: heatmap_framebuffer_frag,
                 triangulation: HeatmapTriangulation,
                 depth: {
                   enable: false
@@ -193,10 +215,10 @@ var HeatMapModel = (_dec = injectable(), _dec(_class = /*#__PURE__*/function (_B
                   face: getCullFace(this.mapService.version)
                 }
               });
-            case 3:
+            case 4:
               model = _context3.sent;
               return _context3.abrupt("return", model);
-            case 5:
+            case 6:
             case "end":
               return _context3.stop();
           }
@@ -208,12 +230,18 @@ var HeatMapModel = (_dec = injectable(), _dec(_class = /*#__PURE__*/function (_B
       return buildHeatMapIntensity;
     }()
   }, {
-    key: "buildHeatmapColor",
-    value: function buildHeatmapColor() {
+    key: "buildHeatmap",
+    value: function buildHeatmap() {
       this.shaderModuleService.registerModule('heatmapColor', {
-        vs: heatmapColorVert,
-        fs: heatmapColorFrag
+        vs: heatmap_vert,
+        fs: heatmap_frag
       });
+      this.colorModelUniformBuffer = [this.rendererService.createBuffer({
+        // opacity
+        data: new Float32Array(4).fill(0),
+        // 长度需要大于等于 4
+        isUBO: true
+      })];
       var _this$shaderModuleSer = this.shaderModuleService.getModule('heatmapColor'),
         vs = _this$shaderModuleSer.vs,
         fs = _this$shaderModuleSer.fs,
@@ -226,8 +254,10 @@ var HeatMapModel = (_dec = injectable(), _dec(_class = /*#__PURE__*/function (_B
       return createModel({
         vs: vs,
         fs: fs,
+        uniformBuffers: [].concat(_toConsumableArray(this.colorModelUniformBuffer), _toConsumableArray(this.rendererService.uniformBuffers)),
         attributes: {
           a_Position: createAttribute({
+            shaderLocation: ShaderLocation.POSITION,
             buffer: createBuffer({
               data: [-1, 1, 0, 1, 1, 0, -1, -1, 0, 1, -1, 0],
               type: gl.FLOAT
@@ -235,6 +265,7 @@ var HeatMapModel = (_dec = injectable(), _dec(_class = /*#__PURE__*/function (_B
             size: 3
           }),
           a_Uv: createAttribute({
+            shaderLocation: ShaderLocation.UV,
             buffer: createBuffer({
               data: [0, 1, 1, 1, 0, 0, 1, 0],
               type: gl.FLOAT
@@ -253,25 +284,30 @@ var HeatMapModel = (_dec = injectable(), _dec(_class = /*#__PURE__*/function (_B
         })
       });
     }
+    // 绘制密度图
   }, {
     key: "drawIntensityMode",
     value: function drawIntensityMode() {
       var _this$intensityModel;
       var _ref2 = this.layer.getLayerConfig(),
-        opacity = _ref2.opacity,
         _ref2$intensity = _ref2.intensity,
         intensity = _ref2$intensity === void 0 ? 10 : _ref2$intensity,
         _ref2$radius = _ref2.radius,
         radius = _ref2$radius === void 0 ? 5 : _ref2$radius;
+      var commonOptions = {
+        u_radius: radius,
+        u_intensity: intensity
+      };
+      this.uniformBuffers[0].subData({
+        offset: 0,
+        data: [radius, intensity]
+      });
       this.layerService.beforeRenderData(this.layer);
       this.layer.hooks.beforeRender.call();
+
       // 绘制密度图
       (_this$intensityModel = this.intensityModel) === null || _this$intensityModel === void 0 || _this$intensityModel.draw({
-        uniforms: {
-          u_opacity: opacity || 1.0,
-          u_radius: radius,
-          u_intensity: intensity
-        },
+        uniforms: commonOptions,
         blend: {
           enable: true,
           func: {
@@ -295,17 +331,25 @@ var HeatMapModel = (_dec = injectable(), _dec(_class = /*#__PURE__*/function (_B
       this.layer.hooks.afterRender.call();
     }
   }, {
-    key: "drawColorMode",
-    value: function drawColorMode(options) {
+    key: "drawHeatMap",
+    value: function drawHeatMap(options) {
       var _this$colorModel;
       var _ref3 = this.layer.getLayerConfig(),
-        opacity = _ref3.opacity;
+        _ref3$opacity = _ref3.opacity,
+        opacity = _ref3$opacity === void 0 ? 1.0 : _ref3$opacity;
+      var commonOptions = {
+        u_opacity: opacity,
+        u_colorTexture: this.colorTexture,
+        u_texture: this.heatmapFramerBuffer
+      };
+      var textures = [this.heatmapTexture, this.colorTexture];
+      this.colorModelUniformBuffer[0].subData({
+        offset: 0,
+        data: [opacity]
+      });
       (_this$colorModel = this.colorModel) === null || _this$colorModel === void 0 || _this$colorModel.draw({
-        uniforms: {
-          u_opacity: opacity || 1.0,
-          u_colorTexture: this.colorTexture,
-          u_texture: this.heatmapFramerBuffer
-        },
+        uniforms: commonOptions,
+        textures: textures,
         blend: this.getBlend(),
         stencil: this.getStencil(options)
       });
@@ -315,25 +359,25 @@ var HeatMapModel = (_dec = injectable(), _dec(_class = /*#__PURE__*/function (_B
     value: function draw3DHeatMap(options) {
       var _this$colorModel2;
       var _ref4 = this.layer.getLayerConfig(),
-        opacity = _ref4.opacity;
-
-      // const invert = mat4.invert(
-      //   mat4.create(),
-      //   mat4.fromValues(
-      //     // @ts-ignore
-      //     ...this.cameraService.getViewProjectionMatrixUncentered(),
-      //   ),
-      // ) as mat4;
+        _ref4$opacity = _ref4.opacity,
+        opacity = _ref4$opacity === void 0 ? 1.0 : _ref4$opacity;
       var invert = mat4.create();
       mat4.invert(invert, this.cameraService.getViewProjectionMatrixUncentered());
+      var commonOptions = {
+        u_opacity: opacity,
+        u_colorTexture: this.colorTexture,
+        u_texture: this.heatmapFramerBuffer,
+        u_ViewProjectionMatrixUncentered: this.cameraService.getViewProjectionMatrixUncentered(),
+        u_InverseViewProjectionMatrix: _toConsumableArray(invert)
+      };
+      this.heat3DModelUniformBuffer[0].subData({
+        offset: 0,
+        data: [].concat(_toConsumableArray(commonOptions.u_ViewProjectionMatrixUncentered), _toConsumableArray(commonOptions.u_InverseViewProjectionMatrix), [opacity])
+      });
+      var textures = [this.heatmapTexture, this.colorTexture];
       (_this$colorModel2 = this.colorModel) === null || _this$colorModel2 === void 0 || _this$colorModel2.draw({
-        uniforms: {
-          u_opacity: opacity || 1.0,
-          u_colorTexture: this.colorTexture,
-          u_texture: this.heatmapFramerBuffer,
-          u_ViewProjectionMatrixUncentered: this.cameraService.getViewProjectionMatrixUncentered(),
-          u_InverseViewProjectionMatrix: _toConsumableArray(invert)
-        },
+        uniforms: commonOptions,
+        textures: textures,
         blend: {
           enable: true,
           func: {
@@ -355,9 +399,15 @@ var HeatMapModel = (_dec = injectable(), _dec(_class = /*#__PURE__*/function (_B
         height = _getViewportSize2.height;
       var triangulation = heatMap3DTriangulation(width / 4.0, height / 4.0);
       this.shaderModuleService.registerModule('heatmap3dColor', {
-        vs: heatmap3DVert,
-        fs: heatmap3DFrag
+        vs: heatmap_3d_vert,
+        fs: heatmap_3d_frag
       });
+      this.heat3DModelUniformBuffer = [this.rendererService.createBuffer({
+        // opacity
+        data: new Float32Array(16 * 2 + 4).fill(0),
+        // 长度需要大于等于 4
+        isUBO: true
+      })];
       var _this$shaderModuleSer2 = this.shaderModuleService.getModule('heatmap3dColor'),
         vs = _this$shaderModuleSer2.vs,
         fs = _this$shaderModuleSer2.fs,
@@ -372,6 +422,7 @@ var HeatMapModel = (_dec = injectable(), _dec(_class = /*#__PURE__*/function (_B
         fs: fs,
         attributes: {
           a_Position: createAttribute({
+            shaderLocation: ShaderLocation.POSITION,
             buffer: createBuffer({
               data: triangulation.vertices,
               type: gl.FLOAT
@@ -379,6 +430,7 @@ var HeatMapModel = (_dec = injectable(), _dec(_class = /*#__PURE__*/function (_B
             size: 3
           }),
           a_Uv: createAttribute({
+            shaderLocation: ShaderLocation.UV,
             buffer: createBuffer({
               data: triangulation.uvs,
               type: gl.FLOAT
@@ -387,6 +439,7 @@ var HeatMapModel = (_dec = injectable(), _dec(_class = /*#__PURE__*/function (_B
           })
         },
         primitive: gl.TRIANGLES,
+        uniformBuffers: [].concat(_toConsumableArray(this.heat3DModelUniformBuffer), _toConsumableArray(this.rendererService.uniformBuffers)),
         uniforms: _objectSpread({}, uniforms),
         depth: {
           enable: true
@@ -407,11 +460,6 @@ var HeatMapModel = (_dec = injectable(), _dec(_class = /*#__PURE__*/function (_B
         })
       });
     }
-  }, {
-    key: "updateStyle",
-    value: function updateStyle() {
-      this.updateColorTexture();
-    }
   }, {
     key: "updateColorTexture",
     value: function updateColorTexture() {

package/es/heatmap/models/hexagon.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 HexagonModel extends BaseModel {
     getUninforms(): IModelUniform;
+    protected getCommonUniformsInfo(): {
+        uniformsArray: number[];
+        uniformsLength: number;
+        uniformsOption: {
+            [key: string]: any;
+        };
+    };
     initModels(): Promise<IModel[]>;
     buildModels(): Promise<IModel[]>;
     protected registerBuiltinAttributes(): void;

package/es/heatmap/models/hexagon.js

@@ -1,4 +1,5 @@
 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";
@@ -10,10 +11,10 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 import { AttributeType, gl } from '@antv/l7-core';
 import BaseModel from "../../core/BaseModel";
 import { HeatmapGridTriangulation } from "../../core/triangulation";
-/* babel-plugin-inline-import '../shaders/hexagon_frag.glsl' */
-var heatmapGridFrag = "precision highp float;\nvarying vec4 v_color;\nuniform float u_opacity: 1;\n\n#pragma include \"picking\"\n\nvoid main() {\n  gl_FragColor = v_color;\n  gl_FragColor.a *= u_opacity;\n\n  gl_FragColor = filterColor(gl_FragColor);\n}\n";
-/* babel-plugin-inline-import '../shaders/hexagon_vert.glsl' */
-var heatmapGridVert = "precision highp float;\n// \u591A\u8FB9\u5F62\u9876\u70B9\u5750\u6807\nattribute vec3 a_Position;\n// \u591A\u8FB9\u5F62\u7ECF\u7EAC\u5EA6\u5750\u6807\nattribute vec3 a_Pos;\nattribute float a_Size;\nattribute vec4 a_Color;\nuniform vec2 u_radius;\nuniform float u_coverage: 0.9;\nuniform float u_angle: 0;\nuniform mat4 u_ModelMatrix;\n\nvarying vec4 v_color;\n\nuniform vec2 u_sceneCenterMercator;\n\n#pragma include \"projection\"\n#pragma include \"project\"\n#pragma include \"picking\"\n\nvoid main() {\n  v_color = a_Color;\n    \n  mat2 rotationMatrix = mat2(cos(u_angle), sin(u_angle), -sin(u_angle), cos(u_angle));\n  vec2 offset =(vec2(a_Position.xy * u_radius * rotationMatrix * u_coverage));\n  vec2 lnglat = unProjectFlat(a_Pos.xy + offset);\n \n  // vec4 project_pos = project_position(vec4(lnglat, 0, 1.0));\n  // gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy, 0., 1.0));\n  if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x\n    // gl_Position = u_Mvp * (vec4(project_pos.xy, 0., 1.0));\n    // gl_Position = u_Mvp * (vec4(a_Pos.xy + offset, 0., 1.0));\n    vec2 customLnglat = customProject(lnglat) - u_sceneCenterMercator;\n    vec4 project_pos = project_position(vec4(customLnglat, 0, 1.0));\n    gl_Position = u_Mvp * vec4(project_pos.xy, 0.0, 1.0);\n  } else {\n    vec4 project_pos = project_position(vec4(lnglat, 0, 1.0));\n    gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy, 0., 1.0));\n  }\n  setPickingColor(a_PickingColor);\n}\n";
+/* babel-plugin-inline-import '../shaders/hexagon/hexagon_frag.glsl' */
+var hexagon_frag = "in vec4 v_color;\n\n#pragma include \"picking\"\nout vec4 outputColor;\nvoid main() {\n  outputColor = v_color;\n  outputColor = filterColor(outputColor);\n}\n";
+/* babel-plugin-inline-import '../shaders/hexagon/hexagon_vert.glsl' */
+var hexagon_vert = "layout(location = 0) in vec3 a_Position;\nlayout(location = 1) in vec4 a_Color;\nlayout(location = 10) in vec3 a_Pos;\n\nlayout(std140) uniform commonUniforms {\n    vec2 u_radius;\n    float u_opacity;\n    float u_coverage;\n    float u_angle;\n};\n\nout vec4 v_color;\n\n\n#pragma include \"projection\"\n#pragma include \"project\"\n#pragma include \"picking\"\n\nvoid main() {\n  v_color = a_Color;\n  v_color.a *= u_opacity;\n    \n  mat2 rotationMatrix = mat2(cos(u_angle), sin(u_angle), -sin(u_angle), cos(u_angle));\n  vec2 offset =(vec2(a_Position.xy * u_radius * rotationMatrix * u_coverage));\n  vec2 lnglat = unProjectFlat(a_Pos.xy + offset);\n \n  // vec4 project_pos = project_position(vec4(lnglat, 0, 1.0));\n  // gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy, 0., 1.0));\n  if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x\n    // gl_Position = u_Mvp * (vec4(project_pos.xy, 0., 1.0));\n    // gl_Position = u_Mvp * (vec4(a_Pos.xy + offset, 0., 1.0));\n    vec2 customLnglat = customProject(lnglat) - u_sceneCenterMercator;\n    vec4 project_pos = project_position(vec4(customLnglat, 0, 1.0));\n    gl_Position = u_Mvp * vec4(project_pos.xy, 0.0, 1.0);\n  } else {\n    vec4 project_pos = project_position(vec4(lnglat, 0, 1.0));\n    gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy, 0., 1.0));\n  }\n  setPickingColor(a_PickingColor);\n}\n";
 var HexagonModel = /*#__PURE__*/function (_BaseModel) {
   _inherits(HexagonModel, _BaseModel);
   var _super = _createSuper(HexagonModel);
@@ -24,16 +25,26 @@ var HexagonModel = /*#__PURE__*/function (_BaseModel) {
   _createClass(HexagonModel, [{
     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 _ref = this.layer.getLayerConfig(),
         opacity = _ref.opacity,
         coverage = _ref.coverage,
         angle = _ref.angle;
-      return {
+      var commonOptions = {
+        u_radius: [this.layer.getSource().data.xOffset, this.layer.getSource().data.yOffset],
         u_opacity: opacity || 1.0,
         u_coverage: coverage || 0.9,
-        u_angle: angle || 0,
-        u_radius: [this.layer.getSource().data.xOffset, this.layer.getSource().data.yOffset]
+        u_angle: angle || 0
       };
+      var commonBufferInfo = this.getUniformsBufferInfo(commonOptions);
+      return commonBufferInfo;
     }
   }, {
     key: "initModels",
@@ -62,21 +73,22 @@ var HexagonModel = /*#__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: 'heatmapHexagon',
-                vertexShader: heatmapGridVert,
-                fragmentShader: heatmapGridFrag,
+                vertexShader: hexagon_vert,
+                fragmentShader: hexagon_frag,
                 triangulation: HeatmapGridTriangulation,
                 depth: {
                   enable: false
                 },
                 primitive: gl.TRIANGLES
               });
-            case 2:
+            case 3:
               model = _context2.sent;
               return _context2.abrupt("return", [model]);
-            case 4:
+            case 5:
             case "end":
               return _context2.stop();
           }
@@ -96,6 +108,7 @@ var HexagonModel = /*#__PURE__*/function (_BaseModel) {
         type: AttributeType.Attribute,
         descriptor: {
           name: 'a_Pos',
+          shaderLocation: 10,
           buffer: {
             usage: gl.DYNAMIC_DRAW,
             data: [],

package/es/heatmap/shaders/grid/grid_frag.glsl

@@ -0,0 +1,8 @@
+in vec4 v_color;
+
+#pragma include "picking"
+out vec4 outputColor;
+void main() {
+  outputColor = v_color;
+  outputColor = filterColor(outputColor);
+}

package/es/heatmap/shaders/{grid_vert.glsl → grid/grid_vert.glsl}

@@ -1,18 +1,17 @@
-precision highp float;
-// 多边形顶点坐标
-attribute vec3 a_Position;
-// 多边形经纬度坐标
-attribute vec3 a_Pos;
-attribute float a_Size;
-attribute vec4 a_Color;
-uniform vec2 u_radius;
-uniform float u_coverage: 0.9;
-uniform float u_angle: 0;
-uniform mat4 u_ModelMatrix;
-
-varying vec4 v_color;
-
-uniform vec2 u_sceneCenterMercator;
+layout(location = 0) in vec3 a_Position;
+layout(location = 1) in vec4 a_Color;
+layout(location = 10) in vec3 a_Pos;
+
+layout(std140) uniform commonUniforms {
+    vec2 u_radius;
+    float u_opacity;
+    float u_coverage;
+    float u_angle;
+};
+
+
+out vec4 v_color;
+
 
 #pragma include "projection"
 #pragma include "project"
@@ -20,6 +19,7 @@ uniform vec2 u_sceneCenterMercator;
 
 void main() {
   v_color = a_Color;
+  v_color.a *= u_opacity;
 
   mat2 rotationMatrix = mat2(cos(u_angle), sin(u_angle), -sin(u_angle), cos(u_angle));
   vec2 offset = a_Position.xy * u_radius * rotationMatrix * u_coverage ;

package/es/heatmap/shaders/grid3d/grid_3d_frag.glsl

@@ -0,0 +1,8 @@
+in vec4 v_color;
+
+#pragma include "picking"
+out vec4 outputColor;
+void main() {
+  outputColor = v_color;
+  outputColor = filterColor(outputColor);
+}

package/{lib/heatmap/shaders/hexagon_3d_vert.glsl → es/heatmap/shaders/grid3d/grid_3d_vert.glsl}

@@ -1,20 +1,17 @@
-precision highp float;
-// 多边形顶点坐标
-attribute vec3 a_Position;
-// 多边形经纬度坐标
-attribute vec3 a_Pos;
+layout(location = 0) in vec3 a_Position;
+layout(location = 1) in vec4 a_Color;
+layout(location = 9) in float a_Size;
+layout(location = 10) in vec3 a_Pos;
+layout(location = 13) in vec3 a_Normal;
 
-attribute vec3 a_Normal;
-attribute float a_Size;
-attribute vec4 a_Color;
-uniform vec2 u_radius;
-uniform float u_coverage: 0.9;
-uniform float u_angle: 0;
-uniform mat4 u_ModelMatrix;
+layout(std140) uniform commonUniforms {
+    vec2 u_radius;
+    float u_opacity;
+    float u_coverage;
+    float u_angle;
+};
 
-varying vec4 v_color;
-
-uniform vec2 u_sceneCenterMercator;
+out vec4 v_color;
 
 #pragma include "projection"
 #pragma include "project"
@@ -34,7 +31,7 @@ void main() {
     vec4 project_pos = project_position(vec4(customLnglat, a_Position.z * a_Size, 1.0));
 
     float lightWeight = calc_lighting(project_pos);
-    v_color =vec4(a_Color.rgb*lightWeight, a_Color.w);
+    v_color =vec4(a_Color.rgb*lightWeight, a_Color.w * u_opacity);
   
     gl_Position = u_Mvp * vec4(customLnglat , a_Position.z * a_Size, 1.0);
   } else {

package/es/heatmap/shaders/heatmap/heatmap_3d_frag.glsl

@@ -0,0 +1,24 @@
+layout(std140) uniform commonUniforms {
+  mat4 u_ViewProjectionMatrixUncentered;
+  mat4 u_InverseViewProjectionMatrix;
+  float u_opacity;
+  float u_common_uniforms_padding1;
+  float u_common_uniforms_padding2;
+  float u_common_uniforms_padding3;
+};
+
+uniform sampler2D u_texture;
+uniform sampler2D u_colorTexture;
+
+in vec2 v_texCoord;
+in float v_intensity;
+out vec4 outputColor;
+
+void main(){
+   
+    float intensity = texture(SAMPLER_2D(u_texture), v_texCoord).r;
+    vec4 color = texture(SAMPLER_2D(u_colorTexture),vec2(intensity, 0));
+    outputColor = color;
+    // gl_FragColor.a = color.a * smoothstep(0.1,0.2,intensity)* u_opacity;
+   outputColor.a = color.a * smoothstep(0.,0.1,intensity) * u_opacity;
+}