When the micro-channel small process sequence encountered AR , you will wipe out how kind of spark ? We look forward with excitement ......
With this tutorial, you can start with the basics to create a micro-channel framework AR applet, all open source code, provided you learn.
Chapter One
BACKGROUND Backgournd]
With the 2018 micro-channel heavy news: support WebGL launch, so excited a lot of micro-channel developers. Especially in the small game structure, you can use the WebGL sophisticated front-end engine (eg Three.js developed a number of high-quality) micro-letter game .
The other hand, AR technology has also been transferred from the client to the front page. Can easily achieve the effect of AR in the development of language JS by H5, such as:
AR.js : based on image recognition and positioning the distal Maker AR engine, there is no limitation on the device, can be used for desktop, mobile terminal
Three.ar.js : based on the mobile terminal WebARonARKit (Andrews) and WebARonARCore front end (IOS) a. Only in support WebARonARKit and WebARonARCore run on mobile devices.
Tips :
AR: Augmented Reality acronym refers to the use of computer knowledge of iconography, let people see things in a virtual reality environment, scene by the line of reality enhancement.
Can be seen on the one hand, the majority of the AR accounts accepted this new visual interactive forms, and there is great demand; on the other hand users (users against China) do not want to install a new App and more willing to micro-letter on the platform with existing cash. If we make AR features in the micro-channel reflected on the platform, it will no doubt be an exciting and have great market value direction. Users neither need to install any App, you can easily experience the visual impact of the interaction of AR. The future is limitless .
[The current situation] State of the Art
When However, at present there are some solutions, such as micro letter, QQ, Alipay and other platforms, also launched its own AR interfaces available to business users butt, but such an interface a need Qualification, the majority of developers is not friendly , Moreover resources hosted on its platform, often have time constraints. E.g:
QQ, AR :
Also there are some third-party platform to develop applications for micro AR letter. But the problem is that the current AR effect only stay in the "identification" section, but do not follow. The final effect is that we can identify the picture and then display a three-dimensional virtual object on the phone interface, and user interaction (rotation, scaling), but the three-dimensional object can not follow the position of the identification figure.
From that we can see a few examples above, some of the problems currently existing solutions:
- Major platforms have some of their own to achieve, but the needs of business cooperation and custom development. Not friendly to the average developer.
- Already have a number of programs, the use of H5 version of the letter appears in the micro small program, but not every frame to pick up the camera to do to identify and follow the screen, but only one interception, doing identification, display of 3D objects, and not follow.
- Currently micro-channel games, does not support access to the camera, so I can not do the AR function.
因此，目前方案的效果，并不不是非常的理想，对于广大开发者而言接入并不友好。效果也并不是真正意义上的AR：只是图像识别+WebGL显示三维物体。当然，这也是有一些深层次的原因的：
- 微信在小程序中要实现AR，就需要访问摄像头。但是不同设备的访问权限（IOS，安卓）等等各有不同，微信内嵌的WebKit也需要做到更多的兼容
- 性能问题，目前的H5方案无法做到非常完美的性能体验。因为实际用的手机品牌性能各不相同，参差不齐，加上web上的OpenES性能还是较桌面端的OpenGL性能差一些。
这些问题并不是有一时半刻可以解决的，不过作为科技的前沿工作者，我们还是可以尝试各种方案，尽量实现可以实现的内容，为未来做一些基础。
【目标Targets】
上面提到，微信小游戏并不能实现AR，因为无法访问摄像头，另外H5的页面现有的方案，要么不是真正的AR效果，要么性能不好，要么各种手机的兼容性不好。所以最后的唯一出路就是尝试在微信小程序中实现AR（并不是通过WebView）。
为了能实现这样的想法，我们就需要解决几个问题：
- 实现在微信小程序中访问摄像头，并且可以实时的拿到每一帧画面的数据。
- 实现在微信小程序中访问WebGL接口，实现绘制三维物体。该教程采用Three.js引擎。
- 实现在背景为摄像头实时画面的背景上显示WebGL的3D物体。
- 实现AR相关图像学算法
下面的教程，就将带大家一一实现。