OpenGL接入遮罩自实现调研

零. 前言

在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的源码，并尝试接入到工程中，毕竟他们这种思路才是比较合理的，将遮罩识别的步骤放到美术的工作，而不是用户的使用过程中才去识别，对于性能表现、对于可拓展性，无疑都是一个比较好的选择。还是要努力追赶上大佬们的脚步呀！