{"id":3280,"date":"2023-06-10T14:16:53","date_gmt":"2023-06-10T18:16:53","guid":{"rendered":"https:\/\/michaelrowe01.com\/?p=3280"},"modified":"2023-06-10T14:16:55","modified_gmt":"2023-06-10T18:16:55","slug":"go-beyond-the-window-with-swiftui","status":"publish","type":"post","link":"https:\/\/michaelrowe01.com\/index.php\/blog\/go-beyond-the-window-with-swiftui\/","title":{"rendered":"Go beyond the window with SwiftUI"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"660\" height=\"371\" data-attachment-id=\"3283\" data-permalink=\"https:\/\/michaelrowe01.com\/index.php\/blog\/go-beyond-the-window-with-swiftui\/attachment\/go-beyond-the-window\/\" data-orig-file=\"https:\/\/i0.wp.com\/michaelrowe01.com\/wp-content\/uploads\/2023\/06\/Go-beyond-the-window.png?fit=1920%2C1080&amp;ssl=1\" data-orig-size=\"1920,1080\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Go-beyond-the-window\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/michaelrowe01.com\/wp-content\/uploads\/2023\/06\/Go-beyond-the-window.png?fit=660%2C371&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/michaelrowe01.com\/wp-content\/uploads\/2023\/06\/Go-beyond-the-window.png?resize=660%2C371&#038;ssl=1\" alt=\"\" class=\"wp-image-3283\" srcset=\"https:\/\/i0.wp.com\/michaelrowe01.com\/wp-content\/uploads\/2023\/06\/Go-beyond-the-window.png?resize=1024%2C576&amp;ssl=1 1024w, https:\/\/i0.wp.com\/michaelrowe01.com\/wp-content\/uploads\/2023\/06\/Go-beyond-the-window.png?resize=300%2C169&amp;ssl=1 300w, https:\/\/i0.wp.com\/michaelrowe01.com\/wp-content\/uploads\/2023\/06\/Go-beyond-the-window.png?resize=768%2C432&amp;ssl=1 768w, https:\/\/i0.wp.com\/michaelrowe01.com\/wp-content\/uploads\/2023\/06\/Go-beyond-the-window.png?resize=1536%2C864&amp;ssl=1 1536w, https:\/\/i0.wp.com\/michaelrowe01.com\/wp-content\/uploads\/2023\/06\/Go-beyond-the-window.png?w=1920&amp;ssl=1 1920w, https:\/\/i0.wp.com\/michaelrowe01.com\/wp-content\/uploads\/2023\/06\/Go-beyond-the-window.png?w=1320&amp;ssl=1 1320w\" sizes=\"auto, (max-width: 660px) 100vw, 660px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">How to leverage VisionOS using SwiftUI, many of the tools and frameworks have been extended over the last few years.&nbsp; Making AR more accessible across devices and platforms.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This is all about the Immersive Space in VisionOS.&nbsp; Both Windows and volumes let you display content within their bounds.&nbsp; To go outside of the window you must use the immersive space.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Spaces are a container to present your UI<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Get Started with Spaces<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Extending the \u201cHello World\u201d app to explore the solar system.&nbsp; Begin with defining an ImmersiveSpace,&nbsp; while one ore more space can be created within an app.&nbsp; You can only have one open at a time.<\/li>\n\n\n\n<li>Opening a space replaces the shared space with your Full Space, an implicitly defines it\u2019s on coordinate system.&nbsp; Based on the user\u2019s position<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Display Content<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>It is a scene type, so you can place any SwiftUI view in it.&nbsp; Anything you place uses the same system you are used to, but since the origin is the users feet, you will want to adjust by using RealityView.&nbsp; RealityView has built in support for asynchronous loading.&nbsp; You use ARKit anchors of placement.<\/li>\n\n\n\n<li>Remember that RealityKit uses different system than SwiftUI.&nbsp; Check out <a href=\"http:michaelrowe01.com\/index.php\/blog\/build-spatial-experiences-with-realitykit\/\">Build Spatial experience to RealityKit<\/a> (WWDC23)<\/li>\n\n\n\n<li>You should define a id or value type or both.&nbsp; For controlling you have .openImmersiveSpace and .dismissImmersiveSpace actions from the @Environment, the system will automatically animate the animation.&nbsp; They are asynchronous so you can act on them when they succeed.<\/li>\n\n\n\n<li>Sequence of windows in a Scene will decide which one shows up first.<\/li>\n\n\n\n<li>You should use Model3D for asynchronous loading of your assets&nbsp;<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Managing your Space<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Scene management and coordinate conversion are key to understand.&nbsp;<\/li>\n\n\n\n<li>Scene phases should be handled to let user know what is doing one, for when an alert pops up or other interactions.\n<ul class=\"wp-block-list\">\n<li>You can do things like changing scale to let user know<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>To do repositioning, items between swiftUI and 3D content take a look at this graphic<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"660\" height=\"371\" data-attachment-id=\"3282\" data-permalink=\"https:\/\/michaelrowe01.com\/index.php\/blog\/go-beyond-the-window-with-swiftui\/attachment\/screenshot-2023-06-10-at-12-02-56-2\/\" data-orig-file=\"https:\/\/i0.wp.com\/michaelrowe01.com\/wp-content\/uploads\/2023\/06\/Screenshot-2023-06-10-at-12.02.56-2.png?fit=1920%2C1080&amp;ssl=1\" data-orig-size=\"1920,1080\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Screenshot-2023-06-10-at-12.02.56-2\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/michaelrowe01.com\/wp-content\/uploads\/2023\/06\/Screenshot-2023-06-10-at-12.02.56-2.png?fit=660%2C371&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/michaelrowe01.com\/wp-content\/uploads\/2023\/06\/Screenshot-2023-06-10-at-12.02.56-2.png?resize=660%2C371&#038;ssl=1\" alt=\"\" class=\"wp-image-3282\" srcset=\"https:\/\/i0.wp.com\/michaelrowe01.com\/wp-content\/uploads\/2023\/06\/Screenshot-2023-06-10-at-12.02.56-2.png?resize=1024%2C576&amp;ssl=1 1024w, https:\/\/i0.wp.com\/michaelrowe01.com\/wp-content\/uploads\/2023\/06\/Screenshot-2023-06-10-at-12.02.56-2.png?resize=300%2C169&amp;ssl=1 300w, https:\/\/i0.wp.com\/michaelrowe01.com\/wp-content\/uploads\/2023\/06\/Screenshot-2023-06-10-at-12.02.56-2.png?resize=768%2C432&amp;ssl=1 768w, https:\/\/i0.wp.com\/michaelrowe01.com\/wp-content\/uploads\/2023\/06\/Screenshot-2023-06-10-at-12.02.56-2.png?resize=1536%2C864&amp;ssl=1 1536w, https:\/\/i0.wp.com\/michaelrowe01.com\/wp-content\/uploads\/2023\/06\/Screenshot-2023-06-10-at-12.02.56-2.png?w=1920&amp;ssl=1 1920w, https:\/\/i0.wp.com\/michaelrowe01.com\/wp-content\/uploads\/2023\/06\/Screenshot-2023-06-10-at-12.02.56-2.png?w=1320&amp;ssl=1 1320w\" sizes=\"auto, (max-width: 660px) 100vw, 660px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Note that the window and the 3D object use the Y axis differently.&nbsp; You can use transform(in: .immersiveSpace) you will get a conversion.<\/li>\n\n\n\n<li>There may be conversions you need to handle between private immersive space vs. Group Immersive Space<\/li>\n\n\n\n<li>Immersion Styles\n<ul class=\"wp-block-list\">\n<li>This is different presentation for how your environment looks; Mixed, progressive, or Full<\/li>\n\n\n\n<li>By default Mixed, you can use a scene modifier .immersionStyle to define the types your scene supports.<\/li>\n\n\n\n<li>Progressive style allows you to see people around you and have some interaction, you can choose the level of progression, but if you go all the way it will take you to full immersion\n<ul class=\"wp-block-list\">\n<li>By pressing the digital crown you go back to passthrough<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Customization<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"660\" height=\"140\" data-attachment-id=\"3281\" data-permalink=\"https:\/\/michaelrowe01.com\/index.php\/blog\/go-beyond-the-window-with-swiftui\/attachment\/space-customization-scene-manifest-image-tracking\/\" data-orig-file=\"https:\/\/i0.wp.com\/michaelrowe01.com\/wp-content\/uploads\/2023\/06\/Space-customization-Scene-manifest-Image-tracking-.png?fit=1812%2C384&amp;ssl=1\" data-orig-size=\"1812,384\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Space-customization-Scene-manifest-Image-tracking-\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/michaelrowe01.com\/wp-content\/uploads\/2023\/06\/Space-customization-Scene-manifest-Image-tracking-.png?fit=660%2C140&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/michaelrowe01.com\/wp-content\/uploads\/2023\/06\/Space-customization-Scene-manifest-Image-tracking-.png?resize=660%2C140&#038;ssl=1\" alt=\"\" class=\"wp-image-3281\" srcset=\"https:\/\/i0.wp.com\/michaelrowe01.com\/wp-content\/uploads\/2023\/06\/Space-customization-Scene-manifest-Image-tracking-.png?resize=1024%2C217&amp;ssl=1 1024w, https:\/\/i0.wp.com\/michaelrowe01.com\/wp-content\/uploads\/2023\/06\/Space-customization-Scene-manifest-Image-tracking-.png?resize=300%2C64&amp;ssl=1 300w, https:\/\/i0.wp.com\/michaelrowe01.com\/wp-content\/uploads\/2023\/06\/Space-customization-Scene-manifest-Image-tracking-.png?resize=768%2C163&amp;ssl=1 768w, https:\/\/i0.wp.com\/michaelrowe01.com\/wp-content\/uploads\/2023\/06\/Space-customization-Scene-manifest-Image-tracking-.png?resize=1536%2C326&amp;ssl=1 1536w, https:\/\/i0.wp.com\/michaelrowe01.com\/wp-content\/uploads\/2023\/06\/Space-customization-Scene-manifest-Image-tracking-.png?w=1812&amp;ssl=1 1812w, https:\/\/i0.wp.com\/michaelrowe01.com\/wp-content\/uploads\/2023\/06\/Space-customization-Scene-manifest-Image-tracking-.png?w=1320&amp;ssl=1 1320w\" sizes=\"auto, (max-width: 660px) 100vw, 660px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A Scene Manifest is used to launch your app directly to full immersion &#8211; This is in the Info.plist by setting the UIApplicationPreferredDefaultSceneSessionRole to UISceneSessionRoleImmersiveSpaceApplication<\/li>\n\n\n\n<li>If you want to toggle back to a window set UISceneInitialImmersionStyle to UIImmersionStyleMixed&nbsp;<\/li>\n\n\n\n<li>.preferredSurroundingEffect to set the effects when you change to Full Immersion&nbsp;<\/li>\n\n\n\n<li>Hiding hands means you can show virtual hands instead &#8211; you use RealityView to do this. The hands are an entity, using ARKit and Hand tracking API.&nbsp; Check for hand tracking anchors and updates.&nbsp; By using Transform to the anchor.&nbsp; Look at session \u201cEvolve your ARKit app for spatial experiences\u201d from WWDC 23.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>How to leverage VisionOS using SwiftUI, many of the tools and frameworks have been extended over the last few years.&nbsp; Making AR more accessible across devices and platforms. This is all about the Immersive Space in VisionOS.&nbsp; Both Windows and volumes let you display content within their bounds.&nbsp; To go outside of the window you [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_wp_convertkit_post_meta":{"form":"-1","landing_page":"0","tag":"0","restrict_content":"0"},"hide_page_title":"","_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[2,3],"tags":[739,742,741,682,680,694],"class_list":["post-3280","post","type-post","status-publish","format-standard","hentry","category-blog","category-personal-softwareandit","tag-day-6","tag-full-immersion","tag-swfitui","tag-visionos","tag-wwdc23","tag-xros-sdk"],"aioseo_notices":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p2aMa8-QU","jetpack-related-posts":[],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/michaelrowe01.com\/index.php\/wp-json\/wp\/v2\/posts\/3280","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/michaelrowe01.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/michaelrowe01.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/michaelrowe01.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/michaelrowe01.com\/index.php\/wp-json\/wp\/v2\/comments?post=3280"}],"version-history":[{"count":1,"href":"https:\/\/michaelrowe01.com\/index.php\/wp-json\/wp\/v2\/posts\/3280\/revisions"}],"predecessor-version":[{"id":3284,"href":"https:\/\/michaelrowe01.com\/index.php\/wp-json\/wp\/v2\/posts\/3280\/revisions\/3284"}],"wp:attachment":[{"href":"https:\/\/michaelrowe01.com\/index.php\/wp-json\/wp\/v2\/media?parent=3280"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/michaelrowe01.com\/index.php\/wp-json\/wp\/v2\/categories?post=3280"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/michaelrowe01.com\/index.php\/wp-json\/wp\/v2\/tags?post=3280"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}