@deck.gl/aggregation-layers 9.0.0-beta.1 → 9.0.0-beta.2

package/dist/es5/heatmap-layer/triangle-layer-fragment.glsl.js

@@ -4,6 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _default = "#version 300 es\n#define SHADER_NAME triangle-layer-fragment-shader\n\nprecision highp float;\n\nuniform float opacity;\nuniform sampler2D texture;\nuniform sampler2D colorTexture;\nuniform float aggregationMode;\n\nin vec2 vTexCoords;\nin float vIntensityMin;\nin float vIntensityMax;\n\nout vec4 fragColor;\n\nvec4 getLinearColor(float value) {\n  float factor = clamp(value * vIntensityMax, 0., 1.);\n  vec4 color = texture(colorTexture, vec2(factor, 0.5));\n  color.a *= min(value * vIntensityMin, 1.0);\n  return color;\n}\n\nvoid main(void) {\n  vec4 weights = texture(texture, vTexCoords);\n  float weight = weights.r;\n\n  if (aggregationMode > 0.5) {\n    weight /= max(1.0, weights.a);\n  }\n  if (weight <= 0.) {\n     discard;\n  }\n\n  vec4 linearColor = getLinearColor(weight);\n  linearColor.a *= opacity;\n  fragColor = linearColor;\n}\n";
+var _default = "#version 300 es\n#define SHADER_NAME triangle-layer-fragment-shader\n\nprecision highp float;\n\nuniform float opacity;\nuniform sampler2D weightsTexture;\nuniform sampler2D colorTexture;\nuniform float aggregationMode;\n\nin vec2 vTexCoords;\nin float vIntensityMin;\nin float vIntensityMax;\n\nout vec4 fragColor;\n\nvec4 getLinearColor(float value) {\n  float factor = clamp(value * vIntensityMax, 0., 1.);\n  vec4 color = texture(colorTexture, vec2(factor, 0.5));\n  color.a *= min(value * vIntensityMin, 1.0);\n  return color;\n}\n\nvoid main(void) {\n  vec4 weights = texture(weightsTexture, vTexCoords);\n  float weight = weights.r;\n\n  if (aggregationMode > 0.5) {\n    weight /= max(1.0, weights.a);\n  }\n  if (weight <= 0.) {\n     discard;\n  }\n\n  vec4 linearColor = getLinearColor(weight);\n  linearColor.a *= opacity;\n  fragColor = linearColor;\n}\n";
 exports.default = _default;
 //# sourceMappingURL=triangle-layer-fragment.glsl.js.map

package/dist/es5/heatmap-layer/triangle-layer.js

@@ -64,48 +64,47 @@ var TriangleLayer = function (_Layer) {
 
   _proto.initializeState = function initializeState(_ref) {
     var device = _ref.device;
-    var attributeManager = this.getAttributeManager();
-    attributeManager.add({
-      positions: {
-        size: 3,
-        noAlloc: true
-      },
-      texCoords: {
-        size: 2,
-        noAlloc: true
-      }
-    });
     this.setState({
       model: this._getModel(device)
     });
   };
 
   _proto._getModel = function _getModel(device) {
-    var vertexCount = this.props.vertexCount;
+    var _this$props = this.props,
+        vertexCount = _this$props.vertexCount,
+        data = _this$props.data,
+        weightsTexture = _this$props.weightsTexture,
+        maxTexture = _this$props.maxTexture,
+        colorTexture = _this$props.colorTexture;
     return new _engine.Model(device, _objectSpread(_objectSpread({}, this.getShaders()), {}, {
       id: this.props.id,
-      geometry: new _engine.Geometry({
-        topology: 'triangle-fan-webgl',
-        vertexCount: vertexCount
-      })
+      bindings: {
+        weightsTexture: weightsTexture,
+        maxTexture: maxTexture,
+        colorTexture: colorTexture
+      },
+      attributes: data.attributes,
+      bufferLayout: [{
+        name: 'positions',
+        format: 'float32x3'
+      }, {
+        name: 'texCoords',
+        format: 'float32x2'
+      }],
+      topology: 'triangle-fan-webgl',
+      vertexCount: vertexCount
     }));
   };
 
   _proto.draw = function draw(_ref2) {
     var uniforms = _ref2.uniforms;
     var model = this.state.model;
-    var _this$props = this.props,
-        texture = _this$props.texture,
-        maxTexture = _this$props.maxTexture,
-        colorTexture = _this$props.colorTexture,
-        intensity = _this$props.intensity,
-        threshold = _this$props.threshold,
-        aggregationMode = _this$props.aggregationMode,
-        colorDomain = _this$props.colorDomain;
+    var _this$props2 = this.props,
+        intensity = _this$props2.intensity,
+        threshold = _this$props2.threshold,
+        aggregationMode = _this$props2.aggregationMode,
+        colorDomain = _this$props2.colorDomain;
     model.setUniforms(_objectSpread(_objectSpread({}, uniforms), {}, {
-      texture: texture,
-      maxTexture: maxTexture,
-      colorTexture: colorTexture,
       intensity: intensity,
       threshold: threshold,
       aggregationMode: aggregationMode,

package/dist/es5/heatmap-layer/triangle-layer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/heatmap-layer/triangle-layer.ts"],"names":["TriangleLayer","state","getShaders","vs","fs","modules","project32","initializeState","device","attributeManager","getAttributeManager","add","positions","size","noAlloc","texCoords","setState","model","_getModel","vertexCount","props","Model","id","geometry","Geometry","topology","draw","uniforms","texture","maxTexture","colorTexture","intensity","threshold","aggregationMode","colorDomain","setUniforms","context","renderPass","Layer","layerName"],"mappings":";;;;;;;;;;;;;;;;;;;AAqBA;;AACA;;AACA;;AACA;;;;;;;;;;IAaqBA,a;;;;;;;;;;;;;;;UAGnBC,K;;;;;;SAIAC,U,GAAA,sBAAa;AACX,WAAO;AAACC,MAAAA,EAAE,EAAFA,4BAAD;AAAKC,MAAAA,EAAE,EAAFA,8BAAL;AAASC,MAAAA,OAAO,EAAE,CAACC,eAAD;AAAlB,KAAP;AACD,G;;SAEDC,e,GAAA,+BAA8C;AAAA,QAA7BC,MAA6B,QAA7BA,MAA6B;AAC5C,QAAMC,gBAAgB,GAAG,KAAKC,mBAAL,EAAzB;AACAD,IAAAA,gBAAgB,CAACE,GAAjB,CAAqB;AACnBC,MAAAA,SAAS,EAAE;AAACC,QAAAA,IAAI,EAAE,CAAP;AAAUC,QAAAA,OAAO,EAAE;AAAnB,OADQ;AAEnBC,MAAAA,SAAS,EAAE;AAACF,QAAAA,IAAI,EAAE,CAAP;AAAUC,QAAAA,OAAO,EAAE;AAAnB;AAFQ,KAArB;AAIA,SAAKE,QAAL,CAAc;AACZC,MAAAA,KAAK,EAAE,KAAKC,SAAL,CAAeV,MAAf;AADK,KAAd;AAGD,G;;SAEDU,S,GAAA,mBAAUV,MAAV,EAAiC;AAC/B,QAAOW,WAAP,GAAsB,KAAKC,KAA3B,CAAOD,WAAP;AAEA,WAAO,IAAIE,aAAJ,CAAUb,MAAV,kCACF,KAAKN,UAAL,EADE;AAELoB,MAAAA,EAAE,EAAE,KAAKF,KAAL,CAAWE,EAFV;AAGLC,MAAAA,QAAQ,EAAE,IAAIC,gBAAJ,CAAa;AACrBC,QAAAA,QAAQ,EAAE,oBADW;AAErBN,QAAAA,WAAW,EAAXA;AAFqB,OAAb;AAHL,OAAP;AAQD,G;;SAEDO,I,GAAA,qBAAuB;AAAA,QAAjBC,QAAiB,SAAjBA,QAAiB;AACrB,QAAOV,KAAP,GAAgB,KAAKhB,KAArB,CAAOgB,KAAP;AAEA,sBACE,KAAKG,KADP;AAAA,QAAOQ,OAAP,eAAOA,OAAP;AAAA,QAAgBC,UAAhB,eAAgBA,UAAhB;AAAA,QAA4BC,YAA5B,eAA4BA,YAA5B;AAAA,QAA0CC,SAA1C,eAA0CA,SAA1C;AAAA,QAAqDC,SAArD,eAAqDA,SAArD;AAAA,QAAgEC,eAAhE,eAAgEA,eAAhE;AAAA,QAAiFC,WAAjF,eAAiFA,WAAjF;AAGAjB,IAAAA,KAAK,CAACkB,WAAN,iCACKR,QADL;AAEEC,MAAAA,OAAO,EAAPA,OAFF;AAGEC,MAAAA,UAAU,EAAVA,UAHF;AAIEC,MAAAA,YAAY,EAAZA,YAJF;AAKEC,MAAAA,SAAS,EAATA,SALF;AAMEC,MAAAA,SAAS,EAATA,SANF;AAOEC,MAAAA,eAAe,EAAfA,eAPF;AAQEC,MAAAA,WAAW,EAAXA;AARF;AAUAjB,IAAAA,KAAK,CAACS,IAAN,CAAW,KAAKU,OAAL,CAAaC,UAAxB;AACD,G;;;EApDwCC,W;;;AAAtBtC,a,CACZuC,S,GAAY,e","sourcesContent":["// Copyright (c) 2015 - 2019 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n\nimport type {Device, Texture} from '@luma.gl/core';\nimport {Model, Geometry} from '@luma.gl/engine';\nimport {Layer, LayerContext, project32} from '@deck.gl/core';\nimport vs from './triangle-layer-vertex.glsl';\nimport fs from './triangle-layer-fragment.glsl';\n\ntype _TriangleLayerProps = {\n  colorDomain: number[];\n  aggregationMode: string;\n  threshold: number;\n  intensity: number;\n  vertexCount: number;\n  colorTexture: Texture;\n  maxTexture: Texture;\n  texture: Texture;\n};\n\nexport default class TriangleLayer extends Layer<_TriangleLayerProps> {\n  static layerName = 'TriangleLayer';\n\n  state!: {\n    model: Model;\n  };\n\n  getShaders() {\n    return {vs, fs, modules: [project32]};\n  }\n\n  initializeState({device}: LayerContext): void {\n    const attributeManager = this.getAttributeManager()!;\n    attributeManager.add({\n      positions: {size: 3, noAlloc: true},\n      texCoords: {size: 2, noAlloc: true}\n    });\n    this.setState({\n      model: this._getModel(device)\n    });\n  }\n\n  _getModel(device: Device): Model {\n    const {vertexCount} = this.props;\n\n    return new Model(device, {\n      ...this.getShaders(),\n      id: this.props.id,\n      geometry: new Geometry({\n        topology: 'triangle-fan-webgl',\n        vertexCount\n      })\n    });\n  }\n\n  draw({uniforms}): void {\n    const {model} = this.state;\n\n    const {texture, maxTexture, colorTexture, intensity, threshold, aggregationMode, colorDomain} =\n      this.props;\n\n    model.setUniforms({\n      ...uniforms,\n      texture,\n      maxTexture,\n      colorTexture,\n      intensity,\n      threshold,\n      aggregationMode,\n      colorDomain\n    });\n    model.draw(this.context.renderPass);\n  }\n}\n"],"file":"triangle-layer.js"}
+{"version":3,"sources":["../../../src/heatmap-layer/triangle-layer.ts"],"names":["TriangleLayer","state","getShaders","vs","fs","modules","project32","initializeState","device","setState","model","_getModel","props","vertexCount","data","weightsTexture","maxTexture","colorTexture","Model","id","bindings","attributes","bufferLayout","name","format","topology","draw","uniforms","intensity","threshold","aggregationMode","colorDomain","setUniforms","context","renderPass","Layer","layerName"],"mappings":";;;;;;;;;;;;;;;;;;;AAqBA;;AACA;;AACA;;AACA;;;;;;;;;;IAcqBA,a;;;;;;;;;;;;;;;UAGnBC,K;;;;;;SAMAC,U,GAAA,sBAAa;AACX,WAAO;AAACC,MAAAA,EAAE,EAAFA,4BAAD;AAAKC,MAAAA,EAAE,EAAFA,8BAAL;AAASC,MAAAA,OAAO,EAAE,CAACC,eAAD;AAAlB,KAAP;AACD,G;;SAEDC,e,GAAA,+BAA8C;AAAA,QAA7BC,MAA6B,QAA7BA,MAA6B;AAC5C,SAAKC,QAAL,CAAc;AAACC,MAAAA,KAAK,EAAE,KAAKC,SAAL,CAAeH,MAAf;AAAR,KAAd;AACD,G;;SAEDG,S,GAAA,mBAAUH,MAAV,EAAiC;AAC/B,sBAAsE,KAAKI,KAA3E;AAAA,QAAOC,WAAP,eAAOA,WAAP;AAAA,QAAoBC,IAApB,eAAoBA,IAApB;AAAA,QAA0BC,cAA1B,eAA0BA,cAA1B;AAAA,QAA0CC,UAA1C,eAA0CA,UAA1C;AAAA,QAAsDC,YAAtD,eAAsDA,YAAtD;AAEA,WAAO,IAAIC,aAAJ,CAAUV,MAAV,kCACF,KAAKN,UAAL,EADE;AAELiB,MAAAA,EAAE,EAAE,KAAKP,KAAL,CAAWO,EAFV;AAGLC,MAAAA,QAAQ,EAAE;AAACL,QAAAA,cAAc,EAAdA,cAAD;AAAiBC,QAAAA,UAAU,EAAVA,UAAjB;AAA6BC,QAAAA,YAAY,EAAZA;AAA7B,OAHL;AAILI,MAAAA,UAAU,EAAEP,IAAI,CAACO,UAJZ;AAKLC,MAAAA,YAAY,EAAE,CACZ;AAACC,QAAAA,IAAI,EAAE,WAAP;AAAoBC,QAAAA,MAAM,EAAE;AAA5B,OADY,EAEZ;AAACD,QAAAA,IAAI,EAAE,WAAP;AAAoBC,QAAAA,MAAM,EAAE;AAA5B,OAFY,CALT;AASLC,MAAAA,QAAQ,EAAE,oBATL;AAULZ,MAAAA,WAAW,EAAXA;AAVK,OAAP;AAYD,G;;SAEDa,I,GAAA,qBAAuB;AAAA,QAAjBC,QAAiB,SAAjBA,QAAiB;AACrB,QAAOjB,KAAP,GAAgB,KAAKT,KAArB,CAAOS,KAAP;AACA,uBAA6D,KAAKE,KAAlE;AAAA,QAAOgB,SAAP,gBAAOA,SAAP;AAAA,QAAkBC,SAAlB,gBAAkBA,SAAlB;AAAA,QAA6BC,eAA7B,gBAA6BA,eAA7B;AAAA,QAA8CC,WAA9C,gBAA8CA,WAA9C;AACArB,IAAAA,KAAK,CAACsB,WAAN,iCACKL,QADL;AAEEC,MAAAA,SAAS,EAATA,SAFF;AAGEC,MAAAA,SAAS,EAATA,SAHF;AAIEC,MAAAA,eAAe,EAAfA,eAJF;AAKEC,MAAAA,WAAW,EAAXA;AALF;AAOArB,IAAAA,KAAK,CAACgB,IAAN,CAAW,KAAKO,OAAL,CAAaC,UAAxB;AACD,G;;;EA7CwCC,W;;;AAAtBnC,a,CACZoC,S,GAAY,e","sourcesContent":["// Copyright (c) 2015 - 2019 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n\nimport type {Buffer, Device, Texture} from '@luma.gl/core';\nimport {Model} from '@luma.gl/engine';\nimport {Layer, LayerContext, project32} from '@deck.gl/core';\nimport vs from './triangle-layer-vertex.glsl';\nimport fs from './triangle-layer-fragment.glsl';\n\ntype _TriangleLayerProps = {\n  data: {attributes: {positions: Buffer; texCoords: Buffer}};\n  colorDomain: number[];\n  aggregationMode: string;\n  threshold: number;\n  intensity: number;\n  vertexCount: number;\n  colorTexture: Texture;\n  maxTexture: Texture;\n  weightsTexture: Texture;\n};\n\nexport default class TriangleLayer extends Layer<_TriangleLayerProps> {\n  static layerName = 'TriangleLayer';\n\n  state!: {\n    model: Model;\n    positions: Buffer;\n    texCoords: Buffer;\n  };\n\n  getShaders() {\n    return {vs, fs, modules: [project32]};\n  }\n\n  initializeState({device}: LayerContext): void {\n    this.setState({model: this._getModel(device)});\n  }\n\n  _getModel(device: Device): Model {\n    const {vertexCount, data, weightsTexture, maxTexture, colorTexture} = this.props;\n\n    return new Model(device, {\n      ...this.getShaders(),\n      id: this.props.id,\n      bindings: {weightsTexture, maxTexture, colorTexture},\n      attributes: data.attributes,\n      bufferLayout: [\n        {name: 'positions', format: 'float32x3'},\n        {name: 'texCoords', format: 'float32x2'}\n      ],\n      topology: 'triangle-fan-webgl',\n      vertexCount\n    });\n  }\n\n  draw({uniforms}): void {\n    const {model} = this.state;\n    const {intensity, threshold, aggregationMode, colorDomain} = this.props;\n    model.setUniforms({\n      ...uniforms,\n      intensity,\n      threshold,\n      aggregationMode,\n      colorDomain\n    });\n    model.draw(this.context.renderPass);\n  }\n}\n"],"file":"triangle-layer.js"}

package/dist/es5/heatmap-layer/weights-vs.glsl.js

@@ -4,6 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _default = "#version 300 es\nin vec3 positions;\nin vec3 positions64Low;\nin float weights;\nout vec4 weightsTexture;\nuniform float radiusPixels;\nuniform float textureWidth;\nuniform vec4 commonBounds;\nuniform float weightsScale;\nvoid main()\n{\n  weightsTexture = vec4(weights * weightsScale, 0., 0., 1.);\n\n  float radiusTexels  = project_pixel_size(radiusPixels) * textureWidth / (commonBounds.z - commonBounds.x);\n  gl_PointSize = radiusTexels * 2.;\n\n  vec3 commonPosition = project_position(positions, positions64Low);\n  gl_Position.xy = (commonPosition.xy - commonBounds.xy) / (commonBounds.zw - commonBounds.xy) ;\n  gl_Position.xy = (gl_Position.xy * 2.) - (1.);\n}\n";
+var _default = "#version 300 es\nin vec3 positions;\nin vec3 positions64Low;\nin float weights;\nout vec4 weightsTexture;\nuniform float radiusPixels;\nuniform float textureWidth;\nuniform vec4 commonBounds;\nuniform float weightsScale;\n\nvoid main()\n{\n  weightsTexture = vec4(weights * weightsScale, 0., 0., 1.);\n\n  float radiusTexels = project_pixel_size(radiusPixels) * textureWidth / (commonBounds.z - commonBounds.x);\n  gl_PointSize = radiusTexels * 2.;\n\n  vec3 commonPosition = project_position(positions, positions64Low);\n  gl_Position.xy = (commonPosition.xy - commonBounds.xy) / (commonBounds.zw - commonBounds.xy) ;\n  gl_Position.xy = (gl_Position.xy * 2.) - (1.);\n  gl_Position.w = 1.0;\n}\n";
 exports.default = _default;
 //# sourceMappingURL=weights-vs.glsl.js.map

package/dist/esm/heatmap-layer/heatmap-layer-utils.js

@@ -1,4 +1,3 @@
-import { GL } from '@luma.gl/constants';
 export function getBounds(points) {
   const x = points.map(p => p[0]);
   const y = points.map(p => p[1]);
@@ -53,16 +52,4 @@ export function getTextureCoordinates(point, bounds) {
   const [xMin, yMin, xMax, yMax] = bounds;
   return [(point[0] - xMin) / (xMax - xMin), (point[1] - yMin) / (yMax - yMin)];
 }
-export function getTextureParams({
-  device,
-  floatTargetSupport
-}) {
-  return floatTargetSupport ? {
-    format: device.info.type === 'webgl2' ? 34836 : 6408,
-    type: 5126
-  } : {
-    format: 6408,
-    type: 5121
-  };
-}
 //# sourceMappingURL=heatmap-layer-utils.js.map

package/dist/esm/heatmap-layer/heatmap-layer-utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/heatmap-layer/heatmap-layer-utils.ts"],"names":["GL","getBounds","points","x","map","p","y","xMin","Math","min","apply","xMax","max","yMin","yMax","boundsContain","currentBounds","targetBounds","scratchArray","Float32Array","packVertices","dimensions","index","point","i","scaleToAspectRatio","boundingBox","width","height","currentWidth","currentHeight","newWidth","newHeight","xCenter","yCenter","getTextureCoordinates","bounds","getTextureParams","device","floatTargetSupport","format","info","type"],"mappings":"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","sourcesContent":["import {Device} from '@luma.gl/core';\nimport {GL} from '@luma.gl/constants';\n\nexport function getBounds(points: number[][]): number[] {\n  // Now build bounding box in world space (aligned to world coordiante system)\n  const x = points.map(p => p[0]);\n  const y = points.map(p => p[1]);\n\n  const xMin = Math.min.apply(null, x);\n  const xMax = Math.max.apply(null, x);\n  const yMin = Math.min.apply(null, y);\n  const yMax = Math.max.apply(null, y);\n\n  return [xMin, yMin, xMax, yMax];\n}\n\n// true if currentBounds contains targetBounds, false otherwise\nexport function boundsContain(currentBounds: number[], targetBounds: number[]): boolean {\n  if (\n    targetBounds[0] >= currentBounds[0] &&\n    targetBounds[2] <= currentBounds[2] &&\n    targetBounds[1] >= currentBounds[1] &&\n    targetBounds[3] <= currentBounds[3]\n  ) {\n    return true;\n  }\n  return false;\n}\n\nconst scratchArray = new Float32Array(12);\n\n// For given rectangle bounds generates two triangles vertices that coverit completely\nexport function packVertices(points: number[][], dimensions: number = 2): Float32Array {\n  let index = 0;\n  for (const point of points) {\n    for (let i = 0; i < dimensions; i++) {\n      scratchArray[index++] = point[i] || 0;\n    }\n  }\n  return scratchArray;\n}\n\n// Expands boundingBox:[xMin, yMin, xMax, yMax] to match aspect ratio of given width and height\nexport function scaleToAspectRatio(boundingBox: number[], width: number, height: number): number[] {\n  const [xMin, yMin, xMax, yMax] = boundingBox;\n\n  const currentWidth = xMax - xMin;\n  const currentHeight = yMax - yMin;\n\n  let newWidth = currentWidth;\n  let newHeight = currentHeight;\n  if (currentWidth / currentHeight < width / height) {\n    // expand bounding box width\n    newWidth = (width / height) * currentHeight;\n  } else {\n    newHeight = (height / width) * currentWidth;\n  }\n\n  if (newWidth < width) {\n    newWidth = width;\n    newHeight = height;\n  }\n\n  const xCenter = (xMax + xMin) / 2;\n  const yCenter = (yMax + yMin) / 2;\n\n  return [\n    xCenter - newWidth / 2,\n    yCenter - newHeight / 2,\n    xCenter + newWidth / 2,\n    yCenter + newHeight / 2\n  ];\n}\n\n// Get texture coordiante of point inside a bounding box\nexport function getTextureCoordinates(point: number[], bounds: number[]) {\n  const [xMin, yMin, xMax, yMax] = bounds;\n  return [(point[0] - xMin) / (xMax - xMin), (point[1] - yMin) / (yMax - yMin)];\n}\n\n// Returns format and type for creating texture objects\nexport function getTextureParams({\n  device,\n  floatTargetSupport\n}: {\n  device: Device;\n  floatTargetSupport?: boolean;\n}) {\n  return floatTargetSupport\n    ? {\n        // format:  should be RGBA32F on WebGL2 (float textures), RGBA in WebGL1 for float or non float textures\n        format: device.info.type === 'webgl2' ? GL.RGBA32F : GL.RGBA,\n        type: GL.FLOAT\n      }\n    : {\n        format: GL.RGBA,\n        type: GL.UNSIGNED_BYTE\n      };\n}\n"],"file":"heatmap-layer-utils.js"}
+{"version":3,"sources":["../../../src/heatmap-layer/heatmap-layer-utils.ts"],"names":["getBounds","points","x","map","p","y","xMin","Math","min","apply","xMax","max","yMin","yMax","boundsContain","currentBounds","targetBounds","scratchArray","Float32Array","packVertices","dimensions","index","point","i","scaleToAspectRatio","boundingBox","width","height","currentWidth","currentHeight","newWidth","newHeight","xCenter","yCenter","getTextureCoordinates","bounds"],"mappings":"AAAA,OAAO,SAASA,SAAT,CAAmBC,MAAnB,EAAiD;AAEtD,QAAMC,CAAC,GAAGD,MAAM,CAACE,GAAP,CAAWC,CAAC,IAAIA,CAAC,CAAC,CAAD,CAAjB,CAAV;AACA,QAAMC,CAAC,GAAGJ,MAAM,CAACE,GAAP,CAAWC,CAAC,IAAIA,CAAC,CAAC,CAAD,CAAjB,CAAV;AAEA,QAAME,IAAI,GAAGC,IAAI,CAACC,GAAL,CAASC,KAAT,CAAe,IAAf,EAAqBP,CAArB,CAAb;AACA,QAAMQ,IAAI,GAAGH,IAAI,CAACI,GAAL,CAASF,KAAT,CAAe,IAAf,EAAqBP,CAArB,CAAb;AACA,QAAMU,IAAI,GAAGL,IAAI,CAACC,GAAL,CAASC,KAAT,CAAe,IAAf,EAAqBJ,CAArB,CAAb;AACA,QAAMQ,IAAI,GAAGN,IAAI,CAACI,GAAL,CAASF,KAAT,CAAe,IAAf,EAAqBJ,CAArB,CAAb;AAEA,SAAO,CAACC,IAAD,EAAOM,IAAP,EAAaF,IAAb,EAAmBG,IAAnB,CAAP;AACD;AAGD,OAAO,SAASC,aAAT,CAAuBC,aAAvB,EAAgDC,YAAhD,EAAiF;AACtF,MACEA,YAAY,CAAC,CAAD,CAAZ,IAAmBD,aAAa,CAAC,CAAD,CAAhC,IACAC,YAAY,CAAC,CAAD,CAAZ,IAAmBD,aAAa,CAAC,CAAD,CADhC,IAEAC,YAAY,CAAC,CAAD,CAAZ,IAAmBD,aAAa,CAAC,CAAD,CAFhC,IAGAC,YAAY,CAAC,CAAD,CAAZ,IAAmBD,aAAa,CAAC,CAAD,CAJlC,EAKE;AACA,WAAO,IAAP;AACD;;AACD,SAAO,KAAP;AACD;AAED,MAAME,YAAY,GAAG,IAAIC,YAAJ,CAAiB,EAAjB,CAArB;AAGA,OAAO,SAASC,YAAT,CAAsBlB,MAAtB,EAA0CmB,UAAkB,GAAG,CAA/D,EAAgF;AACrF,MAAIC,KAAK,GAAG,CAAZ;;AACA,OAAK,MAAMC,KAAX,IAAoBrB,MAApB,EAA4B;AAC1B,SAAK,IAAIsB,CAAC,GAAG,CAAb,EAAgBA,CAAC,GAAGH,UAApB,EAAgCG,CAAC,EAAjC,EAAqC;AACnCN,MAAAA,YAAY,CAACI,KAAK,EAAN,CAAZ,GAAwBC,KAAK,CAACC,CAAD,CAAL,IAAY,CAApC;AACD;AACF;;AACD,SAAON,YAAP;AACD;AAGD,OAAO,SAASO,kBAAT,CAA4BC,WAA5B,EAAmDC,KAAnD,EAAkEC,MAAlE,EAA4F;AACjG,QAAM,CAACrB,IAAD,EAAOM,IAAP,EAAaF,IAAb,EAAmBG,IAAnB,IAA2BY,WAAjC;AAEA,QAAMG,YAAY,GAAGlB,IAAI,GAAGJ,IAA5B;AACA,QAAMuB,aAAa,GAAGhB,IAAI,GAAGD,IAA7B;AAEA,MAAIkB,QAAQ,GAAGF,YAAf;AACA,MAAIG,SAAS,GAAGF,aAAhB;;AACA,MAAID,YAAY,GAAGC,aAAf,GAA+BH,KAAK,GAAGC,MAA3C,EAAmD;AAEjDG,IAAAA,QAAQ,GAAIJ,KAAK,GAAGC,MAAT,GAAmBE,aAA9B;AACD,GAHD,MAGO;AACLE,IAAAA,SAAS,GAAIJ,MAAM,GAAGD,KAAV,GAAmBE,YAA/B;AACD;;AAED,MAAIE,QAAQ,GAAGJ,KAAf,EAAsB;AACpBI,IAAAA,QAAQ,GAAGJ,KAAX;AACAK,IAAAA,SAAS,GAAGJ,MAAZ;AACD;;AAED,QAAMK,OAAO,GAAG,CAACtB,IAAI,GAAGJ,IAAR,IAAgB,CAAhC;AACA,QAAM2B,OAAO,GAAG,CAACpB,IAAI,GAAGD,IAAR,IAAgB,CAAhC;AAEA,SAAO,CACLoB,OAAO,GAAGF,QAAQ,GAAG,CADhB,EAELG,OAAO,GAAGF,SAAS,GAAG,CAFjB,EAGLC,OAAO,GAAGF,QAAQ,GAAG,CAHhB,EAILG,OAAO,GAAGF,SAAS,GAAG,CAJjB,CAAP;AAMD;AAGD,OAAO,SAASG,qBAAT,CAA+BZ,KAA/B,EAAgDa,MAAhD,EAAkE;AACvE,QAAM,CAAC7B,IAAD,EAAOM,IAAP,EAAaF,IAAb,EAAmBG,IAAnB,IAA2BsB,MAAjC;AACA,SAAO,CAAC,CAACb,KAAK,CAAC,CAAD,CAAL,GAAWhB,IAAZ,KAAqBI,IAAI,GAAGJ,IAA5B,CAAD,EAAoC,CAACgB,KAAK,CAAC,CAAD,CAAL,GAAWV,IAAZ,KAAqBC,IAAI,GAAGD,IAA5B,CAApC,CAAP;AACD","sourcesContent":["export function getBounds(points: number[][]): number[] {\n  // Now build bounding box in world space (aligned to world coordiante system)\n  const x = points.map(p => p[0]);\n  const y = points.map(p => p[1]);\n\n  const xMin = Math.min.apply(null, x);\n  const xMax = Math.max.apply(null, x);\n  const yMin = Math.min.apply(null, y);\n  const yMax = Math.max.apply(null, y);\n\n  return [xMin, yMin, xMax, yMax];\n}\n\n// true if currentBounds contains targetBounds, false otherwise\nexport function boundsContain(currentBounds: number[], targetBounds: number[]): boolean {\n  if (\n    targetBounds[0] >= currentBounds[0] &&\n    targetBounds[2] <= currentBounds[2] &&\n    targetBounds[1] >= currentBounds[1] &&\n    targetBounds[3] <= currentBounds[3]\n  ) {\n    return true;\n  }\n  return false;\n}\n\nconst scratchArray = new Float32Array(12);\n\n// For given rectangle bounds generates two triangles vertices that coverit completely\nexport function packVertices(points: number[][], dimensions: number = 2): Float32Array {\n  let index = 0;\n  for (const point of points) {\n    for (let i = 0; i < dimensions; i++) {\n      scratchArray[index++] = point[i] || 0;\n    }\n  }\n  return scratchArray;\n}\n\n// Expands boundingBox:[xMin, yMin, xMax, yMax] to match aspect ratio of given width and height\nexport function scaleToAspectRatio(boundingBox: number[], width: number, height: number): number[] {\n  const [xMin, yMin, xMax, yMax] = boundingBox;\n\n  const currentWidth = xMax - xMin;\n  const currentHeight = yMax - yMin;\n\n  let newWidth = currentWidth;\n  let newHeight = currentHeight;\n  if (currentWidth / currentHeight < width / height) {\n    // expand bounding box width\n    newWidth = (width / height) * currentHeight;\n  } else {\n    newHeight = (height / width) * currentWidth;\n  }\n\n  if (newWidth < width) {\n    newWidth = width;\n    newHeight = height;\n  }\n\n  const xCenter = (xMax + xMin) / 2;\n  const yCenter = (yMax + yMin) / 2;\n\n  return [\n    xCenter - newWidth / 2,\n    yCenter - newHeight / 2,\n    xCenter + newWidth / 2,\n    yCenter + newHeight / 2\n  ];\n}\n\n// Get texture coordiante of point inside a bounding box\nexport function getTextureCoordinates(point: number[], bounds: number[]) {\n  const [xMin, yMin, xMax, yMax] = bounds;\n  return [(point[0] - xMin) / (xMax - xMin), (point[1] - yMin) / (yMax - yMin)];\n}\n"],"file":"heatmap-layer-utils.js"}

package/dist/esm/heatmap-layer/heatmap-layer.js

@@ -1,22 +1,21 @@
-import { getBounds, boundsContain, packVertices, scaleToAspectRatio, getTextureCoordinates, getTextureParams } from './heatmap-layer-utils';
+import { getBounds, boundsContain, packVertices, scaleToAspectRatio, getTextureCoordinates } from './heatmap-layer-utils';
 import { GL } from '@luma.gl/constants';
 import { TextureTransform } from '@luma.gl/engine';
-import { withGLParameters } from '@luma.gl/webgl';
 import { AttributeManager, COORDINATE_SYSTEM, log } from '@deck.gl/core';
 import TriangleLayer from './triangle-layer';
 import AggregationLayer from '../aggregation-layer';
 import { defaultColorRange, colorRangeToFlatArray } from '../utils/color-utils';
 import weightsVs from './weights-vs.glsl';
 import weightsFs from './weights-fs.glsl';
-import vsMax from './max-vs.glsl';
-import fsMax from './max-fs.glsl';
+import maxVs from './max-vs.glsl';
+import maxFs from './max-fs.glsl';
 const RESOLUTION = 2;
 const TEXTURE_PROPS = {
   format: 'rgba8unorm',
   mipmaps: false,
   sampler: {
-    minFilter: 'nearest',
-    magFilter: 'nearest',
+    minFilter: 'linear',
+    magFilter: 'linear',
     addressModeU: 'clamp-to-edge',
     addressModeV: 'clamp-to-edge'
   }
@@ -194,7 +193,7 @@ export default class HeatmapLayer extends AggregationLayer {
       maxTexture: maxWeightsTexture,
       colorTexture,
       aggregationMode: AGGREGATION_MODE[aggregation] || 0,
-      texture: weightsTexture,
+      weightsTexture,
       intensity,
       threshold,
       colorDomain
@@ -257,21 +256,18 @@ export default class HeatmapLayer extends AggregationLayer {
   _createTextures() {
     const {
       textureSize,
-      format,
-      type
+      format
     } = this.state;
     this.setState({
-      weightsTexture: this.context.device.createTexture({
+      weightsTexture: this.context.device.createTexture({ ...TEXTURE_PROPS,
         width: textureSize,
         height: textureSize,
-        format,
-        type,
-        ...TEXTURE_PROPS
+        format
       }),
-      maxWeightsTexture: this.context.device.createTexture({
-        format,
-        type,
-        ...TEXTURE_PROPS
+      maxWeightsTexture: this.context.device.createTexture({ ...TEXTURE_PROPS,
+        width: 1,
+        height: 1,
+        format
       })
     });
   }
@@ -303,48 +299,44 @@ export default class HeatmapLayer extends AggregationLayer {
     } = this.props;
     const textureSize = Math.min(weightsTextureSize, device.limits.maxTextureDimension2D);
     const floatTargetSupport = FLOAT_TARGET_FEATURES.every(feature => device.features.has(feature));
-    const {
-      format,
-      type
-    } = getTextureParams({
-      device,
-      floatTargetSupport
-    });
+    const format = floatTargetSupport ? 'rgba32float' : 'rgba8unorm';
     const weightsScale = floatTargetSupport ? 1 : 1 / 255;
     this.setState({
       textureSize,
       format,
-      type,
       weightsScale
     });
 
     if (!floatTargetSupport) {
-      log.warn(`HeatmapLayer: ${this.id} rendering to float texture not supported, fallingback to low precession format`)();
+      log.warn(`HeatmapLayer: ${this.id} rendering to float texture not supported, falling back to low precision format`)();
     }
   }
 
-  getShaders(type) {
-    return super.getShaders(type === 'max-weights-transform' ? {
-      vs: vsMax,
-      _fs: fsMax
-    } : {
-      vs: weightsVs,
-      _fs: weightsFs
-    });
-  }
-
-  _createWeightsTransform(shaders = {}) {
+  _createWeightsTransform(shaders) {
     var _weightsTransform;
 
     let {
       weightsTransform
     } = this.state;
-    (_weightsTransform = weightsTransform) === null || _weightsTransform === void 0 ? void 0 : _weightsTransform.delete();
+    const {
+      weightsTexture
+    } = this.state;
+    const attributeManager = this.getAttributeManager();
+    (_weightsTransform = weightsTransform) === null || _weightsTransform === void 0 ? void 0 : _weightsTransform.destroy();
     weightsTransform = new TextureTransform(this.context.device, {
       id: `${this.id}-weights-transform`,
+      bufferLayout: attributeManager.getBufferLayouts(),
       vertexCount: 1,
-      targetTexture: this.state.weightsTexture,
-      targetTextureVarying: 'weightsTexture',
+      targetTexture: weightsTexture,
+      parameters: {
+        depthWriteEnabled: false,
+        blendColorOperation: 'add',
+        blendColorSrcFactor: 'one',
+        blendColorDstFactor: 'one',
+        blendAlphaSrcFactor: 'one',
+        blendAlphaDstFactor: 'one'
+      },
+      topology: 'point-list',
       ...shaders
     });
     this.setState({
@@ -355,61 +347,79 @@ export default class HeatmapLayer extends AggregationLayer {
   _setupResources() {
     this._createTextures();
 
+    const {
+      device
+    } = this.context;
     const {
       textureSize,
       weightsTexture,
       maxWeightsTexture
     } = this.state;
-    const weightsTransformShaders = this.getShaders('weights-transform');
+    const weightsTransformShaders = this.getShaders({
+      vs: weightsVs,
+      fs: weightsFs
+    });
 
     this._createWeightsTransform(weightsTransformShaders);
 
-    const maxWeightsTransformShaders = this.getShaders('max-weights-transform');
-    const maxWeightTransform = new TextureTransform(this.context.device, {
+    const maxWeightsTransformShaders = this.getShaders({
+      vs: maxVs,
+      fs: maxFs
+    });
+    const maxWeightTransform = new TextureTransform(device, {
       id: `${this.id}-max-weights-transform`,
-      _sourceTextures: {
+      bindings: {
         inTexture: weightsTexture
       },
-      _targetTexture: maxWeightsTexture,
-      _targetTextureVarying: 'outTexture',
+      uniforms: {
+        textureSize
+      },
+      targetTexture: maxWeightsTexture,
       ...maxWeightsTransformShaders,
-      elementCount: textureSize * textureSize
+      vertexCount: textureSize * textureSize,
+      topology: 'point-list',
+      parameters: {
+        depthWriteEnabled: false,
+        blendColorOperation: 'max',
+        blendAlphaOperation: 'max',
+        blendColorSrcFactor: 'one',
+        blendColorDstFactor: 'one',
+        blendAlphaSrcFactor: 'one',
+        blendAlphaDstFactor: 'one'
+      }
     });
     this.setState({
       weightsTexture,
       maxWeightsTexture,
       maxWeightTransform,
       zoom: null,
-      triPositionBuffer: this.context.device.createBuffer({
-        byteLength: 48,
-        accessor: {
-          size: 3
-        }
+      triPositionBuffer: device.createBuffer({
+        byteLength: 48
       }),
-      triTexCoordBuffer: this.context.device.createBuffer({
-        byteLength: 48,
-        accessor: {
-          size: 2
-        }
+      triTexCoordBuffer: device.createBuffer({
+        byteLength: 48
       })
     });
   }
 
   updateShaders(shaderOptions) {
-    this._createWeightsTransform(shaderOptions);
+    this._createWeightsTransform({
+      vs: weightsVs,
+      fs: weightsFs,
+      ...shaderOptions
+    });
   }
 
   _updateMaxWeightValue() {
     const {
-      maxWeightTransform
+      maxWeightTransform,
+      textureSize
     } = this.state;
     maxWeightTransform.run({
       parameters: {
-        blend: true,
-        depthTest: false,
-        blendFunc: [1, 1],
-        blendEquation: 32776
-      }
+        viewport: [0, 0, 1, 1]
+      },
+      clearColor: [0, 0, 0, 0]
     });
   }
 
@@ -464,6 +474,8 @@ export default class HeatmapLayer extends AggregationLayer {
   }
 
   _updateColorTexture(opts) {
+    var _colorTexture;
+
     const {
       colorRange
     } = opts.props;
@@ -472,17 +484,18 @@ export default class HeatmapLayer extends AggregationLayer {
     } = this.state;
     const colors = colorRangeToFlatArray(colorRange, false, Uint8Array);
 
-    if (colorTexture) {
-      colorTexture.setImageData({
-        data: colors,
-        width: colorRange.length
+    if (colorTexture && ((_colorTexture = colorTexture) === null || _colorTexture === void 0 ? void 0 : _colorTexture.width) === colorRange.length) {
+      colorTexture.setSubImageData({
+        data: colors
       });
     } else {
-      colorTexture = this.context.device.createTexture({
+      var _colorTexture2;
+
+      (_colorTexture2 = colorTexture) === null || _colorTexture2 === void 0 ? void 0 : _colorTexture2.destroy();
+      colorTexture = this.context.device.createTexture({ ...TEXTURE_PROPS,
         data: colors,
         width: colorRange.length,
-        height: 1,
-        ...TEXTURE_PROPS
+        height: 1
       });
     }
 
@@ -519,30 +532,29 @@ export default class HeatmapLayer extends AggregationLayer {
       this.state.colorDomain = colorDomain || DEFAULT_COLOR_DOMAIN;
     }
 
+    const attributeManager = this.getAttributeManager();
+    const attributes = attributeManager.getAttributes();
+    const moduleSettings = this.getModuleSettings();
+    const positions = attributes.positions.buffer;
     const uniforms = {
       radiusPixels,
       commonBounds,
       textureWidth: textureSize,
       weightsScale
     };
-    weightsTransform.update({
-      elementCount: this.getNumInstances()
+    const weights = attributes.weights.buffer;
+    weightsTransform.model.setAttributes({
+      positions,
+      weights
     });
-    withGLParameters(this.context.gl, {
+    weightsTransform.model.setVertexCount(this.getNumInstances());
+    weightsTransform.model.setUniforms(uniforms);
+    weightsTransform.model.updateModuleSettings(moduleSettings);
+    weightsTransform.run({
+      parameters: {
+        viewport: [0, 0, textureSize, textureSize]
+      },
       clearColor: [0, 0, 0, 0]
-    }, () => {
-      weightsTransform.run({
-        uniforms,
-        parameters: {
-          blend: true,
-          depthTest: false,
-          blendFunc: [1, 1],
-          blendEquation: 32774
-        },
-        clearRenderTarget: true,
-        attributes: this.getAttributes(),
-        moduleSettings: this.getModuleSettings()
-      });
     });
 
     this._updateMaxWeightValue();