| Summary: | iPhone displays the image when alpha channel is 0 at runtime only, the screenshot is OK | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Product: | WebKit | Reporter: | scarlex <scarletsky1025> | ||||||||
| Component: | WebGL | Assignee: | Nobody <webkit-unassigned> | ||||||||
| Status: | RESOLVED DUPLICATE | ||||||||||
| Severity: | Normal | CC: | dino, kbr, kkinnunen | ||||||||
| Priority: | P2 | ||||||||||
| Version: | Safari 17 | ||||||||||
| Hardware: | iPhone / iPad | ||||||||||
| OS: | iOS 17 | ||||||||||
| Attachments: |
|
||||||||||
|
Description
scarlex
2023-11-01 23:33:43 PDT
Created attachment 468454 [details]
iPhone XR is OK
Created attachment 468455 [details]
Screenshot is always OK
Thanks for the report. I can repro it. On iPad the rendering is ok until tab in a tab bar is activated so that the tab menu pops up. Then the compositing changes and the hidden image comes visible. Might be that the texture doesn't somehow get the rgb *= a correctly or precision problem. To workaround, you could use expression like: texel = texel.a == 0 ? vec4(0.) : texel; (In reply to Kimmo Kinnunen from comment #3) > Thanks for the report. I can repro it. > On iPad the rendering is ok until tab in a tab bar is activated so that the > tab menu pops up. Then the compositing changes and the hidden image comes > visible. > > Might be that the texture doesn't somehow get the rgb *= a correctly or > precision problem. > > To workaround, you could use expression like: > > texel = texel.a == 0 ? vec4(0.) : texel; Thanks for the reply. In fact I want to do alpha blending(ADDITIVE) with the output texture. I am creating a bloom fbo, it has RGB value, and A is 0.0 (because I want to keep the CSS background of canvas element). If I make all texel 0.0, my bloom fbo has no value. The webgl rendering context is created with premultipliedAlpha==true. This means that rendering has to compute the alpha into the color components correctly. Otherwise the compositing will not be correct. Thus the shader must write premultiplied colors. For example, half-translucent red color would be: vec red = vec1(1, 0, 0, 1); gl_FragColor = red * .5; For the testcase, when you assign .a = 0; it means that other components must be consistent with this -- otherwise the color is not premultiplied. For premultiplied alpha == 0 case, all other components must be zero too. It sounds that your algorithm needs premultipliedAlpha == false. It is unpremultiplied algorithm. WebKit does not support premultipliedAlpha=false compositing correctly. Thus to workaround this, you would need to make the drawing into an separate FBO, backed by a separate texture. Then you would need to make a premultiplication draw from that texture to the default framebuffer object. Your premultiplication shader would be: gl_FragColor = vec4(texColor.rgb * texColor.a, texColor.a); Marking this as a duplicate of WebKit umbrella bug for implementing premultiplication correctly. Please provide more info, perhaps more representative testcase, in case I have misunderstood. *** This bug has been marked as a duplicate of bug 263770 *** >In fact I want to do alpha blending(ADDITIVE) with the output texture.
I am creating a bloom fbo, it has RGB value, and A is 0.0 (because I want to keep the CSS background of canvas element). If I make all texel 0.0, my bloom fbo has no value.
And note further: with WebGL you can do custom per-pixel composition only with what is in the WebGL rendering context. You cannot do custom RGB compositing with the CSS background, as that is not present in the WebGL default framebuffer.
To blend with CSS contents, you have to define the blend with CSS operations.
Nevertheless, no CSS blending will show anything correct if the pixel is transparent black, e.g alpha == 0.
*** This bug has been marked as a duplicate of bug 200026 *** |