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

package/dist/index.cjs

@@ -193,22 +193,21 @@ var import_core3 = require("@deck.gl/core");
 
 // dist/data-filter/shader-module.js
 var vs2 = `
-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 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
-#define DATACATEGORY_ATTRIB filterCategoryValues
 #else
 #define DATAFILTER_ATTRIB instanceFilterValues
 #define DATAFILTER_ATTRIB_64LOW instanceFilterValues64Low
-#define DATACATEGORY_ATTRIB instanceFilterCategoryValues
 #endif
 in DATAFILTER_TYPE DATAFILTER_ATTRIB;
 #ifdef DATAFILTER_DOUBLE
@@ -216,7 +215,15 @@ in DATAFILTER_TYPE DATAFILTER_ATTRIB_64LOW;
 uniform DATAFILTER_TYPE filter_min64High;
 uniform DATAFILTER_TYPE filter_max64High;
 #endif
+#endif
+#ifdef DATACATEGORY_TYPE
+#ifdef NON_INSTANCED_MODEL
+#define DATACATEGORY_ATTRIB filterCategoryValues
+#else
+#define DATACATEGORY_ATTRIB instanceFilterCategoryValues
+#endif
 in DATACATEGORY_TYPE DATACATEGORY_ATTRIB;
+#endif
 out float dataFilter_value;
 float dataFilter_reduceValue(float value) {
 return value;
@@ -230,18 +237,29 @@ return min(min(value.x, value.y), value.z);
 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))
+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
 int dataFilter_masks = filter_categoryBitMask[int(category / 32.0)];
 #elif DATACATEGORY_CHANNELS == 2
@@ -261,10 +279,8 @@ 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
 `;
 var fs2 = `
 uniform bool filter_transformColor;
@@ -322,15 +338,22 @@ function getUniforms64(opts) {
 }
 var inject2 = {
   "vs:#main-start": `
+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,
-DATACATEGORY_ATTRIB
+DATAFILTER_ATTRIB - filter_max64High + DATAFILTER_ATTRIB_64LOW
 );
 #else
-dataFilter_setValue(DATAFILTER_ATTRIB, DATAFILTER_ATTRIB, DATACATEGORY_ATTRIB);
+dataFilter_setValue(DATAFILTER_ATTRIB, DATAFILTER_ATTRIB);
 #endif
+#endif
+#ifdef DATACATEGORY_ATTRIB
+dataFilter_setCategoryValue(DATACATEGORY_ATTRIB);
+#endif
+}
 `,
   "vs:#main-end": `
 if (dataFilter_value == 0.0) {
@@ -476,7 +499,7 @@ var defaultProps2 = {
   filterTransformColor: true
 };
 var defaultOptions = {
-  categorySize: 1,
+  categorySize: 0,
   filterSize: 1,
   fp64: false,
   countItems: false
@@ -493,48 +516,55 @@ var _DataFilterExtension = class extends import_core3.LayerExtension {
   }
   getShaders(extension) {
     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)
-      }
-    };
+    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(fp642);
+    }
+    return { modules: [fp642 ? shaderModule64 : shaderModule], defines };
   }
   initializeState(context, extension) {
     const attributeManager = this.getAttributeManager();
     const { categorySize, filterSize, fp64: fp642 } = extension.opts;
     if (attributeManager) {
-      attributeManager.add({
-        filterValues: {
-          size: filterSize,
-          type: fp642 ? "float64" : "float32",
-          accessor: "getFilterValue",
-          shaderAttributes: {
-            filterValues: {
-              divisor: 0
-            },
-            instanceFilterValues: {
-              divisor: 1
+      if (filterSize) {
+        attributeManager.add({
+          filterValues: {
+            size: filterSize,
+            type: fp642 ? "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;
     if (attributeManager && extension.opts.countItems) {
@@ -564,11 +594,11 @@ var _DataFilterExtension = class extends import_core3.LayerExtension {
     }
   }
   updateState({ props, oldProps, changeFlags }, extension) {
-    var _a;
+    var _a, _b;
     const attributeManager = this.getAttributeManager();
     const { categorySize } = extension.opts;
     if (this.state.filterModel) {
-      const filterNeedsUpdate = attributeManager.attributes.filterValues.needsUpdate() || ((_a = attributeManager.attributes.filterCategoryValues) == null ? void 0 : _a.needsUpdate()) || props.filterEnabled !== oldProps.filterEnabled || props.filterRange !== oldProps.filterRange || props.filterSoftRange !== oldProps.filterSoftRange || props.filterCategories !== oldProps.filterCategories;
+      const filterNeedsUpdate = ((_a = attributeManager.attributes.filterValues) == null ? void 0 : _a.needsUpdate()) || ((_b = attributeManager.attributes.filterCategoryValues) == null ? void 0 : _b.needsUpdate()) || props.filterEnabled !== oldProps.filterEnabled || props.filterRange !== oldProps.filterRange || props.filterSoftRange !== oldProps.filterSoftRange || props.filterCategories !== oldProps.filterCategories;
       if (filterNeedsUpdate) {
         this.setState({ filterNeedsUpdate });
       }
@@ -602,7 +632,7 @@ var _DataFilterExtension = class extends import_core3.LayerExtension {
       this.context.device.clearWebGL({ framebuffer: filterFBO, color: [0, 0, 0, 0] });
       filterModel.updateModuleSettings(params.moduleParameters);
       filterModel.setAttributes({
-        ...filterValues.getValue(),
+        ...filterValues == null ? void 0 : filterValues.getValue(),
         ...filterCategoryValues == null ? void 0 : filterCategoryValues.getValue(),
         ...filterIndices == null ? void 0 : filterIndices.getValue()
       });
@@ -944,6 +974,7 @@ var _PathStyleExtension = class extends import_core6.LayerExtension {
       }
       prevP = p;
     }
+    result[geometrySize - 1] = 0;
     return result;
   }
 };
@@ -1259,7 +1290,7 @@ var ClipExtension = _ClipExtension;
 })();
 
 // dist/collision-filter/collision-filter-extension.js
-var import_core19 = require("@deck.gl/core");
+var import_core15 = require("@deck.gl/core");
 
 // dist/collision-filter/shader-module.js
 var import_core11 = require("@deck.gl/core");
@@ -1348,8 +1379,8 @@ var shader_module_default2 = {
 };
 
 // dist/collision-filter/collision-filter-effect.js
-var import_core17 = require("@math.gl/core");
-var import_core18 = require("@deck.gl/core");
+var import_core13 = require("@math.gl/core");
+var import_core14 = require("@deck.gl/core");
 
 // dist/collision-filter/collision-filter-pass.js
 var import_core12 = require("@deck.gl/core");
@@ -1357,13 +1388,11 @@ var CollisionFilterPass = class extends import_core12._LayersPass {
   renderCollisionMap(target, options) {
     const padding = 1;
     const clearColor = [0, 0, 0, 0];
-    return this.device.withParametersWebGL({
-      scissorTest: true,
-      scissor: [padding, padding, target.width - 2 * padding, target.height - 2 * padding],
-      blend: false,
-      depthTest: true,
-      depthRange: [0, 1]
-    }, () => this.render({ ...options, clearColor, target, pass: "collision" }));
+    const scissorRect = [padding, padding, target.width - 2 * padding, target.height - 2 * padding];
+    this.render({ ...options, clearColor, scissorRect, target, pass: "collision" });
+  }
+  getLayerParameters(layer, layerIndex, viewport) {
+    return { ...layer.props.parameters, blend: false, depthRange: [0, 1], depthTest: true };
   }
   getModuleParameters() {
     return {
@@ -1377,77 +1406,381 @@ var CollisionFilterPass = class extends import_core12._LayersPass {
   }
 };
 
-// dist/mask/mask-effect.js
-var import_core15 = require("@deck.gl/core");
-var import_core16 = require("@math.gl/core");
-
-// dist/mask/mask-pass.js
-var import_constants2 = require("@luma.gl/constants");
-var import_core13 = require("@deck.gl/core");
-var MaskPass = class extends import_core13._LayersPass {
-  constructor(device, props) {
-    super(device, props);
-    const { mapSize = 2048 } = props;
-    this.maskMap = device.createTexture({
+// dist/collision-filter/collision-filter-effect.js
+var DOWNSCALE = 2;
+var CollisionFilterEffect = class {
+  constructor() {
+    this.id = "collision-filter-effect";
+    this.props = null;
+    this.useInPicking = true;
+    this.order = 1;
+    this.channels = {};
+    this.collisionFBOs = {};
+  }
+  setup(context) {
+    this.context = context;
+    const { device } = context;
+    this.dummyCollisionMap = device.createTexture({ width: 1, height: 1 });
+    this.collisionFilterPass = new CollisionFilterPass(device, { id: "default-collision-filter" });
+  }
+  preRender({ effects: allEffects, layers, layerFilter, viewports, onViewportActive, views, isPicking, preRenderStats = {} }) {
+    var _a;
+    const { device } = this.context;
+    if (isPicking) {
+      return;
+    }
+    const collisionLayers = layers.filter(
+      ({ props: { visible, collisionEnabled } }) => visible && collisionEnabled
+    );
+    if (collisionLayers.length === 0) {
+      this.channels = {};
+      return;
+    }
+    const effects = allEffects == null ? void 0 : allEffects.filter((e) => e.useInPicking && preRenderStats[e.id]);
+    const maskEffectRendered = (_a = preRenderStats["mask-effect"]) == null ? void 0 : _a.didRender;
+    const channels = this._groupByCollisionGroup(device, collisionLayers);
+    const viewport = viewports[0];
+    const viewportChanged = !this.lastViewport || !this.lastViewport.equals(viewport) || maskEffectRendered;
+    for (const collisionGroup in channels) {
+      const collisionFBO = this.collisionFBOs[collisionGroup];
+      const renderInfo = channels[collisionGroup];
+      const [width, height] = device.canvasContext.getPixelSize();
+      collisionFBO.resize({
+        width: width / DOWNSCALE,
+        height: height / DOWNSCALE
+      });
+      this._render(renderInfo, {
+        effects,
+        layerFilter,
+        onViewportActive,
+        views,
+        viewport,
+        viewportChanged
+      });
+    }
+  }
+  _render(renderInfo, { effects, layerFilter, onViewportActive, views, viewport, viewportChanged }) {
+    const { collisionGroup } = renderInfo;
+    const oldRenderInfo = this.channels[collisionGroup];
+    if (!oldRenderInfo) {
+      return;
+    }
+    const needsRender = viewportChanged || renderInfo === oldRenderInfo || !(0, import_core14._deepEqual)(oldRenderInfo.layers, renderInfo.layers, 1) || renderInfo.layerBounds.some((b, i) => !(0, import_core13.equals)(b, oldRenderInfo.layerBounds[i])) || renderInfo.allLayersLoaded !== oldRenderInfo.allLayersLoaded || renderInfo.layers.some((layer) => layer.props.transitions);
+    this.channels[collisionGroup] = renderInfo;
+    if (needsRender) {
+      this.lastViewport = viewport;
+      const collisionFBO = this.collisionFBOs[collisionGroup];
+      this.collisionFilterPass.renderCollisionMap(collisionFBO, {
+        pass: "collision-filter",
+        isPicking: true,
+        layers: renderInfo.layers,
+        effects,
+        layerFilter,
+        viewports: viewport ? [viewport] : [],
+        onViewportActive,
+        views,
+        moduleParameters: {
+          dummyCollisionMap: this.dummyCollisionMap,
+          devicePixelRatio: collisionFBO.device.canvasContext.getDevicePixelRatio() / DOWNSCALE
+        }
+      });
+    }
+  }
+  _groupByCollisionGroup(device, collisionLayers) {
+    const channelMap = {};
+    for (const layer of collisionLayers) {
+      const { collisionGroup } = layer.props;
+      let channelInfo = channelMap[collisionGroup];
+      if (!channelInfo) {
+        channelInfo = { collisionGroup, layers: [], layerBounds: [], allLayersLoaded: true };
+        channelMap[collisionGroup] = channelInfo;
+      }
+      channelInfo.layers.push(layer);
+      channelInfo.layerBounds.push(layer.getBounds());
+      if (!layer.isLoaded) {
+        channelInfo.allLayersLoaded = false;
+      }
+    }
+    for (const collisionGroup of Object.keys(channelMap)) {
+      if (!this.collisionFBOs[collisionGroup]) {
+        this.createFBO(device, collisionGroup);
+      }
+      if (!this.channels[collisionGroup]) {
+        this.channels[collisionGroup] = channelMap[collisionGroup];
+      }
+    }
+    for (const collisionGroup of Object.keys(this.collisionFBOs)) {
+      if (!channelMap[collisionGroup]) {
+        this.destroyFBO(collisionGroup);
+      }
+    }
+    return channelMap;
+  }
+  getModuleParameters(layer) {
+    const { collisionGroup } = layer.props;
+    const { collisionFBOs, dummyCollisionMap } = this;
+    return { collisionFBO: collisionFBOs[collisionGroup], dummyCollisionMap };
+  }
+  cleanup() {
+    if (this.dummyCollisionMap) {
+      this.dummyCollisionMap.delete();
+      this.dummyCollisionMap = void 0;
+    }
+    this.channels = {};
+    for (const collisionGroup of Object.keys(this.collisionFBOs)) {
+      this.destroyFBO(collisionGroup);
+    }
+    this.collisionFBOs = {};
+    this.lastViewport = void 0;
+  }
+  createFBO(device, collisionGroup) {
+    const { width, height } = device.gl.canvas;
+    const collisionMap = device.createTexture({
       format: "rgba8unorm",
-      width: mapSize,
-      height: mapSize,
+      width,
+      height,
       sampler: {
-        minFilter: "linear",
-        magFilter: "linear",
+        minFilter: "nearest",
+        magFilter: "nearest",
         addressModeU: "clamp-to-edge",
         addressModeV: "clamp-to-edge"
       }
     });
-    this.fbo = device.createFramebuffer({
-      id: "maskmap",
-      width: mapSize,
-      height: mapSize,
-      colorAttachments: [this.maskMap]
+    const depthStencilAttachment = device.createTexture({
+      format: "depth16unorm",
+      width,
+      height,
+      mipmaps: false,
+      dataFormat: 6402,
+      type: 5125
+    });
+    this.collisionFBOs[collisionGroup] = device.createFramebuffer({
+      id: `collision-${collisionGroup}`,
+      width,
+      height,
+      colorAttachments: [collisionMap],
+      depthStencilAttachment
     });
   }
-  render(options) {
-    const colorMask = [false, false, false, false];
-    colorMask[options.channel] = true;
-    const clearColor = [255, 255, 255, 255];
-    return this.device.withParametersWebGL({
-      blend: true,
-      blendFunc: [0, 1],
-      blendEquation: 32778,
-      colorMask,
-      depthTest: false
-    }, () => super.render({ ...options, clearColor, target: this.fbo, pass: "mask" }));
-  }
-  shouldDrawLayer(layer) {
-    return layer.props.operation.includes("mask");
-  }
-  delete() {
-    this.fbo.delete();
-    this.maskMap.delete();
+  destroyFBO(collisionGroup) {
+    var _a, _b;
+    const fbo = this.collisionFBOs[collisionGroup];
+    (_a = fbo.colorAttachments[0]) == null ? void 0 : _a.destroy();
+    (_b = fbo.depthStencilAttachment) == null ? void 0 : _b.destroy();
+    fbo.destroy();
+    delete this.collisionFBOs[collisionGroup];
   }
 };
 
-// dist/utils/projection-utils.js
-var import_core14 = require("@deck.gl/core");
-function joinLayerBounds(layers, viewport) {
-  const bounds = [Infinity, Infinity, -Infinity, -Infinity];
-  for (const layer of layers) {
-    const layerBounds = layer.getBounds();
-    if (layerBounds) {
-      const bottomLeftCommon = layer.projectPosition(layerBounds[0], { viewport, autoOffset: false });
-      const topRightCommon = layer.projectPosition(layerBounds[1], { viewport, autoOffset: false });
-      bounds[0] = Math.min(bounds[0], bottomLeftCommon[0]);
-      bounds[1] = Math.min(bounds[1], bottomLeftCommon[1]);
-      bounds[2] = Math.max(bounds[2], topRightCommon[0]);
-      bounds[3] = Math.max(bounds[3], topRightCommon[1]);
-    }
-  }
-  if (Number.isFinite(bounds[0])) {
-    return bounds;
-  }
-  return null;
-}
-var MAX_VIEWPORT_SIZE = 2048;
+// dist/collision-filter/collision-filter-extension.js
+var defaultProps6 = {
+  getCollisionPriority: { type: "accessor", value: 0 },
+  collisionEnabled: true,
+  collisionGroup: { type: "string", value: "default" },
+  collisionTestProps: {}
+};
+var _CollisionFilterExtension = class extends import_core15.LayerExtension {
+  getShaders() {
+    return { modules: [shader_module_default2] };
+  }
+  draw({ uniforms, context, moduleParameters }) {
+    const { collisionEnabled } = this.props;
+    const { collisionFBO, drawToCollisionMap } = moduleParameters;
+    const enabled = collisionEnabled && Boolean(collisionFBO);
+    uniforms.collision_enabled = enabled;
+    if (drawToCollisionMap) {
+      this.props = this.clone(this.props.collisionTestProps).props;
+    }
+  }
+  initializeState(context, extension) {
+    var _a;
+    if (this.getAttributeManager() === null) {
+      return;
+    }
+    (_a = this.context.deck) == null ? void 0 : _a._addDefaultEffect(new CollisionFilterEffect());
+    const attributeManager = this.getAttributeManager();
+    attributeManager.add({
+      collisionPriorities: {
+        size: 1,
+        accessor: "getCollisionPriority",
+        shaderAttributes: {
+          collisionPriorities: { divisor: 0 },
+          instanceCollisionPriorities: { divisor: 1 }
+        }
+      }
+    });
+  }
+  getNeedsPickingBuffer() {
+    return this.props.collisionEnabled;
+  }
+};
+var CollisionFilterExtension = _CollisionFilterExtension;
+(() => {
+  _CollisionFilterExtension.defaultProps = defaultProps6;
+})();
+(() => {
+  _CollisionFilterExtension.extensionName = "CollisionFilterExtension";
+})();
+
+// dist/mask/mask-extension.js
+var import_core21 = require("@deck.gl/core");
+
+// dist/mask/shader-module.js
+var import_core16 = require("@deck.gl/core");
+var vs4 = `
+uniform vec4 mask_bounds;
+uniform bool mask_maskByInstance;
+vec2 mask_getCoords(vec4 position) {
+return (position.xy - mask_bounds.xy) / (mask_bounds.zw - mask_bounds.xy);
+}
+`;
+var fs3 = `
+uniform sampler2D mask_texture;
+uniform int mask_channel;
+uniform bool mask_enabled;
+uniform bool mask_inverted;
+bool mask_isInBounds(vec2 texCoords) {
+if (!mask_enabled) {
+return true;
+}
+vec4 maskColor = texture(mask_texture, texCoords);
+float maskValue = 1.0;
+if (mask_channel == 0) {
+maskValue = maskColor.r;
+} else if (mask_channel == 1) {
+maskValue = maskColor.g;
+} else if (mask_channel == 2) {
+maskValue = maskColor.b;
+} else if (mask_channel == 3) {
+maskValue = maskColor.a;
+}
+if (mask_inverted) {
+return maskValue >= 0.5;
+} else {
+return maskValue < 0.5;
+}
+}
+`;
+var inject5 = {
+  "vs:#decl": `
+out vec2 mask_texCoords;
+`,
+  "vs:#main-end": `
+vec4 mask_common_position;
+if (mask_maskByInstance) {
+mask_common_position = project_position(vec4(geometry.worldPosition, 1.0));
+} else {
+mask_common_position = geometry.position;
+}
+mask_texCoords = mask_getCoords(mask_common_position);
+`,
+  "fs:#decl": `
+in vec2 mask_texCoords;
+`,
+  "fs:#main-start": `
+if (mask_enabled) {
+bool mask = mask_isInBounds(mask_texCoords);
+fragColor = texture(mask_texture, mask_texCoords);
+if (!mask) discard;
+}
+`
+};
+var getMaskUniforms = (opts) => {
+  if (opts && "maskMap" in opts) {
+    return {
+      mask_texture: opts.maskMap
+    };
+  }
+  return {};
+};
+var shader_module_default3 = {
+  name: "mask",
+  dependencies: [import_core16.project],
+  vs: vs4,
+  fs: fs3,
+  inject: inject5,
+  getUniforms: getMaskUniforms
+};
+
+// dist/mask/mask-effect.js
+var import_core19 = require("@deck.gl/core");
+var import_core20 = require("@math.gl/core");
+
+// dist/mask/mask-pass.js
+var import_core17 = require("@deck.gl/core");
+var MASK_BLENDING = {
+  blendColorOperation: "subtract",
+  blendColorSrcFactor: "zero",
+  blendColorDstFactor: "one",
+  blendAlphaOperation: "subtract",
+  blendAlphaSrcFactor: "zero",
+  blendAlphaDstFactor: "one"
+};
+var MaskPass = class extends import_core17._LayersPass {
+  constructor(device, props) {
+    super(device, props);
+    const { mapSize = 2048 } = props;
+    this.maskMap = device.createTexture({
+      format: "rgba8unorm",
+      width: mapSize,
+      height: mapSize,
+      sampler: {
+        minFilter: "linear",
+        magFilter: "linear",
+        addressModeU: "clamp-to-edge",
+        addressModeV: "clamp-to-edge"
+      }
+    });
+    this.fbo = device.createFramebuffer({
+      id: "maskmap",
+      width: mapSize,
+      height: mapSize,
+      colorAttachments: [this.maskMap]
+    });
+  }
+  render(options) {
+    const colorMask = 2 ** options.channel;
+    const clearColor = [255, 255, 255, 255];
+    super.render({ ...options, clearColor, colorMask, target: this.fbo, pass: "mask" });
+  }
+  getLayerParameters(layer, layerIndex, viewport) {
+    return {
+      ...layer.props.parameters,
+      blend: true,
+      depthTest: false,
+      ...MASK_BLENDING
+    };
+  }
+  shouldDrawLayer(layer) {
+    return layer.props.operation.includes("mask");
+  }
+  delete() {
+    this.fbo.delete();
+    this.maskMap.delete();
+  }
+};
+
+// dist/utils/projection-utils.js
+var import_core18 = require("@deck.gl/core");
+function joinLayerBounds(layers, viewport) {
+  const bounds = [Infinity, Infinity, -Infinity, -Infinity];
+  for (const layer of layers) {
+    const layerBounds = layer.getBounds();
+    if (layerBounds) {
+      const bottomLeftCommon = layer.projectPosition(layerBounds[0], { viewport, autoOffset: false });
+      const topRightCommon = layer.projectPosition(layerBounds[1], { viewport, autoOffset: false });
+      bounds[0] = Math.min(bounds[0], bottomLeftCommon[0]);
+      bounds[1] = Math.min(bounds[1], bottomLeftCommon[1]);
+      bounds[2] = Math.max(bounds[2], topRightCommon[0]);
+      bounds[3] = Math.max(bounds[3], topRightCommon[1]);
+    }
+  }
+  if (Number.isFinite(bounds[0])) {
+    return bounds;
+  }
+  return null;
+}
+var MAX_VIEWPORT_SIZE = 2048;
 function makeViewport(opts) {
   const { bounds, viewport, border = 0 } = opts;
   const { isGeospatial } = viewport;
@@ -1477,7 +1810,7 @@ function makeViewport(opts) {
       zoom += Math.log2(r);
     }
   }
-  return isGeospatial ? new import_core14.WebMercatorViewport({
+  return isGeospatial ? new import_core18.WebMercatorViewport({
     id: viewport.id,
     x: border,
     y: border,
@@ -1487,7 +1820,7 @@ function makeViewport(opts) {
     latitude: centerWorld[1],
     zoom,
     orthographic: true
-  }) : new import_core14.OrthographicViewport({
+  }) : new import_core18.OrthographicViewport({
     id: viewport.id,
     x: border,
     y: border,
@@ -1556,14 +1889,16 @@ var MaskEffect = class {
     this.channels = [];
     this.masks = null;
   }
-  preRender(device, { layers, layerFilter, viewports, onViewportActive, views, isPicking }) {
+  setup({ device }) {
+    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 }) {
     let didRender = false;
-    if (!this.dummyMaskMap) {
-      this.dummyMaskMap = device.createTexture({
-        width: 1,
-        height: 1
-      });
-    }
     if (isPicking) {
       return { didRender };
     }
@@ -1574,15 +1909,11 @@ var MaskEffect = class {
       return { didRender };
     }
     this.masks = {};
-    if (!this.maskPass) {
-      this.maskPass = new MaskPass(device, { id: "default-mask" });
-      this.maskMap = this.maskPass.maskMap;
-    }
     const channelMap = this._sortMaskChannels(maskLayers);
     const viewport = viewports[0];
     const viewportChanged = !this.lastViewport || !this.lastViewport.equals(viewport);
     if (viewport.resolution !== void 0) {
-      import_core15.log.warn("MaskExtension is not supported in GlobeView")();
+      import_core19.log.warn("MaskExtension is not supported in GlobeView")();
       return { didRender };
     }
     for (const maskId in channelMap) {
@@ -1611,7 +1942,7 @@ var MaskEffect = class {
       this.lastViewport = viewport;
       const layerBounds = joinLayerBounds(channelInfo.layers, viewport);
       channelInfo.bounds = layerBounds && getRenderBounds(layerBounds, viewport);
-      if (maskChanged || !(0, import_core16.equals)(channelInfo.bounds, oldChannelInfo.bounds)) {
+      if (maskChanged || !(0, import_core20.equals)(channelInfo.bounds, oldChannelInfo.bounds)) {
         const { maskPass, maskMap } = this;
         const maskViewport = layerBounds && makeViewport({
           bounds: channelInfo.bounds,
@@ -1652,7 +1983,7 @@ var MaskEffect = class {
       let channelInfo = channelMap[id];
       if (!channelInfo) {
         if (++channelCount > 4) {
-          import_core15.log.warn("Too many mask layers. The max supported is 4")();
+          import_core19.log.warn("Too many mask layers. The max supported is 4")();
           continue;
         }
         channelInfo = {
@@ -1705,301 +2036,6 @@ var MaskEffect = class {
   }
 };
 
-// dist/collision-filter/collision-filter-effect.js
-var DOWNSCALE = 2;
-var CollisionFilterEffect = class {
-  constructor() {
-    this.id = "collision-filter-effect";
-    this.props = null;
-    this.useInPicking = true;
-    this.order = 1;
-    this.channels = {};
-    this.collisionFBOs = {};
-  }
-  preRender(device, { effects: allEffects, layers, layerFilter, viewports, onViewportActive, views, isPicking, preRenderStats = {} }) {
-    var _a;
-    if (!this.dummyCollisionMap) {
-      this.dummyCollisionMap = device.createTexture({ width: 1, height: 1 });
-    }
-    if (isPicking) {
-      return;
-    }
-    const collisionLayers = layers.filter(
-      ({ props: { visible, collisionEnabled } }) => visible && collisionEnabled
-    );
-    if (collisionLayers.length === 0) {
-      this.channels = {};
-      return;
-    }
-    if (!this.collisionFilterPass) {
-      this.collisionFilterPass = new CollisionFilterPass(device, { id: "default-collision-filter" });
-    }
-    const effects = allEffects == null ? void 0 : allEffects.filter((e) => e.constructor === MaskEffect);
-    const maskEffectRendered = (_a = preRenderStats["mask-effect"]) == null ? void 0 : _a.didRender;
-    const channels = this._groupByCollisionGroup(device, collisionLayers);
-    const viewport = viewports[0];
-    const viewportChanged = !this.lastViewport || !this.lastViewport.equals(viewport) || maskEffectRendered;
-    for (const collisionGroup in channels) {
-      const collisionFBO = this.collisionFBOs[collisionGroup];
-      const renderInfo = channels[collisionGroup];
-      const [width, height] = device.canvasContext.getPixelSize();
-      collisionFBO.resize({
-        width: width / DOWNSCALE,
-        height: height / DOWNSCALE
-      });
-      this._render(renderInfo, {
-        effects,
-        layerFilter,
-        onViewportActive,
-        views,
-        viewport,
-        viewportChanged
-      });
-    }
-  }
-  _render(renderInfo, { effects, layerFilter, onViewportActive, views, viewport, viewportChanged }) {
-    const { collisionGroup } = renderInfo;
-    const oldRenderInfo = this.channels[collisionGroup];
-    if (!oldRenderInfo) {
-      return;
-    }
-    const needsRender = viewportChanged || renderInfo === oldRenderInfo || !(0, import_core18._deepEqual)(oldRenderInfo.layers, renderInfo.layers, 1) || renderInfo.layerBounds.some((b, i) => !(0, import_core17.equals)(b, oldRenderInfo.layerBounds[i])) || renderInfo.allLayersLoaded !== oldRenderInfo.allLayersLoaded || renderInfo.layers.some((layer) => layer.props.transitions);
-    this.channels[collisionGroup] = renderInfo;
-    if (needsRender) {
-      this.lastViewport = viewport;
-      const collisionFBO = this.collisionFBOs[collisionGroup];
-      this.collisionFilterPass.renderCollisionMap(collisionFBO, {
-        pass: "collision-filter",
-        isPicking: true,
-        layers: renderInfo.layers,
-        effects,
-        layerFilter,
-        viewports: viewport ? [viewport] : [],
-        onViewportActive,
-        views,
-        moduleParameters: {
-          dummyCollisionMap: this.dummyCollisionMap,
-          devicePixelRatio: collisionFBO.device.canvasContext.getDevicePixelRatio() / DOWNSCALE
-        }
-      });
-    }
-  }
-  _groupByCollisionGroup(device, collisionLayers) {
-    const channelMap = {};
-    for (const layer of collisionLayers) {
-      const { collisionGroup } = layer.props;
-      let channelInfo = channelMap[collisionGroup];
-      if (!channelInfo) {
-        channelInfo = { collisionGroup, layers: [], layerBounds: [], allLayersLoaded: true };
-        channelMap[collisionGroup] = channelInfo;
-      }
-      channelInfo.layers.push(layer);
-      channelInfo.layerBounds.push(layer.getBounds());
-      if (!layer.isLoaded) {
-        channelInfo.allLayersLoaded = false;
-      }
-    }
-    for (const collisionGroup of Object.keys(channelMap)) {
-      if (!this.collisionFBOs[collisionGroup]) {
-        this.createFBO(device, collisionGroup);
-      }
-      if (!this.channels[collisionGroup]) {
-        this.channels[collisionGroup] = channelMap[collisionGroup];
-      }
-    }
-    for (const collisionGroup of Object.keys(this.collisionFBOs)) {
-      if (!channelMap[collisionGroup]) {
-        this.destroyFBO(collisionGroup);
-      }
-    }
-    return channelMap;
-  }
-  getModuleParameters(layer) {
-    const { collisionGroup } = layer.props;
-    const { collisionFBOs, dummyCollisionMap } = this;
-    return { collisionFBO: collisionFBOs[collisionGroup], dummyCollisionMap };
-  }
-  cleanup() {
-    if (this.dummyCollisionMap) {
-      this.dummyCollisionMap.delete();
-      this.dummyCollisionMap = void 0;
-    }
-    this.channels = {};
-    for (const collisionGroup of Object.keys(this.collisionFBOs)) {
-      this.destroyFBO(collisionGroup);
-    }
-    this.collisionFBOs = {};
-    this.lastViewport = void 0;
-  }
-  createFBO(device, collisionGroup) {
-    const { width, height } = device.gl.canvas;
-    const collisionMap = device.createTexture({
-      format: "rgba8unorm",
-      width,
-      height,
-      sampler: {
-        minFilter: "nearest",
-        magFilter: "nearest",
-        addressModeU: "clamp-to-edge",
-        addressModeV: "clamp-to-edge"
-      }
-    });
-    const depthStencilAttachment = device.createTexture({
-      format: "depth16unorm",
-      width,
-      height,
-      mipmaps: false,
-      dataFormat: 6402,
-      type: 5125
-    });
-    this.collisionFBOs[collisionGroup] = device.createFramebuffer({
-      id: `collision-${collisionGroup}`,
-      width,
-      height,
-      colorAttachments: [collisionMap],
-      depthStencilAttachment
-    });
-  }
-  destroyFBO(collisionGroup) {
-    var _a, _b;
-    const fbo = this.collisionFBOs[collisionGroup];
-    (_a = fbo.colorAttachments[0]) == null ? void 0 : _a.destroy();
-    (_b = fbo.depthStencilAttachment) == null ? void 0 : _b.destroy();
-    fbo.destroy();
-    delete this.collisionFBOs[collisionGroup];
-  }
-};
-
-// dist/collision-filter/collision-filter-extension.js
-var defaultProps6 = {
-  getCollisionPriority: { type: "accessor", value: 0 },
-  collisionEnabled: true,
-  collisionGroup: { type: "string", value: "default" },
-  collisionTestProps: {}
-};
-var _CollisionFilterExtension = class extends import_core19.LayerExtension {
-  getShaders() {
-    return { modules: [shader_module_default2] };
-  }
-  draw({ uniforms, context, moduleParameters }) {
-    const { collisionEnabled } = this.props;
-    const { collisionFBO, drawToCollisionMap } = moduleParameters;
-    const enabled = collisionEnabled && Boolean(collisionFBO);
-    uniforms.collision_enabled = enabled;
-    if (drawToCollisionMap) {
-      this.props = this.clone(this.props.collisionTestProps).props;
-    }
-  }
-  initializeState(context, extension) {
-    var _a;
-    if (this.getAttributeManager() === null) {
-      return;
-    }
-    (_a = this.context.deck) == null ? void 0 : _a._addDefaultEffect(new CollisionFilterEffect());
-    const attributeManager = this.getAttributeManager();
-    attributeManager.add({
-      collisionPriorities: {
-        size: 1,
-        accessor: "getCollisionPriority",
-        shaderAttributes: {
-          collisionPriorities: { divisor: 0 },
-          instanceCollisionPriorities: { divisor: 1 }
-        }
-      }
-    });
-  }
-  getNeedsPickingBuffer() {
-    return this.props.collisionEnabled;
-  }
-};
-var CollisionFilterExtension = _CollisionFilterExtension;
-(() => {
-  _CollisionFilterExtension.defaultProps = defaultProps6;
-})();
-(() => {
-  _CollisionFilterExtension.extensionName = "CollisionFilterExtension";
-})();
-
-// dist/mask/mask-extension.js
-var import_core21 = require("@deck.gl/core");
-
-// dist/mask/shader-module.js
-var import_core20 = require("@deck.gl/core");
-var vs4 = `
-uniform vec4 mask_bounds;
-uniform bool mask_maskByInstance;
-vec2 mask_getCoords(vec4 position) {
-return (position.xy - mask_bounds.xy) / (mask_bounds.zw - mask_bounds.xy);
-}
-`;
-var fs3 = `
-uniform sampler2D mask_texture;
-uniform int mask_channel;
-uniform bool mask_enabled;
-uniform bool mask_inverted;
-bool mask_isInBounds(vec2 texCoords) {
-if (!mask_enabled) {
-return true;
-}
-vec4 maskColor = texture(mask_texture, texCoords);
-float maskValue = 1.0;
-if (mask_channel == 0) {
-maskValue = maskColor.r;
-} else if (mask_channel == 1) {
-maskValue = maskColor.g;
-} else if (mask_channel == 2) {
-maskValue = maskColor.b;
-} else if (mask_channel == 3) {
-maskValue = maskColor.a;
-}
-if (mask_inverted) {
-return maskValue >= 0.5;
-} else {
-return maskValue < 0.5;
-}
-}
-`;
-var inject5 = {
-  "vs:#decl": `
-out vec2 mask_texCoords;
-`,
-  "vs:#main-end": `
-vec4 mask_common_position;
-if (mask_maskByInstance) {
-mask_common_position = project_position(vec4(geometry.worldPosition, 1.0));
-} else {
-mask_common_position = geometry.position;
-}
-mask_texCoords = mask_getCoords(mask_common_position);
-`,
-  "fs:#decl": `
-in vec2 mask_texCoords;
-`,
-  "fs:#main-start": `
-if (mask_enabled) {
-bool mask = mask_isInBounds(mask_texCoords);
-fragColor = texture(mask_texture, mask_texCoords);
-if (!mask) discard;
-}
-`
-};
-var getMaskUniforms = (opts) => {
-  if (opts && "maskMap" in opts) {
-    return {
-      mask_texture: opts.maskMap
-    };
-  }
-  return {};
-};
-var shader_module_default3 = {
-  name: "mask",
-  dependencies: [import_core20.project],
-  vs: vs4,
-  fs: fs3,
-  inject: inject5,
-  getUniforms: getMaskUniforms
-};
-
 // dist/mask/mask-extension.js
 var defaultProps7 = {
   maskId: "",
@@ -2177,22 +2213,24 @@ return;
 };
 
 // dist/terrain/utils.js
-var import_constants3 = require("@luma.gl/constants");
+var import_constants2 = require("@luma.gl/constants");
 function createRenderTarget(device, opts) {
   return device.createFramebuffer({
     id: opts.id,
     colorAttachments: [
       device.createTexture({
+        id: opts.id,
         ...opts.float && {
           format: "rgba32float",
           type: 5126
         },
         mipmaps: false,
-        sampler: {
+        sampler: opts.interpolate === false ? {
+          minFilter: "nearest",
+          magFilter: "nearest"
+        } : {
           minFilter: "linear",
-          magFilter: "linear",
-          addressModeU: "clamp-to-edge",
-          addressModeV: "clamp-to-edge"
+          magFilter: "linear"
         }
       })
     ]
@@ -2312,7 +2350,8 @@ var TerrainCover = class {
     }
     if (!this.pickingFbo) {
       this.pickingFbo = createRenderTarget(this.targetLayer.context.device, {
-        id: `${this.id}-picking`
+        id: `${this.id}-picking`,
+        interpolate: false
       });
     }
     return this.pickingFbo;
@@ -2359,8 +2398,15 @@ function intersect(b1, b2) {
 }
 
 // dist/terrain/terrain-pass.js
-var import_constants4 = require("@luma.gl/constants");
 var import_core23 = require("@deck.gl/core");
+var TERRAIN_BLENDING = {
+  blendColorOperation: "max",
+  blendColorSrcFactor: "one",
+  blendColorDstFactor: "one",
+  blendAlphaOperation: "max",
+  blendAlphaSrcFactor: "one",
+  blendAlphaDstFactor: "one"
+};
 var TerrainPass = class extends import_core23._LayersPass {
   getRenderableLayers(viewport, opts) {
     const { layers } = opts;
@@ -2381,20 +2427,15 @@ var TerrainPass = class extends import_core23._LayersPass {
       return;
     }
     target.resize(viewport);
-    this.device.withParametersWebGL({
-      clearColor: [0, 0, 0, 0],
-      blend: true,
-      blendFunc: [1, 1],
-      blendEquation: 32776,
-      depthTest: false
-    }, () => this.render({
+    this.render({
       ...opts,
       target,
       pass: "terrain-height-map",
       layers: opts.layers,
       viewports: [viewport],
-      effects: []
-    }));
+      effects: [],
+      clearColor: [0, 0, 0, 0]
+    });
   }
   renderTerrainCover(terrainCover, opts) {
     const target = terrainCover.getRenderFramebuffer();
@@ -2404,17 +2445,23 @@ var TerrainPass = class extends import_core23._LayersPass {
     }
     const layers = terrainCover.filterLayers(opts.layers);
     target.resize(viewport);
-    this.device.withParametersWebGL({
-      clearColor: [0, 0, 0, 0],
-      depthTest: false
-    }, () => this.render({
+    this.render({
       ...opts,
       target,
       pass: `terrain-cover-${terrainCover.id}`,
       layers,
       effects: [],
-      viewports: [viewport]
-    }));
+      viewports: [viewport],
+      clearColor: [0, 0, 0, 0]
+    });
+  }
+  getLayerParameters(layer, layerIndex, viewport) {
+    return {
+      ...layer.props.parameters,
+      blend: true,
+      depthTest: false,
+      ...layer.props.operation.includes("terrain") && TERRAIN_BLENDING
+    };
   }
 };
 
@@ -2452,9 +2499,7 @@ var TerrainPickingPass = class extends import_core24._PickLayersPass {
       layers.unshift(terrainLayer);
     }
     target.resize(viewport);
-    this.device.withParametersWebGL({
-      depthTest: false
-    }, () => this.render({
+    this.render({
       ...opts,
       pickingFBO: target,
       pass: `terrain-cover-picking-${terrainCover.id}`,
@@ -2464,15 +2509,17 @@ var TerrainPickingPass = class extends import_core24._PickLayersPass {
       cullRect: void 0,
       deviceRect: viewport,
       pickZ: false
-    }));
+    });
   }
   getLayerParameters(layer, layerIndex, viewport) {
+    let parameters2;
     if (this.drawParameters[layer.id]) {
-      return this.drawParameters[layer.id];
+      parameters2 = this.drawParameters[layer.id];
+    } else {
+      parameters2 = super.getLayerParameters(layer, layerIndex, viewport);
+      parameters2.blend = true;
     }
-    const parameters2 = super.getLayerParameters(layer, layerIndex, viewport);
-    parameters2.blend = true;
-    return parameters2;
+    return { ...parameters2, depthTest: false };
   }
 };
 
@@ -2555,7 +2602,7 @@ var TerrainEffect = class {
     this.isDrapingEnabled = false;
     this.terrainCovers = /* @__PURE__ */ new Map();
   }
-  initialize(device) {
+  setup({ device, deck }) {
     this.dummyHeightMap = device.createTexture({
       width: 1,
       height: 1,
@@ -2568,17 +2615,9 @@ var TerrainEffect = class {
     } else {
       import_core25.log.warn("Terrain offset mode is not supported by this browser")();
     }
-    (0, import_core25.getShaderAssembler)().addDefaultModule(terrainModule);
+    deck._addDefaultShaderModule(terrainModule);
   }
-  preRender(device, opts) {
-    if (!this.dummyHeightMap) {
-      this.initialize(device);
-      for (const layer of opts.layers) {
-        if (layer.props.operation.includes("terrain")) {
-          layer.setChangeFlags({ extensionsChanged: true });
-        }
-      }
-    }
+  preRender(opts) {
     if (opts.pickZ) {
       this.isDrapingEnabled = false;
       return;
@@ -2614,7 +2653,7 @@ var TerrainEffect = class {
       terrainSkipRender: terrainDrawMode === "drape" || !layer.props.operation.includes("draw")
     };
   }
-  cleanup() {
+  cleanup({ deck }) {
     if (this.dummyHeightMap) {
       this.dummyHeightMap.delete();
       this.dummyHeightMap = void 0;
@@ -2627,7 +2666,7 @@ var TerrainEffect = class {
       terrainCover.delete();
     }
     this.terrainCovers.clear();
-    (0, import_core25.getShaderAssembler)().removeDefaultModule(terrainModule);
+    deck._removeDefaultShaderModule(terrainModule);
   }
   _updateHeightMap(terrainLayers, viewport, opts) {
     if (!this.heightMap) {