Parallax Occlusion Mapping - showed & explained !!!!!

well today we are going to explore a Shader technique which is called Parallax occlusion mapping technique is used to add more depth to your texture beside normal map and without adding any extra geometry look at these walls the wall on left hand side has only normal map and wall on right hand side has Parallax occlusion mapping applied to it even if you look at this closely you can see the brick which are in the front cover the brick which are behind it and this is done all without adding new geometry so how is it done first I explain how to do this in Godot because you can easily do that in Godad standard material and then I will explain math behind this well for this you need a height map texture I download this texture from ambient CG and I put the download link in the description so if you look at the download file of this predict texture inside zip file you can find a texture which is called a displacement which you can use also for height map after that create a standard material and set Alberto normal map and roughness and then in the height map section enable height map and here in the texture section put your height map in this case I will put my brake displacement texture as you can see we have some changes but it is not good enough and now if I activate deep Parallax you can see we have a major change but what are these parameters so before I explain all of this to you I should explain the concept behind Parallax occlusion mapping I I think if you want to work with this it is much better to know how this scene work internally so imagine this is our surface of mesh and I look at my Surface in front view and this is the eye position or camera position and now if I bring my height map to this space and I put it under my Surface it would look like this now normally when you look at this position for example your graphic card is going to take the UV coordinate at this position and according to that UV coordinate it is going to take the pixel at this position and render that on your screen but now what we are going to do is to draw an imaginary line and see where that line will intersect to our height map well that intersects here so we grab the UV coordinate of this position and here instead of using its original UV we are going to draw the pixel at this UV coordinate if you look at this image you can see there are some point which we never intersect them at this view angle and in the real world also it is like this because you cannot see the points which are behind something so I hope this was clear to you and up to this point you understand that well visually we can see where this line will intersect but how we can calculate it mathematically so first of all let's define our coordinate system this is our surface normal this is another Vector which is parallel to our surface and I call this tangent and there is another Vector which is toward the screen which I call that binormal and I cannot show that to you so this space is called tangent space basically each point on our mesh has a different tangent space which is defined by its normal map on that point and if we do all this calculation in Tangent space it would be much easier another important thing is that usually this tangent vector has the same direction to X component of our UV coordinate and polynomial has the same direction to Y component of our UV coordinate this is really important and later in this video you will understand that so now we go forward a step by step and see where our line will intersect our height this is the first step as you can see I extend my view vector and then I measure its depths like this and similarly on height map section also I go forward one step in the X direction of UV and I measure depths also here now we check if the dips over our line is greater than the depth of our heightener so it is not so we continue and let's see what will happen so now our line depth is bigger than height map depths here but as you can see our line is not exactly on curve height what we do now is to average between this position and previous position and calculate our UV in this way but finally we cannot calculate the exact location of intersection but we can calculate a point closer to the intersection Point by making a smaller step so now that we learned the concept of this let's take a look at a height map parameter again so here we have mean layer which is 8 and Max layer which is 32 so layer is the number of total step and for better optimization when we look at top of our mesh we set the number of Step 8 times which is defined in mean layer and when we look parallel to surface of the mesh we set the number of the step 32 which is defined in Max layer and when we are between these two we put a number between mean layer and Max layer other parameters are flip tangent and flip by normal in case your turn joint and binomial are not in the direction of your UV you can flip them here but now everything is working so I won't touch them there is another parameter which is called Philip texture which will reverse the direction of the height Mark I really suggests to not use really high resolution height map images as you can see we just approximately calculate the intersection point and because of this inaccuracy if you use height map texture with a lot of detail you will have some artifact for example look at the ball on the left this phone has 2K texture and the wall on right hand side is 512 by 512. you can't tell the difference and please note this method is need enough processing power especially when you set the layer number to a big number so use this method with caution and well I hope you like this video and till the next video bye

Channel: mohsen zare

Views: 3,222

Keywords: godot, shader, godot shader, tutorial, Parallax Occlusion Mapping, godot shader tutorial, height, heightmap, standard material, Parallax Mapping

Id: x1TwfpQRhbk

Length: 7min 10sec (430 seconds)

Published: Tue Apr 25 2023