上一篇文章介紹了“看臉”的世界背後的技術，很多人會好奇那些萌萌的兔耳朵，貓胡須是怎麼貼到臉上并且還有各種萌萌哒動畫的，現在就為你揭曉謎題。拓幻科技不僅讓幻想不止于此，也讓程序猿鴿鴿的技能變得不那麼神秘，吼吼吼~

Faceu，B612刷爆朋友圈，因為他們在拍照、拍視頻時加入了動态貼紙的功能之後，妹子們拍照已經不滿足于僅僅瘦臉、磨皮、大眼等對圖片的處理。于是一個不能加萌萌哒貼紙的拍照軟件，都不好意思上架了。那麼如何快速讓自己的相機快速擁有圖一這種加貓耳朵的神奇秘術呢？

圖1 拓幻科技貼紙demo示意圖

在上一篇文章中我們介紹過，這些圖像美化技術之前都會有人工智能AI技術保駕護航。這就是人臉檢測和追蹤，AI為其提供了底層技術框架。據程序猿葛葛說，這個技術也有很多是開源的，隻是效率和效果上達不到商用級别，感興趣的童鞋自己嘗試則完全沒問題的，比如OpenCV，dlib，flandmark。這個技術也是一般做特效相機軟件的門檻，沒有這個技術，就沒有實時貼紙，當然也不能把臉變小把眼睛變大啦，科科。我們拓幻科技是基于自己研發的人臉檢測追蹤器，實時檢測大家帥氣的面龐的哦。人臉追蹤器會檢測人臉關鍵點的位置信息，并且實時跟蹤，不管你側臉，張嘴還是閉眼。

拿到這些關鍵點信息後，就是AR渲染了。這個步驟必須配合設計師完成，設計師會設計好貓耳朵的原始樣貌，然後會設計很多張不同形态下連續的圖片，連起來播放就像是貓耳朵在動啦，是不是很眼熟？就像小時候在一本書每一頁的邊緣畫上不同動作的相同小人，快速翻書就像在看動畫一樣。然後程序員葛葛會根據設計師設計的貼紙，頁數以及人臉追蹤器标準點位置等參數，生成相應的參數文件，告訴代碼這個貓耳朵該放在什麼位置，以及多少張形成一個連續的動畫。接下來就是渲染了，如果隻是自己嘗試，建議試試使用GPUImage等開源庫，功能也是十分強大。以下的話，都是程序猿葛葛看不下去，搶過我的鍵盤，自己敲的。

OK，各位，切入正題。貼紙效果是可以基于GPUImage實現的，文章末尾我會放上一些demo以供參考。貼紙效果其實就是在人臉上貼一些圖片，同時這些圖片是跟随着人臉的位置改變的。其實可以這麼理解，如果我們不強調貼圖的位置，這就是一個簡單的水印需求。根據人臉檢測的結果動态調整水印貼紙的位置，加上剛剛商務小妹說的那些，即可實現簡單的實時動态貼紙效果。添加水印的方法，在GPUImage的官方demo中就已經有文字水印的實現：

GPUImageFilter *filter = [[GPUImageFilter alloc] init]; [self.videoCamera addTarget:filter]; GPUImageAlphaBlendFilter *blendFilter = [[GPUImageAlphaBlendFilter alloc] init]; blendFilter.mix = 1.0; NSDate *startTime = [NSDate date]; UIView *temp = [[UIView alloc] initWithFrame:self.view.frame]; UILabel *timeLabel = [[UILabel alloc] initWithFrame:CGRectMake(0.0, 0.0, 240.0f, 40.0f)]; timeLabel.font = [UIFont systemFontOfSize:17.0f]; timeLabel.text = @"Time: 0.0 s"; timeLabel.textAlignment = UITextAlignmentCenter; timeLabel.backgroundColor = [UIColor clearColor]; timeLabel.textColor = [UIColor whiteColor]; [temp addSubview:timeLabel]; uiElementInput = [[GPUImageUIElement alloc] initWithView:temp]; [filter addTarget:blendFilter]; [uiElementInput addTarget:blendFilter]; [blendFilter addTarget:filterView]; __unsafe_unretained GPUImageUIElement *weakUIElementInput = uiElementInput; [filter setFrameProcessingCompletionBlock:^(GPUImageOutput * filter, CMTime frameTime){ timeLabel.text = [NSString stringWithFormat:@"Time: %f s", -[startTime timeIntervalSinceNow]]; [weakUIElementInput update]; }];

首先要熟悉一下GPUImageAlphaBlendFilter和GPUImageUIElement。

GPUImageUIElement繼承GPUImageOutput類，作為響應鍊的源頭。通過CoreGraphics把UIView渲染到圖像，并通過glTexImage2D綁定到outputFramebuffer指定的紋理，最後通知targets紋理就緒。它作用是把一個視圖的layer通過CALayer的renderInContext:方法把layer轉化為image，然後作為OpenGL的紋理傳給GPUImageAlphaBlendFilter。而GPUImageAlphaBlendFilter則是一個blend filter,它需要兩個輸入， 它的第一個輸入是攝像頭數據，第二個輸入則是剛剛提到的GPUImageUIElement的數據，GPUImageAlphaBlendFilter将這兩個輸入做alpha blend，可以簡單的理解為将第二個輸入疊加到第一個的上面。

那麼這樣就可以實現簡單的貼紙和視頻幀的疊加了。

通過以上的方法，就可以簡單實現一個實時貼紙效果的demo啦。當然渲染方法也可以不用GPUImage庫，可以使用自己的渲染方法，本文隻是個例子。這個demo隻是實現功能，如果想要向拓幻科技一樣進行商用，那當然需要進一步做優化的，比如渲染方法，效率等等都是需要考慮的。

附上經典demo源碼地址，大家可以學習哦。

最後再給大家看看我們公司的萌妹紙和程序猿葛葛吧，将“黑”朋友進行到底，盡在拓幻科技~~~

圖2 背景替換示意圖 妹紙總嫌不是瓜子臉，這下夠了吧，哈哈哈

圖3 被哈哈鏡玩壞了的程序猿葛葛

希望下班可以安全回家，不會被他們拖出去打死~~~ 好啦，小夥伴們，我們下期再見！也可以關注我們官方微信公衆号，請搜索微信公衆号，拓幻科技告訴我們你們最想了解什麼技術，我們會在這裡為你解答~

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!