技术解码 | Web端AR美颜特效技术实现！
共 2098字，需浏览 5分钟
·
2022-04-25 01:08
一、技术实现
抽象整体的实现思路如下，使用AI检测模型检测输入帧数据，获得人脸的关键点，根据关键点进行面部的建模，然后进行美颜算法和美妆纹理的渲染。
（一）数据采集
（二）检测
随着WebAssembly的成熟，Web可以加载基于C++的模型，并开启SIMD指令优化，检测流程控制中加入上一帧的结果缓存进行综合推测，结合GPU进行运算，获得了更好的计算性能，实际帧率可以达到接近60FPS。
（三）人脸建模
为了支持更多类型的面罩，实际需要的网格要比模型返回的网格外扩一圈，通过拟合算法，在面部轮廓进行扩展。扩展后的脸模可以支持头部范围包裹式的面具。
（四）空间定位
对于定位的算法，有以下几点要求：
定位准确。制作时定位在鼻尖部位的素材在渲染时也需要跟随到人脸的鼻尖部位。
覆盖全面。可以定位到人脸的任何一个位置，而不是只能定位在模型返回的有限的关键点上。
易于计算，易于还原。在制作工具中可以根据素材的绝对位置快速计算一个相对值，并且在终端可以快速地根据这个值还原出新的位置。
实现如下：
确定三角形：在制作工具拖拽贴纸素材时，根据当前点确定包含当前点的最小三角形。
计算权重：根据点的位置计算到三个顶点的权重，打包到素材协议中。
解析：前端sdk在解析该素材时，根据这个权重和真实的人脸上对应的三角形位置，计算出定位点的坐标值。
（五）美妆合成
思路如下：
将底层画面和上层的美妆图层各自渲染到WebGl的framebuffer当中，这一步的目的是为了将各自的前置操作，例如滤镜、镜像、变形等效果与画面本身融合为最终效果。
使用gl.copyTexImage2D或gl.copyTexSubImage2D将framebuffer中的像素复制为WebGL纹理，供混合模式的shader后续读取。
将上面复制完成的纹理输入至混合模式shader，shader读取上下图层的像素，代入计算公式并最终输出。
|
|
| 混合前 | 混合后 |
二、最终效果
|
|
三、快速体验
 |  |
目前您可免费申请接入腾讯云视立方·Web美颜特效，点击文末「阅读原文」可进入官网获取详细体验接入指南。
快速上手文档地址：
https://cloud.tencent.com/document/product/616/71371
