原创 冬去 淘系技术  4月21日

本文根据4月20日淘系技术前端团队出品的「阿里淘系用户体验优化前端实战系列直播」——《淘宝人生里的虚拟人像渲染技术》整理而成。

点击查看直播回放

行业背景

▐  总览

首先大家可以回想一下，无论是你们看过的电影，还是玩过的游戏，有没有主角不是人类的？不光主角，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，将由我的同事驭见老师分享最后一期直播：《淘金币用户体验升级》，感谢朋友们的关注和支持。