产品设计
在Chiper中,一开始的设计就是只有两个界面,第一个是实时拍摄界面,第二个是拍摄效果预览界面。
这是实时拍摄界面:
这是拍摄效果预览界面:
除了这两个界面,还有就是为这两个界面添加的滤镜选择功能:
整一款App设计非常简单,重点在于实时滤镜的实现。
技术选型
由于是一款滤镜应用,所以会涉及到一些滤镜的技术点,主要涉及的有以下四点:
1、Core Image Or GPUImage
在iOS平台上,实现滤镜效果主要有两个技术框架:iOS自带的Core Image 和 开源框架GPUImage。Core Image 和 GPUImage 之前的区别和优势这里就不讨论了,这里只说Chiper为什么选择Core Image 而不是性能更高的 GPUImage。
了解这两者的区别的都知道,GPUImage拥有更高的性能,但其对于Chiper这个项目来说,有个不好的缺点:GPUImage是基于ObjC项目的,如果采用GPUImage的话,意味着项目要采用混编,而混编项目的编译时间大家都懂的。其次,由于GPUImage是一个第三方的开源框架,很多诸如实时滤镜等功能都是封装好的,不太利于了解整个滤镜工作流程,而且额外的第三方会增加包的大小。而Core Image是官方开发的框架,结合Metal,Accelerate等苹果原生框架时能得到更大性能的提升,特别对于滤镜链,超大图等,优势明显。具体区别请看Core Image 你需要了解的那些事~这篇文章。从长远考虑,Chiper采用Core Image作为基本滤镜框架。
2、Open GL ES
对于实时滤镜的渲染,如果不使用GPUImage的话,暂时只有通过Apple的GLKView来实现。GLKView是基于Open GL ES的,主要用来处理图像实时渲染。使用过程中主要注意一些小的优化技巧,比如Context的复用(重新创建Context的代价很大,会对性能造成比较大的影响)。
3、Swift Or ObjC
这个就不多说了,Swift是未来时,ObjC是过去时,当然要拥抱未来了。
4、Filters
滤镜的实现主要有四种方式
1)System Filters:系统自带的滤镜,通过改变参数的传入来达到不同的滤镜效果。优点:使用简单,缺点:自带滤镜较少
2)Combine Filters:通过系统自带滤镜组成滤镜链,不同系统滤镜效果叠加来实现新的滤镜效果。优点:更灵活,缺点:可能有性能问题
3)3D-LUTs:3D Look Up Table - 3D颜色查找表,通过LUT实现滤镜效果,简单说就是根据原始的RGBA进行颜色映射改变整体色调,从而实现滤镜效果。优点:使用简单,可扩展性比较好,不需要编码即可实现新的滤镜,缺点:需要优秀的UI设计来设计滤镜
4)Custom Filters:使用OpenGL ES着色器编写底层滤镜。优点:性能好,定制灵活,缺点:开发复杂