OC6大会专题报道

行业应用|其他

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

发布时间:2019-07-09  |  标签:           |  来源:知乎,作者: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);

原文链接:https://www.zhihu.com/question/333546611