Unreal Engine 5 - Fake Interiors / Window Box Material Tutorial

in this video tutorial we'll take a look at how to create a window box material which can be used to create fake 3D rooms inside of buildings as shown here even though these Interiors look like they're actual 3D they're really just a flat plane of geometry Behind these windows now this effect is really easy to do in unreal 5 and similar approaches have been used in many games over the past several years for example the 2018 game release of Spider-Man Matrix awakens Tech demo and this even goes as far back as the 2013 version of SimCity and I'm sure there's plenty other games that have used this type of effect in this video we're not only going to go over how to create a material that does this effect in unreal but I'll also go over how to generate these interiors that you can use with this material so let's get started so the first thing we must understand is how do these Interiors get created when I go up to one of these windows it looks like there's actually a room in here even when I rotate or move it seems to update properly but really it's just a trick it's a trick with a text here and a material that draws as texture in a way that gives an illusion of a 3D interior based on our camera angle but really this whole interior is really just stored within a texture and this texture is kind of like a cube map lat longitude format of a text here and I'll just open up an image to give you an idea of how that interior is stored so if we look at this image here you can see I have color-coded different sections with different colors this is how that room is stored in terms of layout where the white part is the ceiling of the room the gray part is the floor of the room the black wall here that kind of gets split over these two sections is the left wall the blue wall or the blue section here is the right wall and the red section is the front and back wall so this is kind of how that room is stored it's stored in a texture with this format and this is like a latitude longitude Cube map format now we have to generate these textures to create our Interiors our interior has to be stored in this format now there's plenty of ways of generating our textures to adhere to this format we could go into Photoshop or any photo editor and paint our rooms to follow this kind of layout or we could take pictures of the actual room in real life and then take all those pictures and distort them or transform them into this format so there's many ways you can create these kind of interior textures for use within this Shader but I'm going to show a really quick and easy way to create these textures quickly and have a lot of control so you could push out a lot of different variations of these textures and we can do this all pretty much directly in on real mostly all the steps will be done and unreal and you can even do this step in unreal but I'm just going to use Maya to do this and you can use your favorite 3D modeling software like blender or whatever else you use to model in and I'm just going to create a cube to have some geometry for this room that we're going to create and then we're going to take that room and snapshot these latitude longitude Cube map images from it and we're going to do that in unreal but I need to create some geometry to build a little bit of a set or this room that I can generate these images from so I'm just going to create a cube quickly size it up so it's correct scale or roughly correct scale and just color code the faces front and back face red ceiling white floor gray left wall black right wall blue just color code some materials on here and assign some materials so that you have different materials to assign or different shading groups to assign and unreal so I'll do that really quickly so there we go I've assigned those materials and now what I can do is just give this a name I'm just going to call it window box and then one last thing we're going to do is flip the normals so that they're facing inwards and not outwards so I'll just select all this geometry and take the face normals and reverse them so they're pointing inwards and that way our room will be visible from inside of it and from outside of it the walls will be invisible so the faces are facing inside not outside so once we've done that then we'll export it to a fbx and bring it into unreal so next in unreal I'm going to create a new level or a new scene delete the sky delete all the lights delete the directional light everything so we just pretty much have an empty scene and I'll right click and import our window box geometry we'll click on import all and it will bring in our window box geometry that we had our Cube and all our materials that we assigned for each of the walls that we want to adjust now what we'll do is we'll drop our window box object inside of our scene I'm just going to reset its location to zero zero zero so it's exactly in the center of the world and it's really dark now we have no lighting because we delete all our lights we deleted pretty much everything so I'm going to go up here and just add a point light and I'll also reset that point light location to zero zero zero just so we get a little bit of lighting inside of our room now so now we have this room created with a little bit of ambient lighting inside of it you could play out the lighting a bit more one thing that I actually ended up doing which I'll show here is I created some different variations of Lights I created a rectangle light that kind of just sits at the roof pointing down to create some nice bounce and a nice look and then I also created some other configurations of lighting stuff like this where I just used a rectangle light flipped it around to face the ceiling to give this illusion of these office type lights and I've done that in a few configurations I have these more vertical lights I have these more rectangular lights and then even a kind of light that goes around the edge of the room so I have all these different configurations of lights that I can just turn on and off to create different variations of Interiors really easily so the next part that we also want to to do to make this interior a little bit more detailed is start changing these materials or reassigning things them to things that kind of give us better looking floor walls ceiling so I didn't spend too much time on this but I'll give you a peek at some of those materials that I created I really just created three materials a floor material a wall material and a roof material and they're all pretty much the same I'm using material instances here so I have control over the tint color and what texture I'm using for the floors walls or ceiling as well as a tiling control but the material is really just made up of something like this super simple you could probably make it a lot better but just a base color that multiplies a color parameter by a texture parameter and then it has some UV control for tiling so I just made a material like this made the tint color here a parameter made the texture parameter so I can swap them out easily and made the tiling amount a parameter and then I pretty much is just material instanced this material seam here so I have a very adjustable and easy way of changing the floors the walls the ceiling without much work so if I go back to this Cube now and I reassign these materials like the roof is white so I'll put the roof material on the ceiling I'll put the plain wall material for the walls so red and blue and then also the floor material for the actual floor now one thing that you'll notice and I think that's the floor let's see the plane wall okay that one's plain wall this one will be floor now the thing you'll notice is the textures might not map properly if I look at the floor and stuff right now it doesn't seem to be working correctly and that is because we didn't UV this so to correct those UVS I'm just going to open up our window box and Maya open up the UV editor and you can see the default UV here is not what we want we want each one of these faces to match the full UV from zero to one so I could planar map each face but a quick way of doing this in Maya is just to go here to modify and click on unitize and it will break each face size it to the current UV and just overlap it so now my UVS should be good and I can re-export this and just re-import it in unreal so if I go back into unreal and take our window box here and just right click and re-import it'll take a little bit of time and then we could see now things are mapping much better if I look at the roof that looks correct look at the floor that doesn't look blurry and stretched anymore so now we have something that looks like a bit of an interior and since all that all those materials like for the wall for the roof for the floor they're all just instanced materials that allow me to tint the colors I could easily go in here to the wall open it up change the colors and just create so many different variations of this room or go up here and hide and show different groups of lighting and create these different styles of room so what I can now do is easily take this room and generate one of those latitude longitude Cube maps from it and the way that we're going to do this is I'm going to go up here to add and I'm going to add a cube you can just type Cube and you'll see this scene capture Cube and that's what we're going to want to create and if we click on scene capture Cube It's going to give us like a camera and I'm just going to reset its position to zero zero zero we'll turn on the icons and we can see there's a camera I just want to angle it so it's facing the direct side of the wall that you prefer you could technically rotate it however you want I think I can leave it default here and what we'll be able to do now is we'll have to create a text here a render texter so I can right click in my content browser and go to textures and create a cube render Target and what this will allow me to do is capture a latitude longitude texture Cube from this camera so I first have to create the render Target or the texture that can store this information so we have to go here to textures Cube render Target and I'll just call it uh RT for render Target underscore flat long Cube and it will look like this it'll look green but what I'll do is I'll select this scene capture Cube that we have in our scene drag and drop this Cube render Target into the texture Target of my scene capture Cube and then within seconds you might just have to wait a bit it will refresh and update and if we open up this render Target now or this Cube render Target we see it's captured this room and that's pretty much it that's our text here that we can use for our interiors and to export that and for unreal to recognize as a texture as a cube map you have to make sure it's saved as a DOT HDR file so if you are to make these yourself in Photoshop or some other software you have to make sure you set them to 32-bit and Export them as a DOT HDR otherwise unreal won't recognize it as being a cube map now if we're doing all this in unreal like we're doing here we can just export our texture by right clicking on our lat long Cube here and going to asset actions export and you can just export it to a file and pretty much save it to wherever you want to put your library of these interior flat longitude cubes so you could generate tons of them really easily and you can also add more details like you could add little picture frames and doors onto these walls and make it a little bit more realistic than what we've done here but this is just a starting point for being able to create these Interiors so now we've successfully created our interior image that we can use and now we'll go about creating the Shader that will allow us to use these images or create the material that will allow us to use these images to create that fake 3D interior window box effect so now I've created a new scene I've imported my building I put a plane in the windows as glass so I made like uh my tier a bit of opacity and some forward shading with some roughness to get nice Reflections on those windows and I'm putting another plane behind that glass you can see it here here's the plane just putting a flat plane right behind the glass both on the the side windows here on the front windows um so that I have something to attach this material to that's going to fake our Interiors so let's take a look at how this works I'm just going to put this material actually in front of the window just so we could see how this works so it's really just a flat plane and I'm going to create a new material I'm going to call it uh M underscore window box open it up and in our material editor I'm just simply going to take the missive color drag it out and create a texture Cube well actually it's not texture Cube texture sample parameter Cube that's what you want to create and I can give it a name if we want to name it properly so I can just call it uh interior texture Cube and then we'll have to put our Cube map into here so we'll have to import our Cube Maps so I've already imported them onto this folder here called cubes and there's a cube maps that we extracted and I can just put in one of those Cube Maps into this texture Cube and it's going to give you an error it says Cube sample needs a UV input so the next thing we're going to do is take the UVS drag that out and unreal makes it really simple there's a interior Cube map node which does all the math and all the the work for us to create these Interiors or create the illusion of these Interiors so you can see it here on the material ball uh you can see it's faking those Interiors with our Cube map if you want to see how this works and how they're doing it you can also double click on this interior Cube map node and see kind of the technicals behind it and take a look through that but for our purposes today doesn't really matter we can just connect it up use this node and have the effect just work right out of the box so very easy to set up without being too technical it's really artist friendly because they have it made as a node in unreal so the only thing you might want to do is if you need to change the tiling of these rooms you're going to want to connect the tiling to some values so first of all I'm just going to save this and apply it to this face material that we have here to see if it works so I'll save that and I'll take our window box material and just apply it to our plane or cube or whatever you have so I'll go in here and take our window box and just drag it onto it and there we go we have our faked Interiors now it doesn't really line up with the windows so how many windows do I really have I have one two three four five six seven eight and I think that's eight by one two three four five six seven eight nine so eight by nine so I can go in here and for the tiling what I can do you can make this a parameter and make it like an instance material but for now we'll just create a constant with the value of eight another constant with the value of nine and then just append those together so I could just do a pen menu and output red and green those two values to the tiling V2 two values and then it will give us that tiling you can also probably just do a constant 2 vector and then append there's plenty of ways you can do this doesn't really matter which one you use but this works and now if I save this and we take a look at the tiling now okay that matches up with my Windows a bit better and if we look look at that we have our Cube mapped Interiors and you could change this material to different you know Interiors for different buildings you can get a bit more complex and have it swap different rooms for different patches of this material as well that'll take a little bit more work but you can really do anything with this and you can build up a simple library of these Interiors as well I put I made another one here I will try out and you can see it tells you what to do like And subscribe and I actually have this flipped so I should flip that around and that's one thing as well you just need to make sure that uh you have them angled the correct way so you're going to want to definitely test it out now just something to think about here technically I should have this text here flip the correct way I could also just take the cube or the plane that I'm using here and invert it and that would also potentially flip this so if I go and take this plane that we have here and scale it so it inverts there you go it's flipped the correct way however another way you can flip this and this could be useful for if you want to angle different rooms differently so not every room is looking exactly the same what you could do is open up your window box material and make a slight adjustment to it here we'll go to where it says and maybe let's make this a bit bigger so we could really see this easier I'll go to where it says this section here interior Cube map where it connects to UVS and we'll make a bit of a modification here so if we want to flip things a particular way we could take this uvw coordinate and multiply it maybe I'll just switch this around we'll multiply it by a constant three vector so uvw XYZ you can multiply the X by u y by V and Z by w so I could just leave these all one so it doesn't modify any values and connect that up and I could see here if we see that uh like And subscribe text if I do negative one on y I can flip it or if I do negative one on one of these other values I can flip different parts of the room so you can see if I flip Z to negative one it flips the room upside down so you can do this to modify things if you have to if you need to flip something really quickly and easily another thing you could do and I'm just going to delete this what we added here there is a feature here called randomize rotation and we can connect it up to a static Boolean and enable it or disable it or you could do like a Boolean parameter so you could have control over it in an instance material but in this case I'm just going to take it and set it to be true and what that will do if we save this and take a look at our actual scene we see the rooms here and they're going to be different some of them have this like And subscribe wall on the left wall some have it on the back wall some have it on the right wall so now not every room feels the same you get a bit of variation in here so that's something you can also do to break up these rooms so they don't all feel like they're doing the exact same thing so hopefully it gives you an idea now of how you can create this window box material generate the Interiors as well and if you found this useful and you learned something new like subscribe comment below on what you'd like to see next and if you're part of the patreon you're also going to get access to the PDF that goes over all these steps as well and even a little bit more so check that out if you are part of the patreon and if you're not take a look at the patreon down in the description below

Channel: renderBucket

Views: 18,524

Keywords: UE5 tutorial, interior room setup, window box material, game development, environment design, UE5 interior, UE5 windows, game design, 3D environment, UE5 materials, UE5 textures, UE5 shaders, UE5 beginner, UE5 tips, UE5 tricks, UE5 workflow, UE5 step by step, Nanite virtualized geometry, Lumen global illumination, Parallax Interior, Interior Windows In Unreal, Fake Interiors In Unreal, 3D Interiors In Unreal, Unreal Engine Tutorials, millions of rooms using 1 polygon

Id: 6XDUfCalSdE

Length: 23min 4sec (1384 seconds)

Published: Sat Apr 08 2023