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地址。
附录
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。