@deck.gl/extensions 9.0.0-beta.3 → 9.0.0-beta.5

package/dist/brushing/shader-module.d.ts

@@ -1,6 +1,6 @@
 import type { ShaderModule } from '@luma.gl/shadertools';
 import type { Viewport } from '@deck.gl/core';
-import type { BrushingExtensionProps } from './brushing-extension';
+import type { BrushingExtensionProps } from "./brushing-extension.js";
 type BrushingModuleSettings = {
     viewport: Viewport;
     mousePosition?: {

package/dist/brushing/shader-module.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"shader-module.d.ts","sourceRoot":"","sources":["../../src/brushing/shader-module.ts"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,sBAAsB,CAAC;AAEvD,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,eAAe,CAAC;AAE5C,OAAO,KAAK,EAAC,sBAAsB,EAAC,MAAM,sBAAsB,CAAC;AAEjE,KAAK,sBAAsB,GAAG;IAE5B,QAAQ,EAAE,QAAQ,CAAC;IACnB,aAAa,CAAC,EAAE;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAC,CAAC;CACxC,GAAG,sBAAsB,CAAC;;AAkF3B,wBA4B0C"}
+{"version":3,"file":"shader-module.d.ts","sourceRoot":"","sources":["../../src/brushing/shader-module.ts"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,sBAAsB,CAAC;AAEvD,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,eAAe,CAAC;AAE5C,OAAO,KAAK,EAAC,sBAAsB,EAAC,gCAA6B;AAEjE,KAAK,sBAAsB,GAAG;IAE5B,QAAQ,EAAE,QAAQ,CAAC;IACnB,aAAa,CAAC,EAAE;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAC,CAAC;CACxC,GAAG,sBAAsB,CAAC;;AAkF3B,wBA4B0C"}

package/dist/data-filter/data-filter-extension.d.ts

@@ -1,11 +1,17 @@
 import type { Layer, LayerContext, Accessor, UpdateParameters } from '@deck.gl/core';
 import { LayerExtension } from '@deck.gl/core';
+type FilterCategory = number | string;
 export 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[]>;
+    /**
+     * Accessor to retrieve the category (`number | string`) for each object that it will be filtered by.
+     * Returns either a single category (if `filterSize: 1`) or an array of categories.
+     */
+    getFilterCategory?: Accessor<DataT, FilterCategory | FilterCategory[]>;
     /**
      * Enable/disable the data filter. If the data filter is disabled, all objects are rendered.
      * @default true
@@ -33,6 +39,11 @@ export type DataFilterExtensionProps<DataT = any> = {
      * @default true
      */
     filterTransformColor?: boolean;
+    /**
+     * The categories which define whether an object should be rendered.
+     * @default []
+     */
+    filterCategories: FilterCategory[] | FilterCategory[][];
     /**
      * Only called if the `countItems` option is enabled.
      */
@@ -44,29 +55,38 @@ export type DataFilterExtensionProps<DataT = any> = {
     }) => void;
 };
 type DataFilterExtensionOptions = {
+    /**
+     * The size of the category filter (number of columns to filter by). The category filter can show/hide data based on 1-4 properties of each object.
+     * @default 1
+     */
+    categorySize?: 1 | 2 | 3 | 4;
     /**
      * 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;
+    filterSize?: 1 | 2 | 3 | 4;
     /**
      * Use 64-bit precision instead of 32-bit.
      * @default false
      */
-    fp64: boolean;
+    fp64?: boolean;
     /**
      * If `true`, reports the number of filtered objects with the `onFilteredItemsChange` callback.
      * @default `false`.
      */
-    countItems: boolean;
+    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> {
+export default class DataFilterExtension extends LayerExtension<Required<DataFilterExtensionOptions>> {
     static defaultProps: {
         getFilterValue: {
             type: string;
             value: number;
         };
+        getFilterCategory: {
+            type: string;
+            value: number;
+        };
         onFilteredItemsChange: {
             type: string;
             value: null;
@@ -75,16 +95,28 @@ export default class DataFilterExtension extends LayerExtension<DataFilterExtens
         filterEnabled: boolean;
         filterRange: number[];
         filterSoftRange: null;
+        filterCategories: number[];
         filterTransformSize: boolean;
         filterTransformColor: boolean;
     };
     static extensionName: string;
-    constructor({ filterSize, fp64, countItems }?: Partial<DataFilterExtensionOptions>);
+    constructor(opts: 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;
+    updateState(this: Layer<DataFilterExtensionProps>, { props, oldProps, changeFlags }: UpdateParameters<Layer<DataFilterExtensionProps>>, extension: this): void;
     draw(this: Layer<DataFilterExtensionProps>, params: any, extension: this): void;
     finalizeState(this: Layer<DataFilterExtensionProps>): void;
+    /**
+     * Updates the bitmask used on the GPU to perform the filter based on the
+     * `filterCategories` prop. The mapping between categories and bit in the bitmask
+     * is performed by `_getCategoryKey()`
+     */
+    _updateCategoryBitMask(this: Layer<DataFilterExtensionProps>, params: any, extension: this): void;
+    /**
+     * Returns an index of bit in the bitmask for a given category. If the category has
+     * not yet been assigned a bit, a new one is assigned.
+     */
+    _getCategoryKey(this: Layer<DataFilterExtensionProps>, category: FilterCategory, channel: number): number;
 }
 export {};
 //# sourceMappingURL=data-filter-extension.d.ts.map

package/dist/data-filter/data-filter-extension.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"data-filter-extension.d.ts","sourceRoot":"","sources":["../../src/data-filter/data-filter-extension.ts"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EAAC,KAAK,EAAE,YAAY,EAAE,QAAQ,EAAE,gBAAgB,EAAC,MAAM,eAAe,CAAC;AACnF,OAAO,EAAC,cAAc,EAAC,MAAM,eAAe,CAAC;AAe7C,MAAM,MAAM,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,KAAK,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;IA0CxE,aAAa,CAAC,IAAI,EAAE,KAAK,CAAC,wBAAwB,CAAC;CAQpD"}
+{"version":3,"file":"data-filter-extension.d.ts","sourceRoot":"","sources":["../../src/data-filter/data-filter-extension.ts"],"names":[],"mappings":"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"}

package/dist/data-filter/data-filter-extension.js

@@ -18,18 +18,26 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 import { GL } from '@luma.gl/constants';
-import { LayerExtension } from '@deck.gl/core';
+import { _deepEqual as deepEqual, LayerExtension, log } from '@deck.gl/core';
 import { shaderModule, shaderModule64 } from "./shader-module.js";
 import * as aggregator from "./aggregator.js";
 const defaultProps = {
     getFilterValue: { type: 'accessor', value: 0 },
+    getFilterCategory: { type: 'accessor', value: 0 },
     onFilteredItemsChange: { type: 'function', value: null, optional: true },
     filterEnabled: true,
     filterRange: [-1, 1],
     filterSoftRange: null,
+    filterCategories: [0],
     filterTransformSize: true,
     filterTransformColor: true
 };
+const defaultOptions = {
+    categorySize: 1,
+    filterSize: 1,
+    fp64: false,
+    countItems: false
+};
 const DATA_TYPE_FROM_SIZE = {
     1: 'float',
     2: 'vec2',
@@ -40,17 +48,16 @@ const DATA_TYPE_FROM_SIZE = {
 export default class DataFilterExtension extends LayerExtension {
     static { this.defaultProps = defaultProps; }
     static { this.extensionName = 'DataFilterExtension'; }
-    constructor({ filterSize = 1, fp64 = false, countItems = false } = {}) {
-        if (!DATA_TYPE_FROM_SIZE[filterSize]) {
-            throw new Error('filterSize out of range');
-        }
-        super({ filterSize, fp64, countItems });
+    constructor(opts) {
+        super({ ...defaultOptions, ...opts });
     }
     getShaders(extension) {
-        const { filterSize, fp64 } = extension.opts;
+        const { categorySize, filterSize, fp64 } = extension.opts;
         return {
             modules: [fp64 ? shaderModule64 : shaderModule],
             defines: {
+                DATACATEGORY_TYPE: DATA_TYPE_FROM_SIZE[categorySize],
+                DATACATEGORY_CHANNELS: categorySize,
                 DATAFILTER_TYPE: DATA_TYPE_FROM_SIZE[filterSize],
                 DATAFILTER_DOUBLE: Boolean(fp64)
             }
@@ -58,11 +65,12 @@ export default class DataFilterExtension extends LayerExtension {
     }
     initializeState(context, extension) {
         const attributeManager = this.getAttributeManager();
+        const { categorySize, filterSize, fp64 } = extension.opts;
         if (attributeManager) {
             attributeManager.add({
                 filterValues: {
-                    size: extension.opts.filterSize,
-                    type: extension.opts.fp64 ? GL.DOUBLE : GL.FLOAT,
+                    size: filterSize,
+                    type: fp64 ? GL.DOUBLE : GL.FLOAT,
                     accessor: 'getFilterValue',
                     shaderAttributes: {
                         filterValues: {
@@ -72,6 +80,22 @@ export default class DataFilterExtension extends LayerExtension {
                             divisor: 1
                         }
                     }
+                },
+                filterCategoryValues: {
+                    size: categorySize,
+                    type: GL.FLOAT,
+                    accessor: 'getFilterCategory',
+                    transform: categorySize === 1
+                        ? d => extension._getCategoryKey.call(this, d, 0)
+                        : d => d.map((x, i) => extension._getCategoryKey.call(this, x, i)),
+                    shaderAttributes: {
+                        filterCategoryValues: {
+                            divisor: 0
+                        },
+                        instanceFilterCategoryValues: {
+                            divisor: 1
+                        }
+                    }
                 }
             });
         }
@@ -106,35 +130,62 @@ export default class DataFilterExtension extends LayerExtension {
             this.setState({ filterFBO, filterModel });
         }
     }
-    updateState({ props, oldProps }) {
+    updateState({ props, oldProps, changeFlags }, extension) {
+        const attributeManager = this.getAttributeManager();
+        const { categorySize } = extension.opts;
         if (this.state.filterModel) {
-            const attributeManager = this.getAttributeManager();
             const filterNeedsUpdate = 
             // attributeManager must be defined for filterModel to be set
             attributeManager.attributes.filterValues.needsUpdate() ||
+                attributeManager.attributes.filterCategoryValues?.needsUpdate() ||
                 props.filterEnabled !== oldProps.filterEnabled ||
                 props.filterRange !== oldProps.filterRange ||
-                props.filterSoftRange !== oldProps.filterSoftRange;
+                props.filterSoftRange !== oldProps.filterSoftRange ||
+                props.filterCategories !== oldProps.filterCategories;
             if (filterNeedsUpdate) {
                 this.setState({ filterNeedsUpdate });
             }
         }
+        if (attributeManager?.attributes.filterCategoryValues) {
+            // Update bitmask if accessor or selected categories has changed
+            const categoryBitMaskNeedsUpdate = attributeManager.attributes.filterCategoryValues.needsUpdate() ||
+                !deepEqual(props.filterCategories, oldProps.filterCategories, 2);
+            if (categoryBitMaskNeedsUpdate) {
+                this.setState({ categoryBitMaskNeedsUpdate });
+            }
+            // Need to recreate category map if categorySize has changed
+            const resetCategories = changeFlags.dataChanged;
+            if (resetCategories) {
+                this.setState({
+                    categoryMap: Array(categorySize)
+                        .fill(0)
+                        .map(() => ({}))
+                });
+                attributeManager.attributes.filterCategoryValues.setNeedsUpdate('categoryMap');
+            }
+        }
     }
     draw(params, extension) {
         const filterFBO = this.state.filterFBO;
         const filterModel = this.state.filterModel;
         const filterNeedsUpdate = this.state.filterNeedsUpdate;
+        const categoryBitMaskNeedsUpdate = this.state.categoryBitMaskNeedsUpdate;
         const { onFilteredItemsChange } = this.props;
+        if (categoryBitMaskNeedsUpdate) {
+            extension._updateCategoryBitMask.call(this, params, extension);
+        }
         if (filterNeedsUpdate && onFilteredItemsChange && filterModel) {
-            const { attributes: { filterValues, filterIndices } } = this.getAttributeManager();
+            const { attributes: { filterValues, filterCategoryValues, filterIndices } } = this.getAttributeManager();
             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({
                 ...filterValues.getValue(),
+                ...filterCategoryValues?.getValue(),
                 ...filterIndices?.getValue()
             });
+            filterModel.setUniforms(params.uniforms);
             filterModel.device.withParametersWebGL({
                 framebuffer: filterFBO,
                 // ts-ignore 'readonly' cannot be assigned to the mutable type '[GLBlendEquation, GLBlendEquation]'
@@ -159,4 +210,43 @@ export default class DataFilterExtension extends LayerExtension {
         filterFBO?.destroy();
         filterModel?.destroy();
     }
+    /**
+     * Updates the bitmask used on the GPU to perform the filter based on the
+     * `filterCategories` prop. The mapping between categories and bit in the bitmask
+     * is performed by `_getCategoryKey()`
+     */
+    _updateCategoryBitMask(params, extension) {
+        const { categorySize } = extension.opts;
+        const { filterCategories } = this.props;
+        const categoryBitMask = new Uint32Array([0, 0, 0, 0]);
+        const categoryFilters = (categorySize === 1 ? [filterCategories] : filterCategories);
+        const maxCategories = categorySize === 1 ? 128 : categorySize === 2 ? 64 : 32;
+        for (let c = 0; c < categoryFilters.length; c++) {
+            const categoryFilter = categoryFilters[c];
+            for (const category of categoryFilter) {
+                const key = extension._getCategoryKey.call(this, category, c);
+                if (key < maxCategories) {
+                    const channel = c * (maxCategories / 32) + Math.floor(key / 32);
+                    categoryBitMask[channel] += Math.pow(2, key % 32); // 1 << key fails for key > 30
+                }
+                else {
+                    log.warn(`Exceeded maximum number of categories (${maxCategories})`)();
+                }
+            }
+        }
+        /* eslint-disable-next-line camelcase */
+        params.uniforms.filter_categoryBitMask = categoryBitMask;
+        this.state.categoryBitMaskNeedsUpdate = false;
+    }
+    /**
+     * Returns an index of bit in the bitmask for a given category. If the category has
+     * not yet been assigned a bit, a new one is assigned.
+     */
+    _getCategoryKey(category, channel) {
+        const categoryMap = this.state.categoryMap[channel];
+        if (!(category in categoryMap)) {
+            categoryMap[category] = Object.keys(categoryMap).length;
+        }
+        return categoryMap[category];
+    }
 }

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

@@ -1,5 +1,5 @@
 import type { ShaderModule } from '@luma.gl/shadertools';
-import type { DataFilterExtensionProps } from './data-filter-extension';
+import type { DataFilterExtensionProps } from "./data-filter-extension.js";
 type DataFilterModuleSettings = {
     extensions: any[];
 } & DataFilterExtensionProps;

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

@@ -1 +1 @@
-{"version":3,"file":"shader-module.d.ts","sourceRoot":"","sources":["../../src/data-filter/shader-module.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,sBAAsB,CAAC;AACvD,OAAO,KAAK,EAAC,wBAAwB,EAAC,MAAM,yBAAyB,CAAC;AAmEtE,KAAK,wBAAwB,GAAG;IAC9B,UAAU,EAAE,GAAG,EAAE,CAAC;CACnB,GAAG,wBAAwB,CAAC;AAiG7B,eAAO,MAAM,YAAY,EAAE,YAAY,CAAC,wBAAwB,CAM/D,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,YAAY,CAAC,wBAAwB,CAMjE,CAAC"}
+{"version":3,"file":"shader-module.d.ts","sourceRoot":"","sources":["../../src/data-filter/shader-module.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,sBAAsB,CAAC;AACvD,OAAO,KAAK,EAAC,wBAAwB,EAAC,mCAAgC;AA8FtE,KAAK,wBAAwB,GAAG;IAC9B,UAAU,EAAE,GAAG,EAAE,CAAC;CACnB,GAAG,wBAAwB,CAAC;AAkG7B,eAAO,MAAM,YAAY,EAAE,YAAY,CAAC,wBAAwB,CAM/D,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,YAAY,CAAC,wBAAwB,CAMjE,CAAC"}

package/dist/data-filter/shader-module.js

@@ -9,13 +9,16 @@ uniform DATAFILTER_TYPE filter_max;
 uniform bool filter_useSoftMargin;
 uniform bool filter_enabled;
 uniform bool filter_transformSize;
+uniform ivec4 filter_categoryBitMask;
 
 #ifdef NON_INSTANCED_MODEL
   #define DATAFILTER_ATTRIB filterValues
   #define DATAFILTER_ATTRIB_64LOW filterValues64Low
+  #define DATACATEGORY_ATTRIB filterCategoryValues
 #else
   #define DATAFILTER_ATTRIB instanceFilterValues
   #define DATAFILTER_ATTRIB_64LOW instanceFilterValues64Low
+  #define DATACATEGORY_ATTRIB instanceFilterCategoryValues
 #endif
 
 in DATAFILTER_TYPE DATAFILTER_ATTRIB;
@@ -25,6 +28,7 @@ in DATAFILTER_TYPE DATAFILTER_ATTRIB;
   uniform DATAFILTER_TYPE filter_min64High;
   uniform DATAFILTER_TYPE filter_max64High;
 #endif
+in DATACATEGORY_TYPE DATACATEGORY_ATTRIB;
 
 out float dataFilter_value;
 
@@ -40,7 +44,7 @@ float dataFilter_reduceValue(vec3 value) {
 float dataFilter_reduceValue(vec4 value) {
   return min(min(value.x, value.y), min(value.z, value.w));
 }
-void dataFilter_setValue(DATAFILTER_TYPE valueFromMin, DATAFILTER_TYPE valueFromMax) {
+void dataFilter_setValue(DATAFILTER_TYPE valueFromMin, DATAFILTER_TYPE valueFromMax, DATACATEGORY_TYPE category) {
   if (filter_enabled) {
     if (filter_useSoftMargin) {
       dataFilter_value = dataFilter_reduceValue(
@@ -52,6 +56,29 @@ void dataFilter_setValue(DATAFILTER_TYPE valueFromMin, DATAFILTER_TYPE valueFrom
         step(filter_min, valueFromMin) * step(valueFromMax, filter_max)
       );
     }
+
+    #if DATACATEGORY_CHANNELS == 1 // One 128-bit mask
+      int dataFilter_masks = filter_categoryBitMask[int(category / 32.0)];
+    #elif DATACATEGORY_CHANNELS == 2 // Two 64-bit masks
+      ivec2 dataFilter_masks = ivec2(
+        filter_categoryBitMask[int(category.x / 32.0)],
+        filter_categoryBitMask[int(category.y / 32.0) + 2]
+      );
+    #elif DATACATEGORY_CHANNELS == 3 // Three 32-bit masks
+      ivec3 dataFilter_masks = filter_categoryBitMask.xyz;
+    #else // Four 32-bit masks
+      ivec4 dataFilter_masks = filter_categoryBitMask;
+    #endif
+
+    // Shift mask and extract relevant bits
+    DATACATEGORY_TYPE dataFilter_bits = DATACATEGORY_TYPE(dataFilter_masks) / pow(DATACATEGORY_TYPE(2.0), mod(category, 32.0));
+    dataFilter_bits = mod(floor(dataFilter_bits), 2.0);
+
+    #if DATACATEGORY_CHANNELS == 1
+      if(dataFilter_bits == 0.0) dataFilter_value = 0.0;
+    #else
+    if(any(equal(dataFilter_bits, DATACATEGORY_TYPE(0.0)))) dataFilter_value = 0.0;
+    #endif
   } else {
     dataFilter_value = 1.0;
   }
@@ -120,10 +147,11 @@ const inject = {
     #ifdef DATAFILTER_DOUBLE
       dataFilter_setValue(
         DATAFILTER_ATTRIB - filter_min64High + DATAFILTER_ATTRIB_64LOW,
-        DATAFILTER_ATTRIB - filter_max64High + DATAFILTER_ATTRIB_64LOW
+        DATAFILTER_ATTRIB - filter_max64High + DATAFILTER_ATTRIB_64LOW,
+        DATACATEGORY_ATTRIB
       );
     #else
-      dataFilter_setValue(DATAFILTER_ATTRIB, DATAFILTER_ATTRIB);
+      dataFilter_setValue(DATAFILTER_ATTRIB, DATAFILTER_ATTRIB, DATACATEGORY_ATTRIB);
     #endif
   `,
     'vs:#main-end': `

package/dist/dist.dev.js

@@ -916,13 +916,16 @@ uniform DATAFILTER_TYPE filter_max;
 uniform bool filter_useSoftMargin;
 uniform bool filter_enabled;
 uniform bool filter_transformSize;
+uniform ivec4 filter_categoryBitMask;
 
 #ifdef NON_INSTANCED_MODEL
   #define DATAFILTER_ATTRIB filterValues
   #define DATAFILTER_ATTRIB_64LOW filterValues64Low
+  #define DATACATEGORY_ATTRIB filterCategoryValues
 #else
   #define DATAFILTER_ATTRIB instanceFilterValues
   #define DATAFILTER_ATTRIB_64LOW instanceFilterValues64Low
+  #define DATACATEGORY_ATTRIB instanceFilterCategoryValues
 #endif
 
 in DATAFILTER_TYPE DATAFILTER_ATTRIB;
@@ -932,6 +935,7 @@ in DATAFILTER_TYPE DATAFILTER_ATTRIB;
   uniform DATAFILTER_TYPE filter_min64High;
   uniform DATAFILTER_TYPE filter_max64High;
 #endif
+in DATACATEGORY_TYPE DATACATEGORY_ATTRIB;
 
 out float dataFilter_value;
 
@@ -947,7 +951,7 @@ float dataFilter_reduceValue(vec3 value) {
 float dataFilter_reduceValue(vec4 value) {
   return min(min(value.x, value.y), min(value.z, value.w));
 }
-void dataFilter_setValue(DATAFILTER_TYPE valueFromMin, DATAFILTER_TYPE valueFromMax) {
+void dataFilter_setValue(DATAFILTER_TYPE valueFromMin, DATAFILTER_TYPE valueFromMax, DATACATEGORY_TYPE category) {
   if (filter_enabled) {
     if (filter_useSoftMargin) {
       dataFilter_value = dataFilter_reduceValue(
@@ -959,6 +963,29 @@ void dataFilter_setValue(DATAFILTER_TYPE valueFromMin, DATAFILTER_TYPE valueFrom
         step(filter_min, valueFromMin) * step(valueFromMax, filter_max)
       );
     }
+
+    #if DATACATEGORY_CHANNELS == 1 // One 128-bit mask
+      int dataFilter_masks = filter_categoryBitMask[int(category / 32.0)];
+    #elif DATACATEGORY_CHANNELS == 2 // Two 64-bit masks
+      ivec2 dataFilter_masks = ivec2(
+        filter_categoryBitMask[int(category.x / 32.0)],
+        filter_categoryBitMask[int(category.y / 32.0) + 2]
+      );
+    #elif DATACATEGORY_CHANNELS == 3 // Three 32-bit masks
+      ivec3 dataFilter_masks = filter_categoryBitMask.xyz;
+    #else // Four 32-bit masks
+      ivec4 dataFilter_masks = filter_categoryBitMask;
+    #endif
+
+    // Shift mask and extract relevant bits
+    DATACATEGORY_TYPE dataFilter_bits = DATACATEGORY_TYPE(dataFilter_masks) / pow(DATACATEGORY_TYPE(2.0), mod(category, 32.0));
+    dataFilter_bits = mod(floor(dataFilter_bits), 2.0);
+
+    #if DATACATEGORY_CHANNELS == 1
+      if(dataFilter_bits == 0.0) dataFilter_value = 0.0;
+    #else
+    if(any(equal(dataFilter_bits, DATACATEGORY_TYPE(0.0)))) dataFilter_value = 0.0;
+    #endif
   } else {
     dataFilter_value = 1.0;
   }
@@ -1028,10 +1055,11 @@ in float dataFilter_value;
     #ifdef DATAFILTER_DOUBLE
       dataFilter_setValue(
         DATAFILTER_ATTRIB - filter_min64High + DATAFILTER_ATTRIB_64LOW,
-        DATAFILTER_ATTRIB - filter_max64High + DATAFILTER_ATTRIB_64LOW
+        DATAFILTER_ATTRIB - filter_max64High + DATAFILTER_ATTRIB_64LOW,
+        DATACATEGORY_ATTRIB
       );
     #else
-      dataFilter_setValue(DATAFILTER_ATTRIB, DATAFILTER_ATTRIB);
+      dataFilter_setValue(DATAFILTER_ATTRIB, DATAFILTER_ATTRIB, DATACATEGORY_ATTRIB);
     #endif
   `,
     "vs:#main-end": `
@@ -1166,13 +1194,21 @@ void main() {
   // src/data-filter/data-filter-extension.ts
   var defaultProps2 = {
     getFilterValue: { type: "accessor", value: 0 },
+    getFilterCategory: { type: "accessor", value: 0 },
     onFilteredItemsChange: { type: "function", value: null, optional: true },
     filterEnabled: true,
     filterRange: [-1, 1],
     filterSoftRange: null,
+    filterCategories: [0],
     filterTransformSize: true,
     filterTransformColor: true
   };
+  var defaultOptions = {
+    categorySize: 1,
+    filterSize: 1,
+    fp64: false,
+    countItems: false
+  };
   var DATA_TYPE_FROM_SIZE = {
     1: "float",
     2: "vec2",
@@ -1180,21 +1216,16 @@ void main() {
     4: "vec4"
   };
   var DataFilterExtension = class extends import_core4.LayerExtension {
-    constructor({
-      filterSize = 1,
-      fp64: fp642 = false,
-      countItems = false
-    } = {}) {
-      if (!DATA_TYPE_FROM_SIZE[filterSize]) {
-        throw new Error("filterSize out of range");
-      }
-      super({ filterSize, fp64: fp642, countItems });
+    constructor(opts) {
+      super({ ...defaultOptions, ...opts });
     }
     getShaders(extension) {
-      const { filterSize, fp64: fp642 } = extension.opts;
+      const { categorySize, filterSize, fp64: fp642 } = extension.opts;
       return {
         modules: [fp642 ? shaderModule64 : shaderModule],
         defines: {
+          DATACATEGORY_TYPE: DATA_TYPE_FROM_SIZE[categorySize],
+          DATACATEGORY_CHANNELS: categorySize,
           DATAFILTER_TYPE: DATA_TYPE_FROM_SIZE[filterSize],
           DATAFILTER_DOUBLE: Boolean(fp642)
         }
@@ -1202,11 +1233,12 @@ void main() {
     }
     initializeState(context, extension) {
       const attributeManager = this.getAttributeManager();
+      const { categorySize, filterSize, fp64: fp642 } = extension.opts;
       if (attributeManager) {
         attributeManager.add({
           filterValues: {
-            size: extension.opts.filterSize,
-            type: extension.opts.fp64 ? GLEnum.DOUBLE : GLEnum.FLOAT,
+            size: filterSize,
+            type: fp642 ? GLEnum.DOUBLE : GLEnum.FLOAT,
             accessor: "getFilterValue",
             shaderAttributes: {
               filterValues: {
@@ -1216,6 +1248,20 @@ void main() {
                 divisor: 1
               }
             }
+          },
+          filterCategoryValues: {
+            size: categorySize,
+            type: GLEnum.FLOAT,
+            accessor: "getFilterCategory",
+            transform: categorySize === 1 ? (d) => extension._getCategoryKey.call(this, d, 0) : (d) => d.map((x, i) => extension._getCategoryKey.call(this, x, i)),
+            shaderAttributes: {
+              filterCategoryValues: {
+                divisor: 0
+              },
+              instanceFilterCategoryValues: {
+                divisor: 1
+              }
+            }
           }
         });
       }
@@ -1251,31 +1297,51 @@ void main() {
         this.setState({ filterFBO, filterModel });
       }
     }
-    updateState({ props, oldProps }) {
+    updateState({ props, oldProps, changeFlags }, extension) {
+      const attributeManager = this.getAttributeManager();
+      const { categorySize } = extension.opts;
       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;
+        const filterNeedsUpdate = attributeManager.attributes.filterValues.needsUpdate() || attributeManager.attributes.filterCategoryValues?.needsUpdate() || props.filterEnabled !== oldProps.filterEnabled || props.filterRange !== oldProps.filterRange || props.filterSoftRange !== oldProps.filterSoftRange || props.filterCategories !== oldProps.filterCategories;
         if (filterNeedsUpdate) {
           this.setState({ filterNeedsUpdate });
         }
       }
+      if (attributeManager?.attributes.filterCategoryValues) {
+        const categoryBitMaskNeedsUpdate = attributeManager.attributes.filterCategoryValues.needsUpdate() || !(0, import_core4._deepEqual)(props.filterCategories, oldProps.filterCategories, 2);
+        if (categoryBitMaskNeedsUpdate) {
+          this.setState({ categoryBitMaskNeedsUpdate });
+        }
+        const resetCategories = changeFlags.dataChanged;
+        if (resetCategories) {
+          this.setState({
+            categoryMap: Array(categorySize).fill(0).map(() => ({}))
+          });
+          attributeManager.attributes.filterCategoryValues.setNeedsUpdate("categoryMap");
+        }
+      }
     }
     draw(params, extension) {
       const filterFBO = this.state.filterFBO;
       const filterModel = this.state.filterModel;
       const filterNeedsUpdate = this.state.filterNeedsUpdate;
+      const categoryBitMaskNeedsUpdate = this.state.categoryBitMaskNeedsUpdate;
       const { onFilteredItemsChange } = this.props;
+      if (categoryBitMaskNeedsUpdate) {
+        extension._updateCategoryBitMask.call(this, params, extension);
+      }
       if (filterNeedsUpdate && onFilteredItemsChange && filterModel) {
         const {
-          attributes: { filterValues, filterIndices }
+          attributes: { filterValues, filterCategoryValues, filterIndices }
         } = this.getAttributeManager();
         filterModel.setVertexCount(this.getNumInstances());
         this.context.device.clearWebGL({ framebuffer: filterFBO, color: [0, 0, 0, 0] });
         filterModel.updateModuleSettings(params.moduleParameters);
         filterModel.setAttributes({
           ...filterValues.getValue(),
+          ...filterCategoryValues?.getValue(),
           ...filterIndices?.getValue()
         });
+        filterModel.setUniforms(params.uniforms);
         filterModel.device.withParametersWebGL(
           {
             framebuffer: filterFBO,
@@ -1301,6 +1367,34 @@ void main() {
       filterFBO?.destroy();
       filterModel?.destroy();
     }
+    _updateCategoryBitMask(params, extension) {
+      const { categorySize } = extension.opts;
+      const { filterCategories } = this.props;
+      const categoryBitMask = new Uint32Array([0, 0, 0, 0]);
+      const categoryFilters = categorySize === 1 ? [filterCategories] : filterCategories;
+      const maxCategories = categorySize === 1 ? 128 : categorySize === 2 ? 64 : 32;
+      for (let c = 0; c < categoryFilters.length; c++) {
+        const categoryFilter = categoryFilters[c];
+        for (const category of categoryFilter) {
+          const key = extension._getCategoryKey.call(this, category, c);
+          if (key < maxCategories) {
+            const channel = c * (maxCategories / 32) + Math.floor(key / 32);
+            categoryBitMask[channel] += Math.pow(2, key % 32);
+          } else {
+            import_core4.log.warn(`Exceeded maximum number of categories (${maxCategories})`)();
+          }
+        }
+      }
+      params.uniforms.filter_categoryBitMask = categoryBitMask;
+      this.state.categoryBitMaskNeedsUpdate = false;
+    }
+    _getCategoryKey(category, channel) {
+      const categoryMap = this.state.categoryMap[channel];
+      if (!(category in categoryMap)) {
+        categoryMap[category] = Object.keys(categoryMap).length;
+      }
+      return categoryMap[category];
+    }
   };
   DataFilterExtension.defaultProps = defaultProps2;
   DataFilterExtension.extensionName = "DataFilterExtension";