Godot Environment Previews - Sketchfab and HDRI - Beginner Tutorial

greetings I'm on thorn and welcome to be in d dot biz in this movie we're going to take a step-by-step tutorial on creating this scene that you can see in front of you right here we're going to begin from the ground up in creating this diorama scene where you can rotate around a model and preview a complete scene directly here inside the Godot engine we're going to be seeing how we can download a model from an asset store on the web sketchfab and how we can download those models import them directly into the Godot engine and configure our lighting textures materials and properties and then create a camera animation that's going to loop around the environment so we can showcase our great environments and 3d models this is exactly the tutorial you need if you've got a bunch of environmental assets that you want to easily showcase in the Godot engine so let's get started perfect we're now ready to get started on our project where we can preview environments inside the Godot engine we're going to see the complete process of downloading an asset configuring the scene inside Godot creating a camera animation and then previewing the results and this is going to work with pretty much any kind of 3d environment you can use now in this case I've got a head to sketchfab here on the web to download an environment asset sketchfab contains a ton and I mean a ton of mesh assets that you can view and in many cases download if you're going to be downloading assets from sketchfab please do check out the license of those assets which govern the usage of them you can easily find that by finding a particular model in this case I've taken this one here the sketchfab hand painting challenge summer cottage I'm going to scroll down a little bit to the description of that asset and straight away here you can see we have a license that is the CC attribution license and you can always find out more information about the license simply by clicking on the learn more button here now in addition to this asset we have a button slightly further up here where we can download a 3d model to our computer and when you're working with a good dough engine always take great care about this because the Godot supports only a limited number of 3d formats I'm gonna click on the download model button here it's going to ask me to log in but once I've logged in it will give me the option of which format I want to download the model in now in the case of this model I'm going to download the file in the obj the object format there are other formats we could also use including the colada or the Dae format and there are a range of other formats that we can use one of the format's that doesn't really work very well at the moment with the Godot engine is the FBX format I suggest not using that format so I'm gonna go ahead and download that file to my computer and extract the zip file and we'll see the contents of that file in just a moment I'm going to also switch over to the website HDRI Haven which provides us with a ton of panoramic HDI images that we can use for backgrounds and skies in this case I've gone ahead and I've downloaded this particular HDI image once again make sure that you check out the license information for that image in this case this is the cc0 license which effectively means that the image is in the public domain but please make sure before you use any assets to always check out those licenses so I've gone ahead and downloaded both the 3d model and this sky image we're going to be using both of these assets inside our project I'm going to minimize the web browser here to return back to my desktop where you can see the project creation screen for the Godot engine and I'm going to create a completely new project from scratch remember we're going to be creating this environment step by step from beginning to end and here we are right at the very beginning so let's create a new project I'm going to choose new project and give this the name of n/4 environment and I'm gonna call this end preview now I'm going to create a folder on my computer you can see that it's generated that folder here simply by clicking the create folder button you know the folder has been created successfully because it displays a big green tick next to it for the renderer I have the choice of using the OpenGL version 3 on the version 2 version I'm going to stick with the highest version version 3 as it says down here it can always be changed later but really very good practice to try to choose which one you want right at the very beginning so I'm going to again accept all of these changes and choose create to generate that nugudo project and then Godot will come right back at me with this project here it's showing me some information about c-sharp I can completely ignore that by choosing ok I'm going to resize the Godot window here to bring that into view so here we have a default complete the empty scene for the Godot engine and we're now ready to get started to build up our scene based on our downloaded assets so here beginning from a completely new Godot project I'm going to generate a new empty 3d scene pretty easy to do in the interface here in the default layout all I need to do is click on the button here that says 3d scene so I'm gonna click that to generate a new 3d scene you can always tell this has worked because here in the scene tab in the hierarchy you can see it's created a node run at the top a root node a spatial node and the gizmo is displayed here at the center of the scene now it's time to import the assets that we downloaded that is the cottage model and also the HDRI image and its associated texture let's bring those files into view here so that we can see them we have the cottage mesh itself the texture that is assigned or will be assigned to the mess and then finally the HDR image I can simply grab all three of these by left clicking and box selecting them and then drag and drop them directly over here to the file system tab here inside Godot now Godot spends a little while thinking about the three different assets that we are importing but after not too long at all you can see here that we have all of the assets imported we have the cottage texture file the mesh and the HDR I now the cottage dot obj is simply a mesh file I can double-click for example the mesh here to view its properties inside the inspector you can see I can click and drag to view the mesh this is all looking absolutely fine so I can go ahead and drag and drop that into the scene now in doing that you can see from the hierarchy that the mesh has been added to the scene and if you look carefully at the viewport you can even see a face belonging to the mesh but we don't see anything else and this sometimes happens when you're importing meshes from other parties if I my middle mouse wheel to zoom out a bit you can see that this mesh is in fact positively enormous so step one is I want to make sure that the mesh is of right size and in this case this is way way too big now this is easy to fix I could move to the cottage object here and from the hierarchy or from the inspector panel make a pardon I could move to the transform field and change the scale of the model I am NOT going to do that instead I'm going to select the cottage mesh here in the file system switch to the import tab to change its import settings and I'm going to change the mesh size here to not point one or point one and not point one when you make those changes you must absolutely click on the import button to re-import those changes so I'm going to click on the re-import button to bring that here into view and now we've got a much more sensible size for our 3d model here I can actually see this in the view so I'm going to switch to the translate tool with the W key and I'm just going to position this on the grid inside the scene so maybe just down here move over to here bring this forward just a little bit something kind of like that so that I can see the mesh absolutely fine that's looking pretty good that's exactly how I wanted to look I'm going to switch back to the scene tab here now I want to configure the materials for this mesh we can see we've imported the mesh and that's absolutely fine but I don't really see how this mesh is going to be looking materials wise you can see that we've already imported the texture here inside the scene you can see the texture values here if I double click the texture I now need to assign that to this mesh the way I'm going to do that is I'm going to create a completely new material we can't assign textures directly to models but we can create materials that we can assign to models that is what we're going to do right here I'm going to move back to the file system and under the res field I'm going to right click and use new resource gonna select new resource and I will simply select material and it will in fact provide some suggestions in this case I want to create a spatial material I'm going to choose create to accept those values and I'm going to call this Matt main and then choose save to create a new material now by default this will be selected by Godot and I can see the materials properties here directly inside the inspector that's fabulous I'm going to move to the inspector here and begin to change some of the properties step number one is I want to change the albedo slot this allows us to provide the main color of our material and in this case I want to make use of the texture that we've imported so under the texture fields where it says empty I'm going to click on the drop-down choose load and then simply select the texture that we imported with our model and choose open now it will configure the material as it needs to do and it may in fact in some instances need to re-import the texture to configure it appropriately I'm going to let it go ahead and do that and already from the preview panel here with the material you can see how that's looking that's pretty good but it doesn't appear on the mesh so let's fix that now to do that I'm going to select the cottage mash inside the scene here and from the geometry tab in fact it's under the mesh instance section you can see we have a material rollout I'm going to left-click to select that to unravel and we can see a range of 8 different materials that this object uses here now it's effectively going to be using the same material for all eight of these slots I'm going to set that up right now so I'm gonna do the top one here click in the drop-down field choose load and then simply select my material choose open when I do this and I assign the very first material in that slot if you take a look at the ground plane of this model you can see that it's already loaded the ground plane we can see the grass the water the flowers it's all already there now there are some problems with this material but we're going to address that in just a second I'm going to assign the other slot to add the material to the other different pieces so for the second slot I'm going to do exactly the same thing here assign this material and I'm going to repeat that process for all of the slots so now I've completely imported all of the different materials into the slots we're just reusing the same material each and every one of the slots so we're not actually repeating or duplicating any material data it's all the same stuff reused over and over again perfect so what I'm going to do now that I've assigned these materials is you'll notice if i zoom in just a little bit more here and I take a look for example at the tree here you can see on the edges there's a kind of a blue highlight an aberrant field pixels from outside of this and again here if you look at the rest of the terrain you can see we have water here but again we have this kind of area here that's completely black and that's because this material needs to have transparency and right now transparency is not enabled in Godot transparency is not enabled by default but we can easily activate that I'm going to move over here to double click on my material and expand the parameters section here now in the parameters section if I scroll down to the bottom part you'll see there is a property which is going to use alpha scissor this allows us to detect or Godot detects pixels transparent pixels inside the texture and whenever it finds those transparent pixels it will make them transparent here inside this material I'm going to use use alpha scissor to activate that and bang as soon as I do that take a look at the ground here you can see that it's applied transparency all the way around the edges and even the trees look great you can see the foliage coming out here and it's really using that transparency to make this level look great so fantastic we've now imported the model we've now set up our material the next thing that we want to do for our scene now is to configure the lighting and illumination right now this entire environment is relying on godot's default lighting provided by the environment note the default environment information now we could just leave it there but of course we really shouldn't we can make this scene look a lot better by using our HDR I'm app and that's what we're going to be addressing now so now we've imported our model configure the material and just before I provide the environment lighting information I've noticed that I've missed a very important step let's address that right now I've forgotten to save the scene we've added this scene we've customized all these things but we haven't actually saved it I know that because when I take a look at the scene not only does it say unsaved which is a big hint in itself but even if I had previously saved the scene next to the name you can see in brackets there's an asterisk icon that tells me that changes have been made to the scene which are not saved let's save it right now by choosing scene and save scene or I can press ctrl s on a Windows PC or command S on a Mac and I simply have to name this scene if this is the first time we're saving it I'm going to call this main scene press ENTER to save it and now that scene is saved you can see the name of the scene right up here on the scene tab now the next thing I want to do is to create the environment lighting for this scene really easy thing to do I'm gonna move to the scene tab click on the plus icon to add a new node and I'm going to add an environment or a world environment node and move to the inspector and for the environment field I'm going to click on the drop down and choose new environment to add a new environment all lighting from the level is now completely subtracted and overridden by this environment node for that reason everything in the scene including all of our models turns completely black now it hasn't made any changes to the materials or to the texture it hasn't erased any pixels all of that data is still there it's just that because we have no lights we can't see it so I'm going to configure the HDRI map that's there panoramic image of the sky that we downloaded from HDRI Haven this will allow us to wrap a sky image around the scene and the pixels of that sky image will be projected inwards and act like a light source let's see how to set that up I'm going to move to the inspector tab click on the environment field to unravel that and then select the background field let's take a look at the background field we have several options for that one is clear color which provides a blank color to the background I don't want that I'm going to choose sky at least initially we're going to come back and change it but I'm going to set this to sky initially and when I do this we have an hour sky field where I can choose what I want to input into the background to be the sky I'm going to select new panoramic sky because we're going to be using an image that wraps around the environment so I'm going to choose new panoramic sky left click on panoramic sky and for the panorama I can choose the image that I want to use as a background in the empty slot I can left-click to select that and choose load I'm going to pick the image here to load that and Wow straight away what a difference that makes our scene is gone from being completely black so now I'm not having a sky in the background but in addition to that to the lighting looking really great now the one thing I really don't want for this scene is I don't want to be able to see the sky background I do want to use the illumination from the pixels in that texture but I don't want to see it in the background we can easily fix that by moving up to the mode section and changing that from sky to color plus sky this will keep the illumination from the sky texture but allow us to provide our own color for the background now by default it's completely black but I can move down here to the color field and begin to tweak that I'm going to specify a kind of dark gray maybe something kind of like that to provide here I might just increase the energy just a little bit here just a little bit to bump that value up I'm gonna move down to toad map and change that from linear to aces here just to add a little bit more contrast a bit more bump here I might reduce here just the whites a little bit to be something like that to add extra vibrancy to our scene that still might be a little bit too much I might dial it down just a little bit a lot of this comes down to tweaking you need to tweak these values to really figure out what is going to work best for you in this instance now that is looking pretty good in practically no time we have configured a sky environment and have illuminated our scene this is a great position to be next what I want to do is to create a camera that's going to continually loop around this environment allowing us to create a kind of panorama preview of this environment so now we're ready to create our rotating camera animation and you might be pleasantly surprised to find that this is really easy to do I'm going to start by creating the pivot point that is the point around which the camera is going to rotate we know we're going to have a camera and maybe the camera is going to be kind of situated all the way out here but it's going to be rotating around the environment and that Hut that cabin is basically going to be the center of its rotation so I'm going to select the cottage object here which is right at the center of the scene and I'm going to right click on it and choose add child node and I'm going to choose position to create a position 3d object now all this object really is is a completely invisible empty object and it simply just marks a position inside the scene I'm going to position that pretty much right here at the center of this cabin this is going to be the location that our camera is going to rotate around and you might be saying what camera because actually if we take a look at the scene here we don't have a camera but don't worry about that we're going to be adding one in just one second I'm going to position this object here I'm going to rename this to pivot and I can rename it just by dub clicking on the object and typing in a completely new name now I've renamed this to pivot I want to add the camera to this I'm going to right click and choose add child node and then type in camera to add a new camera and that's a child of the pivot so that means that if the pivot rotates for example the camera is going to rotate as well and that is the key to getting this rotation animation working so the first thing I want to do is I want to position where the camera is going to be looking that's really easy to do in fact I'm going to be using my viewport to position the camera so I'm going to get a good view of the house maybe about there and I want to make sure that our viewport here is aligned to the kind of view I expect from the camera so I'm going to put my view about there and then make sure I left click to select the camera here inside the hierarchy and here from the perspective menu inside the viewport I'm going to left-click to choose that and from the menu I'm going to choose a line selection with view it does have a keyboard shortcut of alt ctrl F or or command F on a Mac I'm going to select that and what happens now is the camera is actually positioned at the location of the viewport if I click on the preview button I can see what the camera can see now you'll notice as I toggle between these two different views and I switch to the camera view some elements in the viewport here begin to disappear and this is related to the camera if I select the camera and move to the inspector you can see there is a far field here which is set to 100 units this means that objects beyond a distance of 100 units from the camera then they won't be appearing in the camera at all so I'm going to increase this field to about 500 and in doing this there we are the entirety of the environment and the geometry comes into the view of the camera now I might also tweak the field of view of the camera maybe do something kind of like a tea to kind of Center this model a bit better into the seam I'm going to just switch back from the preview back to the scene and as I move my viewport away you can see now the camera has been left at the position where the viewport was the great thing about this now is if I select for example the pivot which remember is at the center of the house if I select the pivot and move to the transform field and I begin to change the Y rotation actually a bigger pond I'm changing the wire translation if I change the Y rotation you can see that the camera begins to rotate around the house I'm just left clicking and dragging inside that Y rotation field I'm going to reset that back because I want to do this through animation so to create an animation for this and I'm going to just save my scene first to create an animation for this I'm going to go back to the scene hierarchy right-click choose add node and then I'm going to choose animation to add a new animation player to the level now take care because there are several objects here there's animation tree player animation tree and animation player in this instance I wants to choose animation player going to select that and choose create to add a new animation player to the level and press command S or ctrl s to save the scene we're now ready to configure our animation for the scene that is going to make our camera loop around the house this is coming along nicely we're now ready to create our camera animation and to achieve this it's really easy I just need to select the animation player node from the scene tab here and then move down to the animation window now if you don't see the animation window maybe your view looks like this for example all you need to do is to click on the animation button to display the animation window now from here I'm going to move to the animation tools button just by left clicking and choosing new and I'm simply going to create a completely new animation that I'm going to call an 'm camera rotate and choose ok this now creates a complete timeline in which i can build an animation now I want this animation to span a period of four here because there are going to be four distinct stages we're going to be rotating by 90 degrees 180 270 360 for that camera to complete one single revolution of the house model so I'm going to move down here to the time field and change that to four and you can see the gray bar stretch over here between zero to four to mark the entire scope of that animation the next thing I need to do is to create the keyframes for the animation I'm going to be rotating this pivot object in the scene and it's going to be rotating over four distinct stages gonna set the animation player game and go down to the animation window and let's start creating our very first animation track every single object that animates or changes will do so on an animation track I'm going to choose add track and then choose 3d transform track and here is where I get to choose which object is going to be animated in this case it's going to be the pivot that is the parent object of the camera and it's also a child of the cottage object I'm going to choose ok to add that track now having added that track I'm going to make sure I left click and move my time slider right the way back to the beginning of the animation you can also type in the time directly in this field here I'm going to select the pivot object here and move to the transform field and the rotation here it's going to begin at a value of zero and I'm going to click on the key icon to keyframe that now if this is the very first time I'm creating a keyframe I just choose the create button to add that keyframe you can see it's adding these keyframes down here on a rotation track there is an empty track above it which I no longer need so I can choose the trash icon to get rid of that now I'm going to move down to the one section here and I'm going to rotate the camera to 90 degrees and choose the keyframe again to add that keyframe you can see the dot indicates the keyframe going to move to the second one and this time choose 180 choose keyframe you can see the icon for the camera also updating in the viewport and notice as I click and drag between the keyframes Godot is interpolating that is generating frames between these extremes I'm going to move to the third one and type a value of 270 keyframe that and go to the very final one and choose a value of 360 and keyframe that now because I want this animation to play on a loop going around in a circle here like so I'm going to make sure that I click on the loop button to enable looping playback and because I want this animation to play at the very beginning of the level I'm going to click on this little bookmark icon here to indicate that when the level begins this animation is going to play I'm going to save my scene with command s and choose play on the toolbar because this is the very first time I'm playing this project it's asking me to choose which scene in this project is the default one because this is the one and only see this is the default one so I'm going to choose select and select this scene here and now Godot will think about it and eventually it will display the scene with our rotating camera and that's looking perfect well almost I think I want my camera to move a little bit slower that's really easy to do I'm going to close back playback I'm going to select my animation player expand the playback options here inside the inspector and change the speed from 1 which is the default speed if I wanted to play this twice as fast I would choose a value of 2 but since I want this to play slower then I have to choose a value less than 1 in this case I'm going to choose not point for 40% of the speed and choose play and now we have a smooth camera rotating around this environment and this is looking really great as you can see Godot is an incredibly powerful engine in practically no time we took some assets from the internet brought them into our environment and we now have a complete panoramic environment inside a 3d scene and this scene is completely customizable we can add elements we can remove elements we can change lighting conditions we create builds that can run all kinds of different devices this is a really exciting engine really easy to use and this here is the workflow for importing assets configuring environments and creating camera animations I've been Alan form this has been BND dot beers please do check out our YouTube channel and subscribe for more tutorials see you next time [Music]

Channel: BeIndie - Alan Thorn

Views: 3,157

Keywords: gamedev, alan thorn, beindie, c#, benita kvinlaug, tutorial, lesson, how to, programming, gaming, games, c sharp, beginner, easy, start, getting started, learn, indiedev, become game developer, game developer pro, static, godot, light, open source, free, sketchfab, animation, camera, preview, environment, hdri, tour

Id: 57fEpv_qZT8

Length: 30min 33sec (1833 seconds)

Published: Tue Sep 10 2019