Log in or register to post comments

VideoPlayback + Mask

April 24, 2013 - 7:40am #13


Is it possible to apply some kind of "mask" to the video texture in order to change the way it is displayed?

Something like the image attached.


Image icon videomask.png891.94 KB

VideoPlayback + Mask

April 24, 2013 - 7:45am #12

Hi, yes, that is possible. The easiest and most appropriate way of implementing it is to use a pixel Shader, i.e. replace the shader code in KeyframeShader.h with some "Circle Mask shader" code.

For the circle mask shader you can google it, and you should be able to find it easily.


VideoPlayback + Mask

April 26, 2013 - 4:46am #11


I have searched for Circle Mask shader but i haven't found anything...
I have tried a new approach, i have created a texture that should be applied over the videoframe texture to act like as mask.  This texture is all black except the zone where i want the videoframe to appear, that zone has transparent circle.
I have managed to apply this texture over the top of the videoframe but i still don't know how to supress the black....
After the render of the videoframe i have done something like this:

(...)(Code for render the texture)




Image icon mask.png287.64 KB

VideoPlayback + Mask

April 26, 2013 - 6:38am #10


here is an example of circle mask shader that I quickly wrote, by modifying the KeyframeShader in KeyframeShader.h:

static const char keyframeFragmentShader[] =
    "precision mediump float; \n"
    "varying vec2 texCoord; \n"
    "uniform sampler2D texSampler2D; \n"
    "void main() \n"
    "{ \n"
	"   float u = 2.0*abs(texCoord.x - 0.5); \n"
	"   float v = 2.0*abs(texCoord.y - 0.5); \n"
	"   float r = sqrt(u*u + v*v); \n"
	"   float R = 0.8; \n"
	"   float circleAlpha = (r < R) ? 1.0 : 0.0; \n"
    "   gl_FragColor = texture2D(texSampler2D, texCoord); \n"
	"   gl_FragColor.a *= circleAlpha; \n"
	"} \n";

You can tune it a bit, but that's basically what you need.

Note: in the renderFrame() function in VideoPlayback.cpp you ned to add these two lines at the beginning of the function (e.g. right after the drawVideoBackground() function):





VideoPlayback + Mask

April 26, 2013 - 8:43am #9


I have tried just like you said but it didn't work, the video remained in the rectangle format. And the play button also disappeared after the changes...

VideoPlayback + Mask

April 26, 2013 - 9:06am #8

Hi, the shader I showed is applied to the static keyframe image, but you need to use a similar code also in the VideoPlaybackShaders.h if you want to apply it to the running video as well.

For the icons you may want to use a different shader though.

Also, you need to enable GL_BLEND as I said in my previous message


VideoPlayback + Mask

June 25, 2013 - 8:59am #7


I have tried to implement this feature following this example http://stackoverflow.com/questions/5097145/opengl-mask-with-multiple-textures. In this case i have suppressed the background texture and considered only the mask and foreground.

The problem is that in an Android Device with 4.0.4 with Hisilicon Technologies GPU renders ok and the mask works. But in Android Device with 4.0.4 with Qualcomm GPU it doesn't render ok.

Any idea that can cause this?

VideoPlayback + Mask

June 25, 2013 - 9:04am #6


this can be a problem with the texture size (for instance, if it has NPOT dimensions and your GPU does not support NPOT textures, that might be the issue);

more in general, chances are that you are trying to use some OpenGL features that may not be fully supported on certain GPUs; you need to check which OpenGL parts of your custom "mask" code is causing the issue...


VideoPlayback + Mask

June 25, 2013 - 9:22am #5

I also tried to change the texture size to 512x512 and the issue still remains...

Eventually the glBlendFuncSeparate could be causing some problems but i have also tried with glColorMask and the problem remains...

VideoPlayback + Mask

June 26, 2013 - 9:36am #4

In case i use shaders, if i have a shader that uses two textures the mask and texture of the video is it possible the shader to have GL_TEXTURE_2D and GL_TEXTURE_EXTERNAL_OES. For example in this shader:

  uniform sampler2D Texture0;
  uniform sampler2D Texture1;
  varying vec2 TexCoord0;
  void main()
     vec4 texel0, texel1, resultColor;
     texel0 = texture2D(Texture0, TexCoord0);
     texel1 = texture2D(Texture1, TexCoord0);
     resultColor = mix(texel0, texel1, texel0.a);
     gl_FragColor = resultColor;

My Texture1would be samplerExternalOES?

VideoPlayback + Mask

June 26, 2013 - 10:12am #3

Yes, you can use those two types of textures, however you need to delcare them appropriately in the shader, i.e. you need to add:

  #extension GL_OES_EGL_image_external : require 
at the top of your fragment shader code
and then, one of the textures must be declared as:
   uniform samplerExternalOES texSamplerOES; 
Have a look at the VideoPlaybackShaders.h file in the VideoPlayback sample for a good example of that.

VideoPlayback + Mask

June 26, 2013 - 10:28am #2

I have managed to put the shader with sampler2D and samplerExternalOES.However the video texture is rendered upside down.


VideoPlayback + Mask

June 26, 2013 - 10:45am #1

That's because you need to transform the texture coordinates for video textures. Please look at the sample code in VideoPlayback.cpp, which shows how to transform texture coordinates.


Log in or register to post comments