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

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

@@ -0,0 +1,471 @@
+// Copyright (c) 2015 - 2019 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+/* global setTimeout clearTimeout */
+import { getBounds, boundsContain, packVertices, scaleToAspectRatio, getTextureCoordinates } from "./heatmap-layer-utils.js";
+import { GL } from '@luma.gl/constants';
+import { TextureTransform } from '@luma.gl/engine';
+import { AttributeManager, COORDINATE_SYSTEM, log } from '@deck.gl/core';
+import TriangleLayer from "./triangle-layer.js";
+import AggregationLayer from "../aggregation-layer.js";
+import { defaultColorRange, colorRangeToFlatArray } from "../utils/color-utils.js";
+import weightsVs from "./weights-vs.glsl.js";
+import weightsFs from "./weights-fs.glsl.js";
+import maxVs from "./max-vs.glsl.js";
+import maxFs from "./max-fs.glsl.js";
+const RESOLUTION = 2; // (number of common space pixels) / (number texels)
+const TEXTURE_PROPS = {
+    format: 'rgba8unorm',
+    mipmaps: false,
+    sampler: {
+        minFilter: 'linear',
+        magFilter: 'linear',
+        addressModeU: 'clamp-to-edge',
+        addressModeV: 'clamp-to-edge'
+    }
+};
+const DEFAULT_COLOR_DOMAIN = [0, 0];
+const AGGREGATION_MODE = {
+    SUM: 0,
+    MEAN: 1
+};
+const defaultProps = {
+    getPosition: { type: 'accessor', value: (x) => x.position },
+    getWeight: { type: 'accessor', value: 1 },
+    intensity: { type: 'number', min: 0, value: 1 },
+    radiusPixels: { type: 'number', min: 1, max: 100, value: 50 },
+    colorRange: defaultColorRange,
+    threshold: { type: 'number', min: 0, max: 1, value: 0.05 },
+    colorDomain: { type: 'array', value: null, optional: true },
+    // 'SUM' or 'MEAN'
+    aggregation: 'SUM',
+    weightsTextureSize: { type: 'number', min: 128, max: 2048, value: 2048 },
+    debounceTimeout: { type: 'number', min: 0, max: 1000, value: 500 }
+};
+const REQUIRED_FEATURES = [
+    'blend-minmax-webgl1', // max weight calculation
+    'texture-formats-float32-webgl1' // weight-map as texture
+];
+const FLOAT_TARGET_FEATURES = [
+    'texture-renderable-float32-webgl', // ability to render to float texture
+    'texture-blend-float-webgl1' // ability to blend when rendering to float texture
+];
+const DIMENSIONS = {
+    data: {
+        props: ['radiusPixels']
+    }
+};
+/** Visualizes the spatial distribution of data. */
+export default class HeatmapLayer extends AggregationLayer {
+    static { this.layerName = 'HeatmapLayer'; }
+    static { this.defaultProps = defaultProps; }
+    initializeState() {
+        if (!REQUIRED_FEATURES.every(feature => this.context.device.features.has(feature))) {
+            this.setState({ supported: false });
+            log.error(`HeatmapLayer: ${this.id} is not supported on this browser`)();
+            return;
+        }
+        super.initializeAggregationLayer(DIMENSIONS);
+        this.setState({ supported: true, colorDomain: DEFAULT_COLOR_DOMAIN });
+        this._setupTextureParams();
+        this._setupAttributes();
+        this._setupResources();
+    }
+    shouldUpdateState({ changeFlags }) {
+        // Need to be updated when viewport changes
+        return changeFlags.somethingChanged;
+    }
+    /* eslint-disable max-statements,complexity */
+    updateState(opts) {
+        if (!this.state.supported) {
+            return;
+        }
+        super.updateState(opts);
+        this._updateHeatmapState(opts);
+    }
+    _updateHeatmapState(opts) {
+        const { props, oldProps } = opts;
+        const changeFlags = this._getChangeFlags(opts);
+        if (changeFlags.dataChanged || changeFlags.viewportChanged) {
+            // if data is changed, do not debounce and immediately update the weight map
+            changeFlags.boundsChanged = this._updateBounds(changeFlags.dataChanged);
+            this._updateTextureRenderingBounds();
+        }
+        if (changeFlags.dataChanged || changeFlags.boundsChanged) {
+            // Update weight map immediately
+            clearTimeout(this.state.updateTimer);
+            this.setState({ isWeightMapDirty: true });
+        }
+        else if (changeFlags.viewportZoomChanged) {
+            // Update weight map when zoom stops
+            this._debouncedUpdateWeightmap();
+        }
+        if (props.colorRange !== oldProps.colorRange) {
+            this._updateColorTexture(opts);
+        }
+        if (this.state.isWeightMapDirty) {
+            this._updateWeightmap();
+        }
+        this.setState({ zoom: opts.context.viewport.zoom });
+    }
+    renderLayers() {
+        if (!this.state.supported) {
+            return [];
+        }
+        const { weightsTexture, triPositionBuffer, triTexCoordBuffer, maxWeightsTexture, colorTexture, colorDomain } = this.state;
+        const { updateTriggers, intensity, threshold, aggregation } = this.props;
+        const TriangleLayerClass = this.getSubLayerClass('triangle', TriangleLayer);
+        return new TriangleLayerClass(this.getSubLayerProps({
+            id: 'triangle-layer',
+            updateTriggers
+        }), {
+            // position buffer is filled with world coordinates generated from viewport.unproject
+            // i.e. LNGLAT if geospatial, CARTESIAN otherwise
+            coordinateSystem: COORDINATE_SYSTEM.DEFAULT,
+            data: {
+                attributes: {
+                    positions: triPositionBuffer,
+                    texCoords: triTexCoordBuffer
+                }
+            },
+            vertexCount: 4,
+            maxTexture: maxWeightsTexture,
+            colorTexture,
+            aggregationMode: AGGREGATION_MODE[aggregation] || 0,
+            weightsTexture,
+            intensity,
+            threshold,
+            colorDomain
+        });
+    }
+    finalizeState(context) {
+        super.finalizeState(context);
+        const { weightsTransform, weightsTexture, maxWeightTransform, maxWeightsTexture, triPositionBuffer, triTexCoordBuffer, colorTexture, updateTimer } = this.state;
+        weightsTransform?.destroy();
+        weightsTexture?.destroy();
+        maxWeightTransform?.destroy();
+        maxWeightsTexture?.destroy();
+        triPositionBuffer?.destroy();
+        triTexCoordBuffer?.destroy();
+        colorTexture?.destroy();
+        if (updateTimer) {
+            clearTimeout(updateTimer);
+        }
+    }
+    // PRIVATE
+    // override Composite layer private method to create AttributeManager instance
+    _getAttributeManager() {
+        return new AttributeManager(this.context.device, {
+            id: this.props.id,
+            stats: this.context.stats
+        });
+    }
+    _getChangeFlags(opts) {
+        const changeFlags = {};
+        const { dimensions } = this.state;
+        changeFlags.dataChanged =
+            (this.isAttributeChanged() && 'attribute changed') || // if any attribute is changed
+                (this.isAggregationDirty(opts, {
+                    compareAll: true,
+                    dimension: dimensions.data
+                }) &&
+                    'aggregation is dirty');
+        changeFlags.viewportChanged = opts.changeFlags.viewportChanged;
+        const { zoom } = this.state;
+        if (!opts.context.viewport || opts.context.viewport.zoom !== zoom) {
+            changeFlags.viewportZoomChanged = true;
+        }
+        return changeFlags;
+    }
+    _createTextures() {
+        const { textureSize, format } = this.state;
+        this.setState({
+            weightsTexture: this.context.device.createTexture({
+                ...TEXTURE_PROPS,
+                width: textureSize,
+                height: textureSize,
+                format
+            }),
+            maxWeightsTexture: this.context.device.createTexture({
+                ...TEXTURE_PROPS,
+                width: 1,
+                height: 1,
+                format
+            })
+        });
+    }
+    _setupAttributes() {
+        const attributeManager = this.getAttributeManager();
+        attributeManager.add({
+            positions: { size: 3, type: GL.DOUBLE, accessor: 'getPosition' },
+            weights: { size: 1, accessor: 'getWeight' }
+        });
+        this.setState({ positionAttributeName: 'positions' });
+    }
+    _setupTextureParams() {
+        const { device } = this.context;
+        const { weightsTextureSize } = this.props;
+        const textureSize = Math.min(weightsTextureSize, device.limits.maxTextureDimension2D);
+        const floatTargetSupport = FLOAT_TARGET_FEATURES.every(feature => device.features.has(feature));
+        const format = floatTargetSupport ? 'rgba32float' : 'rgba8unorm';
+        const weightsScale = floatTargetSupport ? 1 : 1 / 255;
+        this.setState({ textureSize, format, weightsScale });
+        if (!floatTargetSupport) {
+            log.warn(`HeatmapLayer: ${this.id} rendering to float texture not supported, falling back to low precision format`)();
+        }
+    }
+    _createWeightsTransform(shaders) {
+        let { weightsTransform } = this.state;
+        const { weightsTexture } = this.state;
+        const attributeManager = this.getAttributeManager();
+        weightsTransform?.destroy();
+        weightsTransform = new TextureTransform(this.context.device, {
+            id: `${this.id}-weights-transform`,
+            bufferLayout: attributeManager.getBufferLayouts(),
+            vertexCount: 1,
+            targetTexture: weightsTexture,
+            parameters: {
+                depthWriteEnabled: false,
+                blendColorOperation: 'add',
+                blendColorSrcFactor: 'one',
+                blendColorDstFactor: 'one',
+                blendAlphaSrcFactor: 'one',
+                blendAlphaDstFactor: 'one'
+            },
+            topology: 'point-list',
+            ...shaders
+        });
+        this.setState({ weightsTransform });
+    }
+    _setupResources() {
+        this._createTextures();
+        const { device } = this.context;
+        const { textureSize, weightsTexture, maxWeightsTexture } = this.state;
+        const weightsTransformShaders = this.getShaders({
+            vs: weightsVs,
+            fs: weightsFs
+        });
+        this._createWeightsTransform(weightsTransformShaders);
+        const maxWeightsTransformShaders = this.getShaders({ vs: maxVs, fs: maxFs });
+        const maxWeightTransform = new TextureTransform(device, {
+            id: `${this.id}-max-weights-transform`,
+            bindings: { inTexture: weightsTexture },
+            uniforms: { textureSize },
+            targetTexture: maxWeightsTexture,
+            ...maxWeightsTransformShaders,
+            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: device.createBuffer({ byteLength: 48 }),
+            triTexCoordBuffer: device.createBuffer({ byteLength: 48 })
+        });
+    }
+    // overwrite super class method to update transform model
+    updateShaders(shaderOptions) {
+        // shader params (modules, injects) changed, update model object
+        this._createWeightsTransform({
+            vs: weightsVs,
+            fs: weightsFs,
+            ...shaderOptions
+        });
+    }
+    _updateMaxWeightValue() {
+        const { maxWeightTransform, textureSize } = this.state;
+        maxWeightTransform.run({
+            parameters: { viewport: [0, 0, 1, 1] },
+            clearColor: [0, 0, 0, 0]
+        });
+    }
+    // Computes world bounds area that needs to be processed for generate heatmap
+    _updateBounds(forceUpdate = false) {
+        const { viewport } = this.context;
+        // Unproject all 4 corners of the current screen coordinates into world coordinates (lng/lat)
+        // Takes care of viewport has non zero bearing/pitch (i.e axis not aligned with world coordiante system)
+        const viewportCorners = [
+            viewport.unproject([0, 0]),
+            viewport.unproject([viewport.width, 0]),
+            viewport.unproject([viewport.width, viewport.height]),
+            viewport.unproject([0, viewport.height])
+        ].map(p => p.map(Math.fround));
+        // #1: get world bounds for current viewport extends
+        const visibleWorldBounds = getBounds(viewportCorners); // TODO: Change to visible bounds
+        const newState = { visibleWorldBounds, viewportCorners };
+        let boundsChanged = false;
+        if (forceUpdate ||
+            !this.state.worldBounds ||
+            !boundsContain(this.state.worldBounds, visibleWorldBounds)) {
+            // #2 : convert world bounds to common (Flat) bounds
+            // #3 : extend common bounds to match aspect ratio with viewport
+            const scaledCommonBounds = this._worldToCommonBounds(visibleWorldBounds);
+            // #4 :convert aligned common bounds to world bounds
+            const worldBounds = this._commonToWorldBounds(scaledCommonBounds);
+            // Clip webmercator projection limits
+            if (this.props.coordinateSystem === COORDINATE_SYSTEM.LNGLAT) {
+                worldBounds[1] = Math.max(worldBounds[1], -85.051129);
+                worldBounds[3] = Math.min(worldBounds[3], 85.051129);
+                worldBounds[0] = Math.max(worldBounds[0], -360);
+                worldBounds[2] = Math.min(worldBounds[2], 360);
+            }
+            // #5: now convert world bounds to common using Layer's coordiante system and origin
+            const normalizedCommonBounds = this._worldToCommonBounds(worldBounds);
+            newState.worldBounds = worldBounds;
+            newState.normalizedCommonBounds = normalizedCommonBounds;
+            boundsChanged = true;
+        }
+        this.setState(newState);
+        return boundsChanged;
+    }
+    _updateTextureRenderingBounds() {
+        // Just render visible portion of the texture
+        const { triPositionBuffer, triTexCoordBuffer, normalizedCommonBounds, viewportCorners } = this.state;
+        const { viewport } = this.context;
+        triPositionBuffer.write(packVertices(viewportCorners, 3));
+        const textureBounds = viewportCorners.map(p => getTextureCoordinates(viewport.projectPosition(p), normalizedCommonBounds));
+        triTexCoordBuffer.write(packVertices(textureBounds, 2));
+    }
+    _updateColorTexture(opts) {
+        const { colorRange } = opts.props;
+        let { colorTexture } = this.state;
+        const colors = colorRangeToFlatArray(colorRange, false, Uint8Array);
+        if (colorTexture && colorTexture?.width === colorRange.length) {
+            // TODO(v9): Unclear whether `setSubImageData` is a public API, or what to use if not.
+            colorTexture.setSubImageData({ data: colors });
+        }
+        else {
+            colorTexture?.destroy();
+            colorTexture = this.context.device.createTexture({
+                ...TEXTURE_PROPS,
+                data: colors,
+                width: colorRange.length,
+                height: 1
+            });
+        }
+        this.setState({ colorTexture });
+    }
+    _updateWeightmap() {
+        const { radiusPixels, colorDomain, aggregation } = this.props;
+        const { worldBounds, textureSize, weightsScale } = this.state;
+        const weightsTransform = this.state.weightsTransform;
+        this.state.isWeightMapDirty = false;
+        // convert world bounds to common using Layer's coordiante system and origin
+        const commonBounds = this._worldToCommonBounds(worldBounds, {
+            useLayerCoordinateSystem: true
+        });
+        if (colorDomain && aggregation === 'SUM') {
+            // scale color domain to weight per pixel
+            const { viewport } = this.context;
+            const metersPerPixel = (viewport.distanceScales.metersPerUnit[2] * (commonBounds[2] - commonBounds[0])) /
+                textureSize;
+            this.state.colorDomain = colorDomain.map(x => x * metersPerPixel * weightsScale);
+        }
+        else {
+            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 };
+        const weights = attributes.weights.buffer;
+        weightsTransform.model.setAttributes({ positions, weights });
+        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]
+        });
+        this._updateMaxWeightValue();
+    }
+    _debouncedUpdateWeightmap(fromTimer = false) {
+        let { updateTimer } = this.state;
+        const { debounceTimeout } = this.props;
+        if (fromTimer) {
+            updateTimer = null;
+            // update
+            this._updateBounds(true);
+            this._updateTextureRenderingBounds();
+            this.setState({ isWeightMapDirty: true });
+        }
+        else {
+            this.setState({ isWeightMapDirty: false });
+            clearTimeout(updateTimer);
+            updateTimer = setTimeout(this._debouncedUpdateWeightmap.bind(this, true), debounceTimeout);
+        }
+        this.setState({ updateTimer });
+    }
+    // input: worldBounds: [minLong, minLat, maxLong, maxLat]
+    // input: opts.useLayerCoordinateSystem : layers coordiante system is used
+    // optput: commonBounds: [minX, minY, maxX, maxY] scaled to fit the current texture
+    _worldToCommonBounds(worldBounds, opts = {}) {
+        const { useLayerCoordinateSystem = false } = opts;
+        const [minLong, minLat, maxLong, maxLat] = worldBounds;
+        const { viewport } = this.context;
+        const { textureSize } = this.state;
+        const { coordinateSystem } = this.props;
+        const offsetMode = useLayerCoordinateSystem &&
+            (coordinateSystem === COORDINATE_SYSTEM.LNGLAT_OFFSETS ||
+                coordinateSystem === COORDINATE_SYSTEM.METER_OFFSETS);
+        const offsetOriginCommon = offsetMode
+            ? viewport.projectPosition(this.props.coordinateOrigin)
+            : [0, 0];
+        const size = (textureSize * RESOLUTION) / viewport.scale;
+        let bottomLeftCommon;
+        let topRightCommon;
+        // Y-axis is flipped between World and Common bounds
+        if (useLayerCoordinateSystem && !offsetMode) {
+            bottomLeftCommon = this.projectPosition([minLong, minLat, 0]);
+            topRightCommon = this.projectPosition([maxLong, maxLat, 0]);
+        }
+        else {
+            bottomLeftCommon = viewport.projectPosition([minLong, minLat, 0]);
+            topRightCommon = viewport.projectPosition([maxLong, maxLat, 0]);
+        }
+        // Ignore z component
+        return scaleToAspectRatio([
+            bottomLeftCommon[0] - offsetOriginCommon[0],
+            bottomLeftCommon[1] - offsetOriginCommon[1],
+            topRightCommon[0] - offsetOriginCommon[0],
+            topRightCommon[1] - offsetOriginCommon[1]
+        ], size, size);
+    }
+    // input commonBounds: [xMin, yMin, xMax, yMax]
+    // output worldBounds: [minLong, minLat, maxLong, maxLat]
+    _commonToWorldBounds(commonBounds) {
+        const [xMin, yMin, xMax, yMax] = commonBounds;
+        const { viewport } = this.context;
+        const bottomLeftWorld = viewport.unprojectPosition([xMin, yMin]);
+        const topRightWorld = viewport.unprojectPosition([xMax, yMax]);
+        return bottomLeftWorld.slice(0, 2).concat(topRightWorld.slice(0, 2));
+    }
+}

package/dist/{esm/heatmap-layer → heatmap-layer}/max-fs.glsl.js

@@ -7,4 +7,3 @@ void main() {
   fragColor.g = outTexture.r / max(1.0, outTexture.a);
 }
 `;
-//# sourceMappingURL=max-fs.glsl.js.map

package/dist/{esm/heatmap-layer → heatmap-layer}/max-vs.glsl.js

@@ -17,4 +17,3 @@ void main()
   gl_PointSize = 1.0;
 }
 `;
-//# sourceMappingURL=max-vs.glsl.js.map

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

@@ -0,0 +1,61 @@
+// Copyright (c) 2015 - 2017 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+export default `\
+#version 300 es
+#define SHADER_NAME triangle-layer-fragment-shader
+
+precision highp float;
+
+uniform float opacity;
+uniform sampler2D weightsTexture;
+uniform sampler2D colorTexture;
+uniform float aggregationMode;
+
+in vec2 vTexCoords;
+in float vIntensityMin;
+in float vIntensityMax;
+
+out vec4 fragColor;
+
+vec4 getLinearColor(float value) {
+  float factor = clamp(value * vIntensityMax, 0., 1.);
+  vec4 color = texture(colorTexture, vec2(factor, 0.5));
+  color.a *= min(value * vIntensityMin, 1.0);
+  return color;
+}
+
+void main(void) {
+  vec4 weights = texture(weightsTexture, vTexCoords);
+  float weight = weights.r;
+
+  if (aggregationMode > 0.5) {
+    weight /= max(1.0, weights.a);
+  }
+
+  // discard pixels with 0 weight.
+  if (weight <= 0.) {
+     discard;
+  }
+
+  vec4 linearColor = getLinearColor(weight);
+  linearColor.a *= opacity;
+  fragColor = linearColor;
+}
+`;

package/dist/heatmap-layer/triangle-layer-vertex.glsl.js

@@ -0,0 +1,52 @@
+// Copyright (c) 2015 - 2017 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+// Inspired by screen-grid-layer vertex shader in deck.gl
+export default `\
+#version 300 es
+#define SHADER_NAME heatp-map-layer-vertex-shader
+
+uniform sampler2D maxTexture;
+uniform float intensity;
+uniform vec2 colorDomain;
+uniform float threshold;
+uniform float aggregationMode;
+
+in vec3 positions;
+in vec2 texCoords;
+
+out vec2 vTexCoords;
+out float vIntensityMin;
+out float vIntensityMax;
+
+void main(void) {
+  gl_Position = project_position_to_clipspace(positions, vec3(0.0), vec3(0.0));
+  vTexCoords = texCoords;
+  vec4 maxTexture = texture(maxTexture, vec2(0.5));
+  float maxValue = aggregationMode < 0.5 ? maxTexture.r : maxTexture.g;
+  float minValue = maxValue * threshold;
+  if (colorDomain[1] > 0.) {
+    // if user specified custom domain use it.
+    maxValue = colorDomain[1];
+    minValue = colorDomain[0];
+  }
+  vIntensityMax = intensity / maxValue;
+  vIntensityMin = intensity / minValue;
+}
+`;

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

@@ -0,0 +1,59 @@
+// Copyright (c) 2015 - 2019 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+import { Model } from '@luma.gl/engine';
+import { Layer, project32 } from '@deck.gl/core';
+import vs from "./triangle-layer-vertex.glsl.js";
+import fs from "./triangle-layer-fragment.glsl.js";
+export default class TriangleLayer extends Layer {
+    static { this.layerName = 'TriangleLayer'; }
+    getShaders() {
+        return { vs, fs, modules: [project32] };
+    }
+    initializeState({ device }) {
+        this.setState({ model: this._getModel(device) });
+    }
+    _getModel(device) {
+        const { vertexCount, data, weightsTexture, maxTexture, colorTexture } = this.props;
+        return new Model(device, {
+            ...this.getShaders(),
+            id: this.props.id,
+            bindings: { weightsTexture, maxTexture, colorTexture },
+            attributes: data.attributes,
+            bufferLayout: [
+                { name: 'positions', format: 'float32x3' },
+                { name: 'texCoords', format: 'float32x2' }
+            ],
+            topology: 'triangle-fan-webgl',
+            vertexCount
+        });
+    }
+    draw({ uniforms }) {
+        const { model } = this.state;
+        const { intensity, threshold, aggregationMode, colorDomain } = this.props;
+        model.setUniforms({
+            ...uniforms,
+            intensity,
+            threshold,
+            aggregationMode,
+            colorDomain
+        });
+        model.draw(this.context.renderPass);
+    }
+}

package/dist/{esm/heatmap-layer → heatmap-layer}/weights-fs.glsl.js

@@ -19,4 +19,3 @@ void main()
   DECKGL_FILTER_COLOR(fragColor, geometry);
 }
 `;
-//# sourceMappingURL=weights-fs.glsl.js.map

package/dist/{esm/heatmap-layer → heatmap-layer}/weights-vs.glsl.js

@@ -24,4 +24,3 @@ void main()
   gl_Position.w = 1.0;
 }
 `;
-//# sourceMappingURL=weights-vs.glsl.js.map