当微信小程序遇到AR（一）

当微信小程序遇到AR，会擦出怎么样的火花？期待与激动......

经过该教程，能够从基础开始打造一个微信小程序的AR框架，全部代码开源，提供你们学习。

本课程须要必定的基础：微信开发者工具，JavaScript，Html，Css

第一章：初遇

---

【背景 Backgournd】

 　　随着2018年微信的重磅消息：支持WebGL的推出，让很多微信开发者的兴奋不已。尤为是在微小游戏架构下，能够利用成熟的WebGL的前端引擎（例如Three.js）开发出许多高质量的微信小游戏。

　　另一方面，AR技术也不断的从客户端向前端页面转移。经过H5能够很容易的在JS的开发语言中实现AR的效果，好比:

　　　　AR.js：基于Maker的图像识别与定位的前端AR引擎，对设备没有限制，能够用于桌面端，移动端

　　　　Three.ar.js：基于移动端 WebARonARKit（安卓）和 WebARonARCore（IOS）的前端。只能在支持WebARonARKit和WebARonARCore的移动设备上运行。

　

 小知识：

　　AR：Augmented Reality的缩写，是指利用计算机图像学的知识，让人们在现实的环境中看到虚拟的事物，对现实的场景经行加强。

　　可以看出一方面，广大的户口接受了AR这种新的视觉互动形式，而且有很大的需求；另外一方面用户（针对中国的用户）又不但愿安装新的App而更愿意在微信的平台上现取现用。若是能让AR的特色在微信的平台上体现出来，那么无疑会是一个使人激动且有很大市场价值的方向。用户既不须要安装任何App，又能够很容易的体验AR的视觉交互冲击。将来不可限量。

 

【目前状况 State of the Art】

　　当然，目前也存在一些解决方案，例如微信，QQ，支付宝等平台，也推出了本身的AR接口，提供给企业用户对接，可是这样的接口一者须要企业资质，对广大开发者并不友好，再者资源也托管在其平台上，每每有时间的限制。例如：

 　　QQ 的 AR：

　　

　　也有一些第三方的平台，为微信开发AR的应用。可是存在的问题是，目前的AR效果只停留在“识别”部分，却没有作跟随。最后的效果就是能够识别到图片而后在手机界面上显示一个三维的虚拟物体，能够和用户交互（旋转，缩放），可是这个三维物体不能跟随这个识别图的位置。

　　从上面的几个例子咱们能够看到，目前的解决方案中存在的一些问题：

1. 各大平台有一些本身的实现，不过须要商务合做，定制开发。对普通开发者并不友好。
2. 已经有的一些方案，采用H5的版本，在微信小程序中出现，可是并非每一帧都去拿摄像头画面去作识别和跟随，而是只截取一帧，作识别，展现3D物体，并不作跟随。
3. 目前微信小游戏，并不支持访问摄像头，因此没法作AR的功能。

 　　因此，目前方案的效果，并不不是很是的理想，对于广大开发者而言接入并不友好。效果也并非真正意义上的AR：只是图像识别+WebGL显示三维物体。固然，这也是有一些深层次的缘由的：

1. 微信在小程序中要实现AR，就须要访问摄像头。可是不一样设备的访问权限（IOS，安卓）等等各有不一样，微信内嵌的WebKit也须要作到更多的兼容
2. 性能问题，目前的H5方案没法作到很是完美的性能体验。由于实际用的手机品牌性能各不相同，良莠不齐，加上web上的OpenES性能仍是较桌面端的OpenGL性能差一些。

　　这些问题并非有一时半刻能够解决的，不过做为科技的前沿工做者，咱们仍是能够尝试各类方案，尽可能实现能够实现的内容，为将来作一些基础。

 

【目标Targets】

　　上面提到，微信小游戏并不能实现AR，由于没法访问摄像头，另外H5的页面现有的方案，要么不是真正的AR效果，要么性能很差，要么各类手机的兼容性很差。因此最后的惟一出路就是尝试在微信小程序中实现AR（并非经过WebView）。

　　为了能实现这样的想法，咱们就须要解决几个问题：

1. 实如今微信小程序中访问摄像头，而且能够实时的拿到每一帧画面的数据。

2. 实如今微信小程序中访问WebGL接口，实现绘制三维物体。该教程采用Three.js引擎

3. 实如今背景为摄像头实时画面的背景上显示WebGL的3D物体。

4. 总体框架搭建

5. 图像算法接入

 

 

 

　　

 

　　下面的教程，就将带你们一一实现。