feature-state events (hover) stop working when many 3D models are rendered in a `model` layer

[Jaszkowic]

Mapbox-GL-JS Version: 3.1.2

Browsers Tested:

• Chrome (Version 120.0.6099.234)
• Firefox (121.0)

Steps to Reproduce

1. Clone the repository from https://github.com/Jaszkowic/feature-state-bug (public repo, minimal example)
2. Create an .env file with REACT_APP_MAPBOX_ACCESS_TOKEN set properly
3. Run npm install
4. Run npm start
5. Hover over a rendered tree circle; opacity should change, and the 3D model should scale bigger (works fine in the initial setup)
6. Change the number of rendered trees (numTrees variable) in ./src/Map.js and reload
7. For small numbers (< 50, exact number unclear), everything works fine
8. For larger numbers (e.g., > 100 - reproducible in my case), the hover effect still works on the 2D circles but stops working on most of the 3D models. Strangely, some randomly selected 3D models still work.

Demonstration Link

Public repo, minimal example: https://github.com/Jaszkowic/feature-state-bug

Expected Behavior

feature-state events like hover should work for a large number of rendered 3D features in a layer of type model, as documented here:

[...] model-scale Supports feature-state

I understand that the model layer is in an experimental state. Maybe there is still some limitation here? If yes, could you clarify what the exact limitations are?

Actual Behavior

feature-state events like hover cease to work for a large number of rendered 3D features in a layer of type model.

Thank you for your help!

[astojilj]

Thanks for reporting. This is a bug that we will work on.

[Jaszkowic]

HI @astojilj, any updates on this? Is there a rough timeline when work on this could bug could start? Thanks again.

[astojilj]

This is expected in mapbox-gl-js v3.5 (second half of June 2024). Sorry, for the long wait.

[astojilj]

It is already available in v3.4 beta. Closing it - please reopen if not working: