直播、短視頻中如何實現3D貼紙道具特效

之前有一篇文章已經講過動態貼紙的實現以及原工程啦,後來有小夥伴一直在催更3D貼紙的實現,一直也沒時間,今天終於領導讓我來出篇文章說3D貼紙道具的算法實現啦~

首先讓我們先來比較一下3D貼紙和2D貼紙的區別:

2D貼紙示例

 

3D特效貼紙示例

 

上面的圖片是2D貼紙,下面的圖片顯示的則是3D特效貼紙。不難發現,2D動態貼紙比較偏簡單,偏頭飾、耳朵類或是一些簡單的面部裝飾,3D特效貼紙主要偏向全面部的特效,簡單來說就是整張臉都是特效。這是表面觀察得出的結論,其實只要你轉轉頭,就知道最大的區別啦,2D貼紙就跟一張紙片一樣,不是貼合在面部的。而3D特效貼紙是全面部覆蓋,就算轉臉也會跟着一起轉動,看到特效的腮部。

之前抖音很火的張嘴變身鎧甲勇士的特效:

抖音熱門鐵甲勇士變身特效

 

其實這也是3D道具,就像頭盔一樣罩在頭上,就算側着頭也能看到頭盔後部把你的後腦勺包住了,這就是2D貼紙實現不了的效果了。

再比如之前有戴耳機特效,都是3D效果:

戴耳機3D效果

 

我們今天就來看看這樣的3D貼紙效果怎麼實現呢。

實現方法也比較多,實現的工具也比較多,各家當然都不一樣,我們只講一下算法思路,具體實現方式就是見仁見智,效果優先還是流暢度優先都會導致實現方法的不同。

但是都有一點可以肯定的就是3D特效是要簡歷在3D模型基礎上的,也許之前的3D面具特效還不能看出來,但是抖音的鐵甲勇士的特效就能看出來這個頭盔肯定不是2D貼紙那種圖片序列幀,那就是3D模型,3D模型也是有FBX,OBJ等格式的,具體選用看項目需求和人員技能點配置。

3D模型示例

 

下面來說算法:

首先都是三維空間的渲染,但是OpenGL提供的其實還是二維圖像渲染,比如之前講的美顏或者2D貼紙渲染都是在原始視頻幀的紋理上做二維的渲染變動來實現效果。但是現在相當於視頻幀需要是被3D渲染,所以需要一定的三維想象力。近大遠小的道理大家很早就明白,那麼現在我們也可以利用這個原理,進行多重渲染,實現3D效果。

透視投影矩陣原理圖

將相機位置放置在座標原點,創建lookat矩陣,設置好相機視野範圍fov角度等,然後根據透視投影矩陣,我們會發現znear面會在zfar面形成投影。

那麼這個透視投影到底有什麼用呢?就是計算znear面的物體在zfar面上的投影,將三維的空間座標轉換成渲染的二維座標,並且投影矩陣可以利用仿射變換,實現剛剛提到的三維空間的近大遠小的透視效果。

那麼怎麼利用好這個透視投影矩陣呢?我們假設相機最終看到的是zfar面,那麼我們將原始視頻幀放置在zfar面,然後將鐵甲勇士頭盔模型,放置在znear面,根據透視投影矩陣,可以計算znear投影到zfar要放大的倍數,這個放大倍數是用來匹配視頻幀中拍客頭大小的。以及也可以根據透視投影矩陣來計算模型的某個關鍵點在zfar面的投影和zfar面拍客人頭的相同位置關鍵點的距離,只要距離爲0,那麼頭盔就在相機裏就是套在人頭上的啦,原理是不是非常簡單呢。

具體實現其實還是有不少坑的,比如如何計算座標之前投影變換關係,以及如何選取關鍵點,模型上和視頻幀中怎麼來的關鍵點呢?是不是都有這些問題。那我簡單解答一下,計算兩個面的投影關係的公式取決於兩個面的距離以及離相機的距離,就是一個等比公式的關,在znear上任何一個點都可以根據這個公式來計算在zfar上投影的點的座標。模型上可以採取獲取mesh點座標的方法,來得到關鍵點的位置座標,視頻幀中關鍵點自然就是要通過人臉追蹤技術,得到某個關鍵點的座標啦。

最後說一下關於性能方面的問題,因爲涉及到3D模型,那麼渲染的壓力勢必大,3D模型越精細,面數越多,渲染給GPU帶來的壓力就越大,所以首先要考慮的就是3D模型的大小和精細程度,這些在和性能上會有個平衡點。其次可以通過一些小技巧來優化性能,比如模型上點計算比較耗時,那麼我們利用普通模型代替特殊模型,這樣每個點都是特定的,不用每次都用計算,只用換普通模型上方不同的頭飾或者平面貼圖就行,這樣10個特效每次計算,性能提高2-3倍以上。

還有面具的實現,其實那就更簡單了,只有3D模型在,就是加個貼圖的事情,輕鬆實現各類面具臉譜。那麼就一起來試試看之前很火的戰鬥天使阿麗塔的實現吧~

戰鬥天使阿麗塔特效示例

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章