Develop your first immersive app

ハイライト

VisionOS アプリの開発は、おなじみの Xcode + SwiftUI ワークフローに従い、Window、 Volume、Immersive Space、RealityView の 3 つのシーン タイプを通じて 3D コンテンツを橋渡しします。開発者は、インタラクティブで没入型のエクスペリエンスを数時間でゼロから構築できます。

主要内容

VR/AR 開発を行う際、これまで最も苦労したのはツールチェーンでした。 Unity や Unreal は強力ですが、学習曲線が急峻で、iOS 開発とはまったく異なるシステムです。

visionOS はこれを異なる方法で実行します。空間コンピューティング機能を、開発者がすでに使い慣れているツールに直接統合します。 Xcode は依然として Xcode であり、SwiftUI は依然として SwiftUI であり、いくつかの新しいシーン タイプと RealityView が追加されているだけです。

3つのシーンタイプ

visionOS プロジェクトを作成する場合、Xcode テンプレートには 3 つの初期シナリオの選択肢があります: (01:56)

ウィンドウ: 主に 2D コンテンツに使用され、平面サイズと固定深さが調整可能です。共有スペースで他のアプリと並べて表示します。従来のアプリの移行に適しています。

ボリューム: 3D コンテンツに使用されます。 3 次元のサイズはアプリによって制御され、ユーザーが調整することはできません。共有スペースでも実行されますが、ジオラマ、データ視覚化などを表示できます。

イマーシブ スペース: 境界のないイマーシブ シーン。起動すると、アプリは共有スペースからフルスペースに入り、他のアプリは非表示になります。ハンドトラッキングなどのARKit機能をリクエストできます。

イマーシブ スペースには 3 つのイマーシブ スタイルがあります: (03:50)

• 混合: 仮想コンテンツはシースルー環境に重ねられますが、ユーザーは依然として現実世界を見ることができます。
• プログレッシブ: 約 180 度のビューポートを開き、ユーザーは Digital Crown でビューポートのサイズを調整できます。
• フル: 視点が完全に非表示になり、ユーザーは仮想環境に囲まれます。

Apple は、アプリを常に Windows で起動し、ユーザーが積極的にイマーシブ モードに入ることができるクリア ボタンを提供することを推奨しています。ユーザーの知らないうちに強制的に切り替えを行わないでください。 (05:04)

RealityView: SwiftUI と 3D の間の架け橋

RealityView は、visionOS 上の SwiftUI と RealityKit を接続するコア コンポーネントです。 2 つのクロージャを受け取ります: (07:28)

• make: ロードできる RealityKit コンテンツを非同期的に初期化します。.usdaシーン ファイルはプログラムで作成することもできます
• update: SwiftUI の状態が変化すると呼び出され、3D コンテンツの更新に使用されます。

更新クロージャは、フレームごとに呼び出されるレンダリング ループではなく、SwiftUI の状態が変化したときにのみトリガーされます。この設計は、開発者が誤ってゲーム ループとして使用することを防ぐために非常に重要です。

ボリュームから没入型空間へ

セッションでは、完全な開発プロセスを示します。まず、テンプレートを使用してボリューム プロジェクトを作成し、RealityView を使用して 3D 球体モデルを ContentView に読み込み、トグル ボタンとクリック ジェスチャを追加してズームを制御します。 (06:24)

次に、Reality Composer Pro で新しいシーンを作成し、USDZ クラウド モデルをインポートして、位置とサイズを調整します。 Xcodeに戻り、App.swiftにImmersiveSpaceシーン宣言を追加し、ContentViewにボタンを追加します。openImmersiveSpace没入空間を広げます。 (20:31)

イマーシブ スペースの座標系はユーザーの足の位置を原点とし、X 軸は右、Y 軸は上、そして負の Z 軸は前方を指します。コンテンツを配置した後は位置が固定され、ユーザーは体を動かしながら空間を探索します。 (16:04)

エンティティのインタラクション

3D オブジェクトがクリックに反応するようにするには、2 つの条件が必要です: (25:48)

1. エンティティは次のことを行う必要があります。CollisionComponent、衝突ボリュームを定義します
2. エンティティは次のことを行う必要があります。InputTargetComponent、対話型ターゲットとしてマークされています

これら 2 つのコンポーネントは、Reality Composer Pro またはコードで追加できます。次に、RealityView にアタッチします.targetedToAnyEntity()ジェスチャ修飾子は、ユーザーがどのエンティティをクリックしたかを正確に識別できます。

セッションでは、雲をクリックして雲を羽ばたかせる効果を示します。使用entity.move(to:relativeTo:duration:timingFunction:)滑らかなアニメーションを実現します。 (28:56)

詳細

Xcode プロジェクト テンプレートの構成

visionOS プロジェクトを作成するときは、初期シーンにボリュームを選択し、イマーシブ スペースになしを選択します。プロジェクトが生成されると、次のものが含まれます。

• MyFirstImmersiveApp.swift:アプリの入り口、WindowGroupを宣言 -ContentView.swift: RealityView および UI コントロールを含むメイン ビュー -RealityKitContentSwift パッケージ: 3D コンテンツの保存

// MyFirstImmersiveApp.swift
@main
struct MyFirstImmersiveApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }.windowStyle(.volumetric)

        ImmersiveSpace(id: "ImmersiveSpace") {
            ImmersiveView()
        }
    }
}

キーポイント:

• .windowStyle(.volumetric)WindowGroup をボリュームに変換して 3D コンテンツをサポートする -ImmersiveSpace一意の ID が必要であり、後でその ID を使用して開かれます。
• アプリ起動時にデフォルトで最初のシーンが表示されます

RealityView の完全な使い方

RealityView { content in
    // make 闭包：异步加载初始内容
    if let scene = try? await Entity(named: "Scene", in: realityKitContentBundle) {
        content.add(scene)
    }
} update: { content in
    // update 闭包：响应 SwiftUI 状态变化
    if let scene = content.entities.first {
        let uniformScale: Float = enlarge ? 1.4 : 1.0
        scene.transform.scale = [uniformScale, uniformScale, uniformScale]
    }
}
.gesture(TapGesture().targetedToAnyEntity().onEnded { _ in
    enlarge.toggle()
})

キーポイント:

• Entity(named:in:)RealityKit コンテンツ パッケージからシーンをロードすると、次の結果が返されます。Entityタイプ -content.add(scene)ロードされたエンティティを RealityView のコンテンツに追加します -content.entities追加されたすべてのエンティティにアクセスできます -transform.scale受け入れるSIMD3<Float>、配列リテラルを使用する[x, y, z]簡単な設定
• ジェスチャ チェーン コール: 最初に作成しますTapGesture()、次に使用します.targetedToAnyEntity()ターゲットを指定して最終的に使用する.onEndedイベントを処理する

Glass Background Effect

visionOS の UI コントロールには、読みやすさと対話性を確保するためにガラスの背景効果が必要です。

VStack {
    Toggle("Enlarge RealityView Content", isOn: $enlarge)
        .toggleStyle(.button)
}
.padding()
.glassBackgroundEffect()

キーポイント:

• .glassBackgroundEffect()プラットフォームの特徴であるすりガラスの背景をビューに追加します
• このエフェクトは、背後の 3D コンテンツに基づいて透明度とぼかしを自動的に調整します。
• すべてのインタラクティブ コントロールをこのエフェクトでラップする必要があります

オープンな没入空間

struct ContentView: View {
    @Environment(\.openImmersiveSpace) var openImmersiveSpace

    var body: some View {
        Button("Open") {
            Task {
                await openImmersiveSpace(id: "ImmersiveSpace")
            }
        }
    }
}

キーポイント:

• openImmersiveSpaceは環境値であり、次から取得する必要があります。@Environment得る
• 非同期なので使用してくださいawaitスペースが空くまで待ちます
• 渡される ID は一致する必要がありますAppで宣言されたImmersiveSpaceID一致
• に含まれている必要がありますTaskSwiftUI の本体は非同期コンテキストではないため、SwiftUI で呼び出されます

エンティティのクリックアニメーション

.gesture(TapGesture().targetedToAnyEntity().onEnded { value in
    var transform = value.entity.transform
    transform.translation += SIMD3(0.1, 0, -0.1)
    value.entity.move(
        to: transform,
        relativeTo: nil,
        duration: 3,
        timingFunction: .easeInOut
    )
})

キーポイント:

• value.entityRealityView 全体ではなく、クリックされた特定のエンティティです。 -transform.translationはいSIMD3<Float>タイプの変位ベクトル -move(to:relativeTo:duration:timingFunction:)RealityKit の組み込みアニメーション メソッドです -relativeTo: nilワールド座標系での動きを表します -.easeInOutアニメーションに自然な加速と減速の効果を与える

Xcode プレビューの構成

ImmersiveView をプレビューする場合、デフォルトのプレビュー境界により、境界を超えるコンテンツが切り取られます。追加する必要があります.previewLayout(.sizeThatFits)：

#Preview {
    ImmersiveView()
        .previewLayout(.sizeThatFits)
}

キーポイント:

• #Previewマクロが古いものを置き換えるPreviewProviderプロトコル -.sizeThatFits境界の外側の 3D コンテンツをトリミングせずに、コンテンツに合わせてプレビューのサイズを変更します。
• 同じナビゲーション コントロール (ルック、パン、オービット、移動) を使用してシミュレーターでシーンを表示できます。

重要ポイント

1. 3D 製品デモンストレーター やるべきこと: ユーザーが Volume で製品モデルを 360 度表示し、部品をクリックして詳細を表示できる e コマース アプリを作成します。 実行する価値がある理由: RealityView + targetToAnyEntity により、複雑な光線検出コードを必要とせずに、3D インタラクションが 2D と同じくらい簡単になります。 開始方法: Reality Composer Pro を使用して製品 USDZ モデルをインポートし、CollisionComponent と InputTargetComponent を各インタラクティブ コンポーネントに追加して、SwiftUI で使用します。.targetedToAnyEntity()クリック ジェスチャをバインドして、詳細パネルをポップアップします。

2.没入型データ視覚化 機能: 複雑なデータ セット (都市の人口密度、株式傾向など) を 3D の没入型グラフに変換し、ユーザーがデータを探索できるようにします。 価値がある理由: イマーシブ スペースを使用すると、ユーザーは体の動きを利用して 2D 画面よりも直感的にデータを探索できます。 開始方法: RealityKit を使用してプログラムでヒストグラムまたは散布図エンティティを作成し、それを ImmersiveSpace に配置して、openImmersiveSpaceウィンドウ内のボタンからエントリをトリガーします。

3.仮想空間ツアー やるべきこと: 博物館または不動産ツアー アプリを作成し、Window からリストを参照し、クリックしてイマーシブ スペースに入り、イマーシブ ツアーを実行します。 実行する価値がある理由: 3 つのシーン タイプを組み合わせることで、アプリは情報の閲覧から没入型のエクスペリエンスにスムーズに移行できます。 開始方法: Window で SwiftUI List を使用して展示物を表示します。選択後、対応する ID で ImmersiveSpace を開きます。各スペースには、異なる Reality Composer Pro シーンがロードされます。

4.ジェスチャー駆動の 3D 作成ツール やるべきこと: ユーザーがエンティティをクリックして移動、回転、拡大縮小できるシンプルな 3D シーン エディタを作成します。 価値がある理由: エンティティ ターゲティングと RealityKit アニメーション API を組み合わせることで、インタラクティブな 3D エディターの構築が可能になります。 開始方法: エンティティにジェスチャ認識を追加します。.onEnded媒体修飾transform、使用move(to:)またはorientationスムーズなアニメーショントランジションを実装します。

関連セッション

• 空間コンピューティングのための SwiftUI を紹介 — 空間コンピューティング プラットフォーム上の SwiftUI の新機能、ウィンドウとボリュームの使用法を理解する
• SwiftUI で窓の外へ — イマーシブ スペースの 3 つの没入スタイルと使用シナリオについての深い理解
• RealityKit で空間エクスペリエンスを構築する — エンティティ、コンポーネント、アンカーなどのコア概念を含む、RealityKit API の詳細な説明
• Reality Composer Pro について — Reality Composer Pro ツールの使用を開始し、3D コンテンツを準備してプレビューする方法を学びます。