Bug 237906 - After 15.4, WebGL renders to offscreen buffer, then back to on-screen, are super broken (strobing, flashing, wrong textures)
Summary: After 15.4, WebGL renders to offscreen buffer, then back to on-screen, are su...
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: WebGL (show other bugs)
Version: Safari 15
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on: webglmsaaregr
Blocks:
  Show dependency treegraph
 
Reported: 2022-03-15 10:31 PDT by Ari Lotter
Modified: 2022-05-16 15:40 PDT (History)
11 users (show)

See Also:


Attachments
Video of the bug taking place on MacOS using Safari 15.4 (79.84 MB, video/quicktime)
2022-03-15 10:31 PDT, Ari Lotter
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Ari Lotter 2022-03-15 10:31:51 PDT
Created attachment 454724 [details]
Video of the bug taking place on MacOS using Safari 15.4

Our WebGL game renders completely broken in iOS 15.4, and Safari 15.4 on MacOS, where WebGL on Metal is enabled.

Disabling WebGL on Metal makes the game render correctly.

It seems to render a whole block of old render commands either constantly, or every other frame.

We haven't been able to nail down a minimal repro yet, but it affects such massive amounts of our code that it has to be something fundamental - command buffers being incorrectly updated or something.

You can test it at this URL, but it'll probably break in a day or two when we do a new release - https://play.skyweaver.net/game/dc1e1b2a35b17c9238e452071722f0208636e72c/?mode=LOCAL_BOT

You can make an account and play a "practice" game here, at https://play.skyweaver.net , which will always reproduce the error.
Let me know if I can help further.
Comment 1 Ari Lotter 2022-03-15 10:41:49 PDT
A little more info - this happens when using both WebGL 1 and WebGL 2.
Comment 2 Ari Lotter 2022-03-15 10:55:35 PDT
More info - happens only on iDevices, and Apple Silicon devices. Doesn't happen on Intel Macbooks.
Comment 3 Kimmo Kinnunen 2022-03-15 12:22:00 PDT
Thank you for the report.
Unfortunately there is at least one high impact regression, bug 237113.
This affects multisample rendering with preserveDrawingBuffer == true.

I could not immediately start a practice mode -- the game did not manage to connect and the link did not work.
If the game uses preserveDrawingBuffer == true, you may experiment working around the issue by turning it false if this is possible with the game..
Comment 4 Ari Lotter 2022-03-15 14:08:37 PDT
Here's another link, but this will stop working in a day or two, probably:
https://play.skyweaver.net/game/f8bba5414700a7817c35595960e925ea9cee4267/?mode=LOCAL_BOT
We don't use preserveDrawingBuffer === true.
Comment 5 Ari Lotter 2022-03-15 14:58:22 PDT
We've investigated further - the bug seems to be primarily related to rendering to a WebGL Offscreen buffer, then rendering to the screen.
We've now managed to make it happen with both WebGL on Metal enabled *AND* disabled.
Comment 6 Radar WebKit Bug Importer 2022-03-15 15:14:46 PDT
<rdar://problem/90333435>
Comment 7 Kenneth Russell 2022-03-15 17:13:51 PDT
Is it possible for you to provide a more reduced test case than the entire game?

I tried logging in to the game via a Google account and starting the tutorial, but it got into an infinite reload loop, apparently while trying to play the introductory video. This was on ChromeOS - not macOS - was just testing.

Here are frameworks for smaller tests you could base one upon:
https://github.com/KhronosGroup/WebGL/tree/main/sdk/tests/conformance2/rendering
Comment 8 MattT 2022-03-16 08:06:24 PDT
Seems related to https://bugs.webkit.org/show_bug.cgi?id=237006
Comment 9 Martin 2022-03-17 07:22:14 PDT
likely related https://bugs.webkit.org/show_bug.cgi?id=238022
Comment 10 Sébastien VIDECOQ 2022-03-17 09:53:53 PDT
Seems similar to : https://bugs.webkit.org/show_bug.cgi?id=236713
Comment 11 Alexander 2022-03-18 08:14:22 PDT
The same issue reported on Verge3D forums - https://www.soft8soft.com/topic/3d-artefacts-on-beta/

Looks like all scenes that use the render-to-texture feature affected.
Comment 12 Tim Schaub 2022-03-20 10:11:46 PDT
We've also had reports of this issue (or a very similar one) from users of OpenLayers on Safari 15.4 where WebGL on Metal is enabled (see https://github.com/openlayers/openlayers/issues/13486).

We haven't put together a minimal reproducible example, but here is a demonstration of the problem: https://deploy-preview-13490--ol-site.netlify.app/examples/webgl-layer-swipe.html

On Safari 15.4 where WebGL on Metal is enabled, the map in the above example is transparent on the right half.

As a workaround, we have found that creating the WebGL context with `antialias: false` avoids the issue (see https://github.com/openlayers/openlayers/pull/13492).

Here is another version of the above example that sets the antialias attribute to false on the context: https://deploy-preview-13492--ol-site.netlify.app/examples/webgl-layer-swipe.html

In the working example, imagery is shown on the left and a basemap is shown on the right.
Comment 13 Tim Schaub 2022-03-20 10:46:39 PDT
It looks like the https://github.com/KhronosGroup/WebGL/blob/e45055745a7a501df29f4f35b61b221a22aa0194/sdk/tests/conformance/rendering/gl-scissor-test.html test might demonstrate the issue when `antialias: true` is set.

```
diff --git a/sdk/tests/conformance/rendering/gl-scissor-fbo-test.html b/sdk/tests/conformance/rendering/gl-scissor-fbo-test.html
index cbe2b1689..85723fbf9 100644
--- a/sdk/tests/conformance/rendering/gl-scissor-fbo-test.html
+++ b/sdk/tests/conformance/rendering/gl-scissor-fbo-test.html
@@ -44,7 +44,7 @@ function checkCanvasRect(x, y, width, height, color, msg) {
   wtu.checkCanvasRect(gl, x, y, width, height, color, msg);
 }
 
-var gl = wtu.create3DContext("canvas", {antialias: false});
+var gl = wtu.create3DContext("canvas", {antialias: true});
 if (!gl) {
   testFailed("context does not exist");
 } else {
```

When I create the context with `antialias: true` in the rendering test above, it passes for me in Chrome 99 and fails for me on Safari 15.4 (2 failures), both on macOS 12.3 M1.
Comment 14 Tim Schaub 2022-03-21 08:41:15 PDT
The diff is correct, but the link above is wrong.  It is the gl-scissor-fbo-test.html that can be used to demonstrate the issue: https://github.com/KhronosGroup/WebGL/blob/e45055745a7a501df29f4f35b61b221a22aa0194/sdk/tests/conformance/rendering/gl-scissor-fbo-test.html

The issue we are seeing is not restricted to cases where scissor is used, and this may be a different issue altogether than the one reported here.  I just found that the gl-scissor-fbo-test.html case could be used to reproduce an issue we are seeing with antialias: true on Safari 15.4 w/ Metal.
Comment 15 Kenneth Russell 2022-03-21 15:32:59 PDT
Thank you Tim Schaub for the minimal reproduction case.

I wasn't able to reproduce the flickering problem with https://play.skyweaver.net , even with Safari 15.4 on an M1 MacBook Pro; maybe a workaround was put in place in the game.

However - the suggested patch to gl-scissor-fbo-test.html definitely catches the bug, which is still present in both Safari 15.4 and Safari Technology Preview 141. It's fixed in top-of-tree ANGLE, which we'll try rolling into WebKit ASAP.

Integrating that improvement to the test in https://github.com/KhronosGroup/WebGL/pull/3393 .
Comment 16 Dean Jackson 2022-03-28 17:47:15 PDT
I confirmed this has been fixed by the ANGLE roll in https://bugs.webkit.org/show_bug.cgi?id=238171
Comment 17 Sam Sneddon [:gsnedders] 2022-05-16 15:40:44 PDT
Just to let everyone know, the fix for this has shipped in Safari 15.5.