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

阅读数:1 2019 年 12 月 20 日 14:20

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

核心能力

商家应用 + AR : 助力虚拟试妆引擎落地手淘(二)
我们基于 JavaScript 引擎提供了三种核心能力,分别是实时相机帧能力、深度学习推理加速能力、渲染能力。下面将分别介绍三种核心能力的技术细节。

▐ 实时相机帧能力

实时相机帧的输出是一切 AR 效果的开始,小程序目前已经支持实时相机帧的输出,在开发者接口层是 ArrayBuffer 类型的二进制数据。
商家应用 + AR : 助力虚拟试妆引擎落地手淘(二)

  • 实时相机帧能力在小程序里以标准原生 Camera 组件作为载体,在小程序里使用了同层渲染的方式嵌入在 WebView 中,可以实现原生组件和 WebView 组件混合使用的效果。
  • 鉴于 iOS / Android 系统原生并没有提供相机帧的提取接口,加上 WebRTC 的标准在小程序体系里不适用,我们目前的做法是将从系统相机回调中把帧取出来,利用 OpenGL 的接口绘制在一块离屏的 FBO 上 ,这是一块自定义的帧缓冲区,我们可以利用这块帧缓冲区来实现包括 YUV 和 RGB 颜色空间的转换加速,再从这块 FBO 中读取像素点获取位图数据。
  • JavaScript 语言会以数组的语法处理二进制数据,我们一般会使用 ArrayBuffer 对象,我们需要实现原生 ByteData -> ArrayBuffer 的链路,这里有很大一部分工作是由 JavaScript 虚拟机( JSC / V8 )承担的,但是在部分 JavaScript 虚拟机不支持特性的 OS 版本下,譬如 iOS9,我们使用了社区的开源方案 expo ① 来完成了 TypedArray 的构建。
  • 目前的相机组件使用方式是使用了一个 1px*1px 大小的元素作为占位,用户不可见该组件,后续我们会支持离屏相机组件的创建。
  • 目前在低端机上,小程序的实时帧率输出能达到 30 FPS,能满足绝大部分场景需要。

▐ 深度学习推理加速能力

利用小程序的深度学习推理加速能力,非常多的算法能力能够被集成到手淘里来。目前我们支持两种推理引擎 MNN 和 TensorFlow.js,在手淘环境上我们建议使用 MNN 来作为推理引擎加速,在 Modiface 场景下实测能比 TensorFlow.js 快 1 倍以上。

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

  • MNN 是一个阿里开源的轻量级的深度学习端侧推理引擎,核心解决深度神经网络模型在端侧推理运行问题,涵盖深度神经网络模型的优化、转换和推理,其前身为 AliNN,更多详细内容,可以点击:《阿里开源!轻量级深度学习端侧推理引擎 MNN》②。MNN 更注重在推理时的加速和优化,解决在模型部署的阶段的效率问题,从而在移动端更高效地实现模型背后的业务。

  • MNN 小程序插件在 JavaScript 环境中动态完成了模型结构的搭建,MNN 本身使用 flatbuffer 作为模型描述工具,而 flatbuffer 支持 JavaScript 后端,可以利用 flatc 从描述文件生成 JavaScript 的模型加载代码,使用这部分代码就可以从引擎传入的 ByteArray 解析出模型数据了;在 MNN 的小程序插件中,使用 MNN 提供的表达式语句,根据模型数据动态构建出完整的模型图,在这之后的推理,也可以直接调用表达式来完成。

  • 在小程序里,MNN 目前支持了常用的 20+ 种 op ,可以覆盖绝大部分推理场景。在 JS binding 的能力之上,MNN 可以调用手淘里的 Native MNN SDK 来加速推理,MNN 相比 TensorFlow.js 占用内存会低非常多,此外推理速度也通常是 TensorFlow.js 的数倍。

TensorFlow.js:

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

  • TensorFlow.js 是一个 Google 开源的基于硬件加速的 JavaScript 库,用于在浏览器和 Node.js 环境训练和部署机器学习模型。现在,TensorFlow.js 也能支持在购物小程序里来推理模型了。Web 开发者也可以在小程序环境里使用熟悉的 JavaScript 来进行机器学习。

  • 在小程序里,TensorFlow.js 的 backend 是我们的 WebGL Canvas 组件,在小程序里利用 WebGL 的能力,TensorFlow.js 可以使用 GPU 来加速机器学习的运行。

▐ 渲染能力

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

  • 承载小程序渲染能力的 Canvas 组件是一个原生组件,同样是利用同层渲染方式实现的。Canvas 组件的后端渲染 backend 是 GCanvas。GCanvas 的更多详细内容,可以移步:《5 分钟带你看懂 GCanvas 引擎的演进》③
  • Canvas 组件既可以作为画布来绘制像素,也可以作为推理加速的 backend 来做计算。在小程序里我们实现了 WebGL 1.0 接口和 Canvas2D 的标准 API,以降低开发者的使用成本。
    为什么不用 WebView 的 Canvas?
  • 在小程序架构下,Worker 和 Render 是分离的,也就是说 运行 JavaScript 的虚拟机和负责渲染的虚拟机对象不是同一个,目前两者间通信是通过 Native 容器作为 bridge。如果有高频且数据量巨大的 WebGL 调用,需要每次涉及 Render 和 Worker 之间的交互,这个通信成本非常高。
  • 我们的解决方案是在 Native 实现了符合 W3C 标准的 WebGL 标准和 Canvas2D 的接口,无缝支持各种渲染框架对接。

能力演进

在旗舰店 2.0 之中,商家应用实现了店铺开放的可能性,AR 更是给商家应用带来了新的技术营销的方式。商家应用 + AR 会继续演进并支撑更多能力,我们也非常欢迎各类 AR 算法引擎和品牌方找我们合作提供好的创意和想法。
我们后续会继续在目前的基础能力上做更多的优化工作,主要分为几方面:
引擎 WebAssembly 化:目前的 AR 引擎是使用 JavaScript 语言构建的,使用 WebAssembly 技术我们可以补充 JavaScript 本身性能不够理想带来的影响,并方便开发者移植已经成熟的 C++/C 工程到 Web 。在包括很多对密集运算要求很高的场景下,譬如游戏引擎,物理引擎,音视频处理,加密算法等,我们使用 WebAssembly 可以直接把 JavaScript 运算带来的性能开销降低。此外,在小程序场景下,WebAssembly 可以大大降低小程序包的体积大小,降低用户加载时长。WebAssembly 在代码安全性上相较 JavaScript 也具备一定优势。问题现在在于 JavaScript 和 WebAssembly 之间函数调用是非常慢的,针对这个场景我们参考了业界的一些实现④,以特定类型的通信接口来维护 WebAssembly 和 JavaScript 之间的交互。
图形性能优化:我们计划在目前使用 WebGL1.0 的场景下,继续增加 WebGL2.0 的标准接口,并计划切换至 Metal / Vulkan 的底层图形能力,以帮助开发者享受到最新的 OpenGL ES 3.0 的特性,包括延迟渲染、色调映射、GPU 粒子效果等等。
通信优化:目前 Camera 组件的帧数据是每一帧都从 Native 发送至 JavaScript 里的,巨量且频繁的通信对于性能的消耗是非常巨大的,消费帧数据的对象一般都是 Canvas 组件和 MNN 插件,这里面是存在很大的优化空间的。针对这个场景我们重新设计了一个方案,我们利用纹理共享的机制,将相机采集到的所有图像信息写入一块共享的纹理中,这块共享纹理的 textureid 可以在 JavaScript 侧被获取到使用,开发者在无需感知具体图像内容的情况下调用 Canvas 组件的 textureid 接口可以直接取出共享纹理的数据并绘制在画布上。此外在避免了 JavaScript 的通信成本之后,我们还可以继续优化 GPU -> CPU -> GPU 这个链路的性能,熟悉图形学的同学都知道,CPU 和 GPU 之间的资源交换是非常耗时的,通常从 CPU 拷贝 / 读取数据到 GPU 的操作很昂贵,耗时一般是几十到数百毫秒级的,我们可以利用 sharegroup 的特性在 Camera 组件和 Canvas 组件之间共享 OpenGL 上下文环境,最大限度减低 CPU 和 GPU 之间的通信成本。
能力提供:我们后续会计划提供更多的基础能力,包括但不限于如下:

  • 目标跟踪:虚拟内容固定在图片上或者定位在空间中,实现目标跟踪能力;

  • 图片识别:识别平面图片渲染内容;可以基于此识别商标、产品包装图案、活动海报、宣传册等 * 平面物料,进行品牌数字化内容展示和互动;

  • 手势识别:识别手势渲染内容;定制手势,与用户互动,更好的将品牌与消费者连接;

  • 姿势检测:检测出人体姿势;可以基于此实现很多强肢体的互动能力,适合线下互动;

  • 空间识别:识别真实物理空间;可基于此能力实现 AR 红包等更具沉浸式的 AR 互动体验;

  • 人脸检测:检测出人脸;可以基于此实现虚拟试妆,虚拟试戴等体验;

总而言之,商家应用向全行业全品牌开放的 AR 能力还有多种可能性。

体验

真人教学彩蛋时间,感谢 Rena 小姐姐的出镜。

现在可以通过访问 YSL 旗舰店首页或者 Armani 旗舰店首页来体验两个试妆应用,或者通过淘口令 Or 二维码访问:

相关文章:
1、 https://github.com/expo/expo/blob/master/packages/expo-gl-cpp/cpp/EXJSConvertTypedArray.c
2、重磅| 淘宝轻量级的深度学习端侧推理引擎 MNN 开源
3、5 分钟带你看懂 GCanvas 渲染引擎的演进
4、 https://hacks.mozilla.org/2018/10/calls-between-javascript-and-webassembly-are-finally-fast-🎉/

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

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

评论

发布