AggregationLayer: various fixes (#4062)

* Fix aggregation dirty flags.
* Use alignment for translation only.
* Fix bounding box translation
* Fix GPUGridLayer attribute setting

modules/aggregation-layers/src/contour-layer/contour-layer.js

@@ -170,23 +170,22 @@ export default class ContourLayer extends GridAggregationLayer {
     let {boundingBox} = this.state;
     if (positionsChanged) {
       boundingBox = getBoundingBox(this.getAttributes(), this.getNumInstances());
+      this.setState({boundingBox});
     }
     if (positionsChanged || cellSizeChanged) {
-      const {
-        gridOffset,
-        boundingBoxAligned,
-        translation,
-        width,
-        height,
-        numCol,
-        numRow
-      } = getGridParams(boundingBox, cellSize, viewport, coordinateSystem);
+      const {gridOffset, translation, width, height, numCol, numRow} = getGridParams(
+        boundingBox,
+        cellSize,
+        viewport,
+        coordinateSystem
+      );
       this.allocateResources(numRow, numCol);
       this.setState({
         gridOffset,
-        boundingBox: boundingBoxAligned,
+        boundingBox,
         translation,
         posOffset: translation.slice(), // Used for CPU aggregation, to offset points
+        gridOrigin: [-1 * translation[0], -1 * translation[1]],
         width,
         height,
         numCol,
@@ -240,7 +239,7 @@ export default class ContourLayer extends GridAggregationLayer {
   // Private (Contours)
 
   _generateContours() {
-    const {numCol, numRow, boundingBox, gridOffset, thresholdData} = this.state;
+    const {numCol, numRow, gridOrigin, gridOffset, thresholdData} = this.state;
     const {count} = this.state.weights;
     let {aggregationData} = count;
     if (!aggregationData) {
@@ -253,7 +252,7 @@ export default class ContourLayer extends GridAggregationLayer {
       thresholdData,
       cellWeights,
       gridSize: [numCol, numRow],
-      gridOrigin: [boundingBox.xMin, boundingBox.yMin],
+      gridOrigin,
       cellSize: [gridOffset.xOffset, gridOffset.yOffset]
     });
 

modules/aggregation-layers/src/gpu-grid-layer/gpu-grid-cell-layer.js

@@ -67,12 +67,10 @@ export default class GPUGridCellLayer extends Layer {
     attributeManager.addInstanced({
       colors: {
         size: 4,
-        update: this.calculateColors,
         noAlloc: true
       },
       elevations: {
         size: 4,
-        update: this.calculateElevations,
         noAlloc: true
       }
     });
@@ -94,7 +92,6 @@ export default class GPUGridCellLayer extends Layer {
 
   draw({uniforms}) {
     const {
-      data,
       cellSize,
       offset,
       extruded,
@@ -103,19 +100,16 @@ export default class GPUGridCellLayer extends Layer {
       gridSize,
       gridOrigin,
       gridOffset,
-      elevationRange
+      elevationRange,
+      colorMaxMinBuffer,
+      elevationMaxMinBuffer
     } = this.props;
 
     const gridOriginLow = [fp64LowPart(gridOrigin[0]), fp64LowPart(gridOrigin[1])];
     const gridOffsetLow = [fp64LowPart(gridOffset[0]), fp64LowPart(gridOffset[1])];
     const domainUniforms = this.getDomainUniforms();
-    const uniformBuffers = {
-      colorMaxMinBuffer: data.color.maxMinBuffer,
-      elevationMaxMinBuffer: data.elevation.maxMinBuffer
-    };
     const colorRange = colorRangeToFlatArray(this.props.colorRange);
-
-    this.bindUniformBuffers(uniformBuffers);
+    this.bindUniformBuffers(colorMaxMinBuffer, elevationMaxMinBuffer);
     this.state.model
       .setUniforms(
         Object.assign({}, uniforms, domainUniforms, {
@@ -134,33 +128,19 @@ export default class GPUGridCellLayer extends Layer {
         })
       )
       .draw();
-    this.unbindUniformBuffers(uniformBuffers);
+    this.unbindUniformBuffers(colorMaxMinBuffer, elevationMaxMinBuffer);
   }
 
-  bindUniformBuffers({colorMaxMinBuffer, elevationMaxMinBuffer}) {
+  bindUniformBuffers(colorMaxMinBuffer, elevationMaxMinBuffer) {
     colorMaxMinBuffer.bind({target: GL.UNIFORM_BUFFER, index: COLOR_DATA_UBO_INDEX});
     elevationMaxMinBuffer.bind({target: GL.UNIFORM_BUFFER, index: ELEVATION_DATA_UBO_INDEX});
   }
 
-  unbindUniformBuffers({colorMaxMinBuffer, elevationMaxMinBuffer}) {
+  unbindUniformBuffers(colorMaxMinBuffer, elevationMaxMinBuffer) {
     colorMaxMinBuffer.unbind({target: GL.UNIFORM_BUFFER, index: COLOR_DATA_UBO_INDEX});
     elevationMaxMinBuffer.unbind({target: GL.UNIFORM_BUFFER, index: ELEVATION_DATA_UBO_INDEX});
   }
 
-  calculateColors(attribute) {
-    const {data} = this.props;
-    attribute.update({
-      buffer: data.color.aggregationBuffer
-    });
-  }
-
-  calculateElevations(attribute) {
-    const {data} = this.props;
-    attribute.update({
-      buffer: data.elevation.aggregationBuffer
-    });
-  }
-
   getDomainUniforms() {
     const {colorDomain, elevationDomain} = this.props;
     const domainUniforms = {};

modules/aggregation-layers/src/gpu-grid-layer/gpu-grid-layer.js

@@ -226,16 +226,16 @@ export default class GPUGridLayer extends GridAggregationLayer {
       elevationDomain
     } = this.props;
 
-    const {weights, numRow, numCol, boundingBox, gridOffset} = this.state;
-
+    const {weights, numRow, numCol, gridOrigin, gridOffset} = this.state;
+    const {color, elevation} = weights;
     const colorRange = colorRangeToFlatArray(this.props.colorRange);
 
     const SubLayerClass = this.getSubLayerClass('gpu-grid-cell', GPUGridCellLayer);
 
     return new SubLayerClass(
       {
         gridSize: [numCol, numRow],
-        gridOrigin: [boundingBox.xMin, boundingBox.yMin],
+        gridOrigin,
         gridOffset: [gridOffset.xOffset, gridOffset.yOffset],
         colorRange,
         elevationRange,
@@ -252,7 +252,14 @@ export default class GPUGridLayer extends GridAggregationLayer {
         id: 'gpu-grid-cell'
       }),
       {
-        data: weights,
+        data: {
+          attributes: {
+            colors: color.aggregationBuffer,
+            elevations: elevation.aggregationBuffer
+          }
+        },
+        colorMaxMinBuffer: color.maxMinBuffer,
+        elevationMaxMinBuffer: elevation.maxMinBuffer,
         numInstances: numCol * numRow
       }
     );
@@ -286,22 +293,20 @@ export default class GPUGridLayer extends GridAggregationLayer {
     let {boundingBox} = this.state;
     if (positionsChanged) {
       boundingBox = getBoundingBox(this.getAttributes(), this.getNumInstances());
+      this.setState({boundingBox});
     }
     if (positionsChanged || cellSizeChanged) {
-      const {
-        gridOffset,
-        boundingBoxAligned,
-        translation,
-        width,
-        height,
-        numCol,
-        numRow
-      } = getGridParams(boundingBox, cellSize, viewport, coordinateSystem);
+      const {gridOffset, translation, width, height, numCol, numRow} = getGridParams(
+        boundingBox,
+        cellSize,
+        viewport,
+        coordinateSystem
+      );
       this.allocateResources(numRow, numCol);
       this.setState({
         gridOffset,
-        boundingBox: boundingBoxAligned,
         translation,
+        gridOrigin: [-1 * translation[0], -1 * translation[1]],
         width,
         height,
         numCol,

modules/aggregation-layers/src/heatmap-layer/heatmap-layer.js

@@ -231,9 +231,9 @@ export default class HeatmapLayer extends AggregationLayer {
 
   _getChangeFlags(opts) {
     const changeFlags = {};
-    const {attributesChanged, dimensions} = this.state;
+    const {dimensions} = this.state;
     changeFlags.dataChanged =
-      attributesChanged ||
+      this.isAttributeChanged() || // if any attribute is changed
       this.isAggregationDirty(opts, {
         compareAll: true,
         dimension: dimensions.data

modules/aggregation-layers/src/screen-grid-layer/screen-grid-layer.js

@@ -180,7 +180,9 @@ export default class ScreenGridLayer extends GridAggregationLayer {
       gpuAggregation
     });
 
-    const {positionsChanged, dimensions} = this.state;
+    const positionsChanged = this.isAttributeChanged(POSITION_ATTRIBUTE_NAME);
+
+    const {dimensions} = this.state;
     const {data, weights} = dimensions;
     const aggregationDataDirty =
       positionsChanged ||

modules/aggregation-layers/src/utils/grid-aggregation-utils.js

@@ -38,7 +38,8 @@ export function getBoundingBox(attributes, vertexCount) {
 }
 /* eslint-enable max-statements */
 
-export function alignBoundingBox(boundingBox, gridOffset, coordinateSystem, viewport) {
+// Returns XY translation for positions to peform aggregation in +ve sapce
+function getTranslation(boundingBox, gridOffset, coordinateSystem, viewport) {
   const {width, height} = viewport;
 
   // Origin to define grid
@@ -54,9 +55,11 @@ export function alignBoundingBox(boundingBox, gridOffset, coordinateSystem, view
   );
 
   const {xMin, yMin} = boundingBox;
-  boundingBox.xMin = alignToCell(xMin - worldOrigin[0], gridOffset.xOffset) + worldOrigin[0];
-  boundingBox.yMin = alignToCell(yMin - worldOrigin[1], gridOffset.yOffset) + worldOrigin[1];
-  return boundingBox;
+  return [
+    // Align origin to match grid cell boundaries in CPU and GPU aggregations
+    -1 * (alignToCell(xMin - worldOrigin[0], gridOffset.xOffset) + worldOrigin[0]),
+    -1 * (alignToCell(yMin - worldOrigin[1], gridOffset.yOffset) + worldOrigin[1])
+  ];
 }
 
 // Aligns `inValue` to given `cellSize`
@@ -96,17 +99,16 @@ export function getGridParams(boundingBox, cellSize, viewport, coordinateSystem)
     coordinateSystem !== COORDINATE_SYSTEM.CARTESIAN
   );
 
-  const boundingBoxAligned = alignBoundingBox(boundingBox, gridOffset, coordinateSystem, viewport);
+  const translation = getTranslation(boundingBox, gridOffset, coordinateSystem, viewport);
 
   const {xMin, yMin, xMax, yMax} = boundingBox;
-  const translation = [-1 * xMin, -1 * yMin];
 
   const width = xMax - xMin + gridOffset.xOffset;
   const height = yMax - yMin + gridOffset.yOffset;
 
   const numCol = Math.ceil(width / gridOffset.xOffset);
   const numRow = Math.ceil(height / gridOffset.yOffset);
-  return {gridOffset, boundingBoxAligned, translation, width, height, numCol, numRow};
+  return {gridOffset, translation, width, height, numCol, numRow};
 }
 
 /**

test/modules/aggregation-layers/gpu-cpu-aggregator.spec.js

@@ -111,7 +111,7 @@ test('Aggregation#WorldSpace', t => {
   const {viewport} = moduleSettings;
   const {attributes, vertexCount} = buildAttributes({data, weights});
   const boundingBox = getBoundingBox(attributes, vertexCount);
-  const {gridOffset, boundingBoxAligned, translation, numCol, numRow} = getGridParams(
+  const {gridOffset, translation, numCol, numRow} = getGridParams(
     boundingBox,
     cellSize,
     viewport,
@@ -141,7 +141,7 @@ test('Aggregation#WorldSpace', t => {
         scaling: [0, 0, 0],
         vertexCount,
         moduleSettings,
-        boundingBox: boundingBoxAligned
+        boundingBox
       }
     });
   }

test/modules/aggregation-layers/gpu-grid-layer/gpu-grid-cell-layer.spec.js

@@ -27,15 +27,17 @@ import {gl} from '@deck.gl/test-utils';
 const SAMPLE_BUFFER = new Buffer(gl);
 const SAMPLE_PROPS = {
   data: {
-    color: {
-      aggregationBuffer: SAMPLE_BUFFER,
-      maxMinBuffer: SAMPLE_BUFFER
-    },
-    elevation: {
-      aggregationBuffer: SAMPLE_BUFFER,
-      maxMinBuffer: SAMPLE_BUFFER
+    attributes: {
+      color: {
+        aggregationBuffer: SAMPLE_BUFFER
+      },
+      elevation: {
+        aggregationBuffer: SAMPLE_BUFFER
+      }
     }
-  }
+  },
+  colorMaxMinBuffer: SAMPLE_BUFFER,
+  elevationMaxMinBuffer: SAMPLE_BUFFER
 };
 
 test('GPUGridCellLayer#initializeState', t => {

test/modules/aggregation-layers/grid-aggregation-layer.spec.js

@@ -139,10 +139,10 @@ class TestGridAggregationLayer extends GridAggregationLayer {
       gpuAggregation
     });
 
-    const {positionsChanged, dimensions} = this.state;
+    const {dimensions} = this.state;
     const {data, weights} = dimensions;
     const aggregationDataDirty =
-      positionsChanged ||
+      this.isAttributeChanged('positions') ||
       gpuAggregationChanged ||
       this.isAggregationDirty(opts, {
         compareAll: gpuAggregation, // check for all (including extentions props) when using gpu aggregation