GLSurfaceView - how to make translucent background

Question

I try to render using GLSurfaceView, and by docs I set format:

getHolder().setFormat(PixelFormat.TRANSLUCENT);

The I use GLSurfaceView.Renderer, which draws in onDrawFrame:

GLES20.glClearColor(0, 0, 1, .5f);
GLES20.glClear(GLES20.GL_DEPTH_BUFFER_BIT | GLES20.GL_COLOR_BUFFER_BIT);

However, the GL rendering in GLSurfaceView is not translucent, and is fully blue. If I omit glClear call, then it's fully black.

How do I make GL rendering to have transparent background, so that it is blended with views drawn behind it?

enter image description here

EDIT: here is my GLSurfaceView:

class GLView extends GLSurfaceView{
   MyRenderer r;
   public GLView(Context ctx){
      super(ctx);
      setEGLContextClientVersion(2);

      getHolder().setFormat(PixelFormat.TRANSLUCENT);

      setEGLConfigChooser(8, 8, 8, 8, 16, 0);
      r = new MyRenderer(getContext());
      setRenderer(r);
   }
}

score 9 · Accepted Answer · answered Jul 31 '13 at 14:29

OK, after some research I can answer this myself.

I finally made it to be drawn with transparency using SurfaceView.setZOrderOnTop(true). But then I lost possibility to place other views on top of my GLSurfaceView.

I ended with two possible results:

behind on top

On left is standard GL surface below all other views, which can't be drawn with transparency, because GL surface is drawn before application's window surface, and GLSurfaceView just punches hole in its location so that GL surface is seen through.

On right is transparent GL surface drawn with setZOrderOnTop(true), thus its surface is drawn on top of application window. Now it's transparent, but is drawn on top of other views placed on it in view hierarchy.

So it seems that application has one window with surface for its view hierarchy, and SurfaceView has own surface for GL, which may be on top or below of app window. Unfortunately, transparent GL view can't be ordered correctly inside view hierarchy with other views on top of it.

I can't award my own answer, and other answers didn't satisfy me. — Pointer Null, Aug 07 '13 at 06:18

score 6 · Answer 2 · answered Jul 30 '13 at 17:02

6

You need RGBA 8888 pixel format for translucency:

private void init( boolean translucent, int depth, int stencil )
{
    /* By default, GLSurfaceView() creates a RGB_565 opaque surface.
     * If we want a translucent one, we should change the surface's
     * format here, using PixelFormat.TRANSLUCENT for GL Surfaces
     * is interpreted as any 32-bit surface with alpha by SurfaceFlinger.
     */
    this.getHolder().setFormat( PixelFormat.RGB_565 );
    if ( translucent )
    {
        this.getHolder().setFormat( PixelFormat.TRANSLUCENT );
    }

    setEGLContextFactory( new ContextFactory() );

    /* We need to choose an EGLConfig that matches the format of
     * our surface exactly. This is going to be done in our
     * custom config chooser. See ConfigChooser class definition
     * below.
     */
    setEGLConfigChooser( translucent ?
                         new ConfigChooser( 8, 8, 8, 8, depth, stencil ) :
                         new ConfigChooser( 5, 6, 5, 0, depth, stencil ) );

    setRenderer( new Renderer() );
}

answered Jul 30 '13 at 17:02

Sergey K.

24,894
13
106
174

As you can see from my question, I set PixelFormat.TRANSLUCENT. – Pointer Null Jul 31 '13 at 08:10
Do you set it to 8888? – Sergey K. Jul 31 '13 at 09:19
Yes, tried also this. But docs mention PixelFormat.TRANSLUCENT should be set. – Pointer Null Jul 31 '13 at 10:36
Could you, please, show all the code around your ``getHolder().setFormat(PixelFormat.TRANSLUCENT)``? – Sergey K. Jul 31 '13 at 10:37
Could you, please, check this solution: http://stackoverflow.com/a/3190604/1065190 and this http://stackoverflow.com/a/2196281/1065190 Does it help? – Sergey K. Jul 31 '13 at 11:24

score 1 · Answer 3 · answered Jul 31 '13 at 21:36

Have you thought about using a LayerDrawable with setAlpha? Here's an example i have of two images... one is transparent (by the setAlpha) and the other is not. The 'calendar_cell' is solid and is on the back, then comes the box which is transparent to show the calendar cell behind it. This way you can stack as many images as you want giving them all a different transparency.

Drawable []layers = new Drawable [2];
int imageResource1 = mContext.getResources().getIdentifier("drawable/calendar_cell", null, mContext.getPackageName());
Drawable background = v.getResources().getDrawable(imageResource1);
                        layers [0]= background;

int imageResource = mContext.getResources().getIdentifier("drawable/box_" + box, null, mContext.getPackageName());
Drawable boxImg = v.getResources().getDrawable(imageResource);
    boxImg.setAlpha(100);
    layers [1]= boxImg;

LayerDrawable layerDrawable = new LayerDrawable (layers);
v.setBackground(layerDrawable)

score 0 · Answer 4 · edited May 23 '17 at 12:32

0

I'm not sure what the problem is exactly but an alternative could be covering the screen with a translucent colored rectangle and just clearing the depth buffer bit.

Is there any alternative for GLES20.glClear(GLES20.GL_COLOR_BUFFER_BIT)?

Otherwise make sure your depth buffer bit is 1

I'll be back later to try and recreate the problem on my phone in a bit when I can.

Edit: I just realized that the reason it appears blue may be that you set it to .5f so it only takes 2 calls for it to get to full 1f opacity. meaning that it takes at 30fps 1/15th of a second to go fully blue.

Try lowering the alpha transparency value to 0.01f or 0.05f

edited May 23 '17 at 12:32

Community

1
1

answered Jul 29 '13 at 19:12

SteveKB

190
6

Wrong theory, even setting alpha to 0 didn't make change. Maybe you think that clearing adds values from previous clear. However, surface flinger should compose screen surfaces correctly, including alpha channel of GL surface. – Pointer Null Jul 31 '13 at 08:16

score 0 · Answer 5 · answered May 30 '18 at 00:48

try using setZOrderMediaOverlay(true) for the GLSurfaceView with Hardware Acceleration for the Activity set to false. That makes the GLSurfaceView background Transparent. But I am not sure how the hardware acceleration impacts it.
Overlaying a GLSurface on top of a MapView without using SetZOrderTop.
I had posted a question recently still looking for a better solution

GLSurfaceView - how to make translucent background

5 Answers5

Linked