Question

I´ve created a shader that is able to rotate an image about 180° and overlay it with a black gradient but now I want to create real transparency instead of using black as my background color.

This is what I got so far:

// Vertex Shader
uniform highp mat4 u_modelViewMatrix;
uniform highp mat4 u_projectionMatrix;
attribute highp vec4 a_position;
attribute lowp vec4 a_color;
attribute highp vec2 a_texcoord;
varying lowp vec4 v_color;
varying highp vec2 v_texCoord;
uniform int offset;
uniform int space;
uniform int vph;
void main()
{\
highp float h = float(offset)/float(vph);
highp float s = float(space)/1000.0;
highp vec4 pos = a_position;
pos.y = pos.y - (h + s);
gl_Position = (u_projectionMatrix * u_modelViewMatrix) * pos;
    v_color = a_color;
v_texCoord = vec2(a_texcoord.x, 1.0 - a_texcoord.y);
}

// Fragment Shader
varying highp vec2 v_texCoord;
uniform sampler2D u_texture0;
uniform int gradient;
void main()
{
  lowp vec3 w = vec3(1.0,1.0,1.0);
  lowp vec3 b = vec3(0.0,0.0,0.0);
  lowp vec3 mix = mix(b, w, (v_texCoord.y-(float(gradient)/10.0)));
  gl_FragColor = texture2D(u_texture0,v_texCoord) * vec4(mix, 1.0);
}

Answer 1

replace black color with translucent color in your fragment shader:

void main()
{
  lowp vec4 w = vec3(1.0,1.0,1.0,1.0);
  lowp vec4 b = vec3(0.0,0.0,0.0,0.0);
  lowp vec4 mix = mix(b, w, (v_texCoord.y-(float(gradient)/10.0)));
  gl_FragColor = texture2D(u_texture0,v_texCoord) * mix;
}