@antv/l7-layers 2.20.13 → 2.20.14

package/es/polygon/shaders/fill/fill_linear_vert.glsl

@@ -2,24 +2,21 @@ layout(location = 0) in vec3 a_Position;
 layout(location = 1) in vec4 a_Color;
 layout(location = 15) in vec3 a_linear;
 
-
 layout(std140) uniform commonUniforms {
   float u_raisingHeight;
   float u_opacitylinear;
   float u_dir;
 };
 
-
 out vec4 v_color;
+out vec3 v_linear;
+out vec2 v_pos;
 
 #pragma include "projection"
 #pragma include "picking"
 
-out vec3 v_linear;
-out vec2 v_pos;
-
 void main() {
-  if(u_opacitylinear > 0.0) {
+  if (u_opacitylinear > 0.0) {
     v_linear = a_linear;
     v_pos = a_Position.xy;
   }
@@ -27,12 +24,12 @@ void main() {
   vec4 project_pos = project_position(vec4(a_Position, 1.0));
   project_pos.z += u_raisingHeight;
 
-  if(u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT || u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET) {
+  if (u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT || u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET) {
     float mapboxZoomScale = 4.0/pow(2.0, 21.0 - u_Zoom);
     project_pos.z *= mapboxZoomScale;
     project_pos.z += u_raisingHeight * mapboxZoomScale;
   }
 
-   gl_Position = project_common_position_to_clipspace_v2(vec4(project_pos.xyz, 1.0));
+  gl_Position = project_common_position_to_clipspace_v2(vec4(project_pos.xyz, 1.0));
   setPickingColor(a_PickingColor);
 }

package/es/raster/models/rasterTerrainRgb.d.ts

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

package/es/raster/models/rasterTerrainRgb.js

@@ -11,10 +11,11 @@ import { AttributeType, gl } from '@antv/l7-core';
 import { getDefaultDomain } from '@antv/l7-utils';
 import BaseModel from "../../core/BaseModel";
 import { RasterImageTriangulation } from "../../core/triangulation";
+import { ShaderLocation } from "../../core/CommonStyleAttribute";
 /* babel-plugin-inline-import '../shaders/terrain/terrain_rgb_frag.glsl' */
-var Raster_terrainFrag = "precision mediump float;\nuniform float u_opacity: 1.0;\n\nuniform sampler2D u_texture;\nuniform sampler2D u_colorTexture;\n\nvarying vec2 v_texCoord;\n\nuniform vec2 u_domain;\nuniform float u_noDataValue;\nuniform bool u_clampLow: true;\nuniform bool u_clampHigh: true;\nuniform vec4 u_unpack;\n\nfloat getElevation(vec2 coord, float bias) {\n    // Convert encoded elevation value to meters\n    vec4 data = texture2D(u_texture, coord,bias) * 255.0;\n    data.a = -1.0;\n    return dot(data, u_unpack);\n}\n\nvec4 getColor(float value) {\n   float normalisedValue =(value- u_domain[0]) / (u_domain[1] - u_domain[0]);\n    vec2 coord = vec2(normalisedValue, 0);\n    return texture2D(u_colorTexture, coord);\n}\n\nvoid main() {\n  float value = getElevation(v_texCoord,0.0);\n  if (value == u_noDataValue) {\n    gl_FragColor = vec4(0.0, 0, 0, 0.0);\n  } else if ((!u_clampLow && value < u_domain[0]) || (!u_clampHigh && value > u_domain[1])) {\n     gl_FragColor = vec4(0.0, 0, 0, 0.0);\n  } else {\n   \n    gl_FragColor = getColor(value);\n    gl_FragColor.a =  gl_FragColor.a * u_opacity ;\n      if(gl_FragColor.a < 0.01)\n      discard;\n  }\n}\n";
+var Raster_terrainFrag = "uniform sampler2D u_texture;\nuniform sampler2D u_colorTexture;\n\nlayout(std140) uniform commonUniforms {\n vec4 u_unpack;\n vec2 u_domain;\n float u_opacity;\n float u_noDataValue;\n bool u_clampLow;\n bool u_clampHigh;\n};\n\nin vec2 v_texCoord;\nout vec4 outputColor;\n\n\nfloat getElevation(vec2 coord, float bias) {\n    // Convert encoded elevation value to meters\n    vec4 data =  texture(SAMPLER_2D(u_texture), coord,bias) * 255.0;\n    data.a = -1.0;\n    return dot(data, u_unpack);\n}\n\nvec4 getColor(float value) {\n   float normalisedValue =(value- u_domain[0]) / (u_domain[1] - u_domain[0]);\n    vec2 coord = vec2(normalisedValue, 0);\n    return  texture(SAMPLER_2D(u_colorTexture), coord);\n}\n\nvoid main() {\n  float value = getElevation(v_texCoord,0.0);\n  if (value == u_noDataValue) {\n    outputColor = vec4(0.0, 0, 0, 0.0);\n  } else if ((!u_clampLow && value < u_domain[0]) || (!u_clampHigh && value > u_domain[1])) {\n     outputColor = vec4(0.0, 0, 0, 0.0);\n  } else {\n   \n    outputColor = getColor(value);\n    outputColor.a =  outputColor.a * u_opacity ;\n      if(outputColor.a < 0.01)\n      discard;\n  }\n}\n";
 /* babel-plugin-inline-import '../shaders/terrain/terrain_rgb_vert.glsl' */
-var Raster_terrainVert = "precision highp float;\nuniform mat4 u_ModelMatrix;\n\nattribute vec3 a_Position;\nattribute vec2 a_Uv;\nvarying vec2 v_texCoord;\n#pragma include \"projection\"\nvoid main() {\n   v_texCoord = a_Uv;\n   vec4 project_pos = project_position(vec4(a_Position, 1.0));\n   gl_Position = project_common_position_to_clipspace_v2(vec4(project_pos.xy,0., 1.0));\n}\n";
+var Raster_terrainVert = "layout(location = 0) in vec3 a_Position;\nlayout(location = 14) in vec2 a_Uv;\n\nlayout(std140) uniform commonUniforms {\n vec4 u_unpack;\n vec2 u_domain;\n float u_opacity;\n float u_noDataValue;\n bool u_clampLow;\n bool u_clampHigh;\n\n};\nout vec2 v_texCoord;\n#pragma include \"projection\"\n\nvoid main() {\n   v_texCoord = a_Uv;\n   vec4 project_pos = project_position(vec4(a_Position, 1.0));\n   gl_Position = project_common_position_to_clipspace_v2(vec4(project_pos.xy,0., 1.0));\n}\n";
 var RasterTerrainRGB = /*#__PURE__*/function (_BaseModel) {
   _inherits(RasterTerrainRGB, _BaseModel);
   var _super = _createSuper(RasterTerrainRGB);
@@ -23,8 +24,8 @@ var RasterTerrainRGB = /*#__PURE__*/function (_BaseModel) {
     return _super.apply(this, arguments);
   }
   _createClass(RasterTerrainRGB, [{
-    key: "getUninforms",
-    value: function getUninforms() {
+    key: "getCommonUniformsInfo",
+    value: function getCommonUniformsInfo() {
       var _ref = this.layer.getLayerConfig(),
         opacity = _ref.opacity,
         _ref$clampLow = _ref.clampLow,
@@ -51,16 +52,19 @@ var RasterTerrainRGB = /*#__PURE__*/function (_BaseModel) {
       } else {
         this.layer.textureService.setColorTexture(colorTexture, rampColors, newdomain);
       }
-      return {
-        u_opacity: opacity || 1,
-        u_texture: this.texture,
+      var commonOptions = {
+        u_unpack: [rScaler, gScaler, bScaler, offset],
         u_domain: newdomain,
+        u_opacity: opacity || 1,
+        u_noDataValue: noDataValue,
         u_clampLow: clampLow,
         u_clampHigh: typeof clampHigh !== 'undefined' ? clampHigh : clampLow,
-        u_noDataValue: noDataValue,
-        u_unpack: [rScaler, gScaler, bScaler, offset],
+        u_texture: this.texture,
         u_colorTexture: texture
       };
+      this.textures = [this.texture, texture];
+      var commonBufferInfo = this.getUniformsBufferInfo(commonOptions);
+      return commonBufferInfo;
     }
   }, {
     key: "initModels",
@@ -70,11 +74,12 @@ var RasterTerrainRGB = /*#__PURE__*/function (_BaseModel) {
         return _regeneratorRuntime.wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
+              this.initUniformsBuffer();
               source = this.layer.getSource();
               createTexture2D = this.rendererService.createTexture2D;
-              _context.next = 4;
+              _context.next = 5;
               return source.data.images;
-            case 4:
+            case 5:
               imageData = _context.sent;
               this.texture = createTexture2D({
                 data: imageData[0],
@@ -83,7 +88,7 @@ var RasterTerrainRGB = /*#__PURE__*/function (_BaseModel) {
                 min: gl.LINEAR,
                 mag: gl.LINEAR
               });
-              _context.next = 8;
+              _context.next = 9;
               return this.layer.buildLayerModel({
                 moduleName: 'RasterTileDataImage',
                 vertexShader: Raster_terrainVert,
@@ -94,10 +99,10 @@ var RasterTerrainRGB = /*#__PURE__*/function (_BaseModel) {
                   enable: false
                 }
               });
-            case 8:
+            case 9:
               model = _context.sent;
               return _context.abrupt("return", [model]);
-            case 10:
+            case 11:
             case "end":
               return _context.stop();
           }
@@ -141,6 +146,7 @@ var RasterTerrainRGB = /*#__PURE__*/function (_BaseModel) {
         type: AttributeType.Attribute,
         descriptor: {
           name: 'a_Uv',
+          shaderLocation: ShaderLocation.UV,
           buffer: {
             usage: gl.DYNAMIC_DRAW,
             data: [],

package/es/raster/shaders/terrain/terrain_rgb_frag.glsl

@@ -1,20 +1,22 @@
-precision mediump float;
-uniform float u_opacity: 1.0;
-
 uniform sampler2D u_texture;
 uniform sampler2D u_colorTexture;
 
-varying vec2 v_texCoord;
+layout(std140) uniform commonUniforms {
+ vec4 u_unpack;
+ vec2 u_domain;
+ float u_opacity;
+ float u_noDataValue;
+ bool u_clampLow;
+ bool u_clampHigh;
+};
+
+in vec2 v_texCoord;
+out vec4 outputColor;
 
-uniform vec2 u_domain;
-uniform float u_noDataValue;
-uniform bool u_clampLow: true;
-uniform bool u_clampHigh: true;
-uniform vec4 u_unpack;
 
 float getElevation(vec2 coord, float bias) {
     // Convert encoded elevation value to meters
-    vec4 data = texture2D(u_texture, coord,bias) * 255.0;
+    vec4 data =  texture(SAMPLER_2D(u_texture), coord,bias) * 255.0;
     data.a = -1.0;
     return dot(data, u_unpack);
 }
@@ -22,20 +24,20 @@ float getElevation(vec2 coord, float bias) {
 vec4 getColor(float value) {
    float normalisedValue =(value- u_domain[0]) / (u_domain[1] - u_domain[0]);
     vec2 coord = vec2(normalisedValue, 0);
-    return texture2D(u_colorTexture, coord);
+    return  texture(SAMPLER_2D(u_colorTexture), coord);
 }
 
 void main() {
   float value = getElevation(v_texCoord,0.0);
   if (value == u_noDataValue) {
-    gl_FragColor = vec4(0.0, 0, 0, 0.0);
+    outputColor = vec4(0.0, 0, 0, 0.0);
   } else if ((!u_clampLow && value < u_domain[0]) || (!u_clampHigh && value > u_domain[1])) {
-     gl_FragColor = vec4(0.0, 0, 0, 0.0);
+     outputColor = vec4(0.0, 0, 0, 0.0);
   } else {
    
-    gl_FragColor = getColor(value);
-    gl_FragColor.a =  gl_FragColor.a * u_opacity ;
-      if(gl_FragColor.a < 0.01)
+    outputColor = getColor(value);
+    outputColor.a =  outputColor.a * u_opacity ;
+      if(outputColor.a < 0.01)
       discard;
   }
 }

package/es/raster/shaders/terrain/terrain_rgb_vert.glsl

@@ -1,10 +1,18 @@
-precision highp float;
-uniform mat4 u_ModelMatrix;
+layout(location = 0) in vec3 a_Position;
+layout(location = 14) in vec2 a_Uv;
 
-attribute vec3 a_Position;
-attribute vec2 a_Uv;
-varying vec2 v_texCoord;
+layout(std140) uniform commonUniforms {
+ vec4 u_unpack;
+ vec2 u_domain;
+ float u_opacity;
+ float u_noDataValue;
+ bool u_clampLow;
+ bool u_clampHigh;
+
+};
+out vec2 v_texCoord;
 #pragma include "projection"
+
 void main() {
    v_texCoord = a_Uv;
    vec4 project_pos = project_position(vec4(a_Position, 1.0));

package/es/tile/service/TilePickService.d.ts

@@ -13,7 +13,7 @@ export declare class TilePickService implements ITilePickService {
     private tilePickID;
     constructor({ layerService, tileLayerService, parent, }: ITilePickServiceOptions);
     pickRender(target: IInteractionTarget): void;
-    pick(layer: ILayer, target: IInteractionTarget): boolean;
+    pick(layer: ILayer, target: IInteractionTarget): Promise<boolean>;
     selectFeature(pickedColors: Uint8Array | undefined): void;
     highlightPickedFeature(pickedColors: Uint8Array | undefined): void;
     updateHighLight(r: number, g: number, b: number, type: string): void;

package/es/tile/service/TilePickService.js

@@ -1,8 +1,10 @@
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+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 _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
 import { TYPES } from '@antv/l7-core';
 import { decodePickingColor, encodePickingColor } from '@antv/l7-utils';
 import { TileSourceService } from "./TileSourceService";
@@ -33,20 +35,41 @@ export var TilePickService = /*#__PURE__*/function () {
     }
   }, {
     key: "pick",
-    value: function pick(layer, target) {
-      var container = this.parent.getContainer();
-      var pickingService = container.get(TYPES.IPickingService);
-      if (layer.type === 'RasterLayer') {
-        var tile = this.tileLayerService.getVisibleTileBylngLat(target.lngLat);
-        if (tile && tile.getMainLayer() !== undefined) {
-          var pickLayer = tile.getMainLayer();
-          return pickLayer.layerPickService.pickRasterLayer(pickLayer, target, this.parent);
-        }
-        return false;
+    value: function () {
+      var _pick = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(layer, target) {
+        var container, pickingService, tile, pickLayer;
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              container = this.parent.getContainer();
+              pickingService = container.get(TYPES.IPickingService);
+              if (!(layer.type === 'RasterLayer')) {
+                _context.next = 8;
+                break;
+              }
+              tile = this.tileLayerService.getVisibleTileBylngLat(target.lngLat);
+              if (!(tile && tile.getMainLayer() !== undefined)) {
+                _context.next = 7;
+                break;
+              }
+              pickLayer = tile.getMainLayer();
+              return _context.abrupt("return", pickLayer.layerPickService.pickRasterLayer(pickLayer, target, this.parent));
+            case 7:
+              return _context.abrupt("return", false);
+            case 8:
+              this.pickRender(target);
+              return _context.abrupt("return", pickingService.pickFromPickingFBO(layer, target));
+            case 10:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee, this);
+      }));
+      function pick(_x, _x2) {
+        return _pick.apply(this, arguments);
       }
-      this.pickRender(target);
-      return pickingService.pickFromPickingFBO(layer, target);
-    }
+      return pick;
+    }()
   }, {
     key: "selectFeature",
     value: function selectFeature(pickedColors) {

package/es/tile/tile/Tile.js

@@ -104,7 +104,8 @@ var Tile = /*#__PURE__*/function (_EventEmitter) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
               mask = new PolygonLayer({
-                visible: false,
+                name: 'mask',
+                visible: true,
                 enablePicking: false
               }).source({
                 type: 'FeatureCollection',
@@ -114,7 +115,7 @@ var Tile = /*#__PURE__*/function (_EventEmitter) {
                   type: 'geojson',
                   featureId: 'id'
                 }
-              }).shape('fill').style({
+              }).shape('fill').color('#0f0').style({
                 opacity: 0.5
               });
               container = createLayerContainer(this.parent.sceneContainer);
@@ -138,7 +139,7 @@ var Tile = /*#__PURE__*/function (_EventEmitter) {
         return _addTileMask.apply(this, arguments);
       }
       return addTileMask;
-    }()
+    }() // 全局 Mask
   }, {
     key: "addMask",
     value: function () {

package/es/utils/load-image.d.ts

@@ -0,0 +1 @@
+export declare function loadImage(url: string): Promise<HTMLImageElement | ImageBitmap>;

package/es/utils/load-image.js

@@ -0,0 +1,46 @@
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+export function loadImage(_x) {
+  return _loadImage.apply(this, arguments);
+}
+function _loadImage() {
+  _loadImage = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(url) {
+    var response, imageBitmap, image;
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          if (!window.createImageBitmap) {
+            _context.next = 14;
+            break;
+          }
+          _context.next = 3;
+          return fetch(url);
+        case 3:
+          response = _context.sent;
+          _context.t0 = createImageBitmap;
+          _context.next = 7;
+          return response.blob();
+        case 7:
+          _context.t1 = _context.sent;
+          _context.next = 10;
+          return (0, _context.t0)(_context.t1);
+        case 10:
+          imageBitmap = _context.sent;
+          return _context.abrupt("return", imageBitmap);
+        case 14:
+          image = new window.Image();
+          return _context.abrupt("return", new Promise(function (res) {
+            image.onload = function () {
+              return res(image);
+            };
+            image.src = url;
+            image.crossOrigin = 'Anonymous';
+          }));
+        case 16:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  }));
+  return _loadImage.apply(this, arguments);
+}

package/lib/core/BaseLayer.js

@@ -30,7 +30,7 @@ var _multiPassRender = require("../utils/multiPassRender");
 var _LayerPickService = _interopRequireDefault(require("./LayerPickService"));
 var _TextureService = _interopRequireDefault(require("./TextureService"));
 var _excluded = ["passes"],
-  _excluded2 = ["moduleName", "vertexShader", "fragmentShader", "inject", "triangulation", "styleOption"];
+  _excluded2 = ["moduleName", "vertexShader", "fragmentShader", "inject", "triangulation", "styleOption", "pickingEnabled"];
 var _dec, _class, _descriptor; // @ts-ignore
 function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
@@ -113,7 +113,6 @@ var BaseLayer = exports.default = (_dec = (0, _l7Core.lazyInject)(_l7Core.TYPES.
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "enableShaderEncodeStyles", []);
     // 数据层数据映射
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "enableDataEncodeStyles", []);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "enablg", []);
     /**
      * 待更新样式属性，在初始化阶段完成注册
      */
@@ -1188,11 +1187,11 @@ var BaseLayer = exports.default = (_dec = (0, _l7Core.lazyInject)(_l7Core.TYPES.
     value: function () {
       var _buildLayerModel = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3(options) {
         var _this10 = this;
-        var moduleName, vertexShader, fragmentShader, inject, triangulation, styleOption, rest, _this$shaderModuleSer, vs, fs, uniforms, createModel;
+        var moduleName, vertexShader, fragmentShader, inject, triangulation, styleOption, _options$pickingEnabl, pickingEnabled, rest, _this$shaderModuleSer, vs, fs, uniforms, createModel;
         return _regenerator.default.wrap(function _callee3$(_context3) {
           while (1) switch (_context3.prev = _context3.next) {
             case 0:
-              moduleName = options.moduleName, vertexShader = options.vertexShader, fragmentShader = options.fragmentShader, inject = options.inject, triangulation = options.triangulation, styleOption = options.styleOption, rest = (0, _objectWithoutProperties2.default)(options, _excluded2);
+              moduleName = options.moduleName, vertexShader = options.vertexShader, fragmentShader = options.fragmentShader, inject = options.inject, triangulation = options.triangulation, styleOption = options.styleOption, _options$pickingEnabl = options.pickingEnabled, pickingEnabled = _options$pickingEnabl === void 0 ? true : _options$pickingEnabl, rest = (0, _objectWithoutProperties2.default)(options, _excluded2);
               this.shaderModuleService.registerModule(moduleName, {
                 vs: vertexShader,
                 fs: fragmentShader,
@@ -1205,6 +1204,10 @@ var BaseLayer = exports.default = (_dec = (0, _l7Core.lazyInject)(_l7Core.TYPES.
                   attributes = _this10$styleAttribut.attributes,
                   elements = _this10$styleAttribut.elements,
                   count = _this10$styleAttribut.count;
+                var uniformBuffers = [].concat((0, _toConsumableArray2.default)(_this10.layerModel.uniformBuffers), (0, _toConsumableArray2.default)(_this10.rendererService.uniformBuffers), [_this10.getLayerUniformBuffer()]);
+                if (pickingEnabled) {
+                  uniformBuffers.push(_this10.getPickingUniformBuffer());
+                }
                 var modelOptions = (0, _objectSpread2.default)({
                   attributes: attributes,
                   uniforms: uniforms,
@@ -1212,7 +1215,7 @@ var BaseLayer = exports.default = (_dec = (0, _l7Core.lazyInject)(_l7Core.TYPES.
                   vs: vs,
                   elements: elements,
                   blend: _blend.BlendTypes[_l7Core.BlendType.normal],
-                  uniformBuffers: [].concat((0, _toConsumableArray2.default)(_this10.layerModel.uniformBuffers), (0, _toConsumableArray2.default)(_this10.rendererService.uniformBuffers), [_this10.getLayerUniformBuffer(), _this10.getPickingUniformBuffer()]),
+                  uniformBuffers: uniformBuffers,
                   textures: _this10.layerModel.textures
                 }, rest);
                 if (count) {

package/lib/core/LayerPickService.js

@@ -5,8 +5,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _l7Core = require("@antv/l7-core");
@@ -26,24 +28,40 @@ var BaseLayerPickService = exports.default = /*#__PURE__*/function () {
       if (layer.tileLayer) {
         return layer.tileLayer.pickRender(target);
       }
-      layer.hooks.beforePickingEncode.call();
       layerService.renderTileLayerMask(layer);
       layer.renderModels({
         ispick: true
       });
-      layer.hooks.afterPickingEncode.call();
     }
   }, {
     key: "pick",
-    value: function pick(layer, target) {
-      var container = this.layer.getContainer();
-      var pickingService = container.get(_l7Core.TYPES.IPickingService);
-      if (layer.type === 'RasterLayer') {
-        return this.pickRasterLayer(layer, target);
+    value: function () {
+      var _pick = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(layer, target) {
+        var container, pickingService;
+        return _regenerator.default.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              container = this.layer.getContainer();
+              pickingService = container.get(_l7Core.TYPES.IPickingService);
+              if (!(layer.type === 'RasterLayer')) {
+                _context.next = 4;
+                break;
+              }
+              return _context.abrupt("return", this.pickRasterLayer(layer, target));
+            case 4:
+              this.pickRender(target);
+              return _context.abrupt("return", pickingService.pickFromPickingFBO(layer, target));
+            case 6:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee, this);
+      }));
+      function pick(_x, _x2) {
+        return _pick.apply(this, arguments);
       }
-      this.pickRender(target);
-      return pickingService.pickFromPickingFBO(layer, target);
-    }
+      return pick;
+    }()
   }, {
     key: "pickRasterLayer",
     value: function pickRasterLayer(layer, target, parent) {

package/lib/geometry/models/sprite.js

@@ -280,8 +280,8 @@ var SpriteModel = exports.default = /*#__PURE__*/function (_BaseModel) {
         img.src = mapTexture;
       } else {
         this.texture = createTexture2D({
-          width: 0,
-          height: 0
+          width: 1,
+          height: 1
         });
       }
     }

package/lib/heatmap/models/grid.js

@@ -18,10 +18,10 @@ var _BaseModel2 = _interopRequireDefault(require("../../core/BaseModel"));
 var _triangulation = require("../../core/triangulation");
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+/* babel-plugin-inline-import '../shaders/grid/grid_frag.glsl' */
+var grid_frag = "in vec4 v_color;\n\n#pragma include \"scene_uniforms\"\n#pragma include \"picking\"\nout vec4 outputColor;\nvoid main() {\n  outputColor = v_color;\n  outputColor = filterColor(outputColor);\n}\n";
 /* babel-plugin-inline-import '../shaders/grid/grid_vert.glsl' */
 var grid_vert = "layout(location = 0) in vec3 a_Position;\r\nlayout(location = 1) in vec4 a_Color;\r\nlayout(location = 10) in vec3 a_Pos;\r\n\r\nlayout(std140) uniform commonUniforms {\r\n    vec2 u_radius;\r\n    float u_opacity;\r\n    float u_coverage;\r\n    float u_angle;\r\n};\r\n\r\n\r\nout vec4 v_color;\r\n\r\n\r\n#pragma include \"projection\"\r\n#pragma include \"project\"\r\n#pragma include \"picking\"\r\n\r\nvoid main() {\r\n  v_color = a_Color;\r\n  v_color.a *= u_opacity;\r\n\r\n  mat2 rotationMatrix = mat2(cos(u_angle), sin(u_angle), -sin(u_angle), cos(u_angle));\r\n  vec2 offset = a_Position.xy * u_radius * rotationMatrix * u_coverage ;\r\n  // vec2 lnglat = unProjectFlat(a_Pos.xy + offset);\r\n  // vec4 project_pos = project_position(vec4(lnglat, 0, 1.0));\r\n  // gl_Position = project_common_position_to_clipspace(project_pos);\r\n\r\n  if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x\r\n    vec2 lnglat = unProjectFlat(a_Pos.xy + offset);\r\n    vec2 customLnglat = customProject(lnglat) - u_sceneCenterMercator; // \u5C06\u7ECF\u7EAC\u5EA6\u8F6C\u6362\u4E3A\u9AD8\u5FB72.0\u9700\u8981\u7684\u5E73\u9762\u5750\u6807\r\n    vec4 project_pos = project_position(vec4(customLnglat, 0, 1.0));\r\n    gl_Position = u_Mvp * (project_pos);\r\n  } else {\r\n     vec2 lnglat = unProjectFlat(a_Pos.xy + offset);\r\n    vec4 project_pos = project_position(vec4(lnglat, 0, 1.0));\r\n    gl_Position = project_common_position_to_clipspace(project_pos);\r\n  }\r\n\r\n  setPickingColor(a_PickingColor);\r\n}\r\n";
-/* babel-plugin-inline-import '../shaders/grid/grid_frag.glsl' */
-var grid_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";
 var GridModel = exports.default = /*#__PURE__*/function (_BaseModel) {
   (0, _inherits2.default)(GridModel, _BaseModel);
   var _super = _createSuper(GridModel);

package/lib/heatmap/models/grid3d.js

@@ -15,14 +15,14 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _l7Core = require("@antv/l7-core");
 var _BaseModel2 = _interopRequireDefault(require("../../core/BaseModel"));
-var _triangulation = require("../../core/triangulation");
 var _CommonStyleAttribute = require("../../core/CommonStyleAttribute");
+var _triangulation = require("../../core/triangulation");
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-/* babel-plugin-inline-import '../shaders/grid3d/grid_3d_vert.glsl' */
-var grid_3d_vert = "layout(location = 0) in vec3 a_Position;\nlayout(location = 1) in vec4 a_Color;\nlayout(location = 9) in float a_Size;\nlayout(location = 10) in vec3 a_Pos;\nlayout(location = 13) in vec3 a_Normal;\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#pragma include \"projection\"\n#pragma include \"project\"\n#pragma include \"light\"\n#pragma include \"picking\"\n\n\nvoid main() {\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\n\n  if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x\n \n    vec2 lnglat = unProjectFlat(a_Pos.xy + offset); // \u7ECF\u7EAC\u5EA6\n    vec2 customLnglat = customProject(lnglat) - u_sceneCenterMercator; // \u5C06\u7ECF\u7EAC\u5EA6\u8F6C\u6362\u4E3A\u9AD8\u5FB72.0\u9700\u8981\u7684\u5E73\u9762\u5750\u6807\n    vec4 project_pos = project_position(vec4(customLnglat, a_Position.z * a_Size, 1.0));\n\n    float lightWeight = calc_lighting(project_pos);\n    v_color =vec4(a_Color.rgb*lightWeight, a_Color.w * u_opacity);\n  \n    gl_Position = u_Mvp * vec4(customLnglat , a_Position.z * a_Size, 1.0);\n  } else {\n    vec2 lnglat = unProjectFlat(a_Pos.xy + offset); // \u5B9E\u9645\u7684\u7ECF\u7EAC\u5EA6\n    vec4 project_pos = project_position(vec4(lnglat, a_Position.z * a_Size, 1.0));\n    \n    float lightWeight = calc_lighting(project_pos);\n    v_color =vec4(a_Color.rgb*lightWeight, a_Color.w);\n    \n    gl_Position = project_common_position_to_clipspace(project_pos);\n  }\n\n\n\n  setPickingColor(a_PickingColor);\n}\n";
 /* babel-plugin-inline-import '../shaders/grid3d/grid_3d_frag.glsl' */
-var grid_3d_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";
+var grid_3d_frag = "in vec4 v_color;\n\nlayout(std140) uniform commonUniforms {\n  vec2 u_radius;\n  float u_opacity;\n  float u_coverage;\n  float u_angle;\n};\n\n#pragma include \"scene_uniforms\"\n#pragma include \"picking\"\n\nout vec4 outputColor;\nvoid main() {\n  outputColor = v_color;\n  outputColor = filterColor(outputColor);\n}\n";
+/* babel-plugin-inline-import '../shaders/grid3d/grid_3d_vert.glsl' */
+var grid_3d_vert = "layout(location = 0) in vec3 a_Position;\nlayout(location = 1) in vec4 a_Color;\nlayout(location = 9) in float a_Size;\nlayout(location = 10) in vec3 a_Pos;\nlayout(location = 13) in vec3 a_Normal;\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#pragma include \"projection\"\n#pragma include \"project\"\n#pragma include \"light\"\n#pragma include \"picking\"\n\nvoid main() {\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\n  if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x\n \n    vec2 lnglat = unProjectFlat(a_Pos.xy + offset); // \u7ECF\u7EAC\u5EA6\n    vec2 customLnglat = customProject(lnglat) - u_sceneCenterMercator; // \u5C06\u7ECF\u7EAC\u5EA6\u8F6C\u6362\u4E3A\u9AD8\u5FB72.0\u9700\u8981\u7684\u5E73\u9762\u5750\u6807\n    vec4 project_pos = project_position(vec4(customLnglat, a_Position.z * a_Size, 1.0));\n\n    float lightWeight = calc_lighting(project_pos);\n    v_color =vec4(a_Color.rgb*lightWeight, a_Color.w * u_opacity);\n  \n    gl_Position = u_Mvp * vec4(customLnglat , a_Position.z * a_Size, 1.0);\n  } else {\n    vec2 lnglat = unProjectFlat(a_Pos.xy + offset); // \u5B9E\u9645\u7684\u7ECF\u7EAC\u5EA6\n    vec4 project_pos = project_position(vec4(lnglat, a_Position.z * a_Size, 1.0));\n    \n    float lightWeight = calc_lighting(project_pos);\n    v_color =vec4(a_Color.rgb*lightWeight, a_Color.w);\n    \n    gl_Position = project_common_position_to_clipspace(project_pos);\n  }\n\n  setPickingColor(a_PickingColor);\n}\n";
 var Grid3DModel = exports.default = /*#__PURE__*/function (_BaseModel) {
   (0, _inherits2.default)(Grid3DModel, _BaseModel);
   var _super = _createSuper(Grid3DModel);

package/lib/heatmap/models/heatmap.js

@@ -35,11 +35,11 @@ var heatmap_3d_vert = "layout(location = 0) in vec3 a_Position;\nlayout(location
 /* 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";
+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  #ifdef VIEWPORT_ORIGIN_TL\n    v_texCoord.y = 1.0 - v_texCoord.y;\n  #endif\n\n  gl_Position = vec4(a_Position.xy, 0, 1.);\n}\n";
 /* 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";
+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 vec2 v_extrude;\nin float v_weight;\nout vec4 outputColor;\n#define GAUSS_COEF  0.3989422804014327\n\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";
+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#define GAUSS_COEF  0.3989422804014327\n\n#pragma include \"projection\"\n#pragma include \"picking\"\n\nvoid main(){\n    vec3 picking_color_placeholder = u_PickingColor;\n\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";
 var isEqual = _l7Utils.lodashUtil.isEqual;
 var HeatMapModel = exports.default = (_dec = (0, _inversify.injectable)(), _dec(_class = /*#__PURE__*/function (_BaseModel) {
   (0, _inherits2.default)(HeatMapModel, _BaseModel);
@@ -121,7 +121,9 @@ var HeatMapModel = exports.default = (_dec = (0, _inversify.injectable)(), _dec(
               });
               this.heatmapFramerBuffer = createFramebuffer({
                 color: this.heatmapTexture,
-                depth: false
+                depth: true,
+                width: Math.floor(width / 4),
+                height: Math.floor(height / 4)
               });
               this.updateColorTexture();
               return _context.abrupt("return", [this.intensityModel, this.colorModel]);
@@ -481,14 +483,16 @@ var HeatMapModel = exports.default = (_dec = (0, _inversify.injectable)(), _dec(
         rampColors = _ref5.rampColors;
       var imageData = (0, _l7Utils.generateColorRamp)(rampColors);
       this.colorTexture = createTexture2D({
-        data: new Uint8Array(imageData.data),
+        data: imageData.data,
+        usage: _l7Core.TextureUsage.SAMPLED,
         width: imageData.width,
         height: imageData.height,
         wrapS: _l7Core.gl.CLAMP_TO_EDGE,
         wrapT: _l7Core.gl.CLAMP_TO_EDGE,
         min: _l7Core.gl.NEAREST,
         mag: _l7Core.gl.NEAREST,
-        flipY: false
+        flipY: false,
+        unorm: true
       });
       this.preRampColors = rampColors;
     }

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

@@ -1,5 +1,6 @@
 in vec4 v_color;
 
+#pragma include "scene_uniforms"
 #pragma include "picking"
 out vec4 outputColor;
 void main() {