ARKit 教學:如何搭配SceneKit來建立一個簡單的ARKit Demo


擴增實境(Argument Reality)來囉!記得寶可夢(Pokemon Go)嗎?它當然也是擴增實境的代表之一!Apple終於在iOS11將擴增實境帶進來,也因為iOS11,未來將會有數不清的iPhones和iPads就會搭載AR功能,這將會讓 ARKit成為世界最大的平台,是的,如果你對建置擴增實境的Apps有興趣,讓你就來對地方了。

目標

本教學主要會開發一個ARkit Demo App,並應用SceneKit來協助你熟悉基礎的ARKit。

是時候讓你開始沉浸在本篇教學內,並讓你了解如何一步一步建構出ARKit App,且透過你手上的裝置與AR世界互動。

本篇教學的想法主要是學習AR與利用API來建置一個APP,藉由教學的步驟,你將會一步步了解ARKit在實體裝置上是如何與神奇的3D物件來互動的。

在開始前,請了解本篇教學僅是以基礎功能應用為主。

你需要準備的

進入本篇教學前,建議你已有對iOS的基礎開發的能力,這屬於中階程度的教學,並且,我們將需要Xcode9以上的版本。

為了測試你的ARKit App,你得需要一個可兼容Apple的ARkit的裝置,建議有Apple A9處理器以上等級的裝置。

現在請確認你已具備上述需求,並準備開始進行,以下是我將會帶你走過:

  • 建立一個新的ARKit apps專案
  • 設定ARKit SceneKit View
  • 將ARSCNView與View Controller結合
  • 連接IBOutlet
  • 設定ARSCNView Session
  • 允許相機使用權限
  • 將3D物件加到ARSCNView
  • 加入手勢判斷功能到ARSCNView
  • 從ARSCNView移除物件
  • 加入多樣物件到ARSCNView

建立一個新的ARKit apps專案

再來,打開Xcode,在Xcode的菜單中,選擇File > New > Project… ,然後選擇Single View App並按下next,其實Xcode也有內鍵ARKit的範例App,但你仍可以使用Single View App來開發AR app。

arkit-1

你可以自行命名你想要的專案名稱,我是命名為ARKitDemo,再按下next來完成新的專案。

設定ARKit SceneKit View

現在請打開Storyboard,請在右下角的Object Library找到ARKit SceneKit View,將它拖拉至你的View Controller。

然後將你的ARKit SceneKit View的尺寸拉滿整個View Controller,它應該會呈現如下方:

讚喔!這樣的話,ARKit SceneKit View就是我們要呈現擴增實境的SceneKit內容的位置。

連接IBOutlet

我們目前仍在Main.storyboard位置,請往介面右上方找到toolbar,並開啟Assistant Editor,現在將ARKit匯入到ViewController.swift檔位置:

接著請按住control並在ARKit ScenKit的View上拖到至ViewController.swift檔,當連接到時,請指定為IBOutlet,並命名為sceneView,對了,請放心地將didReceiveMemoryWarning()這個方法刪除,我們不會在本篇教學使用到它。

Creating an outlet variable for the scene view

設定ARKit SceneKit View

想看看,若想要我們的App在一開始執行時就能透過相機看到真實世界,並能偵測我們的週遭環境,這其實是相當驚人的科技!如今Apple已經幫開發者建立一套擴增實境的功能,我們並不需要再多花時間從無到有的重新設計,所以,謝謝Apple!讓我們能擁抱ARKit。

好的!現在是時候來設定ARkit SceneKit View了,請在ViewController的類別下插入下列程式碼:

並在viewWillAppear(_:)方法內,我們將初始化AR configuration,它稱為ARWorldTrackingConfiguration,這是一個可以執行world tracking的功能設定,等等!你一定會問什麼是world tracking?來看一下Apple的官方文件說明:

“World tracking可提供裝置上六個自由度軌跡,來找到場景所需的特徵點,world tracking也會啟用performing hit-tests against the frame. 當這個單元暫停後,Tracking將不會再執行。”

“World tracking provides 6 degrees of freedom tracking of the device. By finding feature points in the scene, world tracking enables performing hit-tests against the frame.
Tracking can no longer be resumed once the session is paused.”

-Apple官方文件

所以簡單說明world tracking可以追踨裝置的方位與位置,它也可以經由裝置的相機來偵測真實世界的地平面。

最後一段程式碼,AR單元( Session)主要是管理動作追踨與相機影像處理內容。我們需要執行這個configuration

接下來,我們來加入另一個方法到ViewController內:

viewWillDisappear(_:)方法中,我們主要做的是當view在關閉時,設定AR單元就會同時停止追踨動作與處理圖像內容。

##允許相機使用權限

在我們要執行我們的App之前,我們需要告知我們使用者,我們得使用相機來進行擴增實境的應用,這是一個從iOS10就開始的必要詢問告知動作,也因此,請打開info.plist。然後在空白區域點選右鍵,並選擇Add row,在key下選用Privacy –  Camera Usage Description,然後在Value下寫下For Augmented Reality

過來,請確認此時你已經做好剛剛所教的一切。

請拿起你的裝置,並連線到你的Mac,來第一次建立與執行在Xcode的專案,此時這個App將會詢問你能否允許有打開相機的權限。請點按OK。若選擇Don’t allow,代表App不能使用相機來做想要執行的事情。

using camera

現在你應該能夠看到你相機畫面了。

我們也算是設定好我們的sceneView單元,並能執行world tracking,是時候進入令人興奮的階段了!擴增實境!

##將3D物件加到ARSCNView

話不多說,直接進入擴增實境,我們將要一個立方體(box),那我們先將下列程式碼加到你的ViewController類別。

現在來解釋一下我們做了些什麼。

我們先要來建立一個立方體box的外型,1個Float = 1公尺。

接下來,我們建立一個點位boxNode物件,這個點位可代表位置與一個物件在3D空間的座標,但對它自己而言,他本身不會有可以看到的內容,需要協助它添加資訊。

所以我們需要在這個點位來建立一個形狀,並給予一些可視化的內容。先將立方體box的參數設為點位boxNode的幾何資訊,我們再給我們的點位一個位置,然而這個位置和相機有關係,以正x軸而言,是右邊;負x軸是左邊,正Y軸是上方,負Y軸是下方,而正Z軸是往後,負Z軸是往前。

接著,我們要來建立一個場景,這是一個應用SceneKit的場景功能來顯示在視圖上,過來加入我們的boxNode做為場景的初始根點位,然而初始根點位在一個場景中,是SceneKit用來定義與真實世界的座標系統的方式。

正常來說,我們的場景現在會有了一個立方體了,這個立方體會位在相機畫面的正中間,和相機的距離會有0.2公尺。

最後,讓我們的sceneView來顯示我們剛建立的場景。

現在請在viewDidLoad()加入addBox()的方法:

建立並執行這個App,你應該可以看見一個飄浮在空中的立方體囉!

你現在也可以重新簡化addBox()的方法:

這會更容易了解在做些什麼事了吧。

好的!要繼續加入手勢了!

##加入手勢辨識方法到ARSCNView

addBox()的方法下,請加入下列程式碼:

在這裡,我們先初始化點擊手勢辨識方法物件,並將target設為ViewController,也就是self,在action內設為didTap(withGestureRecognizer:),然後我們再將點擊手勢辨識這個物件也加入在scenView內。

是時候來做些點擊手勢辨識方法物件內的呼叫方法

#從ARSCNView移除物件

ViewController.swift加入下列程式碼:

在這裡,我們建立了didTap(withGestureRecognizer:)的方法,目的是我們要獲得使用者在sceneView的點擊位置,並可看得到我們觸擊的node。

然後,我們將從hitTestResults中移除掉第一個點位,如果hitTestResults內沒得到任何一個點位,我們將會當初第一個點擊的點位,也是做為parent node的,就移除。

在我們測試物件移除時,請更新viewDidLoad()的方法,並加入一個呼叫addTapGestureToSceneView()的方法:

現在如果你若能建置與執行你的專案,你應該可以點擊box node並能從scene view移除它。

不過我們感覺回到了起點。

沒關係!那我們來加多點物件。

加入多樣物件到ARSCNView

現在我們的立方體感覺有點孤獨,我們也來多做一點立方體吧,我們將在一些特徵點上加入物件。

所以什麼是特徵點呢?

根據Apple官方說明,對特徵點的定義:

此點由ARKit自動從一個連續的表面中自動辨識,但不會有另一相對的依靠點。

它其實是依真實世界的實物表面上偵測特徵點,所以,我們回到如何實現增加立方體呢,在我們開始前,在ViewController類別的程式碼最下方建立一個extension。

這個exetension建立了一個float3的矩陣,它可同時加入x, y和z三個參數。

因此,我們下一步要修改addBox()

基本上,我們加入了參數來初始化addBox()的方法,同時也給它一個初始值,這代表我們可以不用在viewDidLoad()呼叫addBox()的方法時,就得寫入特定x, y和z座標值。

好的!

現在我們需要修改didTap(withGestureRecognizer:)的方法,我們想要當真實世界的某一點被偵測到時,我們就能加入一個物件。

所以回到我們的guard let的程式碼描述,在else之後,並在return之前,請加入下列程式碼:

來解釋我們想要達成的方式。

首先,我們先要有一個hit test,很像是我們第一次測試,除了這個,我們清楚定義.featurePoint屬於types

參數。types參數要求hit test經由AR單元的相機圖像來搜尋真實世界的實體物或是表面。它內含許多類型,但本教學目前只針對特徵點。

經由特徵點的hit test後,我們可以安全地移除第一次hit test的結果,這觀念很重要,因為不會一直都有特徵點,ARKit並不會一會偵測真實世界的實體物與表面。

如果第一次hit test能成功移除,然後我們就將轉換矩陣類型matrix_float4x4float3,因為我們之前已增加了一個extension來完成此功能,有興趣的話,我們也可以自行修正x, y和z實際世界座標。

然後,我們在一特徵點上輸入x, y和z來加入一個立方體。

你的didTap(withGestureRecognizer:)方法應如下所示:

測試最終版App

現在是時候按 Run 鍵執行項目以測試最終版的 App!

總結

恭喜你,和我們走了這麼久 完成本篇教學,ARKit還有還有許多功能需要我們繼續挑戰,我們只是學了一些表面功夫。

我希望你享受本篇ARKit的介紹,我也期待你會建構出屬於你的ARKit App。

關於完整的範例專案,你可以在GitHub找到。

如果你還想學習更多有關ARKit的開發,請分享此教學給你朋友並讓我知道。

譯者簡介:Oliver Chen-工程師,喜歡美麗的事物,所以也愛上Apple,目前在iOS程式設計上仍是新手,正研讀Swift與Sketch中。生活另一個身份是兩個孩子的爸,喜歡和孩子一起玩樂高,幻想著某天自己開發的App,可以讓孩子覺得老爸好棒!。聯絡方式:電郵[email protected]

原文Building a Simple ARKit Demo with SceneKit in Swift 4 and Xcode 9


Jayven is a 20 years old App Enthusiast. He is all about creativity and simplicity. He likes to take traits from uncommon places and root them to his core disciplines. He watches the UFC, trains at the gym, and provides his body with a clean diet in his chill time. He believes that the most critical part of an article is the voice. You can read his stories on <a href="https://medium.com/@jayvenn">Medium</a> and connect with him on <a href="https://www.linkedin.com/in/jayvenn/">LinkedIn</a>.

blog comments powered by Disqus
訂閲電子報

訂閲電子報

AppCoda致力於發佈優質iOS程式教學,你不必每天上站,輸入你的電子郵件地址訂閱網站的最新教學文章。每當有新文章發佈,我們會使用電子郵件通知你。

已收你的指示。請你檢查你的電郵,我們已寄出一封認證信,點擊信中鏈結才算完成訂閱。

Shares
Share This