Cracks Tutorial - Realistic Broken Glass/Ice effect in Shadergraph - Unity3D

[Music] hi everyone and welcome back on the channel today i thought it would be nice to make a tutorial about how to make a cracked ice or cracked glass effect in order to make this possible we'll need to dive deep into the world of 3d noise as well as ray marching 3d noise will provide an endless procedural cracks texture while ray marching will make possible to see through the material as if you could see the rifts from the inside so as you can see the shadow graph to achieve this effect is really simple but don't fool yourself the way marching node there is where most of the rendering takes place in fact if you click on the wheel of the custom node you will see that it comes from a hlsl file and it is a specific function with a few inputs and one output if you head into the file you can see that it's composed of two main parts the first part is the noise generator it was originally written by max bitker and i will put a link to his github in the description below i brought it to each lsl so that it's easier to work with in unity so basically what we have there is a function that takes vector 3 in argument so basically a point in space and it returns float 2 so vector 2. that contains both the voronoi noise and the cracks from this nodes and basically what we're interested in are the cracks but we will see that later i created a simple voronoi noise 3d float function so the underscore float there is for the precision i want and it basically calls the voronoi noise 3d function we've seen so i created a small subgraph i will call this voronoi noise 3d function so back into my shader graph i temporarily unplug all my previous nodes and we will play a bit with the voronoi noise 3d so that you can understand better how it works so basically we're going to use our brand new subgraph annoying noise 3d so so far you can see nothing because we need a sampling coordinate so we're going to put the position of the pixel that is actually rendered in space and let's put object space so as you can see it's already displaying [Music] if i put the cells on the albedo you will see that it appears on the preview there and it's already looking like broken glass [Music] but another thing that is important to mention is that the brightest it is the further it is from the closest edge and this will be really useful for re-marching later as a distance estimator but we will come to it later so how does we're matching work let's take this blue line it represents a 2d function where the line is blue it means that a function is 1. otherwise it means that a function is zero for instance let's take a random point there it has its own coordinate x and y and as you can see it's not on the blue line thus its value is zero otherwise the value will be one let's now take into account the surface of the mesh when rendering unity provides the screen vector meaning that you know the position of the camera the distance from the camera the view direction and that's the position of the point you actually want to render let's check if this point matches the blue line as you can see it's not so the value will give us zero then we want to loop over along the view direction until we match the blue line to do that we need a distance estimator the simplest one we can think about is a constant value wherever you are it will tell you you can go along the view axis from this constant value so let's do this let's move along from the distance c there and see what happens so as you can see we're still not on the blue line as the function will give us the value 0 and we need to repeat the process until we actually reach the blue line but we are lucky this time if we change the parameters as you can see we may miss the blue line ending up in an infinite loop and this is not what you want so you may think what if i take a smaller distance when calling my distance estimator so okay you may never miss the blue line if you take small steps but it will end up in a lot of loops like a really high number and that's not good so luckily we have some voronoi noise that provides us this yellow circle meaning the closest point the closest edge from our point as you can see it touches the blue line on the bottom but it's not exactly in our view direction so after the first loop we already are so close from the blue line and as you can see the distance estimator is way smaller still touching the blue line and after just four steps we managed to reach your blue line which is great you need to keep in mind that every single pixel on your screen will need to go through that loop so it needs to be as small as possible now it's time to put the theory in practice so i created this remark cracked glass function and it will be exposed to shadow graphs so basically as you could expect it contains a for loop every iteration corresponds to a step further along the view axis we keep in memory the current point which is the actual step we are at and basically in the main lines we have this voronoi noise computing at the position and we estimate the value at this point and we move the current point along the view axis and we keep in memory the distance we travel so far and we reduce the output value as long as we go further and further whenever the value gets really low it's useless to go further actually it won't change the result at all and it will just waste your processing power the positive situation is when your value you estimated is above zero it means you actually hit the rift so it's time to return your intensity so let's head back into our shadow graph we are going to remove the previous node we created to test the foreign noise and we're going to test the rim marching instead just make sure before starting that every argument matches the definition in the hl subfile otherwise you will get the classic pink material so now let's check out all the arguments we're providing to the custom function the first one is surface point it's actually really simple we just choose object space or we'll space for the position depending on the value of a boolean that is exposed to the material later we just scale the position and we give it that way and all the others are just trivial so basically most of them are exposed as they are so that you can play with it later in the material and if we check what we have at that point it's already looking awesome this output is comparable with the scene depth buffer so basically the brightest that is the less we traveled we marched through the material and the darker it is the more we traveled so we can use this to lurp between a deep color and a rift color and the result is awesome so we can just connect this to the albedo also i thought it would be nice to expose the smoothness to the user so that he can play with it so basically it's just a vector one and i connect it to the smoothness [Music] now that we are back into the scene view i just created two materials they both inherit from the shader but one is rejected and not the other let's start with the other so i just put the material on the sphere there and it looks great as you can see i have a few parameters to play with such as the scale the border thickness basically the rift thickness the colors it's pretty nice you have a lot of possibilities there but i like to keep something rightfully ripped and a bit darker for the deep color let's just give it away later you have the purity basically it controls the fading it's pretty cool especially if you want your class to have a certain thickness this is the right parameter to move but i will just leave it that way as well it looks nice uh later you have the smoothness so basically no trap here that's just the smoothness and the recursion depth so right now it's set to 20 and as you can see it's running smooth considering that i have a screen recorder at the same time if i put it to something lower like 10 it will be a bit blurry basically the distance estimator can go far enough and it can't really reach the rift so it's close and it actually gives really nice result already in order to make it sharper without increasing the recursion depth you can increase the border thickness instead it will make a bit sharper and it will run like better but what if we put really high irish depth well basically we'll make it super sharp and actually it's not that slow because most of the pixels we're roundering are returning before and before reaching 100 as we use 3d noise you will be able to move your object and you will see the noise scrolling on it this may be super useful for procedural generation for example but if it bothers you you can still check local space that way it won't move and it won't move on rotation either now let's talk about the rejected material as you can see it looks more like ice instead of glass because all the rifts are all along the normal on the surface so it looks great if you want to make an icy environment and you can see the difference if i uncheck [Music] well in my opinion both look great but just imagine having your procedural ice generation like this it's super cool i will end up this video by playing around with all the few parameters so that you can see all the possibilities a lot of things can be improved and i can't wait to see what you guys did with it if you enjoyed the video please subscribe and leave a like also if you're struggling with the tutorial i will be glad to help you so just leave a comment down below and i will reply see you next time cheers [Music] so [Music] you

Channel: Léo Chaumartin

Views: 5,685

Keywords:

Id: 8bhTSq0aW2E

Length: 13min 15sec (795 seconds)

Published: Sat Dec 05 2020