[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

• [X] Script tag
• [ ] React
• [ ] Python/Jupyter notebook
• [X] 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. https://github.com/mapbox/mapbox-gl-js/issues/8581#issuecomment-1383702348

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.

• [x] 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.
• [x] Can enabling debugFBO in collision-filter-effect.ts shed some light on what is happening? -> Did, but nothing happened
• [x] Does adding props to collissionTestProps help? -> Did, but nothing happened
• [x] Does adding getCollisionPriority help? -> Did, but nothing happened