技术解码 | Web端AR美颜特效技术实现

文：shirly（腾讯云前端开发高级工程师）

直播、短视频、在线会议等应用越来越多地进入人们的生活，随之诞生的是丰富的各类创意玩法与新鲜体验，其中大量应用了以AI检测和图形渲染为基础的AR技术。

此类技术在原生应用已经十分成熟，而由于Web的功能和性能瓶颈，使得实现Web端上的AI人脸识别与实时渲染成为了一种挑战。而随着Web技术的不断成熟，AR技术在Web上的实现成为了一种可能。笔者总结了在Web端实现此功能的几个技术要点，跟大家一起探讨一下。

技术实现

抽象整体的实现思路如下，使用AI检测模型检测输入帧数据，获得人脸的关键点，根据关键点进行面部的建模，然后进行美颜算法和美妆纹理的渲染。

数据采集

为了统一输入格式同时兼容多种媒体格式，采用了MediaStream作为规定的输入格式，在Web中可以将视频、摄像头、画布等媒体转成MediaStream作为输入进行处理。

在实际的业务场景中为了保证清晰度画面往往比较大，而给模型检测的画面过大容易造成不必要的性能损耗，发送至模型检测的样本会被转化成为ImageBitmap，ImageBitmap可以节省在模型计算中解码纹理的消耗，在频繁调用的视频场景中可以有效地减少解码消耗。

检测

检测性能在Web端一直是一个较大的瓶颈，广泛使用的TensorFlow.js在Web上有明显的性能瓶颈，检测帧率在30FPS左右，主要是由于JS本身存在性能瓶颈。

随着WebAssembly的成熟，Web可以加载基于C++的模型，并开启SIMD指令优化，检测流程控制中加入上一帧的结果缓存进行综合推测，结合GPU进行运算，获得了更好的计算性能，实际帧率可以达到接近60FPS。

人脸建模

在获取到人脸点位后，针对业务需求对点位进行预处理，按照2D展示的要求进行网格的整合。

为了支持更多类型的面罩，实际需要的网格要比模型返回的网格外扩一圈，通过拟合算法，在面部轮廓进行扩展。扩展后的脸模可以支持头部范围包裹式的面具。

空间定位

对于头饰等效果，作为独立个体附着在头部及其附近的一块区域，跟随头部移动而移动，其定位数据也是来源于人脸模型检测的返回。

在实际的使用场景里，为了保证素材制作流程的直观和间接，素材是基于一个固定的标准人脸制作的，而渲染到真实的画面中时，则需要将基于标准素材的位置准确地映射到大小不一角度各异的人脸中，这里就需要一个定位的转换算法。

对于定位的算法，有以下几点要求：

1. 定位准确。制作时定位在鼻尖部位的素材在渲染时也需要跟随到人脸的鼻尖部位。
2. 覆盖全面。可以定位到人脸的任何一个位置，而不是只能定位在模型返回的有限的关键点上。
3. 易于计算，易于还原。在制作工具中可以根据素材的绝对位置快速计算一个相对值，并且在终端可以快速地根据这个值还原出新的位置。

基于这几个要求，以及模型返回的数据结果，最终确定了采用三角形坐标的方式来进行贴纸的定位。在控制台-素材制作上实现了此功能，可以直接可视化制作效果并导出。

实现如下：

1. 确定三角形：在制作工具拖拽贴纸素材时，根据当前点确定包含当前点的最小三角形
2. 计算权重：根据点的位置计算到三个顶点的权重，打包到素材协议中
3. 解析：前端sdk在解析该素材时，根据这个权重和真实的人脸上对应的三角形位置，计算出定位点的坐标值

美妆合成

与头饰贴纸不一样的是，美妆是贴着面部轮廓，根据五官分布采样渲染到网格上的。渲染的时候需要根据建模完成的人脸网格，就可以通过WebGL shader渲染纹理到网格上。

美妆效果需要伴随加深、提亮等效果，带有白色或深色的修容效果，这类效果在面网和底层画面之前，需要用到混合模式。

WebGL自带混合模式，但经过对比后发现自带的混合模式与PS这类通用的设计软件并不一致，而且差值运算居多，对于美妆的融合来说并不实用。于是选择使用shader自行实现混合模式。

思路如下：

1. 将底层画面和上层的美妆图层各自渲染到WebGl的framebuffer当中，这一步的目的是为了将各自的前置操作，例如滤镜、镜像、变形等效果与画面本身融合为最终效果。
2. 使用 gl.copyTexImage2D 或 gl.copyTexSubImage2D 将 framebuffer 中的像素复制为WebGL纹理，供混合模式的shader后续读取。
3. 将上面复制完成的纹理输入至混合模式shader，shader读取上下图层的像素，代入计算公式并最终输出。

最终效果

快速体验

腾讯云视立方·Web 美颜特效是适用于Web、小程序端的AR美颜特效解决方案，包含素材制作、素材管理、前端接入等全流程能力，可以快速、高效地与TRTC、快直播业务结合，丰富Web实时视频应用体验。

↓ 扫码体验 ↓

目前您可免费申请接入腾讯云视立方·Web 美颜特效，点击文末「阅读原文」可进入官网获取详细体验接入指南。快速上手文档地址：https://cloud.tencent.com/document/product/616/71371

腾讯云音视频在音视频领域已有超过21年的技术积累，持续支持国内90%的音视频客户实现云上创新，独家具备 RT-ONE™ 全球网络，在此基础上，构建了业界最完整的 PaaS 产品家族，并通过腾讯云视立方 RT-Cube™ 提供All in One 的终端SDK，助力客户一键获取众多腾讯云音视频能力。腾讯云音视频为全真互联时代，提供坚实的数字化助力。