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

package/dist/dist.dev.js

@@ -1208,7 +1208,7 @@ void main() {
     4: "vec4"
   };
   var DataFilterExtension = class extends import_core4.LayerExtension {
-    constructor(opts) {
+    constructor(opts = {}) {
       super({ ...defaultOptions, ...opts });
     }
     getShaders(extension) {
@@ -2101,11 +2101,7 @@ vec4_dot_fp64(a, tmp, out_val[i]);
     printRowMajor: true,
     _cartographicRadians: false
   };
-  globalThis.mathgl = globalThis.mathgl || {
-    config: {
-      ...DEFAULT_CONFIG
-    }
-  };
+  globalThis.mathgl = globalThis.mathgl || { config: { ...DEFAULT_CONFIG } };
   var config = globalThis.mathgl.config;
   function isArray(value) {
     return Array.isArray(value) || ArrayBuffer.isView(value) && !(value instanceof DataView);
@@ -2533,7 +2529,7 @@ vec4_dot_fp64(a, tmp, out_val[i]);
     return out;
   }
   function str(a) {
-    return "vec3(".concat(a[0], ", ").concat(a[1], ", ").concat(a[2], ")");
+    return `vec3(${a[0]}, ${a[1]}, ${a[2]})`;
   }
   function exactEquals(a, b) {
     return a[0] === b[0] && a[1] === b[1] && a[2] === b[2];
@@ -2883,6 +2879,7 @@ in float instanceOffsets;
         }
         prevP = p;
       }
+      result[geometrySize - 1] = 0;
       return result;
     }
   };
@@ -2999,9 +2996,7 @@ const float FILL_UV_SCALE = 512.0 / 40000000.0;
       type: "image",
       value: null,
       async: true,
-      parameters: {
-        minFilter: "linear"
-      }
+      parameters: { lodMaxClamp: 0 }
     },
     fillPatternMapping: { type: "object", value: {}, async: true },
     fillPatternMask: true,
@@ -3193,7 +3188,7 @@ in vec2 clip_commonPosition;
   ClipExtension.extensionName = "ClipExtension";
 
   // src/collision-filter/collision-filter-extension.ts
-  var import_core20 = __toESM(require_core(), 1);
+  var import_core16 = __toESM(require_core(), 1);
 
   // src/collision-filter/shader-module.ts
   var import_core12 = __toESM(require_core(), 1);
@@ -3294,7 +3289,7 @@ float collision_isVisible(vec2 texCoords, vec3 pickingColor) {
   };
 
   // src/collision-filter/collision-filter-effect.ts
-  var import_core19 = __toESM(require_core(), 1);
+  var import_core15 = __toESM(require_core(), 1);
 
   // src/collision-filter/collision-filter-pass.ts
   var import_core13 = __toESM(require_core(), 1);
@@ -3302,16 +3297,11 @@ float collision_isVisible(vec2 texCoords, vec3 pickingColor) {
     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 {
@@ -3325,419 +3315,83 @@ float collision_isVisible(vec2 texCoords, vec3 pickingColor) {
     }
   };
 
-  // src/mask/mask-effect.ts
-  var import_core16 = __toESM(require_core(), 1);
-
-  // src/mask/mask-pass.ts
-  var import_core14 = __toESM(require_core(), 1);
-  var MaskPass = class extends import_core14._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 = [false, false, false, false];
-      colorMask[options.channel] = true;
-      const clearColor = [255, 255, 255, 255];
-      return this.device.withParametersWebGL(
-        {
-          blend: true,
-          blendFunc: [GLEnum.ZERO, GLEnum.ONE],
-          blendEquation: GLEnum.FUNC_SUBTRACT,
-          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();
-    }
-  };
-
-  // src/utils/projection-utils.ts
-  var import_core15 = __toESM(require_core(), 1);
-  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;
-    if (bounds[2] <= bounds[0] || bounds[3] <= bounds[1]) {
-      return null;
-    }
-    const centerWorld = viewport.unprojectPosition([
-      (bounds[0] + bounds[2]) / 2,
-      (bounds[1] + bounds[3]) / 2,
-      0
-    ]);
-    let { width, height, zoom } = opts;
-    if (zoom === void 0) {
-      width = width - border * 2;
-      height = height - border * 2;
-      const scale2 = Math.min(width / (bounds[2] - bounds[0]), height / (bounds[3] - bounds[1]));
-      zoom = Math.min(Math.log2(scale2), 20);
-    } else if (!width || !height) {
-      const scale2 = 2 ** zoom;
-      width = Math.round(Math.abs(bounds[2] - bounds[0]) * scale2);
-      height = Math.round(Math.abs(bounds[3] - bounds[1]) * scale2);
-      const maxSize = MAX_VIEWPORT_SIZE - border * 2;
-      if (width > maxSize || height > maxSize) {
-        const r = maxSize / Math.max(width, height);
-        width = Math.round(width * r);
-        height = Math.round(height * r);
-        zoom += Math.log2(r);
-      }
-    }
-    return isGeospatial ? new import_core15.WebMercatorViewport({
-      id: viewport.id,
-      x: border,
-      y: border,
-      width,
-      height,
-      longitude: centerWorld[0],
-      latitude: centerWorld[1],
-      zoom,
-      orthographic: true
-    }) : new import_core15.OrthographicViewport({
-      id: viewport.id,
-      x: border,
-      y: border,
-      width,
-      height,
-      target: centerWorld,
-      zoom,
-      flipY: false
-    });
-  }
-  function getViewportBounds(viewport, zRange) {
-    let viewportBoundsWorld;
-    if (zRange && zRange.length === 2) {
-      const [minZ, maxZ] = zRange;
-      const bounds0 = viewport.getBounds({ z: minZ });
-      const bounds1 = viewport.getBounds({ z: maxZ });
-      viewportBoundsWorld = [
-        Math.min(bounds0[0], bounds1[0]),
-        Math.min(bounds0[1], bounds1[1]),
-        Math.max(bounds0[2], bounds1[2]),
-        Math.max(bounds0[3], bounds1[3])
-      ];
-    } else {
-      viewportBoundsWorld = viewport.getBounds();
-    }
-    const viewportBottomLeftCommon = viewport.projectPosition(viewportBoundsWorld.slice(0, 2));
-    const viewportTopRightCommon = viewport.projectPosition(viewportBoundsWorld.slice(2, 4));
-    return [
-      viewportBottomLeftCommon[0],
-      viewportBottomLeftCommon[1],
-      viewportTopRightCommon[0],
-      viewportTopRightCommon[1]
-    ];
-  }
-  function getRenderBounds(layerBounds, viewport, zRange) {
-    if (!layerBounds) {
-      return [0, 0, 1, 1];
-    }
-    const viewportBounds = getViewportBounds(viewport, zRange);
-    const paddedBounds = doubleBounds(viewportBounds);
-    if (layerBounds[2] - layerBounds[0] <= paddedBounds[2] - paddedBounds[0] && layerBounds[3] - layerBounds[1] <= paddedBounds[3] - paddedBounds[1]) {
-      return layerBounds;
-    }
-    return [
-      Math.max(layerBounds[0], paddedBounds[0]),
-      Math.max(layerBounds[1], paddedBounds[1]),
-      Math.min(layerBounds[2], paddedBounds[2]),
-      Math.min(layerBounds[3], paddedBounds[3])
-    ];
-  }
-  function doubleBounds(bounds) {
-    const dx = bounds[2] - bounds[0];
-    const dy = bounds[3] - bounds[1];
-    const centerX = (bounds[0] + bounds[2]) / 2;
-    const centerY = (bounds[1] + bounds[3]) / 2;
-    return [centerX - dx, centerY - dy, centerX + dx, centerY + dy];
-  }
-
-  // src/mask/mask-effect.ts
-  var MaskEffect = class {
+  // src/collision-filter/collision-filter-effect.ts
+  var DOWNSCALE = 2;
+  var CollisionFilterEffect = class {
     constructor() {
-      this.id = "mask-effect";
+      this.id = "collision-filter-effect";
       this.props = null;
       this.useInPicking = true;
-      this.order = 0;
-      this.channels = [];
-      this.masks = null;
+      this.order = 1;
+      this.channels = {};
+      this.collisionFBOs = {};
     }
-    preRender(device, { layers, layerFilter, viewports, onViewportActive, views, isPicking }) {
-      let didRender = false;
-      if (!this.dummyMaskMap) {
-        this.dummyMaskMap = device.createTexture({
-          width: 1,
-          height: 1
-        });
-      }
+    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 = {}
+    }) {
+      const { device } = this.context;
       if (isPicking) {
-        return { didRender };
-      }
-      const maskLayers = layers.filter((l) => l.props.visible && l.props.operation.includes("mask"));
-      if (maskLayers.length === 0) {
-        this.masks = null;
-        this.channels.length = 0;
-        return { didRender };
+        return;
       }
-      this.masks = {};
-      if (!this.maskPass) {
-        this.maskPass = new MaskPass(device, { id: "default-mask" });
-        this.maskMap = this.maskPass.maskMap;
+      const collisionLayers = layers.filter(
+        ({ props: { visible, collisionEnabled } }) => visible && collisionEnabled
+      );
+      if (collisionLayers.length === 0) {
+        this.channels = {};
+        return;
       }
-      const channelMap = this._sortMaskChannels(maskLayers);
+      const effects = allEffects?.filter((e) => e.useInPicking && preRenderStats[e.id]);
+      const maskEffectRendered = preRenderStats["mask-effect"]?.didRender;
+      const channels = this._groupByCollisionGroup(device, collisionLayers);
       const viewport = viewports[0];
-      const viewportChanged = !this.lastViewport || !this.lastViewport.equals(viewport);
-      if (viewport.resolution !== void 0) {
-        import_core16.log.warn("MaskExtension is not supported in GlobeView")();
-        return { didRender };
-      }
-      for (const maskId in channelMap) {
-        const result = this._renderChannel(channelMap[maskId], {
+      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
         });
-        didRender ||= result;
       }
-      return { didRender };
     }
-    _renderChannel(channelInfo, {
+    _render(renderInfo, {
+      effects,
       layerFilter,
       onViewportActive,
       views,
       viewport,
       viewportChanged
     }) {
-      let didRender = false;
-      const oldChannelInfo = this.channels[channelInfo.index];
-      if (!oldChannelInfo) {
-        return didRender;
+      const { collisionGroup } = renderInfo;
+      const oldRenderInfo = this.channels[collisionGroup];
+      if (!oldRenderInfo) {
+        return;
       }
-      const maskChanged = channelInfo === oldChannelInfo || channelInfo.layers.length !== oldChannelInfo.layers.length || channelInfo.layers.some(
-        (layer, i) => layer !== oldChannelInfo.layers[i] || layer.props.transitions
-      ) || channelInfo.layerBounds.some((b, i) => b !== oldChannelInfo.layerBounds[i]);
-      channelInfo.bounds = oldChannelInfo.bounds;
-      channelInfo.maskBounds = oldChannelInfo.maskBounds;
-      this.channels[channelInfo.index] = channelInfo;
-      if (maskChanged || viewportChanged) {
-        this.lastViewport = viewport;
-        const layerBounds = joinLayerBounds(channelInfo.layers, viewport);
-        channelInfo.bounds = layerBounds && getRenderBounds(layerBounds, viewport);
-        if (maskChanged || !equals(channelInfo.bounds, oldChannelInfo.bounds)) {
-          const { maskPass, maskMap } = this;
-          const maskViewport = layerBounds && makeViewport({
-            bounds: channelInfo.bounds,
-            viewport,
-            width: maskMap.width,
-            height: maskMap.height,
-            border: 1
-          });
-          channelInfo.maskBounds = maskViewport ? maskViewport.getBounds() : [0, 0, 1, 1];
-          maskPass.render({
-            pass: "mask",
-            channel: channelInfo.index,
-            layers: channelInfo.layers,
-            layerFilter,
-            viewports: maskViewport ? [maskViewport] : [],
-            onViewportActive,
-            views,
-            moduleParameters: {
-              devicePixelRatio: 1
-            }
-          });
-          didRender = true;
-        }
-      }
-      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_core16.log.warn("Too many mask layers. The max supported is 4")();
-            continue;
-          }
-          channelInfo = {
-            id,
-            index: this.channels.findIndex((c) => 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;
-    }
-  };
-
-  // src/collision-filter/collision-filter-effect.ts
-  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 = {}
-    }) {
-      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?.filter((e) => e.constructor === MaskEffect);
-      const maskEffectRendered = preRenderStats["mask-effect"]?.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_core19._deepEqual)(oldRenderInfo.layers, renderInfo.layers, 1) || renderInfo.layerBounds.some((b, i) => !equals(b, oldRenderInfo.layerBounds[i])) || renderInfo.allLayersLoaded !== oldRenderInfo.allLayersLoaded || renderInfo.layers.some((layer) => layer.props.transitions);
-      this.channels[collisionGroup] = renderInfo;
-      if (needsRender) {
+      const needsRender = viewportChanged || renderInfo === oldRenderInfo || !(0, import_core15._deepEqual)(oldRenderInfo.layers, renderInfo.layers, 1) || renderInfo.layerBounds.some((b, i) => !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, {
@@ -3848,7 +3502,7 @@ float collision_isVisible(vec2 texCoords, vec3 pickingColor) {
     collisionGroup: { type: "string", value: "default" },
     collisionTestProps: {}
   };
-  var CollisionFilterExtension = class extends import_core20.LayerExtension {
+  var CollisionFilterExtension = class extends import_core16.LayerExtension {
     getShaders() {
       return { modules: [shader_module_default2] };
     }
@@ -3889,7 +3543,7 @@ float collision_isVisible(vec2 texCoords, vec3 pickingColor) {
   var import_core22 = __toESM(require_core(), 1);
 
   // src/mask/shader-module.ts
-  var import_core21 = __toESM(require_core(), 1);
+  var import_core17 = __toESM(require_core(), 1);
   var vs4 = glsl`
 uniform vec4 mask_bounds;
 uniform bool mask_maskByInstance;
@@ -3963,13 +3617,361 @@ in vec2 mask_texCoords;
   };
   var shader_module_default3 = {
     name: "mask",
-    dependencies: [import_core21.project],
+    dependencies: [import_core17.project],
     vs: vs4,
     fs: fs3,
     inject: inject5,
     getUniforms: getMaskUniforms
   };
 
+  // src/mask/mask-effect.ts
+  var import_core20 = __toESM(require_core(), 1);
+
+  // src/mask/mask-pass.ts
+  var import_core18 = __toESM(require_core(), 1);
+  var MASK_BLENDING = {
+    blendColorOperation: "subtract",
+    blendColorSrcFactor: "zero",
+    blendColorDstFactor: "one",
+    blendAlphaOperation: "subtract",
+    blendAlphaSrcFactor: "zero",
+    blendAlphaDstFactor: "one"
+  };
+  var MaskPass = class extends import_core18._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();
+    }
+  };
+
+  // src/utils/projection-utils.ts
+  var import_core19 = __toESM(require_core(), 1);
+  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;
+    if (bounds[2] <= bounds[0] || bounds[3] <= bounds[1]) {
+      return null;
+    }
+    const centerWorld = viewport.unprojectPosition([
+      (bounds[0] + bounds[2]) / 2,
+      (bounds[1] + bounds[3]) / 2,
+      0
+    ]);
+    let { width, height, zoom } = opts;
+    if (zoom === void 0) {
+      width = width - border * 2;
+      height = height - border * 2;
+      const scale2 = Math.min(width / (bounds[2] - bounds[0]), height / (bounds[3] - bounds[1]));
+      zoom = Math.min(Math.log2(scale2), 20);
+    } else if (!width || !height) {
+      const scale2 = 2 ** zoom;
+      width = Math.round(Math.abs(bounds[2] - bounds[0]) * scale2);
+      height = Math.round(Math.abs(bounds[3] - bounds[1]) * scale2);
+      const maxSize = MAX_VIEWPORT_SIZE - border * 2;
+      if (width > maxSize || height > maxSize) {
+        const r = maxSize / Math.max(width, height);
+        width = Math.round(width * r);
+        height = Math.round(height * r);
+        zoom += Math.log2(r);
+      }
+    }
+    return isGeospatial ? new import_core19.WebMercatorViewport({
+      id: viewport.id,
+      x: border,
+      y: border,
+      width,
+      height,
+      longitude: centerWorld[0],
+      latitude: centerWorld[1],
+      zoom,
+      orthographic: true
+    }) : new import_core19.OrthographicViewport({
+      id: viewport.id,
+      x: border,
+      y: border,
+      width,
+      height,
+      target: centerWorld,
+      zoom,
+      flipY: false
+    });
+  }
+  function getViewportBounds(viewport, zRange) {
+    let viewportBoundsWorld;
+    if (zRange && zRange.length === 2) {
+      const [minZ, maxZ] = zRange;
+      const bounds0 = viewport.getBounds({ z: minZ });
+      const bounds1 = viewport.getBounds({ z: maxZ });
+      viewportBoundsWorld = [
+        Math.min(bounds0[0], bounds1[0]),
+        Math.min(bounds0[1], bounds1[1]),
+        Math.max(bounds0[2], bounds1[2]),
+        Math.max(bounds0[3], bounds1[3])
+      ];
+    } else {
+      viewportBoundsWorld = viewport.getBounds();
+    }
+    const viewportBottomLeftCommon = viewport.projectPosition(viewportBoundsWorld.slice(0, 2));
+    const viewportTopRightCommon = viewport.projectPosition(viewportBoundsWorld.slice(2, 4));
+    return [
+      viewportBottomLeftCommon[0],
+      viewportBottomLeftCommon[1],
+      viewportTopRightCommon[0],
+      viewportTopRightCommon[1]
+    ];
+  }
+  function getRenderBounds(layerBounds, viewport, zRange) {
+    if (!layerBounds) {
+      return [0, 0, 1, 1];
+    }
+    const viewportBounds = getViewportBounds(viewport, zRange);
+    const paddedBounds = doubleBounds(viewportBounds);
+    if (layerBounds[2] - layerBounds[0] <= paddedBounds[2] - paddedBounds[0] && layerBounds[3] - layerBounds[1] <= paddedBounds[3] - paddedBounds[1]) {
+      return layerBounds;
+    }
+    return [
+      Math.max(layerBounds[0], paddedBounds[0]),
+      Math.max(layerBounds[1], paddedBounds[1]),
+      Math.min(layerBounds[2], paddedBounds[2]),
+      Math.min(layerBounds[3], paddedBounds[3])
+    ];
+  }
+  function doubleBounds(bounds) {
+    const dx = bounds[2] - bounds[0];
+    const dy = bounds[3] - bounds[1];
+    const centerX = (bounds[0] + bounds[2]) / 2;
+    const centerY = (bounds[1] + bounds[3]) / 2;
+    return [centerX - dx, centerY - dy, centerX + dx, centerY + dy];
+  }
+
+  // src/mask/mask-effect.ts
+  var MaskEffect = class {
+    constructor() {
+      this.id = "mask-effect";
+      this.props = null;
+      this.useInPicking = true;
+      this.order = 0;
+      this.channels = [];
+      this.masks = null;
+    }
+    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 (isPicking) {
+        return { didRender };
+      }
+      const maskLayers = layers.filter((l) => l.props.visible && l.props.operation.includes("mask"));
+      if (maskLayers.length === 0) {
+        this.masks = null;
+        this.channels.length = 0;
+        return { didRender };
+      }
+      this.masks = {};
+      const channelMap = this._sortMaskChannels(maskLayers);
+      const viewport = viewports[0];
+      const viewportChanged = !this.lastViewport || !this.lastViewport.equals(viewport);
+      if (viewport.resolution !== void 0) {
+        import_core20.log.warn("MaskExtension is not supported in GlobeView")();
+        return { didRender };
+      }
+      for (const maskId in channelMap) {
+        const result = this._renderChannel(channelMap[maskId], {
+          layerFilter,
+          onViewportActive,
+          views,
+          viewport,
+          viewportChanged
+        });
+        didRender ||= result;
+      }
+      return { didRender };
+    }
+    _renderChannel(channelInfo, {
+      layerFilter,
+      onViewportActive,
+      views,
+      viewport,
+      viewportChanged
+    }) {
+      let didRender = false;
+      const oldChannelInfo = this.channels[channelInfo.index];
+      if (!oldChannelInfo) {
+        return didRender;
+      }
+      const maskChanged = channelInfo === oldChannelInfo || channelInfo.layers.length !== oldChannelInfo.layers.length || channelInfo.layers.some(
+        (layer, i) => layer !== oldChannelInfo.layers[i] || layer.props.transitions
+      ) || channelInfo.layerBounds.some((b, i) => b !== oldChannelInfo.layerBounds[i]);
+      channelInfo.bounds = oldChannelInfo.bounds;
+      channelInfo.maskBounds = oldChannelInfo.maskBounds;
+      this.channels[channelInfo.index] = channelInfo;
+      if (maskChanged || viewportChanged) {
+        this.lastViewport = viewport;
+        const layerBounds = joinLayerBounds(channelInfo.layers, viewport);
+        channelInfo.bounds = layerBounds && getRenderBounds(layerBounds, viewport);
+        if (maskChanged || !equals(channelInfo.bounds, oldChannelInfo.bounds)) {
+          const { maskPass, maskMap } = this;
+          const maskViewport = layerBounds && makeViewport({
+            bounds: channelInfo.bounds,
+            viewport,
+            width: maskMap.width,
+            height: maskMap.height,
+            border: 1
+          });
+          channelInfo.maskBounds = maskViewport ? maskViewport.getBounds() : [0, 0, 1, 1];
+          maskPass.render({
+            pass: "mask",
+            channel: channelInfo.index,
+            layers: channelInfo.layers,
+            layerFilter,
+            viewports: maskViewport ? [maskViewport] : [],
+            onViewportActive,
+            views,
+            moduleParameters: {
+              devicePixelRatio: 1
+            }
+          });
+          didRender = true;
+        }
+      }
+      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_core20.log.warn("Too many mask layers. The max supported is 4")();
+            continue;
+          }
+          channelInfo = {
+            id,
+            index: this.channels.findIndex((c) => 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;
+    }
+  };
+
   // src/mask/mask-extension.ts
   var defaultProps7 = {
     maskId: "",
@@ -4154,6 +4156,7 @@ if ((terrain_mode == TERRAIN_MODE_USE_COVER) || (terrain_mode == TERRAIN_MODE_US
       id: opts.id,
       colorAttachments: [
         device.createTexture({
+          id: opts.id,
           ...opts.float && {
             format: "rgba32float",
             type: GLEnum.FLOAT
@@ -4335,6 +4338,14 @@ if ((terrain_mode == TERRAIN_MODE_USE_COVER) || (terrain_mode == TERRAIN_MODE_US
 
   // src/terrain/terrain-pass.ts
   var import_core24 = __toESM(require_core(), 1);
+  var TERRAIN_BLENDING = {
+    blendColorOperation: "max",
+    blendColorSrcFactor: "one",
+    blendColorDstFactor: "one",
+    blendAlphaOperation: "max",
+    blendAlphaSrcFactor: "one",
+    blendAlphaDstFactor: "one"
+  };
   var TerrainPass = class extends import_core24._LayersPass {
     getRenderableLayers(viewport, opts) {
       const { layers } = opts;
@@ -4355,23 +4366,15 @@ if ((terrain_mode == TERRAIN_MODE_USE_COVER) || (terrain_mode == TERRAIN_MODE_US
         return;
       }
       target.resize(viewport);
-      this.device.withParametersWebGL(
-        {
-          clearColor: [0, 0, 0, 0],
-          blend: true,
-          blendFunc: [GLEnum.ONE, GLEnum.ONE],
-          blendEquation: GLEnum.MAX,
-          depthTest: false
-        },
-        () => this.render({
-          ...opts,
-          target,
-          pass: "terrain-height-map",
-          layers: opts.layers,
-          viewports: [viewport],
-          effects: []
-        })
-      );
+      this.render({
+        ...opts,
+        target,
+        pass: "terrain-height-map",
+        layers: opts.layers,
+        viewports: [viewport],
+        effects: [],
+        clearColor: [0, 0, 0, 0]
+      });
     }
     renderTerrainCover(terrainCover, opts) {
       const target = terrainCover.getRenderFramebuffer();
@@ -4381,20 +4384,23 @@ if ((terrain_mode == TERRAIN_MODE_USE_COVER) || (terrain_mode == TERRAIN_MODE_US
       }
       const layers = terrainCover.filterLayers(opts.layers);
       target.resize(viewport);
-      this.device.withParametersWebGL(
-        {
-          clearColor: [0, 0, 0, 0],
-          depthTest: false
-        },
-        () => this.render({
-          ...opts,
-          target,
-          pass: `terrain-cover-${terrainCover.id}`,
-          layers,
-          effects: [],
-          viewports: [viewport]
-        })
-      );
+      this.render({
+        ...opts,
+        target,
+        pass: `terrain-cover-${terrainCover.id}`,
+        layers,
+        effects: [],
+        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
+      };
     }
   };
 
@@ -4432,30 +4438,27 @@ if ((terrain_mode == TERRAIN_MODE_USE_COVER) || (terrain_mode == TERRAIN_MODE_US
         layers.unshift(terrainLayer);
       }
       target.resize(viewport);
-      this.device.withParametersWebGL(
-        {
-          depthTest: false
-        },
-        () => this.render({
-          ...opts,
-          pickingFBO: target,
-          pass: `terrain-cover-picking-${terrainCover.id}`,
-          layers,
-          effects: [],
-          viewports: [viewport],
-          cullRect: void 0,
-          deviceRect: viewport,
-          pickZ: false
-        })
-      );
+      this.render({
+        ...opts,
+        pickingFBO: target,
+        pass: `terrain-cover-picking-${terrainCover.id}`,
+        layers,
+        effects: [],
+        viewports: [viewport],
+        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 };
     }
   };
 
@@ -4540,7 +4543,7 @@ if ((terrain_mode == TERRAIN_MODE_USE_COVER) || (terrain_mode == TERRAIN_MODE_US
       this.isDrapingEnabled = false;
       this.terrainCovers = /* @__PURE__ */ new Map();
     }
-    initialize(device) {
+    setup({ device, deck }) {
       this.dummyHeightMap = device.createTexture({
         width: 1,
         height: 1,
@@ -4553,17 +4556,9 @@ if ((terrain_mode == TERRAIN_MODE_USE_COVER) || (terrain_mode == TERRAIN_MODE_US
       } else {
         import_core26.log.warn("Terrain offset mode is not supported by this browser")();
       }
-      (0, import_core26.getShaderAssembler)().addDefaultModule(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 });
-          }
-        }
-      }
+      deck._addDefaultShaderModule(terrainModule);
+    }
+    preRender(opts) {
       if (opts.pickZ) {
         this.isDrapingEnabled = false;
         return;
@@ -4601,7 +4596,7 @@ if ((terrain_mode == TERRAIN_MODE_USE_COVER) || (terrain_mode == TERRAIN_MODE_US
         terrainSkipRender: terrainDrawMode === "drape" || !layer.props.operation.includes("draw")
       };
     }
-    cleanup() {
+    cleanup({ deck }) {
       if (this.dummyHeightMap) {
         this.dummyHeightMap.delete();
         this.dummyHeightMap = void 0;
@@ -4614,6 +4609,7 @@ if ((terrain_mode == TERRAIN_MODE_USE_COVER) || (terrain_mode == TERRAIN_MODE_US
         terrainCover.delete();
       }
       this.terrainCovers.clear();
+      deck._removeDefaultShaderModule(terrainModule);
     }
     _updateHeightMap(terrainLayers, viewport, opts) {
       if (!this.heightMap) {