零. 前言
藍(lán)線挑戰(zhàn)寺董，曾經(jīng)一度風(fēng)靡各大短視頻平臺(tái)的一個(gè)玩法，不乏有大神利用這個(gè)玩法產(chǎn)生了一系列的神作豁遭，更不乏失敗踩雷的各種捧腹之作拴还，今天我們來用Metal實(shí)現(xiàn)一下這個(gè)可玩性很高的挑戰(zhàn)吧~
一. 原理概述
藍(lán)線挑戰(zhàn)的特點(diǎn)是：處于藍(lán)線掃過的地方膝宁，取的是之前渲染過的內(nèi)容鸦难；處于藍(lán)線未掃過的地方，取的是當(dāng)前攝像頭的內(nèi)容员淫，而處于藍(lán)線的范圍合蔽，取的自然是藍(lán)線的色值，于是乎我們得到一條渲染鏈：
攝像頭獲取到CVPixelBuffer后介返，讓MovieReader處理生成紋理拴事，BlueLineFilter先根據(jù)攝像頭的紋理和自己上一幀處理過的輸出紋理渲染進(jìn)行，然后讓DrawBlueLineFilter進(jìn)行藍(lán)線的繪制圣蝎，最終渲染到RenderView上面去刃宵。
核心就是：處理好上一幀之后的紋理要存儲(chǔ)好，和當(dāng)前攝像頭的紋理進(jìn)行渲染徘公，就可以得到合起來的內(nèi)容啦~
二. BlueLineFilter
該Filter核心是如何存儲(chǔ)之前渲染好的內(nèi)容和獲取當(dāng)前的內(nèi)容進(jìn)行渲染牲证，其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;
}
}
代碼邏輯非常簡(jiǎn)單，Offset代表當(dāng)前藍(lán)線處于的位置关面，如果處于藍(lán)線之前坦袍，則取上一幀的輸出十厢，如果處于藍(lán)線之后，則取當(dāng)前攝像頭的輸出捂齐。水平移動(dòng)取x蛮放，垂直移動(dòng)取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;
}
同樣比較清晰奠宜，先聲明這是個(gè)雙輸入Filter包颁，然后根據(jù)存儲(chǔ)上一幀的outputTexture作為輸入，和當(dāng)前攝像頭的紋理進(jìn)行渲染即可挎塌，percent和isVertical都是由外部定義好傳進(jìn)來的徘六。
三. DrawBlueLineFilter
該Filter主要作用是進(jìn)行藍(lán)線的繪制，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;
}
}
原理其實(shí)和上面差不多榴都，到底是取藍(lán)線顏色還是取攝像頭顏色待锈，邏輯很清晰了，這里就不講解了~
四. 外部調(diào)用
其實(shí)就是加個(gè)定時(shí)器和藍(lán)線移動(dòng)開關(guān)嘴高，也沒啥好說的竿音。
- (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;
}
五. 總結(jié)
這是我做過最好玩的一個(gè)Demo，趣味性非常高拴驮，能搞笑也能秀操作春瞬。這個(gè)項(xiàng)目主要的難點(diǎn)是如何獲取到上一幀的紋理，但因?yàn)樽约悍庋b了一個(gè)可復(fù)用性較高的MetalKit套啤，所以也不算特別難宽气，越來越感覺到鏈?zhǔn)戒秩镜暮糜昧藒
