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

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

发表于

扫描关注云+社区

天天P图攻城狮

29 篇文章76 人订阅

我来说两句

2 条评论
登录 后参与评论

相关文章

扫描关注云+社区