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

前言

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的属性maskYUV、greenVideoYUV、normalVideoYUV，我们希望在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的相关处理详见demo，Github地址。

附录

rgb和yuv颜色空间的转换