iOS移动端人脸贴纸实践

原创王易扬老师好未来技术

2021年10月21日 10:30

出于业务的需求，我们实现了一套直播可用的轻量型人脸贴纸。下面简单介绍一下实现的过程和难点。

技术分析

对于这个需求，实现上需要考虑的地方有:

首先保证可用和效果良好；
由于使用场景是在直播，本身功能的各方面性能消耗就高，所以要尽可能的优化性能；
控制包增量；
侵入性低；
使用方便。

经过调研，我们的技术方案确定如下:

视屏处理：视频方面采用GPUImage来进行处理。开源，完成度高，而且流式结构以及对滤镜，视频的抽象都很好，使用方便。唯一美中不足的是采用单例来保存BufferCache以及Context，对于只是实现额外贴纸功能的我们（APP的主功能并非视频处理）带来的内存增长利大于弊【注释1】。
人脸识别模块：人脸识别模块我们做了很多调研。其中包括付费的商汤，Face++，开源的智云（HyperLandmark），OpenCV，原生的Vision，ARKit等。多方对比过：商汤，Face++这些在人脸准确性，稳定性，使用便捷上都非常出色，但是本身带有不小的包增量，对于我们这个小功能来说负担很大。开源方面，智云只有安卓版本，而iOS版本（HyperLandmark-iOS）内部使用的引擎是opencv，稳定性和准确性不高，另外包增量很大（OpenCV依赖，内部很难分离其中的人脸识别模块，cv::mat的数据流通也需要转换）。原生方面ARKit的性能由于实时分析，结构光等原因，很难在低端机使用（本身版本限制，硬件限制很多）。只有Vision是相对较好的选择，无包增量，识别效果较好，稳定性虽然较差，但是这个可以通过算法优化。版本限制也不高（iOS12即可使用），考虑到性能问题本身就有限制，这个的影响其实可以接受。当然，Vision作为一个原生库，很多地方都不够完善，例如欧拉角的识别，识别点防抖的处理等。
人脸贴图：人脸贴图与视频的合成，视频处理的内容，使用OpenGL。贴纸格式参考市面上SDK的部分进行设计。

流程介绍

实现上大致分成三条线处理，这三部分是异步的互不干扰：

接收到视频数据后，对视频方向和分辨率进行处理（视频方向对人脸识别精度影响很大），生成人脸特征点，留待备用。
接收到人脸贴纸后，对放大比例，坐标，特征点，触发进行处理，留待备用
拿到视频数据，人脸特征点，贴纸图片和信息，进行绘制

实现细节及难点

1.贴纸json解析

width和height，以及贴纸图片地址，每帧速率都很容易解析。
定位相关的数据在下面

"position": {                "flag": 49,                "x": 185.59,                "y": 299.39            },

position描述了特征点距离贴纸左上的XY距离，如果贴纸本身具有倾斜角，可以使用rollOffset。

"rotateCenter": [                {                    "flag": 49,                    "x": 239.92,                    "y": 357.87                }            ],

rotateCenter描述了贴纸的旋转中心，一般是鼻尖。人的头部偏转时，贴纸围绕这个点进行旋转

"scale": {             "pointA":             {                 "flag": 6,                 "x": 185.59,                 "y": 299.39             },             "pointB":             {                 "flag": 13,                 "x": 293.67,                 "y": 298.72             }},

scale描述了贴纸的缩放比例，这里的具体点逻辑与position相同，但这里会有两个点，这两个点的间距就可以确定实际的距离比例。（scale一般取双眼的点）

"begin":“sticker1.complete”

begin描述了贴纸的触发时机，某个动画可能会由另一动画的结束为开始时机，这里的参数决定了贴纸的顺序触发功能。

2.三维贴纸变换

即使有了人脸识别的关键点，人脸贴图的实现也并非易事。因为它并不是简单的二维粘贴，而是包含欧拉角【注释2】的三维变换（人脸的远近旋转都会影响贴纸形态）。
先从坐标系说起。这个项目涉及的坐标系共有五个：

Vision坐标系
模型坐标系
世界坐标系
摄像机坐标系
齐次坐标系

我们通过Vision得到的人脸特征点【注释3】属于Vision坐标系，这个坐标系的原点在左下，x，y的范围为[0, imageSize]，imageSize为输入图像的像素大小。而下面的四个坐标系则代表了OpenGL三维变换的四个空间（Model，World，Camera，Homogeneou s），这些坐标系都是三维的。

模型坐标系，代表模型本身的坐标系，原点在模型的中心点
世界坐标系，代表整个固定空间的坐标系，这个坐标系下，模型的平移才有了意义（模型坐标系下平移并不会引起坐标变化）
摄像机坐标系，代表有了观测点的坐标系，此时我们同时拥有了摄像机和模型的世界坐标，模型此时的坐标全部转化为了摄像机为原点的坐标。
ndc坐标系，此时视椎体【注释4】形成，位于视椎体之外的部分将被剪裁，模型进行了投影变换，产生了近大远小的投影效果。
三维变换在引入了齐次坐标【注释5】后，都可以在数学上划归为4*4的矩阵相乘。

Vision坐标系与模型坐标系的转化非常简单，只是简单的加减这里暂且不提。剩下的四个空间转换则对应了OpenGL经典的MVP转换矩阵【注释6】，来看一下项目内使用的三矩阵。（项目的模型指的是人脸图像模型，贴纸是在人脸图像模型上进行相对偏移的）

_modelViewMatrix = GLKMatrix4Identity;_viewMatrix = GLKMatrix4MakeLookAt(0, 0, 6, 0, 0, 0, 0, 1, 0);float ratio = outputFramebuffer.size.width/outputFramebuffer.size.height;_projectionMatrix = GLKMatrix4MakeFrustum(-ratio, ratio, -1, 1, 3, 9);

Model矩阵采用了单元矩阵【注释7】，代表世界坐标系与模型坐标系原点相同。

View矩阵的参数代表我们的摄像机处在世界坐标系的(0, 0 , 6)，望向(0, 0 , 0)，且摄影机的正向朝向y轴正方向（这里可能难以理解，但实际想象一下摄像机是个球，有了位置和望向，自己还是能旋转，看到的图形也可能上下倒置，所以需要确定头方向）

Projection矩阵【注释8】的参数代表我们的视椎体近平面左右ratio，上下1，近平面距离3，远平面距离9（注意此时的坐标已经不是世界坐标了，转换成世界坐标近平面z是3，而远平面z是-3，模型的z在0）

将模型坐标乘上mvp矩阵，我们就可以得到一个ndc坐标系下的人脸坐标锚点，下面可以开始绘制贴纸了。

由于贴纸的大小受到远近影响，所以第一步，求出归一化模型坐标系下贴纸的长宽，贴纸的中心点。

x = x * imageWidth / imageHeight * 2 * ProjectionScale ;y =  y * imageHeight / imageHeight * 2 * ProjectionScale;//x,y范围[-1, 1]，ProjectionScale代表这贴纸跟近平面的坐标比例为2

除以imageHeight * 2 * ProjectionScale的原因是投影矩阵将近平面上下设为[-1, 1]，将左右设置为了宽高比，而我们的图像平面处在摄像机坐标系的-6位置，近平面在-3（摄像机坐标系视角朝向z轴负方向），需要换算。

投影矩阵的具体计算公式如下：

具体的推导过程有兴趣的可以上网查询一下，这里面l代表左，r代表右，t代表上，b代表下，n代表近，f代表远。

w最后的结果是-z，经过投影除法（x/w，y/w）以后近平面的距离会比我们模型位置小2倍，所以实际的单位1是imageHeight/2/2，x和y原来的单位不统一，代表着宽高/2，所以需要转换，如上式。

拿到坐标以后，求出贴纸的8个顶点（2维），自己补上z坐标和w（z为0，因为贴纸与图像模型同一远近，这里的z代表的是模型坐标系下，它还没乘mvp矩阵，w为1这个恒定的），在顶点着色器里乘上平移旋转矩阵（为了做欧拉角）和mvp矩阵，绘制即可。

3.人脸识别点平滑

另一个令人困扰的问题在于Vision识别点会在视频中会有小幅度抖动。

但那些付费的SDK都十分稳定。如果这样使用的话，贴纸也会跟着识别点抖来抖去，怎么解决这个问题呢。

由于Vision封装好的人脸识别模块，我们想要通过AI解决抖动的问题代价太大，基本不可能。但是观察目前的市面上的付费SDK，发现有些是在识别特征点生成后处理平滑问题的。那么证明我们对这个问题也有入手之处。

先寻找一下有没有成熟的解决方案。

目前开源的人脸算法和解决方案都不多，找过一遍也只找到智云的算法，这个项目里并没有解决防抖的问题。但人脸识别点抖动实际可以抽象成识别的误差抖动，在人脸领域之外，也有很多的相关资料，我去查询了传感器的平滑算法，传感器的预估算法等。

总结一下找到的算法如下：

卡尔曼滤波，一阶低通滤波，Savitzky-Golay算法等。卡尔曼滤波假设对于一个实际值，观测值会产生无规律的噪音偏差，而这些偏差，在分布上符合正态分布。由此基础推出了一个迭代公式。我找到了一个开源算法接入尝试了一下，实际效果并不算好，而且由于知识储备不足，这个算法的调优异常困难，所以放弃了这个方案。

Savitzky-Golay算法更倾向于数据组已有后的平滑，需要前置窗口和后置窗口，对于实时预测的观测点平滑效果也较差，尝试后选择了放弃。
最后采用的是一种动态修改滤波系数的一阶低通滤波形式。

一阶滤波公式为：

Y(n)=αX(n)+(1−α)Y(n−1)
式中：α 为滤波系数，X ( n ) 为本次采样值，Y ( n − 1 )为上次滤波输出值，Y ( n )为本次滤波输出值。

改进方式：

当数据快速变化时，滤波结果能及时跟进，并且数据的变化越快，灵敏度应该越高（灵敏度优先原则）
当数据趋于稳定，并在一个范围内振荡时，滤波结果能趋于平稳（平稳度优先原则）
当数据稳定后，滤波结果能逼近并最终等于采样数据（消除因计算中小数带来的误差）

调整前判断：

数据变化方向是否为同一个方向（如当连续两次的采样值都比其上次滤波结果大时，视为变化方向一致，否则视为不一致）
数据变化是否较快（主要是判断采样值和上一次滤波结果之间的差值）

调整原则：

当两次数据变化不一致时，说明有抖动，将滤波系数清零，忽略本次新采样值
当数据持续向一个方向变化时，逐渐提高滤波系数，提供本次采样值得权；
当数据变化较快（差值>消抖计数加速反应阈值）时，要加速提高滤波系数

流程图

经过了仔细的参数调整使其符合我们的项目，最后效果如下：

稳定性和跟随性上都有了较好的体验，实际在贴纸使用上完全足够，基本不会出现抖动。

4.欧拉角的探索

对于人脸欧拉角的问题，本身vision是提供了相关的参数的。但是目前只包含了roll和yaw，pitch直到iOS15才会给出。并且Vision在训练上可能有些问题，这些欧拉角本身都不够平滑。

为了追求更好的体验，也去寻找了相关的方案。

欧拉角的估计实际上不属于人脸识别，而属于一个单独的hand pose预估，这个问题也有解决方案。

PNP算法是通用的处理头部估计的算法

关于PNP问题就是指通过世界中的N个特征点与图像成像中的N个像点，计算出其投影关系，从而获得相机或物体的位姿的问题。
opencv提供的solvepnp函数就是用来解决pnp问题。利用该函数可以实现测算相机/物体的空间姿态，也可以用来空间定位。

也是照旧的学习，参照开源，接入流程。这里直接给出测试结果，想要详细讨论的伙伴可以联系我一起研究。

PNP算法对于头部估计的效果不错（手动去除噪声），但是有个很大的缺点，在头偏转超过45度后，预估错误的几率会很大。可能这块还是前置处理（AI部分）的效果最好。

目前我们处理的方式，对yaw进行了平滑处理，而对于平常使用最多的roll，采用了玉强老师提出的两眼连线与水平面算夹角的方式，roll角度现在的跟随性十分可靠。看一下最后的效果。

项目优势

体积小巧，iOS基本无增加。由于采用了iOS原生的Vision库，在人脸模块上无需另外增加引擎，也不用新引入model训练集来支持AI识别。
性能优良，CPU增量单核5%-20%，内存增量10-20M，高端机使用无压力，低端设备在本身场景性能消耗不高的情况下使用也完全可以。
使用方便，支持流式输入输出，支持直播场景。且我们在内部做了贴纸json的转换，使得此项目支持了现有的贴纸生成工具，无缝对接原有业务。
支持拆分，在实现上特意将有可能替换的Json转换，人脸引擎分离实现。替换人脸识别库，替换贴纸格式的改动都很小。只需要实现一个方法就可以使用内部的视频处理，流式输入输出，人脸稳定算法等模块。
可扩展性，由于采用GPUImage架构，所以完美支持滤镜链的添加删除，扩展工作和自定义功能都十分方便。

注释

1.解决这个问题可以通过自定义context，buffer，cache，然后在每次初始化滤镜的时候传进去自定义的来解决，但是工作量很大，相当麻烦，项目里将人脸滤镜的这部分抽离了，不过如果有额外滤镜，或者开启自采集的话，这部分只能等释放以后purgeAllUnassignedFramebuff ers解决（这个在SDK释放后已经处理了），而且这样也不会完全释放，实测还有两个占用很小的buffercache。

2.欧拉角
用一句话说，欧拉角就是物体绕坐标系三个坐标轴(x,y,z轴）的旋转角度，放两张图。