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

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

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

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

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倍以上