- AR/VR開發
-
寫之前說幾句，以下示例和參考都是github上的開源作品，小編只是分享在使用過程中的踩坑和開發心得。本文適用于小白，由于例子中可能需要使用到shell命令，小編的電腦操作系統是windows 7，如果是mac請自行轉換為對應的命令行。
AR技術（增強現實技術Augmented Reality，簡稱 AR），AR技術在Native中已經興起了，并且市場上有許多成功的APP，但是對于JavaScript怎么來玩轉AR呢？下面我來簡單的給大家演示兩個不同版本，不同場景的AR小例子。
1.首先需要先到github上搜索ar.js,如下圖，有2.8K star的就是了。
目錄結構如下，大家可以download zip,或者git clone下來
咱們的例子主要在這個開源庫上更改，它的一級目錄，aframe data three.js webvr-polyfill,一看就很清晰了，今天咱們單刀直入，只看three.js部分，當然也要依賴于data目錄里的數據。
事先準備，為了以后的靈活擴展，建議大家下載一份最新的three.js源碼,里面有完整的例子和源碼可以借鑒。
把項目download下來以后，需要部署到web服務器上，然后運行一下里面的例子，下面我以dev.html舉例。目錄結構如下：
這個頁面比較簡潔，不到300行的代碼，咱們需要關注兩塊內容，就可以完成對這個頁面例子的改動。
這幾行代碼什么意思呢，就是一個匹配的規則，匹配的文件是data目錄中的Market標識，說白了就是用讓攝像頭識別這個標記，官方示例給的標記是patt.hiro,這個標記的來源圖片對應著data目錄中的images/hiro.png 這張圖，怎么用這張圖來生成patt.hiro這個標記呢，這時我們需要使用一個SDK工具，微小輕量級的，大家別擔心是很重的安裝包。這個工具叫artoolkit,就是AR工具箱，進入官網以后點download下載，我選擇的是這個
安裝完成以后，進入到D:\Program Files (x86)\ARToolKit5\bin 目錄下，接下來我們就要自定義一個標記了，這里的標記是傳統的長方形標記，第一代market，稍后會增加自然圖片的market，這里第一代market我是用div畫的，具體的效果如下：
最外層的邊框 最好為黑白色，這個是官方的文檔上建議的 參考鏈接market,然后呢把這個效果截圖保存到我們剛才下載的SDK D:\Program Files (x86)\ARToolKit5\bin\image下，沒有image目錄就新建一個，用cmd到D:\Program Files (x86)\ARToolKit5\bin目錄,運行mk_patt.exe
會彈出相機的配置選項，默認的確定就行，然后相機啟動以后，把我們剛才生成的圖片，對準相機然后相機識別以后會出現紅綠色邊框線，并且出現左上角識別的文字，這時請注意文字的方向是否正確。
然后點擊鼠標左鍵，回到命令行，輸入文件名稱patt.td，然后再當前的Bin目錄下找到該文件
回到AR.js-master項目中，打開data/multi/目錄把剛生成的標識文件放進去，接下來回到three.js/examples/dev.html中，在chrome中打開該頁面，這里有個坑，如果是外網想訪問攝像機，必須走https協議，下面是我web服務的url地址:
https://127.0.0.1:18080/AR.js-master/three.js/examples/dev.html
效果如下：
這里聲明必須使用兩臺設備，我的電腦打開我開發的網頁，手機上保存的是我們剛才生成的market！也可以使用兩臺手機，最好是比較新的android機器，支持webrtc的設備
接下來如果例子運行成功以后，大家會發現我的3D模型和官方的例子并不一致，模型怎么替換呢，這就涉及到前面我說的第二處注意的地方，替換模型，并不需要改大量的源碼，只需要注釋掉一小部分就行。
我注釋掉的部分是官方的模型運行的代碼。上面部分則是three.js中的源碼，我這是在紅框的地方更改一下模型的定位。我這個模型大家可以直接參考three.js源碼中three.js-r82\examples\webgl_loader_collada.html 這個html文件，可以直接運行的例子，將如下代碼替換掉dev.html中我注釋的部分即可，具體請參考截圖，并不是完全替換。
var loader = new THREE.ColladaLoader();loader.options.convertUpAxis = true;loader.load( './models/collada/monster/monster.dae', function ( collada ) {dae = collada.scene;dae.traverse( function ( child ) {if ( child instanceof THREE.SkinnedMesh ) {var animation = new THREE.Animation( child, child.geometry.animation );animation.play();}});dae.scale.x = dae.scale.y = dae.scale.z = 0.002;dae.updateMatrix();init();animate();});還需要引入依賴的js文件,只需要把這幾個文件增加到AR.js-master項目中即可，three.js已經有了，余下的拷過去就行。
最后一個自定義標識的ar h5小程序就生成了，大家可以替換自己想用的3D模型，也可以條形碼生成market，也可以將標識打印到A4紙上，用手機打開url掉出照相機，對著該market一掃，就出現了增強現實的模型，很贊吧！
接下來說說自然圖片的標識怎么生成:
先使用SDK工具進入到D:\Program Files (x86)\ARToolKit5\bin目錄,我在這新建一個image文件夾，里面拷了一張.jpg的圖片,然后用命令行打開這級目錄：
直接enter 使用默認值,到這一步需要輸入分辨率
默認是220，然后再輸入一個區間，按照提示輸入6和220
然后就會采集圖片的坐標點
收集完成以后會生成如下文件
我們將生成的NTF文件拷入到AR.js-master項目中data/dataNTF中，我這里新建了一個目錄叫dayan的文件夾，并將文件粘貼進去，標識生成以后需要做測試了，怎么測試呢，找到如圖的nft_threejs.html,這是官方用來測試自然圖片的demo.
找到加載標識的地方，這里需要替換一下路徑，官方的路徑在web服務上會有問題
這里需要注釋一下這個function回調里的代碼，
替換成如下代碼:
var markerRoot = arController.createThreeNFTMarker(markerId);var loader = new THREE.ColladaLoader();loader.options.convertUpAxis = true;loader.load(location_path+ 'three.js/examples/models/dae/monster.dae', function (collada) {dae = collada.scene;dae.traverse( function (child) {if (child instanceof THREE.SkinnedMesh) {var animation = new THREE.Animation( child, child.geometry.animation );animation.play();}});dae.position.z = 40;dae.position.x = 80;dae.position.y = 80;dae.rotation.set( 0,Math.PI/2,Math.PI/2);dae.updateMatrix();markerRoot.add( dae );arScene.scene.add(markerRoot);});最后代碼如下圖，
然后我們來跑一下我們的自然圖片例子。效果如下
如果大家需要調整模型的位置和角度，請更改position和rotation的值，涉及到一定的數學原理，不會的自己調調找感覺。
最后把我制作的market圖片貼一下
參考文檔：
Creating and Training Traditional Template Square Markers
Training ARToolKit Natural Feature Tracking (NFT) to Recognize and Track an Image
NFT Utilities for ARToolKitdemo list:
github源碼：
dragonHu/ar_test_demo
都是國外的網站，打開可能比較慢，然后大家閱讀英文文檔吃力的，可以使用google翻譯 翻譯一下，我這只是在AR.js上初步研究了一下，并沒有深入，希望大家多提意見交流，我也實現了播放視頻的例子，大家可以參考demo列表中的例子，我就不貼代碼了。為了精準的展示例子，請大家把攝像頭對準Market
目前H5 AR還是有很多壁壘和坑的，文檔也相對較少，涉及的面比較多，設備性能也是問題，但是對于新技術的探索還是很有趣的，希望我這篇文章能幫到一些開發人員。