Metal与图形渲染七：蓝线挑战

零. 前言

蓝线挑战，曾经一度风靡各大短视频平台的一个玩法，不乏有大神利用这个玩法产生了一系列的神作，更不乏失败踩雷的各种捧腹之作，今天我们来用Metal实现一下这个可玩性很高的挑战吧~

一. 原理概述

蓝线挑战的特点是：处于蓝线扫过的地方，取的是之前渲染过的内容；处于蓝线未扫过的地方，取的是当前摄像头的内容，而处于蓝线的范围，取的自然是蓝线的色值，于是乎我们得到一条渲染链：

摄像头获取到CVPixelBuffer后，让MovieReader处理生成纹理，BlueLineFilter先根据摄像头的纹理和自己上一帧处理过的输出纹理渲染进行，然后让DrawBlueLineFilter进行蓝线的绘制，最终渲染到RenderView上面去。

核心就是：处理好上一帧之后的纹理要存储好，和当前摄像头的纹理进行渲染，就可以得到合起来的内容啦~

二. BlueLineFilter

该Filter核心是如何存储之前渲染好的内容和获取当前的内容进行渲染，其Shader如下：

fragment float4 blueLineFragment(TwoInputVertexIO input [[ stage_in ]],
                                 texture2d<float> cameraTexture [[texture(0)]],
                                 texture2d<float> screenShotTexture [[texture(1)]],
                                 constant float &offset [[ buffer(0) ]],
                                 constant bool &isVertical [[ buffer(1) ]])
{
    constexpr sampler quadSampler;
    float4 cameraColor = cameraTexture.sample(quadSampler, input.textureCoordinate);
    float4 screenShotColor = screenShotTexture.sample(quadSampler, input.textureCoordinate2);
    
    float coor = isVertical ? input.position.y : input.position.x;
    
    if (coor < offset) {
        return screenShotColor;
    } else {
        return cameraColor;
    }
}

代码逻辑非常简单，Offset代表当前蓝线处于的位置，如果处于蓝线之前，则取上一帧的输出，如果处于蓝线之后，则取当前摄像头的输出。水平移动取x，垂直移动取y。

来看看怎么获取上一帧的纹理的：

- (instancetype)initWithRenderContext:(HobenMetalRenderContext *)renderContext {
    return [super initWithVertexName:@"twoInputVertex" fragmentName:@"blueLineFragment" numberOfInputs:2 renderContext:renderContext];
}

- (void)newTextureAvailable:(id<MTLTexture>)texture index:(NSInteger)index commandBuffer:(id<MTLCommandBuffer>)commandBuffer {
    [super newTextureAvailable:texture index:index commandBuffer:commandBuffer];
    
    if (!_lastTexture) {
        _lastTexture = texture;
    }

    [super newTextureAvailable:_lastTexture index:1 commandBuffer:commandBuffer];
}

- (void)renderToTextureWithVertices:(NSArray *)vertices textureCoordinates:(NSArray *)textureCoordinates {
    for (HobenMetalTexture *inputTexture in _inputTextures) {
        inputTexture.textureCoordinates = textureCoordinates;
    }
    float offset = _percent * _lastTexture.height;
    id <MTLBuffer> offsetBuffer = [_renderContext.device newBufferWithBytes:&offset length:sizeof(float) options:MTLResourceStorageModeShared];
    bool isVertical = _isVertical;
    id <MTLBuffer> isVerticalBuffer = [_renderContext.device newBufferWithBytes:&isVertical length:sizeof(bool) options:MTLResourceStorageModeShared];
    
    [_renderContext renderQuad:_pipelineState inputTextures:_inputTextures imageVertices:vertices vertexBuffers:nil fragmentBuffers:@[offsetBuffer, isVerticalBuffer] outputTexture:_outputTexture commandBuffer:_filterCommandBuffer];
    
    [self transmitTextureToAllTargets:_outputTexture commandBuffer:_filterCommandBuffer];
    
    self.lastTexture = _outputTexture;
}

同样比较清晰，先声明这是个双输入Filter，然后根据存储上一帧的outputTexture作为输入，和当前摄像头的纹理进行渲染即可，percent和isVertical都是由外部定义好传进来的。

三. DrawBlueLineFilter

该Filter主要作用是进行蓝线的绘制，Shader如下：

constant float4 blueLineColor = float4(0, 1, 1, 1);

constant float blueLineSize = 5;

fragment float4 drawBlueLineFragment(SingleInputVertexIO input [[ stage_in ]],
                                     texture2d<float> inputTexture [[texture(0)]],
                                     constant float &offset [[ buffer(0) ]],
                                     constant bool &isVertical [[ buffer(1) ]])
{
    constexpr sampler quadSampler;
    float4 inputTextureColor = inputTexture.sample(quadSampler, input.textureCoordinate);
    
    float coor = isVertical ? input.position.y : input.position.x;
    
    if (coor < offset || coor > offset + blueLineSize) {
        return inputTextureColor;
    } else {
        return blueLineColor;
    }
}

原理其实和上面差不多，到底是取蓝线颜色还是取摄像头颜色，逻辑很清晰了，这里就不讲解了~

四. 外部调用

其实就是加个定时器和蓝线移动开关，也没啥好说的。

- (void)startTimer {
    _percent = 0;
    [self stopTimer];
    __weak typeof(self) weakSelf = self;
    self.timer = [NSTimer timerWithTimeInterval:0.015 repeats:YES block:^(NSTimer * _Nonnull timer) {
        weakSelf.percent += 0.001;
    }];
    
    [[NSRunLoop currentRunLoop] addTimer:self.timer forMode:NSRunLoopCommonModes];
}

- (void)stopTimer {
    if (self.timer) {
        [self.timer invalidate];
        self.timer = nil;
    }
}

- (void)setPercent:(CGFloat)percent {
    _percent = percent;
    
    if (percent > 1) {
        [self stopRecord];
        return;
    }
    
    self.blueLineFilter.percent = percent;
    self.drawBlueLineFilter.percent = percent;
}

五. 总结

这是我做过最好玩的一个Demo，趣味性非常高，能搞笑也能秀操作。这个项目主要的难点是如何获取到上一帧的纹理，但因为自己封装了一个可复用性较高的MetalKit，所以也不算特别难，越来越感觉到链式渲染的好用了~

参考：使用OpenGL挑战抖音蓝线特效