零. 前言
在APP开发中，礼物特效是一个比较重要的业务，而礼物特效的需求中，往特效插入头像和昵称又是透明特效的进一步实现，即往视频里面插入遮罩，腾讯开源的VAP是业界比较靠谱的遮罩实现方案，其效果如下：
一. VAP实现的原理
由于目前的特效是基于MP4格式的视频实现的，往视频直接插入头像目前是无法实现的，需要开发者每一帧每一帧地对遮罩区域进行识别，将头像纹理传入遮罩区域中，与遮罩进行融合，最终达到效果，以下是腾讯的原素材MP4：
在腾讯自研的工具中，还有每一帧的rgb、alpha、遮罩位置点信息，在渲染过程中可以采用这些信息，逐帧进行渲染，从而达到以上的效果。
二. 自实现的一些想法
1. 初步想法
在采用腾讯的方案实现之前，自己有一些自实现的小想法，在之前的Metal与图形渲染三：透明通道视频中，我们采用了左半部分的R通道代表alpha值，突然有个大胆的想法，如果我们采用G值代表遮罩位置，是不是就可以实现遮罩方案了呢？
说干就干，找美术导出了一个含有遮罩的Mp4文件，右半部分的R值代表透明度，而G值则代表遮罩位置，G值大于30代表有一个遮罩，可以看到正中间有一个等待被替换的头像。
2. 动手后的第一个难题
识别区域很简单，只要在片段着色器加个判断：if (255.0 * extraData.g) > 30.0，然后把片段着色器的输出改为gl_FragColor = vec4(0,0,0, extraData.r);就可以得到以下的效果。
然鹅，在替换纹理的过程中，遇到了我的第一个难题：怎么对需要替换的纹理进行采样。
我们知道，片段着色器是对光栅化后的像素进行处理，该着色器只会知道当前某个像素相对于该原图像（黄色区域）的位置，而不知道该像素相对于将要被替换的区域（蓝色区域）的相对位置，导致我们无法获知，当前像素点相对于需要替换的纹理（绿色）的位置。
也就是说，即便我们识别出来了某个像素点是遮罩点，但我们无法从另一个输入的纹理进行采样，因为我们并不知道当前像素点相对于纹理的位置。
3. 解决思路
那如果我们在提取右半边的时候，在提取渲染的过程中，顺便知道了该区域的大小和具体方位的话，我们在混合渲染时候拿到这个方位，是不是就能提取到像素相对于替换纹理的位置了呢？
这个方位我们可以通过该遮罩的坐标(minX, minY, maxX, maxY)确定出遮罩位置的矩形，在下一层中通过读取这个点相对于矩形的位置，来获取到需要提取的纹理坐标。
但是问题产生了，在GPU渲染的过程中，每个像素的渲染是独立的，我们并不能存储坐标值，而CPU也无法实时获取到GPU渲染过程中的某一个参数，只能读取渲染前/渲染后的完整图像的像素值，Stack Overflow问题1, Stack Overflow问题2印证了这一点。
那么只能尝试从渲染后的图像入手了，GPUImage库是链式调用的，在GPUImageCropFilter裁剪渲染后输出为GPUImageTwoInputFilter的输入，我们可以获取GPUImageCropFilter的输出（或GPUImageTwoInputFilter的输入），用CPU读取每一个像素后，得到(minX, minY, maxX, maxY)，再传入到GPUImageTwoInputFilter中。
这里我们采取的方案是用GPUImageTwoInputFilter的输入数据，在渲染开始前获取到输入数据的值，再传入到片段着色器中：
- (void)renderToTextureWithVertices:(const GLfloat *)vertices textureCoordinates:(const GLfloat *)textureCoordinates {
[self extractColorFrameBuffer:secondInputFramebuffer];
[super renderToTextureWithVertices:vertices textureCoordinates:textureCoordinates];
}
GPUImageFramebuffer有个byteBuffer，就是像素的BGRA数组，其排列方式为：
[B,G,R,A,B,G,R,A,....] // bytesPerRow个值
[B,G,R,A,B,G,R,A,....] // bytesPerRow个值
... // height行
[B,G,R,A,B,G,R,A,....] // bytesPerRow个值
既然我们要取G值，那么就需要遍历每一个像素点的第二位，读取出来，如果大于30，则判定为遮罩像素，传递给片段着色器
- (void)extractColorFrameBuffer:(GPUImageFramebuffer *)frameBuffer
{
maxX = maxY = 0.0;
minX = minY = 1.0;
GLubyte *rawImagePixels = frameBuffer.byteBuffer;
CVPixelBufferRef pixelBuffer = frameBuffer.pixelBuffer;
size_t bytesPerRow = CVPixelBufferGetBytesPerRow( pixelBuffer );
NSUInteger totalNumberOfPixels = round(bytesPerRow / 4 * inputTextureSize.height);
CFAbsoluteTime startTime = CFAbsoluteTimeGetCurrent();
for (NSUInteger currentPixel = 0; currentPixel < totalNumberOfPixels; currentPixel ++) {
// BGRA，取第二位
unsigned int green = rawImagePixels[currentPixel * 4 + 1];
BOOL isGreen = green > 30;
if ([self isValidGreen:isGreen]) {
NSInteger pixelPerRow = bytesPerRow / 4;
NSUInteger xCoordinate = currentPixel % pixelPerRow;
NSUInteger yCoordinate = currentPixel / pixelPerRow;
CGFloat normalizedXCoordinate = (xCoordinate / inputTextureSize.width);
CGFloat normalizedYCoordinate = (yCoordinate / inputTextureSize.height);
minY = MIN(minY, normalizedYCoordinate);
maxY = MAX(maxY, normalizedYCoordinate);
minX = MIN(minX, normalizedXCoordinate);
maxX = MAX(maxX, normalizedXCoordinate);
}
}
NSDictionary *extraDict = @{
@"minX" : @(minX),
@"maxX" : @(maxX),
@"minY" : @(minY),
@"maxY" : @(maxY),
};
__weak typeof(self) weakSelf = self;
[extraDict enumerateKeysAndObjectsUsingBlock:^(id _Nonnull key, id _Nonnull obj, BOOL * _Nonnull stop) {
if ([obj isKindOfClass:[NSNumber class]]) {
[weakSelf setFloat:[obj floatValue] forUniformName:key];
}
}];
//这部分为需要统计时间的代码
CFAbsoluteTime endTime = (CFAbsoluteTimeGetCurrent() - startTime);
NSLog(@"方法耗时: %f ms", endTime * 1000.0);
}
为排除干扰，需要连续n个点为遮罩点，才会判断为遮罩：
#define kGreenThreshold 5
- (BOOL)isValidGreen:(BOOL)isGreen {
if (!isGreen) {
lastGreenCount = 0;
return NO;
} else {
lastGreenCount++;
}
if (lastGreenCount <= kGreenThreshold) {
return NO;
}
return YES;
}
在片段着色器尝试输出遮罩区域：
void main() {
mediump vec4 origin = texture2D(inputImageTexture, textureCoordinate);
mediump vec4 extraData = texture2D(inputImageTexture2, textureCoordinate2);
float green = extraData.g;
if ((textureCoordinate2.x >= minX) && (textureCoordinate2.y >= minY) && (textureCoordinate2.x <= maxX) && (textureCoordinate2.y <= maxY)) {
mediump vec2 avatarPos = vec2(textureCoordinate2.x - minX, textureCoordinate2.y - minY);
mediump vec4 avatarFrag = texture2D(inputImageTexture3, avatarPos);
gl_FragColor = vec4(0,0,0, extraData.r);
} else {
gl_FragColor = vec4(origin.rgb, extraData.r);
}
}
最终能直接识别出遮罩区域了：
4. 性能分析
当我为得到结果感到高兴时，性能的表现狠狠地泼了一盆冷水过来：
这是没有用CPU读取像素的性能：
这是用了CPU读取像素的性能：
可以看到，如果用CPU去将每一帧的像素遍历读取的话，性能会大大受到影响，这是绝对无法容忍的..
不过也是，每一帧有好几十万个像素点，每一帧都这样搞，本应放到GPU处理的内容交由CPU处理了，CPU吃不消也是正常的..鉴于CPU获取到渲染内容也就像素这一种方式了，遂放弃该思路，老老实实接入VAP吧= =
三. 总结
虽然这次尝试以放弃告终，但经过自己好多天的查找资料、阅读文档，最终读取到了遮罩的最小最大XY坐标，并渲染到屏幕上，也算是有所收获，起码初步了解到了GPUImage的工作原理，以及如何编写OpenGL的着色器。
下一步我将阅读下VAP的源码，并尝试接入到工程中，毕竟他们这种思路才是比较合理的，将遮罩识别的步骤放到美术的工作，而不是用户的使用过程中才去识别，对于性能表现、对于可拓展性，无疑都是一个比较好的选择。还是要努力追赶上大佬们的脚步呀！