[Bug] Dropped frames / bad performance with controller

[hyperknot]

Description

When using DeckGL with a Mapbox map (maplibre fork), the performance gets bad, there are lot of dropped frames in Chrome FPS meter (red lines). The overall interactivity feels very laggy / sluggish. I mean just panning around with a mouse.

Removing the DeckGL component around <Map> results in a super smooth, 60 FPS / no dropped frames behaviour. Chrome FPS meter confirms this, there are no dropped frames.

There are no layers, no state, no interactivity, just panning around with mouse:

    <DeckGL
      initialViewState={{
        longitude: 11,
        latitude: 45,
        zoom: 6,
      }}
      controller={true}
    >
      <Map
        mapLib={maplibregl}
        style={{ width: '100vw', height: '100vh' }}
        mapStyle="https://basemaps.cartocdn.com/gl/positron-gl-style/style.json"
      />
    </DeckGL>

Note: if you are on bleeding edge hardware like M1 Macbooks this might not be visible. Try it on an older Macbook to see it happening.

Flavors

• [X] React
• [ ] Python/Jupyter notebook
• [X] MapboxLayer
• [ ] GoogleMapsOverlay
• [ ] CartoLayer
• [ ] DeckLayer/DeckRenderer for ArcGIS

Expected Behavior

Performance should be the same as of using react-map-gl. There should be no dropped frames.

Steps to Reproduce

Bad performance code:

import Map from 'react-map-gl'
import maplibregl from 'maplibre-gl'
import DeckGL from '@deck.gl/react/typed'

export function TestBasic() {
  return (
    <DeckGL
      initialViewState={{
        longitude: 11,
        latitude: 45,
        zoom: 6,
      }}
      controller={true}
    >
      <Map
        mapLib={maplibregl}
        style={{ width: '100vw', height: '100vh' }}
        mapStyle="https://basemaps.cartocdn.com/gl/positron-gl-style/style.json"
      />
    </DeckGL>
  )
}

Good performance code:

export function TestBasic() {
  return (
    <Map
      mapLib={maplibregl}
      style={{ width: '100vw', height: '100vh' }}
      mapStyle="https://basemaps.cartocdn.com/gl/positron-gl-style/style.json"
      initialViewState={{
        longitude: 11,
        latitude: 45,
        zoom: 6,
      }}
    />
  )
}

I've just tested a pure <DeckGL> code and it gets the same dropped frames / bad performance behaviour as with the Mapbox layer. So it's not related to the Mapbox layer, it seems to be coming from Deck GL. Code below:

const COUNTRIES =
  'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_50m_admin_0_scale_rank.geojson'

function Root() {
  return (
    <DeckGL
      controller={true}
      initialViewState={{
        latitude: 51,
        longitude: 0,
        zoom: 4,
      }}
    >
      <GeoJsonLayer id="base-map" data={COUNTRIES} />
    </DeckGL>
  )
}

Environment

• Framework version: [email protected], [email protected], [email protected], [email protected]
• Browser: Chrome 103
• OS: macOS 11.8.6 Big Sur

Logs

Nothing displayed.

[hyperknot]

I tested the official examples:

• gallery/src/mapbox-layer.html: GOOD
• get-started/pure-js/basic: BAD
• get-started/pure-js/mapbox: GOOD
• get-started/scripting/harp.gl: GOOD
• get-started/scripting/leaflet: GOOD
• get-started/scripting/mapbox: GOOD (at this points I'm confused, it uses controller: true!)

So I suspect it has to be something with the controller: true part. Interestingly get-started/pure-js/mapbox works well while the basic version doesn't.

[Pessimistress]

I'm unable to reproduce this issue.

It's understandable if React causes some performance overhead. It's also a known issue that the second monitor of Mac suffers from WebGL performance degradation. However, I've never heard of any issue with the basic usage pattern. And as you have noted, the problem is not consistent across the examples.

Can you maybe try on a different computer?

[hyperknot]

I'm working on better examples for reproducing the issue. The results I got were confusing as the NE countries GeoJSON makes dropped frames with deck.gl on its own, so the examples listed weren't meaningful.

I'll try to get better minimal cases and report them here.