先试后买！解析购物新体验背后的移动AI+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穿戴

☞ 深 度遮挡： 虽然商品的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双十一

总结及展望

我们致力于挖掘“AI+AR”应用在电商系统中应有的价值形态，18年构建Magics技术体系服务集团中AR自拍滤镜玩法的业务，19年将技术体系延伸到AR试妆领域，有了ARTry 1.0版本，通过内外部合作实现8种“AR试”能力，专注服务美妆行业以升级美妆在线购物体验。而最近1年升级技术引擎，有了ARTry 2.0版本，将能力扩展到服饰行业，包括AR试鞋、AR试戴等5种新能力，以推动更多行业在购物体验上的变革。

自拍式AR导购作为行业上AR应用的第三波热潮，上演新的一幕虚拟照进现实，让每个人拥有一面魔镜将自己变身为任意想要的样子，瞬间移动商品来到你的面前为你所用，充满巨大的市场空间想象力。同时技术也必须清醒地认识到目前产品体验处于初级阶段，如何做到让每个用户相信眼前发生的美好一幕是真实可信，技术上要解决的问题仍然很多：

• 算法侧需要借助硬件能力的发展做到更实时准确的对现实世界数字化理解，得到每一寸空间的3D mesh，大一统掉其它所有分部位算法。 最近我们在ARKit 3.5/4.0上看到了苗头，有LiDAR（激光雷达）的加持或许能更好完成这样的使命；

• 渲染侧需要结合现实世界的环境信息做出更具真实感的光影效果和颜色还原度，比如光照估计、环境纹理及Motion Blur等。 另外材质模拟这块往往研发或生产成本较大，需要探索用AI算法的方式自动学习妆容材质以及3D模型材质重建等领域；

• 供给侧当前美妆和服饰的商品AR覆盖刚起步，要成为商品表达的标配，需要作为商品基础属性植入到更基础的商品发布链路中，产品形式上也在不断探索如何养成用户“先试后买”的心智，互动的主体可以考虑由人扩到大空间中去（非自拍），如AR玩具、AR家装；

总之AR技术驱动产品变革的机遇还有很多，但同时面临的一个个难题也会接踵而至。但我们始终坚信AR导购能升级为下一代线上购物体验方式，不管是手机抑或是未来的头戴式设备平台，最后特别欢迎有志之士加入我们一块并肩作战。

淘系端智能AR团队

负责电商无线AR上妆/穿戴引擎及产品研发，结合领先的视觉AI算法，构建图形图像领域智能化技术，打造逼真用户虚拟试用体验，为全球消费者带来实用有趣的线上购物方式！

招聘需求： Android/iOS客户端、图形图像渲染工程、算法，欢迎社招/校招

内推邮箱： [email protected]

✿    拓展阅读

作者| 赵密（正凡）

编辑| 橙子君

出品| 阿里巴巴新零售淘系技术