WEB AR運用
探討WEB AR的運用與技術｜天矽網頁設計
| 目錄 ➤WEB AR如何操作 ➤圖像辨識 vs GPS辨識 ➤虛擬物件呈現效果 ➤WEB AR運用技術 ➤相關案例 |
數位轉型時代，許多企業開始以新興技術提升使用者體驗。為產生良好的用戶感受，WEB AR已成為許多企業新的行銷模式，除了可賦予品牌新的價值，更可以提供有別以往的多元化服務，使用者無需下載任何APP或應用程式，透過網頁便可進行AR體驗，使用方便。不過，WEB AR結合網頁前端技術，能達到的功能有限。本篇文章主要介紹WEB AR運用、限制及開發工具有哪些。
WEB AR如何操作
以瀏覽器開啟網頁即可體驗AR，因此稱“WEB AR“。主要分兩種不同方式進行AR觸發，一種為「圖像辨識」，透過手機相機鏡頭，對著指定圖像掃描，即可直接開啟網頁並體驗WEB AR，大多應用於室內或展場；另一種為「GPS辨識」，使用者只要到達指定區域，手機畫面會自動顯示WEB AR內容，無需掃描任何圖像，大多應用於戶外。
圖像辨識 vs GPS辨識
圖像辨識指：掃描「圖像」，便能開始體驗WEB AR內容。顏色對比較高的圖像，辨識效果較好。EX：以展場而言，通常有不同畫作的展示，每幅畫作就能當成是一個「圖像辨識」，當手機相機鏡頭對著畫作掃描，即會呈現對應該畫作的WEBAR介紹或互動內容。
▲圖像辨識：顏色對比低&顏色對比高
GPS辨識指：無須掃描任何圖像，以使用者GPS定位做AR觸發。只要抵達特定位置，手機畫面會自動顯示WEB AR內容。戶外較不會有明顯圖像辨識圖片，因此若需於戶外體驗WEB AR，大多會使用GPS辨識。
備註：進行GPS觸發之前，仍需透過瀏覽器開啟WEB AR網頁、並允許相機、GPS使用權。
▲GPS辨識：無需掃描任何圖像。
虛擬物件呈現效果
2D or 3D虛擬物件
WEB AR是瀏覽器開啟網頁，進行AR體驗(Augmented Reality)，藉由「虛+實」整合，讓使用者彷彿置身於其中。製作虛擬物件時，WEB AR可以呈現之視覺效果，大多以2D呈現，放置過多3D物件，會影響網頁載入速度。倘若真的需置入3D物件，通常以1~2個為限，且3D面數不能太高。如以下示意圖所示。
▲WEB AR可呈現效果 ( 2D ) ▲3D物件以1~2個為限
WEB AR的互動操作
進行WEB AR體驗，常有需完成的AR操作，除了太多3Ｄ物件會影響網頁載入速度，也不建議於網頁進行複雜度高的操作。例如：在網頁進行狩獵遊戲，因遊戲會轉換不同裝備，需有龐大圖像處理器或高等級渲染。那麼，網頁型WEB AR可以達到的互動操作有哪些呢？
(1)「點擊」功能：透過手機點擊畫面中的虛擬角色，進而與角色互動。
(2)「拖曳」功能：透過手機拖曳畫面中的角色或物件，進行AR互動。例如：拖曳畫面中的虛擬動物收集不同寶物。
(3)「放大或縮小」功能：運用手勢放大、縮小或旋轉功能，瀏覽畫面中虛擬物件的不同方向或角度。
▲WEB AR可以做的互動操作
WEB AR運用技術
WEB AR可應用Android、IOS、Windows、Ｍac，無需安裝任何應用程式，能短時間透過網站分享方式，讓使用者不受環境因素，能快速體驗，大大提升企業或品牌新價值。結合網頁設計前端技術，以下為開發WEB AR常使用的技術語言。
(1)JavaScript：開發WEB AR常使用的編輯程式，主要用於開發前端介面。
(2)HTML / CSS：定義WEB AR的程式結構、設計動畫效果或樣式。
(3)WebGL：可在瀏覽器中渲染2D圖形或3D物件。
(4)Three.js：用於建立或顯示3D物件，可支援比較高等級的3D渲染，可與WebGL共用。
(5)AR.js：瀏覽器進行AR擴增實境的技術語言，可觸發「圖像辨識」或「GPS辨識」，進而顯示WEB AR內容。
相關案例
安寶角鋼
透過網站崁入AR功能，可即時觀看產品各角度的樣子，以下為簡易說明圖。
▲對著產品左右移動，可看到產品各角度
▲對著層板上下拖曳，可改變層板位置。
▲如需以手機觀看產品AR，可將手機掃描QR Code
