美文网首页iOS技术
Chiper - 技术选型 & 产品设计

Chiper - 技术选型 & 产品设计

作者: 星___尘 | 来源:发表于2017-09-21 17:11 被阅读16次

产品设计

Chiper中,一开始的设计就是只有两个界面,第一个是实时拍摄界面,第二个是拍摄效果预览界面。

这是实时拍摄界面:


IMG_0845.PNG

这是拍摄效果预览界面:


IMG_0849.PNG

除了这两个界面,还有就是为这两个界面添加的滤镜选择功能:

IMG_0846.PNG IMG_0850.PNG

整一款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着色器编写底层滤镜。优点:性能好,定制灵活,缺点:开发复杂

参考

Core Image 你需要了解的那些事~

相关文章

  • Chiper - 技术选型 & 产品设计

    产品设计 在Chiper中,一开始的设计就是只有两个界面,第一个是实时拍摄界面,第二个是拍摄效果预览界面。 这是实...

  • 爬虫(3-1 3-2)

    3-1 爬虫技术选型,爬虫能做什么?技术选型:scrapy vs requests+beautifulsoup1....

  • 网页设计 - 收藏集 - 掘金

    免费且又精致的 HTML/CSS 站点模板 - 前端 - 掘金&l...

  • 技术选型指南

    这是一篇综合类技术选型指南,试图为你提供一份比较通用的技术选型思维框架。当你需要进行技术选型时,可以参照它来设计自...

  • 伴鱼数据库选型的思考,为什么我们 all in TiDB

    作者:伴鱼技术团队 技术选型是由技术方向和业务场景 trade-off 决定的,脱离业务场景来说技术选型是没有任何...

  • Metal基础入门

    一、背景和技术选型 关于技术方案的选型,最权威的肯定是Metal for OpenGL Developers[ht...

  • 2017/03/20 技术营销精选 第1期

    1. 为什么我的AMP页面跳出率异常偏高? 阅读 Google推出的AMP技术使移动网页访问速度更快,但是也为网站...

  • 通过阿里云maxcompute快速构建数据仓库

    前期技术选型 技术选型确定 鉴于开发资源,以及尚无大数据的技术基础,选用了可以快速上手的阿里云maxcompute...

  • 技术选型

    一、构建工具 gulp 任务管理,对任务文件流式操作,内存中完成,效率高 grunt 任务管理,对任务文件先读...

  • 技术选型

    介绍后台管理系统常见的组合搭配。主要是从业务逻辑层的实现和视图层考虑。 1:Angular+Bootstrap 市...

网友评论

    本文标题:Chiper - 技术选型 & 产品设计

    本文链接:https://www.haomeiwen.com/subject/itwfsxtx.html