零. 前言
蓝线挑战，曾经一度风靡各大短视频平台的一个玩法，不乏有大神利用这个玩法产生了一系列的神作，更不乏失败踩雷的各种捧腹之作，今天我们来用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，所以也不算特别难，越来越感觉到链式渲染的好用了~
