@deck.gl/extensions 8.8.0-alpha.5 → 8.8.0-beta.2

package/typed/clip/clip.js

@@ -0,0 +1,114 @@
+// 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 { LayerExtension } from '@deck.gl/core';
+const defaultProps = {
+    clipBounds: [0, 0, 1, 1]
+};
+const shaderFunction = `
+uniform vec4 clip_bounds;
+
+bool clip_isInBounds(vec2 position) {
+  return position.x >= clip_bounds[0] && position.y >= clip_bounds[1] && position.x < clip_bounds[2] && position.y < clip_bounds[3];
+}
+`;
+/*
+ * The vertex-shader version clips geometries by their anchor position
+ * e.g. ScatterplotLayer - show if the center of a circle is within bounds
+ */
+const shaderModuleVs = {
+    name: 'clip-vs',
+    vs: shaderFunction
+};
+const injectionVs = {
+    'vs:#decl': `
+varying float clip_isVisible;
+`,
+    'vs:DECKGL_FILTER_GL_POSITION': `
+  clip_isVisible = float(clip_isInBounds(geometry.worldPosition.xy));
+`,
+    'fs:#decl': `
+varying float clip_isVisible;
+`,
+    'fs:DECKGL_FILTER_COLOR': `
+  if (clip_isVisible < 0.5) discard;
+`
+};
+/*
+ * The fragment-shader version clips pixels at the bounds
+ * e.g. PolygonLayer - show the part of the polygon that intersect with the bounds
+ */
+const shaderModuleFs = {
+    name: 'clip-fs',
+    fs: shaderFunction
+};
+const injectionFs = {
+    'vs:#decl': `
+varying vec2 clip_commonPosition;
+`,
+    'vs:DECKGL_FILTER_GL_POSITION': `
+  clip_commonPosition = geometry.position.xy;
+`,
+    'fs:#decl': `
+varying vec2 clip_commonPosition;
+`,
+    'fs:DECKGL_FILTER_COLOR': `
+  if (!clip_isInBounds(clip_commonPosition)) discard;
+`
+};
+export default class ClipExtension extends LayerExtension {
+    getShaders() {
+        // If `clipByInstance: true`, the entire object is shown/hidden based on its anchor position (done by vertex shader)
+        // Otherwise, the object is trimmed by the clip bounds (done by fragment shader)
+        // Default behavior: consider a layer instanced if it has attribute `instancePositions`
+        let clipByInstance = 'instancePositions' in this.getAttributeManager().attributes;
+        // Users can override by setting the `clipByInstance` prop
+        if ('clipByInstance' in this.props) {
+            clipByInstance = this.props.clipByInstance;
+        }
+        this.state.clipByInstance = clipByInstance;
+        return clipByInstance
+            ? {
+                modules: [shaderModuleVs],
+                inject: injectionVs
+            }
+            : {
+                modules: [shaderModuleFs],
+                inject: injectionFs
+            };
+    }
+    draw({ uniforms }) {
+        const { clipBounds = defaultProps.clipBounds } = this.props;
+        if (this.state.clipByInstance) {
+            uniforms.clip_bounds = clipBounds;
+        }
+        else {
+            const corner0 = this.projectPosition([clipBounds[0], clipBounds[1], 0]);
+            const corner1 = this.projectPosition([clipBounds[2], clipBounds[3], 0]);
+            uniforms.clip_bounds = [
+                Math.min(corner0[0], corner1[0]),
+                Math.min(corner0[1], corner1[1]),
+                Math.max(corner0[0], corner1[0]),
+                Math.max(corner0[1], corner1[1])
+            ];
+        }
+    }
+}
+ClipExtension.extensionName = 'ClipExtension';
+ClipExtension.defaultProps = defaultProps;

package/typed/data-filter/aggregator.d.ts

@@ -1,10 +1,11 @@
-export function supportsFloatTarget(gl: any): any;
-export function getFramebuffer(gl: any, useFloatTarget: any): any;
-export function getModel(gl: any, shaderOptions: any, useFloatTarget: any): any;
-export namespace parameters {
-    const blend: boolean;
-    const blendFunc: number[];
-    const blendEquation: number[];
-    const depthTest: boolean;
-}
+import { Model, Framebuffer } from '@luma.gl/core';
+export declare function supportsFloatTarget(gl: WebGLRenderingContext): boolean;
+export declare function getFramebuffer(gl: WebGLRenderingContext, useFloatTarget: boolean): Framebuffer;
+export declare function getModel(gl: WebGLRenderingContext, shaderOptions: any, useFloatTarget: boolean): Model;
+export declare const parameters: {
+    blend: boolean;
+    blendFunc: number[];
+    blendEquation: number[];
+    depthTest: boolean;
+};
 //# sourceMappingURL=aggregator.d.ts.map

package/typed/data-filter/aggregator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"aggregator.d.ts","sourceRoot":"","sources":["../../src/data-filter/aggregator.js"],"names":[],"mappings":"AAkDA,kDASC;AAGD,kEAmBC;AAGD,gFAeC"}
+{"version":3,"file":"aggregator.d.ts","sourceRoot":"","sources":["../../src/data-filter/aggregator.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,KAAK,EAAa,WAAW,EAAW,MAAM,eAAe,CAAC;AAkDtE,wBAAgB,mBAAmB,CAAC,EAAE,EAAE,qBAAqB,GAAG,OAAO,CAStE;AAGD,wBAAgB,cAAc,CAAC,EAAE,EAAE,qBAAqB,EAAE,cAAc,EAAE,OAAO,GAAG,WAAW,CAmB9F;AAGD,wBAAgB,QAAQ,CACtB,EAAE,EAAE,qBAAqB,EACzB,aAAa,EAAE,GAAG,EAClB,cAAc,EAAE,OAAO,GACtB,KAAK,CAeP;AAED,eAAO,MAAM,UAAU;;;;;CAKtB,CAAC"}

package/typed/data-filter/aggregator.js

@@ -0,0 +1,98 @@
+import { Model, Texture2D, Framebuffer, isWebGL2 } from '@luma.gl/core';
+import GL from '@luma.gl/constants';
+const AGGREGATE_VS = `\
+#define SHADER_NAME data-filter-vertex-shader
+
+#ifdef FLOAT_TARGET
+  attribute float filterIndices;
+  attribute float filterPrevIndices;
+#else
+  attribute vec2 filterIndices;
+  attribute vec2 filterPrevIndices;
+#endif
+
+varying vec4 vColor;
+const float component = 1.0 / 255.0;
+
+void main() {
+  #ifdef FLOAT_TARGET
+    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
+    // Float texture is not supported: pack result into 4 channels x 256 px x 64px
+    dataFilter_value *= float(filterIndices.x != filterPrevIndices.x);
+    float col = filterIndices.x;
+    float row = filterIndices.y * 4.0;
+    float channel = floor(row);
+    row = fract(row);
+    vColor = component * vec4(bvec4(channel == 0.0, channel == 1.0, channel == 2.0, channel == 3.0));
+    gl_Position = vec4(col * 2.0 - 1.0, row * 2.0 - 1.0, 0.0, 1.0);
+  #endif
+  gl_PointSize = 1.0;
+}
+`;
+const AGGREGATE_FS = `\
+#define SHADER_NAME data-filter-fragment-shader
+precision highp float;
+
+varying vec4 vColor;
+
+void main() {
+  if (dataFilter_value < 0.5) {
+    discard;
+  }
+  gl_FragColor = vColor;
+}
+`;
+export function supportsFloatTarget(gl) {
+    // https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/WebGL_best_practices#Support_for_float_textures_doesnt_mean_you_can_render_into_them!
+    return (gl.getExtension('EXT_float_blend') &&
+        // WebGL 2
+        (gl.getExtension('EXT_color_buffer_float') ||
+            // WebGL 1
+            gl.getExtension('WEBGL_color_buffer_float')));
+}
+// A 1x1 framebuffer object that encodes the total count of filtered items
+export function getFramebuffer(gl, useFloatTarget) {
+    if (useFloatTarget) {
+        return new Framebuffer(gl, {
+            width: 1,
+            height: 1,
+            attachments: {
+                [GL.COLOR_ATTACHMENT0]: new Texture2D(gl, {
+                    format: isWebGL2(gl) ? GL.RGBA32F : GL.RGBA,
+                    type: GL.FLOAT,
+                    mipmaps: false
+                })
+            }
+        });
+    }
+    return new Framebuffer(gl, {
+        width: 256,
+        height: 64,
+        depth: false
+    });
+}
+// Increments the counter based on dataFilter_value
+export function getModel(gl, shaderOptions, useFloatTarget) {
+    shaderOptions.defines.NON_INSTANCED_MODEL = 1;
+    if (useFloatTarget) {
+        shaderOptions.defines.FLOAT_TARGET = 1;
+    }
+    return new Model(gl, {
+        id: 'data-filter-aggregation-model',
+        vertexCount: 1,
+        isInstanced: false,
+        drawMode: GL.POINTS,
+        vs: AGGREGATE_VS,
+        fs: AGGREGATE_FS,
+        ...shaderOptions
+    });
+}
+export const parameters = {
+    blend: true,
+    blendFunc: [GL.ONE, GL.ONE, GL.ONE, GL.ONE],
+    blendEquation: [GL.FUNC_ADD, GL.FUNC_ADD],
+    depthTest: false
+};

package/typed/data-filter/data-filter.d.ts

@@ -1,32 +1,90 @@
-declare class DataFilterExtension extends LayerExtension {
-    constructor({ filterSize, fp64, countItems }?: {
-        filterSize?: number | undefined;
-        fp64?: boolean | undefined;
-        countItems?: boolean | undefined;
-    });
-}
-declare namespace DataFilterExtension {
-    export const extensionName: string;
-    export { defaultProps };
-}
-export default DataFilterExtension;
 import { LayerExtension } from '@deck.gl/core/typed';
-declare namespace defaultProps {
-    namespace getFilterValue {
-        const type: string;
-        const value: number;
-    }
-    namespace onFilteredItemsChange {
-        const type_1: string;
-        export { type_1 as type };
-        const value_1: null;
-        export { value_1 as value };
-        export const compare: boolean;
-    }
-    const filterEnabled: boolean;
-    const filterRange: number[];
-    const filterSoftRange: null;
-    const filterTransformSize: boolean;
-    const filterTransformColor: boolean;
+import type { Layer, LayerContext, Accessor, UpdateParameters } from '@deck.gl/core/typed';
+export declare type DataFilterExtensionProps<DataT = any> = {
+    /**
+     * Accessor to retrieve the value for each object that it will be filtered by.
+     * Returns either a number (if `filterSize: 1`) or an array of numbers.
+     */
+    getFilterValue?: Accessor<DataT, number | number[]>;
+    /**
+     * Enable/disable the data filter. If the data filter is disabled, all objects are rendered.
+     * @default true
+     */
+    filterEnabled?: boolean;
+    /**
+     * The [min, max] bounds which defines whether an object should be rendered.
+     * If an object's filtered value is within the bounds, the object will be rendered; otherwise it will be hidden.
+     * @default [-1, 1]
+     */
+    filterRange?: [number, number] | [number, number][];
+    /**
+     * If specified, objects will be faded in/out instead of abruptly shown/hidden.
+     * When the filtered value is outside of the bounds defined by `filterSoftRange` but still within the bounds defined by `filterRange`, the object will be rendered as "faded."
+     * @default null
+     */
+    filterSoftRange?: [number, number] | [number, number][] | null;
+    /**
+     * When an object is "faded", manipulate its size so that it appears smaller or thinner. Only works if `filterSoftRange` is specified.
+     * @default true
+     */
+    filterTransformSize?: boolean;
+    /**
+     * When an object is "faded", manipulate its opacity so that it appears more translucent. Only works if `filterSoftRange` is specified.
+     * @default true
+     */
+    filterTransformColor?: boolean;
+    /**
+     * Only called if the `countItems` option is enabled.
+     */
+    onFilteredItemsChange?: (evt: {
+        /** The id of the source layer. */
+        id: string;
+        /** The number of data objects that pass the filter. */
+        count: number;
+    }) => void;
+};
+declare type DataFilterExtensionOptions = {
+    /**
+     * The size of the filter (number of columns to filter by). The data filter can show/hide data based on 1-4 numeric properties of each object.
+     * @default 1
+     */
+    filterSize: number;
+    /**
+     * Use 64-bit precision instead of 32-bit.
+     * @default false
+     */
+    fp64: boolean;
+    /**
+     * If `true`, reports the number of filtered objects with the `onFilteredItemsChange` callback.
+     * @default `false`.
+     */
+    countItems: boolean;
+};
+/** Adds GPU-based data filtering functionalities to layers. It allows the layer to show/hide objects based on user-defined properties. */
+export default class DataFilterExtension extends LayerExtension<DataFilterExtensionOptions> {
+    static defaultProps: {
+        getFilterValue: {
+            type: string;
+            value: number;
+        };
+        onFilteredItemsChange: {
+            type: string;
+            value: null;
+            compare: boolean;
+        };
+        filterEnabled: boolean;
+        filterRange: number[];
+        filterSoftRange: null;
+        filterTransformSize: boolean;
+        filterTransformColor: boolean;
+    };
+    static extensionName: string;
+    constructor({ filterSize, fp64, countItems }?: Partial<DataFilterExtensionOptions>);
+    getShaders(this: Layer<DataFilterExtensionProps>, extension: this): any;
+    initializeState(this: Layer<DataFilterExtensionProps>, context: LayerContext, extension: this): void;
+    updateState(this: Layer<DataFilterExtensionProps>, { props, oldProps }: UpdateParameters<Layer<DataFilterExtensionProps>>): void;
+    draw(this: Layer<DataFilterExtensionProps>, params: any, extension: this): void;
+    finalizeState(this: Layer<DataFilterExtensionProps>): void;
 }
+export {};
 //# sourceMappingURL=data-filter.d.ts.map

package/typed/data-filter/data-filter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"data-filter.d.ts","sourceRoot":"","sources":["../../src/data-filter/data-filter.js"],"names":[],"mappings":"AA4CA;IACE;;;;OAMC;CA6HF"}
+{"version":3,"file":"data-filter.d.ts","sourceRoot":"","sources":["../../src/data-filter/data-filter.ts"],"names":[],"mappings":"AAoBA,OAAO,EAAC,cAAc,EAAC,MAAM,eAAe,CAAC;AAM7C,OAAO,KAAK,EAAC,KAAK,EAAE,YAAY,EAAE,QAAQ,EAAE,gBAAgB,EAAC,MAAM,eAAe,CAAC;AAanF,oBAAY,wBAAwB,CAAC,KAAK,GAAG,GAAG,IAAI;IAClD;;;OAGG;IACH,cAAc,CAAC,EAAE,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC,CAAC;IACpD;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;OAIG;IACH,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,CAAC;IACpD;;;;OAIG;IACH,eAAe,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,GAAG,IAAI,CAAC;IAC/D;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;OAGG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;OAEG;IACH,qBAAqB,CAAC,EAAE,CAAC,GAAG,EAAE;QAC5B,kCAAkC;QAClC,EAAE,EAAE,MAAM,CAAC;QACX,uDAAuD;QACvD,KAAK,EAAE,MAAM,CAAC;KACf,KAAK,IAAI,CAAC;CACZ,CAAC;AAEF,aAAK,0BAA0B,GAAG;IAChC;;;OAGG;IACH,UAAU,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,IAAI,EAAE,OAAO,CAAC;IACd;;;OAGG;IACH,UAAU,EAAE,OAAO,CAAC;CACrB,CAAC;AASF,0IAA0I;AAC1I,MAAM,CAAC,OAAO,OAAO,mBAAoB,SAAQ,cAAc,CAAC,0BAA0B,CAAC;IACzF,MAAM,CAAC,YAAY;;;;;;;;;;;;;;;MAAgB;IACnC,MAAM,CAAC,aAAa,SAAyB;gBAEjC,EACV,UAAc,EACd,IAAY,EACZ,UAAkB,EACnB,GAAE,OAAO,CAAC,0BAA0B,CAAM;IAQ3C,UAAU,CAAC,IAAI,EAAE,KAAK,CAAC,wBAAwB,CAAC,EAAE,SAAS,EAAE,IAAI,GAAG,GAAG;IAYvE,eAAe,CAAC,IAAI,EAAE,KAAK,CAAC,wBAAwB,CAAC,EAAE,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,IAAI;IAyD7F,WAAW,CACT,IAAI,EAAE,KAAK,CAAC,wBAAwB,CAAC,EACrC,EAAC,KAAK,EAAE,QAAQ,EAAC,EAAE,gBAAgB,CAAC,KAAK,CAAC,wBAAwB,CAAC,CAAC;IAgBtE,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC,wBAAwB,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI;IAoCxE,aAAa,CAAC,IAAI,EAAE,KAAK,CAAC,wBAAwB,CAAC;CAQpD"}

package/typed/data-filter/data-filter.js

@@ -0,0 +1,159 @@
+// 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 { LayerExtension } from '@deck.gl/core';
+import { shaderModule, shaderModule64 } from './shader-module';
+import * as aggregator from './aggregator';
+import { readPixelsToArray, clear } from '@luma.gl/core';
+import GL from '@luma.gl/constants';
+const defaultProps = {
+    getFilterValue: { type: 'accessor', value: 0 },
+    onFilteredItemsChange: { type: 'function', value: null, compare: false },
+    filterEnabled: true,
+    filterRange: [-1, 1],
+    filterSoftRange: null,
+    filterTransformSize: true,
+    filterTransformColor: true
+};
+const DATA_TYPE_FROM_SIZE = {
+    1: 'float',
+    2: 'vec2',
+    3: 'vec3',
+    4: 'vec4'
+};
+export default class DataFilterExtension extends LayerExtension {
+    constructor({ filterSize = 1, fp64 = false, countItems = false } = {}) {
+        if (!DATA_TYPE_FROM_SIZE[filterSize]) {
+            throw new Error('filterSize out of range');
+        }
+        super({ filterSize, fp64, countItems });
+    }
+    getShaders(extension) {
+        const { filterSize, fp64 } = extension.opts;
+        return {
+            modules: [fp64 ? shaderModule64 : shaderModule],
+            defines: {
+                DATAFILTER_TYPE: DATA_TYPE_FROM_SIZE[filterSize],
+                DATAFILTER_DOUBLE: Boolean(fp64)
+            }
+        };
+    }
+    initializeState(context, extension) {
+        const attributeManager = this.getAttributeManager();
+        if (attributeManager) {
+            attributeManager.add({
+                filterValues: {
+                    size: extension.opts.filterSize,
+                    type: extension.opts.fp64 ? GL.DOUBLE : GL.FLOAT,
+                    accessor: 'getFilterValue',
+                    shaderAttributes: {
+                        filterValues: {
+                            divisor: 0
+                        },
+                        instanceFilterValues: {
+                            divisor: 1
+                        }
+                    }
+                }
+            });
+        }
+        const { gl } = this.context;
+        if (attributeManager && extension.opts.countItems) {
+            const useFloatTarget = aggregator.supportsFloatTarget(gl);
+            // This attribute is needed for variable-width data, e.g. Path, SolidPolygon, Text
+            // The vertex shader checks if a vertex has the same "index" as the previous vertex
+            // so that we only write one count cross multiple vertices of the same object
+            attributeManager.add({
+                filterIndices: {
+                    size: useFloatTarget ? 1 : 2,
+                    vertexOffset: 1,
+                    type: GL.UNSIGNED_BYTE,
+                    normalized: true,
+                    accessor: (object, { index }) => {
+                        const i = object && object.__source ? object.__source.index : index;
+                        return useFloatTarget ? (i + 1) % 255 : [(i + 1) % 255, Math.floor(i / 255) % 255];
+                    },
+                    shaderAttributes: {
+                        filterPrevIndices: {
+                            vertexOffset: 0
+                        },
+                        filterIndices: {
+                            vertexOffset: 1
+                        }
+                    }
+                }
+            });
+            const filterFBO = aggregator.getFramebuffer(gl, useFloatTarget);
+            const filterModel = aggregator.getModel(gl, extension.getShaders(extension), useFloatTarget);
+            this.setState({ filterFBO, filterModel });
+        }
+    }
+    updateState({ props, oldProps }) {
+        if (this.state.filterModel) {
+            const attributeManager = this.getAttributeManager();
+            const filterNeedsUpdate = attributeManager.attributes.filterValues.needsUpdate() ||
+                props.filterEnabled !== oldProps.filterEnabled ||
+                props.filterRange !== oldProps.filterRange ||
+                props.filterSoftRange !== oldProps.filterSoftRange;
+            if (filterNeedsUpdate) {
+                this.setState({ filterNeedsUpdate });
+            }
+        }
+    }
+    draw(params, extension) {
+        const { filterFBO, filterModel, filterNeedsUpdate } = this.state;
+        const { onFilteredItemsChange } = this.props;
+        if (filterNeedsUpdate && onFilteredItemsChange && filterModel) {
+            const { attributes: { filterValues, filterIndices } } = this.getAttributeManager();
+            filterModel.setVertexCount(this.getNumInstances());
+            const { gl } = this.context;
+            clear(gl, { framebuffer: filterFBO, color: [0, 0, 0, 0] });
+            filterModel
+                .updateModuleSettings(params.moduleParameters)
+                .setAttributes({
+                ...filterValues.getShaderAttributes(),
+                ...(filterIndices && filterIndices.getShaderAttributes())
+            })
+                .draw({
+                framebuffer: filterFBO,
+                parameters: {
+                    ...aggregator.parameters,
+                    viewport: [0, 0, filterFBO.width, filterFBO.height]
+                }
+            });
+            const color = readPixelsToArray(filterFBO);
+            let count = 0;
+            for (let i = 0; i < color.length; i++) {
+                count += color[i];
+            }
+            onFilteredItemsChange({ id: this.id, count });
+            this.state.filterNeedsUpdate = false;
+        }
+    }
+    finalizeState() {
+        const { filterFBO, filterModel } = this.state;
+        if (filterFBO) {
+            filterFBO.color.delete();
+            filterFBO.delete();
+            filterModel.delete();
+        }
+    }
+}
+DataFilterExtension.extensionName = 'DataFilterExtension';
+DataFilterExtension.defaultProps = defaultProps;

package/typed/data-filter/shader-module.d.ts

@@ -1,26 +1,9 @@
-export namespace shaderModule {
-    export const name: string;
-    export { vs };
-    export { fs };
-    export { inject };
-    export { getUniforms };
-}
-export namespace shaderModule64 {
-    const name_1: string;
-    export { name_1 as name };
-    export { vs };
-    export { fs };
-    export { inject };
-    export { getUniforms64 as getUniforms };
-}
-declare const vs: "\nuniform DATAFILTER_TYPE filter_min;\nuniform DATAFILTER_TYPE filter_softMin;\nuniform DATAFILTER_TYPE filter_softMax;\nuniform DATAFILTER_TYPE filter_max;\nuniform bool filter_useSoftMargin;\nuniform bool filter_enabled;\nuniform bool filter_transformSize;\n\n#ifdef NON_INSTANCED_MODEL\n  #define DATAFILTER_ATTRIB filterValues\n  #define DATAFILTER_ATTRIB_64LOW filterValues64Low\n#else\n  #define DATAFILTER_ATTRIB instanceFilterValues\n  #define DATAFILTER_ATTRIB_64LOW instanceFilterValues64Low\n#endif\n\nattribute DATAFILTER_TYPE DATAFILTER_ATTRIB;\n#ifdef DATAFILTER_DOUBLE\n  attribute DATAFILTER_TYPE DATAFILTER_ATTRIB_64LOW;\n\n  uniform DATAFILTER_TYPE filter_min64High;\n  uniform DATAFILTER_TYPE filter_max64High;\n#endif\n\nvarying float dataFilter_value;\n\nfloat dataFilter_reduceValue(float value) {\n  return value;\n}\nfloat dataFilter_reduceValue(vec2 value) {\n  return min(value.x, value.y);\n}\nfloat dataFilter_reduceValue(vec3 value) {\n  return min(min(value.x, value.y), value.z);\n}\nfloat dataFilter_reduceValue(vec4 value) {\n  return min(min(value.x, value.y), min(value.z, value.w));\n}\nvoid dataFilter_setValue(DATAFILTER_TYPE valueFromMin, DATAFILTER_TYPE valueFromMax) {\n  if (filter_enabled) {\n    if (filter_useSoftMargin) {\n      dataFilter_value = dataFilter_reduceValue(\n        smoothstep(filter_min, filter_softMin, valueFromMin) *\n        (1.0 - smoothstep(filter_softMax, filter_max, valueFromMax))\n      );\n    } else {\n      dataFilter_value = dataFilter_reduceValue(\n        step(filter_min, valueFromMin) * step(valueFromMax, filter_max)\n      );\n    }\n  } else {\n    dataFilter_value = 1.0;\n  }\n}\n";
-declare const fs: "\nuniform bool filter_transformColor;\nvarying float dataFilter_value;\n";
-declare const inject: {
-    'vs:#main-start': string;
-    'vs:DECKGL_FILTER_SIZE': string;
-    'fs:DECKGL_FILTER_COLOR': string;
-};
-declare function getUniforms(opts: any): {};
-declare function getUniforms64(opts: any): {};
+import { _ShaderModule as ShaderModule } from '@deck.gl/core/typed';
+import type { DataFilterExtensionProps } from './data-filter';
+declare type DataFilterModuleSettings = {
+    extensions: any[];
+} & DataFilterExtensionProps;
+export declare const shaderModule: ShaderModule<DataFilterModuleSettings>;
+export declare const shaderModule64: ShaderModule<DataFilterModuleSettings>;
 export {};
 //# sourceMappingURL=shader-module.d.ts.map

package/typed/data-filter/shader-module.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"shader-module.d.ts","sourceRoot":"","sources":["../../src/data-filter/shader-module.js"],"names":[],"mappings":";;;;;;;;;;;;;;;AAGA,upDAuDE;AAEF,6FAGE;AAgEF;;;;EAwBE;AAtFF,4CA+BC;AAED,8CA2BC"}
+{"version":3,"file":"shader-module.d.ts","sourceRoot":"","sources":["../../src/data-filter/shader-module.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,aAAa,IAAI,YAAY,EAAC,MAAM,qBAAqB,CAAC;AAElE,OAAO,KAAK,EAAC,wBAAwB,EAAC,MAAM,eAAe,CAAC;AAmE5D,aAAK,wBAAwB,GAAG;IAC9B,UAAU,EAAE,GAAG,EAAE,CAAC;CACnB,GAAG,wBAAwB,CAAC;AA2F7B,eAAO,MAAM,YAAY,EAAE,YAAY,CAAC,wBAAwB,CAM/D,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,YAAY,CAAC,wBAAwB,CAMjE,CAAC"}