Bug 219023 – Blank glReadPixels since iOS 14.2

• Component: WebGL
• Status: REOPENED

Reproduction steps:
- iOS 14.2
- go to https://labs.sketchfab.com/experiments/screenshots/#model/818a31e7b4194dc688dc19be9dcafdec
- click on "export screenshot" blue button on the right panel
- get a PNG file downloaded, but blank


Sketchfab is a webGL based app, here using glReadpixels webgl command to read pixel back from GPU framebuffer.

Since ios 14.2, on safari, glReadPixels return blank image where it was working before.

- iPhone 8+ iOS 14.2 - does not work
- iPhone 11, iOS 14.2 - does not work
VS
- iphone 7+, 13.6.1 works

[Radar WebKit Bug Importer]

<rdar://problem/71518366>

[Kimmo Kinnunen]

Thanks for the report, sorry it took so long to look at it.
I can repro the issue.

I can see the webgl element is depth==false, antialias==false, preserveDrawingBuffer==false.

In case it is easy for you to provide more info:
Would you have any more details on how you do glReadPixels?
1) is it reading the default Framebuffer or user-defined Framebuffer?
If it is user-defined:
2) What format is the texture attachment? Does the texture attachment have alpha?
3) Anything out-of-ordinary with the framebuffer?

1) is it reading the default Framebuffer or user-defined Framebuffer?
It's user defined

2) What format is the texture attachment? Does the texture attachment have alpha?
yes

3) Anything out-of-ordinary with the framebuffer?
Nothing special RGBA unsigned byte buffer it is.
We go extra length to make sure the render is finished. (gl finisht etc.)

```

    var  canvasPixels = new Uint8Array(4 * width * height);
    var status = gl.checkFramebufferStatus(gl.FRAMEBUFFER);
    if (status !== gl.FRAMEBUFFER_COMPLETE) {
        return console.error('FRAMEBUFFER status invalid.', status);
    }
    gl.flush();
    gl.finish();
    gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, canvasPixels);
```

[Kimmo Kinnunen]

This is now fixed in trunk, but it's unclear which commit.

I tried to revert:
 - "Enable some ANGLE workarounds on iOS" (bug 220203)
 - "Snapshots of WebGL content in the tab picker don't work (black map on Google M
aps)" (bug 219946)

Neither of the above reproed the problem, though.

Marking as fixed. Please reopen if more info is needed.

somehow fixed if canvas is transparent, not if canvas is opaque

transparent canvas => 

https://jsfiddle.net/sketchfab/ej87khya/
for just embed test on ios https://jsfiddle.net/sketchfab/ej87khya/show


opaque canvas => 

https://jsfiddle.net/sketchfab/gw3xh29f/
for just embed test on ios https://jsfiddle.net/sketchfab/gw3xh29f/show

In sketchfab js webgl code, transparent/opaque canvas path implications are just that we enable the alpha option in the canvas context creation.

So it doesn't work if we switch that option "off"
here is out context creation code, with comment on the option switch ("on" it works, "off" it breaks, same exact code for the rest of application)


in our case, complete code is doesn't work with:

```
const gl = canvas.getContext('webgl', {
            powerPreference: 'high-performance',
            antialias: false, 
            depth: false,
            stencil: false,
            alpha: off, // <= switching that off but rest exact same breaks screenshotting
            premultipliedAlpha: true,
            fullscreen: false,
            preserveDrawingBuffer: false
});
```