openGL fading background - android

I'm trying to create a particular effect where I have a bunch of particles on the screen which leave trails that slowly fade. I was hoping that I could simply use glClear with a small alpha value to do this but that doesn't seem to be working.
My second idea was to draw a black face on the front of the screen but this doesn't seem to be giving me the right effect, the particles are faded but the background doesn't really fade. My next idea is to render to a texture and fade that texture but that's a lot of extra work and I'm not sure if it will solve my problem. Can anyone think of a way to do this? Am I missing something?
Edit Also I'm having trouble finding information about rendering to a texture on android. If anyone has some links to articles that would be great.

Assuming that your 'particles' ar just a bunch of textured sprites, you can simply add color data for each vertex of the sprite using glVertexPointer(). The color you set for the vertices will then be blended with the texture of the sprite. You can easily update these values to achieve a 'fading' effect.
E.g. if you set RGBA = (1,1,1,1) for each vertex, the sprite will appear as before (no translucency), set RGBA = (1,0,0,1) the sprite will appear red (no translucency), set RGBA = (0.5,0.5,0.5,0.5) the sprite will appear half translucent, etc. You will have to set the correct glBlendFunc() beforehand to get the desired behaviour!
Cheers, Aert.

Related

Using texture image with alpha makes mesh 'see through'

I am rendering an obj file in OpenGL ES 2.0 on Android with Back-Culling enabled. Only some part (the necklace around the neck) of the texture image actually has alpha.
When rendering only the mesh, it looks fine :
However, on enabling the texture, I am able to see through the mesh onto the other side. You can see below that the right hand which is behind the body also becomes visible. Any ideas what might be going wrong ?
Edit:
I have tried the following :
Enabling/Disabling back face culling
Checking the ordering of vertices
Checking if normals are inside at some points
But nothing seem to work. Any other direction would be appreciated.
Edit 2 :
I opened up the texture image and filled all the transparent area with black color by saving it as no alpha layer in a image editing program. And this is how it looks now :
Transparency issue is gone, but then I won't be able to see the necklace properly.
Edit 3 : Can Alpha-blending and the Z-buffer be an issue as described in the link ? It claims 'The Z buffer doesn't work for transparent polygons.'
There are quite a few solutions for the conflict of the depth buffer and alpha blending.
In your case it might be best to simply disable the blending and discard the pixels in the fragment shader.
You probably just have some semitransparent pixels on the borders of the accessory the rest is either 1.0 or 0.0. So maybe a pass such as if alpha < 0.5 discard else set alpha to 1.0.
Another way would simply make sure that those blended objects are drawn last. If you have only one of such objects on the scene it should work. But if you have multiple one behind the other you may again encounter issues.

Transparent objects in OpenGl ES 2.0

So I've been playing around with OpenGL ES 2.0 on Android but now got to a problem I haven't been able to solve. Apologies in advance, it appears that I'm not allowed to post more that two links (yet), so I put my three images in a Photobucket album here.
I'm trying to create a 3D environment that is enclosed by transparent areas ("colored glass"). To see if it works I also put a opaque cube within. I enabled the following capabilities:
GLES20.glEnable(GLES20.GL_CULL_FACE);
GLES20.glEnable(GLES20.GL_DEPTH_TEST);
GLES20.glEnable(GLES20.GL_BLEND);
GLES20.glBlendFunc(GLES20.GL_SRC_ALPHA, GLES20.GL_ONE_MINUS_SRC_ALPHA);
Now the picture looks like this (screenshot 1). Not bad, but not exactly how I wanted it: A (lower) wall at the back as well as the wall on the right should be visible because the wall I'm looking through is transparent.
Then I found that and tried using GLES20.glDepthMask(true); before drawing the opaque and GLES20.glDepthMask(false); before drawing the transparent objects, as well as disabling blending while drawing the opaque objects.
The result (screenshot 2) looks quite messed up. But then I had another idea, not to turn off writing to the depth buffer but to turn off GLES20.DEPTH_TEST altogether, while drawing the transparent objects.
That (screenshot 3) got me closest tho the picture I'm looking for. You can finally see the backwall as well as the right sidewall but, because the depth testing is disabled when drawing the opaques, the cube is partially covered by the backwall, which it shouldn't be.
Does anyone know how to get the effect I'm looking for?
I think that I solved it. By that I mean that it works in my case but I can't tell if that is just by coincidence...
I am enabling depth testing and blending as usual. Then, when drawing, I draw the opaque shapes first and the transparent shapes second, like before. But, while drawing the transparent shapes, I turn GLES20.glDepthMask(..) off to not write to the depth buffer and thus draw all transparent shapes that are not covered by opaque shapes. I did that previously (picture 2) and it completely messed up but I now I do it in reverse - disabling the depth mask for transparent shapes, not opaque ones.

Drawing a 2d convex hull shape on a 3d terrain

I have a 3d mesh, which is a terrain. This runs perfectly fine btw, but I want to have shapes moving accross this terrain. These shapes are flat on the landscape and are blob-like: They can change shape and should follow the contoures and the heightmap of the terrain. These shapes can be painted on the landscape or flow over it, that doesn't matter.
The shapes are meant to be blocks of armies moving across the map, and this should be happening Real-Time! Also: they are 2d convex hull shapes. Also they are just one color with an alpha value (like blue with alpha 0.25f).
The only problem is: I can't figure out how to do this and the question is: Can anyone tell me how to do it?
My first thoughts were just to copy the terrain vertex matrix, push it up a bit so it will be on top of the terrain, load this buffer into a VBO and update the index buffer according to the position and shape needed and then draw the shape. This is rather slow and inefficient, especially when the shape is moving and changing. Also, the resolution of the heightmap is 175x175, so the movement is not at all smooth but rather jaggy.
Then I thought, but rather new to this area, update the shape outlines to the fragment shader of the terrain and let the shader decide if a point lies in that area and change color accordingly. This also was a really slow option, but if anyone sees potential and a good way to do this, tell me!
The next option was to draw directly onto the texture, which is still in the failing stage. If someone has any good ideas on how to draw a scene to a flat area and then put that on a terrain mesh, that would be great!
So if anyone has a solution to draw a shape (or multiple) on a terrain? That would be awesome. Thanks in advance!

Sprite Opacity using OpenGL ES 2.0 on Android

I'm trying to get my point sprites to display with the correct opacity.
Originally, I was getting my sprite texture on a black square.
So, I added the following to my fragment shader:
"if(color.a < 0.5) "+
"discard;"+
Now, this does seem to work, in that my sprite displays without the black background, however, my texture itself is 'partially transparent' - and it isn't showing this partial transparency, it is appearing solid. It's a bit difficult to explain, but I hope you understand what I mean. If I draw the same texture using canvas/surfaceview, it displays correctly.
Basically I'm trying to get my textures to display in their original format (ie as they do in the software in which they were created - ie, the Gimp / photoshop etc).
Would appreciate any help - thanks
First make sure your textures are loaded from transparent pngs through a Bitmap with either RGBA_8888 or RGBA_4444 configuration, so you don't lose the alpha channel.
Second you need to enable GL_BLEND with the glEnable() command. On Android you will write it like this: GLES20.glEnable(GLES20.GL_BLEND);. This allows you to blend the already drawn color with the new color, achieving a transparent look.
The blending function should be set to GL_ONE, GL_ONE_MINUS_ALPHA for regular transparency: glBlendFunc(GL_ONE, GL_ONE_MINUS_SRC_ALPHA);
GL_SRC_ALPHA, GL_ONE_MINUS_ALPHA for regular transparency: glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
Finally, you do not need to use discard, just set the gl_FragColor to a 4-component vector with the alpha in the fourth channel (which is what you get when reading a texture from a sampler), e.g. you could just do gl_FragColor = texture2D(sampler, texCoord); if you wanted to.
You will most likely have to turn off depth-testing with glDisable(GL_DEPTH_TEST) to avoid problems with unsorted triangles.
You can read a little bit more about transparency here.

Seamlessly layering transparent sprites in OpenGL ES

I am working on an Android app, based on the LibGDX framework (Though I don't think that should affect this problem too much), and I am having trouble finding a way to get the results I want when drawing using transparent sprites. The problem is that the sprites visibly layer on top of each other where they overlap, similar to what is displayed in this image :
This is pretty unsightly for some of what I want to do, and even completely breaks other parts. What I would like them to do is merge together seamlessly, like so:
The only success I have had thus far is to draw the entire sequence of sprites on a separate texture at full opacity, and then draw that texture back with the desired opacity. I had this working moderately well, and I could likely make it work for most of what I need it to, but the large problem right now is that these things are dynamically drawn onto the screen, and the process of modifying a fairly large texture and sending it back are pretty taxing on mobile devices, and causes an unacceptable level of performance.
I've spent a good chunk of time looking for more ideal solutions, including experimenting with blend modes and coming up with quirky formulas that balanced out alpha and color values in ways to even things out, but nothing was particularly successful. My guess is that the only viable route for this is the previously mentioned way of creating a texture and applying the alpha difference to that, but I am unsure of the best way to make that work with lower powered mobile devices.
There might be a few other ways to do this: The most straight forward would be to attach a stencil buffer and draw circles to stencil first and then draw a full screen rect with desired color+alpha with the stencil, this should be much faster then some FBO with a separate texture.
Another thing might work is drawing those circles first with disabled blend and then your whole scene over it with inverted "blendFunc" but do note it might be impossible if other elements also need blending.
3rd instead of using stencil you could just use the alpha channel of your render buffer. Just use a color mask to draw only to alpha and draw the circles, then reenable RGB on color mask and draw the fullscreen rect using appropriate "blendFunc" also note here that if previous shapes have used blend you will need to clear the alpha to 1.0 before doing this (color mask to alpha only, disabled blend, draw full screen rect with color that has alpha set to 1.0)

Categories

Resources