🐡

visionOSアプリの作り方入門

2023/07/05に公開

AppleからXRなプラットフォームであるvisionOSが発表された。
シンプルなvisionOSアプリを作ってみたのでメモ。

流れ

  1. Xcode 15.0 beta2以上を使う
  2. visionOSでプロジェクトを作成
  3. Reality Composer Proを使って3DオブジェクトをXcodeに読み込み
  4. SwiftUIで配置&UIを作る

1. 最新版のベータ版Xcodeをダウンロードしておきます。

インストール中にvisionOSやiOSもダウンロードできるので、やっておく。

2. visionOSでプロジェクトを作成

プロジェクトのテンプレートからプロジェクトを作成。
Initial Sceneは Windowに設定
Immersive Spaceは Noneに設定(後から変更できる)

概念としては
Windows: 平面のアプリ
Volumes: 奥行きを持った3Dウィンドウ
Immersive Spaces: 没入タイプ。Mixed Immersion, Progressive Immersion, Fullがある

この状態でプロジェクトを作成すると、球体のオブジェクトが表示される空プロジェクトが生成される。

3. Reality Composer Proを使って3DオブジェクトをXcodeに読み込み

Reality Composer Pro は3DオブジェクトをXcodeのプロジェクトに読み込ませることができるツール。
Reality Composer Proで作ったシーンは.rkassets というフォルダの中に管理されており、
シーンは.usda、3Dオブジェクトは.usdz形式として保存されていた。

球体だと味気ないので、Reality Composer Pro を使って球体を地球に変更してみる。
Reality Composer Pro と似たアイコンの Package をダブルクリックすると球体の3Dオブジェクトのビュワーが立ち上がるので、
左上にある Open In Reality Composer Pro をクリックすると、
その3Dオプジェクトを Reality Composer Pro で開くことができる。
表示されている球体を削除した後、
上のメニューから Insert -> Object を選択し、好きなオブジェクトを選択。
すると、3Dオブジェクトが読み込まれる。
このまま保存してXcodeに戻る
->Xcodeプレビューを再実行すると、Reality Composer Proで読み込んだオブジェクトが表示されている

4. SwiftUIで配置&UIを作る

ボタンの配置などはSwiftUIで書いていけばいい。

            RealityView { content in
                if let scene = try? await Entity(named: "Scene", in: realityKitContentBundle) {
                    content.add(scene)
                }
            } update: { content in
                if let scene = content.entities.first {
                    let uniformScale: Float = enlarge ? 1.4 : 0.5
                    scene.transform.scale = [uniformScale, uniformScale, uniformScale]
                }
            }	    

3Dオブジェクトを読み込むにはRealityViewを使う。
await Entity(named: "Scene", in: realityKitContentBundle) {}
Scene と名称を指定しているが、 Reality Composer Pro で設定した名前のようでXcodeからは見えないので注意。

あとはSwiftUIで必要なUIを構築していく。

RealityView (ImmersiveSpace) を後から読み込むこともできる。
方法は

  1. RealityComposerProのEntityを内包した RealityView を別の.swiftで作っておく。
  2. Appのbodyの中でImmersiveSpaceを呼び出すコードを書いておく
        ImmersiveSpace(id: "ImmersiveSpace"){
            ImmersiveView()
        }
  1. ボタンが押されたらTask{await openImmersiveSpace()}でImmersiveSpaceごと呼び出し
            Button("Open") {
                Task {
                    await openImmersiveSpace(id: "ImmersiveSpace")
                }
            }


上記の実装をすると、Openを押すと飛行機のシーンがロードされる。

感想

3D空間でのオブジェクトの操作

Reality Composer ProやXcodeプレビュー時にトラックパッドだと操作しづらかった。
macOSに対応したゲームコントローラなら操作できるらしいので買ってみようかな?

レスキューナウテックブログ

Discussion