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?
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);
}
}
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:
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.
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() );
}
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)
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
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
Related
I'm currently working on an OpenGL project in Android. Right now, I'm trying to create a "clip" for items to be confined to when drawing, using the stencil buffer. My problem is that I would like to be able to create a clip shape, and then "remove" portions of that clipped shape later on (much like in an Android Canvas calling clipPath() with Region.Op.UNION and then another clipPath() call with Region.Op.DIFFERENCE)
Basically, my intention is to only draw to portions of the screen with a stencil buffer bit of value 1. Therefore, as I understand it, I should be able to draw to the stencil buffer with different glStencilOp functions that will allow me to draw with 1's in some areas, and then perhaps replace them later on with the default 0 in portions of those areas.
As an example test, I tried to clip a "doughnut" on the screen, using something like this (Note: I am using the ShapeRenderer from the LibGDX open source project to draw shapes):
// Beginning LibGDX shapeRenderer.
shapeRenderer.begin(ShapeType.FILLED);
gl20.glClear(GL20.GL_STENCIL_BUFFER_BIT); // Clear stencil buffer.
gl20.glEnable(GL20.GL_STENCIL_TEST); // Enable stencil test.
gl20.glColorMask(false, false, false, false); // Disable color drawing.
gl20.glStencilMask(0xFF); // Set 0xFF as stencil mask.
// Have stencil test always fail, replace drawn stencil bits with 1.
gl20.glStencilFunc(GL20.GL_NEVER, 1, 0xFF);
gl20.glStencilOp(GL20.GL_REPLACE, GL20.GL_KEEP,GL20.GL_KEEP);
/* Draw outer circle, libGDX call. 600px radius. */
shapeRenderer.circle(screenRect.width() / 2, screenRect.height() / 2, 600);
// Now, replace newly drawn stencil bits with 0.
gl20.glStencilOp(GL20.GL_ZERO, GL20.GL_KEEP, GL20.GL_KEEP);
/* Draw inner circle, libGDX call. 200px radius. */
shapeRenderer.circle(screenRect.width() / 2, screenRect.height() / 2, 200);
// Re-enable color drawing.
gl20.glColorMask(true, true, true, true);
// Now, items drawn will be confined to areas with '1' stencil bit.
gl20.glStencilFunc(GL20.GL_EQUAL, 1, 0xFF);
gl20.glStencilOp(GL20.GL_KEEP, GL20.GL_KEEP, GL20.GL_KEEP);
gl20.glStencilMask(0x00);
/* Draw a filled, colored rectangle to the entire screen. */
shapeRenderer.setColor(Color.RED);
shapeRenderer.drawRect(screenRect);
shapeRenderer.end();
Now, as I understand it, this should result in a colored 'doughnut' drawn to the screen; However, as the code is written above, nothing is drawn to the screen.
However, if I only clip the outer circle (and not try to get rid of the inner circle with the "gl20.glStencilOp(GL20.GL_ZERO, GL20.GL_KEEP, GL20.GL_KEEP)" call and subsequent inner circle drawing, a circle the size of the intended outer circle draws on the screen.
I've looked through the documentation that I could find, and everything that I've read so far indicates that this should work. Is there something that I'm missing here? Any help is greatly appreciated.
I've found the problem; I was drawing the two circles in between one begin() and end() call in the ShapeRenderer. Therefore, both circles were being drawn at the time of the end() call. This means that the shapes weren't even drawing to the stencil buffer, seeing as I was calling these functions before the end() call:
// Now, items drawn will be confined to areas with '1' stencil bit.
gl20.glStencilFunc(GL20.GL_EQUAL, 1, 0xFF);
gl20.glStencilOp(GL20.GL_KEEP, GL20.GL_KEEP, GL20.GL_KEEP);
gl20.glStencilMask(0x00);
If I make sure that I use a begin() call before and end() call after each shape being drawn, it will draw at the expected time, therefore making sure that it is drawing the expected values to the stencil buffer.
The logic looks OK - what geometry are you drawing?
At a guess, based on the fact that you see the outer circle rendered on screen when you don't render the inner one, it looks like you are using the outer circle geometry in both cases (so you set all the stencil values, then clear all of them, so nothing has a stencil value of 1 when you come to blit the rectangle).
I implemented your solution in WebGL and it works fine (try it out):
http://ezekiel.vancouver.wsu.edu/~cs442/stackoverflow/stencil.html
Here is how I am mimicking your code:
gl.enable(gl.STENCIL_TEST);
gl.colorMask(false, false, false, false);
gl.stencilMask(0xFF);
gl.stencilFunc(gl.NEVER, 1, 0xFF);
gl.stencilOp(gl.REPLACE, gl.KEEP, gl.KEEP);
fillCircle(1); // radius of 1 maps to canvas width
gl.stencilOp(gl.ZERO, gl.KEEP, gl.KEEP);
fillCircle(0.333);
gl.colorMask(true, true, true, true);
gl.stencilFunc(gl.EQUAL, 1, 0xFF);
gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP);
gl.stencilMask(0x00);
gl.uniform3fv(program.color, [1, 0, 0]);
fillCircle(3); // fill whole canvas width red
You'll see you get exactly what you wanted.
I need to change the transparency of a texture/sprite and I really have no idea how to do it. Any help?
I see two solutions here - one is to change transparency directly in sprite:
Sprite sprite = new Sprite( yourTexture );
Sprite otherSprite = new Sprite( yourOtherTexture );
sprite.setAlpha(0.1f); // 0f is full transparent when 1f is full visible
...
batch.begin();
sprite.draw( batch ); //this one will be almost transparent
otherSprite.draw( batch ); //this one will be normal
batch.end();
you can always manipulate with Sprite color directly:
sprite.setColor( sprite.getColor.r, sprite.getColor.g, sprite.getColor.b, 0.1f);
but it seems to be a silly way for me.
The second one which I recommend is to wrap your Sprite into Scene2d Actor class like for example Image. Then you can still change aplha directly but you are also able to use Scene2d Actions mechanism, manipulating actor's alpha smoothly (like alpha changing animation step by step).
Both Scene2d and Actions are to wide to describe it here but I encourage you to read about it here:
Scene2d
Scene2d Actions
I added this to my GameRenderer.java:
private void drawTapTapChuggy() {
batcher.setColor(1, 1, 1, 0.5f);
batcher.draw(AssetLoader.tapTapChuggy, 28, 89, (83 * 0.9f), (52 * 0.9f));
batcher.setColor(1, 1, 1, 1.0f);
}
I've created a GLsurfaceView which renders a square according to where i press the screen.
I want it to appear above a different layout.
in order to make it transparent i call:
setEGLConfigChooser(8,8,8,8,16,0);
mRenderer = new SlidingRenderer();
setRenderer(mRenderer);
getHolder().setFormat(PixelFormat.TRANSLUCENT);
In my renderer:
public void onDrawFrame(GL10 gl){
gl.glClearColor(0, 0, 0, 0);
but it also changes the color of my drawn square and makes it appear semi-transparent as well.
BEFORE:
AFTER:
TRANSLUCENT is a vague pixel format descriptor, by its very definition the system is free to choose RGBA_4444 or RGBA_8888.
Chances are very good that the system is configured to select the minimal pixel format that satisfies your conditions. For PixelFormat.TRANSLUCENT those conditions are:
System chooses a format that supports translucency (many alpha bits)
Since you probably want to match up with your EGL pixel format, try PixelFormat.RGBA_8888 instead of PixelFormat.TRANSLUCENT.
My problem is that when drawing a simple test image (a rectangle with a gradient fill) within a SurfaceView, the gradient has colour banding. When drawing exactly the same rectangle with the same gradient in a simple extended View, the gradient looks very smooth, and as nice as I would expect for 32-bit colour.
This is occurring side by side using the test SurfaceView placed alongside the test View within the same layout in the same Activity.
For information, in the Activity class I am calling window.setFormat(PixelFormat.RGBA_8888) to switch the Activity to 32-bit colour, as this was the solution in the past to eliminate banding in gradients (however, I believe that this is no longer necessary at a certain Android level, where 32-bit is the default). My minSdkVersion is 8.
The test code that appears in the onDraw() of both the simple extended View and the SurfaceView is:
Paint paint = new Paint();
paint.setStyle(Paint.Style.FILL);
paint.setAntiAlias(false);
paint.setFilterBitmap(false);
paint.setDither(false);
Shader shader = new LinearGradient(
0,
0,
0,
200,
new int[]{0xff150d2f,0xff432b96},
null,
Shader.TileMode.CLAMP
);
paint.setShader(shader);
canvas.drawRect(0,0,getWidth(),getHeight(), paint);
Here is the screenshot showing the SurfaceView above and the normal View beneath. I realise that the banding is very subtle in this example; it's even more apparent when the gradient sweeps over a smaller band of colours.
Any suggestions, please?
Trev
Found the solution myself in the end by adding this into the SurfaceView's constructor:
getHolder().setFormat(PixelFormat.RGBA_8888);
My problem is that when drawing a simple test image (a rectangle with a gradient fill) within a SurfaceView, the gradient has colour banding. When drawing exactly the same rectangle with the same gradient in a simple extended View, the gradient looks very smooth, and as nice as I would expect for 32-bit colour.
This is occurring side by side using the test SurfaceView placed alongside the test View within the same layout in the same Activity.
For information, in the Activity class I am calling window.setFormat(PixelFormat.RGBA_8888) to switch the Activity to 32-bit colour, as this was the solution in the past to eliminate banding in gradients (however, I believe that this is no longer necessary at a certain Android level, where 32-bit is the default). My minSdkVersion is 8.
The test code that appears in the onDraw() of both the simple extended View and the SurfaceView is:
Paint paint = new Paint();
paint.setStyle(Paint.Style.FILL);
paint.setAntiAlias(false);
paint.setFilterBitmap(false);
paint.setDither(false);
Shader shader = new LinearGradient(
0,
0,
0,
200,
new int[]{0xff150d2f,0xff432b96},
null,
Shader.TileMode.CLAMP
);
paint.setShader(shader);
canvas.drawRect(0,0,getWidth(),getHeight(), paint);
Here is the screenshot showing the SurfaceView above and the normal View beneath. I realise that the banding is very subtle in this example; it's even more apparent when the gradient sweeps over a smaller band of colours.
Any suggestions, please?
Trev
Found the solution myself in the end by adding this into the SurfaceView's constructor:
getHolder().setFormat(PixelFormat.RGBA_8888);