-
Notifications
You must be signed in to change notification settings - Fork 2.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Rendering issues when antialias is enabled with terrain in iOS devices with 15.4 and M1 Macs with latest Safari #11609
Comments
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
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
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. |
Can this issue be fixed by disabling "WebGL via Metal"? Similar issue in three.js here: mrdoob/three.js#23733 |
To keep everything in one place, here's the Webkit bug we filed and here's the JSBin example of the issue. |
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 |
Confirmed this issue is resolved in the latest 15.5 Safari release. https://bugs.webkit.org/show_bug.cgi?id=237918#c10 |
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
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
The text was updated successfully, but these errors were encountered: