建てよう、お菓子の家。【AR】【Swift】 - テコテック開発者ブログ

本投稿は TECOTEC Advent Calendar 2024 の25日目の記事です。

証券フロンティア事業部の桑原です。弊社の株式投資管理・分析アプリ「カビュウ」のiOS版開発に携わっております。

🎄Merry Christmas❗️

────だというのに目に映るのはいつもと変わらない日常。

いっちょ足しますか、 “クリスマス感”。

やりたいこと

お菓子の家を表示するARアプリの実装

クリスマスによく見るあれ、「ジンジャーブレッドハウス」を召喚してクリスマス感を高める魂胆。

夢ですよね、お菓子の家。

ちなみに"AR"とは「拡張現実」のことで、現実空間にCGなどを合成する技術です。

(視界すべてがバーチャルだと"VR")

本記事について

想定読者はここまで読んでくれたすべての方です。

iOSアプリ開発経験者：
- ARフレームワーク(RealityKit)について触れます。
  - 特にiOS 18で扱えるViewについて紹介します。
- 配属プロジェクトによっては全く触れる機会のないライブラリだと思うので、刺激になれば幸いです。
それ以外の方：
- なんかARのiPhoneアプリつくって遊んでるんだな😙という雰囲気だけわかればオッケーです。
- 「完成品だけ見てくわ！」でも構いません

なお弊部署の開発領域と直接関係はなく、あくまでも個人の興味本意で調査＆実装したものとなります。

やりたいこと
- 本記事について
実装していく
まとめ
テコテックの採用活動について

実装していく

開発環境：

Macbook Air M1 2020
- macOS 15.0.1
Xcode 16.0
iPhone 15 Plus
- iOS 18.1.1

テンプレを見てみる

ARで遊ぶために0から勉強しなきゃ...と思いきやAppleがテンプレを用意してくれてるらしい。

学ぶまなぶって真似ぶまねぶからきてるからね。遠慮なく借りるよ！

新規プロジェクト作成時、普段なら「App」を選ぶところで「Augmented Reality App」を選びます。

とりあえず余計なことはせずににそのままビルドしてみます。

お〜〜

目の前に謎の黒い立方体が出現しました。

何が起きているのか、テンプレの内容を紐解いていきます。

RealityKit

import RealityKit

ARに関する開発を行うためのフレームワークをインポートしてます。

↓ 似た役割のフレームワークがいくつかあるので整理

フレームワーク名	概要
ARKit	ARに関する基本的な操作。
RealityKit	よりリッチなAR開発向け。ARKitを含んでいる。
SceneKit	主に3Dゲームの開発に用いる。

RealityView

RealityView { content in

3Dコンテンツをアプリで表示するためのView。

実はこれまでのXcode(〜15.4)ではテンプレコードが異なります。旧テンプレでは代わりにARViewというものをつかってますね。

let arView = ARView(frame: .zero)

今回使うRealityViewはあのApple Visionでの利用が想定されたViewです。

最近iOSでも使えるようになりましたが、その場合はiOS 18 (2024年12月現在での最新OS) が必要となります。
to Cサービスでは最新OSとその2,3個前のバージョンまでサポート対象とする運用が多いと思うので、気兼ねなく実務導入できるのはもう少し先の話...

今回は自由に遊ぶだけなので、この超フレッシュなRealityViewを使用していきます！

モデルの調整

// Create a cube model
let model = Entity()
let mesh = MeshResource.generateBox(
    size: 0.1,
    cornerRadius: 0.005
)
let material = SimpleMaterial(
    color: .gray,
    roughness: 0.15
    isMetallic: true
)
model.components.set(
    ModelComponent(
        mesh: mesh,
        materials: [material]
    )
)
model.position = [0, 0.05, 0]

Entityクラスで謎の黒い立方体をコネコネしています。つまりここをいじればお菓子の家が出せるってこと。

形(mesh)や質感(material)はお好みで調整。

// Create horizontal plane anchor for the content
let anchor = AnchorEntity(
    .plane(
        .horizontal,
        classification: .any,
        minimumBounds: SIMD2<Float>(0.2, 0.2)
    )
)
anchor.addChild(model)

さっき作ったmodelをAnchorEntityに設置して、

// Add the horizontal plane anchor to the scene
content.add(anchor)

そのAnchorEntityを最終的にViewに紐づけることで空間にモデルを表示できるようになります。

3Dモデルを用意する

まったくの専門外です！(自信満々)

調べて見ると、iOSでARやるならUSDZファイルってやつが都合がいいんだって。

なにかと思えばPixerが作ったフォーマットをAppleが拡張したらしい。そりゃ相性いいわけだ🤔

Apple developed a set of new schemas in collaboration with Pixar to further extend the format for AR use cases.

(USDZ schemas for AR | Apple Developer Documentationより引用)

選択肢としては以下のどちらかですが、今回は前者でいこうかなと思います。

直接.usdzファイルを用意する
既存のファイルを.usdzへ変換する*1

「cgtrader」という3Dモデル販売サイトでステキなモデルを入手！

該当モデルページ

3Dモデルを呼び出す

気軽に最新コンポーネントに手を出したせいで参考情報が全然ないよ〜😭

と嘆きたいところですが公式ドキュメントにちゃんと書いてあります。

公式ドキュメントには目を通しておこう...

if let robot = try? await ModelEntity(named: "robot") {
     content.add(robot)
}

素材ファイルをプロジェクトに入れた上で(※)、ファイル名で呼び出せばOK。

※ 普段リソースを入れるAssets.xcassetsではなく、プロジェクト全体の方へ格納する

完成

ちょっと整えてプロジェクト全体はこんな感じ。

ContentView.swiftのコードを見る

import SwiftUI
import RealityKit
struct ContentView : View {
    var body: some View {
        RealityView { content in
            if let model = try? await ModelEntity(named: "gingerbreadHouse") {
                content.add(model)
                model.scale = [0.002, 0.002, 0.002]
            }
            content.camera = .spatialTracking
        }
        .edgesIgnoringSafeArea(.all)
    }
}