UNITY SHADER GRAPH with Fake Interiors Shader

[Music] interior mapping that's the subject that we're going to talk today's tutorial so even if you played or saw the gameplays of the spider-man game you might notice that there are 3d building interiors when you look through the windows of each room but they're not actually real they aren't actually faked using shaders and will try to achieve a similar effect with shader graph but in the tutorial we will look to this technique in three steps in the first step we're gonna look what is actually interior mapping and you know where it is used and in the second step we're gonna look at the interior mechanism like how it works how it can be applied in our case and in the third step we're going to jump to the shader graph and try to create the same effect step 1 let's start with the definition you might be asking what is the interior of mapping anyways right it is a technique which is widely used in the game industry from decades and you might saw it in old Bioshock games or the spider-man game or crackdown games or many others or even SimCity so the technique is originally published by this guy and you can access to the white paper from the description box below as well I will add the link if you want to look to more technical explanation but in terms of the definition this interior mapping is simulating parallax corrected fake environments in reality you don't want to have each and every one of room interiors in reality like you don't want to have 30 drawn meshes because if you do and if you have multiple rooms it will create a huge overhead in your performance because each one of those objects furnitures rooms anything that they need to be drawn and taken care of by GPU and CPU or like your render pipeline and it will slow you down a lot and if you are have those fake interiors with not prior like if they're just going to look from a distance or like player will not going to interact with them generally game developers are using printed textures to the windows so in the GTA floor if you look at it you'll see most of the windows doesn't have anything like they did just like the sticker printed out to the window and it breaks the immersion I'm telling you this because even if you are developing for mobile platforms or consoles or you know high-end devices it this technique is not performance hungry and can be used even in the de tend to switch so this technique creates an illusion of the virtual room and using the mechanism that we're going to explain in the step two it will give the immersion and the 3d feeling to you when you look through the window with all also keeping the peripheral ones cost very long that brings us to the second step step two so let's take a look at the inner mechanism how it works I strongly recommend you to take a look at the paper that I will attach to the description box but we'll briefly explain the inner mechanism of it let's say we need to have a virtual environment but we don't want to draw it because we will the player will not interact with the environment in reality but if we don't put it it will look really not like it will look fake and we don't want that even if you all have a cartoonish art style it's an important thing you don't have to have super realistic graphics or stuff it'll create the immersion to your world your simulation your environment it's not related to create realistic graphics but believable and on not uncanny valley kind of graphics so to do so we need to start with simulating a virtual room in our case but also this technique can be applied to other cases such as cars or anything that has interior but we're going to talk to the rooms first in the rooms unit to simulate a room environment you know like a box it can be a unit box which is more convenient to be able to map the cube map or texture Atlas into it and then considering the fact that you have created the vast virtual room with not the mesh just to simulating it the but boundaries let's say and then using the window the real window mesh and the camera you will cast a ray from the camera through the window and then this ray will pass through the window to have our virtual room and it will intersect with the virtual rooms ceiling or the walls wherever you're looking at with many different rays and then we need to scale the dimensions of the cube map remap it so to say with our virtual room and then when we do that we can actually get the pixel that pixel of that texture belongs to that intersection point and then get that back and put it into the window and wherever you look it's just pretty similar to what we do in the real life and it's really easy to implement as well brings us to step 3 the implementation let's jump to the shape of graph and find out more so we need to start with creating the direction first so new direction note is important because we're going to rely on the view of direction of the camera but we will not stick with the worldspace the reason behind we will not stick with the worldspace or the object space is simple but in the actual paper it was suggested to use those one of those spaces but problem occurs when you have curved walls or furniture which is not shaped like you know cubes if you're not making minecrafting doors you're probably going to need that we're gonna transfer our space to something called tangent space we're going to need that because tangent space is relative to mesh surface rather than the object or the world space which will solve our curve problem the problem is I didn't mention about it if you have curved surfaces and use object space or world space things got distorted in those curves because it's relying on axis aligned box because what that's what we have but if we use the mesh related and relative space the curves will look normally and will not be distorted so we're gonna switch our space to tangent search space and then we're gonna need to multiply this output with another value so the multiplication gonna happen with minus 1 so I'm going to create a vector one value and give minus 1 joint and then I will attach this to you to multiply after doing that you might be asking why do we need to multiply with minus 1 right this is because a conversion from OpenGL to DirectX like in the diuretics it's stuff from the bottom in the OpenGL bottom from the top like the y-axis is inverted so we need to flip that to you know have corrected directions in our mesh so this multiplied value is actually our tangent view direction the next step is the creation of the simulation environment let's begin with getting window meshes you v's first as a following operation I'm creating an exposed property to control the tiling and call it as tiling and then we're going to add a tiling an offset node in order to create multiple rooms if we ever want to create multiple rooms in a giant building then I drag that property to the canvas and use our round node to get integer numbers because a tiling we can have floating point numbers as well though we should have exact room sizes now this is where round node comes handy and rounds those values into integers next I'm going to create a fraction node and a multiply node with a value of 2 then I'll subtract this node output from 1 it looks like a weird operation but this is actually a formula to create that virtual cube shape so don't be confused it's just math with that said we need to split the result of this vector and only take the walls ceiling and the floor of the room we would like to pass the death by hand to make minor tweaks on the visual appearance for this I'll use a combined node to use x and y-axes values as walls and for the ceiling but I'll pass one as room that to Z value you can play with this values and multiply them based on your cube maps appearance all right so we have created the second part as well which was simulating this cube environment so we have it right now here and let me just recruit those things create a group and like I'll just gonna create a group for them to be able to keep it simplified in this group I'll name it as the simulating room and in and in the other one I'm just going to call it as the tangent view all right as we discussed before we need to do several steps first one was getting the tangent vector the view camera and then creating the virtual environment and lastly we need to make a ray casting frame camera using the view direction through that virtual world reversal the environment that we just created so let's jump to that part first thing for our ray Kassar is making a division with tangent view direction I'm gonna create a vector one and put value as 1/2 upper side of the fraction next according to the explanation from the paper we're gonna get the absolute value of this and also multiply the same fraction with a value then we will subtract the absolute value from the multiplication result though this multiplication should be done according to our fake rooms dimensions which is possible with getting output of the combined node and connecting it to the other inputs off the multiply node then finally we're gonna need to add a splint node to split that vector into pieces all right we have created bunch of mathematical stuff over there the reason is we have simulated we have created a cube or a room but we don't know which part which side of it is actually our window they're real we know so this mathematical formula which is converted to notes is allowing us to determine the corners of the room with using that we can actually like determine which side is the window in momentarily let's jump to that and let's do it I need to get the closest corners to the window to do so I use minimum note for each one of those X's right using those two functions as I said we created the corners we determined the corners the nearest corners to us this way we know which is the near corner in x axis y axis and z axis so then the only thing that we need to do is tracing that ray until this position has been intersected to our virtual group let's do that okay we're going to multiply our view Direction vector with our room border planes then we're going to add this value to room borders this way we can actually get the intersection position throughout the Ray [Music] as a next step we need to flip all room borders except the depth because they're somehow flipped if we don't but the depth or let's say Z taxis values the same so we'll just multiply it by one to leave it just the way it is finally we can sample our cube map I'm creating a cube map exposed property to be able to attach my cube map from the inspector then drag it to canvas and create a cube map sampler to sample cube map UV positions with interior mapping technique I plug our multiplication node output to leave their input oddly enough when unity generates sampling code from shader graph it creates a weird form of the sampler in the code which doesn't work to work around this we need to attach a 0 value to normal vector right we're doing that we have actually performed with the Ray casting believe it or not it's that simple shader magic which means if we plug it to the code to the albedo or the emission we will see the effect momentarily let's take a look at it okay I'm just gonna connect this to your I'll beat output of the I'll need master node if you have a PBR master instead of omelet master node you should put it into the emission field then I switch back to the scene view and create a simple quad yes it's just a quad will render the entire interior ok I got a simple interior cube map imported and if I attach it to my material ladies and gentlemen I present you the Turner knife all right we have created the actual part but to make it believable we need to blend it with the reflection because generally when you look through the window you'll see a reflection of the skybox or the outside exterior environment let's do that now to add exterior flexion we need to have an additional cube map in place which means we need to create another cube map exposed property from the blackboard then I just drag it into note canvas and simply cube map quickly though I want to use world space since exterior skybox is not in an object so it should be world space so I'm creating a view direction and normal vector nodes and leave their space to world then attach them into cube map sampler next step is giving this reflection much more at the middle of the window since at the window edges generally not that reflective due to the shadows in the real world and if we want to work with inside out we need to use our favorite node mister fernell I add a free download and keep the power value as point 7 then using a 1 minus node I can invert the effect to keep things reflective at the middle and dissolve throughout the edges to do so I need to multiply 2 cubed with this fernell then using a blend node and screen mode blending we can have the skybox reflection on our window although this was the overall reflections but I want to add one more detail generally when you look to a window from a very fine angle reflection increases a lot and that makes things really hard to see we want to have the same effect to increase the immersion to do so I'll create a dot product to delimit the reflection to wide view angles then attach normal vector and view direction vector to it then using a saturation node I clamp the dot product between 0 & 1 lastly I'll use 1 minus T invert to effect since currently it reflects from the middle not from the sides but I want additional control over this values thus I create a clamp and a smooth step node to limit the side reflections with that we are finally about to be done I just need to learn this interior mapping and side reflections then using another lerp node I'll mix our overall blending to side reflection fade out finally I plug that lerp output back to albedo and Congrats you have completed your fully functional fake interior shader all right we're doing that way I'm actually created the entire thing so that's all for this tutorial I hope you liked it if you do please consider to be a subscriber to channel from here or if you like this tutorial and see more like that please press the like button and you can share this video with your friends that want to create interiors like this as well that's all for this one I'll see you in the next tutorial

Channel: Mert Kirimgeri

Views: 39,077

Keywords: unity, shader graph, interior shader, fake interior shader, shader development, visual scripting, unity 3d, game development, spider man ps4, interior mapping, unity realistic indoors

Id: tXtu8Yzp7I0

Length: 20min 38sec (1238 seconds)

Published: Mon Oct 07 2019