so in today's video we're going to go through the process of creating an application by using the vision or ssdk from the ground up and specifically we're going to be using Swift UI also reality kit we're also going to be using reality composer Pro to create some more scenes to add audio to our 3D models and I'm also going to walk you through what the different windows are by using Swift UI how you can set up a layout vertical layout horizontal layout also a z-axis layout which is going to allow you to have a navigation stack so there's going to be a lot to consume in this video this is what I learned and I want to show you by practice what I ended up doing to create this application so let's go ahead and jump into my computer and start working on it let's go ahead and go into new and then you can go down to where it says project and I am not like an expert with xcode I've been doing mobile applications but I was many years ago with Objective C so I spent a lot of time on that so ever since I haven't really touched it I've been using Unity so hopefully what I've been doing for the last few weeks which is learning Excel which is learning you know Swift is going to help you in building your own Vision OS experiences so to start off you're gonna see all these tabs in here just go into the vision OS Tab and then we're going to be just creating an app so you can click on next then the product name is going to be inspiration for app and I wanted to pick something that you know got me excited so I wanted to do something with the SpaceX inspiration formation and I am a SpaceX geek so I I think in a NASA gigs I think picking something that I get excited about allow me to push myself to do you know a video training with vision OS so once you go through these you're going to have a team an organization which is going to be using the product name there's also bundle identifier which is really important when you're going to be uploading that to the developer portal if you guys were to release an app that's going to be very important because that's going to be unique and then the initial saying this for now we can just say window because I'm going to be deleting everything anyways I want to create it from a scratch with everything that I learned so let's just do window for now and then the render that we're going to be using it's going to be reality kit that's the one that I've been using with swift UI I haven't done anything with metal just yet I've done some with unity in the past but no for this video series then the immersive Space is really important because full it's going to be whether you want to have a basically full VR where you cannot see the the real world and then if you do mix it's going to be basically you see more of a pass-through experience right we have Deb we have in in this case it's not really just passed through it's going to be more in in the mixed reality world if you do mix because it's going to know about the physical world elements so for now we can just do fall I'm going to change that anyways when we go into the code and then just click on next Once you click on next just pick a folder already Credit One but that folder is for the previous app so I'm just going to create a brand new one and we can just put it in there you can also decide if you want to use git or not I am using git but I don't like using it with xcode I use it through the terminal so it's really up to you what you want to do there and then just click on create so it's going to be like in Visual Studio where you see you know your solution in this case it's going to be all your different Swift files your assets and then also the reality kit content which is going to be very very important and this is really cool because anything that you change here on the coding view is going to change inch here in real time and the reason why that works is because there's this thing here called preview which allows you to change how we preview what we're having here and this is kind of like a partial preview of your app it doesn't really do all the functionality if you want to see the entire thing you hit play and then basically that will run on the simulator this is just a lightweight simulator that is built into xcode so we'll look into that a lot more so to start off I'm just going to delete everything though I'm just going to delete basically this file and then we can just go ahead and move it to the trash and then I gotta go in here and maybe we just make this a little bit bigger so you guys can see it better and then what I'm gonna do here is I'm just gonna go ahead and delete everything so just just know that the starting point of your application of your app it's going to be this we're going to say inspiration for uh and I think that should work you can go into new file and if you go into new file it's going to tell you anything that is available in all different templates are available for vision OS so in my case I just want to do let's say that we wanted to do as Swift UI View and we can do next and it's going to tell you okay what the name of this is going to be so in this case I'm going to call let's just go ahead and call this one areas and I'll show you why that is and then we can click on create and the areas one is going to have basically the navigation component that is going to allow us to push different windows in the Z space and I'll show you how that works but let's go ahead and move this into its sound group as well and I'm going to call these areas and we can just drag and drop this into here and basically it's going to hold all the different areas such as the mission such as the you know all the crew members that we have the equipment so what we need to do now this is just hello world right so we could go in here and say well this is this is going to be the and you can see here it says main that's a starting point it's going to be a struck which is going to be or app and we can also rename this in here and then the body this is going to have most of the the logic of you know how we create the windows what style the windows are going to create is it going to be an immersive experience is it going to be a full experience versus a mixed experience is it going to be a volumetric window or just a regular window so that's where you can start deciding the style of the windows that you're going to have and then other properties as well so one thing that we can do in here we can say well I just want to open areas and you can do that by just same areas which is the name of the view that having here and you can see this is inheriting from view on the preview I can also go around I'm using my mouse to basically navigate around if I hold the control button and I were to scroll with the mouse I can basically zoom in and zoom out and there's also other controls that you can use to to navigate this so for now this is working it looks great but we can also run the app right we can say Okay I want to see what renders when I I run the app and I'm going to do command R and you can see that this is already running and if I wanted to go home though I can you know I can hit this buttoning here and then what that's going to do it should bring me back to you know to all the different apps if we go in here to the actual app you can also apply different styles so I can say window and then a style and in this case let's say that we wanted to use a plane style so if we go back into the beta version of the Apple Vision Pro simulator and we were to run so right now it's using kind of like a glassy style look on the window but if you wanted to use plane you can do that just gonna do a command R there it looks like it open I okay so it looks like that it's good so if you want to go back to the normal style you can just remove that you can also set the size of the window here we can say something like I wanted to do the size of this could be we can say width is going to be maybe just make it smaller 200 and then I can tap to go to the next parameter and then we can do 150 and you're gonna see that now the window it's a lot smaller right I can still you know interact with the window and then like this could be a really cool widget that you could build for your you know your environment and you're gonna still in this case I can also I believe we can also resize it if we wanted to it looks like we can resize it now we can also close it and we can just go back in here this is gonna be what we're going to be building right I want the background that we have in here and in my case I'm not going to be animating the background it's going to keep it simple it's just going to be something like this and then we can say well I want to go and see the mission in my case I'm just going to add a video of the mission it's going to be the Netflix trailer and this gives you a lot of information about the mission the crew you can also look at the crew here and it's going to give you a background a biography about all the different crew members for this Mission so I wanted to do something similar where we have you know a mission we have the crew and we also have some of the equipment we going into inspiration for app and we're going to be creating a new group this is going to be holding all the data that we're going to be rendering so I call it models gonna make sense in my head because that's going to be what's holding the data and then in here I'm just going to go ahead and do a new file and then this one is not going to be a view this is going to be an enum so in this case I'm just gonna do let's go ahead and create a swift file and then we can hit next and this one's just going to call area so just go ahead and do that and then click on create so just think of these as the object that is going to hold the information about each area and in this case we're going to have an astronauts area an equipment area and also a missions area and normally in things like these in in c-sharp or other programming languages you create an object but I'm following kind of the pattern that the oral examples show and also the diorama example show so it's going to keep it that way that way my hair gets used to the structure the coding pattern that way you know going forward I can use enums in different ways because in Swift it's more I think enums are more powerful in Swift that they are in other languages and I'm going to show you why that is so normally you can create a ninom and you can do something like this right you can say enum in an area and you also have to have a case by an enum and you can say in this case I'm going to say it's going to be Ash show notes which is going to be the astronauts and then equipment and then we can do also missions so so this will satisfy what a minimum will require but we need more about an enum I want to know the string of each one of these like basically this trend representation I will I also want to be able to iterate through this so that's when you start adding basically all these protocols and we can say I want to use a stream protocol I also want to use identifiable protocol I also want to use a case either able I think I'm saying that correctly and then lastly I'm just going to add the equatable because I'm going to be basically running comparisons against this so the next thing that I'm going to do though is I'm also going to be getting the ID of this because this is using this protocol so you need to get the ID which identifies each area independently and the way that you do that as you can say you can declare an ID variable and then basically just going to say self and then the next thing that I'm going to do is I also want to add this kind of like a property that is going to give us the name of each one of these and it's going to be using the raw value and then we're going to be using lowercase you can also use uppercase there's other options in there but that's what I'm going to use to display the name of the area and then I also want a title which is going to identify basically the title for each one of the screens the areas that we're going to have so in this case I'm going to say I'm going to create a new title a string and then we can just accurately brace this and then in the curly braces I'm going to add a switch statement which we're going to need and then this one is going to determine okay which title am I referring to [Music] the next thing that we need to do though is I also want to add one for the crew member so that we know you know information for each one of them [Music] I'm gonna grab some of it and I'm not gonna display everything that way we don't have to worry too much about the sizing and we can say in the case of Jerry that's going to be his information he's a founder and CEO or she for payments and so on [Music] and then we can also do this I think this gives us enough information about all of them that is going to help us I'm also going to be adding a view model and this one is going to be also a swift file and we're going to do view model and we can hit enter and this one is going to be a little bit different than the enums it's actually going to be a class so in this case we're going to be also declaring what the navigation path is going to be and the navigation path is going to contain areas so that's basically what we need to do so there's also going to be something called a macro and this micro is an observable and the reason why I need to make this an observable is because if some of the views were to get changes if the reading one of these properties that we're going to be creating only the views that are reading specific properties are going to get updated so this one is going to be a new macro that the the theme the Swift UI or the Swift team are I think there was something called observable object and it wasn't as performant as these but just trust me that this is going to be the one that we need and then this one is going to be also a view model I need to get used to having a curly brace on the top instead of the bottom that's just something that I done over the years and then this one is going to be just navigation path and then you have to declare the type in this case I'm going to have an array of areas so I'm just going to say it's going to be an empty because it's going to be designating that in a different place [Music] so it's going to say navigation is stuck and then we're gonna do also curly braces and I'm going to also have another viewing here which we need to create that is going to hold all the different Navigation links I'm just going to say navigation to areas and we can just leave the commenting out for now and then we can create a new filing here and this file is also going to be a swift UI view I can hit next it's going to go ahead and paste my name in there and this is where we're gonna be basically adding all the different Navigation links so I'm also going to be introducing the new v stack which we haven't used just yet so you can do just like what I did here with curly braces and normally with the navigation link though this is going to be the one that is going to activate where we're going to be going to so let's say that for now we can just say well I want to take people to a hello world screen so we can just say it's going to be the hello world one and we can say nav one or something like that and then you can also specify a label so we can say label and then curly braces and instead of this you can specify the what we're gonna display on that label and for that label of the actual navigation link which is going to be in our case going to be a button and then we can say system image and then this is where you're going to specify what kind of Icon you have and we're gonna say Chevron and we can say right and if I were to run this right now we can just run it on the actual actually we can run it in here or you can run it on the simulator let me see what error am I getting just to make sure that I am okay looks like I still have a missing a curly bracing here and we can go back here into our areas and then do command R and it's not going to work because we haven't really added this navigation to areas two or areas so right now the navigation is stuck doesn't really know anything about it so let's go ahead and do command R to rerun it and I love when I get errors because if you guys get the same errors then you know how to fix them so so right now if I were to get closing here we can say hola it's gonna take us to our new view as you can see that we have a background in here he knows to go to the landing page because we're telling that the system in the navigation stack where the landing page is and you can say you can you can do navigation three so so this is cool because it's going to help us in building what we need to build so let's go ahead and go back in here and we're gonna go back now into these navigation areas and we can just go ahead and delete all of them because we're going to need to do something more realistic so what I'm going to do is this navigation to areas is going to contain some of the main menu placeholders we're gonna have a title we're gonna have a background so I'm going to start with the title and we're going to keep these with the v stack so you can do a title by using text and then I can say welcome to the we can say to the inspiration for Mission by SpaceX something like that and you can also if I were to run this this might look okay but it might not have the you know the style that I want but let me try and refresh this so you guys can see how this looks as we type so right now you can see that this is how it looks so far so another thing that I can also do is I can start making changes in here I'm going to make it mono space so that we have the fixed width for these things I can also designate okay what kind of phone am I going to be using in this case I'm going to set the size I'm going to tap and the size is going to be 40 and then I can also do the weight the weight is going to be bold and there's many ways that you can do this this is just how I did it for now and I think it's the easiest way and I'm going to say the top here the alignment on padding on about 250 so the removes this text down and we go back in here just to make sure that looks like that is appearing you can kind of see that we're going to start to look at how this looks in real time you can change the text in here to 20 if you wanted to make it smaller I think I did 40 and as we play with this we're going to start tweaking some of these so the next thing that I'm going to do though is let's actually do the real navigation in here so I'm gonna do uh an actual H stack [Music] thank you foreign once you have these we should be able to see all different options in here so if we get into it you're going to see astronauts you're going to see equipment and that's going to allow us to you know if we wanted to add more areas we can have more areas in that this is going to be changing dynamically so before I keep going though we can also add what's called a background and that background is going to be added to the v stack so we're just going to say background and in this case I'm just going to add an image the image is something that we need to add and I'll add that as well so it's going to be inspiration for so right now the image is not going to exist so we're going to start adding some of those so if we go here into my finder and go into inspiration for resources which is where I have all the different things that we're going to need for today then I also have an Imaging here which is going to be the background of the inspiration for so it's going to go ahead and drag it and drop it into assets so let's click on assets and then we can just drag and drop that so drag it and drop it here and then it's going to make it 2x so just go ahead and drag and drop it into 2x it's going to scale properly if we do it that way so now if we go back in here though we should be able to see that background showing correctly so just give it a minute here until it loads and you can see that now this is some somewhat looking okay we'll start fixing it as we go okay so once we have these we're also going to be specifying we can also specify the control size of these navigations control size and then then we also can use either extra large that's just going to allow you to change the sizing of each one of these buttons and we can go ahead and zoom out that way you can make it it can make it a lot bigger than it is so I can also set it to a small and you can see that now that it's going to change so we can go ahead and go back to extra large so there's also another thing that you can do and if we go back in here we're gonna have to add a couple more things so in this case I'm going to be doing comparisons though because I want to push different views depending on which case which area I'm looking at so what I'm going to do is I'm going to say if area equal equal to area the astronauts then I'm going to be basically launching a different view so we can say here as well I'm just going to go ahead copy copy and paste else if we can do else if in here as well for all the different sub views that we're going to have and then I also ended up doing a spacer in here so that it pushes all the content up you guys can see I can move it around I could also escalate if I wanted to and it's killing a bit maybe we also start looking at some of these options so I can select it you can see the navigation link is also shown correctly and then I can go back in here and you can see this is the mission and then we can also looks like we have equipment okay Mission equipment there we go in the mission trailer let's go ahead and work on the crew View and we can go ahead and open and create a new file we can do next and this one is going to be crew area I'm going to call all the areas with the post fix of area that way it makes sense in my head as we're working on some of these cases so in this case I'm going to have a horizontal stack so because I want to have all the different crew members horizontally stack and then I also I'm going to be looping through the all the different crew members so we can say you know just like we did before in this case I'm going to say crew and then remember we can do all cases and if we do all cases it's going to give us all the different cases for the different crew members so and then I can access that by using you know whatever you put in here is what we're going to be accessing so I'm just going to call it crew and then I can say in so once you do in I'm also going to be creating a vertical stack because it's going to be basically what's going to hold all the crew data we're gonna have an image we're gonna have a title and also a description so we can just say you know what I want to have actually v stack because we need that and I'm also going to be doing an alignment and the alignment in this case is going to be leading so we want to make sure that we push it to the top left and we don't need containing here so it's going to go ahead and remove that and we can just do curly brace and delete this and then in this case I'm also going to have an image for each one of the crew members which we haven't added yet but we're going to be adding as well basically you want to do a backslash and then an open parenthesis and then crew and then we can get the crew member name looks like we don't have the crew member name oh maybe we didn't add it for some reason so it's gonna say I'm gonna go ahead and copy these and then I'm going to go back in here and then paste it this is going to give us just the raw value each one of these so that we can you know get the image and build the image name so now if we go back into areas and actually the crew area there we go we can get an access or property in here so this is going to be rendering the actual image and I also want to resize it because the size that I have it's no it's not really you know what I want to have in the app and so this is how you can modify the size of an image by just adding the resizable and then you add the actual size of the frame and then in this case I'm going to say what is going to be the width the width of this image I think I ended up doing 180 and then the height I ended up doing 200 we can do comma and then high and then send it to to 200 then I'm also going to have the in this case I'm also going to have text so I'm just going to say text and then I also want to say okay what is going to be displayed on this text I want to have the full name of the crew of the crew member and I'm gonna say font in this case I'm going to be using you can use some of the pre you know pretty fine I'm going to be setting a custom size and a custom size of the font that we're going to have and then in this case I'm also going to make a wall and then I also want to add another optioning here and it's going to be basically we're going to be displaying the about so we want to display you know information about each crew member and we can also say in this case I'm going to set the font and we can cheat copy these copy this and then we can set it to 20 and I don't want this to be well because I want the title just to be bonding you can kind of see here how things are looking so the next thing that I want to do though is I want to change the frame the entire frame but before we do that I want to add all the different crew member images so let me go ahead and pull that and we can grab and drop all of these ones and you can see that we have all the different crew members while we're on it though I also have if you notice a picture of each one of these so we can just add those as well and I think those are all the different ones I had some other things that I played with before but I didn't really like how it looks so these are all the images that we're gonna need for now now if we go back into the crew area we should be able to see how those images are going to look like and while it's loading let's go ahead and add the minimum width of the actual frame so we can say minimum width and the minimum width is going to be I think I set it to 180 minimum high so it's going to be so this is really helpful because if you if you don't want this Frame let me go ahead and remove this extra frame if you don't want these frame this v-stack to be lower than this width basically you cannot resize it and be less than 180 and also the heist is not going to be less than 200 and we can also remove these right here so the next thing that I want to do though is I want to also add some padding and we can probably set the padding here to 20 and then lastly I'm also going to make a glass background effect because I think that also looks super super cool right now we're looking at astronauts right so this is the one that we're gonna do that on so I'm just gonna say crew area and we're going to be basically pushing whenever somebody clicks on that option we're going to be pushing them to that this one is going to be for the equipment and then the last one is going to be for the mission now we can go ahead and look at astronauts and you can see that the astronauts are looking it's kind of good I'm not I'm not 100 sure that I like how it looks foreign [Music] looks so now we have basically a little etching here which is where the padding that we added and I think everything looks looks a lot cleaner and if we size that things are sizing our sizing correctly so that's how you can use the horizontal stack I'm going to go ahead and create a new viewing here so let's do new file on the areas and then we can do here it's going to call it equipment area and then just go ahead and hit enter in this case we're going to have a couple of different environment and this environment options are gonna give you options to basically open a window dismiss the window and also to open an immersive space and close an immersive space so first I'm gonna do I'm gonna basically get our view model so I'm just gonna say environment and then view model then I'm gonna say private and then here is where you can start basically I don't know if they're called projecting but you can access the environment information and then which is going to be injected to to the actual inspiration for app and once it's injected then we have access to any environment information within all the views so this is how you can get the data that is stored in the view model in your sub views so the next thing that we need to do though is I also need to access the open windows so to access that we can say open window and then in this case I'm going to say bar open window clone this and I can say this Miss window and I'm just going to go ahead and paste that here and they also have other things for immersive experience so we can say open immersive space and then I can also say dismiss immersive space we can also rename these so it's going to go ahead and copy this copy and paste that way we can access that as well so once you have those though now we should be able to use them within the body of this so before we do that we also need to add a bindable property so I'm just going to say binding and then this is going to bind to the model and then we can just say equal model So when you say when you do binding anything that changes on this model that we're binding to is going to be reflected within the view so if you're reading let's say some information from The View model you can say Okay I want to listen to the changes on that I want to listen to changes on that and it's going to reflect on any view components that we attach that to so that's why you use the bindable components so if we go back in here now that we have that we should be able actually bind the ball there we go no binding that didn't look right to me at the beginning okay so now we can say h stack and this is gonna have basically two different options horizontally so that's what I'm using the H tag and then I'm also going to have different options within the H tag which is going to be the rocket and also a band so I'm going to have an image and in this case I'm going to have equipment and then capsule and then I also want to resize this I'm going to say resizable just like we did before and then I'm also going to be changing the size of the frames I'm going to say the width in this case is going to be 300 and then the height in this case I set it to basically to 300 as well but then I also added some pattern because I wanted to make sure that things were spaced correctly and we didn't have the image going all through the basically to the edges so I'm just gonna add in a little padding in there I'm also going to be adding a taggle so in this case the toggle is going to have the property so I'm just going to go ahead and let's go ahead and remove all these because I'm gonna do that again I'm gonna say model and then in this case I'm gonna the first option is going to be the rocky right so I'm gonna say if the Korean rocket is currently showing then we can change the text of what we show on the toggle so I'm going to say if it's currently showing I'm going to show the option hi so I'm going to say hi rocket capsule and then we can say volumetric because this is going to be that volumetric option and then I'm also going to copy this and here I'm using the ternary operator this is very common in programming languages so I'm just gonna save us some a space so once you have that I also want to bind to the is on event so I'm just going to say it's on and then the way that it's gonna say it's gonna determine if the bond is currently pressed or not or if it's on is by reading the bindable property that we're setting above it so I'm going to say model and then it's going to say is showing and in this case you need to add a dollar symbol and that's going to designate that you're binding basically to that to that property so once you have that though then we can now basically bind ourselves to the unchanged event and this is where I started to get a little confusing at the very beginning because there's just too much chaining and but trust me it's gonna work and once you learn it once it's going to it's going to make sense so what I'm going to do is I'm going to say okay when what is it what is it that I'm going to be listening to when there's a change so what I'm listening to is the model is showing for Rockets so whenever that property changes I'm going to execute an action right and that's why I'm binding to that so to execute an action I'm going to say okay underscore and then I'm going to say a showing and in this case let's go ahead and hit enter enter in this case I'm going to check okay if if we're currently showing this then we're going to be in our case our final way we're going to say opening a window right because we're going to be opening the volumetric view which is going to hold the capsule right now we don't have that yet because we're having created it but I'm going to put placeholders in here so we can say there we go and we can go back later and then finish it up but right now what we're going to do here is going to say open window volumetric and then we're going to say here we're going to say dismiss window and then volumetric and we'll work on those in that atom as well later so now that we're binding to the unchanged event I want to add this toggle basically if we look at the toggle here we can also add whether we want this toggle to look like a real toggle or like you know that little circle that you can toggle to or you can have it be a button in our case I think I'm gonna say you know what I want to have the style and this style is going to be button so if you go in here you can say I want to do a bun on this style and then the other thing that I can also do is I also can change the padding here and I'm going to say the padding is going to have 25 I use paring Allah so that should allow us to basically to do that I'm getting a narrow in here let me see if I can fix that okay so it looks like I'm missing the in keyword in here so this is where you see Delmar is learning Swift so so basically this is say okay it's showing it's projected to the variable and then we can use the variable in here and then I think that looks good to me and looks like I also have an issue here it is supposed to be is on now in on and you can find that out easily by just trying to type in there's nothing called in so it's on there we go foreign [Music] material options so we can just say glass background effect and there's code duplication in here but I think it's okay because we're pretty much getting started with this and then I also need to set this basically to pass in the view model as a brand new model otherwise we won't be able to render it here in the preview okay so that's looking really good right so here's where you can say well it's not that's too big and you can make it smaller if you wanted to you can change the padding here if you wanted to but I think in this case it looks good so this one says show Rocket capsule and you can see the toggle is working and then it looks like everything is working we need to pass that into the navigation area and this is for equipment so we can just do that we go back into the inspiration for app there's gonna be something that we need to pass in because we're taking a view model we need to basically keep track of the state so in here I'm just going to say stay and then I'm gonna say private VAR Moro equal view model because the preview doesn't have anything to do with this this is the preview is just to be able to mock things up this is what's going to happen in reality we're creating a new view model and we want that model to be you know persisting across all the different views so now that we have that that's that's cool and all so how do we go about actually you know changing some of the the different spaces that we're going to that we're going to have so we can go in here and this main one is just going to be you know our first one there's really nothing that we need to have in there I also need to add another one though that is going to have the capsule reality area so I'm going to create a new window group and this one is going to have an ID and this is how you're going to start creating windows that you know we can use within the app so in the case of using a volumetric window that we're going to be using we can create a new Square we can say capsule reality area and this is just just a name that I designated and then in this case I need to tell it what's going to create that so in this case we haven't created it but we will and then I also need to specify the windows style in this case this one is going to be volumetric right it's going to be kind of a an augmented reality piece that is going to be floating in place in a plane on a wall so we need to make a volumetric and then I also want to use a size so I'm just going to copy this and I'm pastoring here and let me just go ahead and uncomment that and then for the width of this I set it to 0.6 and then for the height I believe I did the same thing and then for the depth we can set it to that we can set it to this and then you can designate you know if you wanted to do a meter centimeters and so on so I think this works as it is then I also need to create a immersive space so remember we wanted to display the rocket as an immersive experience so in this case I'm going to say full rocket and we can say reality area and this is again this is just a name that I made up you can make that up do whatever makes sense to you and then it's going to be full rocket reality area and we're going to be creating that as well and this is when it gets interesting right because you can start designating what this style is going to be so in this case I'm gonna use a constant and then I'm just gonna say this is gonna be a full immersive experience and then in is also going to be set to full so the next thing that I'm going to do let's go ahead and create a new group and it's going to be reality views and then I'm gonna move it down maybe right about here and then we can just add two new views it's gonna be a swift UI View and then this one we're just gonna do capsule reality area so I'm just going to copy and paste that and then we can also do another one for the full rocket so it's going to be a swift Vivo as well and then so I can say full rocket and then hit enter so now if we go back into our actual app we can just go ahead and comment this that way we don't forget to do that we also need to pass in the model so the way that you can pass the environment models is by using this that environment and basically doing that and then we can also do that same thing here on the actual full rocket reality area it looks like those are good to go so what I'm going to do is let's go ahead and focus on this first so we're gonna have to import reality kit and I also need to import reality key content that way we can access some of the information here that we have in our reality composer Pro once you do that you can also say reality View and this is where we start getting into the reality type of API so that we can access some of that information so the way that it works is you can access you can get this thing called content and then in we're gonna do a garlic and an entity equal I'm going to do a try here with a nullable check and it's going to be a synchronous because most of everything that you do with you know interacting with realitykit composer Pro it's by using asynchronous programming and then I'm going to say name this one is going to be seen and then we need to tell it okay where is this scene going to be located well we know it's located in a bundle and this is going to be that bundle name that I told you that it was really important and then if for whatever reason we cannot locate that scene let's just go ahead and display enable to load scene model so once you do that if you want to add the content we can just say content and then we can specify that this is going to be the content that we're going to be adding so what I'm going to do though is I'm going to do exactly the same thing here on our full rocket it's going to go ahead and remove that the only thing that is going to change is going to be immersive is going to be what we want to access I also want to say reality kit and then import realityk content once you do this it's going to say okay I want to find that scene that object in here and then I want to basically render it and by adding it to the content objecting here okay so it looks that that's good to go and in fact you can just go ahead and hit refresh in here and we should be able to see it let me go ahead and look at the project here really quick just to make sure that everything looks correct I went ahead and moved these spheres just to be closer to the Pivot Point otherwise it's going to be really hard to find so just make sure that you place them really close to the basically to the pivot point which is zero so you did negative 22 and then the other one is like is 20 point something that way you can see the full immersive experience and this one just say at the pivot so in this case this is a full rocket reality killer you can see that we now have the two different Spears rendering if we go back into the capsule we should be able to see that one as well rendering here and you can see that now that when it's also rendering the first thing that I'm gonna do though is let's go into this scene I'm gonna go ahead and delete this and I'm gonna zoom out a little bit and you can go forward and back by using w a s I can also hold the option command and then basically you swipe up or swipe down to zoom in and zoom out so it's pretty handy to be able to use those controls now if we go back into my window here which I have all the resources I'll put the links to these which I got from a sketchfab in the description of this video so I'm going to go ahead and drag him and drop him and I'm going to go ahead and it looks like I already had a capsule in there for some reason so we can just go ahead and delete this one and then move it to try so we should have one capsule and then one rocket and then in this one just gonna add the capsule and make sure that it is set to you can make it bigger if you wanted to I just gonna leave it like that and that should wrap up that I'm not going to add any changes to that but the one that I'm going to add changes to is going to be this one so I'm going to go ahead and remove this we're going to be adding a rocket I'm going to set it to B there's going to be different positioning that I'm gonna set on this one so for the rocket I ended up making it close to that so it's negative 50 and then I think on the y-axis I didn't do anything and then I'm gonna set it to negative 200 centimeters that way we can push it we can push it back and let me just make sure that I can see that rocket and there we go I'm just gonna put it right there in The View so that we can see everything everything correctly I'm learning to use this so that's why I keep moving around so I think this looks good so the next thing that I'm gonna do is on this rocket I want to have a particle emitter so it's gonna do that and then drag and drop it into the rocket go into my particular meter I think I did this too many times so I should remember all the different settings I'm gonna add it right there on the bottom of the rocket and we can probably just zoom into that just double click on it and it's going to take us closer I'm just gonna go back a little further okay so for the particles though I could just hit play and you're gonna be able to see him rendering I set these two 1000 and this is set to 1000 this one I did that the size I change it to six and so far it doesn't look like what we are building but trust me it's gonna look better in just a minute and then here it's gonna be the local space and the direction is going to be set to negative one that way we can have it yeah something something like that so that's looking more like you know the fire coming out of the rocket engine and then maybe the size zero we can set it to something a little smaller there we go I think five works and then the color I change it to be everything Jello at the beginning and then and you can make this a lot better than than what I'm doing right you can you know you can move these up a little bit more if you want to make it you can just probably set it to two if you want to make it look a lot better I think that looks great so the next thing that I'm going to do is click on this plus symbol here and I'm going to add the Earth and the Earth is going to be a lot larger let me go ahead and change the size first it's going to be 20. 2020 and then for the positioning of the earth I did negative two to five and the C axis I ended up doing it as negative 400 so let's do negative 400 and then that Y axis I also made a negative 120 and that way if I go back here you can kind of see the idea of I wanted I wanted the rocket to look like it was coming from Earth so that kind of gives you that idea so the next thing that I want to do though is don't right click on that I'm actually click on this plus symbol and I'm going to be bringing the NBN audio you can get a special audio if you wanted to have audio be assigned specifically based on the distance of the object so in my case I'm just going to do ambient it's going to be a consistent sound and then I'm going to go back in here to my resources go into sound and I'm going to drag and drop this component actually you need to drag it and drop it into the project and then once you do that you can drag it and drop padding here and you can see that this is good and I'm going to set it to Loop now if we go back into the ambient area I'm going to associate it and I can hit play just so that I can show you what I'm going for in the NBN science fiction so I'm going to create a state variable it's going to be private and this private variable is going to be of type audio playback controller so I'm going to say audio controller and then audio playback controller and then this is also going to be nullable just in case we have issues with instantiating it so it's going to make it like that and then now what I'm gonna do here is I'm gonna say ambient audio entity and then we already have the entity that knows about these scenes so we can just say okay I know what scene I need to look at which is the immersive scene then what I can do here is I can say well can you find an entity that it's called ambient audio which is the one that we created so it's going to say okay so once you have that though we can also do gar and the let resource this is where I need to pull the actual audio file so that I can associate it to the audio playback controller and then I can say audio file resource now you need to specify okay what is the name of this so it's going to be root and remember we make we made it a space and then it's a wave file so it's going to say underscore they don't allow periods so I ended up doing the actual underscore and then that last parameter is going to be from where right and well this is going to be from this scene so I'm going to say immersive and then it's going to be USDA that's the name of the file and then you also need to tell it which bundle this is going to be coming from so I'm going to say well from this bundle and then I'm going to say else just in case we can find it we can just display some type of an error and we can say I don't know enable to find a space the web file and that should you know give us enough information and then I can say either controller equal to ambient and then ambient audio entity and then this is going to be a nullable so you're going to say well in this case you're going to be prepare audio we already have the resource so we're basically associating the NBN audio that we have here to the actual resource and I think I already had it Associated but I had to do this for some reason if this doesn't work this works without it then I think you're good to go but this is how you can go in about associating this during runtime and then I think they should be good the last thing that I'm gonna do is on disappear I'm going to make sure that we pause the audio so I'm going to say audio controller and then I'm going to say stop that way it doesn't keep playing if we dismiss the actual immersive experience and then the other thing here that I need to do though that I didn't do is this needs to be a way so remember anything that you deal with reality content it needs to be a synchronous programming so this should be okay and then the other thing that you also need to do here if you don't want this to crash is we also need to add the previews to have the environment view model in this case we're creating a brand new one and then I'm gonna do that same thing in this one and you can see that it's going to give you an error unless you refresh it and it looks like we're getting an error for some reason but I think we should be okay let's go ahead and try it out I'm going to go ahead and do command R alright guys let's see if this works I'm going to move the window to the right and let's go ahead and see if we can look at it let me go ahead and bring it closer to me and you're going to see them now I can go down if I wanted to get a little bit closer so we can get a closer look and we can move it around right as as we wanted to I can also tackle it in here if I don't want to see it the other thing I can also do is we can look at the full rocket and it's gonna give us this pop-up which we need to allow an immersive experience and we got the audio playing so everything it's everything is working and we can go around and check things out right [Music] there we go so that's what we have so far let's go ahead and go back I'm going to go ahead and do a new file it's going to be that and I'm gonna hit next this one is going to be Mission area and we can just go ahead and hit enter in this case I'm gonna add What's called the AV kit and I believe we need to go back in here and make sure that we have the framework added so I'm going to say AV kit and it's going to be this one hit add it looks at that looks good I'm also going to need to add the video here so I'm going to add a new group and we can say videos just in case we we want to have more than one video and maybe we just put it here on the on the very bottom now if we go back here into my assets I'm going to go into desktop and then resources and then we can say video and it's gonna be the video I started SpaceX was to get Humanity basically it's going to be the video for the announcement of this mission in Netflix so credits to Netflix just to make sure that I'm getting travel for putting that in this video and then I'm gonna go ahead and drag it and drop it here copy items if needed go into build faces and we need to make sure that we copy that bundle resource otherwise things are not gonna work and then we can just say inspiration make sure you're at the actual video that that way now we have access to it with the code so now if we go back into our mission area this is where we kind of start working now on this view I'm going to say import [Music] all right guys so we got everything now we have our astronauts in here we have the equipment and we also have our mission which is what we just added I can hit play the reason I started SpaceX was to get Humanity to Mars come over [Music] what they're now to do will change so I'm going to go ahead and go back in here and let's see how cool this is right now we can have a full immersive experience and I can hit continue and maybe we'll just put these right here and I just want to look at the entire rocket let's go a little bit down so you have we want to have a trailer as well playing we have the music going the reason I started SpaceX was now you can have more something like that [Music] [Music] all right guys I hope you enjoyed this video and if you have any questions about Swift UI or reality let me know in the comments below because that's gonna help me in understanding what things you want to learn going forward if you want me to bring more videos let me know as well I'm really curious in the comments thank you very much guys