[Bug] Poor performance when enabling pickable on Firefox with DeckGL Version 9.2.2

[chriskomo]

Description

After upgraded from version 9.1.8 to 9.2.2, I noticed a huge performance impact when using pickable layers on Firefox on both Windows 11 and MacOS 26.

There was no performance issues with the same code in 9.1.8 and there are no performance issues with using Edge/Chrome in 9.2.2.

Preview of what performance is like with Firefox:
https://github.com/user-attachments/assets/69e0d9f5-a879-4921-adde-b7f5608d8a77

Flavors

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

Expected Behavior

Pickable not to cause performance issues on Firefox

Steps to Reproduce

1. Navigate to the GeoJson Highways sample using Firefox on Windows: https://deck.gl/examples/geojson-layer-paths
2. See instance performance impact
3. Checkout sample code and run with pickable disabled: https://github.com/visgl/deck.gl/tree/9.2-release/examples/website/highway
4. No more performance issues

Environment

• Framework version: 9.2.2
• Browser: Firefox
• OS: Windows 11 / MacOS 26.0.1

[mcost45]

Same as #9822

[WillCalderwood]

I'm also seeing this in Chrome. I've downgraded to 9.1.8 which has resolved the issue.

[michaelsaily]

Hey lads, I'm similarly experiencing the same issue on both v9.1.13 and v9.2.5 - downgrading seemed to make no tangible difference in my case however. The issue is persistent in Edge and I'm unable to test with any other browsers at the moment. I'm using the MapboxOverlay approach, trying to integrate Deck with Mapbox in a React app. Extremely similar behaviour to OP's, in that there is a significant loss of FPS when attempting to pan the base-map as a result of enabling pickable on Deck layers. Leaving a comment to keep the thread open.

EDIT:
I've downgraded to Deck v9.1.8 and (Luma v9.1.10) based on Will's comment and can confirm that the issues is no longer present. Average FPS values increased from 10-20 to 55-60.

[Pessimistress]

v9.2.5 is expected to provide much better performance over previous 9.2 releases.

[chriskomo]

v9.2.5 is expected to provide much better performance over previous 9.2 releases.

Thanks for the update, it seems 9.2.5 has resolved the performance issues I was experiencing 👍

[Daisy-Volant]

I am still encountering these performance issues, even on 9.2.5, using Firefox 146.0.1 on a Intel Core Ultra 9 185H using integrated graphics on Ubuntu 24.04. Downgrading to 9.1.14 fixes it for me.

[WillCalderwood]

Resolved for me on 9.2.5

[michaelsaily]

Hey again guys,

Following an upgrade to 9.2.6 (the latest release version, at the time of writing), I noticed that the issue continued to persist for me. I suspect that the issue remains for all users which implement DeckGL using MapboxOverlay and are attempting to make use of the interleaved approach.

Further investigation into the issue I think I've identified the root cause: shader/pipeline caching is not enabled when attaching to an external WebGL context.

Path 1: _createDevice() (standalone Deck - caching enabled)

const deviceProps = {
   adapters: [],
   _cacheShaders: true,
   _cachePipelines: true,
   ...props.deviceProps
 };

Path 2: webgl2Adapter.attach() (MapboxOverlay interleaved - caching not enabled!)

  deviceOrPromise = webgl2Adapter.attach(props.gl, {
    ...this.props.deviceProps,
    onResize: ...
  });

When using MapboxOverlay with interleaved: true, DeckGL attaches to Mapbox's existing WebGL context via the attach path. Since _cacheShaders and _cachePipelines default to false in luma.gl, every frame triggers new shader pipeline creation instead of reusing cached ones.

Fix
I've submitted PR #9971 which adds the missing caching props to the attach path, matching the behavior of _createDevice().

Workaround (temporary and quick):
Until those changes are merged in, for an immediate fix, you can enforce the caching by passing 'deviceProps' through MapboxOverlay itself, such as:

new MapboxOverlay({
        interleaved: true,
        deviceProps: {
              _cacheShaders: true,
              _cachePipelines: true,
        },
}); 

In my testing, I was able to average ~60FPS once again, a significant improvement over the 15-20FPS I was averaging previously. Hope this helps!