@deck.gl/extensions 9.0.0-beta.9 → 9.0.0

package/dist/index.cjs

@@ -488,7 +488,7 @@ var DATA_TYPE_FROM_SIZE = {
   4: "vec4"
 };
 var _DataFilterExtension = class extends import_core3.LayerExtension {
-  constructor(opts) {
+  constructor(opts = {}) {
     super({ ...defaultOptions, ...opts });
   }
   getShaders(extension) {
@@ -944,6 +944,7 @@ var _PathStyleExtension = class extends import_core6.LayerExtension {
       }
       prevP = p;
     }
+    result[geometrySize - 1] = 0;
     return result;
   }
 };
@@ -1058,9 +1059,7 @@ var defaultProps4 = {
     type: "image",
     value: null,
     async: true,
-    parameters: {
-      minFilter: "linear"
-    }
+    parameters: { lodMaxClamp: 0 }
   },
   fillPatternMapping: { type: "object", value: {}, async: true },
   fillPatternMask: true,
@@ -1261,7 +1260,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");
@@ -1350,8 +1349,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");
@@ -1359,13 +1358,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 {
@@ -1379,14 +1376,317 @@ var CollisionFilterPass = class extends import_core12._LayersPass {
   }
 };
 
+// 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,
+      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_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_core15 = require("@deck.gl/core");
-var import_core16 = require("@math.gl/core");
+var import_core19 = require("@deck.gl/core");
+var import_core20 = 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 {
+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;
@@ -1409,16 +1709,17 @@ var MaskPass = class extends import_core13._LayersPass {
     });
   }
   render(options) {
-    const colorMask = [false, false, false, false];
-    colorMask[options.channel] = true;
+    const colorMask = 2 ** options.channel;
     const clearColor = [255, 255, 255, 255];
-    return this.device.withParametersWebGL({
+    super.render({ ...options, clearColor, colorMask, target: this.fbo, pass: "mask" });
+  }
+  getLayerParameters(layer, layerIndex, viewport) {
+    return {
+      ...layer.props.parameters,
       blend: true,
-      blendFunc: [0, 1],
-      blendEquation: 32778,
-      colorMask,
-      depthTest: false
-    }, () => super.render({ ...options, clearColor, target: this.fbo, pass: "mask" }));
+      depthTest: false,
+      ...MASK_BLENDING
+    };
   }
   shouldDrawLayer(layer) {
     return layer.props.operation.includes("mask");
@@ -1430,7 +1731,7 @@ var MaskPass = class extends import_core13._LayersPass {
 };
 
 // dist/utils/projection-utils.js
-var import_core14 = require("@deck.gl/core");
+var import_core18 = require("@deck.gl/core");
 function joinLayerBounds(layers, viewport) {
   const bounds = [Infinity, Infinity, -Infinity, -Infinity];
   for (const layer of layers) {
@@ -1479,7 +1780,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,
@@ -1489,7 +1790,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,
@@ -1558,14 +1859,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 };
     }
@@ -1576,15 +1879,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) {
@@ -1613,7 +1912,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,
@@ -1640,366 +1939,71 @@ var MaskEffect = class {
     }
     this.masks[channelInfo.id] = {
       index: channelInfo.index,
-      bounds: channelInfo.maskBounds,
-      coordinateOrigin: channelInfo.coordinateOrigin,
-      coordinateSystem: channelInfo.coordinateSystem
-    };
-    return didRender;
-  }
-  _sortMaskChannels(maskLayers) {
-    const channelMap = {};
-    let channelCount = 0;
-    for (const layer of maskLayers) {
-      const { id } = layer.root;
-      let channelInfo = channelMap[id];
-      if (!channelInfo) {
-        if (++channelCount > 4) {
-          import_core15.log.warn("Too many mask layers. The max supported is 4")();
-          continue;
-        }
-        channelInfo = {
-          id,
-          index: this.channels.findIndex((c) => (c == null ? void 0 : c.id) === id),
-          layers: [],
-          layerBounds: [],
-          coordinateOrigin: layer.root.props.coordinateOrigin,
-          coordinateSystem: layer.root.props.coordinateSystem
-        };
-        channelMap[id] = channelInfo;
-      }
-      channelInfo.layers.push(layer);
-      channelInfo.layerBounds.push(layer.getBounds());
-    }
-    for (let i = 0; i < 4; i++) {
-      const channelInfo = this.channels[i];
-      if (!channelInfo || !(channelInfo.id in channelMap)) {
-        this.channels[i] = null;
-      }
-    }
-    for (const maskId in channelMap) {
-      const channelInfo = channelMap[maskId];
-      if (channelInfo.index < 0) {
-        channelInfo.index = this.channels.findIndex((c) => !c);
-        this.channels[channelInfo.index] = channelInfo;
-      }
-    }
-    return channelMap;
-  }
-  getModuleParameters() {
-    return {
-      maskMap: this.masks ? this.maskMap : this.dummyMaskMap,
-      maskChannels: this.masks
-    };
-  }
-  cleanup() {
-    if (this.dummyMaskMap) {
-      this.dummyMaskMap.delete();
-      this.dummyMaskMap = void 0;
-    }
-    if (this.maskPass) {
-      this.maskPass.delete();
-      this.maskPass = void 0;
-      this.maskMap = void 0;
-    }
-    this.lastViewport = void 0;
-    this.masks = null;
-    this.channels.length = 0;
-  }
-};
-
-// 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
-        }
-      });
-    }
+      bounds: channelInfo.maskBounds,
+      coordinateOrigin: channelInfo.coordinateOrigin,
+      coordinateSystem: channelInfo.coordinateSystem
+    };
+    return didRender;
   }
-  _groupByCollisionGroup(device, collisionLayers) {
+  _sortMaskChannels(maskLayers) {
     const channelMap = {};
-    for (const layer of collisionLayers) {
-      const { collisionGroup } = layer.props;
-      let channelInfo = channelMap[collisionGroup];
+    let channelCount = 0;
+    for (const layer of maskLayers) {
+      const { id } = layer.root;
+      let channelInfo = channelMap[id];
       if (!channelInfo) {
-        channelInfo = { collisionGroup, layers: [], layerBounds: [], allLayersLoaded: true };
-        channelMap[collisionGroup] = channelInfo;
+        if (++channelCount > 4) {
+          import_core19.log.warn("Too many mask layers. The max supported is 4")();
+          continue;
+        }
+        channelInfo = {
+          id,
+          index: this.channels.findIndex((c) => (c == null ? void 0 : c.id) === id),
+          layers: [],
+          layerBounds: [],
+          coordinateOrigin: layer.root.props.coordinateOrigin,
+          coordinateSystem: layer.root.props.coordinateSystem
+        };
+        channelMap[id] = 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 (let i = 0; i < 4; i++) {
+      const channelInfo = this.channels[i];
+      if (!channelInfo || !(channelInfo.id in channelMap)) {
+        this.channels[i] = null;
       }
     }
-    for (const collisionGroup of Object.keys(this.collisionFBOs)) {
-      if (!channelMap[collisionGroup]) {
-        this.destroyFBO(collisionGroup);
+    for (const maskId in channelMap) {
+      const channelInfo = channelMap[maskId];
+      if (channelInfo.index < 0) {
+        channelInfo.index = this.channels.findIndex((c) => !c);
+        this.channels[channelInfo.index] = channelInfo;
       }
     }
     return channelMap;
   }
-  getModuleParameters(layer) {
-    const { collisionGroup } = layer.props;
-    const { collisionFBOs, dummyCollisionMap } = this;
-    return { collisionFBO: collisionFBOs[collisionGroup], dummyCollisionMap };
+  getModuleParameters() {
+    return {
+      maskMap: this.masks ? this.maskMap : this.dummyMaskMap,
+      maskChannels: this.masks
+    };
   }
   cleanup() {
-    if (this.dummyCollisionMap) {
-      this.dummyCollisionMap.delete();
-      this.dummyCollisionMap = void 0;
+    if (this.dummyMaskMap) {
+      this.dummyMaskMap.delete();
+      this.dummyMaskMap = void 0;
     }
-    this.channels = {};
-    for (const collisionGroup of Object.keys(this.collisionFBOs)) {
-      this.destroyFBO(collisionGroup);
+    if (this.maskPass) {
+      this.maskPass.delete();
+      this.maskPass = void 0;
+      this.maskMap = void 0;
     }
-    this.collisionFBOs = {};
     this.lastViewport = void 0;
+    this.masks = null;
+    this.channels.length = 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
@@ -2179,12 +2183,13 @@ 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
@@ -2361,8 +2366,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;
@@ -2383,20 +2395,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();
@@ -2406,17 +2413,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
+    };
   }
 };
 
@@ -2454,9 +2467,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}`,
@@ -2466,15 +2477,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 };
   }
 };
 
@@ -2557,7 +2570,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,
@@ -2570,17 +2583,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;
@@ -2616,7 +2621,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;
@@ -2629,6 +2634,7 @@ var TerrainEffect = class {
       terrainCover.delete();
     }
     this.terrainCovers.clear();
+    deck._removeDefaultShaderModule(terrainModule);
   }
   _updateHeightMap(terrainLayers, viewport, opts) {
     if (!this.heightMap) {