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

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

@@ -22,7 +22,7 @@ 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 {_deepEqual as deepEqual, LayerExtension, log} from '@deck.gl/core';
-import {shaderModule, shaderModule64} from './shader-module';
+import {Defines, shaderModule, shaderModule64} from './shader-module';
 import * as aggregator from './aggregator';
 
 const defaultProps = {
@@ -96,15 +96,15 @@ 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
+   * 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?: 1 | 2 | 3 | 4;
+  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.
+   * 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?: 1 | 2 | 3 | 4;
+  filterSize?: 0 | 1 | 2 | 3 | 4;
   /**
    * Use 64-bit precision instead of 32-bit.
    * @default false
@@ -118,17 +118,17 @@ type DataFilterExtensionOptions = {
 };
 
 const defaultOptions: Required<DataFilterExtensionOptions> = {
-  categorySize: 1,
+  categorySize: 0,
   filterSize: 1,
   fp64: false,
   countItems: false
 };
 
 const DATA_TYPE_FROM_SIZE = {
-  1: 'float',
-  2: 'vec2',
-  3: 'vec3',
-  4: 'vec4'
+  1: 'float' as const,
+  2: 'vec2' as const,
+  3: 'vec3' as const,
+  4: 'vec4' as const
 };
 
 /** Adds GPU-based data filtering functionalities to layers. It allows the layer to show/hide objects based on user-defined properties. */
@@ -144,16 +144,17 @@ export default class DataFilterExtension extends LayerExtension<
 
   getShaders(this: Layer<DataFilterExtensionProps>, extension: this): any {
     const {categorySize, filterSize, fp64} = extension.opts;
+    const defines: 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: {
-        DATACATEGORY_TYPE: DATA_TYPE_FROM_SIZE[categorySize],
-        DATACATEGORY_CHANNELS: categorySize,
-        DATAFILTER_TYPE: DATA_TYPE_FROM_SIZE[filterSize],
-        DATAFILTER_DOUBLE: Boolean(fp64)
-      }
-    };
+    return {modules: [fp64 ? shaderModule64 : shaderModule], defines};
   }
 
   initializeState(this: Layer<DataFilterExtensionProps>, context: LayerContext, extension: this) {
@@ -161,37 +162,44 @@ export default class DataFilterExtension extends LayerExtension<
     const {categorySize, filterSize, fp64} = extension.opts;
 
     if (attributeManager) {
-      attributeManager.add({
-        filterValues: {
-          size: filterSize,
-          type: fp64 ? 'float64' : 'float32',
-          accessor: 'getFilterValue',
-          shaderAttributes: {
-            filterValues: {
-              divisor: 0
-            },
-            instanceFilterValues: {
-              divisor: 1
+      if (filterSize) {
+        attributeManager.add({
+          filterValues: {
+            size: filterSize,
+            type: fp64 ? 'float64' : 'float32',
+            accessor: 'getFilterValue',
+            shaderAttributes: {
+              filterValues: {
+                divisor: 0
+              },
+              instanceFilterValues: {
+                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
+        });
+      }
+
+      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;
@@ -240,7 +248,7 @@ export default class DataFilterExtension extends LayerExtension<
     if (this.state.filterModel) {
       const filterNeedsUpdate =
         // attributeManager must be defined for filterModel to be set
-        attributeManager!.attributes.filterValues.needsUpdate() ||
+        attributeManager!.attributes.filterValues?.needsUpdate() ||
         attributeManager!.attributes.filterCategoryValues?.needsUpdate() ||
         props.filterEnabled !== oldProps.filterEnabled ||
         props.filterRange !== oldProps.filterRange ||
@@ -294,7 +302,7 @@ export default class DataFilterExtension extends LayerExtension<
       filterModel.updateModuleSettings(params.moduleParameters);
       // @ts-expect-error filterValue and filterIndices should always have buffer value
       filterModel.setAttributes({
-        ...filterValues.getValue(),
+        ...filterValues?.getValue(),
         ...filterCategoryValues?.getValue(),
         ...filterIndices?.getValue()
       });

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

@@ -5,34 +5,80 @@ import {glsl} from '../utils/syntax-tags';
 /*
  * data filter shader module
  */
+export type Defines = {
+  // Defines passed externally
+  /**
+   * 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;
+
+  // Defines derived in shader
+  /**
+   * 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';
+};
+
 const vs = glsl`
-uniform DATAFILTER_TYPE filter_min;
-uniform DATAFILTER_TYPE filter_softMin;
-uniform DATAFILTER_TYPE filter_softMax;
-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
+#ifdef DATAFILTER_TYPE
+  uniform DATAFILTER_TYPE filter_min;
+  uniform DATAFILTER_TYPE filter_softMin;
+  uniform DATAFILTER_TYPE filter_softMax;
+  uniform DATAFILTER_TYPE filter_max;
+
+  #ifdef NON_INSTANCED_MODEL
+    #define DATAFILTER_ATTRIB filterValues
+    #define DATAFILTER_ATTRIB_64LOW filterValues64Low
+  #else
+    #define DATAFILTER_ATTRIB instanceFilterValues
+    #define DATAFILTER_ATTRIB_64LOW instanceFilterValues64Low
+  #endif
+
+  in DATAFILTER_TYPE DATAFILTER_ATTRIB;
+  #ifdef DATAFILTER_DOUBLE
+    in DATAFILTER_TYPE DATAFILTER_ATTRIB_64LOW;
+
+    uniform DATAFILTER_TYPE filter_min64High;
+    uniform DATAFILTER_TYPE filter_max64High;
+  #endif
 #endif
 
-in DATAFILTER_TYPE DATAFILTER_ATTRIB;
-#ifdef DATAFILTER_DOUBLE
-  in DATAFILTER_TYPE DATAFILTER_ATTRIB_64LOW;
 
-  uniform DATAFILTER_TYPE filter_min64High;
-  uniform DATAFILTER_TYPE filter_max64High;
+#ifdef DATACATEGORY_TYPE
+  #ifdef NON_INSTANCED_MODEL
+    #define DATACATEGORY_ATTRIB filterCategoryValues
+  #else
+    #define DATACATEGORY_ATTRIB instanceFilterCategoryValues
+  #endif
+  in DATACATEGORY_TYPE DATACATEGORY_ATTRIB;
 #endif
-in DATACATEGORY_TYPE DATACATEGORY_ATTRIB;
 
 out float dataFilter_value;
 
@@ -48,30 +94,44 @@ 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, DATACATEGORY_TYPE category) {
-  if (filter_enabled) {
+
+#ifdef DATAFILTER_TYPE
+  void dataFilter_setValue(DATAFILTER_TYPE valueFromMin, DATAFILTER_TYPE valueFromMax) {
     if (filter_useSoftMargin) {
-      dataFilter_value = dataFilter_reduceValue(
-        smoothstep(filter_min, filter_softMin, valueFromMin) *
-        (1.0 - smoothstep(filter_softMax, filter_max, valueFromMax))
+      // smoothstep results are undefined if edge0 ≥ edge1
+      // Fallback to ignore filterSoftRange if it is truncated by filterRange
+      DATAFILTER_TYPE leftInRange = mix(
+        smoothstep(filter_min, filter_softMin, valueFromMin),
+        step(filter_min, valueFromMin),
+        step(filter_softMin, filter_min)
+      );
+      DATAFILTER_TYPE rightInRange = mix(
+        1.0 - smoothstep(filter_softMax, filter_max, valueFromMax),
+        step(valueFromMax, filter_max),
+        step(filter_max, filter_softMax)
       );
+      dataFilter_value = dataFilter_reduceValue(leftInRange * rightInRange);
     } else {
       dataFilter_value = dataFilter_reduceValue(
         step(filter_min, valueFromMin) * step(valueFromMax, filter_max)
       );
     }
+  }
+#endif
 
+#ifdef DATACATEGORY_ATTRIB
+  void dataFilter_setCategoryValue(DATACATEGORY_TYPE category) {
     #if DATACATEGORY_CHANNELS == 1 // One 128-bit mask
-      int dataFilter_masks = filter_categoryBitMask[int(category / 32.0)];
+    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]
-      );
+    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;
+    ivec3 dataFilter_masks = filter_categoryBitMask.xyz;
     #else // Four 32-bit masks
-      ivec4 dataFilter_masks = filter_categoryBitMask;
+    ivec4 dataFilter_masks = filter_categoryBitMask;
     #endif
 
     // Shift mask and extract relevant bits
@@ -79,14 +139,12 @@ void dataFilter_setValue(DATAFILTER_TYPE valueFromMin, DATAFILTER_TYPE valueFrom
     dataFilter_bits = mod(floor(dataFilter_bits), 2.0);
 
     #if DATACATEGORY_CHANNELS == 1
-      if(dataFilter_bits == 0.0) dataFilter_value = 0.0;
+    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;
   }
-}
+#endif
 `;
 
 const fs = glsl`
@@ -163,15 +221,23 @@ function getUniforms64(opts?: DataFilterModuleSettings | {}): Record<string, any
 
 const inject = {
   'vs:#main-start': glsl`
-    #ifdef DATAFILTER_DOUBLE
-      dataFilter_setValue(
-        DATAFILTER_ATTRIB - filter_min64High + DATAFILTER_ATTRIB_64LOW,
-        DATAFILTER_ATTRIB - filter_max64High + DATAFILTER_ATTRIB_64LOW,
-        DATACATEGORY_ATTRIB
-      );
-    #else
-      dataFilter_setValue(DATAFILTER_ATTRIB, DATAFILTER_ATTRIB, DATACATEGORY_ATTRIB);
-    #endif
+    dataFilter_value = 1.0;
+    if (filter_enabled) {
+      #ifdef DATAFILTER_ATTRIB
+        #ifdef DATAFILTER_DOUBLE
+          dataFilter_setValue(
+            DATAFILTER_ATTRIB - filter_min64High + DATAFILTER_ATTRIB_64LOW,
+            DATAFILTER_ATTRIB - filter_max64High + DATAFILTER_ATTRIB_64LOW
+          );
+        #else
+          dataFilter_setValue(DATAFILTER_ATTRIB, DATAFILTER_ATTRIB);
+        #endif
+      #endif
+
+      #ifdef DATACATEGORY_ATTRIB
+        dataFilter_setCategoryValue(DATACATEGORY_ATTRIB);
+      #endif
+    }
   `,
 
   'vs:#main-end': glsl`

package/src/mask/mask-effect.ts

@@ -1,5 +1,13 @@
-import {Layer, Viewport, Effect, PreRenderOptions, CoordinateSystem, log} from '@deck.gl/core';
-import type {Device, Texture} from '@luma.gl/core';
+import {
+  Layer,
+  Viewport,
+  Effect,
+  EffectContext,
+  PreRenderOptions,
+  CoordinateSystem,
+  log
+} from '@deck.gl/core';
+import type {Texture} from '@luma.gl/core';
 import {equals} from '@math.gl/core';
 import MaskPass from './mask-pass';
 import {joinLayerBounds, getRenderBounds, makeViewport, Bounds} from '../utils/projection-utils';
@@ -7,7 +15,7 @@ import {joinLayerBounds, getRenderBounds, makeViewport, Bounds} from '../utils/p
 
 type Mask = {
   /** The channel index */
-  index: number;
+  index: 0 | 1 | 2 | 3;
   bounds: Bounds;
   coordinateOrigin: [number, number, number];
   coordinateSystem: CoordinateSystem;
@@ -15,7 +23,7 @@ type Mask = {
 
 type Channel = {
   id: string;
-  index: number;
+  index: 0 | 1 | 2 | 3;
   layers: Layer[];
   bounds: Bounds | null;
   maskBounds: Bounds;
@@ -42,17 +50,25 @@ export default class MaskEffect implements Effect {
   private maskMap?: Texture;
   private lastViewport?: Viewport;
 
-  preRender(
-    device: Device,
-    {layers, layerFilter, viewports, onViewportActive, views, isPicking}: PreRenderOptions
-  ): MaskPreRenderStats {
+  setup({device}: EffectContext) {
+    this.dummyMaskMap = device.createTexture({
+      width: 1,
+      height: 1
+    });
+
+    this.maskPass = new MaskPass(device, {id: 'default-mask'});
+    this.maskMap = this.maskPass.maskMap;
+  }
+
+  preRender({
+    layers,
+    layerFilter,
+    viewports,
+    onViewportActive,
+    views,
+    isPicking
+  }: PreRenderOptions): MaskPreRenderStats {
     let didRender = false;
-    if (!this.dummyMaskMap) {
-      this.dummyMaskMap = device.createTexture({
-        width: 1,
-        height: 1
-      });
-    }
 
     if (isPicking) {
       // Do not update on picking pass
@@ -67,11 +83,6 @@ export default class MaskEffect implements Effect {
     }
     this.masks = {};
 
-    if (!this.maskPass) {
-      this.maskPass = new MaskPass(device, {id: 'default-mask'});
-      this.maskMap = this.maskPass.maskMap;
-    }
-
     // Map layers to channels
     const channelMap = this._sortMaskChannels(maskLayers);
     // TODO - support multiple views

package/src/mask/mask-pass.ts

@@ -1,10 +1,18 @@
-import type {Device, Framebuffer, Texture} from '@luma.gl/core';
-import {GL} from '@luma.gl/constants';
-import {_LayersPass as LayersPass, LayersPassRenderOptions} from '@deck.gl/core';
+import type {Device, Framebuffer, RenderPipelineParameters, Texture} from '@luma.gl/core';
+import {Layer, _LayersPass as LayersPass, LayersPassRenderOptions, Viewport} from '@deck.gl/core';
 
 type MaskPassRenderOptions = LayersPassRenderOptions & {
   /** The channel to render into, 0:red, 1:green, 2:blue, 3:alpha */
-  channel: number;
+  channel: 0 | 1 | 2 | 3;
+};
+
+const MASK_BLENDING: RenderPipelineParameters = {
+  blendColorOperation: 'subtract',
+  blendColorSrcFactor: 'zero',
+  blendColorDstFactor: 'one',
+  blendAlphaOperation: 'subtract',
+  blendAlphaSrcFactor: 'zero',
+  blendAlphaDstFactor: 'one'
 };
 
 export default class MaskPass extends LayersPass {
@@ -37,20 +45,18 @@ export default class MaskPass extends LayersPass {
   }
 
   render(options: MaskPassRenderOptions) {
-    const colorMask = [false, false, false, false];
-    colorMask[options.channel] = true;
+    const colorMask = 2 ** options.channel;
     const clearColor = [255, 255, 255, 255];
+    super.render({...options, clearColor, colorMask, target: this.fbo, pass: 'mask'});
+  }
 
-    return this.device.withParametersWebGL(
-      {
-        blend: true,
-        blendFunc: [GL.ZERO, GL.ONE],
-        blendEquation: GL.FUNC_SUBTRACT,
-        colorMask,
-        depthTest: false
-      },
-      () => super.render({...options, clearColor, target: this.fbo, pass: 'mask'})
-    );
+  protected getLayerParameters(layer: Layer<{}>, layerIndex: number, viewport: Viewport) {
+    return {
+      ...layer.props.parameters,
+      blend: true,
+      depthTest: false,
+      ...MASK_BLENDING
+    };
   }
 
   shouldDrawLayer(layer) {

package/src/path-style/path-style-extension.ts

@@ -177,6 +177,7 @@ export default class PathStyleExtension extends LayerExtension<PathStyleExtensio
 
       prevP = p;
     }
+    result[geometrySize - 1] = 0;
     return result;
   }
 }

package/src/terrain/terrain-cover.ts

@@ -174,7 +174,8 @@ export class TerrainCover {
     }
     if (!this.pickingFbo) {
       this.pickingFbo = createRenderTarget(this.targetLayer.context.device, {
-        id: `${this.id}-picking`
+        id: `${this.id}-picking`,
+        interpolate: false
       });
     }
     return this.pickingFbo;

package/src/terrain/terrain-effect.ts

@@ -1,5 +1,5 @@
-import {Device, Texture} from '@luma.gl/core';
-import {log, getShaderAssembler} from '@deck.gl/core';
+import {Texture} from '@luma.gl/core';
+import {log} from '@deck.gl/core';
 
 import {terrainModule, TerrainModuleSettings} from './shader-module';
 import {TerrainCover} from './terrain-cover';
@@ -7,7 +7,7 @@ import {TerrainPass} from './terrain-pass';
 import {TerrainPickingPass, TerrainPickingPassRenderOptions} from './terrain-picking-pass';
 import {HeightMapBuilder} from './height-map-builder';
 
-import type {Effect, PreRenderOptions, Layer, Viewport} from '@deck.gl/core';
+import type {Effect, EffectContext, PreRenderOptions, Layer, Viewport} from '@deck.gl/core';
 
 /** Class to manage terrain effect */
 export class TerrainEffect implements Effect {
@@ -28,7 +28,7 @@ export class TerrainEffect implements Effect {
   /** One texture for each primitive terrain layer, into which the draped layers render */
   private terrainCovers: Map<string, TerrainCover> = new Map();
 
-  initialize(device: Device) {
+  setup({device, deck}: EffectContext) {
     this.dummyHeightMap = device.createTexture({
       width: 1,
       height: 1,
@@ -43,21 +43,10 @@ export class TerrainEffect implements Effect {
       log.warn('Terrain offset mode is not supported by this browser')();
     }
 
-    getShaderAssembler().addDefaultModule(terrainModule);
+    deck._addDefaultShaderModule(terrainModule);
   }
 
-  preRender(device: Device, opts: PreRenderOptions): void {
-    if (!this.dummyHeightMap) {
-      // First time this effect is in use, initialize resources and register the shader module
-      this.initialize(device);
-      for (const layer of opts.layers) {
-        // Force the terrain layer (and its descendents) to rebuild their models with the new shader
-        if (layer.props.operation.includes('terrain')) {
-          layer.setChangeFlags({extensionsChanged: true});
-        }
-      }
-    }
-
+  preRender(opts: PreRenderOptions): void {
     // @ts-expect-error pickZ only defined in picking pass
     if (opts.pickZ) {
       // Do not update if picking attributes
@@ -106,7 +95,7 @@ export class TerrainEffect implements Effect {
     };
   }
 
-  cleanup(): void {
+  cleanup({deck}: EffectContext): void {
     if (this.dummyHeightMap) {
       this.dummyHeightMap.delete();
       this.dummyHeightMap = undefined;
@@ -122,7 +111,7 @@ export class TerrainEffect implements Effect {
     }
     this.terrainCovers.clear();
 
-    getShaderAssembler().removeDefaultModule(terrainModule);
+    deck._removeDefaultShaderModule(terrainModule);
   }
 
   private _updateHeightMap(terrainLayers: Layer[], viewport: Viewport, opts: PreRenderOptions) {