本篇文章紀錄我根據TechBridge 技術共筆部落格製作webAR的過程與碰到的難處。
AR.js介紹
AR.js是一款融合了 artoolkit、three.js、ＷebGL 和 WebRTC 等技術的工具。
先說優點:
AR.js 使用了 A-Frame (基於 Three.js) 以及 JSARTookit5，而這兩個技術主要皆是利用 WebGL 為主，因此大多現行的瀏覽器都能直接支援，不需要特殊的 API。這大概也是為何 AR.js 能在 GitHub 上擁有一萬多顆星星，遠勝過上列其他套件的原因。
缺點:
AR.js雖然快速好用，但也不是萬能的目前只能支援以Marker定位的方式運行webAR，即是需要在鏡頭內放置一個設定好的 Marker圖片讓其辨識。如果想要以偵測平面或其他非Mark的方式運行webAR就必須研究WebXR Device API。
應用AR.js
首先，AR.js有提供了一個專門製作Marker的工具AR.js Marker Training，在這個網頁可以製作自己想要的Marker圖片，製作完成後點選Download Marker會給你一個副檔名為patt的Marker。
接下來準備想要呈現的3D模型，可以到 Poly 或是 sketchfab 下載 gltf 格式的 3D 模型。
最後，進入AR.js的程式部分，Coding部分很簡單，只有幾行的html:
最先的兩段先匯入Libraries:
<script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.7.5/aframe/build/aframe-ar.js"></script>在 <a-scene /> 中，我們指定一個 attribute arjs，並且設定 sourceType 為 webcam，相關 attribute 設定其實來自 artoolkit system，有需要可以到 GitHub 的列表查看。
接著我們透過 <a-marker /> 放入我們製作的 marker，副檔名為 .patt，這邊的 type attribute，如果你是單純用 barcode 的話，可以設為 type=barcode，但若是客製化的 marker，就要設為 type=pattern
最後在 <a-entity /> 上頭設定我們想要呈現的 AR 3D Model，gltf-model attribute 設定模型的路徑，再透過 position 與 rotation 來調整你的模型出現在鏡頭的位置。
資料來源:https://z0935323866.medium.com/%E5%88%A9%E7%94%A8ar-js%E8%A3%BD%E4%BD%9Cwebar-3479abb5f62b
Example
https://sharebyboss.github.io/test_arjs/
沒有留言:
張貼留言