“AI 技术+人才”如何成为企业增长新引擎?戳此了解>>> 了解详情
写点什么

商家应用 + 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:20735

评论

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

🌏【架构师指南】分布式技术知识点总结(上)

洛神灬殇

分布式 raft协议 paxos协议 6月日更

校友会小程序开发笔记一:背景与技术方案的选型

CC同学

小程序云开发 校友录小程序 校友会小程序

pprof排查Golang服务内存问题

循环智能

pprof 性能分析 Go 语言

6月26日,HarmonyOS开发者日将于杭州举办

科技汇

并发王者课-铂金1:探本溯源-为何说Lock接口是Java中锁的基础

MetaThoughts

Java 多线程 并发 并发王者

JavaScript 学习(三)

空城机

JavaScript 大前端 6月日更

开发者如何构建技术影响力

不脱发的程序猿

程序人生 开发者如何构建技术影响力 技术影响力

Python——字典的使用

在即

6月日更

缓存的世界 Redis(二)-持久化

卢卡多多

redis redis持久化 配置文件持久化 6月日更

PO 就是Scrum中的产品经理?别再搞不清啦

万事ONES

项目管理 Scrum 敏捷开发 PO ONES

618 技术特辑(一)不知不觉超预算3倍,你为何买买买停不下来?

华为云开发者联盟

电商 图数据库 知识图谱 618 图引擎服务

译文 | AI产品经理:如何打造一款SaaS+AI的优质产品

LigaAI

产品经理 研发管理

测试工程师如何收拾交接项目的烂摊子

陈磊@Criss

测试

请阐述vue的diff算法

法医

Vue 大前端 6月日更

快来,这里有23种设计模式的Go语言实现

华为云开发者联盟

线程 设计模式 单例模式 Go 语言

针对 MySQL IO 特点进行的存储优化揭秘

焱融科技

MySQL 技术 分布式 高性能 文件存储

校友会小程序开发笔记二:功能需求设计

CC同学

小程序云开发 校友录小程序 校友会小程序

用EasyRecovery“监控硬盘”功能检测硬盘问题的方法

淋雨

数据恢复 EasyRecovery 文件恢复

Bzz节点分币系统开发,云算力矿机租赁系统搭建

可视化协助矿山,打造“高效率运营战略”,年降成本500W

一只数据鲸鱼

数据可视化 工业4.0 智慧矿山

项目经理如何有效管理需求变更?

万事ONES

需求管理 ONES 项目经理

JAVA笔记(三)--变量及运算符

加百利

Java 程序员 后端 6月日更

【LeetCode】石子游戏Java题解

Albert

算法 LeetCode 6月日更

MySQL中的pid与socket是什么?

Simon

MySQL

拍乐云受邀2021亚太CDN峰会,技术创新赋能行业新价值

拍乐云Pano

RTC

阿里云视频云 Retina 多媒体 AI 体验馆开张啦!

阿里云视频云

阿里云 短视频 视频处理 媒体处理 视频制作

教你两招,解决数据膨胀

华为云开发者联盟

数据 GaussDB(DWS) VACUUM 数据膨胀 FSM

校友会小程序开发笔记三:数据库设计

CC同学

小程序云开发 校友录小程序 校友会小程序

校友会小程序开发笔记四:UI基本元素设计

CC同学

小程序云开发

详解 Go 程序的启动流程,你知道 g0,m0 是什么吗?

煎鱼

Java php 后端 Go 语言

618 技术特辑(二)几百万人同时下单的秒杀,为什么越来越容易抢到了

华为云开发者联盟

数据库 服务器 流量 618 弹性负载均衡

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