Metal视频处理——绿幕视频合成

96
落影loyinglin 595a1b60 08f6 4beb 998f 2bf55e230555
0.4 2018.09.16 13:24 字数 919

前言

Metal入门教程总结
Metal图像处理——直方图均衡化
本文介绍如何用Metal把一个带绿幕的视频和一个普通视频进行合并。

正文

绿幕视频合成可以分为两步,首先是把视频读取成视频帧并做好对齐,其次是做两个图像的合成。
首先是从正常视频里面读取一帧图像,如下:

正常视频的截图

其次是从绿幕视频里面读取一帧图像,如下:

绿幕视频的截图

最后用Metal把两个图像进行合成,效果预览:

如何把绿色的背景替换成新的图像?

把两个图像拉伸到同样大小再对齐,然后把每个绿色的像素点替换成另外一个图像的颜色,便实现了绿色背景的替换。

核心过程是确定替换时机。
RGB、YUV、HSV颜色空间的替换方案大同小异,这里以YUV颜色空间为例,解释其具体的过程。

1、计算绿色rgb(0.0, 1.0, 0.0)的YUV表示

根据具体的转换公式,把RGB的颜色转换成YUV颜色,这里先把要替换的绿色转换成maskYUV。(转换公式见附录)

    constant float3 greenMaskColor = float3(0.0, 1.0, 0.0); // 过滤掉绿色的
  
    float maskY = 0.257 * greenMaskColor.r + 0.504 * greenMaskColor.g + 0.098 * greenMaskColor.b;
    float maskU = -0.148 * greenMaskColor.r - 0.291 * greenMaskColor.g + 0.439 * greenMaskColor.b;
    float maskV = 0.439 * greenMaskColor.r - 0.368 * greenMaskColor.g - 0.071 * greenMaskColor.b;
    float3 maskYUV = float3(maskY, maskU, maskV) + float3(16.0 / 255.0, 0.5, 0.5);

2、把带绿幕的图像从RGB转成YUV

视频图像是从cpu传递到gpu,格式是kCVPixelFormatType_420YpCbCr8BiPlanarFullRange
所以读取出来是yuv的纹理,需要通过yuv=>rgb的转换矩阵进行处理,得到rgb的颜色值。

    // 绿幕视频读取出来的图像,yuv颜色空间
    float3 greenVideoYUV = float3(greenTextureY.sample(textureSampler, input.textureCoordinate).r,
                              greenTextureUV.sample(textureSampler, input.textureCoordinate).rg);
    // yuv转成rgb
    float3 greenVideoRGB = convertMatrix->matrix * (greenVideoYUV + convertMatrix->offset);

3、把正常的图像从RGB转成YUV

这个过程同步骤2,得到正常的图像(不带绿幕),用于第四步时替换绿色背景。

// 正常视频读取出来的图像,yuv颜色空间
    float3 normalVideoYUV = float3(normalTextureY.sample(textureSampler, input.textureCoordinate).r,
                             normalTextureUV.sample(textureSampler, input.textureCoordinate).rg);
    // yuv转成rgb
    float3 normalVideoRGB = convertMatrix->matrix * (normalVideoYUV + convertMatrix->offset);
    

4、计算替换值,混合两个图像

现在我们有三个YUV的属性maskYUVgreenVideoYUVnormalVideoYUV,我们希望在greenVideoYUV接近maskYUV的时候,把greenVideoYUV的值替换成normalVideoYUV,完成我们的替换效果。
Y是亮度值,UV是色度值,比较时只需关注色度值。
引入函数:float smoothstep(float start, float end, float parameter)
起点start和终点end指定最小值和最大值,parameter为与start、end比较的值。
parameter<start,返回 0。
parameter>end,返回 1。
start<parameter<end,返回值(0, 1),越接近边界值变换越平稳。

我们用distance算出maskYUV.yz和greenVideoYUV.yz的差距,如果小于0.1证明两个颜色值很接近(在样例这里就是接近绿色),我们用normalVideoRGB替换掉该颜色值;如果大于0.3证明两个颜色值差别很大,我们保留greenVideoRGB的颜色值。

    // 计算需要替换的值
    float blendValue = smoothstep(0.1, 0.3, distance(maskYUV.yz, greenVideoYUV.yz));
    // 混合两个图像
    return float4(mix(normalVideoRGB, greenVideoRGB, blendValue), 1.0); // blendValue=0,表示接近绿色,取normalColor;

综合上面的步骤,我们得到最终的fragment shader:


constant float3 greenMaskColor = float3(0.0, 1.0, 0.0); // 过滤掉绿色的

fragment float4
samplingShader(RasterizerData input [[stage_in]], // stage_in表示这个数据来自光栅化。(光栅化是顶点处理之后的步骤,业务层无法修改)
               texture2d<float> greenTextureY [[ texture(LYFragmentTextureIndexGreenTextureY) ]], // texture表明是纹理数据,LYFragmentTextureIndexGreenTextureY是索引
               texture2d<float> greenTextureUV [[ texture(LYFragmentTextureIndexGreenTextureUV) ]], // texture表明是纹理数据,LYFragmentTextureIndexGreenTextureUV是索引
               texture2d<float> normalTextureY [[ texture(LYFragmentTextureIndexNormalTextureY) ]], // texture表明是纹理数据,LYFragmentTextureIndexNormalTextureY是索引
               texture2d<float> normalTextureUV [[ texture(LYFragmentTextureIndexNormalTextureUV) ]], // texture表明是纹理数据,LYFragmentTextureIndexNormalTextureUV是索引
               constant LYConvertMatrix *convertMatrix [[ buffer(LYFragmentInputIndexMatrix) ]]) //buffer表明是缓存数据,LYFragmentInputIndexMatrix是索引
{
    constexpr sampler textureSampler (mag_filter::linear,
                                      min_filter::linear); // sampler是采样器
    
    /*
     From RGB to YUV

     Y = 0.299R + 0.587G + 0.114B
     U = 0.492 (B-Y)
     V = 0.877 (R-Y)
     
     上面是601
     
     下面是601-fullrange
     */
    float maskY = 0.257 * greenMaskColor.r + 0.504 * greenMaskColor.g + 0.098 * greenMaskColor.b;
    float maskU = -0.148 * greenMaskColor.r - 0.291 * greenMaskColor.g + 0.439 * greenMaskColor.b;
    float maskV = 0.439 * greenMaskColor.r - 0.368 * greenMaskColor.g - 0.071 * greenMaskColor.b;
    float3 maskYUV = float3(maskY, maskU, maskV) + float3(16.0 / 255.0, 0.5, 0.5);
    // 绿幕视频读取出来的图像,yuv颜色空间
    float3 greenVideoYUV = float3(greenTextureY.sample(textureSampler, input.textureCoordinate).r,
                              greenTextureUV.sample(textureSampler, input.textureCoordinate).rg);
    // yuv转成rgb
    float3 greenVideoRGB = convertMatrix->matrix * (greenVideoYUV + convertMatrix->offset);
    // 正常视频读取出来的图像,yuv颜色空间
    float3 normalVideoYUV = float3(normalTextureY.sample(textureSampler, input.textureCoordinate).r,
                             normalTextureUV.sample(textureSampler, input.textureCoordinate).rg);
    // yuv转成rgb
    float3 normalVideoRGB = convertMatrix->matrix * (normalVideoYUV + convertMatrix->offset);
    // 计算需要替换的值
    float blendValue = smoothstep(0.1, 0.3, distance(maskYUV.yz, greenVideoYUV.yz));
    // 混合两个图像
    return float4(mix(normalVideoRGB, greenVideoRGB, blendValue), 1.0); // blendValue=0,表示接近绿色,取normalColor;
}

遇到的问题

颜色转换异常。
demo中用到两次转换,分别是shader中maskColor从rgb转yuv和还有读取的图像从yuv转rgb。
其中yuv转rgb的矩阵在GPUImage中可参考:

    // 设置好转换的矩阵
    matrix_float3x3 kColorConversion601FullRangeMatrix = (matrix_float3x3){
        (simd_float3){1.0,    1.0,    1.0},
        (simd_float3){0.0,    -0.343, 1.765},
        (simd_float3){1.4,    -0.711, 0.0},
    };
    
    vector_float3 kColorConversion601FullRangeOffset = (vector_float3){ -(16.0/255.0), -0.5, -0.5}; // 这个是偏移
    

rgb转yuv的时候,经过一番查找,终于在rgb和yuv颜色空间的转换找到:

注意上述的16、128在shader中的处理要除以255。

总结

绿幕视频合成的实现很顺利,只在计算转换后的颜色值差异时有所疑惑,也顺利解决。故此文章不多赘述,如有疑问直接看源码。
还有文章中没有提及的视频的加载、Metal的相关处理详见demoGithub地址

附录

rgb和yuv颜色空间的转换

Metal
Web note ad 1