幻想一下我們坐時光機回到十年前。在這個年代，想要在一兩天內做出一個擴增實境 (AR) 的 demo，不可能只靠手中的智能手機去完成。
到了今天，我們已經可以利用網頁 AR 輕鬆做出 iOS 和 Android 的版本。使用者只要下載我們的客制化網頁瀏覽器，就能體驗我們使用 Google 開源程式 AR on the Web（支援 Android 生態 的 ARCore 和 iOS 系統的 ARKit）創造的跨平台 AR 體驗。為了讓大家快速了解 ARKit 和 ARCore 的功能，我們在下面會示範如何利用上述工具快速完成一個聖誕節主題 demo。
*備註：目前網頁瀏覽器還沒有原生支援跟 ARKit 或 ARCore 之間的橋接，但我們安裝了一個客制化瀏覽器來橋接 Javascript 來解決這個問題。
ARKit 和 ARCore 為 App Developer 開啓的一扇門
上面的影片是 Google 為 Android 用戶示範他們在未來能透過他們的智能手機觀看的畫面。一直以來，遊戲開發者可以利用功能強大的 Unreal 或 Unity 遊戲引擎來開發 AR 體驗，可是對於同樣想要開發 AR 體驗的網頁開發者來說，可以選擇的類似工具卻乏善足陳。就算是資源相對比較豐富的 app developer 也需要把程式庫或客制化元件先組合，才能為智能手機開發擁有 AR 功能的 app。
2017 年由 Apple 推出的 ARKit 或由 Google 推出的 ARCore 徹底扭轉了這個局面。之前獨立存在的幾個 AR 重要功能都被框架打包好了， 有利開發者針對智能手機創造更多 mobile app 上的互動體驗：
- 追蹤動作
- 測量環境光源
- 掌握環境
🍲 Here we go! 🍣 ARKIT EATS (the world). Been a great run though, restaurant menu print business! https://t.co/M0RspS92LZ 😊 pic.twitter.com/VFRlqN6YSV
— Made With ARKit (@madewithARKit) June 30, 2017
We're bringing high-quality augmented reality to millions of Android phones with #ARCore → https://t.co/x5isGAIHxP pic.twitter.com/xSmrVZr0jK
— Google (@Google) August 29, 2017
簡單來說，這些功能協助開發者在創造 AR 內容的時候，可以透過智能手機的攝像鏡頭檢視真實世界當下，追蹤環境中的資訊，並放置立體物件和動畫在與真實世界對應的前景中。
Apple 和 Google 的 AR 程式庫雖然可以輕易地跟遊戲引擎或其他資料庫整合，可惜還不適用於所有行動裝置。ARKit 可以與 Metal 和 SceneKit 配合使用，但只有搭載 Apple A9 處理器以上的 iPad 和 iPhone 型號才支援 ARKit。而在筆者撰寫這篇文章的同時，ARCore 的測試版本只限定在 Pixel 和 Samsung S8 上運行。
AR 領域的十年磨一劍
上文提到，擴增實境依靠幾個主要元素：利用相機捕捉環境中的資訊、攝像鏡頭的視訊裡追蹤物件動態、一些可以跟鏡頭裡顯示環境互動的 3D 物件、還有呈現虛擬跟真實世界結合後的影像。
回溯到 2007 年，以上四個元素通常是獨立存在的，既增加了開發全功能 AR 應用程式的技術性難度，也需要開發者熟悉如何運用每一個元素。而當時，甚至連硬體也還沒足夠支援互動體驗。第一代 iPhone 才剛面世，意味著大多數人能使用的攝像鏡頭只有安裝在桌機上的網路攝影機。想想也知道，那不是一個可以輕易移動或者與之互動的裝置。
一躍十年，我們來到了行動優先 (mobile-first) 的世代 — 一個可以從一系列開源 AR 相關資料庫裡挑選使用的年代。拍攝和呈現在行動體驗上得以完整地實現。時至今日，用戶已經可以透過觸控手機屏幕，跟行動介面的攝像鏡頭裡看到的影像直接進行互動，創造一個流暢無阻的體驗。
要留意的是，ARKit 和 ARCore 的誕生是為了創造原生的行動體驗，尚未能夠用於直接開發網頁。在製作 demo 專案或 prototype 的時候，開發者都需要建立 iOS 和 Android 的版本。但是，利用關鍵性的網頁 AR，我們就可以為用戶創造一個當他使用任何智能手機的網頁瀏覽器都可以進行的 AR 體驗過程。
迷你專案範例 – 如何在網頁上應用 AR
什麼是網頁使用的 AR (AR for web)？說得淺白一點，就是 AR 的變種使用方式，讓用戶可以在網頁瀏覽器上體驗擴增實境。我們團隊使用的工具是 Google 開發的 three.ar.js，它可以追蹤和呈現 3D 物件。從下圖中你可以看到一個用戶在進行 AR 體驗時，背後隱藏的多個層次。
在原生層次上，ARKit 和 ARCore 幫助開發者在開發 AR 體驗時完成多個重要的步驟，像是 AR 標籤、追蹤平面、追蹤座標位置、追蹤臉部、追蹤顏色、追蹤物件還有追蹤環境光源等等。這奠定了處理環境中所需資料時的基礎，有利開發者可以專心研究如何與 3D 物件進行互動。
過去藝術家和 3D 動畫工作者的工作主軸是創造立體物件，然而現在精實團隊 (lean teams) 已經可以利用 Google 的 Poly project 來取得範本物件並加以客制化。抱著一絲惡搞的趣味，我們使用了 Adobe Fuse CC 去把一個舞者範本轉換成 Oursky 的執行長 Ben（笑）。
當創建了 3D 物件後，我們需要在指定場景載入我們想要的物件。此時，我們需要提供一個平面讓「跳舞的執行長」可以在上面分享他的舞步。有了網頁 AR 以後，想要在某個指定種類的配對平面上展示物件就可以簡化成像下圖中那樣一行非常簡潔的編碼：
網頁 AR 讓我們可以專注修改 3D 物件範本和選擇哪裡最適合讓執行長表演他的舞蹈，而不是把時間花在像微調追蹤動態的準確度這種重要但極為耗時的細節之上。最後，完成的作品 “Christmas dancing Ben“（謝謝執行長大方與眾同樂！）成功在一台相容的手機（例如 iPhone X）上透過我們客制化的瀏覽器呈現。
AR 的強大發展潛力
對於物件和資訊能跟我們的智能手機上相機擷取到的和屏幕上顯示的視像能進行怎樣的互動，擴增實境具有無限的發展潛力。AR 引伸的商機隨著日新月異的智能手機處理器、相機規格還有開源開發工具才剛剛開始被發掘。譬如，品牌可以擺脫固定銷售點的限制，更積極地跟客人進行更多面向的互動，像是提供協助客人選購的產品預覽、資訊性工具或導覽，或者是娛樂相關的體驗。還想知道更多實際應用例子嗎？來看看下面這個 iOS 11 快速介紹影片：
下面再舉幾個例子供大家參考：
- 視像聊天或訊息中使用的互動貼圖，例如 Snapchat、Instagram、Google Hangouts 等
- 在一個空間內預覽物件，例如 Ikea Place
- 以維護為目的的模擬場景，例如 Hyundai 的虛擬指南讓用戶可以按照所示標籤了解汽車的組件方便自己進行簡單維護；或者在路面以下跟路上的基建進行配對等功能
- 日常生活的實用小工具，例如測量捲尺
- 任何種類的訓練模擬，小型至烹飪，大型至飛航管制都適用
- 醫學性的應用，例如在一位病人的頭上建立一個 3D 的大腦影像方便進行手術
- 觀光或導覽，例如 Strava 的 Fitness AR，或互動性強的城市導覽和旅遊應用程式
- 互動式廣告，例如 Layar 結合了用戶所在地點提供綜合資訊
- 互動式遊戲體驗，例如 Pokemon Go
在跨平台製作 prototype 和開發 MVP 時，網頁 AR 作為測試產品或專案的工具非常好用。我們現在的 demo 目前還需要一個客制化瀏覽器才能呈現，但我們預計在一兩年內，網頁 AR 將會以讓人驚豔的速度發展，到時候，當你分享你的 prototype 時就像發送一條連結到你的網頁 app 一樣簡單。 如果你對 AR app 需要多一點腦力激盪，歡迎閱讀我們另一篇有關 AR 的文章：擴增實境 (AR) 揭秘：利用 ARKit 塑造 iOS 互動新體驗。
如果你喜歡這篇文章，歡迎追蹤 Oursky 的 Medium 帳號獲得更多有關新創 / 企業家創業 / 專案管理 / app 開發 / 設計發想有關的消息！
Oursky 致力幫助品牌與企業家實現他們的點子。如果你正在尋找合作夥伴一起建立下一個自家數碼產品，來跟我們聊聊吧！
原文：AR for Web to speed up cross-platform mobile MVP development
作者：David Ng
翻譯者：Queenie So
