所见所得捕捉光影——实时滤镜创新二三点

标签: 交互设计 技术沙龙 视觉设计 CDC 创新 | 发表时间:2012-06-07 10:05 | 作者:CDCer
出处:http://cdc.tencent.com

  说起“滤镜”这个已经不再陌生的词汇。伴随着高性能移动终端的普及,其作为一种可以自动快速修饰图片的技术在短短几年内已然成为众多移动终端拍摄类应用的标配。但是在目前拍摄类应用里,大部分滤镜仍然停留于先拍摄后处理的静态处理流程,也有部分应用进一步实现了实时滤镜技术,但是两者的滤镜处理过程对用户来说是不可干预的,在交互上也相对单一,效果也比较单调。
  为了解决目前滤镜不可定制、功能单一缺乏交互等技术和体验上的不足,腾讯CDC的开发团队和设计团队一起配合,在实现高清实时滤镜的渲染技术基础上,提出了一种利用用户手势与终端交互改变滤镜效果,实时预览界面中或拍摄完成后更改滤镜效果的解决方案,比起传统的无滤镜拍照应用和图片美化应用,拍摄成品质量有了巨大的提升,通过这种技术满足了用户个性化的需求和交流,也大大降低了图片美化的成本。
 
手势交互DIY你的滤镜
  目前无论实时滤镜还是静态滤镜,滤镜效果都是不可定制、功能比较单一,针对这个问题我们提出了一种新的尝试,用户通过手势与终端进行交互,终端响应用户的交互行为,在滤镜变换过程中根据这些用户手势操作来动态调整滤镜效果。如下图

图1. 运用缩放手势调整鱼眼扭曲强度大小

  通过这种交互手段,我们可以通过终端所具有的手势操作来动态改变滤镜的效果,包括滤镜颜色浓度特效强度等等。让使用者用最直观的方式来DIY自己喜欢的滤镜效果,滤镜处理将变成一个更加有趣更加个性化的体验过程。

图2. 平移手势控制滤镜过滤的颜色值

 
所见即所得实时渲染

  大部分拍照应用都是采用先拍照后选择的滤镜处理流程,对拍照后图片每个像素点数据进行运算处理,整个过程依赖终端CPU的串行计算,处理效率低,依靠这种方案难以实现实时动态预览滤镜。
  为此我们采用了OpenGL ES技术将图象处理工作交予GPU进行。图形系统采用特有的管道(Pipeline)机制来运算处理图像数据,对像素点的处理为并行进行,大大提升了效率,OpenGL ES 2.0 允许提供编程来控制管道中一些重要的工序,其中包括shader着色器。着色器包含了允许在顶点上进行一般操作的顶点着色器,以及允许在片段上进行一般操作的片段着色器。我们利用着色器这一环节来编写shader程序运用图片处理算法来实时处理图像数据,并将结果输出,达到实时渲染所见所得的滤镜效果。

图3. OpenGL ES 2.0管道(Pipeline)机制

 
  百闻不如一见,我们录制了一段演示视频来展示以上提及的滤镜创新点带来的体验:


  移动终端便捷快速的特性带来的是拍照成本的极大降低,同时终端图像处理性能的不断升级提升也让更加绚丽的图片处理变为可能。我们CDC也在不断通过体验和技术上的实践和尝试,将滤镜图片处理变得更加友好和快捷。以上所做的滤镜研究和实践方案将很快出现在如Q拍等腾讯移动端产品上,敬请期待和体验。

  One more thing,目前CDC实时滤镜已入选腾讯创意月榜5月号复选名单,欢迎大家访问 http://djt.qq.com/thread-29001-1-1.html 参与投票支持我们的研究成果(实时滤镜是A号作品),并有机会获得年费蓝钻哦:)

(本文出自腾讯CDC博客: http://cdc.tencent.com/?p=5695)

相关 [所见所得 实时 滤镜] 推荐:

所见所得捕捉光影——实时滤镜创新二三点

- - 腾讯CDC
  说起“滤镜”这个已经不再陌生的词汇. 伴随着高性能移动终端的普及,其作为一种可以自动快速修饰图片的技术在短短几年内已然成为众多移动终端拍摄类应用的标配. 但是在目前拍摄类应用里,大部分滤镜仍然停留于先拍摄后处理的静态处理流程,也有部分应用进一步实现了实时滤镜技术,但是两者的滤镜处理过程对用户来说是不可干预的,在交互上也相对单一,效果也比较单调.

免费视频应用Tango用户数达7500万,推出视频通话的实时滤镜功能

- - 36氪
Tango是一款移动设备上很流行的免费视频应用,自09年上线起,用户数就一直保持着高速的增长. 由于其每次都抢先Skype入驻移动设备平台,所以现在已经在移动端积累了大量用户,最近,他们的用户数已经达到了7500万. Tango提供的大部分表情都是付费的,但CEO Eric Setton表示,每天人们会发送上百万个表情.

轮回? webkit系的滤镜

- - 博客园_Ruby's Louvre
伟大的IE5.5团队创造性地为浏览器带来N多东西,把网影打得落花流水的同时,也让微软可以有肆无恐地十年不更新IE6了. 它留下的瑰宝之一CSS滤镜,也因为自身的原因与CSS3的崛起,处境尴尬. 然而即便如此,我们也少不了它,如alpha滤镜,实现透明效果,AlphaImageLoader滤镜让IE支持png透明,blur滤镜模拟CSS3盒阴影,更NB的是其矩阵滤镜,完全可以用来实现CSS3 transform 2D!其实CSS3的许多效果何尝不是对IE滤镜的再实现.

用滤镜与笔刷–让照片变水彩画

- 并非无聊 - Yoxu Home
把喜欢的照片变成清淡的水彩画效果,有很多做法,比如滤镜,笔刷都可以实现.

Instagram 升级至 2.0,多了些滤镜也变快了!

- ArmadilloCommander - Engadget 中国版
在 iPhone 上深受欢迎的 Instagram 正式推出 2.0 版本,新增了四种新滤镜(Amaro、Rise、Hudson 及 Valencia)、并支持实时滤镜及相机移轴功能,让你在拍摄的时候,即可预览最终成果. 另外,新版本也提供关闭相框功能、一键旋转方向,并把照片尺寸从 612 x 612 提升至 1936 x 1936.

传Android 4.0内置照片编辑工具:可添加滤镜

- Zhaojing - cnBeta.COM
Google即将发布Android 4.0操作系统“冰淇淋三明治”,有消息称这款操作系统将包含内置照片编辑工具和滤镜. Android 手机的摄像功能似乎将包括一系列照片编辑能力,专门报道Android新闻的科技博客Android Police日前曝光了一组图标,揭示了从矫正照片到翻转、锐化、添加滤镜等Android系统新功能.

制作一个类似 Instagram的图片滤镜web App(上)

- - ria之家--RIA三部曲:jquery、ext、flex
原文看: http://tutorialzine.com/2013/02/instagram-filter-app/,明河扩写了下. 这篇教程会非常有意思, Instagram或美图秀秀或camera360的照片滤镜功能想必大家都完成,这篇教程将教大家使用html5的知识,实现类似功能. 源码可以到 明河的github上查看.

网页设计中的彩色滤镜效果

- - 可乐橙
在当今这个充斥着先进的特效和精妙风格的世界中,谁曾料到,像纯色和渐变这样简单的手法,竟能够催化出创造力,并极大提升网站的美学水准. 现代网页设计师们,证明了优雅的插画、精致的图形和壮丽的照片,都能在彩色滤镜效果下很自然地得到强调. 气氛焕然一新,网站开始变得光彩夺目. 首先,彩色滤镜能给网站耳目一新的外观,却不会增加负担.

Nik Software Color Efex Pro 4.0专业版 最强的PS调色滤镜插件

- Richard - 爱软件
Photoshop作为最强的图像后期处理工具与其强大的各种滤镜、插件的扩充支持有着不可分割的关系,调色作为最常用的图像后期处理操作,估计很多PS资深玩家都曾使用过Nik Software Color Efex,通过Nik Software Color Efex Pro的扩充支持,使用PS调整各种场合风格的特殊效果就变得非常简单,轻松一点即可实现.

【转】 CSS透明opacity和IE各版本透明度滤镜filter的最准确用法

- - Web前端 - ITeye博客
CSS3的透明度属性opacity想必大家都已经用的无处不在了. 而对于不支持CSS3的浏览器如何进行透明处理,保持浏览器效果的一致,这个估计谁都会写,但是涉及到filter的具体语法含义和各版本写法的不同区别,很多人都搞不准确,我曾经问过许多群里的大牛,说的都不是很准确,网上的说法就更五花八门了.