原創 冬去 淘系技術 4月21日
▐ 總覽
首先大家可以回想一下，無論是你們看過的電影，還是玩過的遊戲，有沒有主角不是人類的？不光主角，NPC、敵人、故事、等也統統和人類沒有關系，有沒有這種作品？我相信多少也是有的，比如《動物世界》或者《探索宇宙》等之類的題材，但畢竟還是少數。大部分還是以人類題材為主。
今天遊戲和影視領域都已經是非常成熟和發達的産業了，而它們在創作的時候，都不可避免地要研發有關“人體渲染”的技術，比如毛發、衣服、皮膚的渲染，又比如喜怒哀樂、摸爬滾打等各種人類表情和動作等等，都會頻繁被用到。比如，《阿麗塔-戰鬥天使》花費 14 億在虛拟女主上。
再舉一個例子，2018年，由騰訊和Epic聯合開發的高仿真虛拟人Siren在當年的GDC上亮相，由一名演員在背後做動作和表情，虛拟人就能跟着被高品質且實時地渲染出來。效果十分驚豔。是以可以看到，整個行業是逐漸表現出對這一塊垂直領域技術的研究興趣。
▐ 跨界典型應用
當然技術甭管怎麼厲害，最後也要看能帶來什麼業務價值，還能有哪些更廣泛的應用場景。說到場景，其實有一個特别好的文化現象，B站的小夥伴一定不會陌生，那就是和二次元文化結合得特别緊密的“虛拟偶像”。
“虛拟偶像”這個話題真要說起來還是蠻大的，我這邊準備了一個案例簡單給大家分享下。和大家想到的“純粹的二次元偶像”不太一樣，她其實是一位真實網紅的“替身”。
這個美麗的小姐姐叫Pokimane，是來自加拿大的Youtube達人，她是Twith和Youtbue上的知名女主播，坐擁300萬粉絲，去年（2020年）9月的時候使用了一個虛拟形象代替自己進行了一次直播。大家可以感受一下效果。不過這個事件當時還引發了一些争議，這個我們今天就不提了。
根據Hyprsense的調查，從2018年3月至2019年5月，Youtube上日本地區的”虛拟主播(VTuber)“數量逐月穩步上升，預估全球有超過1w位這樣的VTuber。
說了這麼多，大家可能比較好奇，這些東西和淘寶有什麼關系？難道淘寶裡也有虛拟偶像麼？我的回答是“可以有”，而且這位“偶像”不是别人，就是你自己。
關于我們
▐ 淘寶人生
也許有一些朋友已經知道淘寶人生了。不知道的也沒關系，你隻要打開手淘，按這個步驟做一次，就能分分鐘建立自己的虛拟形象。
你在裡面有各種各樣的玩法，比如說去拍照，走格子，抽套裝，捏臉，換裝，美顔，等等。大家可以自己探索下。
淘寶人生這個業務，主打的是情感向的互動方式，希望能吸引年輕新生代在手淘的粘性，讓這個地方成為連接配接品牌與消費群體的活躍陣地。
▐ 淘系互動團隊
“淘寶人生”這個産品是一個很大的項目，涉及到不少兄弟團隊的協作。而我們淘系遊戲互動團隊從去年開始支撐這一塊的前端業務，并重點研發基于淘寶人生的虛拟人像渲染相關方面的技術。當然我們這方面的建設也借鑒了不少業界的做法和前人的經驗積累。
除此之外，我們團隊還有“芭芭農場、“淘金币”、“省錢消消消”等更多的淘内互動遊戲産品，以及各種營銷大促的業務場景。歡迎大家都去體驗一下。歡迎大家都去體驗一下。我們也在一直長期招募優秀的人才，有興趣的小夥伴可以掃這個二維碼加關注，并發履歷給我們。
技術内幕
▐ 引子
- 渲染基本流程
在技術這個環節，我們再展開講四個方面内容，分别是“基礎流程和管線”、“換裝和美顔是如何做到”、“捏臉是如何做的”以及“如何與AR互動結合”的。
首先講一下基本的流程。當使用者進入淘寶人生的時候，程式會先加載全部的模型、紋理和材質等資源。然後讀取基礎的資料，這些資料對所有使用者都是相同的，可以了解成是一個公共的人像模闆。
然後再讀取使用者個性化的資料。剛才我們提到，使用者在淘寶人生可以換裝、美顔和捏臉，那麼這些使用者個性化定制的資料也會作為”人像像配置“存放在服務端。程式根據這些配置會動态加載個性化的道具、裝扮、骨骼和表情等各種模型資産。是以這部分資料就是差異化的部分。
加載好後，就需要将這些個性化的模型資料應用到公共的人像模闆上，該替換的替換，該合成的合成，該修改的修改。這些細節我們等下會展開說。最後進行渲染，講到渲染的話，先普及一點實時渲染的基礎，就是渲染管線。
- 渲染管線基礎
人像渲染技術，歸根到底還是“3D實時渲染技術”的一個子領域應用，說到“實時渲染技術”，就離不開對“渲染管線”的了解，什麼是“渲染管線”呢？其實“管線”這個詞已經很精妙地描繪出它的含義了，就是把上一個環節處理的資料丢給下一個環節去處理，當中CPU和GPU都會參與，但GPU參與的部分更多更重一點。一環扣一環，資料就像在一根管子裡流動一樣，是不是很形象？
經由這條管線繪制一次以後，就能畫出一點東西，它被存放在顯示卡的幀緩沖區裡。在實際應用中，實際上隻花一次是遠遠不夠的，因為這樣隻畫出了一部分内容。每次畫完後，我們或多或少都要調整管線，比如切換材質、切換模型頂點等等，再畫一次，如此往複。每多畫一次，幀緩沖區裡就多點内容。那麼經過很多次這樣的繪制後，一副完整的圖像就被畫出來了。
我們淘寶人生也是類似這麼一個重複繪制的過程。比如說這位漂亮的人偶，她有腦袋、頭發、眼睛、還戴着眼鏡，配飾，這些模型的網格頂點、材質紋理、渲染狀态都是不一樣的，是以要一步步地畫。從分解圖中可以看出，至少要畫9次，才能将她的頭完整地繪制出來。
當然啦，由于時間關系，這裡關于“渲染管線”的講解還是很粗糙的，目的隻是給大家提供一個比較直覺的體驗。而且業界基本也都是這麼做的，并沒什麼特别的地方。大家可能也更關心，“淘寶人生”在開發的時候有什麼特别的地方嗎？接下來我們就來談一談。
▐ 換裝美顔技術實作
- 引子
之前介紹過，淘寶人生的一大特色是“換裝和美顔”，玩家也會更容易注意到這部分，比如換衣服褲子鞋子、換眼影睫毛唇彩等等。因為這些入口更加顯眼。玩家能換這麼多元素，可以想見不可能每針對一組變化，我們都提前準備一套完整的模型用于渲染，這是不現實的。那我們是怎麼解決的呢？其實”換裝“與”美顔“的實作方式也不太一樣，是以我們分開來說。
- 道具動态加載
“換裝”的思路比較簡單，其實就是預先制作好各種道具本身的模型，當讀取到使用者的個性化配置資料後，就擷取到對應道具的ID，然後加載這些模型資源，包括上衣、褲子（包括裙子）、鞋子、眼鏡、耳環、項鍊、頭飾等等。它們都是獨立的模型，有各自的材質、紋理等配套資源。
這些道具被動态加載後，會挂載到人體對應部位的”骨骼“上。然後會随着渲染管線的流程，一步步地随着人體一起渲染出來。我們在這個基礎上，還做了一個優化點。大家仔細想一下就會發現，渲染衣服的時候，衣服會”包裹“在人體上，那麼其實這時被包裹的那部分人體就看不到了。那麼如果還渲染那部分模型網格資料的話，就是一種浪費。而且這也不僅僅是浪費的事情，有時候它還會帶來更大的問題。是什麼問題呢？
大家知道服裝産業是非常成熟的，尤其是女孩子的衣服，真是千變萬化多種多樣，比如有大風衣，也有小吊帶。那麼美術同學制作出來的一些道具，比如說鞋子，配到模型人體上的時候，有時就會有”穿模“的現象出現。理論上仔細調整道具也能解決，但這樣做成本實在太高了，而且模型做動畫的時候也還是有瑕疵，效果不好。整體來說就是成本效益太低。
是以我們研究了一種辦法，就是在美術制作的時候把人體”分塊切割“，進行标記。然後将各個道具與這些分塊部位關聯。這樣遊戲中在讀到某件道具時，就知道哪塊人體部分不需要渲染。那麼就真的不把渲染它們出來。這樣既減少了渲染量，也解決了穿模的問題。一箭雙雕。為了實作這個功能，我們專門實作了一套完整的基于Unity的編輯插件，友善美術同學使用和标記。
”換裝“的思路其實還是比較簡單，說到底就是切換不同的道具模型而已。相比之下，”美顔“就更困難些了。接下來我們看看”美顔“是怎麼做的。
- 紋理動态合并
我們說“美顔”比較困難，是因為所有的效果都是展現在一個面上的，也就是臉。有女朋友的同學可以想象一下你們女朋友化妝的樣子；沒有女朋友的也不要着急，畢竟單身的日子還會很長:-)。是不是在臉上擦一層粉底，然後畫畫眼線啦刷刷睫毛啦塗塗口紅啦什麼的。這些效果都不是網格頂點，不好用“換模型”那種思路解決。
一般來說，表現模型表面細節特征之類的效果，業界都是用“紋理貼圖”解決的。比如衣服的紋路，臉上的皮膚等等。所謂“貼圖”就是貼在模型上的一張圖。是以我們這裡提到的衆多“美顔”效果，用貼圖來表現也是最合适的。一般的貼圖也都是美術提前做好的，用的時候貼上去就行了。我們的基礎頭部效果也是這麼做的。但問題在于，我們的場景中，臉部貼圖上的美顔細節，都是使用者親自精心調制的，我們無法提前制作。
是以我們的做法是“動态合成紋理”，思路是預先準備好各種美妝部位的局部構成圖，同樣根據使用者的配置資料加載這些圖檔資源，包括有粉底、美瞳、眉形、睫毛，唇彩，男生的話還會有胡子等等。
這些圖檔被加載後，會在GPU上經過一次簡單的渲染管線，合成生成一套新的完整臉部的細節紋理圖。然後再次随着第二次渲染管線的流程，作為臉部模型的紋理被渲染出來。這種思路是比較巧妙的，等于是第一次渲染的結果被用于第二次渲染的原材料，充分利用了渲染管線靈活的特性。當然這個技術也有專門的名字，叫“渲染到紋理”（Render To Texture）。
這就和炒菜一樣，你想炒肉菜的時候，你把生肉下鍋炒熟就直接吃嗎？不是的，你會先把它盛出來，再炒其他的配菜，然後再把剛才的肉放進去。是以這個肉就成了在第二次炒制的過程的原材料。道理是一樣的。是以說，渲染管線和烹饪一樣，都是藝術。
- 架構示意
我們設計了專門的對象來統一抽象和處理這種“動态合成“的特性。叫“Renderer”。我們将Renderer設計成層次樹形結構，每個部位都有對應的專有渲染器。最頂層有CharacterRenderer，下面分出HeadRenderer和BodyRenderer。其中BodyRenderer主要封裝了“道具動态加載”的特性，而HeadRenderer同時封裝了“紋理動态合并”相關的特性（我們稱為TextureMerge）以及“道具動态加載”的特性，因為像耳環、眼鏡外挂物等也屬于臉上的“道具”，而不是“美顔”。各自下面還有一些更細的子Renderer，大家看示意圖就好。
- 效果優化
這一部分的最後，我們再介紹一點其他有趣的東西，就是有關效果的優化。淘寶人生使用的主要材質還是基于PBR的，PBR材質是什麼意思呢？它意思是“基于實體渲染的材質”，就是說計算一個像素的顔色時，盡可能地模拟了實體學科方面的原理，像光學和輻射學這種學科。比如“遵循能量守恒”、“微面理論”、“遮蔽現象”、“菲涅爾現象”等等。這個知道的同學就懂是什麼意思，不知道的同學回頭可以去了解一下。這裡簡單聽聽就好。
當然這方面的研究和應用已經很成熟了，這些複雜的計算公式被提取抽象出來，我們稱為“光照方程”、“渲染方程”或者“光照模型”，總之意思差不多。業界有不少這種計算公式，代表抽象的特性也不太一樣，但大同小異吧。這裡面最有名的應該就是由Cook-Torrance提出的BRDF（雙向反射分布方程），大概長這個樣子：
抛出這個公式也不是為了唬人，因為PBR其實已經是“真實感渲染”的基礎，大部分基于webgl的主流3Dweb引擎都實作了對PBR材質的支援，業界中的gltf模型規範中也有對PBR這一塊的定義和描述。是以淘寶人生用PBR材質也沒什麼好奇怪的。這裡想講的是額外做的材質效果，進而提升最終的畫面體驗。我這裡舉兩個例子。
第一個例子是“次表面散射材質”。它用來描述光線穿過透明/半透明表面時發生散射的照明現象，是指光從表面進入物體經過内部散射，然後又通過物體表面的其他頂點出射的光線傳遞過程。特别适合用于表現類似皮膚、樹葉、蠟像、玉石之類的效果。淘寶人生渲染的是人像，我們希望能盡量模拟出一點“皮膚通透”的質感，是以也實作了一個簡單版本的3S材質。
第二個例子是“各向異性材質”，它是指物體表面在互相垂直的兩個方向上具有不同的表現特性。這麼說可能比較抽象，比如說鋁制金屬物品，在某些方向會顯示出特别有指向性的“光柱”。淘寶人生裡有不同的發型、衣服等，他們都可能有不同程度的各向異性特征，是以也做了相關的模拟和實作。
- 總結
由于時間關系，這一塊相關的内容我們暫時就介紹到這裡。我們這裡簡單總結一下，我們談到了應對“換裝”與“美顔”的兩種不同解決方法，一個是用動态加載道具模型的思路解決，并做了隐藏與顯示的優化；另一個是動态合并貼圖，充分利用了管線靈活性的能力；此外我們還談到了材質效果上的一些加成優化。接下來，我們将目光轉向淘寶人生的另外一個特色，”捏臉“。
▐ 捏臉技術實作
在淘寶人生裡可以“捏臉”，甚至“臉部局部精修”。比如你可以調節臉型寬窄，調節頭部大小等等。這裡的問題是，它們都是針對已有模型資料的修改和變化，不是說要”換模型或素材“，思路不一樣。那這塊是怎麼做的？
是以我們的問題聚焦在，如何提取并描述這樣一組組的”變化“呢？一般來說，3D渲染技術中經常會用到兩種技術，”骨骼蒙皮”和“頂點變形”，我們分開來說。
- 骨骼蒙皮
第一種是我們對頂點施加某種”變換“，簡單來說就是包含了位移、旋轉和縮放三種影響的一組數學公式。頂點被這樣的公式重新計算後就能獲得新的位置，進而實作了”變化“。那麼這種”變換“是如何影響人體呢？說到這裡要引出一個概念，就是”骨骼“，或者叫”關節“。想象一下擡起你轉動頭部這個動作，其實就是頭圍繞脖子旋轉一定角度。如果我們給人體的脖子安插一個這樣的”變換“，那麼挂載在脖子部位的所有東西（比如頭）就能被移動、旋轉或者縮放。
這裡要注意一點，就是提前要先設定好有哪些頂點會受到這個”關節“的影響，進而讓關節帶動對應的頂點運動，這個技術我們稱為”蒙皮“。經過蒙皮後，一個關節或者說骨骼，就能帶動一大片頂點的運動。
是以淘寶人生的捏臉部分，我們使用了骨骼變換的技術達到讓模型變化的目的。舉一個例子，調整頭部大小。玩家在控制器裡調大頭圍的參數，本質上是對頭部安插的關節進行了”放大“操作，那麼對應的所有頭部的頂點也都跟着被放大了。淘寶人生中用于”捏臉“的骨骼大約有20多個，包含了頭圍、眼球、眼角、眼眶、顴骨、臉型等等。
骨骼變換的方法很好用，因為它能高度抽象這種類型的變化，也容易了解和操作。但凡事有兩邊，對另一些”變化“它就沒那麼容易了。比如說，淘寶人生裡也能調節嘴角的上揚角度，這種功能用骨骼來做是很難做的，因為它隻能表達位移、旋轉和縮放中的一種或組合。無法進行逐頂點變化操作。要讓嘴角上揚需要每個頂點都有不同程度的變化。那這種是怎麼做呢？
- 頂點變形
這就涉及到了第二種技術，簡單說就是直接修改頂點。因為模型是由網格組成的，網格又是由頂點組成的。3D模型裡提供了原始的頂點位置，那如果有辦法直接修改頂點的位置，那就能修改模型的外觀了。當然具體實作還是要講究點手法的，否則也不太好描述頂點到底怎麼”變化“。一般來說我們會給頂點準備一個基準位置，再提供一個”極端變化“後的最大位置，那麼乘以一定的”權重比例“，就能讓這個頂點在基準位置和極端位置中的任一位置。這種技術業界一般稱為”Morph Target“，也有的叫”Blend Shape“。總之都是指頂點變形的意思。
這種技術特别适合彌補”骨骼變換“方法的不足，也更容易做出靈活、活潑的頂點動畫。淘寶人生中的”捏臉“部分，大約用到了40多個這樣的”頂點變形器”，包括有眉毛、眼睑、瞳孔、眼皮、嘴巴、下巴等等。
但頂點變形也有自己的問題，骨骼可以用一個關節都能管理一大片頂點，而頂點變形是直接修改頂點，是以就要多準備幾套不同的頂點，比如原本隻用100個頂點來畫嘴巴，但因為要支援幾種不同的變形，就要翻倍成幾百個。這個很吃資源，對實時計算壓力也不小。是以在實際開發中，哪些用骨骼，哪些用頂點變形，這是一個權衡“效果”與“效率”的工作，需要具體去看，反複拿捏。而且這些調整與上遊的美術制作成果結合的非常緊密，需要程式員與藝術家一起去看。
我們設計了專門的對象來統一抽象和處理這種“變化”，叫“變形元件”（ModifierComponent），然後設計了統一的資料結構來描述這兩種變化，使外部不用關心細節，盡量用統一的思想操控它們。這個外界可能會影響到上遊的美術同學、業務開發同學、乃至最後的玩家使用者。而内部我們會分出兩個子變形器，分别是骨骼變形器（BoneModifier）和頂點變形器（MorphModifier），會具體解析不同變形資料的含義。
- 動畫及更多應用
骨骼蒙皮與頂點變形不僅用于捏臉，實際上業界用這些技術更多是做“骨骼動畫”與“表情動畫”的。因為原理是類似的，這時隻要準備好相應的動畫檔案，就可以用這些檔案驅動對應的骨骼和頂點運動了，就像是播放一段動畫一樣。甚至我們可以走的更遠，用其它類型的資料驅動它們運動。我們在稍後的話題中，也會介紹下它們和算法和AR方面的結合。
這一部分也講的差不多了，我們來回顧一下。我們談到了兩種常用的用于描述和實作”局部變化“的技術，一種是”骨骼蒙皮“，另一種是”頂點變形“。它們各自都有優劣，需要結合使用，同時權衡效果與效率。淘寶人生的”捏臉“部門一小半使用了骨骼蒙皮，一大半則使用了頂點變形。這也是長期磨合的結果。這些技術不僅可以用于捏臉，其實隻要了解了原理，它們有更多的場景可以發揮。接下來我們稍微再花一點點時間，簡單聊聊它們與“AR互動技術”的結合。
▐ AR互動技術實作
剛才我們講過，骨骼蒙皮與頂點變形作為渲染技術的底層基礎，可以有很多應用，比如說“捏臉”，也可以播放預制好的骨骼動畫和表情動畫。去年的時候，我們開始嘗試“真人驅動做表情”的技術。于是我們和淘系的兩支兄弟團隊緊密合作，他們分别是淘系多媒體算法團隊與淘系AR平台團隊，經過近半年的努力後，我們終于将這部分的成果上線，大家可以在淘寶人生的拍照裡，打開“AR頭像”就能體驗到。不過注意先将手淘版本更新到最新。
這個功能在工程方面的流程還是比較容易了解的，簡單說就是我們使用AR相機實時拍攝使用者的臉部表情，底層算法會實時提取出面部表情特征，并輸出成骨骼資訊與Morph表情資訊（也就是頂點變形資訊），然後将資訊傳給渲染層，我們拿到資訊後再實時替換淘寶人生的人像頭部相關的資料，這樣就能讓真人驅動虛拟人做表情了。
算法團隊的算法也比較進階，這種算法是基于深度學習的架構，克服傳統視覺算法泛化性不強的缺點，從海量臉圖像中解耦外貌、臉型、表情等資訊，是以準确提取出人臉共性的表情特征表示。
- 同層渲染
在開發的時候我們遇到一個問題，就是我們自己是Web層的渲染技術，而想要使用人臉捕捉和背後的算法，需要特殊相機能力的支援，也就是AR平台團隊提供的“AR相機”。但這種富能力的相機是做在Native層的，與Web并不相通。為了達到這個目的，我們使用了淘系技術自身研發的“同層渲染元件”作為二者的橋梁，進而在Web的容器裡能直接使用來自Native的元件。大家看到的這個AR頭像，手機相機拍到的畫面就是由AR相機透過“同層渲染元件”給到我們這邊的，而其它所有的元素，都是Web自己提供的元素。
為了能夠合理地整合和排程來自算法、AR相機和人像渲染的能力，我們專門開發了一個獨立的技術庫叫“ARCapture”，對相應的能力和部件做了科學的封裝和架構。大家可以看這個庫的内部架構圖。
在開發ARCapture的時候，我們也做了不少優化。這裡舉兩個例子。
第一個是關于眼球跟随。之前講了“頂點變形”與“骨骼蒙皮”的技術，也談到了通過算法可以将真實人臉的表情與運動捕捉下來并轉化成對應的資料。但是，當時的算法雖然轉換了眼部相關的表情資料，卻沒有直接提供眼球的運動，因為眼球是骨骼驅動的，比如說旋轉，這個能力當時算法是沒有的。是以我們當時決定自己做這個計算。
簡單說就是，根據眼部肌肉相關的BS系數，根據權重值，推斷出眼球的運動，因為二者關系是可以拟合的。比如說當“向右看”這個行為，眼角的肌肉是變化的，算法也能給出這個變化系數，那麼我們也能找到辦法手動計算出眼球骨骼相應的偏移量。
大家可以看這個示意圖。真人眼球的運動，通過計算就能真實适配到渲染的人偶中。
第二個是關于相機系統。大家知道在渲染引擎中是有相機（Camera）系統這個抽象概念的，當然到了渲染管線底層還是會作為其中一環服務于整體的“空間變換”的目的。但AR相機也是對一個相機系統，它抽象了使用者手機的真實相機。是以就有兩套相機中的某些參數不對應導緻效果奇怪的問題。
比如fov，也就是“視場角”。這個是相機中都會存在的概念。我們渲染引擎相機的fov是可以直接設定的，但問題是AR相機并沒有直接提供fov的參數，因為這和AR相機的畫幅比例有關；但AR相機給了我們更底層的一些資訊，比如“内參矩陣”，代表真實相機内置的資料，比如鏡頭焦距等等。是以我們根據這些資訊進行了計算，重新得到了适用于渲染引擎的相機fov。進而能讓虛拟人像的臉部和真實人臉完全對上。如果這個值計算不對，一開始沒什麼問題，但當人離着更遠的時候，就會發現兩張臉的位置就對不精準了。這會很影響使用者體驗。
到這裡也總結一下，我們結合了兩支兄弟團隊的力量，利用“識别算法”和“AR相機”進行驅動，讓我們的虛拟人像與真人連接配接在了一起。同層渲染元件技術也将Web和Native彼此打通，進而讓Web更深入地使用裝置底層的能力。對接兩個不同的相機系統時，還需要做一些特殊的适配，才能達到完美的效果。
為什麼是Web？
▐ Web的劣勢
最後我們聊一聊我們的技術選型。
這麼複雜和龐大的工程及技術，離不開上層渲染引擎乃至遊戲引擎的支援。我們是基于Web的産品，是以使用的來自Web技術棧的引擎。在一個階段裡我們選用的是LayaAir，這個在國内的知名度應該也比較高。不過考慮到未來能夠更加自由和靈活地定制底層渲染能力，我們正在使用阿裡淘系自有的Web3D引擎，也就是Hilo3D進行遷移和重構了。實際上，目前線上有一部分使用者看到的已經是Hilo3D引擎來渲染的了。目前線上有一部分使用者看到的已經是Hilo3D引擎來渲染的了。
為什麼選擇用Web做渲染這塊的東西。那在回答這個問題之前呢，我想先反過來談一下，就是用Web做有什麼不好。
首先就是對預加載的支援不夠好。如果是Native的話，很多重要的、大塊的基礎模型資料都可以預埋在端上。隻要App裝好了，那麼這一大塊資料也就裝好了。但Web的話就要等打開頁面的進行加載。這也導緻了我們對資料資源使用上的“吝啬”，比如貼圖分辨率不是很高，也不敢用更高品質的美術資産等。
其次是Web的渲染效果還是比不上Native的，運作效率也差Native一個量級。這有很多原因，比如WebGL在很多能力上都比不上原生的OpenGL，甚至連OpenGL-ES的能力也有相容性問題。比如說一次繪制時頂點着色器能使用骨骼數量是有限的，這導緻我們無法在身體上安插過多的骨骼。另外WebGL是浏覽器封裝的圖形接口，不像Native那樣直接使用的是OpenGL-ES的接口，畢竟是又隔了一層，效率上也有不小的影響。有些浏覽器中間用了ANGLE做了翻譯，可能在某些windows平台上被翻譯成了DX，這也會導緻使用GPU能力的一些相容性問題。
▐ Web的優勢
那為什麼我們還要用Web呢？我認為最重要的原因還是因為，我們是長在手淘内的一個子業務。今天淘寶的使用者體量這麼大，手淘擔當的角色也非常重大。我們不可能因為今天要做淘寶人生的業務，就把這麼重的資料都預埋到App端上去，像做一個正式的獨立遊戲App那樣來做淘寶人生是非常非常不現實的。是以還是Web的環境更适合這篇土壤。
其次Web本身的優勢就是靈活，對發版節奏不像Native那樣死闆和被動，如果我們想上一個新特性，使用者再次打開頁面的時候就已經更新了。而Native除了等待發版節奏外，還要祈禱使用者願意去更新。如果不願更新，那還是沒轍。另外，Web也很靈活，離業務産品非常近。隻要我們自己的架構做得好，明天要是上一場圍繞淘寶人生演繹的大促項目，那這些能力還是能很快就用過去的，Native就非常不适合這種場景了。
最後，其實大家自己玩玩淘寶人生就能體驗到，雖然在渲染效果上比不上Native，但70~80%的體驗已經很接近了。用Web照樣能做出精細的“換裝/美顔/捏臉”的功能，Web也能應用上一些複雜的渲染管線，做出産品級的東西，而不僅是demo一樣的玩具。通過一些橋梁中間級，在特有容器下，Web也能去利用Native的能力，二者共生，發揮各自的優勢。最後我們還要注意到，Web仍在積極蓬勃地發展，我相信未來随着WebGPU和WebAssembly的成熟，我們在渲染這塊能比現在好的多得多。
很感謝大家能聽到現在。今天聊了很多哈，總結一下今天的内容，我們聊了行業背景和典型的應用場景，介紹了我們的業務和團隊（這裡還是要強調，歡迎大家多多體驗淘寶人生，也歡迎有興趣有志向的小夥伴發履歷給我們，聯系我們）。另外我們分享了一些技術内幕，談到了如何實作“換裝美顔”、如何實作“捏臉”、以及與”AR互動“之間的結合。最後我們還對比了下Web下開發的優勢和劣勢。
很開心能和大家進行這場分享。今晚19：00，将由我的同僚馭見老師分享最後一期直播：《淘金币使用者體驗更新》，感謝朋友們的關注和支援。