SwiftUIでウインドウを超える

SwiftUIでウインドウを超える

スペースを起動する準備をしましょう。- visionOSでのイマーシブな体験の創造をお手伝いする新しいSwiftUIシーンタイプを探求します。ImmersiveSpaceで新しいシーンを作成し、3Dコンテンツを配置、そしてRealityViewを統合する方法をご紹介します。immersionStyleシーン修飾子でアプリのイマージョンレベルを増加させる方法を探求し、スペースの管理、ARKitのvirtual handsの追加、SharePlayサポートの追加、そしてこの世のものとは思えない体験を構築するベストプラクティスを探求します。

関連する章
- 0:00 - Introduction
- 3:27 - Get Started
- 5:51 - Display content
- 12:00 - Managing your Space
- 19:12 - Customization
リソース
- - HDビデオ
  - SDビデオ
関連ビデオ

WWDC23
ダウンロード

♪ ♪ ♪ こんにちは「Go beyond the window with SwiftUI」へようこそエンジニアのRaffaです後に同僚のMarkが加わります今日はみなさんが既にご存知のツールやフレームワークでイマーシブな体験を創造するために xrOSのフルパワーを活用するのがいかに簡単かをお見せします
iOS用のARアプリの開発で既に拡張現実感には馴染みがあることでしょうこの数年間で iPhoneやiPad用のリッチなARアプリの作成のため ARKitとRealityKitを含む数々のツールやフレームワークをご紹介しましたこれらのアプリはインタラクティブなユーザーインターフェイスと仮想オブジェクトでユーザーの環境を増大させ現実と想像を限りなく近付けてくれます今年はxrOSの登場で ARが更にレベルアップされますまずはイマーシブな体験ですこれらの体験ではウインドウや3次元コンテンツなどアプリがあなたの周りにインターフェイスを表示します周りは見えたままで実際体験の一部となりますアプリの要素を表面に据えつけて仮想オブジェクトや効果で現実の世界を増大させ高めることができますそしてフルイマーシブな体験では更に一歩先に進み環境全体を覆いますアプリが視界を完全制御するのですこれにより可能性が解き放たれますそして何よりもこれらは既にみなさんに馴染みのあるツールやフレームワークで実現可能になりますこのコアとなるのがSwiftUIの Immersive Spaceですでは始めましょう別のセッションで今年からSwiftUIに三次元が追加されると学びました xrOSではウインドウとボリュームを用いて SwiftUIの簡単な宣言型パターンで 3次元ユーザーインターフェイス要素を表示することができますウインドウとボリュームは領域内にコンテンツを表示できますではxrOSが供給する限りない空間を使い真のイマーシブな体験を創造したいとすればどうでしょう？アイテムをウインドウの枠外に配置しあなたの周りにあるものすべてのなかで中心にいる状態にしたいでしょう。スペースはこのためにデザインされましたウインドウとボリュームの横に位置するスペースは xrOSのインターフェイスを提供するコンテナのようなものですここではスペースに焦点を当てイマーシブな体験をどう創造できるか見てみますまずスペースを使用し始めコンテンツの表示の仕方を学びますそしてMarkがスペースの管理方法と直接スペースに起動させる方法そしてスペースで可能なカスタマイズについて説明しますでは早速始めてコードを見てみましょうスペース探検を楽しみにしていますほかのセッションで取り掛かっていた「Wrold」アプリで太陽系を探検できるスペースでアプリを一歩一歩拡張していきますスペースはImmersive Spaceという SwiftUIのシーンタイプですほかのシーンタイプ同様にアプリでImmersive Spaceを定義しいつでも開いたり終了することができますスペースが一つだけのアプリも作成できますしウインドウやボリュームの横に一つ以上のスペースを足して既存のアプリを拡張できますアプリは一度に一つのスペースを開け別のスペースを開く前に現在あるものを閉じますこれもほかのシーンタイプ同様シーンのボディにビュー階層を配置します ImmersiveSpaceにSolarSystemを配置すると領域をクリッピングすることなくレンダリングされます実に簡単かお分かりいただけたでしょうかこの3行だけで solar system viewをリッチでイマーシブな体験にできたのですでは詳細を見てみましょうスペースを開くことでこのシーンをほかのシーンタイプから際立たせる特別のビヘイビアを利用できます幾つものアプリが並んで動作している時すべてが同じスペースに表示されますですのでこれを Shared Spaceと呼んでいますアプリがImmersive Spaceシーンを表示するとアプリはフルスペースに入りますユーザーに見えるのはそのアプリだけですほかのアプリは消え去りそのコンテンツだけが邪魔なく表示されます後程スペースを終了するとほかのアプリが再び現れます Immersive Spaceはシーンなので暗黙のうちにその座標システムを定義しますつまりスペース内に配置するものはスペース自体の原点に相対して配置されますスペースが最初に開いた時スペースの原点はユーザーの足元の近くにあります基本がわかったところで次にスペースでどうコンテンツを表示するかについてです ImmersiveSpaceはシーンタイプでその中にシーン階層を配置します ImmersiveSpaceはどのSwiftUIビューにも対応しクリッピング領域はないもののスペースはコンテンツをレイアウト領域内に配置しますスペースに配置するものはみなさんが既に馴染みのあるレイアウトシステムを使用しますしかしスペースの原点がユーザーの足の近くなのでそこにはコンテンツを置くべきではないでしょう RealityViewについてお話ししましょう SwiftUIとARKit 及びRealityKitを活用したいなら RealityViewのパワフルな機能と共に ImmersiveSpaceを使用することをお勧めします ImmersiveSpaceとRealityViewは相伴う関係でイマーシブな体験の創造に必要な機能を提供するために具体的に一緒にデザインされています例えばRealityViewはアセットの非同期読み込みの組み込み型サポートを含んでおりご覧のようにここでは star fieldを読み込み表示していますしかし非同期読み込みに加え RealityViewを Immersive Spaceシーンに加えることでいろいろ可能になります ARKit anchorsで RealityView内に要素を配置したりスペースが開いてる間アプリが手と頭部ポーズデータにアクセスできるため RealityView内でそのデータを使いエンティティを配置できます後程Markがその例をお見せします次は座標空間についてです RealityViewはRealityKitを使用しコンテンツを表示しますですのでRealityView内にエンティティを配置する時座標空間の指向はSwiftUIのレイアウトシステムとは違います SwiftUIではY軸は下向きに Z軸はユーザーの方向に伸びますこれはウインドウやボリューム Immersive Spacesに適応しますしかしRealityKitではY軸は上向きです RealityViewにはまだまだ話題が豊富です「Build spatial experiences with RealityKit」で詳細をご覧くださいではコードを書いてみましょうここでは「World」アプリを簡素化したものを使用してイマーシブなsolar systemを一つ一つ足していきますまずImmersiveSpaceの定義からです WindowGroupのように識別子や値型もしくは両方を割り当てられますこの場合 solar識別子を割り当てます後にスペースをこの識別子で開きますそしてスペースに SolarSystemビューを配置しますまたアプリの単純な基本ウインドウを定義しアプリ起動時に太陽系を見るためのコントロールと共に現れるようにします「World」アプリと似ています WindowGroupで新しいLaunchWindowを定義しスペースを開くコントロールと共に情報を追加しますそのコントロールはボタンですクリックするとタイトルが変わりスペースを開くようにしますウインドウのコントロールは SwiftUIはopenWindowと dismissWindow environment アクションを供給します Immersive Spaceには新しくopenImmersiveSpaceと dismissImmersiveSpace アクションを追加します Environmentから 2つのアクションを得ましたボタンが押された時これらのアクションを使用しますスペースを開く時先程定義した識別子をパスしますスペースは一度に一つしか開かないので dismissImmersiveSpaceアクションには引数は必要ありませんシステムは特定の時間でスペースの出入りを動画化しますこのenvironmentアクションは非同期で動画の完成に反応することができます Immersive Spaceが開かないこともあり openImmersiveSpaceが成功したか失敗したかその結果を通知します適切なエラー処理を行いましょう最初に定義したアプリに戻りここにLaunchWindowを追加します 2つのシーンの順序を見てください LaunchWindowが最初にあるためアプリが起動するとSwiftUIは Launch Windowを表示します起動時 Immersive Spaceは見えませんがユーザーがボタンをクリックすると現れますでは「Simulator」で試してみましょうアプリが起動するとLaunch Windowが見えボタンをクリックするとリビングルームに太陽系が現れます
これで基本ウインドウと太陽系を表示するスペースからなるマルチシーンアプリを定義しました「World」アプリのモデルはご覧になったでしょうイマーシブアプリではスペース内に詳細のある3Dアセットをぜひとも表示したいものですしかしアセットを読み込みアプリでレンダリングできるまで時間がかかることを覚えておきましょうよりよいユーザー体験のため 3Dアセットを非同期的に読み込む Model3Dと RealityView APIsを活用するようにしましょうこのコードではテキストをモデルの読み込み中に表示し失敗すればエラーが表示されますではMarkがスペースの管理と起動についてお話ししますありがとう Raffa ご覧のようにわずか数行のコードで Immersive Spacesを「World」アプリに簡単に統合できましたアプリをイマーシブな体験に変換するにはscene phaseでシステムと共にスペースを管理しスペースとシーンの収束を調整し違うスタイルで表示せねばなりませんほかのSwiftUIシーンタイプのように Immersive Spaceはシステムが扱う同じscene phaseをサポートしますつまりスペースは常に SwiftUIのscene phaseの一つですスペースを開くとactive phaseに移行しますまたいつでもinactive phaseに移行するかもしれません例えばシステムが定義した領域を出たりシステムアラートが出るとスペースとウインドウは一時隠れ inactive phaseに移行しますユーザーが再び体験に入るとスペースとウインドウは姿を表し scene phaseを再びactiveに更新します「World」アプリでは数行のコードの追加で inactive scene phaseに対応できます Earth modelのサイズを半減させスペースの状態が変わったことを示しますまたactive phaseに対応させコンテンツを復元させますスペースはハードウェアやソフトウェアでいつでも終了できますでは「Simulator」でチェックですスペースを開いてアプリのinactive phaseへの対応を試してみます例えばアラートの表示でトリガされるかもしれませんアラートが表示され先程のコードの通りコンテンツのサイズが変わりましたアラートを取り消すと active phaseに反応しスペースが元の大きさに戻ります SwiftUIでこれらの移行の対応と動画化が簡単で便利にできますまた別の管理方法でほかのウインドウからコンテンツをスペースに統合できます例えばメインウインドウの横に地球のモデルを置き直したい場合ウインドウの位置を Immersive Space座標システムで知る必要がありますが両オブジェクトとも独自の座標システムを使用していますこれを解決するためSwiftUIは Immersive Spaceという新しい座標空間を供給しますこれでImmersive Spaceの座標システムを示しますアクセスするには 3Dコンテキストのgeometry reader内のウインドウをカプセル化し transformのような座標空間を受け入れる既存APIを使用し Immersive Space typeでパスし新しい座標システムで proxy.transformを得ますこのtransformでタップで地球の位置を更新します「Simulator」で試しましょうスペースを再び開くと地球とメインウインドウが見えますウインドウの位置を少し変えたので地球をその前に動かします地球をタップし予定通りの位置に動かします座標転換でコンテンツの配置とスペースとウインドウ間のアセットの移動が簡単に行えますまた座標転換は SharePlayのImmersive Spacesでコンテンツの位置を個人のImmersive SpaceだけでなくグループのImmersive Spaceを通し管理できますもしアプリがSharePlayとグループ Immersive Spacesをサポートするならほかの参加者が加わるとシステムはスペースの原点を空間テンプレートに定義された共有場所に移行させます詳細に関しては「Build spatial SharePlay experiences」をご覧ください「World」はscene phasesに対応しほかのウインドウからのものを結合できますがまだスペースの性能をフルに活用していません次はImmersion Stylesで更に向上させましょう Immersion Stylesはスペースコンテンツがどう環境を受け継ぐか違った表現を提供しますコンテンツをmixed styleや目の前にあるprogressive style または周囲を取り巻く full styleで表現できますこれらを活用するためアプリを更新しましょう再びアプリを開き Immersive Spaceを定義した箇所に戻ります現在スペースはデフォルトの mixed immersion styleで solar systemを表示しています Styleの変更は簡単で動的にすることもできますまずImmersionStyleタイプの新しいstate variableを足しスペースのデフォルト値を割り当てますここではmixed styleをキープしますそしてimmersionStyleシーン Modifierを使いスペースにサポートさせたい style listを定義します現在のstyleを参照させるため state variableをバインドとしてパスしますバインドをSolar Systemにパスすると current styleを読み制御してどのmap stylesにも移行できますここではmagnification gestureで移行させ solar systemをスケールすると違うstyleに行くようにします Immersive Spaceの持ち込みがどれだけ簡単か「Simulator」でお見せしましたしかしこれらのstyleが環境とどう働くか知るためにデバイスで試してみましょう後にデバイスでの体験を更に向上できるカスタマイズについてお話ししますスペースのデフォルトである mixed immersion styleで開きますこのスタイルもいいですがもう少しコンテンツに浸り星を見るべきですそこでmagnification gestureを使いコンテンツが大きくなりやがてSpaceは progressive styleに移行しますこれはパススルーとフルイマーシブの橋渡しとなり Immersive Spaceコンテンツを周りの環境と共に目の前のポータルに見ることができますイマーシブですが周りの環境にも意識できます周りの人たちと会話し落ち着く場所に座れ環境ともインタラクトできますいざ落ち着けばDigital Crownを回しイマージョン度を増加することができますすごいでしょう？銀河に浮かぶ宇宙飛行士のようです周りの環境が見たくなれば Digital Crownを逆向きに回しイマージョンを減らしますこれでprogressive style内でイマージョン度を簡単に素早くコントロールできますしかしずっとfull immersionにいたいでしょう周りを囲まれる体験や即座に別世界に行く体験には最適ですこれまでジェスチャーで別のスタイルへの移行がどれだけ簡単か学びました Full immersionも同じでスタイルバインドを更新するため再び地球をスケールアップして体験できます違うスタイル間の移行が簡単でシームレスだったでしょうスペースがフルイマーシブになりました SwiftUIで数行のコードだけで済んだのです Digital Crownを押すといつでも体験を去りたい時にパススルーに戻ることができます
Scene phaseへの反応やスタイルのコントロールでスペースを違った形で管理できますではスペースを更にレベルアップさせましょうデバイスの空間コンピューティング機能はスペース体験を簡単に向上し更にエキサイティングにすることができますではスペースに直接立ち上げたり環境に効果を足したりバーチャルハンドのようなオプションを見てみましょうこのアプリはボタンのクリックでスペースを開きますフルイマーシブなゲームでアプリの起動と同時にイマーシブな体験を立ち上げたいとします Immersive Spaceに直接立ち上げるにはアプリのscene manifestを設定せねばなりません ImmersiveSpace application roleと immersion styleを設定します通常通りスペースコンテンツを設定すると即座に開きますユーザーがスペースを終了するとアプリをウインドウに戻すこともできます次にsurrounding effects preferencesでパススルーを暗くしコンテンツに焦点を当てることができます Progressive styleに移行する時環境を暗くしたいものですそこで太陽系が現れた時周囲の環境が自動的に暗くなるよう preferredSurroundingEffects modifierを darkにセットします upperLimbVisibility modifierはパススルーがなくフルイマーシブなスペースにいる間両手を隠すことができますこのアプリではスペースを開いた時プリファレンスをfalseに設定しますこのように upperLimbVisibilityプリファレンスを変更できます Full immersionで両手を隠しバーチャルハンドを使用できます「World」でスペースグラブをお見せしましょうまずSpaceGlovesというViewを作ります次にRealityViewを足しスペースでグラブをレンダリングできるようにします RealityViewでroot entityを作り entityをレンダーできるようにしますアセットをentityに読み込み rootのchildとして足します Entityの正しい配置に ARKitとそのhand tracking APIを使用し hand tracking systemも開始します次のステップはアセットを手に正しく据え付けることです Hand tracking anchor updatesをチェックします次にhand chiralityをチェックします Anchorと同様にアセットが変形するよう確かめますここではアセットがARKitが供給する joint namesと同じであることを確認ましたこれでanchor skeleton joint namesを正しくマッピングし glove entityが自動的に据え付けられますスペースの定義に戻り SpaceGloves viewを含みますバーチャルハンドに必要なのはそれだけです ARKitのカスタマイズの詳細は「Evolve your ARKit app for spatial experiences」をご覧くださいではデバイスでこれらのカスタマイズを試してみましょう「World」体験が始まりスペースがデフォルトの immersion styleで開きます地球にmagnify gestureを使いアプリはprogressive styleに移行しますスペースが開くとコードにより環境が暗くなります Surrounding Effects APIでパススルーを暗くすることでよりイマーシブになりました適応が簡単で体験に集中できる最適の方法です十分イマーシブですが次のカスタマイズで更に向上することができます先程のコードのように full immersionに移行すると両手が見えなくなり hand trackingを使用して virtual space glovesが現れます ARKitとRealityViewで hand trackingをオンにすると仮想宇宙飛行士のように宇宙をさまよえ素晴らしい気分です
僅かな向上とカスタマイズで「World」アプリを Shared Spaceを超えたフルイマーシブ体験にできましたこのImmersive Space APIを使用して体験を簡単に創造し違うスタイルで引き立たせカスタマイズで創造性を広げることができますこのパワフルで簡単なAPIで環境を一変させる数々のツールを使い新しくイマーシブな体験を創造できますありがとうございました ♪

@main
struct WorldApp: App {
    var body: some Scene {
        ImmersiveSpace {
            SolarSystem()
        }
    }
}

6:53 - RealityView in an ImmersiveSpace

ImmersiveSpace {
    RealityView { content in
        let starfield = await loadStarfield()
        content.add(starfield)
    }
}

8:17 - ImmersiveSpace with a SolarSystem view

@main
struct WorldApp: App {
    var body: some Scene {
        ImmersiveSpace(id: "solar") {
            SolarSystem()
        }
    }
}

9:00 - LaunchWindow

struct LaunchWindow: Scene {
    var body: some Scene {
        WindowGroup {
            VStack {
                Text("The Solar System")
                    .font(.largeTitle)
                Text("Every 365.25 days, the planet and its satellites [...]")
                SpaceControl()
            }
        }
    }
}

9:11 - SpaceControl button using Environment actions for opening and dismissing an ImmersiveSpace scene

struct SpaceControl: View {
    @Environment(\.openImmersiveSpace) private var openImmersiveSpace
    @Environment(\.dismissImmersiveSpace) private var dismissImmersiveSpace
    @State private var isSpaceHidden: Bool = true
    var body: some View {
        Button(isSpaceHidden ? "View Outer Space" : "Exit the solar system") {
            Task {
                if isSpaceHidden {
                    let result = await openImmersiveSpace(id: "solar")
                    switch result {
                        // Handle result
                    }
                } else {
                    await dismissImmersiveSpace()
                    isSpaceHidden = true
                }
            }
        }
    }
}

10:44 - WorldApp using LaunchWindow and ImmersiveSpace

@main
struct WorldApp: App {
    var body: some Scene {
        LaunchWindow()
        ImmersiveSpace(id: "solar") {
            SolarSystem()
        }
    }
}

11:32 - Model3D with phase handling

Model3D(named: "Earth") { phase in
    switch phase {
        case .empty:
            Text( "Waiting" )
        case .failure(let error):
            Text("Error \(error.localizedDescription)")
        case .success(let model):
            model.resizable()
    }
}

13:04 - Scene Phases

@main
struct WorldApp: App {
    @EnvironmentObject private var model: ViewModel
    @Environment(\.scenePhase) private var scenePhase

    ImmersiveSpace(id: "solar") {
        SolarSystem()
            .onChange(of: scenePhase) {
                switch scenePhase {
                case .inactive, .background:
                    model.solarEarth.scale = 0.5
                case .active:
                    model.solarEarth.scale = 1
                }
            }
    }
}

14:21 - Coordinate Conversions

var body: some View {
    GeometryReader3D { proxy in
        ZStack {
            Earth(
                earthConfiguration: model.solarEarth,
                satelliteConfiguration: [model.solarSatellite],
                moonConfiguration: model.solarMoon,
                showSun: true,
                sunAngle: model.solarSunAngle,
                animateUpdates: animateUpdates
            )
            .onTapGesture {
                if let translation = proxy.transform(in: .immersiveSpace)?.translation {
                    model.solarEarth.position = Point3D(translation)
                }
            }
        }
    }
}

16:34 - Immersion Styles

@main
struct WorldApp: App {
   @State private var currentStyle: ImmersionStyle = .mixed
   var body: some Scene {
        ImmersiveSpace(id: "solar") {
            SolarSystem()
                .simultaneousGesture(MagnifyGesture()
                    .onChanged { value in
                        let scale = value.magnification
                        if scale > 5 {
                            currentStyle = .progressive
                        } else if scale > 10 {
                            currentStyle = .full
                        } else {
                            currentStyle = .mixed
                        }
                    }
                )
        }
        .immersionStyle(selection:$currentStyle, in: .mixed, .progressive, .full)
   }
}

20:08 - Surrounding Effects

@main
struct WorldApp: App {
  @State private var currentStyle: ImmersionStyle = .progressive
    var body: some Scene {
        ImmersiveSpace(id: "solar") {
            SolarSystem()
                .preferredSurroundingsEffect( .systemDark)
        }
        .immersionStyle(selection: $currentStyle, in: .progressive)
     }
}

20:30 - Upper Limbs Visibility

@main
struct WorldApp: App {
    @State private var currentStyle: ImmersionStyle = .full
    var body: some Scene {
        ImmersiveSpace(id: "solar") {
            SolarSystem()
        }
        .immersionStyle(selection: $currentStyle, in: .full)
        .upperLimbVisibility(.hidden)
    }
}

20:52 - Hand Anchoring

struct SpaceGloves2: View {

    let arSession = ARKitSession()
    let handTracking = HandTrackingProvider()

    var body: some View {

        RealityView { content in

            let root = Entity()
            content.add(root)

            // Load Left glove
            let leftGlove = try! Entity.loadModel(named: "assets/gloves/LeftGlove_v001.usdz")
            root.addChild(leftGlove)

            // Load Right glove
            let rightGlove = try! Entity.loadModel(named: "assets/gloves/RightGlove_v001.usdz")
            root.addChild(rightGlove)

            // Start ARKit session and fetch anchorUpdates
            Task {
                do {
                    try await arSession.run([handTracking])
                } catch let error as ProviderError {
                    print("Encountered an error while running providers: \(error.localizedDescription)")
                } catch let error {
                    print("Encountered an unexpected error: \(error.localizedDescription)")
                }
                for await anchorUpdate in handTracking.anchorUpdates {
                    let anchor = anchorUpdate.anchor
                    switch anchor.chirality {
                    case .left:
                        if let leftGlove = Entity.leftHand {
                            leftGlove.transform = Transform(matrix: anchor.transform)
                            for (index, jointName) in anchor.skeleton.definition.jointNames.enumerated() {
                                leftGlove.jointTransforms[index].rotation = simd_quatf(anchor.skeleton.joint(named: jointName).localTransform)
                            }
                        }
                    case .right:
                        if let rightGlove = Entity.rightHand {
                            rightGlove.transform = Transform(matrix: anchor.transform)
                            for (index, jointName) in anchor.skeleton.definition.jointNames.enumerated() {
                                rightGlove.jointTransforms[index].rotation = simd_quatf(anchor.skeleton.joint(named: jointName).localTransform)

                            }
                        }
                    }
                }
            }
        }
    }
}

特定のトピックをお探しの場合は、上にトピックを入力すると、関連するトピックにすばやく移動できます。

クエリの送信中にエラーが発生しました。インターネット接続を確認して、もう一度お試しください。

関連する章

リソース

関連ビデオ

WWDC23