當微信小程序遇到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. 圖像算法接入

 

 

 

　　

 

　　下面的教程，就將帶你們一一實現。