Volumetric Parallax Ice Shader in Godot

foreign we are going to create two type of ice volume Shader this Shader has no volume in them but they have a parallax effect that is going to fake the volume this method is not just for eyes you can apply this method to many other material and create some cool effect so before jumping into the code let's see what we need to do materials like eyes are not completely transparent but you can see the layers below the surface of them so imagine this is the top layer of the eyes and this is the eye position so as I told you in material like us you can see the layer below surface so these are the layers below and now if we look at the eyes at a different angle the thing is the layers below will move compared to the previous position and as the depth of the layer is bigger it is going to move away further so we need to create a share there that makes multiple layer and each time we change the angle of the view the layer below to the surface moves and as the layer has more tips it's going to move further encoded Shader we have this view Vector in fragment function but the question is how we should move these layers because our view Vector is in 3D space but the only way to move this layer is by multiplying the texture coordinate so how we can make a relation between these two well this is a tangent space and as you know each point on our mesh has a different tangent space and called in a system in this space is defined by normal which is perpendicular to that point on mesh and tangent and binormal which are parallel to mesh so fortunately tangent and binormal have the same direction as the X component of our UV and Y component of our UV this means if we can bring our view Vector into tangent space then the x and z component of our view Vector are in the direction of tangent and binormal and this is the same direction in UV or textured coordinate system and we should move our texture along this Vector I hope you understand that but if not write a comment and tell me where should I explain more I create this small scene in Godot and I create a plain mesh with an empty Shader for this I download the ice texture from ambient CG and I will put the download link in the description first I declare my sampler to the uniform for Albedo normal map and roughness texture and then I Define a vector 2 with the name of Base UV and because my plane is big I scale it five times well the correct way is to scale this in a Vertex Shader but I will do it here anyway well now I set my Albedo normal map and roughness with my base UB I hope to this point everything was clear now we should calculate the view Vector in a tangent space if fragment Shader there is an input which is called View and this will give us the view Vector in view space view space is a space which camera is in middle and its position and rotation is zero and everything else is around camera so we should create a transformation matrix which transform from view space to tangent space in fragment function we have also tangent normal and binomial vectors in viewer space so what we do now is to create a three by three Matrix from these vectors which the rows are the tangent normal and binomial because this Vector are in view space they are going to transform from tangent to space to view a space yeah this is how transformation matrix works if you are confused and don't know how they work search about them they are not too complicated the thing is that we want opposite transformation from view space to tangent to space and the way to do that is by making the inverse of this Matrix so let's do it here I create my Matrix and then I create a vector which I call it t view which is our view Vector in Tangent space and then I multiply my inverse Matrix to V Vector so that will work and there will be no problem but there is a better way to do that basically our transform Matrix has three orthogonal Vector in it I mean tangent normal by normal or perpendicular to each other is that right so these kind of Matrix are called orthogonal Matrix and they have a special property which the transpose of this Matrix is equal to inverse of that you can search on internet about this there is a mathematical proof to that so here instead of inverse I write transpose Matrix and this is much more efficient because index Matrix take much more processing power Now glsl language has a special property which if you reverse the order of multiplication it will get the same result and we are done this was the hard part and now the rest of this is easy and from this point you can use this view Vector in many many ways to make many cool effects but here I just showed to you two of these methods so now I grab the X Z component of my view vector and put it inside my move UV Vector so this move UV Vector is the direction which different layers should move to give us a parallax effect now for testing let's add our move UV to base UV in Albedo texture and see what will happen so it is moving but it has not the direction which I expect remember that I told you tangent and binormal are in the direction of X component of UV and Y component of UV well it seems binomial is not and we should flip that so multiply by normal by -1 and everything will working so everything is working now just sometimes we have some artifact like this and that is because move UV is too big later we are going to multiply that with a factor to make that smaller so now we need a texture for Parallax effect you cannot use the Albedo picture for Parallax effect because Albedo texture has a lot of detail in it and if you use this you will get a pillory effect which is not good the texture which I choose is this which in most part is black this is a scratch texture which I download from ambient CG and I will put the download link in the description so in my Shader code I Define a sampler uniform for my Parallax texture and I also need two more uniforms one of them is the number of the layers which refer to number of layers under the surface and I Define depth which is the depth of the lowest layer now I Define a float variable in fragment function and I call it layers and I set it to zero right now so here I create a for Loop for each layer and done I Define a float variable which is called ratio and this ratio for the first layer is 0 and for the last layer is one and for layer between is between 0 and 1. now we should sample from Parallax texture and the three key part is that how much we should move from base UV well we have the direction which we should move which is defined in move UV Vector so I add move UV to my base UV and as we know for the layer which is lower we should move it further away so I multiply this to mix 0 depth ratio so this will give us the value 0 when the ratio is 0 and it will give us the value depth when the ratio is 1. and for the value between 0 and 1 it will give us the value between 0 and depth because we add to layer multiple times it is a big number to make it correct we calculate the average of the layer by dividing that to num layers well done it is finished now just add the layer to Albedo and everything is black that is because the number of layer is zero currently and here we divide to zero so that will cause the problem now if I change the number of layer and depth let's see what will happen as you can see this is working and you can do a lot of cool stuff with this for example I add my variable layers to emission and I got this effect so this was the first method to make Parallax effect this method is need enough processing power because you sample multiple times from Parallax texture next method need less processing power and we don't need a parallax texture for that instead I'm going to use my Albedo texture for below layers so I delete this so I only add depth uniform so now I move my Albedo texture one time and I mix it with my original Alberto first I'm going to multiply and move your V2 depths and then I sample from my Albedo with this move UV and I put that inside Albedo under variable and then I mix between Albedo and Albedo under and I put the mix ratio to 0.6 but you can change it if you want well now if I change my dips and move around as you can see texture under my Surface is going to move but still this effect is not good enough so the way you can make this better is by multiplying a noise value to depth at each point so each point will have a different depth so I add another sampler to the uniform for my noise texture and set a noise structure to it and then I'm going to read from this texture and multiply this value to my depth so as you can see now each point under my Surface has a different depth and this will make it more realistic in this method because we sample only one time where the layers below the surface it's more efficient and it's need much less processing power so the concept of The Parallax effects is this but you can make it even better just be creative and this is the end of this video if you have any question or suggestion let me know have a good time until the next video bye

Channel: mohsen zare

Views: 2,326

Keywords: godot, shader, godot shader, tutorial, Parallax Occlusion Mapping, godot shader tutorial, height, heightmap, standard material, Parallax Mapping, ice shader, ice, Volumetric Parallax, Volumetric Parallax Ice Shade, Volumetric ice

Id: Btj-o5b6C9Y

Length: 12min 0sec (720 seconds)

Published: Thu Apr 27 2023