先試後買！解析購物新體驗背後的移動AI+AR技術

背景

AR（增強現實）并不是一個新鮮的詞彙，15年開始各大公司在營銷領域推出自己的AR産品，很多人也是在那時第一次接觸到手機AR消費級應用。經過五六年發展，雖然全沉浸式的AR頭戴裝置仍沒看到太多起色，但随着手機硬體及AI算法的迅猛進步，特别是『端智能』技術發展，手機AR的應用卻風生水起，一浪蓋過一浪。如果說AR營銷是第一波浪潮，代表的有ARBuy+及QQ AR等，側重的是虛拟物與空間場景的互動；那麼17年興起的AR自拍濾鏡則是第二波浪潮，以真假難辨的全民美顔切入，強調的是虛拟物跟人的互動，代表是抖快；受AR濾鏡的啟發，大家發現越做越真實的AR自拍裝扮可以跟真實商品結合，進行虛拟的上妝與穿戴，越來越多公司開始布局，代表的有得物及美圖等。而這正是本文要說的基于人像AI算法的AR導購，直接将手機AR技術切入電商腹地，垂直應用到美妝服飾行業各類商品，即自拍式AR垂直導購，帶着全新的線上購物體驗方式，助推着第三波浪潮到來。

挑戰

自拍式AR垂直導購，後文簡稱為AR自拍導購，與AR自拍濾鏡兩代很明顯的差别在于真實感體驗，AR濾鏡效果是做到剛好夠用即可，面向内容創作，裡面的瑕疵甚至可以成為内容的趣味彩蛋。而AR導購在使用者使用過程更像在照一面鏡子，要讓使用者相信裡面發生的是真實可信的，技術上要在虛拟場景中盡量去還原商品1:1的真實上身效果，有下圖三方面特點，核心價值是幫助使用者“先試後買”輔助決策。

AR自拍導購産品沒有很繁雜的頁面，所有的回報都來自于鏡頭每一幀畫面，如果AR效果不好就像在給使用者看一部爛片，使用者立馬會撕票走人，可以說AR體驗的高度決定了産品生命的長度，而技術上要做到這些絕非易事，拆解下來最核心的有4大挑戰：

1、算法挑戰，無通解&性能要求高。沒有“大一統”算法能解決人像各個部位精準識别和跟蹤的問題，需要拆解到各個部位各個擊破。算法必須分散地定向投入，但結果往往帶有較大不确定性。同時目前裝置參差不齊、大多存在算力瓶頸、傳感器幫助有限且有較多長尾badcase要解決的情況下，産品上要想做好全平台全裝置上實時互動更好的體驗，算法上就一直會有高速高精（又快又準）兩方面的性能挑戰；

2、渲染挑戰，模拟樣式假而不真。商品樣式複雜多變，2D上妝方面染發會遇到顔色還原度不高，口紅會遇到材質還原不佳，3D穿戴方面會遇到金屬或布料材質表現力不夠。同時3D場景中還要正确渲染真假物體前後遮擋關系，精準解決虛拟物體跟真人比例及貼合關系，更深層的還有光照估計問題等等。

3、工程挑戰，開發慢&運作卡。AR導購技術是一項AI應用領域複雜的系統工程，從雲到端橫跨很多技術棧，同時涉及内外部角色、技術工種較多，如不能妥善解決則該系統運作效率會存在很大問題。有完善平台的機制才能提高技術、小二、商家及ISV協作效率；能搭建合理的技術架構才能提高前端、用戶端、算法及渲染工程協作效率；要保證AR體驗流暢運作，需要子產品間高效協同及周全的優化政策。

4、供給挑戰，傳遞成本高&難以持續。光産品體驗做好還不行，上線後需要依賴商品配置AR素材造血才行，就像車造出來有油才能跑，而且是越便宜越香。冷啟動時期可以通過内部造勢推動商家首批覆寫，但是這種方式不可持續。正确的是一方面降本提效，另外一方面放大做厚每個商品的AR導購價值，最後能給到商家真金白銀的回報，明确ROI，這套産品鍊路才可能真正長期持續發展。

技術方案

▐ 技術大圖

為了解決這些挑戰問題，在與業務的不斷磨合試錯過程中，我們搭建了自己的ARTry引擎，核心包括運作架構、算法能力、基礎功能及業務渲染能力，為AR自拍導購全域産品提供強有力支撐。算法上我們跟集團内外部不同團隊合作共建，一方面建設高品質的資料集，另一方面建設面向移動端的高精高速人像算法能力，包括人臉、手部及腳部等近10類算法，詳細闡述見3.2節算法方案。運作時架構上我們推倒了原來GPUImage架構，搭建了新的CameraLink，預設提供美顔、流控及資料轉換等基礎功能單元，解決算法&工程協同效率以及運作性能等問題，詳細闡述見3.4節架構方案。有了CameraLink架構和算法&基礎功能單元這些地基之後，業務需求上擴充和積累完成了各種AR渲染增強的能力，囊括了2D上妝、3D穿戴、多屏互動等15種獨具創新的核心技術能力，詳細闡述見3.3節渲染方案。最後為了解決供給問題，我們搭建了初步的AR營運平台，為商家或ISV提供工具鍊降本提效，同時也服務業務前台各種管道的産品，為它們提供釋出管理及資料服務，産出統計資料證明業務域價值，詳細闡述見3.5節供給方案。

▐ 算法方案

AR自拍導購聚焦在端側實時人像互動，這決定了其所需要的算法能力與以前空間場景AR互動存在較大的差異。空間場景AR的算法基礎是SLAM，依據掃描大場景中的點雲同步建構地圖及識别平面，關鍵是求解到手機在世界空間的位姿（6DoF），有了手機的準确位姿就能正确地将虛拟物放置到大場景中。而我們針對人像識别是不是也能采用掃描人體得到點雲再重建所有關鍵部位mesh呢，這樣就有“大一統”的算法解決所有人像互動需求，就不用分部位去研究N套新的算法，答案是目前還不能做到。首先人像部位大多相對手機是運動的而非靜置，另外人像表面形狀及特征異常複雜，目前算法加硬體能力也達不到業務精度要求。目前可行的方案是針對不同部位定制算法具體求解，我們聯合集團内外的多方算法團隊針對不同部位算法展開合作，包括三方合作夥伴、達摩院CV算法團隊、搜尋及淘系互動算法等團隊，從目前研究場景分析下來主要有4類：

1、AI算法檢測目标部位2D關鍵點 ⇨ 計算素材與目标部位大小比例&角度關系 ⇨ 材質仿真渲染，這個過程在2D上妝比較常見，使用若幹關鍵點作為anchor直接上妝，一如市場上2D貼紙實作方式，這是AR導購技術裡面最簡單的一類，将實際3D上妝過程在不影響視覺體驗的情況簡化為2D圖像處理，比如美瞳上妝過程、睫毛上妝過程都屬于這類。

2、AI算法檢測目标部位2D關鍵點 ⇨ 畫線算法生成mask ⇨ 材質仿真+上色渲染，這屬于2D上妝比較複雜的一類，利用成熟的人臉關鍵點算法一次求得N個部位的準确區域，比如嘴唇區、眼影區，這裡的處理也是将3D上妝簡化為2D平面圖像的處理，并沒有将提取出的區域還原為3D mesh，不過為了讓最後上妝表現更自然這當中有大量精細化處理以及試驗調優，像口紅上妝、腮紅上妝等過程都屬于這類，如下圖❶所示。

3、AI算法分割目标部位mask ⇨ 材質仿真+上色渲染，不用關鍵點算法直接使用分割算法推理出目标區域alpha mask，同樣将3D上妝簡化為2D平面圖像的處理，為了讓上妝表現更自然，後處理及渲染側要花時間試驗調優及精細化處理，目前我們的染發及美甲使用的本方案，如下圖❷所示。

4、AI算法檢測目标部位2D關鍵點 ⇨ CV算法估計6DoF ⇨ AI算法分割出遮擋mask（若有） ⇨ 3D模型渲染合成，這是AR穿戴實作的目前一般思路。受限目前普及硬體及算法能力，AI算法并不能一次到位且準确的求出目标部位的3D位置關系，依據2D關鍵點參照标模（如标準人頭或标準腳模）通過PnP算法得到虛拟物放置到目标部位的6DoF值。同時為了實作正确的深度遮擋關系，往往要将目标部位被前景遮擋的區域用算法分割出來，蘋果ARKit 3.0 people occlusion也是類似做法。我們的眼鏡試戴、手表試戴以及試鞋都采取該方案，如下圖❸❹所示，不過像眼鏡試戴不需要遮擋mask，因為人臉上一般比較幹淨沒有遮擋，而腳部的情況就複雜很多了就需要occlusion處理。

▐ 渲染方案

渲染方案側目前處理的主要有兩個方向，一個是AR上妝，一個是AR穿戴。兩者第一個差別是AR上妝沒有模組化過程，側重展現商品開瓶使用後在人體發膚上的色彩及樣式變化，渲染過程當做2D平面處理，這樣的好處顯而易見，商家不需要花高額成本去3D模組化而是配置商品目标顔色及貼圖即可；AR穿戴則不能繞開3D模組化過程，因為其側重在一個商品原原本本的3D全方位展示，渲染大部分過程在3D引擎。第二個差別是AR上妝大多是跟顔色相關，渲染過程中必須考慮底圖上真實使用者發膚的紋路特征，而後用圖像算法做圖層疊加，可以說對alpha通道的控制是圖層融合能否表現自然的關鍵鑰匙；AR穿戴渲染時需要跟底圖融合的場景較少，眼鏡上半/全透鏡片有這種情況，需要結合模型本身材質屬性與3D引擎材質表現來解決。最後一個差別是光照，AR上妝光照表現依賴從真實使用者發膚上提取到的光照特征而做增強，不會主動打光；AR穿戴的光照一方面要保證模型設計時法線輸出的正确性，另外一方面也要結合IBL和方向光來增強虛拟物在場景中立體表現。下面分2D上妝與3D穿戴兩方面展開其關鍵的渲染步驟：

2D上妝

☞ 色彩混合：前期我們借鑒PS中常見7~8種混合模式，以及使用YUV、HSV等不同顔色通道試驗，發現并沒有非常理想的色彩混合算法能适用所有場景，甚至一個能直接适用的場景都沒有，有的混合效果可能在嘴唇上還可以但放在頭發或指甲上就會出問題，這本身是因為不同部位紋理及原色差異較大并沒有普适的公式能勝任。為應對這種情況，呈現出最具真實感色彩，不同部位經過不斷地試驗最後均采用了不同的圖層混合算法，比如染發使用的是自創專利的“RGB色域直接定位法”，美甲使用的自研的“高保真分段混合公式”，而口紅會使用變種正片疊底的混合模式。

☞ 材質仿真：預設隻做色彩混合而呈現的效果我們叫做“啞光”材質，但實際美妝行業商家有很多特殊材質方面的訴求，比如高光、珠光、水潤等等，這些材質效果本身是商品賣點的一部分，是以AR上妝針對行業熱門材質類型都需要盡量去實作，實作的方式分為2種。第一種是無預置紋理圖方案，針對的是程式可根據使用者真實底圖自動計算而生成紋理圖的情況，無需商家提供紋理模闆圖，高光或珠光材質都屬于這類。比如高光的實作先從mask區統計底圖亮度分布情況（亮度直方圖），然後試驗求出分段函數并結合抑制因子，最後提取出用于增強的高光mask跟首次色彩混合圖層做二次混合成型，如下圖示例。第二種是有預置紋理圖方案，針對的是材質紋理複雜多變程式不能自動生成的情況，一般由商家結合熱點提供紋理樣式模闆圖，程式拿到alpha-mask直接跟首次色彩混合圖層做疊加成型，程式側相比第一種實作簡單些，但主要的工作是在設計師側，需要結合行業知識提前設計并離線試驗效果，睫毛、眉毛、美瞳等都用得這類材質仿真方式。

☞ 深度遮擋：雖然商品的3D模型是按正确的6DoF值在3D空間渲染的，但3D渲染圖層實際是蓋在真實使用者的底圖之上的，就會出現眼鏡試戴人頭轉動時本該看不見鏡腿部分會蓋在人臉之上，本該看不見的背面表帶部分會蓋在手腕之上，本該看不見的鞋口鞋洞部分會蓋在腳部之上，如何讓商品真正有穿戴進去的真實感效果，正确解決虛拟商品跟人體部位前後遮擋關系至關重要。所有3D模型生産好後我們會要求模組化商将其按最佳觀感的位置套在标模上（标準人頭模型、标準腳部模型、标準手腕模型），在還原虛拟商品3D世界的坐标之後，我們也會按同樣的6DoF值渲染标模，這個标模是透明的是以不會擋住使用者真實背景圖層，但标模在3D坐标中相對虛拟商品的Z軸關系在模組化商套模時已經唯一确定好了，是以能正确遮擋住虛拟商品在位置跟蹤過程理應看不到的部分。試鞋過程中除了使用者真實腳體會遮擋虛拟鞋模外，還有使用者的褲腿等情況，是以這裡涉及到增加新的分割算法将褲腿這部分前景提取出來，最後要再做一次模型渲染圖層的合成。通過以上手段我們就在不依賴深度攝像頭的情況下實作AR導購場景上的獨具真實感的people occlusion，拿手表穿戴過程舉例如下圖。

☞ 材質還原：我們的業務場景看重的是3D模型的材質渲染效果，是以在3D引擎方面我們選擇不是重複造輪子而是引入業界最新的開源輕量級主打PBR效果的引擎，剝離出最小核當作Renderer使用。在标準格式選擇上，glTF立志成為3D領域的JPEG，面向實時渲染應用不需要二次轉換，且對OpenGL ES、WebGL都很友好，是以我們積極向業界glTF生态靠攏，使用glTF導出/轉移模型等，而在釋出時使用SP等工具打包為GLB（二進制格式），因為GLB在檔案體積以及記憶體加載速度上都更有優勢。在AR場景使用者部位一旦湊近就會出現明顯鋸齒的情況，我們采用了4x MSAA及FXAA後處理抗鋸齒處理。在預設材質實作對眼鏡鏡片透光效果支援不到位的情況下，我們針對材質shader也做了定制化擴充實作。在目前沒有真實光照估計可用的情況下，為了增強模型立體表現，我們采用了浮點HDR的IBL光照貼圖以達到模型在各個角度下都有均衡效果。

▐ 架構方案

去年AR試妝上線後，我們注意到基于GPUImage的運作架構已經不能滿足日常業務疊代的要求了，主要表象是龐雜Filters越來越難維護，中心化開發方式讓工程與算法協同成本較高，染發、試戴等新業務場景擴充吃力，最後性能挑戰很大但GPUImage中優化的空間卻很小。從表象剖析到GPUImage底層機制來看，技術存在的主要問題是：

1、非跨平台架構，GPUImage在Android上基于Java實作，在iOS上基于OC實作，雙端雙倍人力維護衆多Filters，開發很難吃得消；

2、無動态性可言，GPUImage要編寫代碼決定渲染管線中Filters的前後串聯關系，業務需求一旦變動就要重新開發打包內建，線上如果有Filter功能問題也不能及時動态地解決；

3、性能難全局最優，GPUImage是單線鍊式編排渲染管線中各Filters關系，不能對CPU或GPU任務做很好的并行編排。同時AI算法推理子產品卻孤立在其之外，不能很好編排各任務關系做到全局性能的最優解；

4、中心化瓶頸明顯，GPUImage做業務功能時往往是一個人中心化地開發，很容易将算法&渲染&優化所有實作大包大攬地放在一個Filter中，Filter内部存在較多基礎功能單元備援，也導緻架構内部複用性差；

為解決上述問題，我們重新搭建出了CamerLink架構。核心思想将一個有明确輸入輸出的功能單元抽象為一個節點（Node），然後使用有向無環圖（DAG）将一種業務模式邏輯相關的節點編排起來，每次圖的運作是受帶時間戳的圖像幀序列驅動，運作過程中産生的任務簇被打散且扁平化地組織到線程池中排程，每個任務帶有的幀時序及運作環境等身份資訊決定了它們在GL線程還是CPU線程中以何種順序被執行。選擇該理念也是受到深度學習神經網絡設計形式的部分啟發，AI算法模型中也是由N個算子（Op）組成的DAG，隻不過Op代表的是算法公式單元，而CamerLink中的Node代表的是圖像加工處理的更高抽象單元。現在CameraLink中調用AI算法推理就像是大圖包小圖，用分形藝術解決問題，如下圖所示。有了基礎設計後CameraLink是如何針對性解決之前GPUImage遇到的那些問題呢：

1、原生跨平台支援，CameraLink核心全部基于C++，架構穩定後我們将原來存量的幾十個Filters按新的Node形式重新組織到C++，一次性遷移到底層，後續維護和新增功能節點都隻需要維護一套底層代碼；

2、基礎動态性支援，CameraLink架構中需要對外的Node都依據FlatBuffer規範導出序列化結構，同時支援從檔案加載DAG完成計算圖的反序列化，最後配合雲端的配置同步更新，即可以做到不改代碼就可完成動态性的DAG渲染功能性調整；

3、性能優化空間大，CameraLink中算法子產品也被以Node形式實作，這樣可天然地納入DAG編排中。同時我們可以将原來的子產品按任務依賴關系拆分得更細，結合DAG的靈活編排，可以做到任務并行的最大化幫助提升到性能。比如原來GPUImage時期必須等算法子產品完成後才能進行GPU上的全局磨皮渲染，而現在我們可以通過DAG編排讓人臉算法與GPU全局磨皮雙線并排進行。再如原來人臉算法+唇形的圖元計算混在一起，下一幀的計算必須等到上一幀這個過程完成才能開始，而現在我們合理地拆分為兩個Node放到DAG，下一幀的計算隻須等到上一幀人臉算法部分完成就可開始，這樣決定幀率“最長的那塊木闆”就得更短。除了這些外，現在我們還能做更靈活幀流控制，包括資源過載時丢幀政策、算法運算過載時的隔幀政策、算法延遲需要的壓幀政策等等，從整體出發精細優化找到全局性能的最優解；

4、去中心化開發，CameraLink可以更好地幫助各團隊開發分工協作，工程&渲染&算法之間首先協商好各自Node的輸入輸出标準，然後分頭實作，最後通過DAG組織起來快速傳遞，不需要再把代碼開發&聯調&內建的工作集中到一個人而成為瓶頸。同時工程同學參與每次新增Node的輸入/出協商，負責把通用基礎的Node盡量抽象出來提供給其它方複用，減少Node本身備援同時提升疊代效率；

▐ 供給方案

雖然在造AR引擎時一直會考慮如何削減商家素材供給成本，但目前就AR導購這件事還做不到零成本參與。供給本身也應納入到技術體系建設中來，做高回報做低投入，才可能讓業務持續發展。對應到供給拉升關鍵是兩點，放大做厚AR導購價值以及為商家降本提效：

1、放大AR導購價值：我們不想AR導購是昙花一現，也不想其僅僅是創新showcase用來PR，而是想真正幫助到使用者更新線上購物體驗的方式。要改變原先的AR應用的意識形态，首先要回答AR自拍導購對使用者和商家的價值是什麼，是以我們做了AR導購資料服務，希望是能給講清AR導購真正價值。商家側我們通過AB桶測試以及分人群統計發現AR導購産品能明顯提升商品轉化率，而使用者側AR導購産品平均有1分鐘左右停留時長且相關商品退貨度也有明顯下降。我們正在做的是把這部分獨立外化給每個商家，去改觀原先商家對AR産品認識和改變其對AR營運的投入政策。最後是擴大AR應用管道，私域場景我們跟詳情、店鋪、直播間深度合作，為基礎鍊路增強商品表達力。而公域側我們跟搜尋、資訊流以及掃一掃合作，打造不一樣的産品形态嘗試把“先試後買”理念推向更多使用者養成心智。

2、為商家降本提效：AR導購要的不是圖檔或視訊素材，而一種新的商品數字化資料（新素材）。新素材的生産标準一開始隻有引擎實作方最清楚，而對于商家有了解和實施的成本。目前我們提供兩種選擇，一種是找ISV包幹，商家負責花錢，平台會出面圈定和教育ISV；另一種是商家自主生産新素材，平台同樣要花力氣教育商家。不論哪種選擇，生産成本太高都會影響商家的願意度，為ISV降本提效可以讓其報價更受控，為商家降本提效直接提升其願意度，外部一般的工作流如下圖所示。

首先我們做的是推行各垂直域的生産規範，2D上妝推出商家操作手冊，3D穿戴推出模型制作規範，規範具有明确指導性且實操層面有可複制性；
第二是推出各垂直域提效工具，幫助生産方在其制作閉環内減少步驟、早發現問題，比如“AR試”預覽工具幫助ISV或商家在傳遞前确認效果而避免來回返工，2D上妝配置時提供從SKU圖自動取色作為預設值的工作，還有“模闆素材庫”可以複用現成的上妝樣式而避免每個生産方都要出設計資源，3D穿戴側提供引擎外圍工具鍊（材質預覽、糾錯等）幫助ISV提高模型傳遞品質；
第三是平台建設，幫助商家&ISV&小二&技術4方工作能線上上平台有序協作，目前AR上妝的生産平台基本成型，而AR穿戴側生産平台正在進行中；
最後是平台想辦法分攤生産成本，做到商家側低成本甚至零成本上線。業界有“集采模式”統一建設鞋子3D模型資産，商家不用出錢。我們是非采集模式，就要想辦法從根源控制成本而不是無條件地轉嫁到ISV或商家身上，是以技術側正在嘗試的是智能化生産，如妝容自動拆解及模型自動挂載，可以做到2D上妝部分品類接近零成本上線，也會極大簡化部分AR穿戴側的模型生産過程。

業務産品示範

▐ AR上妝産品系列

▐ AR穿戴産品系列

▐ 公域産品及2020雙十一