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

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

i'm writing mobile game android, using opengl es 2.0. i'm trying create scroll spells, should in-game this:

it element of gui, player select spell wants cast. can see there can more spells, scroll's width allows, player should able scroll them left-right show more. these near border should fade out.

my game has sort of 2 "layers": gui , game itself. render both in single guisurfaceview: game-world in perspective projection , gui in orthogonal, in front end of game-world. in fact every gui element has same mesh: flat plane made of 2 triangular faces. when need rectangle modify scale matrix.

i figured can accomplish effect above having 3 layers of gui:

foreground (it's fading alpha):

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

spells below foreground:

background below spells:

as can see, edges of background , egdes of foreground same, except alpha channel. should align , allow such fade-out effect. , - @ to the lowest degree in paint.net (i uploaded .pdn file 3 layers of scroll here). not in rendered opengl. instead, looks (without spell-icons):

as can see, there darker areas foregrounds gradienting alpha. if foreground , background weren't aligned perfectly. absolutely can't understand why.

i've made sure models (planes) in same world coordinates (except z) , have same size (they're squares exact), i have alpha blending turned on , sort models alpha-blended textures distance camera, i've tried turn off auto-generating of mipmaps, didn't help,

i've checked mesh of plane , uvmap inaccurate numbers. in wavefront plane mesh looks 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 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 have ideas why happen? maybe reason can't done way figured? if so, suggest other way this?

probably texture not have same colors texture beneath. i.e. color bits fading, not alpha part.

then should utilize gles20.glblendfunc(gles20.gl_one,gles20.gl_one_minus_src_alpha); blending function.

android opengl-es opengl-es-2.0 alphablending