终端图像处理实践:AR全景动态贴纸方案简介

作者简介:billzbwang(王志斌),天天P图 iOS 工程师

全景动态贴纸主要包含三部分技术要点:

1. 三维粒子系统计算运动轨迹 2. 利用陀螺仪获取手机姿态 3. 构建三维空间,根据手机姿态渲染粒子

1. 粒子系统

主要由粒子发射器,粒子元素,粒子纹理构成 根据粒子文件的配置,粒子发射器按一定发射速度随机发射粒子 粒子发射的坐标、初速度、加速度具备随机性 后续每帧轨迹运算都会根据粒子速度和加速度等物理属性更新坐标,具备一定的规律性

下图是一个2D粒子系统编辑器

全景动态贴纸要在三维空间内进行渲染,因此需要将2D粒子系统扩充到3D 本次的3D粒子轨迹系统由空间同学负责开发,具备如下特性: 1)自由度 利用一元多次表达式,在保持随机性和规律性的同时大大提高了粒子脚本的自由度 例1:随机速度、随机起点、随机加速度的轨迹 rand0%1100-550 + (rand1%30-15)*t + 0.5*(2+rand2%10-5)*t*t 例2:S型上升气球轨迹 "positionX" : "sin(2*t)*30", "positionY" : "50*t", "positionZ" : "sin(2*t)*30" 2)高性能 使用C++高效表达式运算模块,达到了:10000次表达式运算,平均耗时2~5毫秒

2. 手机姿态获取

主要用到iOS系统提供的CoreMotion模块 启动CoreMotion后,可以实时获取手机姿态相关的欧拉角信息 这里光有手机姿态还不够,还需要有个参照用于确定手机在三维空间中的朝向 CoreMotion提供2种参照: 1)x轴指向磁极北方,手机屏幕朝上 2)启动模块时的某个随机方向固定为x轴正方向,手机屏幕朝上 为了便于理解和调试,这里采用了x轴指向磁极北方为正方向的参照方式

3. 三维空间渲染

渲染这块需要一些想象力,因为OpenGL本质上还是在二维图像上进行渲染 通过想象,把三维粒子散布在三维空间中 根据手机姿态设置透视投影矩阵 透视投影矩阵的设置包含2步: 1)根据相机位置、朝向创建lookat矩阵 2)设置相机的视野范围,创建一个平截锥体矩阵 lookat矩阵和平截锥体矩阵共同构成透视投影矩阵

那么这个透视投影矩阵的作用到底是啥? 简单来讲,就是计算平截锥体内的物体在远平面上的投影,将三维空间坐标转换为渲染窗口上的二维坐标 透视投影矩阵的另一个作用,是利用齐次坐标进行仿射变换,实现三维物体的世界坐标变换和远小近大的透视效果

3.1 关于2D纸片的3D渲染

本次的粒子渲染并没有用到3D模型,而是将2D纸片散布在三维空间来模拟3D效果 为了确保2D纸片不会因为相机角度而出现穿帮现象,渲染时需要做点小手脚 每张纸片在渲染时都会进行翻转,确保纸片是按特定角度完全面对镜头的 只要设计师大大设计的纸片元素足够逼真,完全可以以假乱真

3.2 关于性能

利用游戏引擎中batchNode的思路,将同一个元素的所有序列帧打包进一张sprite纹理 渲染时使用同一个纹理的元素可以打包进一次drawArray来提高性能 1000个元素的打包渲染相比逐个渲染性能可以提升3倍以上


作者简介:billzbwang(王志斌),天天P图 iOS 工程师

文章后记: 天天P图是由腾讯公司开发的业内领先的图像处理,相机美拍的APP。欢迎扫码或搜索关注我们的微信公众号:“天天P图攻城狮”,那上面将陆续公开分享我们的技术实践,期待一起交流学习!

加入我们: 天天P图技术团队长期招聘:(1) 图像处理算法工程师,(2) Android / iOS 开发工程师,期待对我们感兴趣或者有推荐的技术牛人加入我们(base 上海)!联系方式:ttpic_dev@tencent.com

原文发布于微信公众号 - 天天P图攻城狮(ttpic_dev)

原文发表时间:2018-06-29

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

2 条评论
登录 后参与评论

相关文章

来自专栏机器学习之旅

应用:用户生命周期

用户生命周期是指用户从加入平台开始,熟悉平台,参与平台,最终流失的整个过程。用户的生命周期相对于自身而言,是一种参与度的变化,参与度也可以称之为活跃度。

1074
来自专栏大数据文摘

[译] 天龙八步 第二弹:8步从Python白丁到专家,从基础到深度学习

2577
来自专栏祝威廉

(课程)基于Spark的机器学习经验

Hi,大家好!我是祝威廉,本来微博也想叫祝威廉的,可惜被人占了,于是改名叫·祝威廉二世。然后总感觉哪里不对。目前在乐视云数据部门里从事实时计算,数据平台、搜索和...

653
来自专栏PPV课数据科学社区

2016年最流行的六大深度学习开源工具

对于希望在应用中整合深度学习功能的开发者来说,GitHub上其实还有很多不错的开源项目值得关注,以下我们推荐2016年人气最高的六款开源深度学习工具:(阅读原文...

2978
来自专栏企鹅号快讯

推荐:机器学习 Python库Top 20

如今开源是创新的核心,推动着技术的飞速革新。本文会为你介绍 2016 年机器学习 Top 20 Python 开源项目,同时分析得出一些有趣的见解和发展趋势。 ...

1988
来自专栏数据小魔方

Excel依然是一款强大的数据可视化利器~

早期的数据小魔方用户大概都知道,我最初也是从学习Excel起步的,只是学习的深入了之后,才开开慢慢的迁移到R语言。 我往R语言转型并不代表自己开始放弃Excel...

3473
来自专栏黑白安全

哥伦比亚大学研究人员创建隐藏嵌入文本信息新方法

哥伦比亚工程计算机科学家发明了一种新的方法 FontCode,可以在不干扰文字的情况下将隐藏信息嵌入文本中。FontCode 创建使用字体扰动来编码信息,之后可...

834
来自专栏新智元

【重磅】Facebook 开源产业级深度学习框架 Caffe2,带来跨平台机器学习工具

【新智元导读】Facebook 开发者大会今天召开。同时,Facebook 宣布开源 production-ready 的深度学习框架 Caffe2,轻量级、模...

3057
来自专栏量子位

AWS与埃默里大学合作开发基于云的NLP研究平台ELIT

安妮 编译自 AWS官方博客 量子位 出品 | 公众号 QbitAI 自然语言处理(NLP)的研究很多,但埃默里大学语言与信息技术发展(ELIT)团队想做的事不...

3438
来自专栏Tencentcloud

神经网络小游戏——泥煤排球

我记得在当年Java小程序仍然很受欢迎的时候有个游戏叫“软泥小排球”。虽然这个游戏在物理上面有一些投机取巧的部分,但是许多跟我一样的孩子却被它深深的吸引了,并且...

2348

扫码关注云+社区