技術(shù)解碼 | Web端AR美顏特效技術(shù)實現(xiàn)！

抽象整體的實現(xiàn)思路如下，使用AI檢測模型檢測輸入幀數(shù)據(jù)，獲得人臉的關(guān)鍵點，根據(jù)關(guān)鍵點進行面部的建模，然后進行美顏算法和美妝紋理的渲染。

（一）數(shù)據(jù)采集

（二）檢測

隨著WebAssembly的成熟，Web可以加載基于C++的模型，并開啟SIMD指令優(yōu)化，檢測流程控制中加入上一幀的結(jié)果緩存進行綜合推測，結(jié)合GPU進行運算，獲得了更好的計算性能，實際幀率可以達到接近60FPS。

（三）人臉建模

為了支持更多類型的面罩，實際需要的網(wǎng)格要比模型返回的網(wǎng)格外擴一圈，通過擬合算法，在面部輪廓進行擴展。擴展后的臉?？梢灾С诸^部范圍包裹式的面具。

（四）空間定位

對于定位的算法，有以下幾點要求：

• 定位準(zhǔn)確。制作時定位在鼻尖部位的素材在渲染時也需要跟隨到人臉的鼻尖部位。

• 覆蓋全面?？梢远ㄎ坏饺四樀娜魏我粋€位置，而不是只能定位在模型返回的有限的關(guān)鍵點上。

• 易于計算，易于還原。在制作工具中可以根據(jù)素材的絕對位置快速計算一個相對值，并且在終端可以快速地根據(jù)這個值還原出新的位置。

實現(xiàn)如下：

• 確定三角形：在制作工具拖拽貼紙素材時，根據(jù)當(dāng)前點確定包含當(dāng)前點的最小三角形。

• 計算權(quán)重：根據(jù)點的位置計算到三個頂點的權(quán)重，打包到素材協(xié)議中。

• 解析：前端sdk在解析該素材時，根據(jù)這個權(quán)重和真實的人臉上對應(yīng)的三角形位置，計算出定位點的坐標(biāo)值。

（五）美妝合成

思路如下：

• 將底層畫面和上層的美妝圖層各自渲染到WebGl的framebuffer當(dāng)中，這一步的目的是為了將各自的前置操作，例如濾鏡、鏡像、變形等效果與畫面本身融合為最終效果。

• 使用gl.copyTexImage2D或gl.copyTexSubImage2D將framebuffer中的像素復(fù)制為WebGL紋理，供混合模式的shader后續(xù)讀取。

• 將上面復(fù)制完成的紋理輸入至混合模式shader，shader讀取上下圖層的像素，代入計算公式并最終輸出。

小程序	Web端

目前您可免費申請接入騰訊云視立方·Web美顏特效，點擊文末「閱讀原文」可進入官網(wǎng)獲取詳細體驗接入指南。

快速上手文檔地址：

https://cloud.tencent.com/document/product/616/71371