[v3.0.0-beta.3] flyTo Animation Drops frames and stutters

[garydevenay]

When triggering the flyTo animation, the map drops frames and the console fills with 'requestAnimationFrame' handler took Xms warnings. This is happening on the basemap but also legacy styles.

I've tried simplifying the animation and removing things like pitch, explicitly enabling WebGL2, etc. Still, the issue persists to the same level.

mapbox-gl-js version: 3.0.0-beta.3

browser: Chrome, Firefox, Safari

Steps to Trigger Behavior

1. Load the map
2. Click a button to zoom from level 5 to 16
3. Check the console to see requestAnimationFrame warnings

Link to Demonstration

https://jsfiddle.net/garydevenay/1dgu5jh2/23/

Expected Behavior

Smooth zoom transition without dropped frames

Actual Behavior

Stuttery animation and lots of dropped frames.

[garydevenay]

It appears that there are marginal improvements in beta.4— Though still quite stuttery and the same errors in the console.

[mourner]

Thanks for the report! It looks like the stuttering occurs when the browser compiles shaders — which looks as useProgram taking a lot of time if you run the performance profiler and then look at the offending frames. Is that what you're seeing too?

I don't know what might be causing long shader compile times, but we'll try to investigate and see if there's anything specific triggering it. If you find out anything new, let us know as well.

explicitly enabling WebGL2

WebGL2 is enabled by default in v3+, and also required starting with beta.3. Maybe try explicitly disabling it in beta.2 just to exclude WebGL2 shaders being the culprit? update edit: tried it, seems the stutters are the same with WebGL1.

[mourner]

@garydevenay can you compare the example on legacy styles with GL JS v2.15.0 vs v3.0.0-beta.4? Is the amount of stuttering the same, or noticeably worse in v3?

[garydevenay]

Hey! Thanks for taking a look. Given 2.15.0 a shot (with no extrusion layer for buildings) and the issue still seams to happen, all be it much less. Here's a running example:

https://jsfiddle.net/garydevenay/v8hxunLw/2/

Edit: Tagging for visibility @mourner

[webprofusion-chrisc]

Hi, just to add that I also tried 3.x with https://map.openchargemap.io which is a basic map app with POI markers and had to roll back due to performance.

In Chrome 120 in Windows 11 (Apple Mac mini 2018, 64GB ram, Intel UHD 630) the performance is subjectively about 4-6 times slower than mapboxgl 2.x (let me know if there is a preferred way to gather benchmark metrics) - 2.x is smooth when dragging the map and 3.x is choppy.

I would suggest that testing on old hardware like this would be beneficial for zeroing in on the performance issues. Our own user base is largely on mobile on lower performance hardware like mobile and the atom-based Tesla infotainment system.

[mourner]

@webprofusion-chrisc thanks for the report! Just be clear, is the v3 performance is choppy for you on the same style as v2 (e.g. streets-v12), not the newer Mapbox Standard?

[webprofusion-chrisc]

@mourner yes, just changing the mapboxgl version and CSS, but not the tile set so it will be using streets-V12. Would you expect performance to be better by not setting the tile set at all or should it be set to something specific?

[mourner]

@webprofusion-chrisc when you don't set style explicitly in GL JS v3, it uses Mapbox Standard by default, which is a more demanding style, so it's expected for it to possibly feel choppy on older devices compared to Mapbox Streets v12. However, we don't expect the Streets style to feel slower on v3 than v2 — if we can confirm that this is the case, we'll have to investigate it separately from the original issue (which is about Mapbox Standard).

[garydevenay]

I've gotten back round to testing this. I've updated the example to the newest version 3.1.2 (#13060) released last week. It seems that the issue persists and comparably choppy to v2.15.0

v3.1.2: https://jsfiddle.net/garydevenay/dw6cy857/
v2.15.0: https://jsfiddle.net/garydevenay/v8hxunLw/2/

[mourner]

@garydevenay looking at the JSFiddle examples, it looks like you are comparing the Streets v12 style with the new, much heavier Mapbox Standard (which has 3D landmarks, trees, advanced lighting, shadows etc.). So, while we're doing all we can to optimize performance for the new style, my comments above still stands:

when you don't set style explicitly in GL JS v3, it uses Mapbox Standard by default, which is a more demanding style, so it's expected for it to possibly feel choppy on older devices compared to Mapbox Streets v12.