How to make page have a transparent background?

[Kyle (LiuYong)]

Hi list,

I'm porting chromium browser to a embedded platform, on this platform, we display the browser on OSD layer, and play video on VIDEO layer, the VIDEO layer is behind the OSD layer, so we need to make the page transparent to see the video.

I had forced the RenderView transparent, but still got a black background on OSD layer, I traced the web page painting process,  and I noticed that the transport_dib is transparent, but when input to OpenGL ES command buffer, the output got a black backgroud! It seems OpenGL ES added a black background to it. 

Then I add some command flags to debug gpu service (--enable-gpu-service-logging and --enable-gpu-client-logging), and tried to call glClear() with glClearColor(0, 0, 0, 0), but it still not work for me. I'm new to OpenGL ES, can anybody help me? 

Thanks for any suggestions!

/Kyle.

[Simon Hong]

How about adjusting z-order of video surface?
If it is possible, moving video surface to top is more reasonable.
2012. 6. 4. 오후 10:23에 "Kyle (LiuYong)" <just...@gmail.com>님이 작성:

> --
> Chromium Developers mailing list: chromi...@chromium.org
> View archives, change email options, or unsubscribe:
> http://groups.google.com/a/chromium.org/group/chromium-dev

[Kyle (LiuYong)]

Thanks for your reply.

Adjust z-order is OK to show the video up, but web pages need draw something on the video (e.g. the playback control bar), so it's not a perfect solution for me.

I wrote a simple opengl-es program to test transparent background, it's OK to remove the black background with glClearColor(0,0,0,0) and glClear(...), but in chromium, these code still can't work correctly.

Any suggestions?

/Kyle.

[Simon Hong]

Did you check in the gpu-process?
As I know, all of gles command are executed in the gpu-process.
2012. 6. 5. 오후 7:05에 "Kyle (LiuYong)" <just...@gmail.com>님이 작성:

[Kyle (LiuYong)]

Yes, I changed all glClearColor() code to 'transparent color' (0, 0, 0, 0), but it's not work.

[Nico Weber]

Here is some previous discussion on a similar topic: https://groups.google.com/a/chromium.org/group/chromium-dev/browse_thread/thread/548fcfe1ae053c6b

[Kyle (LiuYong)]

Thanks, I have read that thread, it's talk about how to make render_widget/render_view's background transparent, this is the first stage I did, and I got a transparent backing-store in renderer process (I'm sure it, because I dumped and checked the bitmap's pixels are all 0,0,0,0), but when the browser-process throw the backing-store into gpu-process, the result is changed, color argb(0,0,0,0) changed to argb(0xff, 0, 0, 0).

I known it's happen in gpu-process, and I tried to change glClearColor/glBlendFuc's parameters, but they all didn't work.

/Kyle.

[Kyle (LiuYong)]

I got it! the steps:

1. Set a transparent background just like the thread https://groups.google.com/a/chromium.org/group/chromium-dev/browse_thread/thread/548fcfe1ae053c6b mentioned.
   This step will call window_->layer()->SetFillsBoundsOpaquely(false), it will make the layers do blend when composting, but when we do this, the compositor will set background color as the base background, so we need do step2.
2. In ui::Compositor's contructor, after host_.initialize(...), add host_.setBackgroundColor(0).
   This step will drop the compositor's opaque background, so we get a 'real' web page on screen, no addition background.

/Kyle.

[MichaelC]

Hi

I also want to do the same thing even though the rendrerer isn't an area I'm hugely familiar with. Step2 below was trivial to follow but Step1 links to a two year old thread where someone posts some code (moslty a new method called SetTransparent) but its really not clear to me where to put this and what will call it?

Any pointers on this most gratefully received since would save many hours (days?) trying to understand how this part of the build works.

Michael.

[Kyle (LiuYong)]

Hi Michael,

You can add or modify a content::RenderViewHostObserver derived class (just like ChromeRenderViewHostObserver), then override RenderViewHostInitialized() interface, call SetTransparentBackground() in this function, the SetTransparentBackground() as below:

void ChromeRenderViewHostObserver::SetTransparentBackground() {

  if (!render_view_host()->GetView()) {

    MessageLoop::current()->PostTask(FROM_HERE,

        base::Bind(&ChromeRenderViewHostObserver::SetTransparentBackground,

            base::Unretained(this)));

    return;

  }

  static int bitmap = 0; // transparent pixel to reference

  SkBitmap background;

  background.setConfig(SkBitmap::kARGB_8888_Config, 1, 1);

  background.setPixels(&bitmap);

  render_view_host()->GetView()->SetBackground(background);

}

NOTE: Don't  config the background bitmap as SkBitmap::kA1_Config, because it just for bitmap mask.

/Kyle.

[MichaelC]

Hi Kyle

Many thanks for that although I just tried it and it would seem (on windows) to get a black background. I also noticed that the Compositor isn't getting constructed since I put a breakpoint in its constructor which is never hit.

[Yaroslav P]

Hello,

I'm doing the same task and I faced with the same problem. The only thing that I managed to do is to hide the standard white background, but there are still the black one. It's took a long time since last post so a lot of changes were made in source code. Could you please help me? 

понедельник, 4 июня 2012 г., 16:22:20 UTC+3 пользователь KyleLiu написал:

[Chandan]

Hi guys,

I  too have a similar requirement of making the background transparent. I need to remove the default white background.

I tried the following but I still see the default white background:

i) void WebContentsViewAura::RenderViewCreated(RenderViewHost* host) {

    content::RenderWidgetHostView* view = host->GetView();

    DCHECK(view);

    view->SetBackgroundColor(SK_ColorTRANSPARENT);

}

ii) Added host_->set_background_color(SK_ColorTRANSPARENT); in ui::Compositor's constructor.

Please help.

Regards,

Chandan

[Dana Jansens]

You might want to look into the ozone framework. It lets you separate the video content out of the composited content into an overlay, which sounds like what you're trying to do? See previous threads about ozone on this list for more.

 

Thanks for any suggestions!

/Kyle.

--

[Bartosz Chmura]

Here is working code to hide white background in content shell. Works with version 50.0.2654.2.


diff --git a/content/browser/web_contents/web_contents_view_aura.cc b/content/browser/web_contents/web_contents_view_aura.cc
index 3cae1cc..94105b3 100644
--- a/content/browser/web_contents/web_contents_view_aura.cc
+++ b/content/browser/web_contents/web_contents_view_aura.cc
@@ -924,6 +924,11 @@ void WebContentsViewAura::SetPageTitle(const base::string16& title) {
 }
 
 void WebContentsViewAura::RenderViewCreated(RenderViewHost* host) {
+    content::RenderWidgetHostView* view = host->GetWidget()->GetView();
+    DCHECK(view);
+    view->SetBackgroundColor(SK_ColorTRANSPARENT);
 }


diff --git a/ui/compositor/compositor.cc b/ui/compositor/compositor.cc
index 2a26699..ca5adc4 100644
--- a/ui/compositor/compositor.cc
+++ b/ui/compositor/compositor.cc
@@ -207,6 +207,8 @@ Compositor::Compositor(ui::ContextFactory* context_factory,
   host_->SetRootLayer(root_web_layer_);
   host_->set_surface_id_namespace(surface_id_allocator_->id_namespace());
   host_->SetVisible(true);
+
+   host_->set_background_color(SK_ColorTRANSPARENT);

[Tao Liu]

On Thursday, March 3, 2016 at 10:23:19 PM UTC+8, Bartosz Chmura wrote:

Here is working code to hide white background in content shell. Works with version 50.0.2654.2.

It didn't work with version 49.0.2603.\

[Bartosz Chmura]

I think you may have a problem with your ozone platform (if you are using ozone). Please make sure alpha support is enabled in your ozone platform (EGL_ALPHA_SIZE, 8)
Btw: it looks like transparency support is coming to chromium: https://codereview.chromium.org/1731373002/

[Bartosz Chmura]

You may also try to cherry-pick this commit: 2634dd83a2ba68f4dd33c5e5bbc7ffde3ba87845 (Ensure alpha channel in backbuffer is correct with DirectComposition.)

[Tao Liu]

I can't access codereview website, aways get 404 error through Lantern in China.

[王宇]

on Android platform, as we try like below:

1) add code in file: src/content/browser/web_contents/web_contents_view_android.cc

void WebContentsViewAndroid::RenderViewCreated(RenderViewHost* host) {

 +   content::RenderWidgetHostView* view = host->GetWidget()->GetView();

 +   DCHECK(view);

 +   view->SetBackgroundColor(SK_ColorTRANSPARENT);

}

2)  modify the setting of the GLSurfaceView

getHolder().setFormat(PixelFormat.RGBA_8888);

setEGLConfigChooser(8,8,8,8,16,0);

in Render() override function() onDrawFrame and onSurfaceChanged add

gl.glClearColor(0f,0f,0f,0f);

gl.glClear(GL10.GL_COLOR_BUFFER_BIT);

as we try, it works for us.