終端圖像處理實踐：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圖攻城獅」，那上面將陸續公開分享我們的技術實踐，期待一起交流學習！

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！