[Bug] CollisionFilterExtension hides all data in Mapbox interleaved when above BitmapLayer

[zakjan]

Description

In Mapbox interleaved, when a layer with CollisionFilterExtension is above BitmapLayer, all data are hidden.

In the attached Codepen, all circles in ScatterplotLayer are hidden.

The circles are shown if BitmapLayer or CollisionFilterExtension is commented out, or if layers are swapped (a layer with CollisionFilterExtension below BitmapLayer, reduced opacity of BitmapLayer), or when using standalone deck.gl.

Flavors

• Script tag
• React
• Python/Jupyter notebook
• MapboxOverlay
• GoogleMapsOverlay
• CartoLayer
• ArcGIS

Expected Behavior

The circles are shown above BitmapLayer in Mapbox interleaved.

Steps to Reproduce

https://codepen.io/zakjan/pen/KKGvjYO

Environment

• Framework version: 8.9.12
• Browser: Chrome
• OS: macOS

Logs

luma.gl: texture: Texture(texture-2,3600x400) is Non-Power-Of-Two, disabling mipmaping

[felixpalmer]

I've tried extensively to understand how the GL state changes in the different scenarios and matching it but I cannot get it to work. I did this by capturing the GL state using getParameters both when the CollisionExtensionPass is rendered as well as when the CollisionFilterExtension draws and manually ensuring the state is the same by patching using withParameters. Even with the same state it doesn't work.

One thing I did notice is that maplibre is using a WebGL1 context, which could be a source of the error. Additionally, Maplibre appears to be close to releasing 3.0 which will completely remove WebGL1 support. As this is a fairly niche issue (and can be worked around by using interleaved: false) I propose we wait for Maplibre 3.0 and see if the bug is still present there

@zakjan do you know if this ever worked with a past version of deck?

[felixpalmer]

@zakjan you can workaround your issue by reversing the layer order but forcing a different z-order using getPolygonOffset

new deck.ScatterplotLayer({
  getPolygonOffset: () => [0, -2]
}),
new deck.BitmapLayer({
  getPolygonOffset: () => [0, -1]
})

[zakjan]

The same behavior is with Mapbox and Maplibre. There is experimental Mapbox flag useWebGL2: true, but it doesn't help, so WebGL version seems irrelevant. Mapbox isn't fully committed to WebGL2 yet anyway. mapbox/mapbox-gl-js#8581 (comment)

I'm not sure about earlier deck versions, CollisionFilterExtension was released in 8.9.0, and I wasn't familiar much with the underlying features before.

Reordering layers works indeed. I've used getPolygonOffset for similar occasions as well. Is it possible that the issue is related to the relative layer rendering order, caused when BitmapLayer is rendered first?

[felixpalmer]

That's why I tried to compare the GL state in the different cases - it is very strange that for the bug to be triggered you need both the BitmapLayer and the MapboxOverlay

[zakjan]

I've found it's not specific to BitmapLayer.

• IconLayer + ScatterplotLayer, same behaviour https://codepen.io/zakjan/pen/LYggWVj
• TextLayer + ScatterplotLayer, same behaviour https://codepen.io/zakjan/pen/yLRRMJN
• 2x ScatterplotLayer, no issue https://codepen.io/zakjan/pen/XWxxMKN
• 2x TextLayer, no issue https://codepen.io/zakjan/pen/eYPPvdz

It happens only when there are two different layers. Works for two layers of the same kind.

Does deck.gl somehow group layers of the same kind together?

[zakjan]

I've updated all pens to the recently released Maplibre 3.0.0, the issue persists.

[zakjan]

I've found why the issue hasn't occurred with two layers of the same kind. I forgot to set their id, the default ids are duplicate. Setting different ids triggers the issue for them as well.

[just-website]

Got this problem with two Icon layers.
deck 8.9.34
maplibre 3.6.2

Layers are hidden if you use CollisionFilterExtension and set interleaved: true for layer or if you use CollisionFilterExtension and you add a layer with MapboxLayer adapter (mapLibre.addLayer(new MapboxLayer({ ...layerProps }))

[moong23]

Any progress on this bug?
I have been using IconLayer, PathLayer, SimpleMeshLayer with the PointerCloudLayer as interleaved: true set.
And having the same problem here.

deck.gl: 9.0.8
mapbox-gl: 3.2.0

[felixpalmer]

@moong23 @just-website @zakjan I'm afraid that I'm not going to be able to find the time to look at this soon, so would appreciate a helping hand in hunting down the cause. It would be useful to answer the following questions to understand the root cause:

• Is the issue also present in Maplibre? If not, is there an old version where the bug is present?
• Is the issue present with Google maps interleaved mode?
• Can enabling debugFBO in collision-filter-effect.ts shed some light on what is happening?
• Does adding props to collissionTestProps help?
• Does adding getCollisionPriority help?

[moong23]

@moong23 @just-website @zakjan I'm afraid that I'm not going to be able to find the time to look at this soon, so would appreciate a helping hand in hunting down the cause. It would be useful to answer the following questions to understand the root cause:

I'm not sure if all the others will have same results. But hope this could help a bit.

• Is the issue also present in Maplibre? If not, is there an old version where the bug is present?
  -> Same happens in Maplibre too.
• Is the issue present with Google maps interleaved mode?
  -> was using mapbox with the mapbox-gl. Since it is not really easy to change from mapbox to google maps, will check this out shortly.
• Can enabling debugFBO in collision-filter-effect.ts shed some light on what is happening?
  -> Did, but nothing happened
• Does adding props to collissionTestProps help?
  -> Did, but nothing happened
• Does adding getCollisionPriority help?
  -> Did, but nothing happened

[rory-orennia]

Just raising that this issue still exists in 2025. using deck.gl 9.1.14 with MapboxGL 3.9.3. I'm basically copying the example from here: https://github.com/visgl/deck.gl/blob/9.1-release/examples/website/text/app.tsx and nothing gets it to work except adding collisionEnabled: false,. This makes TextLayer pretty much unusable for us.

Any chance this could be looked at sometime soon?

[beasteers]

Also seeing the same issue with Google Maps Overlay (interleaved).

Here's a patch that seems to be working for me:

The fix is to use device.canvasContext.drawingBufferWidth/Height instead because device.canvasContext.getPixelSize() is giving inconsistent values (switching between 1x to 2x).

import { CollisionFilterExtension as CollisionFilterExtension_ } from "@deck.gl/extensions";

export default class CollisionFilterExtension extends CollisionFilterExtension_ {
    initializeState(this, context, extension) {
        super.initializeState(context, extension);
        const eff = context.deck.effectManager.getEffects().find(e => e.id === 'collision-filter-effect');
        if (eff) {
            console.log('CollisionFilterExtensionFix found effect:', eff, context.deck.effectManager._defaultEffects);
            eff.preRender = preRender.bind(eff);
        }
        else {
            console.warn('CollisionFilterExtensionFix could not find collision-filter-effect in effect manager:', context.deck.effectManager.getEffects(), context);
        }
    }
}

const DOWNSCALE = 2;
function preRender({ effects: allEffects, layers, layerFilter, viewports, onViewportActive, views, isPicking, preRenderStats = {} }) {
    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?.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) || maskEffectRendered;
    for (const collisionGroup in channels) {
        const collisionFBO = this.collisionFBOs[collisionGroup];
        const renderInfo = channels[collisionGroup];
        // const [width, height] = device.canvasContext.getPixelSize();
        const width = device.canvasContext.drawingBufferWidth;
        const height = device.canvasContext.drawingBufferHeight;
        // console.log('collisionFBO resize', collisionGroup, width, height, w, h, device.canvasContext.devicePixelRatio, width / DOWNSCALE, height / DOWNSCALE);
        collisionFBO.resize({
            width: width / DOWNSCALE,
            height: height / DOWNSCALE
        });
        this._render(renderInfo, {
            effects,
            layerFilter,
            onViewportActive,
            views,
            viewport,
            viewportChanged
        });
    }
    // debugFBO(this.collisionFBOs[Object.keys(channels)[0]], {minimap: true});
}

---

notes

Here's some logs after experimenting with debugFBO. (collisionTestProps and getCollisionPriority did not change anything).

// collision-filter-effect.ts#L89
console.log('collisionFBO resize', collisionGroup, width, height, device.canvasContext.devicePixelRatio, width / DOWNSCALE, height / DOWNSCALE);

// when you first load the page, it doesn't work
3collision-filter-effect.js:122 collisionFBO resize default 1221 974 2 610.5 487
collision-filter-effect.js:122 collisionFBO resize default 1221 974 2 610.5 487
4collision-filter-effect.js:122 collisionFBO resize default 1221 974 2 610.5 487
2collision-filter-effect.js:122 collisionFBO resize default 1221 974 2 610.5 487
5collision-filter-effect.js:122 collisionFBO resize default 1221 974 2 610.5 487
collision-filter-effect.js:122 collisionFBO resize default 1221 974 2 610.5 487

// I start resizing the window and extension starts working. For some reason the screen size doubles
collision-filter-effect.js:122 collisionFBO resize default 2440 1948 2 1220 974
collision-filter-effect.js:122 collisionFBO resize default 2434 1948 2 1217 974
collision-filter-effect.js:122 collisionFBO resize default 2426 1948 2 1213 974
collision-filter-effect.js:122 collisionFBO resize default 2402 1948 2 1201 974
collision-filter-effect.js:122 collisionFBO resize default 2390 1948 2 1195 974
collision-filter-effect.js:122 collisionFBO resize default 2374 1948 2 1187 974
collision-filter-effect.js:122 collisionFBO resize default 2358 1948 2 1179 974
2collision-filter-effect.js:122 collisionFBO resize default 2356 1948 2 1178 974
4collision-filter-effect.js:122 collisionFBO resize default 2356 1948 2 1178 974

// It stops working once I stop resizing, screen size goes back to 1x size
2collision-filter-effect.js:122 collisionFBO resize default 1178 974 2 589 487
5collision-filter-effect.js:122 collisionFBO resize default 1178 974 2 589 487

deck.gl/modules/extensions/src/collision-filter/collision-filter-effect.ts

Line 89 in 8549120

const [width, height] = device.canvasContext.getPixelSize();

		for (const collisionGroup in channels) {
			const collisionFBO = this.collisionFBOs[collisionGroup];
			const renderInfo = channels[collisionGroup];
			const [width, height] = device.canvasContext.getPixelSize();
			console.log('collisionFBO resize', collisionGroup, width, height, device.canvasContext.devicePixelRatio, width / DOWNSCALE, height / DOWNSCALE);
			collisionFBO.resize({
				width: width / DOWNSCALE,
				height: height / DOWNSCALE
			});
			this._render(renderInfo, {
				effects,
				layerFilter,
				onViewportActive,
				views,
				viewport,
				viewportChanged
			});
		}