AI智能
改变未来

直播IOS端美颜滤镜技术分析

钉钉、微博极速扩容黑科技,点击观看阿里云弹性计算年度发布会!>>>

随着各种各样的直播app的爆火,实时美颜滤镜的需求也越来越多。下面将主要介绍实现美颜滤镜的原理和思路,原理可以移步看下GPUImage原理,今天分享的是GPUImageBeautifyFilter美颜滤镜的实现。美颜只是不同滤镜组合起来的效果,实际上美颜也是一种滤镜,只不过它组合了各种需求的滤镜,例如磨皮、美白、提高饱和度、提亮之类的。图玩智能科技为企业提供更稳定更优质的美颜产品及服务,欢迎随时咨询www.toivan.com。

GPUImageBeautifyFilter

GPUImageBeautifyFilter是基于GPUImage的实时美颜滤镜,包括

GPUImageBilateralFilter、GPUImageCombinationFilter、GPUImageHSBFilter。

GPUImageBeautifyFilter.h创建上面的对象

绘制步骤如下:

准备纹理

绘制纹理

显示处理后的纹理

一、 准备纹理(将要用到的类)

[GPUImageVideoCamera] –

[GPUImageBeautifyFilter] –

[GPUImageBilateralFliter] –

[GPUImageCombinationFilter] –

[GPUImageCannyEdgeDetectionFilter] –

准备过程分三步:

第一个纹理:

1、GPUImageVideoCamera捕获摄像头图像

调用newFrameReadyAtTime: atIndex:通知GPUImageBeautifyFilter;

2、GPUImageBeautifyFilter调用newFrameReadyAtTime: atIndex:

通知GPUImageBilateralFliter输入纹理已经准备好;

第二个纹理:

3、GPUImageBilateralFliter 绘制图像后,

informTargetsAboutNewFrameAtTime(),

调用setInputFramebufferForTarget: atIndex:

把绘制的图像设置为GPUImageCombinationFilter输入纹理,

并通知GPUImageCombinationFilter纹理已经绘制完毕;

4、GPUImageBeautifyFilter调用newFrameReadyAtTime: atIndex:

通知 GPUImageCannyEdgeDetectionFilter输入纹理已经准备好;

第三个纹理:

5、GPUImageCannyEdgeDetectionFilter 绘制图像后,

把图像设置为GPUImageCombinationFilter输入纹理;

6、GPUImageBeautifyFilter调用newFrameReadyAtTime: atIndex:

通知 GPUImageCombinationFilter输入纹理已经准备好;

二、绘制纹理:

7、判断纹理数量

GPUImageCombinationFilter判断是否有三个纹理,三个纹理都已经准备好后

调用GPUImageThreeInputFilter的绘制函数renderToTextureWithVertices: textureCoordinates:,

图像绘制完后,把图像设置为GPUImageHSBFilter的输入纹理,

通知GPUImageHSBFilter纹理已经绘制完毕;

8、绘制纹理

GPUImageHSBFilter调用renderToTextureWithVertices:

textureCoordinates:绘制图像,

完成后把图像设置为GPUImageView的输入纹理,并通知GPUImageView输入纹理已经绘制完毕;

三、显示纹理

9、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实现

1、使用Cocoapods导入GPUImage;

2、导入GPUImageBeautifyFilter文件夹;

3、创建视频源GPUImageVideoCamera;

4、创建最终目的源:GPUImageView;

5、创建最终美颜滤镜:GPUImageBeautifyFilter;

6、设置GPUImage处理链,从数据源 -> 滤镜 -> 最终界面展示。

切换美颜的时候要移动处理链

赞(0) 打赏
未经允许不得转载:爱站程序员基地 » 直播IOS端美颜滤镜技术分析