@deck.gl/aggregation-layers 8.9.17 → 8.9.19

package/typed/heatmap-layer/weights-fs.glsl.js

@@ -0,0 +1,19 @@
+export default `\
+varying vec4 weightsTexture;
+// Epanechnikov function, keeping for reference
+// float epanechnikovKDE(float u) {
+//   return 0.75 * (1.0 - u * u);
+// }
+float gaussianKDE(float u){
+  return pow(2.71828, -u*u/0.05555)/(1.77245385*0.166666);
+}
+void main()
+{
+  float dist = length(gl_PointCoord - vec2(0.5, 0.5));
+  if (dist > 0.5) {
+    discard;
+  }
+  gl_FragColor = weightsTexture * gaussianKDE(2. * dist);
+  DECKGL_FILTER_COLOR(gl_FragColor, geometry);
+}
+`;

package/typed/heatmap-layer/weights-vs.glsl.js

@@ -0,0 +1,23 @@
+export default `\
+attribute vec3 positions;
+attribute vec3 positions64Low;
+attribute float weights;
+varying vec4 weightsTexture;
+uniform float radiusPixels;
+uniform float textureWidth;
+uniform vec4 commonBounds;
+uniform float weightsScale;
+void main()
+{
+  weightsTexture = vec4(weights * weightsScale, 0., 0., 1.);
+
+  float radiusTexels  = project_pixel_size(radiusPixels) * textureWidth / (commonBounds.z - commonBounds.x);
+  gl_PointSize = radiusTexels * 2.;
+
+  vec3 commonPosition = project_position(positions, positions64Low);
+
+  // map xy from commonBounds to [-1, 1]
+  gl_Position.xy = (commonPosition.xy - commonBounds.xy) / (commonBounds.zw - commonBounds.xy) ;
+  gl_Position.xy = (gl_Position.xy * 2.) - (1.);
+}
+`;

package/typed/hexagon-layer/hexagon-aggregator.js

@@ -0,0 +1,112 @@
+// 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.
+import { hexbin } from 'd3-hexbin';
+import { createIterable, log } from '@deck.gl/core';
+/**
+ * Use d3-hexbin to performs hexagonal binning from geo points to hexagons
+ * @param {Iterable} data - array of points
+ * @param {Number} radius - hexagon radius in meter
+ * @param {function} getPosition - get points lon lat
+ * @param {Object} viewport - current viewport object
+
+ * @return {Object} - hexagons and countRange
+ */
+export function pointToHexbin(props, aggregationParams) {
+    const { data, radius } = props;
+    const { viewport, attributes } = aggregationParams;
+    // get hexagon radius in mercator world unit
+    const centerLngLat = data.length ? getPointsCenter(data, aggregationParams) : null;
+    const radiusCommon = getRadiusInCommon(radius, viewport, centerLngLat);
+    // add world space coordinates to points
+    const screenPoints = [];
+    const { iterable, objectInfo } = createIterable(data);
+    const positions = attributes.positions.value;
+    const { size } = attributes.positions.getAccessor();
+    for (const object of iterable) {
+        objectInfo.index++;
+        const posIndex = objectInfo.index * size;
+        const position = [positions[posIndex], positions[posIndex + 1]];
+        const arrayIsFinite = Number.isFinite(position[0]) && Number.isFinite(position[1]);
+        if (arrayIsFinite) {
+            screenPoints.push({
+                screenCoord: viewport.projectFlat(position),
+                source: object,
+                index: objectInfo.index
+            });
+        }
+        else {
+            log.warn('HexagonLayer: invalid position')();
+        }
+    }
+    const newHexbin = hexbin()
+        .radius(radiusCommon)
+        .x(d => d.screenCoord[0])
+        .y(d => d.screenCoord[1]);
+    const hexagonBins = newHexbin(screenPoints);
+    return {
+        hexagons: hexagonBins.map((hex, index) => ({
+            position: viewport.unprojectFlat([hex.x, hex.y]),
+            points: hex,
+            index
+        })),
+        radiusCommon
+    };
+}
+/**
+ * Get the bounding box of all data points
+ */
+export function getPointsCenter(data, aggregationParams) {
+    const { attributes } = aggregationParams;
+    const positions = attributes.positions.value;
+    const { size } = attributes.positions.getAccessor();
+    let minX = Infinity;
+    let minY = Infinity;
+    let maxX = -Infinity;
+    let maxY = -Infinity;
+    let i;
+    for (i = 0; i < size * data.length; i += size) {
+        const x = positions[i];
+        const y = positions[i + 1];
+        const arrayIsFinite = Number.isFinite(x) && Number.isFinite(y);
+        if (arrayIsFinite) {
+            minX = Math.min(x, minX);
+            maxX = Math.max(x, maxX);
+            minY = Math.min(y, minY);
+            maxY = Math.max(y, maxY);
+        }
+    }
+    // return center
+    return [minX, minY, maxX, maxY].every(Number.isFinite)
+        ? [(minX + maxX) / 2, (minY + maxY) / 2]
+        : null;
+}
+/**
+ * Get radius in mercator world space coordinates from meter
+ * @param {Number} radius - in meter
+ * @param {Object} viewport - current viewport object
+ * @param {Array<Number>} center - data center
+
+ * @return {Number} radius in mercator world spcae coordinates
+ */
+export function getRadiusInCommon(radius, viewport, center) {
+    const { unitsPerMeter } = viewport.getDistanceScales(center);
+    // x, y distance should be the same
+    return radius * unitsPerMeter[0];
+}

package/typed/hexagon-layer/hexagon-layer.js

@@ -0,0 +1,171 @@
+// 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.
+import { log } from '@deck.gl/core';
+import { ColumnLayer } from '@deck.gl/layers';
+import { defaultColorRange } from '../utils/color-utils';
+import { pointToHexbin } from './hexagon-aggregator';
+import CPUAggregator from '../utils/cpu-aggregator';
+import AggregationLayer from '../aggregation-layer';
+import GL from '@luma.gl/constants';
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+function nop() { }
+const defaultProps = {
+    // color
+    colorDomain: null,
+    colorRange: defaultColorRange,
+    getColorValue: { type: 'accessor', value: null },
+    getColorWeight: { type: 'accessor', value: 1 },
+    colorAggregation: 'SUM',
+    lowerPercentile: { type: 'number', value: 0, min: 0, max: 100 },
+    upperPercentile: { type: 'number', value: 100, min: 0, max: 100 },
+    colorScaleType: 'quantize',
+    onSetColorDomain: nop,
+    // elevation
+    elevationDomain: null,
+    elevationRange: [0, 1000],
+    getElevationValue: { type: 'accessor', value: null },
+    getElevationWeight: { type: 'accessor', value: 1 },
+    elevationAggregation: 'SUM',
+    elevationLowerPercentile: { type: 'number', value: 0, min: 0, max: 100 },
+    elevationUpperPercentile: { type: 'number', value: 100, min: 0, max: 100 },
+    elevationScale: { type: 'number', min: 0, value: 1 },
+    elevationScaleType: 'linear',
+    onSetElevationDomain: nop,
+    radius: { type: 'number', value: 1000, min: 1 },
+    coverage: { type: 'number', min: 0, max: 1, value: 1 },
+    extruded: false,
+    hexagonAggregator: pointToHexbin,
+    getPosition: { type: 'accessor', value: x => x.position },
+    // Optional material for 'lighting' shader module
+    material: true,
+    // data filter
+    _filterData: { type: 'function', value: null, optional: true }
+};
+export default class HexagonLayer extends AggregationLayer {
+    initializeState() {
+        const cpuAggregator = new CPUAggregator({
+            getAggregator: props => props.hexagonAggregator,
+            getCellSize: props => props.radius
+        });
+        this.state = {
+            cpuAggregator,
+            aggregatorState: cpuAggregator.state,
+            vertices: null
+        };
+        const attributeManager = this.getAttributeManager();
+        attributeManager.add({
+            positions: { size: 3, type: GL.DOUBLE, accessor: 'getPosition' }
+        });
+        // color and elevation attributes can't be added as attributes
+        // they are calculated using 'getValue' accessor that takes an array of pints.
+    }
+    updateState(opts) {
+        super.updateState(opts);
+        if (opts.changeFlags.propsOrDataChanged) {
+            const aggregatorState = this.state.cpuAggregator.updateState(opts, {
+                viewport: this.context.viewport,
+                attributes: this.getAttributes()
+            });
+            if (this.state.aggregatorState.layerData !== aggregatorState.layerData) {
+                // if user provided custom aggregator and returns hexagonVertices,
+                // Need to recalculate radius and angle based on vertices
+                const { hexagonVertices } = aggregatorState.layerData || {};
+                this.setState({
+                    vertices: hexagonVertices && this.convertLatLngToMeterOffset(hexagonVertices)
+                });
+            }
+            this.setState({
+                // make a copy of the internal state of cpuAggregator for testing
+                aggregatorState
+            });
+        }
+    }
+    convertLatLngToMeterOffset(hexagonVertices) {
+        const { viewport } = this.context;
+        if (Array.isArray(hexagonVertices) && hexagonVertices.length === 6) {
+            // get centroid of hexagons
+            const vertex0 = hexagonVertices[0];
+            const vertex3 = hexagonVertices[3];
+            const centroid = [(vertex0[0] + vertex3[0]) / 2, (vertex0[1] + vertex3[1]) / 2];
+            const centroidFlat = viewport.projectFlat(centroid);
+            const { metersPerUnit } = viewport.getDistanceScales(centroid);
+            // offset all points by centroid to meter offset
+            const vertices = hexagonVertices.map(vt => {
+                const vtFlat = viewport.projectFlat(vt);
+                return [
+                    (vtFlat[0] - centroidFlat[0]) * metersPerUnit[0],
+                    (vtFlat[1] - centroidFlat[1]) * metersPerUnit[1]
+                ];
+            });
+            return vertices;
+        }
+        log.error('HexagonLayer: hexagonVertices needs to be an array of 6 points')();
+        return null;
+    }
+    getPickingInfo({ info }) {
+        return this.state.cpuAggregator.getPickingInfo({ info });
+    }
+    // create a method for testing
+    _onGetSublayerColor(cell) {
+        return this.state.cpuAggregator.getAccessor('fillColor')(cell);
+    }
+    // create a method for testing
+    _onGetSublayerElevation(cell) {
+        return this.state.cpuAggregator.getAccessor('elevation')(cell);
+    }
+    _getSublayerUpdateTriggers() {
+        return this.state.cpuAggregator.getUpdateTriggers(this.props);
+    }
+    renderLayers() {
+        const { elevationScale, extruded, coverage, material, transitions } = this.props;
+        const { aggregatorState, vertices } = this.state;
+        const SubLayerClass = this.getSubLayerClass('hexagon-cell', ColumnLayer);
+        const updateTriggers = this._getSublayerUpdateTriggers();
+        const geometry = vertices
+            ? { vertices, radius: 1 }
+            : {
+                // default geometry
+                radius: aggregatorState.layerData.radiusCommon || 1,
+                radiusUnits: 'common',
+                angle: 90
+            };
+        return new SubLayerClass({
+            ...geometry,
+            diskResolution: 6,
+            elevationScale,
+            extruded,
+            coverage,
+            material,
+            getFillColor: this._onGetSublayerColor.bind(this),
+            getElevation: this._onGetSublayerElevation.bind(this),
+            transitions: transitions && {
+                getFillColor: transitions.getColorValue || transitions.getColorWeight,
+                getElevation: transitions.getElevationValue || transitions.getElevationWeight
+            }
+        }, this.getSubLayerProps({
+            id: 'hexagon-cell',
+            updateTriggers
+        }), {
+            data: aggregatorState.layerData.data
+        });
+    }
+}
+HexagonLayer.layerName = 'HexagonLayer';
+HexagonLayer.defaultProps = defaultProps;

package/typed/index.js

@@ -0,0 +1,33 @@
+// 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.
+/* eslint-disable max-len */
+export { default as ScreenGridLayer } from './screen-grid-layer/screen-grid-layer';
+export { default as CPUGridLayer } from './cpu-grid-layer/cpu-grid-layer';
+export { default as HexagonLayer } from './hexagon-layer/hexagon-layer';
+export { default as ContourLayer } from './contour-layer/contour-layer';
+export { default as GridLayer } from './grid-layer/grid-layer';
+export { default as GPUGridLayer } from './gpu-grid-layer/gpu-grid-layer';
+export { AGGREGATION_OPERATION } from './utils/aggregation-operation-utils';
+// experimental export
+export { default as HeatmapLayer } from './heatmap-layer/heatmap-layer';
+export { default as _GPUGridAggregator } from './utils/gpu-grid-aggregation/gpu-grid-aggregator';
+export { default as _CPUAggregator } from './utils/cpu-aggregator';
+export { default as _AggregationLayer } from './aggregation-layer';
+export { default as _BinSorter } from './utils/bin-sorter';

package/typed/screen-grid-layer/screen-grid-cell-layer.js

@@ -0,0 +1,159 @@
+// 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 GL from '@luma.gl/constants';
+import { Model, Geometry, FEATURES, hasFeatures } from '@luma.gl/core';
+import { Layer, log, picking } from '@deck.gl/core';
+import { defaultColorRange, colorRangeToFlatArray } from '../utils/color-utils';
+import vs from './screen-grid-layer-vertex.glsl';
+import fs from './screen-grid-layer-fragment.glsl';
+const DEFAULT_MINCOLOR = [0, 0, 0, 0];
+const DEFAULT_MAXCOLOR = [0, 255, 0, 255];
+const COLOR_PROPS = ['minColor', 'maxColor', 'colorRange', 'colorDomain'];
+const defaultProps = {
+    cellSizePixels: { value: 100, min: 1 },
+    cellMarginPixels: { value: 2, min: 0, max: 5 },
+    colorDomain: null,
+    colorRange: defaultColorRange
+};
+export default class ScreenGridCellLayer extends Layer {
+    static isSupported(gl) {
+        return hasFeatures(gl, [FEATURES.TEXTURE_FLOAT]);
+    }
+    getShaders() {
+        return { vs, fs, modules: [picking] };
+    }
+    initializeState() {
+        const { gl } = this.context;
+        const attributeManager = this.getAttributeManager();
+        attributeManager.addInstanced({
+            // eslint-disable-next-line @typescript-eslint/unbound-method
+            instancePositions: { size: 3, update: this.calculateInstancePositions },
+            instanceCounts: { size: 4, noAlloc: true }
+        });
+        this.setState({
+            model: this._getModel(gl)
+        });
+    }
+    shouldUpdateState({ changeFlags }) {
+        // 'instanceCounts' buffer contetns change on viewport change.
+        return changeFlags.somethingChanged;
+    }
+    updateState(params) {
+        super.updateState(params);
+        const { oldProps, props, changeFlags } = params;
+        const attributeManager = this.getAttributeManager();
+        if (props.numInstances !== oldProps.numInstances) {
+            attributeManager.invalidateAll();
+        }
+        else if (oldProps.cellSizePixels !== props.cellSizePixels) {
+            attributeManager.invalidate('instancePositions');
+        }
+        this._updateUniforms(oldProps, props, changeFlags);
+    }
+    draw({ uniforms }) {
+        const { parameters, maxTexture } = this.props;
+        const minColor = this.props.minColor || DEFAULT_MINCOLOR;
+        const maxColor = this.props.maxColor || DEFAULT_MAXCOLOR;
+        // If colorDomain not specified we use default domain [1, maxCount]
+        // maxCount value will be sampled form maxTexture in vertex shader.
+        const colorDomain = this.props.colorDomain || [1, 0];
+        const { model } = this.state;
+        model
+            .setUniforms(uniforms)
+            .setUniforms({
+            minColor,
+            maxColor,
+            maxTexture,
+            colorDomain
+        })
+            .draw({
+            parameters: {
+                depthTest: false,
+                depthMask: false,
+                ...parameters
+            }
+        });
+    }
+    calculateInstancePositions(attribute, { numInstances }) {
+        const { width, height } = this.context.viewport;
+        const { cellSizePixels } = this.props;
+        const numCol = Math.ceil(width / cellSizePixels);
+        const { value, size } = attribute;
+        for (let i = 0; i < numInstances; i++) {
+            const x = i % numCol;
+            const y = Math.floor(i / numCol);
+            value[i * size + 0] = ((x * cellSizePixels) / width) * 2 - 1;
+            value[i * size + 1] = 1 - ((y * cellSizePixels) / height) * 2;
+            value[i * size + 2] = 0;
+        }
+    }
+    // Private Methods
+    _getModel(gl) {
+        return new Model(gl, {
+            ...this.getShaders(),
+            id: this.props.id,
+            geometry: new Geometry({
+                drawMode: GL.TRIANGLE_FAN,
+                attributes: {
+                    positions: new Float32Array([0, 0, 0, 1, 0, 0, 1, 1, 0, 0, 1, 0])
+                }
+            }),
+            isInstanced: true
+        });
+    }
+    _shouldUseMinMax() {
+        const { minColor, maxColor, colorDomain, colorRange } = this.props;
+        if (minColor || maxColor) {
+            log.deprecated('ScreenGridLayer props: minColor and maxColor', 'colorRange, colorDomain')();
+            return true;
+        }
+        // minColor and maxColor not supplied, check if colorRange or colorDomain supplied.
+        // NOTE: colorDomain and colorRange are experimental features, use them only when supplied.
+        if (colorDomain || colorRange) {
+            return false;
+        }
+        // None specified, use default minColor and maxColor
+        return true;
+    }
+    _updateUniforms(oldProps, props, changeFlags) {
+        const { model } = this.state;
+        if (COLOR_PROPS.some(key => oldProps[key] !== props[key])) {
+            model.setUniforms({ shouldUseMinMax: this._shouldUseMinMax() });
+        }
+        if (oldProps.colorRange !== props.colorRange) {
+            model.setUniforms({ colorRange: colorRangeToFlatArray(props.colorRange) });
+        }
+        if (oldProps.cellMarginPixels !== props.cellMarginPixels ||
+            oldProps.cellSizePixels !== props.cellSizePixels ||
+            changeFlags.viewportChanged) {
+            const { width, height } = this.context.viewport;
+            const { cellSizePixels, cellMarginPixels } = this.props;
+            const margin = cellSizePixels > cellMarginPixels ? cellMarginPixels : 0;
+            const cellScale = new Float32Array([
+                ((cellSizePixels - margin) / width) * 2,
+                (-(cellSizePixels - margin) / height) * 2,
+                1
+            ]);
+            model.setUniforms({ cellScale });
+        }
+    }
+}
+ScreenGridCellLayer.layerName = 'ScreenGridCellLayer';
+ScreenGridCellLayer.defaultProps = defaultProps;

package/typed/screen-grid-layer/screen-grid-layer-fragment.glsl.js

@@ -0,0 +1,37 @@
+// 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.
+/* fragment shader for the grid-layer */
+export default `\
+#define SHADER_NAME screen-grid-layer-fragment-shader
+
+precision highp float;
+
+varying vec4 vColor;
+varying float vSampleCount;
+
+void main(void) {
+  if (vSampleCount <= 0.0) {
+    discard;
+  }
+  gl_FragColor = vColor;
+
+  DECKGL_FILTER_COLOR(gl_FragColor, geometry);
+}
+`;

package/typed/screen-grid-layer/screen-grid-layer-vertex.glsl.js

@@ -0,0 +1,83 @@
+// 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 `\
+#define SHADER_NAME screen-grid-layer-vertex-shader
+#define RANGE_COUNT 6
+
+attribute vec3 positions;
+attribute vec3 instancePositions;
+attribute vec4 instanceCounts;
+attribute vec3 instancePickingColors;
+
+uniform float opacity;
+uniform vec3 cellScale;
+uniform vec4 minColor;
+uniform vec4 maxColor;
+uniform vec4 colorRange[RANGE_COUNT];
+uniform vec2 colorDomain;
+uniform bool shouldUseMinMax;
+uniform sampler2D maxTexture;
+
+varying vec4 vColor;
+varying float vSampleCount;
+
+vec4 quantizeScale(vec2 domain, vec4 range[RANGE_COUNT], float value) {
+  vec4 outColor = vec4(0., 0., 0., 0.);
+  if (value >= domain.x && value <= domain.y) {
+    float domainRange = domain.y - domain.x;
+    if (domainRange <= 0.) {
+      outColor = colorRange[0];
+    } else {
+      float rangeCount = float(RANGE_COUNT);
+      float rangeStep = domainRange / rangeCount;
+      float idx = floor((value - domain.x) / rangeStep);
+      idx = clamp(idx, 0., rangeCount - 1.);
+      int intIdx = int(idx);
+      outColor = colorRange[intIdx];
+    }
+  }
+  outColor = outColor / 255.;
+  return outColor;
+}
+
+void main(void) {
+  vSampleCount = instanceCounts.a;
+
+  float weight = instanceCounts.r;
+  float maxWeight = texture2D(maxTexture, vec2(0.5)).r;
+
+  float step = weight / maxWeight;
+  vec4 minMaxColor = mix(minColor, maxColor, step) / 255.;
+
+  vec2 domain = colorDomain;
+  float domainMaxValid = float(colorDomain.y != 0.);
+  domain.y = mix(maxWeight, colorDomain.y, domainMaxValid);
+  vec4 rangeColor = quantizeScale(domain, colorRange, weight);
+
+  float rangeMinMax = float(shouldUseMinMax);
+  vec4 color = mix(rangeColor, minMaxColor, rangeMinMax);
+  vColor = vec4(color.rgb, color.a * opacity);
+
+  // Set color to be rendered to picking fbo (also used to check for selection highlight).
+  picking_setPickingColor(instancePickingColors);
+
+  gl_Position = vec4(instancePositions + positions * cellScale, 1.);
+}
+`;