Smooth Scene Fade Transition in VR

merry christmas everyone so using multiple scene is a great way to better organize and optimize your virtuality game right but how can you go smoothly from one scene to another without breaking the player's immersion and this is the exact question that i will answer in this video i will show you how to fade in and fade out the screen and use it to switch scene easily welcome to vellum tutorials my new youtube channel focusing on vr development you know it works if not already make sure to subscribe to the channel to not miss the next video and as always you will find the source code of this project with exclusive content like this path through door project on my patreon link in the description below but without further ado let's get started with our tutorial okay so i'm inside the unity editor and i have 2 scene scene 1 with this cube right there and scene 2 with a sphere now my goal here is to click on this go to scene 1 button with the ray of my xr rig over there and be able to jump from one scene to another and this will be the goal of this video so first thing first if we want to smoothly go from one scene to another we need to fade the screen so to fit the screen it's actually quite the same as doing it in a 3d scene that is not a virtual reality game but in this case we need to have a quad that is following the player head so that when the player turn his head the fading screen will stay the same now by the way if you don't know how to make this xr rig setup with the interaction of a user interface element i will post the two tutorials that i made about this subject so that you will be able to do exactly the same thing that i have here and obviously this tutorial will work also not just for the xr interaction toolkit but for any sdk you simply need to have a main camera in the scene that is enabled for vr so basically what you need to do to have a fading screen is to go to the main camera over there and now i'm going to right click go to 3d object and then on quad we can rename it fee the screen perfect we can even remove here the mesh collider like this and now as you can see the failure screen is as a child of the main camera and at position 0 0 0 but we cannot see it in the game windows but why is that under the answer is right there in the main camera as you can see the clipping planes go from 0.01 to 1000 and this means that only objects that are between these two values are being seen by the camera so this means that we need to take here the main camera copy here the near value and pass it as the set position of the quad and tada as you can see the fader screen now appears but we have a little issue about it if we click on play as you can see we are this weird issue that feels like i'm inside a bad nightclub but to get rid of this problem we simply need to just increase a little bit the value on the z-axis so instead of 0.01 i'm going to write 0.015 and as you can see now if i click on play we have no more issue and as you can see the quad is following the position of the head and now this means that we will be able to use this squad to fade the screen okay if we want to fill the screen we need to change the alpha value on a material that we assign on this squad so i'm going to right click in the project window go to create and then on material we can call this one fade screen material perfect and we can just assign it on the fader screen material list in here the matter in here the mesh renderer perfect and now tada it is white so right now i'm using the universal render pipeline which means that if i want to simply change the alpha value of this material to fade the screen i can go to universal render pipeline then on unlit then here change in the shader settings the surface type from opac to transparent and there you go if we go here on this value on the main color you can see that i can change the opacity just like so but if you are not using the universal render pipeline and using the thunder pipeline for example this will not work obviously so i made here a really really simple shader called only transparent color that will work for both and that you will be able to find in the description below so after downloading this shader and import it like this in your project you can simply go to shader here then on unlit and then on unlit transparent color and as you can see this shader only has a main color parameter that you can use as well to change the opacity of the material this is the exact setting that we will be using to fade the screen and we will do so using a fade screen component so i'm going to add a component name it fade screen perfect we can double click on it to open it and now we will need three parameters in this component first a public float called fade duration and we can set it to two at first then i'm going to need a public color which will be called fade color perfect and finally a private renderer which will be a reference to the renderer of the quad and that i will name a rend we can get it at the start of the of the game with ren get component of type renderer perfect and now the goal is to create a function to change the opacity from zero to one or from one to zero so we can remove here the update function and i'm going to write it like this i'm going to take a function and call it public void fade and this function with actually take two parameters first a float value called alpha in and then another value called alpha out perfect and the goal here is to be able to go from one valley to the other but how can we do so and the answer is using a co routine so i will not go in depth of how a coverting works but you need to think of it as a function that play through time so i'm going to go below and write public i in numerator so this is the type of a co routine and call it fade routine perfect with the same parameter and inside this fair routine i will need a timer so i will create a float timer equals to zero and now basically if we want this function to play through time we can do this exact setup so while timer is less or equal than the fade duration so the this is the duration we want the fade to occurs then what we do is increase the timer value with time dot delta time and finally do yelled return null so this sentence here just say that we want to wait for one frame and basically using this i can call this core routine it will start with a timer or the row and every frame of the game it will increase the timer value with the time the delta time and once the timer is bigger than the fade duration it will exit this loop over there and continue the function and this exact setup can be used on multiple purpose but in our case we wanted to simply change the value of the opacity on the material and we can do so like this by creating a new color so i'm going to do color new color equals fade color perfect and we are going to change the alpha value of this fade color so we can do new color dot a equals matte f dot lerp and here i want to learn between the two values that we have alpha in and alpha out so i'm going to write alpha end as the first parameter alpha out for the second one and so here for this function the third parameters dictates uh how we want to smooth the first and second parameters when the third parameters is equals to zero it will be equals to alpha in and when the third parameter is equals to 1 it will return here the alpha out output if we want this particular behavior we can write timer divided by fade duration and you can notice that this is actually the case when timer enters the loop is it is equals to zero which means that we will return alpha in when we get outside of this loop timer is equals to fade duration which means that we will have here federation divided by fade duration which will be equal to 1 which will return alpha out and this will give always the correct interpolation between alpha n and alpha out okay and basically once we have the new color we can do ren dot material dot set color and here we need to give it the name of the color on our shader but if we go to the material that we have and then that we go here on the three little dot then select shader you can see that the name of the color is underscore color so we can just give it as the first value right there and give us the second parameter the new color that we have and there it is now everything is set just here before or finishes this function uh it is better to make sure that the final value is indeed alpha out so that we will not have any further issue later on so i'm going just to copy the three line paste it down below so it is not happy right now because as you can see we are using the same name for the new color so i'm going to rename it new color 2 or in these three's element and we simply need to give the alpha out for the alpha value of the fate color and so using these three line of code we are making sure that the last thing that we do is to set the alpha channel to alpha out so that everything will work okay so now that we have the fade routing that is properly set up we can call it here in the fade function using start co routine fade routine and give it the same parameter that we have above so alpha in and alpha out perfect and now everything is ready using the fade function we are able to smooth the alpha value on our material from one value to another and this is what we can use to fade in or fade out the screen so i'm going to write for this two function public void fade in and another one that i will call public void fade out perfect for the feeding it is my understanding that it goes from an alpha of one to an alpha of zero and the opposite for alpha out so a value of zero to a value of one and basically now that we've made this setup we can actually use the fitting in all case that we want so you could actually use it uh to fit the screen you when you are teleporting from one place to another or maybe when in our case we are switching scene but we can actually use it when we are starting the game so that the player doesn't start again with a full screen and smooth progressively inside our scene so for this i'm going to go in the top right public pool fade on start and set it to true at first and in the start function over there if fade on start we can call fade in and we will be also able to use this feed on start function to test or the fading is working out so now let's go back to unity to see how it looks okay so right now as you can see we have the fade direction set to two and the fifth color set to black i'm going just to pause here the game before playing so that i will be able to trigger the feeling when i want it to be and so as you can see everything it's is pitch black but when i click back on the pause button to resume the game wow and you can actually do this for any type of fade color that you want so if i want to keep it a white color actually i can click again on play and it fades to a white color this looks really great but before continuing i have a little issue that i want to address so right now as you can see i have some ray that i can use to actually click on the go to sing button that you can see over there but for some reason we cannot see them in the application even if they are present in the world as you can see and so to fix this little issue you simply need to go to both the left hand controller and the right end controller and change here the material of the line renderer to something else and in my case i will just change it to i don't know this black material over there and now as you can see if i click on play i have no issue and i can still see the array cast over there okay so now we have finished to make the feeding of the screen we need to go on the second step of this tutorial to transition from one scene to another so i'm going to right click in the rear key and click on create empty i'm going to rename it this one transition manager we can reset its position to zero zero i can add a new component that i will call scene transition manager perfect so here my goal is to actually fade the screen wait for the screen to finish fading and then switch to the scene we want to go and i'm going to show you how to do this first we need a reference to the face screen component that we made so public fade screen and call it fade screen perfect and now if we want to wait for the face screed to finish we can do so in a curtain so i'm going to write i enumerator go to scene routine perfect and here i'm going to add as a parameter an integer called scene index perfect and actually i'm going to write at the top here another function that will start the quarantine so void go to scene but not routine int scene index and we can simply do start core routine go to scene routine with the same parameter so the scene index parameter and there we go now in this go to scene routine we can actually fit the screen with phase three fit screen that fade out perfect and we want to wait for the fade duration to occur so we can do so with yield return and now instead of returning a null value which will only wait for one frame we can do new wait for seconds with fade screen dot fade duration and this will actually wait here in this routine the time necessary for the screen to fade and then afterward we can now launch the new scene so there is two ways that we can launch a thing a more easy way and a more complex way which is in my opinion way better and i'm going to just address the second method in a few minutes but first let's learn how to do the easy way which is to simply use the load scene function of the same manager so for this we can go at the top here right using unity engine dot scene management perfect and down below to simply launch the new scene we can do scene manager dot load scene and use as the parameter the scene index that we have in this function and just like that we are fading the screen waiting for it to fade completely and then loading the scene index that we want to load and basically that is it for the first method and now go back to unity don't forget here to uh set the field parameter by simply going to the faders and drag it over there and now we can call this theme transition manager component anytime that you want to switch the scene so in my case i simply have a button here that i can click on to switch the scenes so i'm going to click here on this button then on the plus button drag the transition manager over there and select here my famous go to scene function and now as you can see i can select which scene i want to go to now if i go to file then on build setting as you can see i've already have my two scenes so thin one and scene two in my scene in build list and as you can see the first scene has a build index of zero and the second one has appeal index to one so if i want to go to the other scene so in my case scene one i need to write here zero which is already already the case but in the other scene i will need to do the opposite so write the sim which has a build index of one and this is what we'll do next so now that here we have properly set the scene transition manager go to scene to zero we should be able when we click on this button to go to the other scene so let's click on play and now if i click on go to scene we have the white feeling and tada we are now in the second scene but as you can see obviously the second scene is not already set up which means that we did not have a fade on start and if i click on here this this button go to scene 2 we are not able to go back to the other thing and this is what i'm about to do right now so simply if we want to do the same setup for the other scene what we can do is make two prefab with the fader screen that we have by dragging it here in the project windows same goes for the transition manager okay now we can go to scene then go on the other scene so this was the scene too and now i need to go to scene one and i'm going to drag here the transition manager as well as the fader screen as a child of the main camera perfect now make sure that as before the fader screen is set in the same transition manager and if we go to the button now this time i want to drag the transition manager then scene transition manager select go to scene by default it is set to 0 but the scene that we want to go to is the theme 2 which has a build index of 1 so i'm going to write one over there and now everything should be ready let's go back to the other scene sn test if everything is still working well so we have the first filling and now if i click i should be able to fade in fade out and be in the second scene the feeling the fade out and i'm in the other scene so everything is working and we can already go back and tada everything is working well we have a smooth fading and thin transition that is working really well okay so i was talking about how there was two method to load scene and let me just talk to you about the second method so now if we go to our scene transition manager we are calling here a function called load scene but there is a big issue with this function is that it does all of the job at the same time which means that all of the calculation to load in another scene can already stop the game freeze the music and do all kinds of bad stuff and this is why i will introduce to you the second method which is using the load scene async function so for this i'm going to just duplicate here all of the function that we made so i'm going to have another go to scene that i can rename go to scene async same for the second one so we will have go to scene async routine perfect and we can have the same written over there so in the start quarantine we can actually remove here the yield function instead of the load scene we can write load scene async perfect now at the difference of the other function this function actually return a parameter which is an async operation parameter so i'm going to use it like this by doing async operation operation equal scene manager and we can actually use this value to know if the operation is done or even to know the progress of the operation if you want to have something like a progress bar when you are loading but this is not something that we'll do in this particular video but now we have this following issue as we are calling the filling of the screen and the scene manager dot load scene function to switch scene it can happen that this scene manager has finished loading before that we have finished fading the screen and so to prevent this behavior what we can do is to wait until both the fading has finished as well as the async operation has finished and once the two are finished we can continue and load the scene and so to do so we can actually stop first the operation with operation dot hello scene activation equals false then while timer is less or equal than fader dot fade duration and also that the operation is not down so if it's the case what we can do is increase the timer with time the delta time and do yield return null perf and if they have finished their their job what we can do is allow back the scene activation with operation dot hello scene activation equals true and there it is now everything is set up properly this is the proper way that you can actually go from one scene to another with the async routine and there it is guys you can now use the scene transition manager to go from one scene to another using or not the i think method that will allow you to do the heavy calculation in the background without breaking the player's immersion now this was a very long video but congratulations on reaching the end and if i was able to help you in any way make sure to leave a like and subscribe to the channel and as mentioned in the introduction the source code as well as some exclusive content are available on my patreon if you want to support my work so thank you for watching and see you soon bye

Channel: Valem Tutorials

Views: 27,891

Keywords: VR Scene Transition, VR Screen Fade, How to fade screen in VR unity, Unity VR screen fader, Meta Quest Screen Fade Unity, How to make a VR game in unity, Valem, Async scene loading unity, fading vr unity, smooth transition in vr unity, async switch scene unity

Id: JCyJ26cIM0Y

Length: 23min 19sec (1399 seconds)

Published: Mon Dec 27 2021