擴增實境 (AR) 揭秘:利用 ARKit 塑造 iOS 互動新體驗

原文:Augmented Reality Store on iOS – Leveraging the ARKit to build interactive store experience
中譯版:ARkit 開發實戰:蘋果提供「核彈級」工具,讓 AR 開發簡單好上手!

隨著 iPhone 8 和 iPhone X 正式上市,我們團隊忙於研究它們的最新規格,還有各種引伸問題或發展潛力。比如說我們的 QA 團隊正埋首解決導覽列在 iPhone X 上顯示失常的問題,但除了關注 iPhone 本身外,今年蘋果的其他重大宣佈也不容忽視,正如全新的 ARKit 就輕易捕捉了我們的眼球。 iPhone X 翻轉了 UX 設計的傳統方式,但對於想要踏進移動擴增實境 (mobile augmented reality / mobile AR) 領域的開發工程師來說,蘋果推出革命性的 ARKit 才是一枚震撼彈 — 開發擴增實境終於變得大眾化了。

下世代的 app 將如何應用擴增實境 (AR)?

擴增實境技術已經面世好一陣子了。當眾人對 AR 的想象就是戴著一副很酷的 Google Glass 體驗親歷其境的感受,有沒有人會想到,AR 在一部普通的手機上又可以有怎樣的發揮? 大家最熟悉的 AR 應用例子就是曾經蔚為風潮的 Pokemon Go,那除了抓寶可夢以外,AR 還可以走得多遠,創造更具深度的互動行銷或教學體驗?

我們嘗試挑戰在最小的地方應用 AR,然後我們想出了最適合進行互動和藏寶遊戲的 3D 圖案。用戶掃描 QR Code 後,就能看到一個 AR 圖案。在亞洲,掃描 QR Code 是每個人都會的簡單動作,所以很適合藉著這個大家都已熟悉的操作方式,利用科技帶給人們動態或者個人化的體驗。透過蘋果的 ARKit,我們正好可以示範給每一位 iOS 開發者看到,創造像這樣一個簡單的 AR 圖案產品不再是遙不可及。

蘋果的 ARKit 將如何改變遊戲規則?

雖然市場上已存在一些編寫 AR 移動應用程式的 frameworks,但自從蘋果推出最新的 ARKit,開發工程師不用再花時間研究如何實時追蹤和轉化現實世界中的資訊來跟數位物件互動,而是可以更專注思考想要利用 ARKit 完成什麼產品之上。

ARKit 提供了直接可以在 iOS 裝置上運行的原生 API,擺脫了以往需要結合額外的硬體、研究 frameworks、處理相容性問題等等的關卡。它讓每位 iOS 開發者都有機會去實驗 AR 並快速地製作出原型。

利用 AR 製作虛擬型錄

我們以前提到過,我們首個 AR 小專案是一個型錄,而這個型錄可以把現實中的標記轉化為一些擴增實境裡的物品。譬如我們的用戶掃描 QR Code 後,手機就可以繪製出某個地點在 100 年前的 3D 模樣;或當你到處移動 QR Code 標記時,可以在房子裡放置虛擬傢具並預覽擺設後的樣子。

你不是非得要搭配特殊裝置才可以從不同角度觀看這些 3D 物件。有了 ARKit,你只需要移動你的手機。

要讓物件視覺化,需要操作以下流程:

  • 上載 QR Code 讓 CMS 辨識
  • CMS 提供對應的 3D 物件
  • 鎖定放置圖案標記的位置,ARKit 在手機本機上呈現對應的場景
  • 在 app 內預先抓取所有圖像,這可以加快物件呈現的速度(同時在伺服器上作為備份)
  • 透過相機鏡頭檢視和辨識 QR Code
  • 當 QR Code 被辨識後,對應的 3D 物件會被下載
  • 在指定的平面上,透過 ARKit 以物件的實體尺寸繪製出 3D 物件,用戶可以在相機裡自由移動物件進行各種應用

Skygear with ARKit workflow ar

AR 不再侷限於平面的 2D 圖案。現在僅僅透過一部智能手機,真實的物件即可轉化成虛擬物件並且在擴增實境的場景裡進行互動。因為這個 app 已嵌入在商店系統裡,所以能夠輕鬆辨識新的標記還有動態式展示新的物件。譬如,當你掃描一個新的 QR Code 標記時,你就可以看見一隻立體的寶可夢。

立刻透過以下連結看看 AR App 的示範吧!
Oursky Playground Demo – 擴增實境streamable.com

如何執行 ARKit

  1. 更新 Xcode 到 Xcode 9 版本,在想要運行 ARKit 的裝置上安裝 iOS 11 以上開始進行開發。
  2. 使用 CIDector 完成掃描 QR Code 時處理圖像的工作( ARKit 本身並沒有辨識 QR Code 標記的功能)。
  3. 以 .scn 檔案格式導出 3D 物件(可以利用 Autocad 或 Blender 製作)。你並不需要更新客戶端的應用程式,只需要在商店 CMS 內更新想要展示的物件即可。
  4. 把檔案寄存在一個 CMS 系統內。這裡我們選用了我們公司自家的開源系統 Skygear CMS
  5. 當相機擷取到 QR Code 時,系統會在本機裝置存取對應的 3D 物件模型。如果沒有搜尋到匹配的物件,app 會為了提供更佳的用戶體驗而嘗試在 Skygear 後台遠端存取 3D 模型。
  6. 當搜尋到或下載了物件模型後,app 會把物件放置在 QR Code 標記的地方。

ARKit 有什麼過人之處?

mobile ARKit to zoom a coffee

ARKit 能大放異彩的原因,是因為它能夠利用鏡頭擷取真實情境的影像,並將之轉化成 3D 情境所需的資料。

在 demo 短片裡,大家可以看到當我們移動相機鏡頭的時候,物件總能定位在當下的位置。這是如何做到的呢?其實這有賴於 ARKit 裡的 「視覺慣性測距」技術(VIO, Visual Inertial Odometry),懂得辨識相機鏡頭下相同的物件,也因此自動調整你的 2D 相機角度資料的差異。(註:我們預測下一代的 Pokemon Go 應該會進化到當你到處走的時候,可以朝不同的角度觀察寶可夢。)

ARKit 同時自帶測光功能,意味著被繪製的 3D 物件將能呈現現實環境的光源變化(例如真實的反光、影子效果)而更加逼真。

我們正熱切期盼並持續實驗 AR 技術的各種可能性。我們將會繼續和大家分享我們在進行的 AR 專案,讓廣大的開發者可以一起創造更多和現實世界互動的行銷活動、娛樂、遊戲和教育軟體。


如果你有想要利用 AR 製作的點子,歡迎告訴我們喔!

Leave a Reply