Fix countItems in DataFilterExtension

modules/extensions/src/data-filter/aggregator.ts

@@ -1,6 +1,5 @@
-import {Device, DeviceFeature, Framebuffer} from '@luma.gl/core';
+import {Device, DeviceFeature, Framebuffer, RenderPipelineParameters} from '@luma.gl/core';
 import {Model} from '@luma.gl/engine';
-import {GL} from '@luma.gl/constants';
 
 const AGGREGATE_VS = `\
 #version 300 es
@@ -19,7 +18,8 @@ const float component = 1.0 / 255.0;
 
 void main() {
   #ifdef FLOAT_TARGET
-    dataFilter_value *= float(filterIndices != filterPrevIndices);
+    // BUG: always 0 for some reason
+    // dataFilter_value *= float(filterIndices != filterPrevIndices);
     gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
     vColor = vec4(0.0, 0.0, 0.0, 1.0);
   #else
@@ -94,16 +94,20 @@ export function getModel(device: Device, shaderOptions: any, useFloatTarget: boo
     id: 'data-filter-aggregation-model',
     vertexCount: 1,
     isInstanced: false,
-    drawMode: GL.POINTS,
+    topology: 'point-list',
     vs: AGGREGATE_VS,
     fs: AGGREGATE_FS,
     ...shaderOptions
   });
 }
 
-export const parameters = {
+export const parameters: RenderPipelineParameters = {
   blend: true,
-  blendFunc: [GL.ONE, GL.ONE, GL.ONE, GL.ONE],
-  blendEquation: [GL.FUNC_ADD, GL.FUNC_ADD],
-  depthTest: false
+  blendColorSrcFactor: 'one',
+  blendColorDstFactor: 'one',
+  blendAlphaSrcFactor: 'one',
+  blendAlphaDstFactor: 'one',
+  blendColorOperation: 'add',
+  blendAlphaOperation: 'add',
+  depthCompare: 'never'
 } as const;

modules/extensions/src/data-filter/data-filter-extension.ts

@@ -18,7 +18,7 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import type {Framebuffer} from '@luma.gl/core';
+import type {Buffer, Framebuffer} from '@luma.gl/core';
 import type {Model} from '@luma.gl/engine';
 import type {Layer, LayerContext, Accessor, UpdateParameters} from '@deck.gl/core';
 import {_deepEqual as deepEqual, LayerExtension, log} from '@deck.gl/core';
@@ -30,6 +30,7 @@ import {
   dataFilter64
 } from './shader-module';
 import * as aggregator from './aggregator';
+import {NumberArray4} from '@math.gl/core';
 
 const defaultProps = {
   getFilterValue: {type: 'accessor', value: 0},
@@ -229,6 +230,7 @@ export default class DataFilterExtension extends LayerExtension<
         extension.getShaders.call(this, extension),
         useFloatTarget
       );
+      filterModel.setBufferLayout(attributeManager.getBufferLayouts(filterModel));
       this.setState({filterFBO, filterModel});
     }
   }
@@ -311,32 +313,35 @@ export default class DataFilterExtension extends LayerExtension<
 
     /* eslint-disable-next-line camelcase */
     if (filterNeedsUpdate && onFilteredItemsChange && filterModel) {
+      const attributeManager = this.getAttributeManager()!;
       const {
         attributes: {filterValues, filterCategoryValues, filterIndices}
-      } = this.getAttributeManager()!;
+      } = attributeManager;
       filterModel.setVertexCount(this.getNumInstances());
 
-      this.context.device.clearWebGL({framebuffer: filterFBO, color: [0, 0, 0, 0]});
-
-      filterModel.updateModuleSettings(params.moduleParameters);
       // @ts-expect-error filterValue and filterIndices should always have buffer value
-      filterModel.setAttributes({
+      const attributes: Record<string, Buffer> = {
         ...filterValues?.getValue(),
         ...filterCategoryValues?.getValue(),
         ...filterIndices?.getValue()
+      };
+      filterModel.setAttributes(attributes);
+      filterModel.shaderInputs.setProps({
+        dataFilter: dataFilterProps
       });
-      filterModel.shaderInputs.setProps({dataFilter: dataFilterProps});
-      filterModel.device.withParametersWebGL(
-        {
-          framebuffer: filterFBO,
-          // ts-ignore 'readonly' cannot be assigned to the mutable type '[GLBlendEquation, GLBlendEquation]'
-          ...(aggregator.parameters as any),
-          viewport: [0, 0, filterFBO.width, filterFBO.height]
-        },
-        () => {
-          filterModel.draw(this.context.renderPass);
-        }
-      );
+
+      const viewport = [0, 0, filterFBO.width, filterFBO.height] as NumberArray4;
+
+      const renderPass = filterModel.device.beginRenderPass({
+        id: 'data-filter-aggregation',
+        framebuffer: filterFBO,
+        parameters: {viewport},
+        clearColor: [0, 0, 0, 0]
+      });
+      filterModel.setParameters(aggregator.parameters);
+      filterModel.draw(renderPass);
+      renderPass.end();
+
       const color = filterModel.device.readPixelsToArrayWebGL(filterFBO);
       let count = 0;
       for (let i = 0; i < color.length; i++) {

test/modules/extensions/data-filter.spec.ts

@@ -140,6 +140,7 @@ test('DataFilterExtension#categories', t => {
 
 test('DataFilterExtension#countItems', t => {
   let cbCalled = 0;
+  let cbCount = -1;
 
   const testCases = [
     {
@@ -150,12 +151,16 @@ test('DataFilterExtension#countItems', t => {
         ],
         getPosition: d => d.position,
         getFilterValue: d => d.timestamp,
-        onFilteredItemsChange: () => cbCalled++,
+        onFilteredItemsChange: event => {
+          cbCalled++;
+          cbCount = event.count;
+        },
         filterRange: [80, 160],
         extensions: [new DataFilterExtension({filterSize: 1, countItems: true})]
       },
       onAfterUpdate: () => {
         t.is(cbCalled, 1, 'onFilteredItemsChange is called');
+        t.is(cbCount, 2, 'count is correct');
       }
     },
     {
@@ -172,6 +177,7 @@ test('DataFilterExtension#countItems', t => {
       },
       onAfterUpdate: () => {
         t.is(cbCalled, 2, 'onFilteredItemsChange is called');
+        t.is(cbCount, 0, 'count is correct');
       }
     }
   ];