写点什么

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

评论

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

Kubernetes宕机切换源码分析

黄继承

源码分析 kubelet Kubernetes 集群 宕机

史上最全499道Java面试题:JVM+分布式+算法+锁+MQ+微服务+数据库

冉然学Java

Java 数据库 面试 算法 多线程

Vue讲解系列- - -Nginx和Postman讲解

叶秋学长

Vue 8月月更

开源一夏 | AngularJS实战之依赖注入与应用实践

恒山其若陋兮

开源 8月月更

开源一夏 | 使用 JavaScript 和 CSS 的简单字符计数器

海拥(haiyong.site)

开源 8月月更

千万级学生管理系统的考试试卷存储方案

张立奎

大揭秘:云网流量采集方案关键点

阿泽🧸

签约计划第三季 8月月更 云网流量采集

为什么实际业务中不建议直接使用POI操作Excel?

IT学习日记

POI EasyExcel 签约计划第三季 java excel导出导入 poi和easyexcel对比

RT-Thread记录(五、RT-Thread 临界区保护与FreeRTOS的比较)

矜辰所致

RT-Thread 8月月更 临界区保护

React Server Components 介绍 亮点

HullQin

CSS JavaScript html 前端 8月月更

五分钟搞定YAML

俞凡

云原生 yaml

关于Http协议,你必须要知道的

TimeFriends

8月月更

美团二面:如何解决 bin log 与 redo log 的一致性问题

飞天小牛肉

签约计划第三季

计算机网络知识点全面总结(一篇全懂)

C++后台开发

网络编程 计算机网络 网络协议 底层原理 C/C++开发

层次分明井然有条,Go lang1.18入门精炼教程,由白丁入鸿儒,Go lang包管理机制(package)EP10

刘悦的技术博客

Go 教程 Go 语言 教程分享 编程语言‘

MySQL 原理与优化:意向锁,IS,IX

老崔说架构

Kubernetes eBPF多种玩法

CTO技术共享

开源 签约计划第三季 8月月更

Kubernetes 动态扩缩容

CTO技术共享

开源 签约计划第三季 8月月更

阿里P8熬了一个月肝出这份32W字Java面试手册,在Github标星31K+

冉然学Java

Java 面试 springboot 秋招 java面试·

Forlend:构建在Findora上,且具备隐私特性的借贷协议

股市老人

STM32入门开发 编写DS18B20温度传感器驱动(读取环境温度、支持级联)

DS小龙哥

8月月更

Kubernetes rubbish如何回收

CTO技术共享

开源 签约计划第三季 8月月更

SpringBoot整合oceanbase,实现oracle无缝切换到oceanbase

IT学习日记

数据库 分布式数据库 oceanbase 签约计划第三季 oracle迁移到oceanbase

前后端分离跨域问题

青柚1943

CORS 跨域

如何正确理解Java领域中的多线程模型,主要用来解决什么问题?

PivotalCloud

涨薪了!拿着GitHub标星80k的阿里性能优化笔记,把项目优化个遍

程序知音

Java 编程 程序员 性能优化 后端技术

LAXCUS授权许可证 第1版

LAXCUS分布式操作系统

开源 分布式操作系统 软件许可证

Java程序的构造与执行

李印

编程语言 JVM Java core 8月月更

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