Problems with transparent edges in OpenGL ES 2.0

Question

So, I'm making a live wallpaper in android using OpenGL ES 2.0 using a series of squares with image textures in a 3D environment. The problem that I'm running into is that I'm getting a weird black line that flickers upon camera movement. The squares are supposed to be transparent, and I can't figure out what's causing this or how to fix it. I've tried using Anti Aliasing, and I've set the transparency using both GLES20.glBlendFunc(GLES20.GL_ONE, GLES20.GL_ONE_MINUS_SRC_ALPHA); and

    GLES20.glBlendFunc(GLES20.GL_SRC_ALPHA, GLES20.GL_ONE_MINUS_SRC_ALPHA);

This is what my wallpaper looks like right now. Three layers (background, girl, grass), with both the grass and girl showing a dark line around the top edge.

Anyone know what I'm doing wrong, or how to fix this?

Are you drawing the layers back to front? Also, what are your texture wrap parameters? — Reto Koradi
Anti-aliasing (in the form of MSAA) generally won't fix this, it's more likely to cause it in fact. It doesn't change the sample rate of texture fetches used to compute pixels. The texture's sampled one time and only the stuff like per-vertex attributes are anti-aliased. More than likely what you are seeing here is the result of linear filtering on a texture that does not have clamped texture coordinates, it will fetch and average the 4 nearest neighbors when sampling the texture even if those neighboring texels are opaque and meaningless. — Andon M. Coleman
So, yes I am drawing back to front (background, girl, grass). My texture binding looks like this: 'GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MIN_FILTER, GLES20.GL_LINEAR);' — Blake Hashimoto

Blake Hashimoto Blake Hashimoto · Accepted Answer · 2015-09-22T06:41:19

So, it looks like Andon M. Coleman was right. All I had to do was clamp the texture coordinates to remove the black edges. Adding:

    GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_WRAP_S, GLES20.GL_CLAMP_TO_EDGE);
    GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_WRAP_T, GLES20.GL_CLAMP_TO_EDGE);

seems to do the trick.

Problems with transparent edges in OpenGL ES 2.0

1 Answers