作者：京东批发 戴旭

京东小程序是一个凋谢技术平台，正在被越来越多的头部品牌抉择，用于站内私域流量的营销和经营。诸如各种日化、奢侈品等品牌对ARVR有较多的诉求，心愿京东小程序引擎提供一些底层能力，叠加品牌自主的个性化开发和定制，以反对更加丰盛的场景和玩法，比方AR试妆、试戴等。

咱们小程序引擎联结ARVR团队，在单方产研测的致力和合作下，实现了相干能力的设计和开发。整体性能于京东APP11.6.6版本公布上线，期待为更多的商家和品牌赋能。

体验门路和成果（负责相干模块的产品小姐姐情谊录屏）

技术计划

这里以人脸识别为例，先介绍整体的技术计划。

概念介绍

技术关键词：相机、实时帧、AR算法、同层渲染、WebGL。

这几个关键词外面，前三个比拟好了解，人脸识别，会用相机采集人脸的实时帧数据，调用AR算法，获取计算结果，把数据传输给小程序前端。

前面两个关键词和小程序的场景有关系，WebGL技术是小程序为了反对游戏、ARVR等高性能渲染的需要，采纳原生的OpenGL实现了一套WebGL的接口。小程序页面是WebView渲染，而咱们既然提到了采纳OpenGL原生渲染，就须要把原生组件，正确的插入到Web的视图层级，同层渲染就是将原生组件和WebView DOM 元素放在一起进行混合渲染的技术，可能保障原生组件和 DOM 元素在渲染层级、滚动、触摸事件处理等方面保持一致。

总体流程

小程序引擎在底层原生反对了相机、实时帧、AR、WebGL等能力，同时裸露了若干 js 的api。小程序开发者通过相干api的调用，执行开启相机、获取实时帧数据，调用AR接口，获取计算结果数据，进行WebGL渲染等操作。简要的流程如下：

分层设计

从分层的角度看整个技术计划的设计，大抵如下：

其中在AR引擎这一层，分为内置和内部AR引擎，也是因为小程序自身是凋谢的技术平台，咱们采纳了接口协议化的设计，反对第三方宿主采纳自主的AR引擎，同时提供了相机、实时帧、WebGL等原子化能力，小程序服务商能够构建专有的AR引擎为下层业务赋能。

技术挑战

WebGL技术原理的篇幅过大，它也不仅仅是为了ARVR这个场景服务，所以包含AR算法之内，都不在本篇的具体介绍范畴之内。

在这部分，咱们专一于小程序和ARVR叠加的畛域：内存和帧率的优化。

咱们晓得在观赏电视和电影画面时，只有画面刷新率达到24帧/秒，就能满足人们的需要，也就是说咱们至多要在中端甚至中低端的机器上达到24帧以上的帧率。

为了保障根本的画质，相机实时帧的分辨率设置为1280*720，以RBGA格局存储，那么每一帧的数据是1280*720*4=3686400Byte，约3.5MB，每秒24帧以上的帧率，这个是不小的数据量。总的来说，在性能优化上，咱们遇到的次要挑战如下：

挑战1，数据从原生传输到js，在从js传递到原生，如此大的数据量将会成为js和原生通信的瓶颈；

挑战2，在iOS平台上，相机output只能指定BGRA格局，因为原始相机实时帧 CMSampleBufferRef对象内蕴含CVPixelBuffer对象，CoreVideo对象不反对RGBA格局，参考官网文档
https://developer.apple.com/library/archive/qa/qa1501/_index....

而WebGL规范的接口不反对BGRA格局，参考文档：
https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderi...，数据格式的转换会减轻性能的累赘；

挑战3，即使以24帧为规范，每一帧的解决工夫大概只有41ms，须要经验原生相机生产、数据格式转换、数据双向传输、ar算法、webgl绘制等流程，每一环节都很重，咱们须要思考如何利用并发调度劣势，并且保障实时帧的时序不会产生错乱，因为时序一旦乱了，影像尽管始终在输入，然而视觉感触是凌乱的。

针对上述挑战，进行了一系列的优化，最终在中低端手机（iPhone8 Plus）上达到均匀26~27帧的帧率，整体体验较为晦涩，具体调优上面具体介绍。

性能调优

1、数据传输优化

原生和js之间传输大量的数据会成为性能的瓶颈，数据传输优化就是缩小数据传输频次，最好是数据保留一份，只传递数据的标记。

咱们设计了一个NativeBuffer缓存来优化这个问题。次要流程如下

然而在js环境中，最终还是要应用js对象，原生相机实时帧的数据须要被转换为js对象。那么如何做能力让数据只保留一份呢？

NO COPY

iOS端抉择运行小程序的js框架是JavaScriptCore，JavaScriptCore提供了一些C语言的接口办法，能够以NO COPY的形式，把一个void类型的二进制数据指针作为backing store，创立绝对应的js对象，个别类型是ArrayBuffer或者TypeArray。也就是说原生和js对象背地的数据是同一份，共享这部分内存。

这样一来咱们只须要保障缓存的原始相机实时帧的数据不开释，那么js对象援用的这部分数据就会始终无效。那这部分数据要在什么时候去清理呢？

销毁

在创立js对象的时候，能够指定一个C的函数指针作为入参。当JavaScriptCore检测到这个js对象销毁的时候，会主动触发该C函数的调用。咱们须要依照指定的函数原型实现一个C的办法，在这个函数里去做缓存的清理，能够看一下这个函数的原型：

typedef void (*JSTypedArrayBytesDeallocator)(void* bytes, void* deallocatorContext);

该函数有2个参数，第一个bytes是原始相机实时帧的二进制数据，第二个是上下文环境，这里咱们传的是NativeBuffer治理类的实例，在这个函数的具体实现中，咱们去匹配NativeBuffer治理的缓存地址，找到相干数据进行清理。

写入优化

后面咱们说过，数据流转是双向的。原生把相机的数据传输到js侧，js调用ARVR的人脸检测接口，还须要把这份数据在传输到原生。因为相机和人脸检测是互相独立的接口，js拿到相机数据不肯定非要调用人脸检测，调用人脸检测的数据也不肯定非要来自于相机，还能够是一个本地的图片。

绝对应的，咱们在NativeBuffer的设计中，提供数据双向传递的接口，getNativeBuffer：id和setNativeBuffer：id。在原生传递到js的数据中，咱们用了NO Copy的形式去做优化，那么在js传递到原生的数据，因为咱们不晓得数据起源，所以须要开拓一份新的内存空间，调用memcpy复制数据。然而实际上，咱们在做数据复制之前，能够用JavaScriptCore提供的接口，从js的ArrayBuffer对象中提取到实在数据的内存地址，而后在NativeBuffer缓存池中查找，如果找到了则无需再做数据复制。这样保障了数据始终只有一份。

数据类型

在实际的过程中，js端在抉择二进制对象的数据类型的时候，可能会用ArrayBuffer或者TypeArray。一旦js端进行了数据类型转换，比方ArrayBuffer转TypeArray，引擎在调用setNativeBuffer的时候，传递的是转换后的数据类型，将会导致setNativeBuffer外部的写入优化生效，进而在低端机上带来显著的卡顿。在这里，咱们对立应用统一的数据类型，不能随便的转换数据类型。

2、相机实时帧格局转换

在技术挑战中咱们提到，iOS平台上，相机output只能指定为BGRA格局，而WebGL规范的接口不反对该格局。如果不进行格局转换，会导致红蓝色彩颠倒，红色物体出现蓝色，蓝色物体出现红色。所以在数据缓存和传输之前，要做格局转换，咱们须要找到一个疾速低成本的办法。

要想做数据格式转换，须要理解一些根本的图像数据在内存中的布局状况，如下图所示。

这里咱们选取的BGRA和RGBA格局都是32位，也就是每一个像素点是4个字节。

实在图像数据因为内存对齐的起因，大小并不一定是width*height*4个字节，CoreVideo框架提供了获取相机数据宽高的办法，咱们要计算出待处理的字节大小，每4个字节做一次循环，把第一位和第三位做一个调换，就能无需malloc内存，把BGRA转换为RGBA格局。

3、并发调度

在技术挑战中还提到，每一帧的解决工夫大概只有41ms，须要经验原生相机生产、数据格式转换、数据双向传输、ar算法、webgl绘制等这么多流程，如何利用并发劣势，并且保障实时帧的时序不会产生错乱呢？

咱们为了保障UI主线程的晦涩，要尽可能把更多的环节放到子线程执行，这个时候哪怕写入缓存这样一个轻量的操作放到主线程都可能会带来画面的卡顿。

实时帧的解决、AR算法别离放在不同的线程，为了保障实时帧时序，均采纳串行队列。

采纳了多线程之后，NativeBuffer数据的存储和清理须要加上线程平安爱护。

这样整体利用了多核的劣势，并保障了调用时序。线程调度和解决流转如下图所示：

4、资源管理

现实状况下，原生相机产生一个实时帧数据，JS耗费一个，在中高端机器上，性能可能满足需要，整体体现较为安稳，然而在低端机器中，线程抢占十分频繁，当主线程和子线程产生线程抢占的时候，会导致供需不匹配，一旦实时帧数据耗费不及时，内存会产生爆炸式的增长，所以须要限定缓存池的容量，这个个别能够依据理论调试的状况指定一个数值即可。

还有一旦呈现内存正告或者当缓存满的时候，须要去清理缓存池，buffer如果正在被应用，就不能去清理，否则可能会呈现白屏的景象，咱们给buffer加了一个是否被生产的标记，当一个buffer被生产后，它不能以惯例的形式清理，须要期待js生产实现之后清理，这个在下面也有介绍。

在页面退出的时候，引擎须要监听相干的事件，确保实时帧的监听被进行，否则会呈现多个js相机的监听事件并存，一个数据被屡次生产而引发异样。

结语

京东小程序致力于打造卓越的技术开放平台，咱们在晋升性能、用户体验上一直致力，咱们也在建设和欠缺小程序的各种能力，欢送大家提供贵重的倡议。