Wrong Alpha Blending with AllowsTransparency="True"

Having problems with building or using the CefGlue .NET/Mono binding? Ask your questions here.

Moderator: fddima

Wrong Alpha Blending with AllowsTransparency="True"

Postby tr3s » Wed Dec 30, 2015 7:53 pm

Hello all,

I've been making some tests with the latest version of CefGlue (for CEF tag v3.2454.1320.g807de3c), with the WPFOsr sample.
The problem happens when you try to render something with alpha applied and instead of rendering against the background it renders against black (or at least ir seems).

My tests are simple:
- Set the WpfCefBrowser.AllowsTransparency to True;
- Load an HTML with a DIV with white background and alpha to 0.5;

Result:
- Instead of a White rectangle you get a Grey rectangle;

I've tried against a pattern background and the results (obviously) are the same.

Some examples:
Image Image
Image on the left: Result against a white background.
Image on the right: Expected result against a white background.


Image . Image
Image on the left: Result against a pattern background.
Image on the right: Expected result against a pattern background.


Test.html:
Code: Select all
<html lang="us">
   <head>
      <style>
         #normal{ width: 350px; height: 350px; background-color: rgba(255,255,255,1.0); position: absolute; top: 25px; left: 25px; outline: #000000 solid 5px;}
         #alpha{ width: 350px; height: 350px; background-color: rgba(255,255,255,0.5); position: absolute; top: 25px; left: 410px; outline: #000000 solid 5px;}
         p{position:relative; top:350px;}
      </style>
   </head>
   <body>
      <div id="normal"><p>NORMAL</p></div>
      <div id="alpha"><p>ALPHA</p></div>
   </body>
</html>



After spending some time searching and reading the web for the issue I now know that both Skia and WPF have their workflow using premultiplied alpha so I've decide to write a simple Shader that demultiplies the RGB component, and applied it to the the CefBrowserWindow. Although it works quite fine for the majority of the cases, the problem with this solution is that it is lossy and the errors aggravate in the regions where the alpha value is near zero. So you get this:
Image Image
Image on the left: Result with the shader applied. Notice the posterize effect on the glare.
Image on the right: Expected result.


Code for the shader:
Code: Select all
sampler2D input : register(s0);
float someInput : register(c0);

float4 main(float2 uv : TEXCOORD) : COLOR {
   float4 src = tex2D(input, uv);
   float4 dst = src;
   dst.rgb /= src.a;
   return dst;   
}



I've tried this same example with the CEFClient sample of this build (generated the VisualStudio solution with CMake), tested with the command-line switches "-off-screen-rendering-enabled -transparent-painting-enabled" and in client::OsrRenderer - void OsrRenderer::Render() changed the gradient to a white and opaque background. The result was OK, the alpha is correctly rendered and applied against the background.

I've also checked the buffer for the given viewrect passed to the internal void HandlePopupPaint(int width, int height, CefRectangle[] dirtyRects, IntPtr sourceBuffer) in the WpfCefBrowser class of CefGLue and it is (as expected?) with the alpha already premultiplied.
It seems to me that the WPF control isn't handling the rendered image from CEF correctly. Shouldn't the image be blendeded against the control's background instead of a black background, so you can achieve real transparency when it's enabled?

Thanks in advance,
Best regards

P.S.: sorry for the long post, tried to provide as much information as possible.
tr3s
Newbie
 
Posts: 4
Joined: Fri Jun 20, 2014 5:20 am

Re: Wrong Alpha Blending with AllowsTransparency="True"

Postby magreenblatt » Wed Dec 30, 2015 8:31 pm

CEF/Chromium uses premultiplied alpha values.
magreenblatt
Site Admin
 
Posts: 12382
Joined: Fri May 29, 2009 6:57 pm

Re: Wrong Alpha Blending with AllowsTransparency="True"

Postby tr3s » Thu Dec 31, 2015 5:49 am

Thanks for your reply magreenblatt.

I'm aware of that, I've read the issue https://code.google.com/p/chromiumembedded/issues/detail?id=584 and it's development, as well the links it contains. You've just confirmed it to me (that CEF uses premultiplied alpha). The post was from 2010, something could have changed since then.
Let me say that I don't think that there's a problem with CEF whatsoever. As I wrote, I think the problem is on how CefGlue handles the pixel buffer on the OnPaint callback. For the issue 584 you solved it by changing the way on how the CefClient app handles the pixel buffer, more specifically, you use the blending mode to GL_ONE instead of GL_SRC_ALPHA, right?

I've already done some stuff with CEF and never had this problem, so I really think it has to do with CefGlue...
This is a study that I'm doing and I would really like to understand what's going on and achieve a solution that provides correct transparency with the App's background, as the fix that I provided in the post (pixel shader) doesn't achieve the best results.

What do you think?
tr3s
Newbie
 
Posts: 4
Joined: Fri Jun 20, 2014 5:20 am


Return to CefGlue Forum

Who is online

Users browsing this forum: No registered users and 19 guests