终端图像处理实践: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

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏AI研习社

PyTorch 到底好用在哪里?

提问内容如下: 之前非常熟悉 Tensorflow,后来都说 PyTorch 简单易上手,自己就去试了试。 PyTorch 连最基本的 maximum, min...

6174
来自专栏算法+

这一路走来,冷暖自知 (附算法demos)

最近半年多,除了“一键修图”算法之外我还做了其他什么算法? 1.实时单图HDR算法(颜色矫正,智能曝光) 2.多图曝光融合HDR算法(最高支持八百万像素左右) ...

4158
来自专栏数据小魔方

think-cell chart系列16——树状分布图

今天跟大家分享think-cell chart系列的第16篇——树状分布图。 大家不要困惑于该图表的名称——树状分布图,其实它用的技巧非常简单(就是基本图表的组...

4434
来自专栏量化投资与机器学习

【Python量化投资】涨跌幅度分级,使用SVM分类预测

流通市值最小500 引用情景因子初探 简单说明 开始的时候想做一个ZZ800成分股的小策略,然后受制于性能限制,也懒得自己造轮子,就改成SH50了 今天有空...

25510
来自专栏数据的力量

如何选择合适的数据图表?

1524
来自专栏Crossin的编程教室

一行代码扫出“敬业福”

好吧,我承认有那么一点标题党。不过说起标题党这事儿,咱先来看看支付BAO,最近几天搞得全国人民都不安心工作的“集五福”: ? 好(shua)好(hou)的“集五...

3888
来自专栏逍遥剑客的游戏开发

使用Kinect2作为Oculus游戏应用的输入设备

2557
来自专栏互联网杂技

如何在“无设计”语境下打磨界面设计中的极致细节体验?

微博是一款典型的信息流产品,早期微博IM复用了信息流的一些设计,并且已经很久没做大的更新迭代,导致现有的设计与实际场景不符。为了让用户更自然的聚焦在对话体验之中...

3309
来自专栏IT派

Pix2code一个直接生成代码的神经网络工具

相信前端同学在被频繁变化的UI设计折磨的时候,当你揪着头发不停微调想让界面看起来与设计图一致的时候,你们一定有过直接从图片生成代码的美好设想。现在,这样的黑科技...

4406
来自专栏量子位

癌细胞检测,只要0.0758秒 | 谷歌AR+AI显微镜问世

病理学家们要想从一团密密麻麻的组织细胞里,找到空间排列奇怪,细胞核形状诡异的癌细胞,就得守在显微镜后头,一张一张活检切片看过去,看到天荒地老,海枯石烂。

863

扫码关注云+社区