SwiftUIにおける空間コンピューティングの概要

太陽系をツアーしながらSwiftUIでvisionOSを探求しましょう。ウインドウ、ボリューム、スペースを通じてまったく新しいアプリの世界を創造する方法を紹介します。天文学アプリを作成しながら、3Dコンテンツを追加し人々を宇宙へといざなうイマーシブな体験を創造して、このプラットフォームでのSwiftUIの使い方を学びます。

リソース

関連ビデオ

WWDC23

ダウンロード

♪ ♪ ♪ こんにちは「SwiftUIにおける空間コンピューティング」にようこそ SwiftUIチームのエンジニアのAndrewです空間コンピューティングにはワクワクします画期的なアプリを作る機会が大きく広がりますここではこのプラットフォームのアプリ開発に必要な情報とそれを可能にするSwiftUIのパワフルな新機能についてお話しします空間コンピューティングのアプリ開発にはSwiftUIが最適です SwiftUIの新機能にはボリュームのような最新の3D機能やフルスペースでのイマーシブな体験新しい3Dジェスチャーや効果にレイアウト RealityKitとの統合などまだたくさんありますこれらの新しい機能はSwiftUIだけに存在しますまた　アプリの既存コードがあればほとんどがそのまま作動しますでも新しいコードは SwiftUIで書くのが一番です SwiftUIの可能性を信じているため SwiftUIでシステムを一から構築しましたボタンやトグルやTabViewなど主要基礎的要素から Home Viewやコントロールセンターそして親しみのある TVやSafariなどのアプリから Freeformの3D boardsなど新体験に加え Keynoteのイマーシブなリハーサルなど SwiftUIはこれらの原動力となりまたそれ以上のことを提供します SwiftUIでアプリのインターフェイスを設計し賢いデフォルトの選択をシステムにまかせます一度このコンセプトを学べばどこにでも応用できますこれは新プラットフォームではさらに役に立ちます既存のSwiftUIの知識がまったく新しい見た目や体験にシームレスに移されますボタンを見てみましょうこのシステムのボタンはほかのプラットフォームのものと似ています例えばmacOSでは bordered styleがデフォルトでボタンに使われていますしかしプラットフォームの特徴に合わせるためいくつかの違いがボタンにありますシミュレータをつかって詳細に見てみましょうこのようなBordered buttonsは鮮やかな背景を使っていますそして目や手及びポインター入力に反応するホバーエフェクトが得られますまたボタンを押すとスケールダウンして音を出すこともできますまたナビゲーションバーのボタンなどは視線でフォーカスすると　ラベルを示しツールチップを自動的に表示することもできますまたTabViewはアプリの端に設置されコンテンツを遮ることなく手早く簡単なナビゲーションを提供しますまたTabViewは視線でフォーカスがあたるだけで拡張してラベルなどの詳細を表示できます TabViewはSwiftUIがいかにしてプラットフォームの特性を活かす例でありインターフェイスを見たものに反応させることができますナビゲーションからプレゼンテーションそしてコントロールやインタラクションまでこの同じデザインをアプリの主なブロック要素に適用していますこれらはデフォルトとして提供されるのでアプリ開発のスタート時点からみなさんはアプリ自体をよくすることに　集中できますそれだけではありません SwiftUIは3D環境のために作られた最新APIも数々含まれていますそれらはシーンから始まります SwiftUIのアプリは複数のシーンで構成され一つのシーンは複数のviewsで構成されていますシーンははアプリの最も上位のエントリポイントで 1つ以上のウインドウを表示する WindowGroupがその例です空間コンピューティングには 3つのシーンタイプがあり　ウインドウボリューム　そして　フルスペースですウインドウは従来とおなじインターフェイスに最適です SafariやFreeformのようなリッチで完成されたアプリから軽量なメニューを提供するようなアプリまでサポートしますまたMindfulnessのようなイマーシブな体験もありますボリュームは物体を表示したり限られた空間の中で体験を提供するために作られた 3Dウインドウですボリュームは他のアプリと共に表示できライトな3D体験の作成に適したツールです Quick Lookの3Dモデルや FaceTimeで友達とボードゲームで遊べますそしてフルスペースでリッチでイマーシブなアプリを作成できますアプリがすべてをコントロールしほかのウインドウを隠しどこでもコンテンツを配置できます周りの環境とつながったまま実世界を拡張させたりまったく新しい体験に浸らせることもできます Keynoteでのリアルなリハーサルやスリルなゲームまでフルスペースで可能性が広がりますそれらは同時に使用できますそして目的別にデザインされており組み合わせたりしてアプリのニーズに応えられます建築モデルの軽量な3Dプレビューをウインドウからボリュームとして表示できます。また、ボリュームからフルスペースを表示させイマーシブな環境を作ることもできます同じタイプのシーンを幾つか使ってアプリを独立したスペースに配置すれば個別にウインドウを開閉することができますではこれらのシーンの種類を詳しく見てみましょうまずはウインドウからです私は天文学のファンで仲間と地球と太陽系について学ぶことができるアプリを作っていますアプリは順調に開発が進みしっかりとした紹介ページをウインドウで作成しましたでもさらなるプランがありますこの作成には全プラットフォームで使える WindowGroup APIを使用しましたそれにより macOSやiPadOS同様　複数のウインドウ作成が自動的にサポートされていますさらに新しい機能を足そうと思います太陽系と宇宙について豆知識を集めたライブラリです天文学の生徒の役に立ちますねでもこの機能をどこに追加すればよいのか迷っていました答えを見つけるためウインドウの構造を基礎的要素に分割しますウインドウは美しいガラスの背景から始まりコンテンツを明確に見せながらも周囲にうまく溶け込んでいますまたここではほかのプラットフォームと同じナビゲーションコンテナを使えます例えばTabViewでアプリをトップレベルのコンポーネントに分割しウインドウの上に表示できますまたNavigationStackやNavigationSplitViewでアプリの階層を整理し情報を表示できます iPadOSの構造に似ています Listsも情報整理のためのパワフルなツールでその美しいスタイルは非常にフィットしていますまたインタラクティブ性をボタンやトグルやピッカーなどのコントロールで追加することもできます今回のライブラリには TabViewがよさそうです各コンテンツのトップにいつでもアクセスできるので深い知識へのアクセスをタップひとつで切り替えられますまずTabViewでコンテンツを囲い各tabにlabel付きのtabItemを設定しますよさそうですね! TabViewはユニークな外観で端にぶら下がっています TabViewにはSwiftUIに加わった新概念のオーナメントがありますオーナメントはウインドウに付属的なビューをつけたしウインドウの枠外にまで拡張できますウインドウには属さない追加するコントロールに最適でコンテンツを邪魔しませんまたornament modifierで独自のオーナメントを作ることもできますではLibrary detail viewを見てみましょう既に作成途中ですが概要に関するテキストや興味深い統計情報が配置されそして水平方向にスクロールできる豆知識のリストもありますでも何かが足りませんそれが何か知るためにアプリのマテリアルをみてみましょうウインドウにはデフォルトで美しいガラス背景がありますガラスは鮮やかな素材のデザインでアプリに視覚的なレイヤー表示を提供しますガラスは自動的に環境に適応しどこで使われてもコンテンツを読みやすくしどの設定でもアプリの見栄えがよくなりますつまりここでは外観の明暗を気にする必要がなくマテリアルにすべてを任せられますではマテリアルで Library tabを調和し読みやすさを向上させます StatsGridからです現在StatsGridは TitleとGrid自体からつくられたVStackです Material backgroundを与えてこのカードを目立たせましょう Regular materialを使いますガラスの上に鮮やかで暗い背景を加えカードの形が落ち着き文字が読みやすくなります丸角長方形であるrectを選び paddingを足し見栄えをよくしました豆知識カードも同様にしますずっとよくなりました！次は豆知識カードですズームして詳細を見ますこのカードはボタンになっておりクリックと詳細が見れますまたbutton styleですてきな素材背景を供給していますボタンの中身はタイトルと本文　そして脚注がありタップすると詳細が見れますでもLearn moreのテキストがすこしだけ重く見えますそこでsecondary foreground styleを textに使いますご覧のように secondary styleは自動的に背景に適応し鮮やかな色彩変化を与えてしっかりと読めるように本文を際立たせていますこれらの階層的なshape stylesは視覚的に重要性を表現しコンテキストに基づき SwiftUIが自動的に適応させますこれらのshape styleやmaterial APIsでどんなコンテキストやプラットフォームでも素晴らしいインターフェイスが作成できます次はインタラクションです空間コンピューティングに新しいインタラクション方法が加わります最も一般的なのは単に要素を見ることと間接的なピンチジェスチャーでのタップですまた両手を伸ばしてタッチしてアプリとインタラクトする直接的な方法もありますまた接続されたタッチパッドで、ハンドジェスチャーや正確な入力のポインターとして使用できますまたハードウェアキーボードでもショートカットやフォーカスをサポートしますそしてkey modifiersでアプリでの生産性を改善できます最後にVoiceOverや Switch Controlなど馴染みのあるアクセシビリティ技術もサポートしていますさらにSwiftUI controlsは最初からアクセシブルでほとんどの作業を行うためのアプリの素晴らしい体験を誰にでも提供することができるのです既にSwiftUIで TapGestureやDragGestureなどの馴染みあるジェスチャーを使えそれらが自動的に適応されますまた新しいジェスチャーで新しい3Dインタラクションが可能です RotateGesture3Dでは両手かトラックパッドでビューを3次元に回転できますもちろんほかのプラットフォームのアクセシビリティAPIや技術も使用できます VoiceOverやrotorsやDynamic Type Invert Colorsはその一部ですそしてまた多くの機能はこのプラットフォームのために再設計され Dwell Controlは目だけでアプリを操作することができますこれらの素晴らしい機能とアクセシビリティについては「Create accessible spatial experiences」をご覧ください空間コンピューティングにおいて簡単で直感的に操作できるのがホバーエフェクトです例えば操作可能な viewを見るだけでシステムはうっすらとハイライトを与えインタラクト可能だと示しますこれらの効果は入力方法に対して自動的に適応し安心感を与えますさらにホバーエフェクトはターゲットを設定するための手助けにもなります視線によって、アプリから反応を得られるのはホバーエフェクトだけですまたプライバシーを重視するためこの処理はアプリ外で行われますホバーエフェクトは自動的にボタンやトグルなど多くのコントロールに追加されます SwiftUIが提供するスタイルを使用すればこれらは自動的にアプリに追加されますカスタムコントロールであればホバーエフェクトを追加して簡単に使えるようにしましょうそれでは先程の豆知識カードに戻ってホバーエフェクトの応用例を見てみますカードの見た目はなかなかですが問題がありますカスタムButtonStyleを使ったのでホバーエフェクトを足さねばこのボタンがインタラクティブだと示す反応がありませんしかしこれは簡単に直せます現在ButtonStyleには paddingとbackgroundが labelにあるだけですホバーエフェクトを追加するには ButtonStyleに hoverEffect modifierを足しますこれで自動的に状況に合う効果が選ばれますこの場合 highlight effectですでは詳細を見てみましょうカードのボタンを見るとうっすらとしたハイライトでインタラクティブだと分かりますこの効果は自動的に背景の形にマッチしみんなが豆知識を見逃すことはありませんウインドウを使ったアプリ開発についてさらに学びたければ「Elevate your windowed app for spatial computing」でマルチプラットフォームアプリの更新やオーナメントの足し方ホバーエフェクトやマテリアルの詳細などを学ぶことができますそれでは次の次元であるボリュームについてです宇宙に興味がある仲間に地球を別の観点から見れるようにしましょうそれにはボリュームがピッタリですボリュームを足すにはウインドウで使った WindowGroup シーンを使い volumetric window styleと設定しますまたコンテンツが収まるよう default sizeも設定しますではシミュレータで見てみましょうこのボリュームでは RealityKitにあるModel3D APIで地球の3Dモデルを表示しています Model3D使えば　3Dコンテンツを簡単に足すことができます Model3Dは画像を表示するのと同様に美しい3Dコンテンツを簡単に読み込み表示できますただし画像読み込みとは異なり Model3Dは常に非同期で読み込みます 3Dコンテンツは読み込みと表示に時間がかかるからです AsyncImage viewのように Model3Dはコンテンツの読み込み中自動的にプレースホルダーを表示しもしくは独自のプレースホルダーも表示できますここで重要なことは Model3DはSwiftUI Viewであるということですいままでと同じ世界観で 3DをSwiftUIアプリに持ち込むことができますレイアウトシステムや視覚効果ジェスチャーなどはすでにご存知の概念ですではこのアプリで試してみましょうコントロールで地球に息を吹き込みます Control panel UIは作成済みで地球モデルの前に置くことにしますそのためにZStackレイアウトを使います ZStackのようなレイアウトは高さや幅と同様に奥行きも既にもっています Model3Dは自動的に 2Dのイメージ同様にコンテンツのサイズを調整します実際レイアウトシステムがコンテンツの奥行きとスペースに応じてレイアウトを調節しますまた奥行きのレイアウトに対する動作を制御するmodifierがあり padding3D modifierは SwiftUI viewsの前と後ろにスペースを追加しますではコントロールの配置に使用してみましょうボリュームはどの角度でも見られるためコンテンツの配置を 3次元で考える必要があります最後にコントロールの見た目を良くし　調和させるため glassBackgroundEffect modifierで先程のウインドウのような美しいガラス感を与えることにしますこれでコントロールが完成しましたこの地球をスピンさせ場所をランダムに選べる方法を追加しましょう次の休暇先を選ぶのに　お気に入りの方法です 3D rotation effectをModel3Dに足しますここではY軸を操作します State variableで回転を追跡しますタップされると回転が変わるように bouncy spring animationでタップジェスチャーを足します試してみましょうああ西半球か！次の休暇先が狭まりましたね今の効果が実に3Dだと気付きましたか？みなさんもご存知の geometry effectsにスケールやオフセットなどの3D能力を追加したのですこれでもなかなかだとは思いますがまだ改善できます新しいSwiftUI Viewで RealityKitが持つパワフルな機能に簡単にアクセスできる RealityViewを使います RealityViewでクロージャを設定し RealityKitコンテンツを表示させます Earth modelの表示に ModelEntityを用意し　読み込むのを待ちます読み込み終わったら RealityViewのコンテンツに追加します RealityViewのクロージャで async-awaitを直接使用できますコンテンツが読み込まれるまで Model3D同様　プレースホルダーが表示されます Earth entityを読み込み RealityKit APIsライブラリにアクセスしコンテンツをブラッシュアップできますここでは地球に光を当て明るい感じを与えようと思います既にRealityKitでImage-based lightingというコードを書いてあるためここに呼び出しますなかなかよくなりました！ RealityViewのトピックはまだまだあります RealityViewでインターフェイスの世界とリッチな3D体験のブレンドが非常に簡単になりました RealityKitでcustom materials、シェーダー物理演算など様々なリッチな要素を追加できます RealityViewとRealityKitについてさらに詳細を学ぶSession 「Build spatial experiences with RealityKit」をご覧くださいここではRealityViewの 2機能に焦点を当てます gesturesとattachmentsです RealityViewでは SwiftUI gesturesが自動的に付与されるので 3Dコンテンツに息を吹き込むのが簡単です先程追加したタップジェスチャーと同じ機能を追加するためタップした場所を取得しマーカーを付け休暇先を特定できるようにしますそのためにSpatialTapGestureを使えばタップした3Dの位置がわかります地球のどこをタップしたかを確認するため targetedToAnyEntity gesture modifierを使用しますこれによりどの部分をタップしそれがどこを示すのかといった情報が得られますそれを使ってピンの位置を調べ出します地球にピンを表示するため RealityView attachmentsを使います Attachmentsクロージャは custom SwiftUI viewsとRealityKit entitiesを一緒に動作させるために最適な機能ですほかのSwiftUI viewsも RealityViewのattachments クロージャ内で直接足せるため RealityViewのどこにでも RealityKit entitiesとして配置できますここではpin attachmentを足し確認のtagを足しますそしてupdateクロージャで attachmentのためのentityを探し RealityViewのcontentに足し表示しますそしてそのentityをタップした場所に配置しますではスピンしてみましょうすぐに荷造りを始めるべきですね！ Volumetricアプリは可能性に満ちています「Take SwiftUI to the next dimension」というセッションでは SwiftUIをRealityKitと使いリッチな3Dインタラクションを構築しレイアウトに奥行きを追加するといったトピックを用意しているのでぜひご覧ください最後にSwiftUIを使ってリッチでイマーシブな3D体験を作れるフルスペースについてお話ししましょうフルスペースではフルコントロールを可能にしますどこにでもコンテンツを配置できクリエイティブな新しい形で環境を拡張できますまたまったく新しい体験を創造するため周囲を隠して　イマーシブにできますでは宇宙に飛び出し太陽系を生き返らせましょう既にメインウインドウでこのページを作りお茶の間宇宙飛行士を宇宙旅行に招待していますあとは空間を作り上げ発射ボタンを用意するだけですフルスペースを足すには WindowGroupsの時と同様に ImmersiveSpace sceneを足しますボディ内にスペースのコンテンツの root viewを供給しますまたスペースのIDも供給してプログラムに従いメインウインドウを開かせますこのスペースを新しく開くために openImmersiveSpace environment actionを使います Button内でアクションを起こしスペースのIDっをパスしますそうすると… 発射成功です！いいスタートですこれまでにない方法で地球に近づくことができますリアルな雲などの詳細な描画には感動を覚えるほどですしかし何かが足りません本当に宇宙にいるように感じたいそのためにパワフルなツールを使います immersion stylesですフルスペースにはいくつかのimmersion stylesがあり簡単に切り替えることができます Mixed immersionではコンテンツが実世界と共存しており軽い体験や環境の拡張に最適のスタイルです Full immersionではアプリは完全にイマーシブで周りの環境を隠し素晴らしい新たな世界に送られます Progressive immersionはその中間で周りの環境を残すことができます Progressive immersionではデバイスにあるDigital Crownで没入度合いを調節できますこのアプリでは　現実から離れたいので full immersionがピッタリですそれを実現するため ImmersiveSpace sceneに戻り immersionStyle modifierを足し full immersion styleを指定しますここでサポートするスタイルのリストと現在のselectionを設定しスタイルを瞬時に変えられるようにします Full immersionを使うとシステムは実世界の環境を完全に隠しますイマーシブにするため　代わりの仮想環境を提供せねばなりませんもちろん今回は宇宙空間しかありません新しいRealityViewを作り宇宙空間を映し出します RealityViewのmakeクロージャで star field entityを読み込み　用意ができたら RealityViewのコンテンツに足しますそしてStarfield viewを地球と太陽の横の太陽系ボディに足しますではズームしてみましょう

まさに宇宙空間に漂う星たちって感じですね

アプリをさらによくするため ARKitを使用できます ARKitはシステムと深く統合されたパワフルなフレームワークで実世界の環境にリアルタイムにアクセスでき world trackingや scene understandingなどのAPIsでコンテンツを実世界の表面に配置できます新しいツールであるハンドトラッキングはカスタムハンドジェスチャーが作れコンテンツとリアルに接するなどの操作を可能にします ARKitをスペースでどう使えるかは「Meet ARKit for spatial computing」をご覧ください ARKitを使えば私のアプリの可能性も広がりますそこでもう一つ機能をお見せしましょう ARKitをスペースに統合させハンドジェスチャーで地球を呼び出せるようにしましたこれで宇宙空間を手で操作が可能ですフルスペースの可能性はまだまだありますスペースに飛び出す方法をご紹介する「Go beyond the window with SwiftUI」でスペースの基本についてさらに掘り下げ環境に効果を足したりバーチャルハンドを表示させたり SharePlayとの統合などを学ぶことができますまたスペースにおけるコンテンツのレンダリングは Metalでコントロールでき CompositorServices frameworkを使用できます詳細は「Discover Metal for immersive apps」をご覧ください SwuiftUIで皆さんがどのような素晴らしいアプリを作るのか非常に楽しみです美しいウインドウやボリュームでの新しい次元そしてフルスペースのイマーシブな体験など可能性が待っていますもっと学びたいならさらなるトピックもカバーしています「Principles of Spatial Design」でアプリを輝かせるデザインを学ぶことができます既存のUIKitコードを利用したい場合は「Meet UIKit for spatial computing」をご覧くださいありがとうございました空間コンピューティングを楽しんでください！ ♪

2:02 - Button

Button("Of course") {
  // perform action
}

2:41 - Toggle Favorite

Toggle(isOn: $favorite) {
    Label("Favorite", systemImage: "star")
}

2:48 - TabView

TabView {
    DogsTab()
        .tabItem {
            Label("Dogs", systemImage: "pawprint")
        }

    CatsTab()
        .tabItem {
            Label("Cats", image: "cat")
        }

    BirdsTab()
        .tabItem {
            Label("Birds", systemImage: "bird")
        }
}

3:37 - World App

@main
struct WorldApp: App {
    var body: some Scene {
        WindowGroup("Hello, world") {
            ContentView()
        }
    }
}

7:03 - World TabView

@main
struct WorldApp: App {
    var body: some Scene {
        WindowGroup("Hello, world") {
            TabView {
                Modules()
                    .tag(Tabs.menu)
                    .tabItem {
                        Label("Experience", systemImage: "globe.americas")
                    }
                FunFactsTab()
              	    .tag(Tabs.library)
                    .tabItem {
                        Label("Library", systemImage: "book")
                    }                    
            }
        }
    }
}

8:42 - Stats Grid Section

VStack(alignment: .leading, spacing: 12) {
    Text("Stats")
        .font(.title)

    StatsGrid(stats: stats)
        .padding()
        .background(.regularMaterial, in: .rect(cornerRadius: 12))
}

9:23 - Fun Fact Button

Button(action: {
    // perform button action
}) {
    VStack(alignment: .leading, spacing: 12) {
        Text(fact.title)
            .font(.title2)
            .lineLimit(2)
        Text(fact.details)
            .font(.body)
            .lineLimit(4)
        Text("Learn more")
            .font(.caption)
            .foregroundStyle(.secondary)
    }
    .frame(width: 180, alignment: .leading)
}
.buttonStyle(.funFact)

13:15 - FunFactButtonStyle

struct FunFactButtonStyle: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .padding()
            .background(.regularMaterial, in: .rect(cornerRadius: 12))
            .hoverEffect()
            .scaleEffect(configuration.isPressed ? 0.95 : 1)
    }
}

14:17 - Globe Volume

@main
struct WorldApp: App {
    var body: some Scene {
        WindowGroup {
            Globe()
        }
        .windowStyle(.volumetric)
        .defaultSize(width: 600, height: 600, depth: 600)
    }
}

14:36 - Model3D

import SwiftUI
import RealityKit

struct Globe: View {
    var body: some View {
        Model3D(named: "Earth")
    }
}

15:40 - Globe with rotation and controls

struct Globe: View {
    @State var rotation = Angle.zero
    var body: some View {
        ZStack(alignment: .bottom) {
            Model3D(named: "Earth")
                .rotation3DEffect(rotation, axis: .y)
                .onTapGesture {
                    withAnimation(.bouncy) {
                        rotation.degrees += randomRotation()
                    }
                }
                .padding3D(.front, 200)
            
            GlobeControls()
                .glassBackgroundEffect(in: .capsule)
        }
    }

    func randomRotation() -> Double {
        Double.random(in: 360...720)
    }
}

17:30 - RealityView

RealityView { content in
    if let earth = try? await
        ModelEntity(named: "Earth")
    {
       earth.addImageBasedLighting()
       content.add(earth)
    }
}

18:57 - RealityView Gesture

struct Earth: View {
		@State private var pinLocation: GlobeLocation?

    var body: some View {
        RealityView { content in
            if let earth = try? await
                ModelEntity(named: "Earth")
            {
               earth.addImageBasedLighting()
               content.add(earth)
            }
        }
				.gesture(
            SpatialTapGesture()
                .targetedToAnyEntity()
                .onEnded { value in
                    withAnimation(.bouncy) {
                        rotation.degrees += randomRotation()
                        animatingRotation = true
                    } completion: {
                        animatingRotation = false
                    }
                    pinLocation = lookUpLocation(at: value)
                }
        )
    }
}

19:34 - RealityView Attachments

struct Earth: View {
		@State private var pinLocation: GlobeLocation?

    var body: some View {
        RealityView { content in
            if let earth = try? await
                ModelEntity(named: "Earth")
            {
               earth.addImageBasedLighting()
               content.add(earth)
            }
        } update: { content, attachments in
            if let pin = attachments.entity(for: "pin") {
                content.add(pin)
                placePin(pin)
            }
        } attachments: {
            if let pinLocation {
                GlobePin(pinLocation: pinLocation)
                    .tag("pin")
            }
        }
				.gesture(
            SpatialTapGesture()
                .targetedToAnyEntity()
                .onEnded { value in
                    withAnimation(.bouncy) {
                        rotation.degrees += randomRotation()
                        animatingRotation = true
                    } completion: {
                        animatingRotation = false
                    }
                    pinLocation = lookUpLocation(at: value)
                }
        )
    }
}

21:11 - ImmersiveSpace

@main
struct WorldApp: App {
    var body: some Scene {
				// (other WindowGroup scenes)

        ImmersiveSpace(id: "solar-system") {
            SolarSystem()
        }
    }
}

21:25 - Open ImmersiveSpace Action

@Environment(\.openImmersiveSpace)
private var openImmersiveSpace

Button("View Outer Space") {
    openImmersiveSpace(id: "solar-system")
}

22:50 - ImmersionStyle

@main
struct WorldApp: App {
    @State private var selectedStyle: ImmersionStyle = .full
    var body: some Scene {
				// (other WindowGroup scenes)

        ImmersiveSpace(id: "solar-system") {
            SolarSystem()
        }
        .immersionStyle(selection: $selectedStyle, in: .full)
    }
}

23:17 - Starfield

struct Starfield: View {
    var body: some View {
        RealityView { content in
            let starfield = await loadStarfield()
            content.add(starfield)
        }
    }
}

23:28 - SolarSystem

struct SolarSystem: View {
    var body: some View {
        Earth()
        Sun()
      	Starfield()
    }
}

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

SwiftUIにおける空間コンピューティングの概要

関連する章

リソース

関連ビデオ

WWDC23