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

package/package.json

@@ -2,7 +2,8 @@
   "name": "@deck.gl/extensions",
   "description": "Plug-and-play functionalities for deck.gl layers",
   "license": "MIT",
-  "version": "9.0.0-beta.1",
+  "type": "module",
+  "version": "9.0.0-beta.10",
   "publishConfig": {
     "access": "public"
   },
@@ -16,13 +17,19 @@
     "type": "git",
     "url": "https://github.com/visgl/deck.gl.git"
   },
-  "main": "dist/es5/index.js",
-  "module": "dist/esm/index.js",
-  "types": "typed/index.d.ts",
+  "types": "dist/index.d.ts",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
   "files": [
     "dist",
     "src",
-    "typed",
     "dist.min.js"
   ],
   "sideEffects": false,
@@ -31,18 +38,14 @@
     "prepublishOnly": "npm run build-bundle && npm run build-bundle -- --env=dev"
   },
   "dependencies": {
-    "@babel/runtime": "^7.0.0",
-    "@luma.gl/shadertools": "9.0.0-alpha.54"
+    "@luma.gl/constants": "^9.0.4",
+    "@luma.gl/shadertools": "^9.0.4",
+    "@math.gl/core": "^4.0.0"
   },
   "peerDependencies": {
-    "@deck.gl/core": "^9.0.0-alpha",
-    "@luma.gl/constants": "9.0.0-alpha.54",
-    "@luma.gl/core": "9.0.0-alpha.54",
-    "@luma.gl/engine": "9.0.0-alpha.54",
-    "@luma.gl/shadertools": "9.0.0-alpha.54",
-    "@luma.gl/webgl": "9.0.0-alpha.54",
-    "@math.gl/core": "^4.0.0",
-    "@math.gl/web-mercator": "^4.0.0"
+    "@deck.gl/core": "^9.0.0-beta",
+    "@luma.gl/core": "^9.0.4",
+    "@luma.gl/engine": "^9.0.4"
   },
-  "gitHead": "9628417918bec5cc73c1345bfcd2f2be575741f1"
+  "gitHead": "6c44f602069374cd21268ff279c5bf818c905ff7"
 }

package/src/brushing/shader-module.ts

@@ -23,6 +23,7 @@ import {project} from '@deck.gl/core';
 import type {Viewport} from '@deck.gl/core';
 
 import type {BrushingExtensionProps} from './brushing-extension';
+import {glsl} from '../utils/syntax-tags';
 
 type BrushingModuleSettings = {
   // From layer context
@@ -30,7 +31,7 @@ type BrushingModuleSettings = {
   mousePosition?: {x: number; y: number};
 } & BrushingExtensionProps;
 
-const vs = `
+const vs = glsl`
   uniform bool brushing_enabled;
   uniform int brushing_target;
   uniform vec2 brushing_mousePos;
@@ -64,7 +65,7 @@ const vs = `
   }
 `;
 
-const fs = `
+const fs = glsl`
   uniform bool brushing_enabled;
   in float brushing_isVisible;
 `;
@@ -77,7 +78,7 @@ const TARGET = {
 };
 
 const inject = {
-  'vs:DECKGL_FILTER_GL_POSITION': `
+  'vs:DECKGL_FILTER_GL_POSITION': glsl`
     vec2 brushingTarget;
     vec2 brushingSource;
     if (brushing_target == 3) {

package/src/clip/clip-extension.ts

@@ -22,6 +22,7 @@ import type {ShaderModule} from '@luma.gl/shadertools';
 import {LayerExtension} from '@deck.gl/core';
 
 import type {Layer} from '@deck.gl/core';
+import {glsl} from '../utils/syntax-tags';
 
 const defaultProps = {
   clipBounds: [0, 0, 1, 1],
@@ -40,7 +41,7 @@ export type ClipExtensionProps = {
   clipByInstance?: boolean;
 };
 
-const shaderFunction = `
+const shaderFunction = glsl`
 uniform vec4 clip_bounds;
 
 bool clip_isInBounds(vec2 position) {
@@ -58,16 +59,16 @@ const shaderModuleVs: ShaderModule = {
 };
 
 const injectionVs = {
-  'vs:#decl': `
+  'vs:#decl': glsl`
 out float clip_isVisible;
 `,
-  'vs:DECKGL_FILTER_GL_POSITION': `
+  'vs:DECKGL_FILTER_GL_POSITION': glsl`
   clip_isVisible = float(clip_isInBounds(geometry.worldPosition.xy));
 `,
-  'fs:#decl': `
+  'fs:#decl': glsl`
 in float clip_isVisible;
 `,
-  'fs:DECKGL_FILTER_COLOR': `
+  'fs:DECKGL_FILTER_COLOR': glsl`
   if (clip_isVisible < 0.5) discard;
 `
 };
@@ -82,16 +83,16 @@ const shaderModuleFs: ShaderModule = {
 };
 
 const injectionFs = {
-  'vs:#decl': `
+  'vs:#decl': glsl`
 out vec2 clip_commonPosition;
 `,
-  'vs:DECKGL_FILTER_GL_POSITION': `
+  'vs:DECKGL_FILTER_GL_POSITION': glsl`
   clip_commonPosition = geometry.position.xy;
 `,
-  'fs:#decl': `
+  'fs:#decl': glsl`
 in vec2 clip_commonPosition;
 `,
-  'fs:DECKGL_FILTER_COLOR': `
+  'fs:DECKGL_FILTER_COLOR': glsl`
   if (!clip_isInBounds(clip_commonPosition)) discard;
 `
 };

package/src/collision-filter/collision-filter-effect.ts

@@ -1,5 +1,4 @@
 import {Device, Framebuffer, Texture} from '@luma.gl/core';
-import {WEBGLRenderbuffer} from '@luma.gl/webgl';
 import {equals} from '@math.gl/core';
 import {_deepEqual as deepEqual} from '@deck.gl/core';
 import type {Effect, Layer, PreRenderOptions, Viewport} from '@deck.gl/core';
@@ -244,18 +243,23 @@ export default class CollisionFilterEffect implements Effect {
       }
     });
 
-    const depthBuffer = new WEBGLRenderbuffer(
-      // @ts-expect-error TODO v9 needs to be WebGLDevice
-      device,
-      {format: 'depth16unorm', width, height}
-    );
+    // @ts-ignore
+    const depthStencilAttachment = device.createTexture({
+      format: 'depth16unorm',
+      width,
+      height,
+      mipmaps: false,
+
+      // TODO fix getWebGLTextureParameters() in luma to avoid passing deprecated parameters
+      dataFormat: 6402, // gl.DEPTH_COMPONENT
+      type: 5125 // gl.UNSIGNED_INT
+    });
     this.collisionFBOs[collisionGroup] = device.createFramebuffer({
       id: `collision-${collisionGroup}`,
       width,
       height,
       colorAttachments: [collisionMap],
-      // @ts-expect-error TODO v9 doesn't handle renderbuffers well
-      depthStencilAttachment: depthBuffer
+      depthStencilAttachment
     });
   }
 

package/src/collision-filter/collision-filter-pass.ts

@@ -1,5 +1,4 @@
 import {Framebuffer} from '@luma.gl/core';
-import {withGLParameters} from '@luma.gl/webgl';
 import {_LayersPass as LayersPass, LayersPassRenderOptions} from '@deck.gl/core';
 
 type CollisionFilterPassRenderOptions = LayersPassRenderOptions & {};
@@ -9,8 +8,7 @@ export default class CollisionFilterPass extends LayersPass {
     const padding = 1;
     const clearColor = [0, 0, 0, 0];
 
-    return withGLParameters(
-      this.device,
+    return this.device.withParametersWebGL(
       {
         scissorTest: true,
         scissor: [padding, padding, target.width - 2 * padding, target.height - 2 * padding],

package/src/collision-filter/shader-module.ts

@@ -1,8 +1,9 @@
 import {Framebuffer, Texture} from '@luma.gl/core';
 import type {ShaderModule} from '@luma.gl/shadertools';
 import {project} from '@deck.gl/core';
+import {glsl} from '../utils/syntax-tags';
 
-const vs = `
+const vs = glsl`
 #ifdef NON_INSTANCED_MODEL
 in float collisionPriorities;
 #else
@@ -54,10 +55,10 @@ float collision_isVisible(vec2 texCoords, vec3 pickingColor) {
 `;
 
 const inject = {
-  'vs:#decl': `
+  'vs:#decl': glsl`
   float collision_fade = 1.0;
 `,
-  'vs:DECKGL_FILTER_GL_POSITION': `
+  'vs:DECKGL_FILTER_GL_POSITION': glsl`
   if (collision_sort) {
     #ifdef NON_INSTANCED_MODEL
     float collisionPriority = collisionPriorities;
@@ -77,7 +78,7 @@ const inject = {
     }
   }
   `,
-  'vs:DECKGL_FILTER_COLOR': `
+  'vs:DECKGL_FILTER_COLOR': glsl`
   color.a *= collision_fade;
   `
 };
@@ -101,6 +102,7 @@ const getCollisionUniforms = (
   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
   };

package/src/data-filter/aggregator.ts

@@ -1,4 +1,4 @@
-import {Device, Framebuffer} from '@luma.gl/core';
+import {Device, DeviceFeature, Framebuffer} from '@luma.gl/core';
 import {Model} from '@luma.gl/engine';
 import {GL} from '@luma.gl/constants';
 
@@ -53,18 +53,13 @@ void main() {
 }
 `;
 
-export function supportsFloatTarget(device: Device): boolean {
-  // @ts-expect-error
-  const gl = device.gl;
+const FLOAT_TARGET_FEATURES: DeviceFeature[] = [
+  'float32-renderable-webgl', // ability to render to float texture
+  'texture-blend-float-webgl' // ability to blend when rendering to float texture
+];
 
-  // 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 Boolean(
-    gl.getExtension('EXT_float_blend') &&
-      // WebGL 2
-      (gl.getExtension('EXT_color_buffer_float') ||
-        // WebGL 1
-        gl.getExtension('WEBGL_color_buffer_float'))
-  );
+export function supportsFloatTarget(device: Device): boolean {
+  return FLOAT_TARGET_FEATURES.every(feature => device.features.has(feature));
 }
 
 // A 1x1 framebuffer object that encodes the total count of filtered items
@@ -75,7 +70,7 @@ export function getFramebuffer(device: Device, useFloatTarget: boolean): Framebu
       height: 1,
       colorAttachments: [
         device.createTexture({
-          format: device.info.type === 'webgl2' ? 'rgba32float' : 'rgba8unorm',
+          format: 'rgba32float',
           type: GL.FLOAT,
           mipmaps: false
         })

package/src/data-filter/data-filter-extension.ts

@@ -18,32 +18,39 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import {readPixelsToArray, clear, withGLParameters} from '@luma.gl/webgl';
-import {GL} from '@luma.gl/constants';
 import type {Framebuffer} from '@luma.gl/core';
 import type {Model} from '@luma.gl/engine';
 import type {Layer, LayerContext, Accessor, UpdateParameters} from '@deck.gl/core';
-import {LayerExtension} from '@deck.gl/core';
+import {_deepEqual as deepEqual, LayerExtension, log} from '@deck.gl/core';
 import {shaderModule, shaderModule64} from './shader-module';
 import * as aggregator from './aggregator';
 
 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
 };
 
+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
@@ -71,6 +78,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.
    */
@@ -83,21 +95,33 @@ export type DataFilterExtensionProps<DataT = any> = {
 };
 
 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;
+};
+
+const defaultOptions: Required<DataFilterExtensionOptions> = {
+  categorySize: 1,
+  filterSize: 1,
+  fp64: false,
+  countItems: false
 };
 
 const DATA_TYPE_FROM_SIZE = {
@@ -108,28 +132,24 @@ const DATA_TYPE_FROM_SIZE = {
 };
 
 /** 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 = defaultProps;
   static extensionName = 'DataFilterExtension';
 
-  constructor({
-    filterSize = 1,
-    fp64 = false,
-    countItems = false
-  }: Partial<DataFilterExtensionOptions> = {}) {
-    if (!DATA_TYPE_FROM_SIZE[filterSize]) {
-      throw new Error('filterSize out of range');
-    }
-
-    super({filterSize, fp64, countItems});
+  constructor(opts: DataFilterExtensionOptions = {}) {
+    super({...defaultOptions, ...opts});
   }
 
   getShaders(this: Layer<DataFilterExtensionProps>, extension: this): any {
-    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)
       }
@@ -138,11 +158,13 @@ export default class DataFilterExtension extends LayerExtension<DataFilterExtens
 
   initializeState(this: Layer<DataFilterExtensionProps>, context: LayerContext, extension: this) {
     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 ? 'float64' : 'float32',
           accessor: 'getFilterValue',
           shaderAttributes: {
             filterValues: {
@@ -152,6 +174,22 @@ export default class DataFilterExtension extends LayerExtension<DataFilterExtens
               divisor: 1
             }
           }
+        },
+        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
+            }
+          }
         }
       });
     }
@@ -166,8 +204,7 @@ export default class DataFilterExtension extends LayerExtension<DataFilterExtens
         filterIndices: {
           size: useFloatTarget ? 1 : 2,
           vertexOffset: 1,
-          type: GL.UNSIGNED_BYTE,
-          normalized: true,
+          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];
@@ -195,44 +232,74 @@ export default class DataFilterExtension extends LayerExtension<DataFilterExtens
 
   updateState(
     this: Layer<DataFilterExtensionProps>,
-    {props, oldProps}: UpdateParameters<Layer<DataFilterExtensionProps>>
+    {props, oldProps, changeFlags}: UpdateParameters<Layer<DataFilterExtensionProps>>,
+    extension: this
   ) {
+    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(this: Layer<DataFilterExtensionProps>, params: any, extension: this) {
     const filterFBO = this.state.filterFBO as Framebuffer;
     const filterModel = this.state.filterModel as Model;
     const filterNeedsUpdate = this.state.filterNeedsUpdate as boolean;
+    const categoryBitMaskNeedsUpdate = this.state.categoryBitMaskNeedsUpdate as boolean;
 
     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());
 
-      clear(this.context.device, {framebuffer: filterFBO, color: [0, 0, 0, 0]});
+      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()
       });
-      withGLParameters(
-        filterModel.device,
+      filterModel.setUniforms(params.uniforms);
+      filterModel.device.withParametersWebGL(
         {
           framebuffer: filterFBO,
           // ts-ignore 'readonly' cannot be assigned to the mutable type '[GLBlendEquation, GLBlendEquation]'
@@ -243,7 +310,7 @@ export default class DataFilterExtension extends LayerExtension<DataFilterExtens
           filterModel.draw(this.context.renderPass);
         }
       );
-      const color = readPixelsToArray(filterFBO);
+      const color = filterModel.device.readPixelsToArrayWebGL(filterFBO);
       let count = 0;
       for (let i = 0; i < color.length; i++) {
         count += color[i];
@@ -262,4 +329,54 @@ export default class DataFilterExtension extends LayerExtension<DataFilterExtens
     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(
+    this: Layer<DataFilterExtensionProps>,
+    params: any,
+    extension: this
+  ): void {
+    const {categorySize} = extension.opts;
+    const {filterCategories} = this.props;
+    const categoryBitMask = new Uint32Array([0, 0, 0, 0]);
+    const categoryFilters = (
+      categorySize === 1 ? [filterCategories] : filterCategories
+    ) as FilterCategory[][];
+    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(
+    this: Layer<DataFilterExtensionProps>,
+    category: FilterCategory,
+    channel: number
+  ) {
+    const categoryMap = (this.state.categoryMap as Record<FilterCategory, number>[])[channel];
+    if (!(category in categoryMap)) {
+      categoryMap[category] = Object.keys(categoryMap).length;
+    }
+    return categoryMap[category];
+  }
 }