Fading-out texture looks bad over the same solid texture when rendered

Question

I'm writing a mobile game for android, using OpenGL ES 2.0. Currently I'm trying to make a scroll with spells, that should in-game look like this:

It would be an element of GUI, where player could select spell which he currently wants to cast. As you can see there can be more spells, than scroll's width allows, so player should be able to scroll them left-right to show more. These near the edge should fade out.

My game has sort of two "layers": GUI and the game itself. I render both in single GUISurfaceView: the game-world in perspective projection and GUI in orthogonal, in front of the game-world. In fact every GUI element has the same mesh: flat plane made of two triangular faces. When I need rectangle I just modify scale matrix.

I figured I can achieve the effect above by having 3 layers of GUI:

1. foreground (it's fading with alpha):

.................................................................................................

2. spells below foreground:

3. background below spells:

As you can see, edges of the background and egdes of the foreground are exactly the same, except the alpha channel. So they should align perfectly and allow for such fade-out effect. And they are - at least in Paint.NET (I uploaded .pdn file with all 3 layers of scroll here). But not in rendered OpenGL. Instead, it looks like this (without any spell-icons):

As you can see, there are darker areas where foregrounds are gradienting with alpha. As if foreground and background weren't aligned perfectly. I absolutely can't understand why.

• I've made sure that models (planes) are in the same world coordinates (except Z) and have the same size (they're squares to be exact),
• I have alpha blending turned on and I sort models with alpha-blended textures by their distance to the camera,
• I've tried to turn off auto-generating of mipmaps, but it didn't help,

• I've checked the mesh of my plane and its UVMap for inaccurate numbers. In Wavefront the plane mesh looks like that:

  o Plane
  v 1.000000 0.000000 0.000000
  v 0.000000 0.000000 0.000000
  v 1.000000 1.000000 -0.000000
  v 0.000000 1.000000 -0.000000
  vt 0.000000 1.000000
  vt 1.000000 1.000000
  vt 0.000000 0.000000
  vt 1.000000 0.000000
  vn 0.000000 0.000000 1.000000
  f 2/1/1 1/2/1 4/3/1
  f 1/2/1 3/4/1 4/3/1
  

• my shaders look like this:

Vertex shader:

    uniform mat4 uMVPMatrix;
    uniform mat4 uMVMatrix;
    uniform mat4 uNormalMatrix;

    attribute vec4 aPosition;
    attribute vec3 aNormal;
    attribute vec4 aColor;
    attribute vec2 aTexCoord;

    varying vec4 vColor;
    varying vec3 vNormal;
    varying vec3 vPosition;
    varying vec2 vTexCoord;

    void main() 
    {
        vColor = aColor;
        vNormal = aNormal;
        vTexCoord = aTexCoord;

        vPosition = vec3(uMVMatrix * aPosition);
        gl_Position = uMVPMatrix * aPosition;
    }

Fragment shader:

    precision mediump float;

    uniform sampler2D uTexture;
    uniform bool uHasTexture;
    uniform vec4 uDiffuse;

    varying vec4 vColor;
    varying vec3 vNormal;
    varying vec3 vPosition;
    varying vec2 vTexCoord;

    void main()
    {
        vec4 texColor;
        if (uHasTexture)
            texColor = texture2D(uTexture, vTexCoord);
        else texColor = vec4(0, 0, 0, 0);

        vec4 color = vColor * texColor;
        gl_FragColor = vec4(color.rgb * uDiffuse.rgb, texColor.a * uDiffuse.a);
    }

Do you have any ideas why does this happen? Maybe for some reason it just can't be done the way I figured? If so, could you suggest any other way to do this?

Answer 1

Probably your texture does not have the same colors as the texture beneath. I.e. the color bits are also fading, not only the alpha part.

Then you should use GLES20.glBlendFunc(GLES20.GL_ONE,GLES20.GL_ONE_MINUS_SRC_ALPHA); as your blending function.