贴纸效果_直播、短视频中如何实现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模型在，就是加个贴图的事情，轻松实现各类面具脸谱。那么就一起来试试看之前很火的战斗天使阿丽塔的实现吧~

战斗天使阿丽塔特效示例