準備 Google I/O 大會時，我們想回顧一下網頁版擴增實境 (AR) 帶來的各種可能性。Chacmool 是一個教育網頁體驗示範，我們建立的用意是示範網頁式 AR 如何輕鬆協助使用者參與 AR 體驗。網路讓 AR 變得更便捷，方便你隨時隨地使用。
在搭載 Android O 以上版本且與 ARCore 相容的 Android 裝置上，Chrome Canary 現已啟用這項示範。您也需要安裝 ARCore。這項工作仰賴新的 WebXR 提案 (WebXR Hit Test API)，因此該提案位於標記下，在我們與 Immersive Web Community Group 的其他成員一起測試和修正新的 API 提案時，該提案位於標記之下。如要進行示範，您必須在 chrome://flags:
#webxr 和 #webxr-hit-test 中啟用兩個標記。啟用這兩者並重新啟動 Canary 之後，即可查看 Chacmool 示範。
Chacmool AR 體驗以教育為中心，利用 AR 帶來沉浸式互動式自然體驗，協助使用者瞭解古老的 Chacmool 雕塑。使用者可以將生活大小的雕像放在自己的實境中，然後在不同角度和距離任意移動，查看這類雕塑。AR 具有沉浸式性質，可讓使用者像在真實世界中一樣自由探索、探索和暢玩內容。透過 AR 查看物件時，與使用平坦 2D 螢幕查看物件的情況不同，我們能透過非常直覺的互動模型，從各種角度和距離觀察物件，藉此深入瞭解眼前的事物：站在物體周圍、靠近或遠離物體。此外，在這個體驗中，系統會在雕塑上直接放置註解。如此一來，使用者就能直接連結文字描述的內容，以及雕塑上的這些特徵。
這項示範大約花費一個月的時間建構而成，並運用 WebXR 團隊第一項網頁式 AR 示範 WebAR-Article 的一些元件。雕像相關資訊的來源為 Google 藝術與文化頁面，3D 模型則是由 Google 藝術與文化的合作夥伴 CyArk 提供。為了在網路中使用 3D 模型，我們結合了網格實驗室和網格混合器的組合來修復模型，並藉由網格來強化其網格來縮減檔案大小。Draco 則是用於壓縮及解壓縮 3D 幾何圖形網格和點雲的程式庫，用於將模型的檔案大小從 44.3 MB 縮減到 225 KB。最後，網路工作站的用途是在背景執行緒上載入模型，讓在載入及解壓縮模型時，網頁仍可保持互動，這通常會造成資源浪費，並導致頁面無法捲動。
我們不僅是透過電腦進行開發，也部署至手機，因此使用 Chrome 的遠端偵錯工具來檢查體驗，可在程式碼變更之間快速疊代。此外，Chrome 提供出色的開發人員工具，可用於偵錯和檢查效能。
AR/VR 體驗的最佳做法
針對原生 AR 體驗進行設計時，大部分的設計和工程指南都適用於打造網頁式 AR 體驗。如要進一步瞭解一般最佳做法，請參閱近期發布的 AR 設計指南。
請特別注意，設計網頁式 AR 體驗時，最好在使用 AR 時採用整個螢幕 (例如，就像影片播放器在行動裝置上使用全螢幕一樣)，採用整個螢幕。這樣可以防止使用者捲動畫面 或因網頁上的其他元素而分心進入 AR 畫面應流暢順暢，在進入 AR 新手上路流程前 (例如繪製佈道) 前，可以看到攝影機檢視畫面。關於網頁式 AR 的重要注意事項，與原生技術不同，開發人員目前還無法存取相機影格、亮度測量、錨點或平面，因此設計人員和開發人員在設計網頁式 AR 體驗時，必須謹記這些限制。
此外，由於網頁體驗所用的裝置五花八門，因此效能必須最佳化，才能提供最佳的使用者體驗。因此：請盡量減少多邊形數量、盡量少用光源、盡可能預先運算陰影，並盡量減少繪製呼叫。在 AR 中顯示文字時，請使用新型 (即已簽署距離欄位) 的文字轉譯技術，確保文字從任何距離與角度都清晰可讀。取代註解時，請將使用者的視線視為另一項輸入內容，且只在相關性時才顯示註解 (例如在使用者關注某個地點時顯示的鄰近性註解)。
最後，由於這些內容是網頁式，因此同樣應針對網頁應用一般的最佳做法。確保網站在各種裝置 (電腦、平板電腦、行動裝置、耳機等) 上都能提供良好的體驗，支援漸進式強化功能，也就是針對不支援 AR 的裝置進行設計 (也就是在非 AR 裝置上顯示 3D 模型檢視器)。
如果您有興趣開發自己的網頁式 AR 體驗，可以參考我們撰寫的夥伴文章，進一步瞭解如何自行開始在網路上建構 AR。(您也可以查看 Chacmool 示範的來源)。WebXR Device API 目前正積極開發中，我們希望提供意見回饋，協助我們啟用所有類型的應用程式和用途，因此請前往 GitHub 加入對話！