关于 Web AR的入门

关于 Web AR的入门

前言
近年 VR/AR 一直不斷出現在大家的視線內，雖然一直沒有什麼殺手級的應用出現，但這阻止不了開發者們的雄心壯志，尤其是 JavaScript 社群，畢竟 Jeff Atwood 說過：

“Any application that can be written in JavaScript, will eventually be written in JavaScript.”
— Jeff Atwood, Author, Entrepreneur, Cofounder of StackOverflow

隨著 a-frame 的出現，WebVR 成為現實，並且很容易開發；Web AR 部分進展則相對緩慢ㄧ些，瀏覽器原生支援的 API 還一直處於不穩定的開發階段，但即便如此，我們還是可以在特定版本的瀏覽器上使用，此外，也有像是 AR.js 這樣融合 artoolkit、three.js、ＷebGL 和 WebRTC 等技術的工具可以使用。

今天就來稍稍研究一下，看看目前的技術能如何開發 Web AR！

照慣例，開始前先看點 demo，把 Pokemon 帶到你家客厅：

目前的工具有哪些
CreateＷebVR 這網站上列出了一些目前有的 library，以及目前支援 WebAR 的瀏覽器：

图片

其中 AR.js 使用了 A-Frame (基於 Three.js) 以及 JSARTookit5（JavaScript 移植版的 ARToolKit），而這兩個技術主要皆是利用 WebGL 為主，因此大多現行的瀏覽器都能直接支援，不需要特殊的 API。

這大概也是為何 AR.js 能在 GitHub 上擁有一萬多顆星星，遠勝過上列其他套件的原因。再加上作者的實驗證明 AR.js 即便在兩年的老舊手機上也能運行順暢，擁有良好的 Performance。

但 AR.js 也並非沒有缺點，由於是基於 ARToolKit，因此只能夠支援 Marker-based 的 AR 效果，也就是像最前面的 Demo 圖片一樣，是需要在鏡頭內放置一個設定好的 Marker，讓其辨識，取得環境的一些 Sensor 資訊，包含鏡頭的深淺遠近等等，才能讓 AR 物件渲染在視窗中。

即便如此，AR.js 其簡潔、便利的使用方式（有 a-frame 與 threejs 的 extension），能讓你用短短 10 行程式碼就產生出一個 WebAR 效果的網頁，還是非常好用的。