Develop Reference

Apply alpha mask to video in OpenGL

I want to apply an alpha mask to a video. Each frame of the video has color information on top and alpha information at the bottom. Like this:
In my case, i want the white pixels in the alpha image to be transparent in the main image. I have an other texture that fills in those transparent pixels.
I was able to generate the only color images or only alpha images, but not able to apply the alpha on to the image. I am using GLES20 in android.
Here is my code which is giving a black screen:
private val vidVertexShaderCode =
"""
precision highp float;
attribute vec3 vertexPosition;
attribute vec4 uvs;
varying vec2 varUvs;
varying vec2 varMaskUvs;
uniform mat4 texMatrix;
uniform mat4 mvp;
void main()
{
varUvs = (texMatrix * vec4(uvs.x, uvs.y, 0, 1.0)).xy;
varMaskUvs = (texMatrix * vec4(uvs.x, uvs.y * 0.5, 0.1, 1.0)).xy;
gl_Position = mvp * vec4(vertexPosition, 1.0);
}
"""
private val vidFragmentShaderCode =
"""
#extension GL_OES_EGL_image_external : require
precision mediump float;
varying vec2 varUvs;
varying vec2 varMaskUvs;
uniform samplerExternalOES texSampler;
void main()
{
vec2 m_uv = vec2(varMaskUvs.x, varMaskUvs.y);
vec4 mask = texture2D(texSampler, m_uv);
vec2 c_uv = vec2(varUvs.x, varUvs.y * 0.5);
vec4 color = texture2D(texSampler, c_uv);
gl_FragColor = vec4(color.rgb, color.a * mask.r)
}
"""
What am i doing wrong?
P.S. I am new to opengl.

Compute the v coordinate of the image (uvs.y * 0.5 + 0.5) and the mask (uvs.y * 0.5) in the vertex shader:
precision highp float;
attribute vec3 vertexPosition;
attribute vec4 uvs;
varying vec2 varUvs;
varying vec2 varMaskUvs;
uniform mat4 texMatrix;
uniform mat4 mvp;
void main()
{
varUvs = (texMatrix * vec4(uvs.x, uvs.y * 0.5 + 0.5, 0, 1.0)).xy;
varMaskUvs = (texMatrix * vec4(uvs.x, uvs.y * 0.5, 0.0, 1.0)).xy;
gl_Position = mvp * vec4(vertexPosition, 1.0);
}
You don't need any further transformation in the fragment shader:
#extension GL_OES_EGL_image_external : require
precision mediump float;
varying vec2 varUvs;
varying vec2 varMaskUvs;
uniform samplerExternalOES texSampler;
void main()
{
vec4 mask = texture2D(texSampler, varMaskUvs);
vec4 color = texture2D(texSampler, varUvs);
gl_FragColor = vec4(color.rgb, color.a * mask.r)
}

How to remove horizontal stripe artifact from GLSL shader?

I'm working on custom photo with depth effect view.I am passing touch coordinates to GLSurfaceView renderer to "change perspective".But there are horizontal stripes between texture and it's mirrow when doing this.
My fragment shader code:
#ifdef GL_ES
precision highp float;
#endif
varying vec2 texcoordVarying;
uniform sampler2D texture;
uniform sampler2D depth;
uniform float time;
uniform vec2 touch;
uniform vec2 limit;
uniform vec4 resolution;
vec2 mirrored(vec2 v) {
vec2 m = mod(v,2.);
return mix(m,2.0 - m, step(1.0 ,m));
}
void main(void) {
vec2 uv = 1.0 * gl_FragCoord.xy / resolution.xy ;
vec2 vUv = (uv - vec2(0.5))*resolution.zw + vec2(0.5);
vUv.y = 1. - vUv.y;
vec4 tex1 = texture2D(depth,mirrored(vUv));
vec2 fake3d = vec2(vUv.x + (tex1.r - 0.5)* touch.x/limit.x, vUv.y + (tex1.r - 0.5)* touch.y/limit.y );
gl_FragColor = texture2D(texture,mirrored(fake3d));
}
I am passing coordinates like this:
queueEvent {
renderer.touchTargetX = event.rawX / renderer.width
renderer.touchTargetY = event.rawY / renderer.height
}
requestRender()

If your wrap mode is GL_REPEAT, try using GL_CLAMP_TO_EDGE.

OpenGL ES color errors with MIX function in Android

in opengl es program i input two textures and use fragment shader:
varying highp vec2 textureCoordinate;
varying vec2 textureCoordinate2;
uniform sampler2D inputImageTexture;
uniform sampler2D inputImageTexture2;
uniform lowp float intensity;
void main() {
highp vec4 newColor = texture2D(inputImageTexture2,textureCoordinate2);
highp vec4 vColor = texture2D(inputImageTexture, textureCoordinate);
newColor.r = newColor.r + vColor.r * (1.0 - newColor.a);
newColor.g = newColor.g + vColor.g * (1.0 - newColor.a);
newColor.b = newColor.b + vColor.b * (1.0 - newColor.a);
gl_FragColor = vec4(mix(vColor.rgb, newColor.rgb, 0.86), newColor.a);
};
but the result have some "error color" here, how to fix this?

I found the answer myself, this is because I write and read from a same FBO texture, and now I change it and work fine!

OpenGL ES GLSL optimization

I'm developing a game which uses glsl shader to produce terrain based on the vertex "height". This works very very fast on desktop but quite slow on android tablet. This is of course natural. I'm still a noob with GLSL and OpenGL. This is the result from the shader:
lowp setting doesn't affect that much for performance. I have now tuned this and frame rate is ~20. Can someone give ideas how to improve this shader code:
Fragment shader:
#ifdef GL_ES
#define LOWP lowp
precision mediump float;
#else
#define LOWP
#endif
varying float EyeVertexZ;
//varying LOWP float Explored;
varying LOWP vec2 v_texCoords;
uniform LOWP float u_offset;
uniform sampler2D u_texture;
uniform sampler2D u_texture2;
uniform sampler2D u_texture3;
uniform vec2 resolution;
void main() {
LOWP vec4 color;
vec4 colorGrass = vec4(0.631, 0.69, 0.49 ,1.0);
float a;
float height = EyeVertexZ;
color = colorGrass;
//if height under 0.67 --> water
if(height < 0.67)
{
vec2 coords = v_texCoords.st;
coords.x -= u_offset;
LOWP vec3 nColor;
float bumpAmount = 0.2;
//bumpmapping texture
nColor = texture2D(u_texture, coords).rgb;
//water color, deep water darker
color = vec4(0.3, 0.4 + EyeVertexZ*0.33,0.6 + EyeVertexZ*0.33 ,1.0);
bool useNormals = true;
bool useShadow = true;
bool yInvert = false;
vec3 lightColor = vec3(1.0, 1.0, 1.0);
vec3 attenuation = vec3(0.5, 0.5,0.5);
vec3 ambientColor = vec3(1.0, 1.0, 1.0);
vec4 v_color = vec4(1.0, 1.0, 1.0, 1.0);
float ambientIntensity = 0.3;
vec3 light = vec3(resolution.x, 0.0, 0.5);
//some bump map programs will need the Y value flipped..
nColor.g = yInvert ? 1.0 - nColor.g : nColor.g;
//this is for debugging purposes, allowing us to lower the intensity of our bump map
LOWP vec3 nBase = vec3(0.5, 0.5, 1.0);
nColor = mix(nBase, nColor, bumpAmount);
//normals need to be converted to [-1.0, 1.0] range and normalized
LOWP vec3 normal = normalize(nColor * 2.0 - 1.0);
//here we do a simple distance calculation
LOWP vec3 deltaPos = vec3( (light.xy - gl_FragCoord.xy) / resolution.xy, light.z);
LOWP vec3 lightDir = normalize(deltaPos);
LOWP float lambert = useNormals ? clamp(dot(normal, lightDir), 0.0, 1.0) : 1.0;
//now let's get a nice little falloff
LOWP float d = sqrt(dot(deltaPos, deltaPos));
LOWP float att = useShadow ? 1.0 / ( attenuation.x + (attenuation.y*d) + (attenuation.z*d*d) ) : 1.0;
LOWP vec3 result = (ambientColor * ambientIntensity) + (lightColor.rgb * lambert) * att;
result *= color.rgb;
color = v_color * vec4(result, color.a);
}
a = height - 0.65;
a = max(a,0.0);
color = mix(color, texture2D(u_texture2, v_texCoords),a < 0.02 ? a*50.0 : 0.0);
if(height > 0.67 && height <= 0.70)
{
a = height-0.67;
color = mix( texture2D(u_texture2, v_texCoords),color, a*33.0);
}
gl_FragColor = color; //mix(color, hex, hex.a);
}
Vertex shader
#ifdef GL_ES
#define LOWP lowp
precision mediump float;
#else
#define LOWP
#endif
attribute vec4 a_position;
attribute vec2 a_texCoords;
uniform mat4 u_worldView;
varying LOWP float noise;
varying float EyeVertexZ;
varying LOWP float Explored;
varying vec2 v_texCoords;
void main() {
gl_Position = u_worldView*a_position;
EyeVertexZ = a_position.z;
v_texCoords = a_texCoords;
}

opengl es yuv to rgb conversion display only green and pink colors

I am doing yuv to rgb conversion using opengl shaders. But its only show green and pink colors. I am using ffmpeg to decode movie. I am beginner in this, so have no idea how to solve it. ffmpeg give me three buffers of yuv. I am directly assigning these buffers to three textures.
Here are shaders I am using.
static const char* VERTEX_SHADER =
"attribute vec4 vPosition; \n"
"attribute vec2 a_texCoord; \n"
"varying vec2 tc; \n"
"uniform mat4 u_mvpMat; \n"
"void main() \n"
"{ \n"
" gl_Position = u_mvpMat * vPosition; \n"
" tc = a_texCoord; \n"
"} \n";
static const char* YUV_FRAG_SHADER =
"#ifdef GL_ES \n"
"precision highp float; \n"
"#endif \n"
"varying vec2 tc; \n"
"uniform sampler2D TextureY; \n"
"uniform sampler2D TextureU; \n"
"uniform sampler2D TextureV; \n"
"uniform float imageWidth; \n"
"uniform float imageHeight; \n"
"void main(void) \n"
"{ \n"
"float nx, ny; \n"
"vec3 yuv; \n"
"vec3 rgb; \n"
"nx = tc.x; \n"
"ny = tc.y; \n"
"yuv.x = texture2D(TextureY, tc).r; \n"
"yuv.y = texture2D(TextureU, vec2(nx/2.0, ny/2.0)).r - 0.5; \n"
"yuv.z = texture2D(TextureV, vec2(nx/2.0, ny/2.0)).r - 0.5; \n"
// Using BT.709 which is the standard for HDTV
"rgb = mat3( 1, 1, 1, \n"
"0, -0.18732, 1.8556, \n"
"1.57481, -0.46813, 0)*yuv;\n"
// BT.601, which is the standard for SDTV is provided as a reference
//"rgb = mat3( 1, 1, 1, \n"
// "0, -0.34413, 1.772, \n"
// "1.402, -0.71414, 0) * yuv; \n"
"gl_FragColor = vec4(rgb, 1.0); \n"
"} \n";
Output:
What wrong am I doing? Please help me out with this.
Thank You.
UPDATE:
While debugging ffmpeg decoding, I found that ffmpeg decoder give PIX_FMT_YUV420P output format. Do I have to make some tweaks to get correct image colors?

I'm not sure about this transformation:
"rgb = mat3( 1, 1, 1, \n"
"0, -0.18732, 1.8556, \n"
"1.57481, -0.46813, 0)*yuv;\n"
In refreshing my memory on matrix * vector operations in GLSL using this page as reference, I think you either need to transpose the coefficient matrix, or move yuv to the front of the operation, i.e., yuv * mat3(...). Performing the operation as mat3(...) * yuv means:
r = y * 1 + u * 1 + v * 1
g = y * 0 + u * -0.18732 + v * 1.8556
b = y * 1.57481 + u * -0.46813 + v * 0
And these conversions are very incorrect.
As another reference, here's a small, complete, sample GLSL shader program that converts YUV -> RGB that may be of some guidance: http://www.fourcc.org/source/YUV420P-OpenGL-GLSLang.c