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

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

@@ -0,0 +1,455 @@
+// 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 { 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 FLOAT_TARGET_FEATURES = [
+    'float32-renderable-webgl', // ability to render to float texture
+    'texture-blend-float-webgl' // 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() {
+        super.initializeAggregationLayer(DIMENSIONS);
+        this.setState({ 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) {
+        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() {
+        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: 'float64', 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 } = 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/heatmap-layer/max-fs.glsl.js

@@ -0,0 +1,9 @@
+export default `\
+#version 300 es
+in vec4 outTexture;
+out vec4 fragColor;
+void main() {
+fragColor = outTexture;
+fragColor.g = outTexture.r / max(1.0, outTexture.a);
+}
+`;

package/dist/heatmap-layer/max-vs.glsl.d.ts

@@ -0,0 +1,3 @@
+declare const _default: "#version 300 es\nuniform sampler2D inTexture;\nuniform float textureSize;\nout vec4 outTexture;\n\nvoid main()\n{\n  // Sample every pixel in texture\n  int yIndex = gl_VertexID / int(textureSize);\n  int xIndex = gl_VertexID - (yIndex * int(textureSize));\n  vec2 uv = (0.5 + vec2(float(xIndex), float(yIndex))) / textureSize;\n  outTexture = texture(inTexture, uv);\n\n  gl_Position = vec4(0.0, 0.0, 0.0, 1.0);\n  // Enforce default value for ANGLE issue (https://bugs.chromium.org/p/angleproject/issues/detail?id=3941)\n  gl_PointSize = 1.0;\n}\n";
+export default _default;
+//# sourceMappingURL=max-vs.glsl.d.ts.map

package/{typed → dist}/heatmap-layer/max-vs.glsl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"max-vs.glsl.d.ts","sourceRoot":"","sources":["../../src/heatmap-layer/max-vs.glsl.ts"],"names":[],"mappings":";AAAA,wBAYE"}
+{"version":3,"file":"max-vs.glsl.d.ts","sourceRoot":"","sources":["../../src/heatmap-layer/max-vs.glsl.ts"],"names":[],"mappings":";AAAA,wBAkBE"}

package/dist/heatmap-layer/max-vs.glsl.js

@@ -0,0 +1,15 @@
+export default `\
+#version 300 es
+uniform sampler2D inTexture;
+uniform float textureSize;
+out vec4 outTexture;
+void main()
+{
+int yIndex = gl_VertexID / int(textureSize);
+int xIndex = gl_VertexID - (yIndex * int(textureSize));
+vec2 uv = (0.5 + vec2(float(xIndex), float(yIndex))) / textureSize;
+outTexture = texture(inTexture, uv);
+gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
+gl_PointSize = 1.0;
+}
+`;

package/dist/heatmap-layer/triangle-layer-fragment.glsl.d.ts

@@ -0,0 +1,3 @@
+declare const _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\n  // discard pixels with 0 weight.\n  if (weight <= 0.) {\n     discard;\n  }\n\n  vec4 linearColor = getLinearColor(weight);\n  linearColor.a *= opacity;\n  fragColor = linearColor;\n}\n";
+export default _default;
+//# sourceMappingURL=triangle-layer-fragment.glsl.d.ts.map

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

@@ -0,0 +1,51 @@
+// 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);
+}
+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,47 @@
+// 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.) {
+maxValue = colorDomain[1];
+minValue = colorDomain[0];
+}
+vIntensityMax = intensity / maxValue;
+vIntensityMin = intensity / minValue;
+}
+`;

package/{typed → dist}/heatmap-layer/triangle-layer.d.ts

@@ -1,7 +1,13 @@
-import type { Device, Texture } from '@luma.gl/core';
+import type { Buffer, Device, Texture } from '@luma.gl/core';
 import { Model } from '@luma.gl/engine';
 import { Layer, LayerContext } from '@deck.gl/core';
 type _TriangleLayerProps = {
+    data: {
+        attributes: {
+            positions: Buffer;
+            texCoords: Buffer;
+        };
+    };
     colorDomain: number[];
     aggregationMode: string;
     threshold: number;
@@ -9,12 +15,14 @@ type _TriangleLayerProps = {
     vertexCount: number;
     colorTexture: Texture;
     maxTexture: Texture;
-    texture: Texture;
+    weightsTexture: Texture;
 };
 export default class TriangleLayer extends Layer<_TriangleLayerProps> {
     static layerName: string;
     state: {
         model: Model;
+        positions: Buffer;
+        texCoords: Buffer;
     };
     getShaders(): {
         vs: string;

package/dist/heatmap-layer/triangle-layer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"triangle-layer.d.ts","sourceRoot":"","sources":["../../src/heatmap-layer/triangle-layer.ts"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAC,MAAM,eAAe,CAAC;AAC3D,OAAO,EAAC,KAAK,EAAC,MAAM,iBAAiB,CAAC;AACtC,OAAO,EAAC,KAAK,EAAE,YAAY,EAAY,MAAM,eAAe,CAAC;AAI7D,KAAK,mBAAmB,GAAG;IACzB,IAAI,EAAE;QAAC,UAAU,EAAE;YAAC,SAAS,EAAE,MAAM,CAAC;YAAC,SAAS,EAAE,MAAM,CAAA;SAAC,CAAA;KAAC,CAAC;IAC3D,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,eAAe,EAAE,MAAM,CAAC;IACxB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,OAAO,CAAC;IACtB,UAAU,EAAE,OAAO,CAAC;IACpB,cAAc,EAAE,OAAO,CAAC;CACzB,CAAC;AAEF,MAAM,CAAC,OAAO,OAAO,aAAc,SAAQ,KAAK,CAAC,mBAAmB,CAAC;IACnE,MAAM,CAAC,SAAS,SAAmB;IAEnC,KAAK,EAAG;QACN,KAAK,EAAE,KAAK,CAAC;QACb,SAAS,EAAE,MAAM,CAAC;QAClB,SAAS,EAAE,MAAM,CAAC;KACnB,CAAC;IAEF,UAAU;;;;;IAIV,eAAe,CAAC,EAAC,MAAM,EAAC,EAAE,YAAY,GAAG,IAAI;IAI7C,SAAS,CAAC,MAAM,EAAE,MAAM,GAAG,KAAK;IAiBhC,IAAI,CAAC,EAAC,QAAQ,EAAC;;KAAA,GAAG,IAAI;CAYvB"}