Bump Offset and Parallax Occlusion Mapping - UE4 Materials 101 - Episode 8

[Music] in this episode we're gonna go over two methods of making normal mapping look more realistic in Episode two we talked about our PBR material that we built here are cobblestones material and it has a base texture normal map and then this texture which is a combination of specular roughness and ambient occlusion and it also has metalness that we're not using and that looks pretty good we get a pretty good a pretty nice looking cobblestones material but there are a couple of things that we can do to make our normal Maps look more interesting for right now what I'm gonna do is hook up this gray color instead of our texture sample just so it makes the bumps of the normal map more obvious and you'll see what I mean here now that there's no color going into base color the normal map bumps stick out a little bit better and it's a little obvious what we're looking at okay so the first technique that we're going to be going over is called offset mapping and over here on the left side of my graph I have a node called bump offset and what this does is it modifies the UV coordinates that I'm gonna use to look up my base color my masks and my normal map and it modifies the UVs based on the height off of the surface and let me show you what I mean by that so this texture is called a height map and wherever the texture is black it means that you're really low on the texture and wherever it's white it means you're high so if we come over here and take a look at what this texture looks like the first thing that you're gonna notice is that it's extremely low resolution my texture is actually just 256 by 256 and when we zoom in this close you can start to see it it's sort of falling apart because of how low res it is but I wanted to show you this because you don't need a very high res texture to get really good looking results in fact you get better results if your texture is low res and kind of blurry like this I have a version of this height map that's a 2k texture and it's really sharp but I found that I was getting not as good results with these techniques and so I actually decreased it to 256 by 256 and blurted out a bit in Photoshop okay so this is what you need you need a height map and I created this height map in 3ds max by rendering my high-res geometry where the pixels closest to the camera or white and that pixels furthest from the camera are black and then I brought that texture sample into my shader and I plugged it into the height socket of bump offset and now if I plug the UVs from my bump offset into my three textures here let's take a look at what happened [Music] all right so we have to get in kind of close here too to see the result but I hope that you can notice that there's a little bit of parallax movement as I move the camera around and that the the cobblestones no longer look like they're flat on the surface what's happening is that my texture coordinates are being shifted according to my view angle so as I look at the model more like this from a shallow view angle it shifts things around to make it look like the bumps are actually popping out and not just staying stuck right on the right on the surface so let's go back to the way it was again and let's see if we can get a good idea of what this is actually doing so here you can see that my normal map looks kind of flat but then again when I apply the bump offset technique it's gonna look just a little bit more a little bit more bumpy and I can control the amount of the effect that's being applied with this value here called height ratio right now it's set to point zero five I'm just gonna set it to a value of one and go crazy this is gonna be extremely too high but at least you'll be able to tell that it's definitely doing the effect can you see how like when I move the camera around it is parallaxing the surface so that area is where my height map is white are moving away from me and areas where my heart where my height map is black are moving toward me depending on the way that I rotate it now obviously you're not gonna use this with a value of one so let's tone this down a little bit I'm going to do zero point zero seven this is just a little bit stronger so you can see now as I move it around there's a little bit of parallax movement between the tops of the cobblestones and the bottoms of the cobblestones this is pretty cool and you can see that I'm only getting a hundred and seven instructions so it's fairly cheap if I go back to the original shader if I just break these connections really fast you can see that my original shader is 99 instructions and with the bump offset mapping it's gonna be a hundred and seven instructions so not too bad this is this is an effect that you could probably use on most platforms but there is a little bit of a weakness as I get down here to kind of a glancing angle you can see in some places like right here for example that the effect sort of starts to pull itself apart this is one of the reasons that I wanted to use a height map that was blurred so there wouldn't be any sharp angles where it went directly from white to black because that really accentuates the the areas where it breaks down okay so that's the first technique it's fairly cheap and you can use it just about anywhere the second technique that I want to show in this episode is called parallax occlusion mapping and it's significantly more expensive but also looks quite a bit more convincing so here I have a node down here called parallax occlusion mapping and I have my height map set up here and plugged into the height map texture now there is a difference here let me move these nodes up so that we can look at them together so here you can see I have my height map plugged into a texture sample and here I have my height map plugged into a texture object and the difference between these two is that this node just lets me tell it what texture I want to use it doesn't actually sample it and then this node tells me what texture I want to use and it samples it my texture sampling actually takes place multiple times inside my parallax occlusion mapping node and so I want to use a texture object instead of a texture sample simply so I can specify which texture is going to be sampled and then the sampling is gonna take place multiple times inside this parallax occlusion mapping node whereas with my bump offset technique I'm only sampling my height map once okay so with parallax occlusion mapping it's actually doing ray tracing through my scene and figuring out where the ray hits my object and doing multiple ray samples to figure out the best shape of the surface so let me plug in the UVs of my parallel parallax occlusion mapping and we'll take a look at what that looks like this is the most realistic looking result but it's also the most expensive technique out of these two and you'll see what I mean here in a second so here you can see that the bumps in my cobblestones stay bumpy looking even when I'm looking at them at a at a really sharp glancing angle and if i zoom in here you can see that there's this really nice bumpy effect if I get close enough you can sometimes see that the the effect kind of pulls itself apart into like pancake layers but it's not doing it too bad here yeah you can kind of see it here can you see these striations along the rocks so that's what happens if you get a little bit too close to the surface and that's really the only weakness of the of this technique but you can see that oh one thing that I didn't mention here is there is this setting called min steps and Max steps and what that is is it's the number of rays that the shader is casting to be able to create the effect and that's what determines how many steps or striations you see here so if your effect is falling apart you can always increase this and if this is not super obvious you can decrease it so let's go ahead and do that now and I'll show you what it looks like with some different settings so I'm gonna add a constant node so and then then for min steps let's just set min steps to two and then duplicate this and I'm gonna set max steps to four and what I want to show you here is what it looks like if you're using too few samples so there you go you can see that it's kind of like the offset mapping where it's just sort of falling apart at these angles so if I increase this the default max steps is thirty so let's set this to something like sixteen and there you can see it's a little bit better but it's still kind of falling apart around the edges so let's set it up to 30 again right so that looks pretty nice so if I look at it straight down it's only gonna be doing two samples and then the steeper my angle gets the more samples it's gonna do now the more samples it does the more expensive it's gonna get but generally it's it's pretty affordable if you have if you have a fairly strong system what you could do is is use bump offset mapping for weaker systems and then for stronger systems or higher-end platforms use parallax occlusion mapping it looks really nice and it holds up pretty well even at glancing angles whereas bump offset mapping kind of falls apart at glancing angles I just want to plug back in my RGB color here so we can take a look at it so you can see that this really convincingly looks like the surface has geometrical bumps when in reality it's just a completely flat plane and it's a pretty powerful technique too to be able to add additional detail to your surface that's not actually there and all you need to do in addition to regular normal mapping is just provide a height map just a couple more things I already talked about this value here which is the height or how high off the surface it's bumping I'm just going to increase this to 0.1 so that it becomes extremely obvious and then I have these two values here Minh steps and Max steps and that's the number of raytrace samples that we're doing here now that I've increased the height ratio you can see that with a limited number of steps the effect kind of pulls itself apart so the the higher you make your height ratio the more samples you have to give it in order for it to hold itself together and then lastly this is the last required setting is this height map channel and that's which channel of this texture to use as the height map so since my texture is just a grayscale image it doesn't matter which channel and I'm just telling it I'm giving it one zero zero zero which basically means just take the take your height information from the red channel of the height map ok well that's pretty much it in this video we went over bump offset mapping and parallax occlusion mapping both really cool techniques for giving your normal mapping more depth and allowing your surfaces to look more convincing as bumpy surfaces when they're actually just flat I hope you enjoyed this video I hope you subscribe and if you have any questions be sure to leave them in the comments and I'll do my best to help you out thanks a lot [Music]

Channel: Ben Cloward

Views: 31,878

Keywords: UE4, Unreal, Unreal Engine, shader, material, material editor, game development, real-time, tutorial, training, Unity, graphics, 3d, GPU, tech art, computer graphics, fundamentals, basics, beginning, learning, bump, offset, parallax, occlusion, mapping, height map, height, view vector

Id: wc0StMr3CQo

Length: 14min 56sec (896 seconds)

Published: Thu Jan 09 2020