透過 Reality Composer 和 RealityKit　輕鬆地創建 3D AR Apps

RealityKit 是 2019 年推出的新框架，用於實作高性能 3D 模擬和渲染功能。在之前的教學文章中，我們探索過如何在 ARKit 利用 SceneKit 開發 3D 物件。在這篇教學文章中，我們將看看如何使用 RealityKit、和與 RealityKit 一起發布的 Reality Composer ，來構建互動的 3D AR App。

Apple 利用 Reality Composer 令 AR App 開發更進一步，讓初學者無需編寫任何程式碼，都可以輕鬆地創建互動的 AR 體驗。閱讀完這篇教學文章後，你就會明白我的意思了。

設計 AR 場景

讓我們在 Reality Composer 開始創建 AR 場景。這個 App 是在 Xcode 中的，因此你可以立即啟動它。到 Xcode 選單，選擇 Xcode > Open Developer Tool > Reality Composer 來打開 App。

備注：你需要使用 Xcode 12 來跟著這篇教學實作。

選擇 New Document 或在選單點擊 File > New 來創建新專案。接下來，為場景選擇一個錨點 (anchor)，我們這個 RealityKit 專案會使用 Horizontal。選擇 Horizontal，然後點擊 Choose。

創建專案後，你會看到一個盒子在水平面 (horizontal plane) 上。這個盒子是模板自動生成的。你可以刪除它，又或是把它換成另一個虛擬物件。

讓我們來試試 Replace 功能。右擊這個盒子，App 就會顯示 Content Library，然後向下滾動，就會在 Spacecraft 類別下看到一艘火箭，雙擊火箭將其選擇。

備註：如果找不到 asset，你就需要更新 Content Library，又或是簡單地將其替換為其他 3D 物件。

我們想要將火箭放置在原來的位置。首先，打開 Properties 選單，然後點擊 Position 旁邊的 Reset 按鈕，以將所有數值設置為零。

預設的比例是 100%。如果我們想把火箭設置得更大，可以將比例更改為 300%。接下來，讓我們添加一個機器人，並將其放置在火箭旁邊。點擊選單欄上的 Add 按鈕，並搜索 Robot。

把機器人拖到火箭的左側。你可以拖動紅色 Pointer 來沿 x 軸移動機器人，也可以簡單地如下設置 Position 數值。另外，將比例設置為 85% 來把它縮小。

讓我們在場景中再添加一個玩具。再次點擊 Add 按鈕，向下滾動到 Toy 類別，把一個玩具拖動到火箭的右邊。你可以按照下圖來設置玩具的 Position 數值。

然後讓我們在場景中添加 4 個雲朵物件。你可以就這樣把它們放置在火箭的上方。在 Reality Composer 中，你可以使用複制和貼上來複製物件。

接著，讓我們在雲朵旁邊添加 1 個太陽。太陽物件的預設尺寸很小，我們可以將比例設置為 300%。

差不多完成了！讓我們再為場景添加兩個物件。點擊 Add 按鈕，並拖動一個懸浮標誌到場景中，你可以把標誌放在火箭前面，並把文本改成 Welcome to AR World（或其他文本也可以）。

我們可以更改 x、y、和 z 軸的旋轉值來旋轉標誌。在這個範例中，我將 x 軸的值設置為 -30°。標誌的預設尺寸相當大，讓我們將比例設置為 28％把它縮小。另外，我還將寬度更改為 3m 來擴寬標誌。

接著，在場景中添加一個 Cylinder 形狀，我們會更改其屬性來把它變成一個紅色按鈕。把 Material 設置為 plastic，Material Colour 設置為 red，並把高度設置為 5cm。

完成了，我們已經設計好 AR 場景了！讓我們儲存專案，並命名為 ARPlayground.rcproject。如果你的 iPad 有安裝 Reality Composer，可以點擊 Send to… 按鈕，來在 iPad 上測試場景。

為物件添加動畫

現在，你已經設計好了第一個 3D AR 場景，讓我們來添加一些動畫吧！有了 Reality Composer，製作虛擬 3D 對象的動畫就變得非常簡單。在選單中，選擇 Behaviours。

我們可以定義物件的 behaviour 來創建動畫，並讓使用者與物件進行互動。讓我們從基礎開始，為太陽添加旋轉動畫。

Reality Composer 提供了 6 個預設的 behaviour，例如 Tap & Flip 和 Tap & Play Sound。這些預設的 behaviour 讓我們可以輕鬆地將一些常見的互動形式添加到場景中。但是，如果可以學會定義自己的 behaviour 就更好了。

在 Behaviours 窗格點擊 + 按鈕，選擇 Custom behaviour。App 會創建一個預設名為 Behaviour 的 behaviour，你可以隨意為它重新命名。

Sun Spin

右擊 Behaviour 並選擇 rename，來重新命名它為 Sun Spin。每個 behaviour 都是由某個情況觸發的。Reality Composer 有不同的內建 triggers 供我們選擇，在這個範例中，我們想在場景加載時讓太陽旋轉。因為，點擊 Add a Trigger to this Behaviour 按鈕，並選擇 Scene Start。

Action Sequence 定義了物件在接收到 trigger 後應執行的操作。點擊 Add an Action to the sequence 按鈕，就會有一組 Action 讓我們選擇。在這個範例中，Spin Action 就非常適合我們。選擇 Action 後，我們需要選擇 Affected Objects，也就是需要套用 Action 的物件。

選擇太陽物件，然後點擊 Done。現在，你可以點擊 Play 按鈕來預覽動畫。如果你想太陽旋轉得慢一點，可以把持續時間設置為 10 秒。在預設情況下，動畫會在旋轉一圈後結束。在這個範例中，我們希望太陽不斷旋轉，因此我們可以啟用 Repeat 選項。

Intro

接下來，讓我們為火箭和玩具添加動畫。我想要的動畫是在場景首次加載時，每個物件都會執行某種類型的動畫。

再點擊 + 按鈕來添加另一個客製化 behaviour，並把它命名為 Intro。因為我們想在場景加載時播放動畫，因此讓我們添加一個 Scene Start trigger。點擊 Add an action 為火箭添加 Emphasise Action，並更改 Motion Type 為 Bounce。這個 Action 通常是用於一些吸引人注意的動畫。

你可以在同一個 Action Sequence 內添加多於一個 Action。讓我們點擊 Action Sequence 旁邊的 + 按鈕，來為機器人添加另一個 Emphasise action，並把 Motion Type 設置為 Spin，Style 設置為 Wild。

再點擊 + 按鈕來添加第三個 Emphasise action。讓我們選擇玩具為 Affected Object，並把 Motion Type 設置為 Flip。記得一個 Action 應該只對應一個 Affected Object，如果預設選擇其他物件的話，你就要取消選擇它們。

接下來，添加另一個 Action 來將玩具旋轉 180°，為下一部分的 Orbit Action 做準備。點擊 + 按鈕來添加 Move, Rotate, Scale By action，然後選擇玩具為 Affected Object。將所有 Position 數值設置為零，而在 Rotation 的部分，將 y 設置為 -180°。請注意，Reality Composer 會自動更改 Rotation 的 x 和 z 數值。你可以點擊 Play 按鈕來測試旋轉有否正確地執行。

Orbit

接下來，讓我們來創建另一個 behaviour，來讓兩個玩具圍繞火箭運行。點擊 Behaviours 旁邊的 + 按鈕，添加另一個客製化 behaviour，並把它命名為 Orbit。同樣地，這個 Action 會在場景加載時被觸發，因此讓我們添加一個 Scene Start trigger。

因為 Intro behaviour 需要 4 秒來完成，所以我們要等 4 秒後才開始 Orbit Action。點擊 Action Sequence 的 + 按鈕，並添加一個 Wait action，把時間設置為 4 秒，然後在 Sequence 中添加一個 Orbit action。

讓我們選擇機器人為 Affected Object，火箭為 Centre，機器人就會圍繞火箭運行。我們把時間設置為 6 秒，在 Align to Path 選項打勾，並設置 Orbit Direction 為 Anticlockwise。

同一個 Orbit Action 都應該套用到另一個玩具物件上。你可以重覆上述步驟來添加另一個 Orbit Action，或是右擊現有的 Orbit action 然後選擇 Duplicate，並更改 Affected Object 為另一個玩具物件。

在預設設定下，Sequence 內的 Action 會逐個被執行，但現在我們想兩個 Orbit Action 同時執行。把第二個 Orbit Action 拖動到第一個上合併它們，如此一來，兩個 Orbit Action 就可以同時執行了！

Hide & Show

接下來，讓我們實作標誌和紅色按鈕的 Behaviour。在啟動場景時，這兩個物件是隱藏的，它們將在 Orbit Action 完成後顯示。讓我們看看如何實作吧！

添加另一個客製化 Behaviour，並命名為 Hide and Show。同樣地，這個 Action Sequence 會被 Scene Start 觸發。

因為我們要隱藏兩個物件，來添加 Hide Action。按住 Command 鍵選擇標誌和紅色按鈕，然後點擊 Done 以確認選擇，將持續時間設置為 0 秒就可以立即隱藏物件。

讓我們添加 Wait action，並設置時間為 10 秒。然後，為標誌物件添加一個 Show action，把 Motion Type 設置為 Move from Above，讓標誌看起來好像從天而降一樣。把 style 設置為 Wild，距離設置為 4m。你可以點擊 Play 按鈕來預覽動畫。

接下來，讓我們為紅色按鈕創建另一個 Show action，把 Motion Type 設置為 Move from Below，並保持所有數值不變。同樣地，我們想兩個 Show Action 同時執行，因此要把第二個 Show Action 拖動到第一個上合併它們。

Tap Me

最後一個動畫是應用於紅色按鈕的。我們想在相機靠近按鈕時播放 blink 動畫，以引起使用者的注意。

為了實作這個動畫，讓我們添加另一個客製化 behaviour，並把它命名為 Tap Me。這次，添加一個 Proximity To Camera trigger，把 Affected Object 設置為紅色按鈕，距離設為 50 cm。然後，添加一個 Emphasise action，把 Affected Object 設置為紅色按鈕，並更改 Motion Type 為 Blink。

這個 Action 無法在 Mac 上測試。如你在 iPad 或 iPhone 載入場景，在靠近紅色按鈕時，Action 就會被觸發。

與使用者互動

現在，你已經學會如何為虛擬物件設置動畫，讓我們來為它們增添互動性吧！當使用者按下紅色按鈕時，App 會將火箭發射到天空。

要實作這個動畫，首先讓我們創建另一個客製化 behaviour，並命名為 Rocket Launch。Tap trigger 可以來偵測使用者在 AR 空間中的觸摸 (touch)，因為讓我們添加 trigger，並將 Affected Object 設置為紅色按鈕。

我們會把火箭的位置更改以模擬發射，添加 Move, Rotate, Scale By action，並把 Affected Object 設置為火箭，持續時間設置為 2 秒，Ease Type 設置為 Ease In。

而火箭的位置，我們會把 Y 數值設置為 300 cm。把比例設置為 20%，因為火箭升空後，看起來應該會縮小了。

Reality Composer 也簡化了播放音效和聲音的實作。在 Action Sequence 中，你可以添加 Play Sound Action，以在火箭發射時播放音效。同樣地，我們把 Affected Object 設置為火箭。選擇一段你喜歡的音效，我就把音效設置為 Jet Passing Overhead 01.caf.。由於音效應與 Move Action 一起播放，因此讓我們將 Play Sound Action 拖到 Move Action 來合併它們。

火箭會在空中停留 10 秒，因此讓我們添加 Wait action，並把持續時間設置為 10 秒。

現在讓我們把火箭帶回原本的位置吧！首先，為火箭添加一個 Move, Rotate, Scale To Action，把持續時間設置為 2 秒，Ease Type 設置為 Ease Out，並把 x、y、和 z 的 Position 數值設置為零。火箭降落後，應該就會變回原來的大小，因此讓我們把比例設置為 300%。

同樣地，添加另一個對應 Move Action 的 Play Sound Action，並把 Affected Object 設置為火箭。至於音效，我就設置了 Speedboat Passing.caf。記得要將 Play Sound Action 與 Move Action 合併。

現在你可以點擊 Play 按鈕，來預覽 Action Sequence。如果你想測試我們在場景中實作的所有 Action，就要在選單列點擊 Play 按鈕。

把場景轉換為 AR App

我們已經利用 Reality Composer 設計好 AR 場景了！那麼如何把這個場景轉換為 AR App 呢？

Xcode 已經自動化了整個過程，並為我們生成了所需要的程式碼。我們需要做的，就是使用 Augmented Reality App 模板創建一個新的 Xcode 專案，並將 ARPlayground.rcproject 檔案匯入到專案中。聽起來很簡單，讓我們來看看實際操作吧！

轉到 Xcode 並創建一個新專案，選擇 Augmented Reality App 模板，並命名為 ARPlayground。在 Content Technology 選項中，選擇 RealityKit；而 Interface 選項中，選擇 SwiftUI。提醒一下，在這裡你需要使用自己的 organization identifier。

在預設情況下，Xcode 會生成 Experience.rcproject 檔案，當中只有一個 3D 立方體，我們將會換上我們自己的 .rcproject 檔案，因此讓我們選擇 Experience.rcproject，並點擊 Delete 來刪除它。

然後，把我們剛創建好的 ARPlayground.rcproject 檔案拖動到 Project Navigator 中，Xcode 就會自動生成佈置場景和虛擬對象所需的程式碼。

打開 ContentView.swift 並滾動到 ARViewContainer 結構，如此換掉 makeUIView(context:) 函式：

func makeUIView(context: Context) -> ARView {

    let arView = ARView(frame: .zero)

    let anchor = try! ARPlayground.loadScene()

    arView.scene.anchors.append(anchor)

    return arView
}

在以上的程式碼中，我們呼叫 loadScene 方法來取得 Reality Composer 場景的錨點，然後把錨點添加到 AR 視圖場景的錨點集合中。

以上就是把 Reality Composer 專案轉換為 AR App 所需要的程式碼。現在是時候 Build 專案，並在真實的 iOS 設備上測試這個 App 了！

譯者簡介：Kelly Chan－AppCoda 編輯小姐。
原文：Building 3D AR Apps Using Reality Composer and RealityKitt

透過 Reality Composer 和 RealityKit 輕鬆地創建 3D AR Apps