【visionOS】Vision ProシミュレータにViewを表示させる最初の一歩

Get started with building apps for spatial computingの動画を見る限り
visionOSの開発ではSpatial Computing（空間コンピューティング）に関する理解がとても重要であり、その基本的な要素がWindow、Volume、Spaceの3つである事が理解できます。
今回は初めてVision Proシミュレータを起動させ、Viewを表示させることを試してみたいと思います。16分ぐらいから新規作成について説明がされているので、その説明に沿って実装していきます。

プロジェクトファイルを作る

Xcodeの新規プロジェクト作成からvisionOSを選択してプロジェクトファイルを作成します。
とりあえず画面にテキストなどを表示させるところから行いたいのでIntial SceneはWindowを選択します。

新規プロジェクトが作られるとデフォルトでコードやusdaファイル（Universal Scene Description ASCII（USDA）で、3Dシーングラフを表現するためのフォーマット）が初期から実装されています。
またContentViewのPreviewを表示するとVision Proの画面が表示されます。

これでプロジェクトファイルの作成は完了です。

SwiftUIで任意の画面を作成して表示させてみる

まずは土台となる画面を作成して、そこから今後検証したSampleを表示させたいと思います。
土台となる画面は一番ハードルが低そうなWindowの要素で、SwiftUIのみの知識でも作成できそうです。おそらくiOSとなんら変わりなく実装できそうなので
1. TopViweを作成
2. 文字だけを表示する画面を作成
3. Appが参照している画面をContentViewからTopViewに差し替える
4. TopViewから各画面へ遷移できる
をこの記事のゴールとして試してみたいと思います。

TopView

TopViewという名前でViewを作成します。作成すると初期値で実装されているTextが空間の中に表示されます。

NavigationStackを使用してタイトルや遷移するようjに書き換えます。

struct TopView: View {
    var body: some View {
        NavigationStack {
            List {
                NavigationLink {
                    ContentView()
                } label: {
                    Text("ContentView")
                }

                NavigationLink {
                    Text("SampleView")
                } label: {
                    Text("Sample1")
                }
            }
            .navigationTitle("visionOS Sampler")
        }
    }
}

上記のコードはシミュレータでは以下のようjに表示されます。

ボタンタップで遷移する事が可能です。この辺りはSwiftUIでiOSアプリを開発することと何ら変わりはない印象です。

文字だけを表示する画面

適当な名前をViewを作成します。シンプルにデフォルトのTextを利用して文字を表示させます。

struct Sample1: View {
    var body: some View {
        Text("Hello, visionOS")
    }
}

Appが参照している画面をContentViewからTopViewに差し替える

App内のWindowGroup内をContentViewからTopViewへ差し替えます。
アプリ起動時の画面がTopViewへ差し変わります。

struct visionOSSamplerApp: App {
    var body: some Scene {
        WindowGroup {
            TopView()
        }
    }
}

TopViewから各画面へ遷移できる

TopViewを以下のコードに書き換えます。
これで各画面へ遷移させる事ができます。

struct TopView: View {
    var body: some View {
        NavigationStack {
            List {
                NavigationLink {
                    ContentView()
                } label: {
                    Text("ContentView")
                }
                NavigationLink {
                    Sample1()
                } label: {
                    Text("Sample1")
                }
            }
            .navigationTitle("visionOS Sampler")
        }
    }
}

以上Vision ProシミュレータにViewを表示させる最初の一歩でした。
とりあえずWidowのみでしたらSwiftUIで簡単に実装する事ができました。
ARKitなどを駆使してvisionOSらしいアプリが作れるようになるにはまだ学習する必要がありますが、既存のアプリをVision Proでも自然に表示させるようにする事は少し頑張ればできそうな気がしました。