@deck.gl/extensions 9.0.0-beta.1 → 9.0.0-beta.11

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

@@ -0,0 +1,87 @@
+import { project } from '@deck.gl/core';
+import { glsl } from "../utils/syntax-tags.js";
+const vs = `
+#ifdef NON_INSTANCED_MODEL
+in float collisionPriorities;
+#else
+in float instanceCollisionPriorities;
+#endif
+uniform sampler2D collision_texture;
+uniform bool collision_sort;
+uniform bool collision_enabled;
+vec2 collision_getCoords(vec4 position) {
+vec4 collision_clipspace = project_common_position_to_clipspace(position);
+return (1.0 + collision_clipspace.xy / collision_clipspace.w) / 2.0;
+}
+float collision_match(vec2 tex, vec3 pickingColor) {
+vec4 collision_pickingColor = texture(collision_texture, tex);
+float delta = dot(abs(collision_pickingColor.rgb - pickingColor), vec3(1.0));
+float e = 0.001;
+return step(delta, e);
+}
+float collision_isVisible(vec2 texCoords, vec3 pickingColor) {
+if (!collision_enabled) {
+return 1.0;
+}
+const int N = 2;
+float accumulator = 0.0;
+vec2 step = vec2(1.0 / project_uViewportSize);
+const float floatN = float(N);
+vec2 delta = -floatN * step;
+for(int i = -N; i <= N; i++) {
+delta.x = -step.x * floatN;
+for(int j = -N; j <= N; j++) {
+accumulator += collision_match(texCoords + delta, pickingColor);
+delta.x += step.x;
+}
+delta.y += step.y;
+}
+float W = 2.0 * floatN + 1.0;
+return pow(accumulator / (W * W), 2.2);
+}
+`;
+const inject = {
+    'vs:#decl': `
+float collision_fade = 1.0;
+`,
+    'vs:DECKGL_FILTER_GL_POSITION': `
+if (collision_sort) {
+#ifdef NON_INSTANCED_MODEL
+float collisionPriority = collisionPriorities;
+#else
+float collisionPriority = instanceCollisionPriorities;
+#endif
+position.z = -0.001 * collisionPriority * position.w;
+}
+if (collision_enabled) {
+vec4 collision_common_position = project_position(vec4(geometry.worldPosition, 1.0));
+vec2 collision_texCoords = collision_getCoords(collision_common_position);
+collision_fade = collision_isVisible(collision_texCoords, geometry.pickingColor / 255.0);
+if (collision_fade < 0.0001) {
+position = vec4(0.0, 0.0, 2.0, 1.0);
+}
+}
+`,
+    'vs:DECKGL_FILTER_COLOR': `
+color.a *= collision_fade;
+`
+};
+const getCollisionUniforms = (opts, uniforms) => {
+    if (!opts || !('dummyCollisionMap' in opts)) {
+        return {};
+    }
+    const { collisionFBO, drawToCollisionMap, dummyCollisionMap } = opts;
+    return {
+        collision_sort: Boolean(drawToCollisionMap),
+        // @ts-ignore (v9 not sure why this isn't allowed now)
+        collision_texture: !drawToCollisionMap && collisionFBO ? collisionFBO.colorAttachments[0] : dummyCollisionMap
+    };
+};
+// @ts-expect-error
+export default {
+    name: 'collision',
+    dependencies: [project],
+    vs,
+    inject,
+    getUniforms: getCollisionUniforms
+};

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

@@ -0,0 +1 @@
+{"version":3,"file":"aggregator.d.ts","sourceRoot":"","sources":["../../src/data-filter/aggregator.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,MAAM,EAAiB,WAAW,EAAC,MAAM,eAAe,CAAC;AACjE,OAAO,EAAC,KAAK,EAAC,MAAM,iBAAiB,CAAC;AACtC,OAAO,EAAC,EAAE,EAAC,MAAM,oBAAoB,CAAC;AA0DtC,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,CAE3D;AAGD,wBAAgB,cAAc,CAAC,MAAM,EAAE,MAAM,EAAE,cAAc,EAAE,OAAO,GAAG,WAAW,CAmBnF;AAGD,wBAAgB,QAAQ,CAAC,MAAM,EAAE,MAAM,EAAE,aAAa,EAAE,GAAG,EAAE,cAAc,EAAE,OAAO,GAAG,KAAK,CAe3F;AAED,eAAO,MAAM,UAAU;;;;;CAKb,CAAC"}

package/dist/{esm/data-filter → data-filter}/aggregator.js

@@ -49,54 +49,53 @@ void main() {
   fragColor = vColor;
 }
 `;
+const FLOAT_TARGET_FEATURES = [
+    'float32-renderable-webgl', // ability to render to float texture
+    'texture-blend-float-webgl' // ability to blend when rendering to float texture
+];
 export function supportsFloatTarget(device) {
-  const gl = device.gl;
-  return Boolean(gl.getExtension('EXT_float_blend') && (gl.getExtension('EXT_color_buffer_float') || gl.getExtension('WEBGL_color_buffer_float')));
+    return FLOAT_TARGET_FEATURES.every(feature => device.features.has(feature));
 }
+// A 1x1 framebuffer object that encodes the total count of filtered items
 export function getFramebuffer(device, useFloatTarget) {
-  if (useFloatTarget) {
+    if (useFloatTarget) {
+        return device.createFramebuffer({
+            width: 1,
+            height: 1,
+            colorAttachments: [
+                device.createTexture({
+                    format: 'rgba32float',
+                    type: 5126,
+                    mipmaps: false
+                })
+            ]
+        });
+    }
     return device.createFramebuffer({
-      width: 1,
-      height: 1,
-      colorAttachments: [device.createTexture({
-        format: device.info.type === 'webgl2' ? 'rgba32float' : 'rgba8unorm',
-        type: 5126,
-        mipmaps: false
-      })]
+        width: 256,
+        height: 64,
+        colorAttachments: [device.createTexture({ format: 'rgba8unorm', type: 5126, mipmaps: false })]
     });
-  }
-
-  return device.createFramebuffer({
-    width: 256,
-    height: 64,
-    colorAttachments: [device.createTexture({
-      format: 'rgba8unorm',
-      type: 5126,
-      mipmaps: false
-    })]
-  });
 }
+// Increments the counter based on dataFilter_value
 export function getModel(device, shaderOptions, useFloatTarget) {
-  shaderOptions.defines.NON_INSTANCED_MODEL = 1;
-
-  if (useFloatTarget) {
-    shaderOptions.defines.FLOAT_TARGET = 1;
-  }
-
-  return new Model(device, {
-    id: 'data-filter-aggregation-model',
-    vertexCount: 1,
-    isInstanced: false,
-    drawMode: 0,
-    vs: AGGREGATE_VS,
-    fs: AGGREGATE_FS,
-    ...shaderOptions
-  });
+    shaderOptions.defines.NON_INSTANCED_MODEL = 1;
+    if (useFloatTarget) {
+        shaderOptions.defines.FLOAT_TARGET = 1;
+    }
+    return new Model(device, {
+        id: 'data-filter-aggregation-model',
+        vertexCount: 1,
+        isInstanced: false,
+        drawMode: 0,
+        vs: AGGREGATE_VS,
+        fs: AGGREGATE_FS,
+        ...shaderOptions
+    });
 }
 export const parameters = {
-  blend: true,
-  blendFunc: [1, 1, 1, 1],
-  blendEquation: [32774, 32774],
-  depthTest: false
+    blend: true,
+    blendFunc: [1, 1, 1, 1],
+    blendEquation: [32774, 32774],
+    depthTest: false
 };
-//# sourceMappingURL=aggregator.js.map

package/{typed → 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.
      */
@@ -45,28 +56,37 @@ export type DataFilterExtensionProps<DataT = any> = {
 };
 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.
+     * 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. Set to `0` to disable category filtering.
+     * @default 0
+     */
+    categorySize?: 0 | 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. Set to `0` to disable numeric filtering.
      * @default 1
      */
-    filterSize: number;
+    filterSize?: 0 | 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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,256 @@
+// 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 { _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: 0,
+    filterSize: 1,
+    fp64: false,
+    countItems: false
+};
+const DATA_TYPE_FROM_SIZE = {
+    1: 'float',
+    2: 'vec2',
+    3: 'vec3',
+    4: 'vec4'
+};
+/** 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 {
+    static { this.defaultProps = defaultProps; }
+    static { this.extensionName = 'DataFilterExtension'; }
+    constructor(opts = {}) {
+        super({ ...defaultOptions, ...opts });
+    }
+    getShaders(extension) {
+        const { categorySize, filterSize, fp64 } = extension.opts;
+        const defines = {};
+        if (categorySize) {
+            defines.DATACATEGORY_TYPE = DATA_TYPE_FROM_SIZE[categorySize];
+            defines.DATACATEGORY_CHANNELS = categorySize;
+        }
+        if (filterSize) {
+            defines.DATAFILTER_TYPE = DATA_TYPE_FROM_SIZE[filterSize];
+            defines.DATAFILTER_DOUBLE = Boolean(fp64);
+        }
+        return { modules: [fp64 ? shaderModule64 : shaderModule], defines };
+    }
+    initializeState(context, extension) {
+        const attributeManager = this.getAttributeManager();
+        const { categorySize, filterSize, fp64 } = extension.opts;
+        if (attributeManager) {
+            if (filterSize) {
+                attributeManager.add({
+                    filterValues: {
+                        size: filterSize,
+                        type: fp64 ? 'float64' : 'float32',
+                        accessor: 'getFilterValue',
+                        shaderAttributes: {
+                            filterValues: {
+                                divisor: 0
+                            },
+                            instanceFilterValues: {
+                                divisor: 1
+                            }
+                        }
+                    }
+                });
+            }
+            if (categorySize) {
+                attributeManager.add({
+                    filterCategoryValues: {
+                        size: categorySize,
+                        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
+                            }
+                        }
+                    }
+                });
+            }
+        }
+        const { device } = this.context;
+        if (attributeManager && extension.opts.countItems) {
+            const useFloatTarget = aggregator.supportsFloatTarget(device);
+            // 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: 'unorm8',
+                    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(device, useFloatTarget);
+            const filterModel = aggregator.getModel(device, extension.getShaders.call(this, extension), useFloatTarget);
+            this.setState({ filterFBO, filterModel });
+        }
+    }
+    updateState({ props, oldProps, changeFlags }, extension) {
+        const attributeManager = this.getAttributeManager();
+        const { categorySize } = extension.opts;
+        if (this.state.filterModel) {
+            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.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, 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]'
+                ...aggregator.parameters,
+                viewport: [0, 0, filterFBO.width, filterFBO.height]
+            }, () => {
+                filterModel.draw(this.context.renderPass);
+            });
+            const color = filterModel.device.readPixelsToArrayWebGL(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 = this.state.filterFBO;
+        const filterModel = this.state.filterModel;
+        // filterFBO.color.delete();
+        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

@@ -0,0 +1,39 @@
+import type { ShaderModule } from '@luma.gl/shadertools';
+import type { DataFilterExtensionProps } from "./data-filter-extension.js";
+export type Defines = {
+    /**
+     * Primitive type of parameter used for category filtering. If undefined, category filtering disabled.
+     */
+    DATACATEGORY_TYPE?: 'float' | 'vec2' | 'vec3' | 'vec4';
+    /**
+     * Number of category filtering channels. Must match dimension of `DATACATEGORY_TYPE`
+     */
+    DATACATEGORY_CHANNELS?: 1 | 2 | 3 | 4;
+    /**
+     * Primitive type of parameter used for numeric filtering. If undefined, numeric filtering disabled.
+     */
+    DATAFILTER_TYPE?: 'float' | 'vec2' | 'vec3' | 'vec4';
+    /**
+     * Enable 64-bit precision in numeric filter.
+     */
+    DATAFILTER_DOUBLE?: boolean;
+    /**
+     * Numeric filter attribute
+     */
+    DATAFILTER_ATTRIB?: 'filterValues' | 'instanceFilterValues';
+    /**
+     * Numeric filter attribute (low bits). Only used when `DATAFILTER_DOUBLE = true`
+     */
+    DATAFILTER_ATTRIB_64LOW?: 'filterValues64Low' | 'instanceFilterValues64Low';
+    /**
+     * Category filter attribute
+     */
+    DATACATEGORY_ATTRIB?: 'filterCategoryValues' | 'instanceFilterCategoryValues';
+};
+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/dist/data-filter/shader-module.d.ts.map

@@ -0,0 +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,mCAAgC;AAMtE,MAAM,MAAM,OAAO,GAAG;IAEpB;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;IACvD;;OAEG;IACH,qBAAqB,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAEtC;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;IAErD;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAG5B;;OAEG;IACH,iBAAiB,CAAC,EAAE,cAAc,GAAG,sBAAsB,CAAC;IAC5D;;OAEG;IACH,uBAAuB,CAAC,EAAE,mBAAmB,GAAG,2BAA2B,CAAC;IAC5E;;OAEG;IACH,mBAAmB,CAAC,EAAE,sBAAsB,GAAG,8BAA8B,CAAC;CAC/E,CAAC;AAiHF,KAAK,wBAAwB,GAAG;IAC9B,UAAU,EAAE,GAAG,EAAE,CAAC;CACnB,GAAG,wBAAwB,CAAC;AA0G7B,eAAO,MAAM,YAAY,EAAE,YAAY,CAAC,wBAAwB,CAM/D,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,YAAY,CAAC,wBAAwB,CAMjE,CAAC"}