Creating an Interior Mapping Shader using Unity's Shader Graph - Game Dev Sandbox

maybe it's because i'm spending a lot of time indoors at the moment but over the past few weeks i've spent quite a lot of time thinking about windows in games windows are an interesting challenge to solve in game design because there's something we all recognize the function of yet in most games we tend to avoid rendering anything behind them after all it's incredibly expensive and time-consuming to create and design all that geometry behind something that the player is ultimately not even going to notice that much in a lot of games in the past the work around to this challenge has been one of two things either you'd throw a simple texture back there and create a sort of pop-up background which looks okay at a distance but as soon as you get close the effect of it is almost immediately ruined the safer option and the one i think a lot of developers have opted for in the past has been to just make a universe full of blackout windows and mirrors after all if you can't see into the window you don't need to render the geometry ultimately i get this it's a workaround that a lot of us probably don't even notice that much we're used to seeing reflective surfaces in legacy games and there's a sort of visual language that's evolved that something like this would represent a window it's definitely a safe bet but a number of recent games have been doing something new with windows it's a technique known as interior mapping and it's probably most familiar to you if you've played marvel's spider-man by insomniac games in this game the windows on multiple buildings throughout the city are mostly transparent and there's visible geometry behind them it's not just using that old school cardboard cutout technique either as you move the geometry adapts to the view it looks like there's an actual room back there and that's because there is kind of hi there i'm matt and welcome to game dev sandbox this is a series here on the channel where i explore ideas that i'd like to try out to better my understanding of game design and development and then share that journey with you if you haven't deduced from the intro already or from the title of this video this one is all about building an interior mapping shader inside of unity ever since i first played spider-man i was blown away by how good all the windows looked in that game recently i was playing forza horizon 4 and it was while cruising through the streets of edinburgh that i noticed the interior mapping technique was being used again here and how great the windows looked in this game too so i started looking into this a bit more as it turns out there's actually been a number of games since way before spider-man released that have implemented a form of this technique in one way or another a version of this technique was actually used in simcity 5 to add details into the building's windows but what is interior mapping exactly and how does it work well it's basically a parallax effect achieved with a shader that projects a specially designed texture onto a surface and then maps that texture in a way that distorts the image relative to the view from the camera it's a great way to simulate depth behind a window without the need for any additional geometry essentially if you've ever worked with a cube map before it's kind of like that in fact that's actually where i started with my experiment into this i knew i wanted to figure out the basics of the shader before doing anything else and from my initial research it seemed that a cube map was a good place to start so i opened up photoshop and shortly threw together a basic cube map texture using labels and colours like this i figured i could more easily see how the texture was being mapped as i messed around with things i created a new shader graph and connected the texture up to a sample cube map node this resulted in a wild space projection of the texture onto my test cube here it had a sort of interesting look as i moved between each face i spent a while playing around with different combinations of the view direction and position nodes and different methods of projecting the texture based on where the camera was i had some interesting results but ultimately i couldn't quite figure out how to get the projection method to work properly i definitely knew i was close though when i reached this point this was starting to resemble the projection method but i knew there was something i was missing so i went back to the drawing board for a bit and looked into some references of how a shader like this is actually put together by code delving into the shader code that some lovely folks on the unity forums have shared made me realize that there were a number of components that i was totally missing i started making some adjustments to my graph based on these findings in my closest example i was experiencing some weird curvature that i knew needed to be ironed out i noticed how the sampling of the view direction was being clamped in the shader code so i figured that might help straighten it out i went ahead and implemented that workflow into the shadow graph i then also noticed that something was being done to the uv mapping in this part of the code that i had entirely missed previously this ended up being the missing piece of the puzzle after adjusting the graph to calculate everything relative to the uvs on the cube i finally had something that was beginning to resemble a functional room knowing that my shader should be able to tile at this point i reduced my scene down to a single cube and just when i thought i'd accomplished it i ran into a really interesting problem yeah it's not supposed to look like that something super funky was going on whenever i increased the scale of my cube i was really confused as far as i was aware this should have been working after stumbling around in the dark trying to figure this out for a bit i eventually found a forum post complaining how the sample cube map node was inversely mapping normals due to being designed mostly for sky boxes seeing as i had no other leads on what the issue might be i tried remapping the normals on the sample cube map node using a normal from height node and then i had done it i built an interior mapping shader in shader graph [Music] the next logical step was to figure out a workflow to actually map this thing and see how it looks i wanted to figure out how the mapping actually worked and how much of the room it would show i know that unity has a built-in way to capture a cube map from a camera so i was curious if i could build a few sets and pre-render them to some cube maps to use as my rooms i built out a quick box room using some one-sided planes to make four walls a roof and a floor i textured it a bit added a couple of objects to walls and stuck a camera in the middle i wrote a quick editor script to handle creating the cube maps and the initial result was not great these chairs here are looking pretty skewed and the projection seems way off it looked alright with our initial test image but when applying an actual cube map there were some pretty glaring issues with the shader in its current form i wondered if the chairs looked weird here because of how the projection worked so i wanted to make sure they were accounting for this by flattening them up against the wall this actually worked pretty well once i'd flattened them the back wall was looking much better in the projection but i was still getting these weird skews with the edge walls and the projection just wasn't uniform across all my faces of my cube some sides were flipped and others were upside down something definitely wasn't right here up until this point i had been using positive values for the tiling and depth calculations staring at this upside down room i figured why not just try to flip it by negating the tiling values and upon doing so my shader magically corrected itself the weird skewing on the edges were gone and the cube map was projecting properly all of a sudden it turns out that having the values in the positive cause the projection to move towards the camera rather than away so they need to be in the negative space to inset into the view hooray for happy accidents eh as you can see i still had some issues with the room being flipped in some cases but i remembered that the default unity cube has rotated uvs on each face a quick trip into blender to map my own cube took care of that one we got there in the end so the cube map method seemed to finally be working and we've got the framework for mapping out rooms onto our shader with that i went ahead and made a bunch of rooms to use it was kind of funny needing to squish up some of the models so that they don't extrude too much from the wall and break the illusion i wanted to be able to map multiple rooms to the same material so that when it's applied to a building there's some clear variation so i made a few different kind of rooms and exported them out into their own cube maps i then went into the shader and converted the entire thing into a sub shader so i could assign multiple cube maps to the same material using a checkerboard texture i was then able to lurp between different squares on the face to alternate between the two different cube maps so the dark squares would show cube map a and the light squares would show cube map b this worked amazingly and immediately looked awesome so i doubled down and split it even more allowing for four different cube maps per material this was pretty good and i could easily have gone down a rabbit hole of subdividing the uvs like this but i figured four was probably good enough to allow for a nice amount of variation for now all that was left to do now was prove out the concept so i went through and added the material to a few quads placed behind the windows of a building and mapped the tiles out accordingly it is genuinely really impressive to me how effective this is and how much it adds to an environment when a building visibly has rooms instead of just tinted out windows for that final touch a bit of post processing and some high resolution reflection probes really help sell the effect when working with a cityscape [Music] i definitely have a much better understanding about how all of this works now in the future maybe i'll take a look at some more advanced techniques with a shader like this but i think this is a really great starting point if you're interested in learning a bit more about interior mapping there's actually a really cool breakdown on gamma sutra from playground games about how they achieve the effect in forza horizon 4. there'll be a link in the description down below for that along with some other resources i discovered while working on this video if you want to explore it a bit further anyway that's all for now let me know your thoughts in the comments down below if you're new to the channel be sure to like the video and hit that subscribe button it helps the channel grow and if you're interested in more videos like this from me why not take a look at one of the videos on screen now as always thank you very much for watching and i'll see you again next time you

Channel: Game Dev Guide

Views: 176,403

Keywords: unity, learn, games, gamedev, how to, making games in unity, tutorial, unity tutorial, learning unity, unity3d tutorial, programming, making games

Id: dUjNoIxQXAA

Length: 10min 52sec (652 seconds)

Published: Tue May 05 2020