@deck.gl/extensions 8.9.0-beta.2 → 8.9.0-beta.4

package/package.json

@@ -2,7 +2,7 @@
   "name": "@deck.gl/extensions",
   "description": "Plug-and-play functionalities for deck.gl layers",
   "license": "MIT",
-  "version": "8.9.0-beta.2",
+  "version": "8.9.0-beta.4",
   "publishConfig": {
     "access": "public"
   },
@@ -40,5 +40,5 @@
     "@math.gl/web-mercator": "^3.6.2",
     "gl-matrix": "^3.0.0"
   },
-  "gitHead": "5dae086e4f3eb46c30d8e761f9d600be4f68e949"
+  "gitHead": "f7c0eeaed1e62b0ae44ee45136b444f647e6cbd9"
 }

package/src/{collide/collide-effect.ts → collision-filter/collision-filter-effect.ts}

@@ -2,35 +2,35 @@ import {Framebuffer, Renderbuffer, Texture2D, cssToDeviceRatio} from '@luma.gl/c
 import {equals} from '@math.gl/core';
 import {_deepEqual as deepEqual} from '@deck.gl/core';
 import type {Effect, Layer, PreRenderOptions, Viewport} from '@deck.gl/core';
-import CollidePass from './collide-pass';
+import CollisionFilterPass from './collision-filter-pass';
 import MaskEffect, {MaskPreRenderStats} from '../mask/mask-effect';
 // import {debugFBO} from '../utils/debug';
 
-type CollideExtensionProps = {
-  collideTestProps?: {};
-  collideGroup: string;
+type CollisionFilterExtensionProps = {
+  collisionTestProps?: {};
+  collisionGroup: string;
 };
 
-// Factor by which to downscale Collide FBO relative to canvas
+// Factor by which to downscale Collision FBO relative to canvas
 const DOWNSCALE = 2;
 
 type RenderInfo = {
-  collideGroup: string;
-  layers: Layer<CollideExtensionProps>[];
+  collisionGroup: string;
+  layers: Layer<CollisionFilterExtensionProps>[];
   layerBounds: ([number[], number[]] | null)[];
+  allLayersLoaded: boolean;
 };
 
-// Class to manage collide effect
-export default class CollideEffect implements Effect {
-  id = 'collide-effect';
+export default class CollisionFilterEffect implements Effect {
+  id = 'collision-filter-effect';
   props = null;
   useInPicking = true;
   order = 1;
 
   private channels: Record<string, RenderInfo> = {};
-  private collidePass?: CollidePass;
-  private collideFBOs: Record<string, Framebuffer> = {};
-  private dummyCollideMap?: Texture2D;
+  private collisionFilterPass?: CollisionFilterPass;
+  private collisionFBOs: Record<string, Framebuffer> = {};
+  private dummyCollisionMap?: Texture2D;
   private lastViewport?: Viewport;
 
   preRender(
@@ -46,8 +46,8 @@ export default class CollideEffect implements Effect {
       preRenderStats = {}
     }: PreRenderOptions
   ): void {
-    if (!this.dummyCollideMap) {
-      this.dummyCollideMap = new Texture2D(gl, {width: 1, height: 1});
+    if (!this.dummyCollisionMap) {
+      this.dummyCollisionMap = new Texture2D(gl, {width: 1, height: 1});
     }
 
     if (isPicking) {
@@ -55,17 +55,17 @@ export default class CollideEffect implements Effect {
       return;
     }
 
-    const collideLayers = layers.filter(
+    const collisionLayers = layers.filter(
       // @ts-ignore
-      ({props: {visible, collideEnabled}}) => visible && collideEnabled
-    ) as Layer<CollideExtensionProps>[];
-    if (collideLayers.length === 0) {
+      ({props: {visible, collisionEnabled}}) => visible && collisionEnabled
+    ) as Layer<CollisionFilterExtensionProps>[];
+    if (collisionLayers.length === 0) {
       this.channels = {};
       return;
     }
 
-    if (!this.collidePass) {
-      this.collidePass = new CollidePass(gl, {id: 'default-collide'});
+    if (!this.collisionFilterPass) {
+      this.collisionFilterPass = new CollisionFilterPass(gl, {id: 'default-collision-filter'});
     }
 
     // Detect if mask has rendered. TODO: better dependency system for Effects
@@ -73,17 +73,17 @@ export default class CollideEffect implements Effect {
     const maskEffectRendered = (preRenderStats['mask-effect'] as MaskPreRenderStats)?.didRender;
 
     // Collect layers to render
-    const channels = this._groupByCollideGroup(gl, collideLayers);
+    const channels = this._groupByCollisionGroup(gl, collisionLayers);
 
     const viewport = viewports[0];
     const viewportChanged =
       !this.lastViewport || !this.lastViewport.equals(viewport) || maskEffectRendered;
 
     // Resize framebuffers to match canvas
-    for (const collideGroup in channels) {
-      const collideFBO = this.collideFBOs[collideGroup];
-      const renderInfo = channels[collideGroup];
-      collideFBO.resize({
+    for (const collisionGroup in channels) {
+      const collisionFBO = this.collisionFBOs[collisionGroup];
+      const renderInfo = channels[collisionGroup];
+      collisionFBO.resize({
         width: gl.canvas.width / DOWNSCALE,
         height: gl.canvas.height / DOWNSCALE
       });
@@ -97,7 +97,7 @@ export default class CollideEffect implements Effect {
       });
     }
 
-    // debugFBO(this.collideFBOs[Object.keys(channels)[0]], {minimap: true});
+    // debugFBO(this.collisionFBOs[Object.keys(channels)[0]], {minimap: true});
   }
 
   private _render(
@@ -118,8 +118,8 @@ export default class CollideEffect implements Effect {
       viewportChanged: boolean;
     }
   ) {
-    const {collideGroup} = renderInfo;
-    const oldRenderInfo = this.channels[collideGroup];
+    const {collisionGroup} = renderInfo;
+    const oldRenderInfo = this.channels[collisionGroup];
     if (!oldRenderInfo) {
       return;
     }
@@ -129,19 +129,23 @@ export default class CollideEffect implements Effect {
       // If render info is new
       renderInfo === oldRenderInfo ||
       // If sublayers have changed
-      !deepEqual(oldRenderInfo.layers, renderInfo.layers, 0) ||
+      !deepEqual(oldRenderInfo.layers, renderInfo.layers, 1) ||
       // If a sublayer's bounds have been updated
-      renderInfo.layerBounds.some((b, i) => !equals(b, oldRenderInfo.layerBounds[i]));
+      renderInfo.layerBounds.some((b, i) => !equals(b, oldRenderInfo.layerBounds[i])) ||
+      // If a sublayer's isLoaded state has been updated
+      renderInfo.allLayersLoaded !== oldRenderInfo.allLayersLoaded ||
+      // Some prop is in transition
+      renderInfo.layers.some(layer => layer.props.transitions);
 
-    this.channels[collideGroup] = renderInfo;
+    this.channels[collisionGroup] = renderInfo;
 
     if (needsRender) {
       this.lastViewport = viewport;
-      const collideFBO = this.collideFBOs[collideGroup];
+      const collisionFBO = this.collisionFBOs[collisionGroup];
 
-      // Rerender collide FBO
-      this.collidePass!.renderCollideMap(collideFBO, {
-        pass: 'collide',
+      // Rerender collision FBO
+      this.collisionFilterPass!.renderCollisionMap(collisionFBO, {
+        pass: 'collision-filter',
         isPicking: true,
         layers: renderInfo.layers,
         effects,
@@ -151,49 +155,48 @@ export default class CollideEffect implements Effect {
         views,
         moduleParameters: {
           // To avoid feedback loop forming between Framebuffer and active Texture.
-          dummyCollideMap: this.dummyCollideMap,
-          devicePixelRatio: cssToDeviceRatio(collideFBO.gl) / DOWNSCALE
+          dummyCollisionMap: this.dummyCollisionMap,
+          devicePixelRatio: cssToDeviceRatio(collisionFBO.gl) / DOWNSCALE
         }
       });
     }
   }
 
   /**
-   * Group layers by collideGroup
-   * Returns a map from collideGroup to render info
+   * Group layers by collisionGroup
+   * Returns a map from collisionGroup to render info
    */
-  private _groupByCollideGroup(
+  private _groupByCollisionGroup(
     gl: WebGLRenderingContext,
-    collideLayers: Layer<CollideExtensionProps>[]
+    collisionLayers: Layer<CollisionFilterExtensionProps>[]
   ): Record<string, RenderInfo> {
     const channelMap = {};
-    for (const layer of collideLayers) {
-      const {collideGroup} = layer.props;
-      let channelInfo = channelMap[collideGroup];
+    for (const layer of collisionLayers) {
+      const {collisionGroup} = layer.props;
+      let channelInfo = channelMap[collisionGroup];
       if (!channelInfo) {
-        channelInfo = {
-          collideGroup,
-          layers: [],
-          layerBounds: []
-        };
-        channelMap[collideGroup] = 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;
+      }
     }
 
     // Create any new passes and remove any old ones
-    for (const collideGroup of Object.keys(channelMap)) {
-      if (!this.collideFBOs[collideGroup]) {
-        this.createFBO(gl, collideGroup);
+    for (const collisionGroup of Object.keys(channelMap)) {
+      if (!this.collisionFBOs[collisionGroup]) {
+        this.createFBO(gl, collisionGroup);
       }
-      if (!this.channels[collideGroup]) {
-        this.channels[collideGroup] = channelMap[collideGroup];
+      if (!this.channels[collisionGroup]) {
+        this.channels[collisionGroup] = channelMap[collisionGroup];
       }
     }
-    for (const collideGroup of Object.keys(this.collideFBOs)) {
-      if (!channelMap[collideGroup]) {
-        this.destroyFBO(collideGroup);
+    for (const collisionGroup of Object.keys(this.collisionFBOs)) {
+      if (!channelMap[collisionGroup]) {
+        this.destroyFBO(collisionGroup);
       }
     }
 
@@ -201,30 +204,30 @@ export default class CollideEffect implements Effect {
   }
 
   getModuleParameters(layer: Layer): {
-    collideFBO: Framebuffer;
-    dummyCollideMap: Texture2D;
+    collisionFBO: Framebuffer;
+    dummyCollisionMap: Texture2D;
   } {
-    const {collideGroup} = (layer as Layer<CollideExtensionProps>).props;
-    const {collideFBOs, dummyCollideMap} = this;
-    return {collideFBO: collideFBOs[collideGroup], dummyCollideMap};
+    const {collisionGroup} = (layer as Layer<CollisionFilterExtensionProps>).props;
+    const {collisionFBOs, dummyCollisionMap} = this;
+    return {collisionFBO: collisionFBOs[collisionGroup], dummyCollisionMap};
   }
 
   cleanup(): void {
-    if (this.dummyCollideMap) {
-      this.dummyCollideMap.delete();
-      this.dummyCollideMap = undefined;
+    if (this.dummyCollisionMap) {
+      this.dummyCollisionMap.delete();
+      this.dummyCollisionMap = undefined;
     }
     this.channels = {};
-    for (const collideGroup of Object.keys(this.collideFBOs)) {
-      this.destroyFBO(collideGroup);
+    for (const collisionGroup of Object.keys(this.collisionFBOs)) {
+      this.destroyFBO(collisionGroup);
     }
-    this.collideFBOs = {};
+    this.collisionFBOs = {};
     this.lastViewport = undefined;
   }
 
-  createFBO(gl: WebGLRenderingContext, collideGroup: string) {
+  createFBO(gl: WebGLRenderingContext, collisionGroup: string) {
     const {width, height} = gl.canvas;
-    const collideMap = new Texture2D(gl, {
+    const collisionMap = new Texture2D(gl, {
       width,
       height,
       parameters: {
@@ -236,23 +239,23 @@ export default class CollideEffect implements Effect {
     });
 
     const depthBuffer = new Renderbuffer(gl, {format: gl.DEPTH_COMPONENT16, width, height});
-    this.collideFBOs[collideGroup] = new Framebuffer(gl, {
-      id: `Collide-${collideGroup}`,
+    this.collisionFBOs[collisionGroup] = new Framebuffer(gl, {
+      id: `Collision-${collisionGroup}`,
       width,
       height,
       attachments: {
-        [gl.COLOR_ATTACHMENT0]: collideMap,
+        [gl.COLOR_ATTACHMENT0]: collisionMap,
         [gl.DEPTH_ATTACHMENT]: depthBuffer
       }
     });
   }
 
-  destroyFBO(collideGroup: string) {
-    const fbo = this.collideFBOs[collideGroup];
+  destroyFBO(collisionGroup: string) {
+    const fbo = this.collisionFBOs[collisionGroup];
     for (const attachment of Object.values(fbo.attachments as Texture2D[])) {
       attachment.delete();
     }
     fbo.delete();
-    delete this.collideFBOs[collideGroup];
+    delete this.collisionFBOs[collisionGroup];
   }
 }

package/src/{collide/collide-pass.ts → collision-filter/collision-filter-pass.ts}

@@ -1,10 +1,10 @@
 import {Framebuffer, withParameters} from '@luma.gl/core';
 import {_LayersPass as LayersPass, LayersPassRenderOptions} from '@deck.gl/core';
 
-type CollidePassRenderOptions = LayersPassRenderOptions & {};
+type CollisionFilterPassRenderOptions = LayersPassRenderOptions & {};
 
-export default class CollidePass extends LayersPass {
-  renderCollideMap(target: Framebuffer, options: CollidePassRenderOptions) {
+export default class CollisionFilterPass extends LayersPass {
+  renderCollisionMap(target: Framebuffer, options: CollisionFilterPassRenderOptions) {
     const gl = this.gl;
 
     const padding = 1;
@@ -19,14 +19,14 @@ export default class CollidePass extends LayersPass {
         depthTest: true,
         depthRange: [0, 1]
       },
-      () => this.render({...options, target, pass: 'collide'})
+      () => this.render({...options, target, pass: 'collision'})
     );
   }
 
   getModuleParameters() {
-    // Draw picking colors into collide FBO
+    // Draw picking colors into collision FBO
     return {
-      drawToCollideMap: true,
+      drawToCollisionMap: true,
       pickingActive: 1,
       pickingAttribute: false,
       lightSources: {}

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

@@ -0,0 +1,83 @@
+import {Accessor, Layer, LayerContext, LayerExtension} from '@deck.gl/core';
+import collision from './shader-module';
+import CollisionFilterEffect from './collision-filter-effect';
+
+const defaultProps = {
+  getCollisionPriority: {type: 'accessor', value: 0},
+  collisionEnabled: true,
+  collisionGroup: {type: 'string', value: 'default'},
+  collisionTestProps: {}
+};
+
+export type CollisionFilterExtensionProps<DataT = any> = {
+  /**
+   * Accessor for collision priority. Must return a number in the range -1000 -> 1000. Features with higher values are shown preferentially.
+   */
+  getCollisionPriority?: Accessor<DataT, number>;
+
+  /**
+   * Enable/disable collisions. If collisions are disabled, all objects are rendered.
+   * @default true
+   */
+  collisionEnabled: boolean;
+
+  /**
+   * Collision group this layer belongs to. If it is not set, the 'default' collision group is used
+   */
+  collisionGroup?: string;
+
+  /**
+   * Props to override when rendering collision map
+   */
+  collisionTestProps?: {};
+};
+
+/** Allows layers to hide overlapping objects. */
+export default class CollisionFilterExtension extends LayerExtension {
+  static defaultProps = defaultProps;
+  static extensionName = 'CollisionFilterExtension';
+
+  getShaders(this: Layer<CollisionFilterExtensionProps>): any {
+    return {modules: [collision]};
+  }
+
+  /* eslint-disable camelcase */
+  draw(this: Layer<CollisionFilterExtensionProps>, {uniforms, context, moduleParameters}: any) {
+    const {collisionEnabled} = this.props;
+    const {collisionFBO, drawToCollisionMap} = moduleParameters;
+    const enabled = collisionEnabled && Boolean(collisionFBO);
+    uniforms.collision_enabled = enabled;
+
+    if (drawToCollisionMap) {
+      // Override any props with those defined in collisionTestProps
+      // @ts-ignore
+      this.props = this.clone(this.props.collisionTestProps).props;
+    }
+  }
+
+  initializeState(
+    this: Layer<CollisionFilterExtensionProps>,
+    context: LayerContext,
+    extension: this
+  ) {
+    if (this.getAttributeManager() === null) {
+      return;
+    }
+    this.context.deck?._addDefaultEffect(new CollisionFilterEffect());
+    const attributeManager = this.getAttributeManager();
+    attributeManager!.add({
+      collisionPriorities: {
+        size: 1,
+        accessor: 'getCollisionPriority',
+        shaderAttributes: {
+          collisionPriorities: {divisor: 0},
+          instanceCollisionPriorities: {divisor: 1}
+        }
+      }
+    });
+  }
+
+  getNeedsPickingBuffer(this: Layer<CollisionFilterExtensionProps>): boolean {
+    return this.props.collisionEnabled;
+  }
+}

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

@@ -0,0 +1,113 @@
+import {Framebuffer, Texture2D} from '@luma.gl/core';
+import {project} from '@deck.gl/core';
+import type {_ShaderModule as ShaderModule} from '@deck.gl/core';
+
+const vs = `
+#ifdef NON_INSTANCED_MODEL
+attribute float collisionPriorities;
+#else
+attribute float instanceCollisionPriorities;
+#endif
+
+uniform sampler2D collision_texture;
+uniform bool collision_sort;
+uniform bool collision_enabled;
+
+vec2 collision_getCoords(vec4 position) {
+  vec4 collision_clipspace = project_common_position_to_clipspace(position);
+  return (1.0 + collision_clipspace.xy / collision_clipspace.w) / 2.0;
+}
+
+float collision_match(vec2 tex, vec3 pickingColor) {
+  vec4 collision_pickingColor = texture2D(collision_texture, tex);
+  float delta = dot(abs(collision_pickingColor.rgb - pickingColor), vec3(1.0));
+  float e = 0.001;
+  return step(delta, e);
+}
+
+float collision_isVisible(vec2 texCoords, vec3 pickingColor) {
+  if (!collision_enabled) {
+    return 1.0;
+  }
+
+  // Visibility test, sample area of 5x5 pixels in order to fade in/out.
+  // Due to the locality, the lookups will be cached
+  // This reduces the flicker present when objects are shown/hidden
+  const int N = 2;
+  float accumulator = 0.0;
+  vec2 step = vec2(1.0 / project_uViewportSize);
+
+  const float floatN = float(N);
+  vec2 delta = -floatN * step;
+  for(int i = -N; i <= N; i++) {
+    delta.x = -step.x * floatN;
+    for(int j = -N; j <= N; j++) {
+      accumulator += collision_match(texCoords + delta, pickingColor);
+      delta.x += step.x;
+    }
+    delta.y += step.y;
+  }
+
+  float W = 2.0 * floatN + 1.0;
+  return pow(accumulator / (W * W), 2.2);
+}
+`;
+
+const inject = {
+  'vs:#decl': `
+  float collision_fade = 1.0;
+`,
+  'vs:DECKGL_FILTER_GL_POSITION': `
+  if (collision_sort) {
+    #ifdef NON_INSTANCED_MODEL
+    float collisionPriority = collisionPriorities;
+    #else
+    float collisionPriority = instanceCollisionPriorities;
+    #endif
+    position.z = -0.001 * collisionPriority * position.w; // Support range -1000 -> 1000
+  }
+
+  if (collision_enabled) {
+    vec4 collision_common_position = project_position(vec4(geometry.worldPosition, 1.0));
+    vec2 collision_texCoords = collision_getCoords(collision_common_position);
+    collision_fade = collision_isVisible(collision_texCoords, geometry.pickingColor / 255.0);
+    if (collision_fade < 0.0001) {
+      position = vec4(0.);
+    }
+  }
+  `,
+  'vs:DECKGL_FILTER_COLOR': `
+  color.a *= collision_fade;
+  `
+};
+
+type CollisionModuleSettings = {
+  collisionFBO?: Framebuffer;
+  drawToCollisionMap?: boolean;
+  dummyCollisionMap?: Texture2D;
+};
+
+/* eslint-disable camelcase */
+type CollisionUniforms = {collision_sort?: boolean; collision_texture?: Framebuffer | Texture2D};
+
+const getCollisionUniforms = (
+  opts: CollisionModuleSettings | {},
+  uniforms: Record<string, any>
+): CollisionUniforms => {
+  if (!opts || !('dummyCollisionMap' in opts)) {
+    return {};
+  }
+  const {collisionFBO, drawToCollisionMap, dummyCollisionMap} = opts;
+  return {
+    collision_sort: Boolean(drawToCollisionMap),
+    collision_texture: !drawToCollisionMap && collisionFBO ? collisionFBO : dummyCollisionMap
+  };
+};
+
+export default {
+  name: 'collision',
+  dependencies: [project],
+  vs,
+  inject,
+  getUniforms: getCollisionUniforms
+} as ShaderModule;

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

@@ -28,7 +28,7 @@ import type {Layer, LayerContext, Accessor, UpdateParameters} from '@deck.gl/cor
 
 const defaultProps = {
   getFilterValue: {type: 'accessor', value: 0},
-  onFilteredItemsChange: {type: 'function', value: null, compare: false},
+  onFilteredItemsChange: {type: 'function', value: null, optional: true},
 
   filterEnabled: true,
   filterRange: [-1, 1],

package/src/index.ts

@@ -4,9 +4,9 @@ export {default as Fp64Extension} from './fp64/fp64';
 export {default as PathStyleExtension} from './path-style/path-style';
 export {default as FillStyleExtension} from './fill-style/fill-style';
 export {default as ClipExtension} from './clip/clip';
-export {default as CollideExtension} from './collide/collide';
+export {default as CollisionFilterExtension} from './collision-filter/collision-filter';
 export {default as MaskExtension} from './mask/mask';
-export {default as TerrainExtension} from './terrain/terrain';
+export {default as _TerrainExtension} from './terrain/terrain';
 
 // Shader module
 export {default as project64} from './fp64/project64';
@@ -17,6 +17,6 @@ export type {DataFilterExtensionProps} from './data-filter/data-filter';
 export type {PathStyleExtensionProps} from './path-style/path-style';
 export type {FillStyleExtensionProps} from './fill-style/fill-style';
 export type {ClipExtensionProps} from './clip/clip';
-export type {CollideExtensionProps} from './collide/collide';
+export type {CollisionFilterExtensionProps} from './collision-filter/collision-filter';
 export type {MaskExtensionProps} from './mask/mask';
 export type {TerrainExtensionProps} from './terrain/terrain';

package/src/mask/mask-effect.ts

@@ -2,13 +2,13 @@ import {Layer, Viewport, Effect, PreRenderOptions, CoordinateSystem, log} from '
 import {Texture2D} from '@luma.gl/core';
 import {equals} from '@math.gl/core';
 import MaskPass from './mask-pass';
-import {getMaskBounds, getMaskViewport, MaskBounds} from './utils';
+import {joinLayerBounds, getRenderBounds, makeViewport, Bounds} from '../utils/projection-utils';
 // import {debugFBO} from '../utils/debug';
 
 type Mask = {
   /** The channel index */
   index: number;
-  bounds: MaskBounds;
+  bounds: Bounds;
   coordinateOrigin: [number, number, number];
   coordinateSystem: CoordinateSystem;
 };
@@ -17,9 +17,9 @@ type Channel = {
   id: string;
   index: number;
   layers: Layer[];
-  bounds: MaskBounds;
-  maskBounds: MaskBounds;
-  layerBounds: MaskBounds[];
+  bounds: Bounds | null;
+  maskBounds: Bounds;
+  layerBounds: Bounds[];
   coordinateOrigin: [number, number, number];
   coordinateSystem: CoordinateSystem;
 };
@@ -78,6 +78,11 @@ export default class MaskEffect implements Effect {
     const viewport = viewports[0];
     const viewportChanged = !this.lastViewport || !this.lastViewport.equals(viewport);
 
+    if (viewport.resolution !== undefined) {
+      log.warn('MaskExtension is not supported in GlobeView')();
+      return {didRender};
+    }
+
     for (const maskId in channelMap) {
       const result = this._renderChannel(channelMap[maskId], {
         layerFilter,
@@ -119,7 +124,17 @@ export default class MaskEffect implements Effect {
       // If a channel is new
       channelInfo === oldChannelInfo ||
       // If sublayers have changed
-      oldChannelInfo.layers.length !== channelInfo.layers.length ||
+      channelInfo.layers.length !== oldChannelInfo.layers.length ||
+      channelInfo.layers.some(
+        (layer, i) =>
+          // Layer instance is updated
+          // Layer props might have changed
+          // Undetermined props could have an effect on the output geometry of a mask layer,
+          // for example getRadius+updateTriggers, radiusScale, modelMatrix
+          layer !== oldChannelInfo.layers[i] ||
+          // Some prop is in transition
+          layer.props.transitions
+      ) ||
       // If a sublayer's positions have been updated, the cached bounds will change shallowly
       channelInfo.layerBounds.some((b, i) => b !== oldChannelInfo.layerBounds[i]);
 
@@ -131,18 +146,22 @@ export default class MaskEffect implements Effect {
       // Recalculate mask bounds
       this.lastViewport = viewport;
 
-      channelInfo.bounds = getMaskBounds({layers: channelInfo.layers, viewport});
+      const layerBounds = joinLayerBounds(channelInfo.layers, viewport);
+      channelInfo.bounds = layerBounds && getRenderBounds(layerBounds, viewport);
 
       if (maskChanged || !equals(channelInfo.bounds, oldChannelInfo.bounds)) {
         // Rerender mask FBO
         const {maskPass, maskMap} = this;
 
-        const maskViewport = getMaskViewport({
-          bounds: channelInfo.bounds,
-          viewport,
-          width: maskMap.width,
-          height: maskMap.height
-        });
+        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];