1、项目介绍

输入有背景色的视频，MP4格式，每一帧画面进行处理。

输入要替换的背景图，jpg格式图片

最终抠图合成效果

2 开发环境介绍

开发语言 ：webgl 、js
测试浏览器：火狐
IDE :webstorm

3 开发步骤

主要在片元着色器中进行处理

• 计算当前像素点RGB值对应的HSV值

• 设定HSV三个分量的权重，根据权重计算当前像素点的HSV值到给定背景色的HSV值的欧式距离

• 将欧式距离用smoothstep做平滑，0.5以下的一定要滤掉

• 将原图和背景图用平滑值混合

4、主要GLSL代码

      vec2 RGBtoUV(vec3 rgb)
       {
        return vec2
        (
          rgb.r * -0.169 + rgb.g * -0.331 + rgb.b *  0.5    + 0.5,
          rgb.r *  0.5   + rgb.g * -0.419 + rgb.b * -0.081  + 0.5
        );
      }

      vec4 ProcessChromaKey(vec2 texCoord) 
      {
        vec4 rgba = texture2D(tex, texCoord);
        float chromaDist = distance(RGBtoUV(texture2D(tex, texCoord).rgb), RGBtoUV(keyColor));
        float baseMask = chromaDist - similarity;
        float fullMask = pow(clamp(baseMask / smoothness, 0., 1.), 1.5);
        rgba.a = fullMask;
        float spillVal = pow(clamp(baseMask / spill, 0., 1.), 1.5);
        float desat = clamp(rgba.r * 0.2126 + rgba.g * 0.7152 + rgba.b * 0.0722, 0., 1.);
        rgba.rgb = mix(vec3(desat, desat, desat), rgba.rgb, spillVal);
        return rgba;
      }

5、目录截图

6 整个工程代码下载