2025上半年,最新 AI实践都在这!20+ 应用案例,任听一场议题就值回票价 了解详情
写点什么

商家应用 + AR : 助力虚拟试妆引擎落地手淘(一)

  • 2019-12-20
  • 本文字数:1496 字

    阅读完需:约 5 分钟

商家应用 + AR : 助力虚拟试妆引擎落地手淘(一)

一句话概括全文:

现在,商家应用支持 AR 效果了!


AR 是什么?是一种现实增强技术(Augmented Reality),可以将虚拟效果应用到真实世界。AR 技能加身后,商家应用可以帮你给你的真实世界加点料。


今年双十一前夕,商家应用团队和欧莱雅集团深度合作,双方团队基于阿里统一小程序容器把 Modiface 试妆引擎在手淘上成功落地。目前已经支持了 YSL 和 Armani 两个顶级品牌的 AR 试妆应用在对应的官方旗舰店里上线。体验方式可以见文末。


Modiface 是欧莱雅集团旗下的美妆科技公司,Modiface 本次推出的 AR 试妆应用,专为手淘环境量身定制,利用小程序容器提供的基础设施能力,把自己的 AR 美妆引擎 “搬到“ 手淘上了。


那么,商家应用 + AR 是如何支撑 Modiface 试妆引擎落地的?下文将给大家分享我们双方在技术合作过程中一些心得。

链路概览

整体玩法链路是这样的,品牌方提供整体应用的设计和交互玩法,Modiface 试妆引擎基于商家应用提供的基础能力上实现自己的试妆引擎,然后统一输出给商家应用服务商,再装修到对应的品牌店铺上。



可以注意到,这个项目中涉及到多方协作,小程序容器提供的是非常基础的能力,AR 引擎负责的是能力的上层组合和自身算法能力的集成,商家应用服务商负责承接品牌的业务诉求并制作商家应用,再由品牌商的店铺装修同学把商家应用装修到对应的店铺上。


品牌方本身可以和 AR 引擎合作来定制自身的个性化需求,再把这种个性化的体验带给自家店铺的用户。

技术架构

为了支撑商家应用 AR 业务,我们在架构设计上以 API 和组件方式提供了非常多的标准原子化能力。


通过能力的组装和调用,AR 引擎可以快速验证自身的算法 &渲染能力,我们支持以 MNN 方式或者 TensorFlow.js 的方式来运行推理 AR 引擎的算法,我们支持标准的 WebGL 接口和 Canvas2D API 以供业务绘制。我们也支持摄像头数据的采集和相机帧的透出。除此之外,我们还提供了非常多的底层能力来供上层引擎调用。



基于这些小程序容器提供的基础能力,上层 AR 引擎服务商可以构建出丰富的应用场景,包括但不限于虚拟试妆,虚拟穿戴,虚拟家居等等。


那么,Modiface 试妆引擎究竟是如何在小程序容器里运作的,我们来一起看一下整个链路。


1.品牌试妆应用加载 Modiface 试妆插件,插件会调用小程序容器的 Camera 组件来打开相机并监听来自 Native 的相机帧数据,插件也会初始化一个 WebGL Canvas 组件来执行 TensorFlow.js。


2.Modiface 试妆引擎拥有两个人脸模型,分别是轮廓检测模型和 Landmark 检测模型,前者运行在 TensorFlow.js 环境中,后者使用 MNN 插件来运行推理。(后续将全部迁移至 MNN 实现)


3.轮廓模型检测到当前相机帧中存在人脸后,会切换至 Landmark 检测,此时会进行人脸精确点的采集推理。


4.同步会采集相机帧中的环境光线的强度以调整美颜算法。


5.提取要绘制的区域位置点阵,譬如人脸嘴唇位置,在 WebGL 的 shader 里开始渲染上妆,并把所有像素绘制 在 WebGL Canvas 组件上。


6.如当前检测不到人脸,则不执行渲染上妆逻辑。


整个试妆流程链路绝大部分运行在小程序容器的 JavaScript 环境里,并通过 JS binding 的方式和 Native 容器进行交互。



商家应用 + AR 的前提是 AR 引擎动态化,相对以往手淘 AR Case 最大的变化是:


1.整个 AR 引擎全部运行在小程序容器的 JavaScript 环境里,在不依赖手淘发版的情况下可以大量快速复制给不同的品牌,并且支持动态定制效果。


2.商家应用 + AR 支持各种不同的行业引擎接入,AR 引擎层和业务层是分离的,通过架构的解耦来支撑各种行业场景。容器底层专注于垂直能力的建设,上层业务快速迭代发展。


本文转载自淘系技术公众号。


原文链接:https://mp.weixin.qq.com/s/wVPinp4CCEnqavqowB5ghg


2019-12-20 14:201191

评论

发布
暂无评论
发现更多内容

为租客提供帮助

源字节1号

微信小程序 软件开发 前端开发 后端开发 租房小程序

银行需要搭建智能客服模块的中台能力,驱动全场景智能客服务升级

易观分析

人工智能

融云斩获 2022 中国信创数字化办公门户卓越产品奖!

融云 RongCloud

风靡B站的《看漫画学Python》到底是什么来头?

博文视点Broadview

最佳实践 | 用腾讯云AI意愿核身为电话合规保驾护航

牵着蜗牛去散步

人工智能 腾讯云 腾讯 技术干货 电话合规

Linux透明大页机制在云上大规模集群实践介绍

百度Geek说

Linux 运维 linux 文件权限控制

交付效率提升52倍,运营效率提升10倍,看《金融云原生技术实践案例汇编》(附下载)

York

云原生 金融科技 金融行业

重磅!海泰方圆工业强基智能网联汽车项目顺利通过验收

电子信息发烧客

谈谈 SAP iRPA Studio 创建的本地项目的云端部署问题

汪子熙

SAP 7月月更 iRPA 智能机器人 流程自动化

云计算安全扩展要求关注的安全目标和实现方式区分原则有哪些?

行云管家

云计算 等保 等保2.0 云计算安全扩展

【堡垒机】云堡垒机和普通堡垒机的区别是什么?

行云管家

云计算 数据安全 堡垒机 云堡垒机 IT安全

2022PAGC 金帆奖 | 融云荣膺「年度杰出产品技术服务商」

融云 RongCloud

Navigation — 这么好用的导航框架你确定不来看看?

编程的平行世界

android 架构 框架学习 android jetpack

2022年5月互联网医疗领域月度观察

易观分析

互联网医疗

跬智 Kyligence 入选工信部“工业大数据分析与集成应用重点实验室”工作组成员单位

Kyligence

大数据 Kyligence 工业数据智能

得物客服热线的演进之路

得物技术

大前端 客服

讲师征集令 | Apache SeaTunnel(Incubating) Meetup 分享嘉宾火热招募中!

Apache SeaTunnel

社会责任·价值共创,中关村网络安全与信息化产业联盟对话网信企业家海泰方圆董事长姜海舟先生

电子信息发烧客

低代码平台中的数据连接方式(下)

Baidu AICLOUD

前端 低代码 爱速搭

什么是数据泄露

AIWeker

机器学习 Kaggle 数据泄露 7月月更

leetcode 241. Different Ways to Add Parentheses 为运算表达式设计优先级(中等)

okokabcd

LeetCode 分治 数据结构与算法

Spring Cloud源码分析之Eureka篇第四章:服务注册是如何发起的

程序员欣宸

Java spring Spring Cloud Eureka 7月月更

基于鲲鹏原生安全,打造安全可信的计算平台

极客天地

决策树算法

秃头小苏

决策树 7月月更

ORACLE进阶(五)SCHEMA解惑

No Silver Bullet

oracle schema 7月月更

作战图鉴:12大场景详述容器安全建设要求

青藤云安全

网络安全 解决方案 容器安全

系统入门-Linux系统基础命令

Albert Edison

7月月更

小程序目录结构

小恺

7月月更

内部排序——插入排序

乔乔

7月月更

商家应用 + AR : 助力虚拟试妆引擎落地手淘(一)_文化 & 方法_淘系技术_InfoQ精选文章