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

天天P图攻城狮 • 2023-01-03 • 云技术社区 • 294 阅读

作者简介：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 工程师