游戏评测

推广

行业应用

微信小程序可实现 AR 效果，将带来哪些影响？技术实现有哪些？

发布时间：2019-07-09 17:11 | 标签： AR 微信小程序

转载来源：知乎，作者：AR潮流

微信扫一扫：分享

微信里点“发现”，扫一下
二维码便可将本文分享至朋友圈

前言

这个消息挺爆炸性的，而且是几家欢喜几家愁的感觉。之前，微信小程序做AR是这样的：一种是让用户点击拍照按钮，小程序从摄像头获取一帧图像，没有实时性。还有一种是用定时器不停地获取每帧图像，但每次拍照会发出拍照声音。

一、从技术角度看

1、增加的新内容

微信小程序增加了一个新API，CameraFrameListener CameraContext.onCameraFrame(function callback)。

这个API能实时地从摄像头获取图像数据。解决了前面中说的无法实时获取摄像头图像的问题。

示例代码：

const context = wx.createCameraContext()
const listener = context.onCameraFrame((frame) => {
console.log(frame.data instanceof ArrayBuffer, frame.width, frame.height)
})
listener.start()

2、带来的福利

因为iOS应用程序WebView组件的网页无法使用摄像头，所以iOS应用程序中的网页无法实时地获取摄像头画面，也就无法实现Web AR功能。

有个方法是：微信做Web AR的JavaScript接口，提供给网页使用，网页就能实时获取摄像头画面了。现在，微信提供了一个接口，让小程序可以实时获取摄像头画面。理论上说，网页也可以通过微信JSSDK实时获取摄像头画面，但目前没看到提供。

3、需要完善的

微信小程序此次提供的实时获取摄像头图像API是AR中非常基础的功能，离实现Web AR还有一段距离，这个距离涉及的技术既复杂又有门槛。微信官方也提到了欢迎自主AR引擎服务商合作，来解决这段距离的问题。

二、从行业角度看

1、部分厂商已支持Web AR

X5 WebAR目前已经集成在安卓版本的微信，手机QQ，手机QQ浏览器上，拥有海量的用户群体，同时兼具Web端跨平台，可移植性强的优势，开发者只需要开发一套页面，便可运行在以上的平台。——摘自《X5 WebAR 平台接入指南》

Android版本微信很早就支持Web AR了，但不对外开放，要申请开通权限。手机QQ、手机QQ浏览器、UC浏览器、百度浏览器、支付宝扫一扫、Safari、Chrome等也支持Web AR。

每家的Web AR都依赖自家的应用程序，如果没有应用程序，小程序和网页的Web AR都无法工作。

注：此次开放的微信小程序AR和X5 WebAR平台不是一个事情。

2、微信AR的优势

因为微信AR比其他家的AR都开放，不需要商务合作，不限制免费调用次数，就能用AR。

微信的用户数量多，不需要用户额外安装一个AR应用程序就能在微信中用AR，但需要用户升级微信版本。

微信生态圈中的从业者又发现了一个商业趋势——增强现实，增加了AR行业的从业者。

云平台的云服务也有图像识别、人脸识别等API，但没有实时性，每次调用API都需要请求网络。有个需求是在终端实现图像识别，这块领域叫边缘计算，微信AR可能填补这块领域。

三、从AR生态角度看

1、微信AR和Web AR

Web AR有3种形态：

第一种是扫一扫图案，显示识别结果，例如3D动画或小游戏，和扫描二维码的功能一样，但识别的稳定性没有二维码好。对图案的要求：图案平整、光线不能太强也不能太弱、有丰富的图案特征等。对操作的要求：扫描图案的全部、尽量在图案的正面扫描等。

第二种是扫一扫图案，识别结果的内容能“固定”在图案上，内容和图案叠加在一起。从这个角度看，扫描二维码是无法替代的。

第三种是扫一扫地面，识别结果的内容能“固定”在地面上。与第二种相比，不需要图案做参照物。

Web AR目前能实现第一种，第二种有实现但速度不快，第三种有非常少的实现但稳定性差。

目前看，微信AR能实现第一种和第二种。

2、微信AR和原生程序AR

原生程序AR无论从渲染、稳定性等来说，都比Web AR和微信AR强很多。原生程序的3D渲染非常精美，3D模型固定在图案和地面上极其稳定。而Web AR的3D模型不是没有真实感，就是容易飘走。

连续使用的时间短，用户可以等待的时间短，建议使用轻量型AR，比如微信AR和WebAR。

连续使用的时间长，用户可以忍受需要安装，建议使用原生程序AR。

3、一个AR程序的组成部分

一个AR程序需要4个组成部分：APP做载体，AR做运动跟踪和环境理解，3D做显示，AI做智能识别。

微信小程序把载体环节做了，在AR环节做了基础的获取摄像头图像工作，在3D和AI环节没有新内容。

文章开头说到几家欢喜几家愁，欢喜的是3D内容制造的厂商，愁的是AR技术制作和云服务的厂商。

四、后记

微信AI团队在一两年前就在研发AR引擎，在其公众号里还能搜索到演示视频，后来没有了公开消息。接着出了X5浏览器内核的Web AR引擎，现在又出了微信小程序AR。增强现实带来的生产力提高，吸引了越来越多的人

微信小程序AR除了新增实时获取摄像头图像API，还增加了Canvas的WebGL 1.0支持。canvas组件增加了type属性，该属性设置为webgl。
先获取Canvas对象，接着从Canvas对象获取webgl对象。Page({
onReady() {
const query = wx.createSelectorQuery()
query.select('#myCanvas').node().exec((res) => {
const canvas = res[0].node
const gl = canvas.getContext('webgl')
console.log(gl)
})
}
})
还新增了requestAnimationFrame方法，但只能在Canvas组件的WebGL模式中使用。function draw(){
// todo
canvas.requestAnimationFrame(draw);
}
canvas.requestAnimationFrame(draw);