直播IOS端美顏濾鏡技術分析

隨着各類各樣的直播app的爆火，實時美顏濾鏡的需求也愈來愈多。下面將主要介紹實現美顏濾鏡的原理和思路，原理能夠移步看下GPUImage原理，今天分享的是GPUImageBeautifyFilter美顏濾鏡的實現。美顏只是不一樣濾鏡組合起來的效果，實際上美顏也是一種濾鏡，只不過它組合了各類需求的濾鏡，例如磨皮、美白、提升飽和度、提亮之類的。圖玩智能科技爲企業提供更穩定更優質的美顏產品及服務，歡迎隨時諮詢www.toivan.com。

 

GPUImageBeautifyFilter

GPUImageBeautifyFilter是基於GPUImage的實時美顏濾鏡，包括

GPUImageBilateralFilter、GPUImageCombinationFilter、GPUImageHSBFilter。

 

GPUImageBeautifyFilter.h建立上面的對象

繪製步驟以下：

準備紋理

繪製紋理

顯示處理後的紋理

 

1、 準備紋理（將要用到的類）

[GPUImageVideoCamera] -

[GPUImageBeautifyFilter] -

[GPUImageBilateralFliter] -

[GPUImageCombinationFilter] -

[GPUImageCannyEdgeDetectionFilter] -

 

準備過程分三步：

第一個紋理：

一、GPUImageVideoCamera捕獲攝像頭圖像

調用newFrameReadyAtTime: atIndex:通知GPUImageBeautifyFilter；

二、GPUImageBeautifyFilter調用newFrameReadyAtTime: atIndex:

通知GPUImageBilateralFliter輸入紋理已經準備好；

 

第二個紋理：

三、GPUImageBilateralFliter 繪製圖像後，

informTargetsAboutNewFrameAtTime()，

調用setInputFramebufferForTarget: atIndex:

把繪製的圖像設置爲GPUImageCombinationFilter輸入紋理，

並通知GPUImageCombinationFilter紋理已經繪製完畢；

四、GPUImageBeautifyFilter調用newFrameReadyAtTime: atIndex:

通知 GPUImageCannyEdgeDetectionFilter輸入紋理已經準備好；

 

第三個紋理：

五、GPUImageCannyEdgeDetectionFilter 繪製圖像後，

把圖像設置爲GPUImageCombinationFilter輸入紋理；

六、GPUImageBeautifyFilter調用newFrameReadyAtTime: atIndex:

通知 GPUImageCombinationFilter輸入紋理已經準備好；

2、繪製紋理：

七、判斷紋理數量

GPUImageCombinationFilter判斷是否有三個紋理，三個紋理都已經準備好後

調用GPUImageThreeInputFilter的繪製函數renderToTextureWithVertices: textureCoordinates:，

圖像繪製完後，把圖像設置爲GPUImageHSBFilter的輸入紋理,

通知GPUImageHSBFilter紋理已經繪製完畢；

 

八、繪製紋理

GPUImageHSBFilter調用renderToTextureWithVertices:

textureCoordinates:繪製圖像，

完成後把圖像設置爲GPUImageView的輸入紋理，並通知GPUImageView輸入紋理已經繪製完畢；

 

3、顯示紋理

九、GPUImageView把輸入紋理繪製到本身的幀緩存，而後經過

[self.context presentRenderbuffer:GL_RENDERBUFFER];顯示到UIView上。

 

繪製紋理

設置繪製圖像的輸入紋理

GPUImage集成步驟：

 

自定義組合濾鏡美顏

1.使用Cocoapods導入GPUImage；

2.建立視頻源GPUImageVideoCamera；

3.建立最終目的源：GPUImageView；

4.建立GPUImageFilterGroup濾鏡組合，須要組合亮度；

5.(GPUImageBrightnessFilter)和雙邊濾波;

6.(GPUImageBilateralFilter)這兩個濾鏡達到美顏效果；

7.設置濾鏡組鏈；

8.設置GPUImage處理鏈，從數據源 -> 濾鏡 -> 最終界面效果；

9.開始採集視頻。

ps:

 

GPUImageVideoCamera必需要強引用，不然在採集視頻過程當中會被銷燬;

必須調用startCameraCapture，底層纔會把採集到的視頻源，渲染到GPUImageView中才能顯示;

GPUImageBilateralFilter的distanceNormalizationFactor值越小，磨皮效果越好,distanceNormalizationFactor取值範圍: 大於1。

利用美顏濾鏡GPUImageBeautifyFilter實現

一、使用Cocoapods導入GPUImage；

二、導入GPUImageBeautifyFilter文件夾；

三、建立視頻源GPUImageVideoCamera；

四、建立最終目的源：GPUImageView；

五、建立最終美顏濾鏡：GPUImageBeautifyFilter；

六、設置GPUImage處理鏈，從數據源 -> 濾鏡 -> 最終界面展現。

切換美顏的時候要移動處理鏈