Day 8 學習報告

主題：研究 WebAR 框架（A-Frame、8thWall、MindAR.js、WebXR API）

一、學習目標

在第八天的進度中，我的主要目標是了解 WebAR（Web-based Augmented Reality, 網頁式擴增實境） 的基本概念，並研究目前常見的幾種框架，進一步比較它們的優缺點，最後挑選出最適合專案使用的工具。

二、WebAR 簡介

WebAR 是透過瀏覽器來實現 AR 技術的方式，不需要額外安裝應用程式，只需開啟網頁即可體驗。
它的常見應用包括：

• 利用相機掃描圖片，呈現對應的 3D 模型。

• 點擊畫面放置虛擬物件於真實場景。

• 在教育、行銷、展覽等場合增加互動性。

三、主要框架研究

1. A-Frame

• 由 Mozilla 開發，基於 HTML 語法，適合快速建立 VR/AR 場景。

• 優點：簡單易學、社群活躍。

• 缺點：進階 AR 功能有限。

2. 8thWall

• 商業級 WebAR 平台，需付費。

• 優點：功能最完整，支援平面偵測、影像辨識、手部追蹤等。

• 缺點：成本較高，學習門檻也相對提升。

3. MindAR.js

• 免費開源，專注於「影像辨識」功能。

• 優點：支援 marker-based AR，文件完整，入門容易。

• 缺點：功能不如 8thWall 全面。

4. WebXR API

• 瀏覽器原生 API，提供 VR/AR 標準。

• 優點：靈活度最高，屬於業界標準。

• 缺點：需要自行撰寫大量程式碼，難度高。

四、比較與選擇

經過比較後，對於目前的學習需求與專案方向，MindAR.js 搭配 A-Frame 最適合：

• 免費，不會增加成本。

• 支援圖片辨識（marker-based AR），符合「掃描圖片顯示物件」的需求。

• A-Frame 的 HTML 語法能簡化 3D 場景的建構。

四、學習心得

透過這次的研究，我了解了 WebAR 的基本架構以及幾種常見框架的差異。雖然 8thWall 在功能上最強大，但對於初學者與非商業用途來說，MindAR.js 是最佳的選擇。接下來，我將以 MindAR.js 為核心，搭配 A-Frame 來嘗試建立一個最簡單的 AR 範例。