REGRESSION (iOS 15.4 beta) - WebGL race condition between clearing depth buffer and switching framebuffers

• Component: WebGL
• Status: RESOLVED DUPLICATE

[Christoph Bartschat]

This is a regression between iOS 15.3.1 and 15.4.

As can be see in this demo: https://codepen.io/cmb8/pen/GROXmKp

We should see two gears spinning normally, but instead we get visual artifacts that obscure the objects from getting properly rendered.

This behavior is caused by calling:
context.clear(context.DEPTH_BUFFER_BIT)

then immediately calling:
context.bindFramebuffer(...)   

If we add a finish() call between the two calls, the issue does not occur.

This problem affects many 8th Wall projects that use three.js, like

our sample project here: https://8thwall.8thwall.app/unitcube-threejs/
or more recently, this Super Bowl promotional tie-in from Kia: https://www.kiadogmentedreality.com

Disabling "WebGL via Metal" in "Experimental WebKit Features" and relaunching Safari fixes the behavior.

Video of expected behavior: https://www.youtube.com/watch?v=SAp_RXDD7_0

Video of unexpected behavior: https://www.youtube.com/watch?v=d8cr-LP40hs

[Kenneth Russell]

+Kyle and John in case they can help triage this. Wonder whether it was fixed in the most recent ANGLE roll.

[Kimmo Kinnunen]

Thanks for the report. 
I think this has the same root cause as bug  237113.
In order to workaround, you can try if you can rework the rendering so that it does not need the `autoClear = false`. I.e. use `autoClear = true`.

Leaving this in until fix for bug 237113 is testable.

[Radar WebKit Bug Importer]

<rdar://problem/89839163>

[Christoph Bartschat]

Now that bug 237113 has been closed, do we have confirmation that the problem described here has also been fixed?

[Brent Fulgham]

*** This bug has been marked as a duplicate of bug 237113 ***