Rendering issues when antialias is enabled with terrain in iOS devices with 15.4 and M1 Macs with latest Safari

[avpeery]

mapbox-gl-js version: Latest on main branch

browser: Safari 15.4, FireFox and Chrome on iPhone 12 Pro with 15.4 iOS

Steps to Trigger Behavior

1. Download iOS 15.4
2. open debug/threejs-antenna.html
3. Note immediate flickering of sky layer and severe performance issues with zooming or panning the map.

Expected Behavior

No severe rendering issues should be noted. No flickering. Tested also with iPhone 11 with 14.6 iOS and iPhone 12 with 15.1 iOS, and MacBook Pro with Monterey 12.3 and they did not exhibit any issues.

Actual Behavior

When tested with iOS 15.4 on iPhone 12 Pro, severe rendering issues were noted on this testing page. See screen recording.

RPReplay_Final1647370656.MP4

[rreusser]

Please note: this could all be a red herring; it's the flickering and glitchy rendering that really made me think it looks similar…

But for reference, here was a previous issue containing a very similar issue: #10372

Three.js and Mapbox both manage the same underlying global WebGL state, and both maintain their own representation of that state in order to minimize actual WebGL state changes. This means as soon as either of them modify WebGL state, the other's representation will be incorrect.

That's why this line resets threejs's representation of state:

mapbox-gl-js/debug/threejs-antenna.html

Line 126 in 7e22ebf

this.renderer.state.reset();

and why this line sets Mapbox's representation to dirty after custom content is rendered:

mapbox-gl-js/src/render/draw_custom.js

Line 51 in c9cd5d9

context.setDirty();

The result of the above was this PR which added a couple state resets which were missing: https://github.com/mapbox/mapbox-gl-js/pull/10412/files

I haven't tracked down a current reproduction of the above issue, but I just wanted to get some references linked since it looks quite similar. Didn't Safari switch their WebGL back end to metal recently-ish? Maybe that exposed (or introduced) a faulty assumption about default state values when transitioning back and forth between Three.js's and Mapbox's state management.

I think @karimnaaji is pretty skilled with the spector.js debugger. Maybe it's possible to inspect exactly what the state is when custom layer draw happens? I'd also try disabling the sky, as I recall that might have triggered a particular state change which exposed the linked bug.

[SnailBones]

Can this issue be fixed by disabling "WebGL via Metal"?

Similar issue in three.js here: mrdoob/three.js#23733

[ryanhamley]

To keep everything in one place, here's the Webkit bug we filed and here's the JSBin example of the issue.

[avpeery]

Update: This issue seems to be resolved when disabling antialiasing, and is most present when antialiasing is enabled with terrain. Occurs with iOS devices and M1 with 15.4

[avpeery]

Confirmed this issue is resolved in the latest 15.5 Safari release. https://bugs.webkit.org/show_bug.cgi?id=237918#c10