零. 前言
绿幕视频，顾名思义就是指将一个视频的背景弄成纯绿色，而对视频中的元素进行抠图。在影视界非常常见，我们看到的许多在虚拟背景的动作场面，都是先让演员基于绿幕进行拍摄，再用后期进行抠图和渲染的。如下所示。
这次我们以海绵宝宝的绿幕视频为实例，将视频中的海绵宝宝抠到水母田去，以下是原素材：
以下是效果：
一. YUV转RGB
在之前的Metal与图形渲染三：透明通道视频也提到过，视频是YUV格式的，如果需要提取RGB颜色值，则需要转换，故有：
float3 rgbFromYuv(float2 textureCoor,
texture2d textureY,
texture2d textureUV,
constant CCAlphaVideoMetalConvertMatrix *convertMatrix) {
constexpr sampler textureSampler (mag_filter::linear,
min_filter::linear);
float3 yuv = float3(textureY.sample(textureSampler, textureCoor).r,
textureUV.sample(textureSampler, textureCoor).rg);
return convertMatrix->matrix * (yuv + convertMatrix->offset);
}
fragment float4 movieFragment(SingleInputVertexIO input [[ stage_in ]],
texture2d textureY [[ texture(0) ]],
texture2d textureUV [[ texture(1) ]],
constant CCAlphaVideoMetalConvertMatrix *convertMatrix [[ buffer(0) ]]) {
float3 rgb = rgbFromYuv(input.textureCoordinate, textureY, textureUV, convertMatrix);
return float4(rgb, 1.0);
}
二. 将绿幕视频缩小一点
由于原视频的海绵宝宝太大只了，因此我们需要编写一个Filter，用于纹理的放缩，CATransform3D是一个很有用的缩放、平移矩阵，因此该Filter可以基于CATransform3D来编写，让变换矩阵直接乘以顶点值即可：
#import "HobenMetalTransformFilter.h"
@interface HobenMetalTransformFilter ()
@property (nonatomic, strong) id transformBuffer;
@end
@implementation HobenMetalTransformFilter
- (instancetype)initWithRenderContext:(HobenMetalRenderContext *)renderContext {
if (self = [super initWithVertexName:@"perspectiveVertex" renderContext:renderContext]) {
self.transform3D = CATransform3DIdentity;
}
return self;
}
- (void)renderToTextureWithVertices:(NSArray *)vertices textureCoordinates:(NSArray *)textureCoordinates {
CATransform3D transform3D = _transform3D;
matrix_float4x4 mapMatrix = {
.columns[0] = { (float)transform3D.m11, (float)transform3D.m12, (float)transform3D.m13, (float)transform3D.m14},
.columns[1] = { (float)transform3D.m21, (float)transform3D.m22, (float)transform3D.m23, (float)transform3D.m24},
.columns[2] = { (float)transform3D.m31, (float)transform3D.m32, (float)transform3D.m33, (float)transform3D.m34},
.columns[3] = { (float)transform3D.m41, (float)transform3D.m42, (float)transform3D.m43, (float)transform3D.m44},
};
self.transformBuffer = [_renderContext.device newBufferWithBytes:&mapMatrix
length:sizeof(matrix_float4x4)
options:MTLResourceStorageModeShared];
[super renderToTextureWithVertices:vertices textureCoordinates:textureCoordinates verticeBuffers:@[self.transformBuffer]];
}
@end
修改顶点着色器：
vertex SingleInputVertexIO perspectiveVertex(const device packed_float2 *position [[buffer(0)]],
const device matrix_float4x4 &perspectiveMatrix [[buffer(1)]],
const device packed_float2 *texturecoord [[buffer(2)]],
uint vid [[vertex_id]])
{
SingleInputVertexIO outputVertices;
outputVertices.position = perspectiveMatrix * float4(position[vid], 0, 1.0);
outputVertices.textureCoordinate = texturecoord[vid];
return outputVertices;
}
三. 提取绿幕视频元素
提取绿幕视频元素的Shader，输入两个纹理，一个是视频的RGB，一个是水母田的图片RGB，当为绿色时（RGB = 0, 255, 255），说明要提取水母田的RGB；否则提取视频的RGB，因为读取色素值可能不那么准确，所以加了0.05的容错。
另外，由于还需要将海绵宝宝缩小一点，加了一个缩小的Filter，产生的多出部分的RGBA均为0，会影响绿幕的判断，因此还需要加个a == 0.0的判断。
得到Shader如下：
fragment float4
greenScreenFragment(TwoInputVertexIO input [[ stage_in ]],
texture2d greenScreenTexture [[ texture(0) ]],
texture2d backgroundTexture [[ texture(1) ]]) {
constexpr sampler s;
float4 greenScreenColor = greenScreenTexture.sample(s, input.textureCoordinate);
float4 backgroundColor = backgroundTexture.sample(s, input.textureCoordinate2);
if ((greenScreenColor.g >= 0.95 && greenScreenColor.r <= 0.05 && greenScreenColor.b <= 0.05) || greenScreenColor.a == 0.0) {
// 绿幕背景，取背景色
return backgroundColor;
} else {
return greenScreenColor;
}
}
四. 外层调用
绿幕视频 => 矩阵变换Filter
矩阵变换Filter + 背景Picture => RenderView
self.renderView = [[HobenMetalRenderView alloc] initWithRenderContext:_renderContext];
self.picture = [[HobenMetalPicture alloc] initWithImage:image renderContext:_renderContext];
self.greenScreenFilter = [[HobenMetalFilter alloc] initWithVertexName:@"twoInputVertex" fragmentName:@"greenScreenFragment" numberOfInputs:2 renderContext:_renderContext];
self.cropFilter = [[HobenMetalCropFilter alloc] initWithRenderContext:_renderContext];
self.greenScreenReader = [[HobenMetalMovieReader alloc] initWithRenderContext:_renderContext];
self.transformFilter = [[HobenMetalTransformFilter alloc] initWithRenderContext:_renderContext];
self.transformFilter.transform3D = CATransform3DMakeScale(1, 0.8, 1);
[self.greenScreenReader addTarget:self.transformFilter];
[self.transformFilter addTarget:self.greenScreenFilter];
[self.picture addTarget:self.greenScreenFilter];
[self.greenScreenFilter addTarget:self.renderView];
五. 总结
本文主要介绍了绿幕视频的原理和如何将绿幕视频的元素抠出来，叠放到其他纹理上面。