Android OpenGL ES(八) - 简单实现绿幕抠图

image.png

实现绿幕抠图，其实想法很简单。
这里简单粗暴的使用着色器替换。

OES Filter

直接实现在相机预览上的Shader

1. #extension GL_OES_EGL_image_external : require

2. precision mediump float;

3.  

4. varying vec2 vTextureCoordinate;

5. uniform samplerExternalOES uTexture;

6.  

7. const float pixel = 30.0;

8. void main() {

9. vec4 tc = texture2D(uTexture, vTextureCoordinate);

10. float r = tc.x * 255.0;

11. float g = tc.y * 255.0;

12. float b = tc.z * 255.0;

13.  

14. if(g>140.0 && r<128.0 && b<128.0){

15. tc.x =1.0;

16. tc.y =1.0;

17. tc.z =1.0;

18. tc.w =0.0;

19. }else{

20. tc.w =1.0;

21. }

22.  

23. gl_FragColor = tc, 1.0;

24. }

这里的关键是，判断颜色的范围。这里简单的认定 g>140.0 && r<128.0 && b<128.0 时为绿色。当是绿色的时候，就将其颜色换成白色。同时alpha值设置为0.0

BlendShader Filter

这个Shader是将背景的纹理，进行贴图，贴到我们扣的这部分图上。

1. precision mediump float;

2.  

3. varying vec2 vTextureCoord;

4. varying vec2 vExtraTextureCoord;

5.  

6. uniform sampler2D uTexture;

7. uniform sampler2D uExtraTexture;

8.  

9. void main() {

10. vec4 base = texture2D(uTexture, vTextureCoord);

11. vec4 overlay = texture2D(uExtraTexture, vExtraTextureCoord);

12. vec4 outputColor;

13. if(base.r==1.0 && base.g==1.0 && base.b==1.0 && base.a==0.0){

14. outputColor.r = base.a*base.r + overlay.r * (1.0 - base.a);

15. outputColor.g = base.a*base.g + overlay.g * (1.0 - base.a);

16. outputColor.b = base.a*base.b + overlay.b * (1.0 - base.a);

17. outputColor.a = base.a;

18. }else{

19. outputColor.r = base.r;

20. outputColor.g = base.g;

21. outputColor.b = base.b;

22. outputColor.a = base.a;

23. }

24. gl_FragColor = outputColor;

25. }

这个shader就是加载了两个贴图。一个是来自上面相机的FBO的OffscreenTextureId,一个是来自我们另外的背景贴图。
这段代码就算，如果是辨认到之前我们处理的区域的话，就将两个图片贴加到一起，如果是范围内，就用原来的图片。

简单的绿幕抠图很简单，只是判断到对应的颜色，然后将对应的贴图贴到这个部分上，就可以了。

最后的效果

• 屏幕中的原图

   

  

  image.png

• 最后的效果

   

  

  image.png

缺陷

边缘情况比较明显。显示比较突兀。
我们可以做的更好吗？