Introduction to Ray Marching

it's supposed to have the sine distance field of a sphere then you can render it like so using the ray marching technique currently it looks a little Bland so let's calculate the normals of the sphere using these Central differences method once we have the normals it's trivial to add foam lighting to make our scene look more realistic and finally we can add multiple layers of noise to transform the simple sphere into a mountainous planet with Ray marching you can also have multiple objects in the scene and blend them together in a smooth manner you can add two shapes together as you see in the center you can subtract one shape from another as visible on the left and you can even take the intersection of two shapes as you see on the right once you're more comfortable with remarking you can make really intricate diagrams like eating okilas does for his snail Shader now obviously there are a lot of Advanced Techniques being used here but the core concept to sculpt the Shader is Ray marching needless to say Ray marching is a very useful technique to add to your Shader toolkit let's take a look at the algorithm behind it we start by creating an SDF function that can give the closest distance to each object in the world in this picture let's assume that we've predefined an SDF that takes the union of a triangle and two rectangles so essentially we have a function that given any point in the space will give us the distance from that point to the nearest point on the SDF we set up a ray origin this can be thought of as the camera and we March in a specific Direction until we get really close to the SDF you could March along this direction in very small increments say 0.1 but that'll take a long time so in each step we can instead check the SDF function in the first iteration we'll notice that the stf returns a five that means that it is possible that the SDF is anywhere on this circle we know looking at the image that it's right over here but the algorithm doesn't know that so we know that we can move along this five units in this direction and then we check the sdo function again at this point it'll hit some point over here but we see that visually the algorithm doesn't know that so it's going to say okay well I know that the distance from the current point to the SDF is about one so why don't I move across one So eventually it'll keep going and keep going until it hits this point right here here it's going to get the number two from this point and so it's going to move to to the right direction and then when we check the algorithm again this time the stf function is going to return a very small number really close to zero and that's when we know that we can stop running our algorithm because we have hit the edge of the SDF you may have noticed that if we shoot array in a different direction it's possible that the SDF keeps getting bigger so for example if we choose to shoot the ray instead of in this direction somewhere over here in this case we can have a predefined number for how far we want the rate to March say like a 50 units or so and if the ray marched at least 50 units and you know it's not hitting an stf then we can just exit early and that's the basic algorithm for Ray marching let's take a look at the code I just wanted to give a quick shout out to these two helpful resources one is from this person named Michael and the other is of course Inigo kilas's website so the first thing that we're going to do is as always set up our UV coordinates this time we're going to set up the UV coordinates from negative one to one on the X and negative one to one on the y-axis and then we can call our render function now this is going to feel like a little bit of code but just sort of push through because setting this up is definitely the hardest part of Ray marching so the first thing we're going to do is set up our reorgan and the ray Direction the ray origin is going to be at zero zero which is right over here and negative 2 in the Z axis which means it's sort of coming towards us in the right direction is going to be based on the UV coordinates and it's going to go toward the screen and essentially we're going to perform the ray marching algorithm by passing in the ray origin and the ray direction as well as the maximum distance that the ray can travel now this is something that I've defined all the way up here as well as with a few other constants but that's just something that you might want to predefine and essentially if the distance returned from this Ray Marge function says that it is less than the maximum travelable distance that means it hits something and if it hits something then we can display a color let's take a look at what this remark function is doing and essentially this is the loop that we had discussed earlier we set up the current position to be the ray origin plus the ray Direction times the this the total distance is traveled so far we accumulate this distance every single time in the loop but in the beginning it's going to be zero we perform our map function which contains the the world SDF and if the result of that is less than a very small amount then we break because that means we hit something otherwise we just sort of increment the distance and if the distance is now further than the furthest it can travel we also break so these are just the two break conditions and eventually we just return the distance and let's take a real quick look at this map function again I know this is a lot this might be a lot to sort of digest but this is sort of the basic remarking and this essentially here what we're saying is we're creating a sphere SDF putting it at the center with a radius of 0.5 and of course if I were to save this you'll see that we get our simple little circle on the screen now the next step is to just update the map function to give you a better understanding of how the mapping Works what we initially said was just the sphere but now what I'm going to do is add a plane plane takes in a different parameter the main thing that we want to think about is a normal here so the normal is facing up in the y direction so if I were to save that you'll see that there's sort of this plane and then there's this sphere and that's the very simple version of array marcher now obviously the next step is to add lighting what we want to do is inside of this if statement determine the normal the important thing here is that we are getting the normal at the specific point the normal function is just like takes the difference between very small differentials on the X the Y and the Z axis and once you have that you can normalize that and that will give you the normal so let's go back here and so if I were to save that then you'll see that we get our normals like this and of course once we have our normals then it's pretty easy to add lighting so we can add diffuse and specular lighting and you know this is something that hopefully you guys are already familiar with but if not I have made a video on this before so you can check it out but essentially we're going to get the light color and the light source we're going to get calculate the diffuse strength and we're also going to set up the specular strength and calculate the specular lighting and of course lighting is equal to diffuse plus specular so we can set the color to be whatever the lighting result is and then we get our basic lighting now one more thing I want to do over here is just add a little bit of gamma correction so that the lighting looks a little better cool so now we have calculated the normals and added lighting to our scene so it's starting to look better already but one thing we are definitely missing is Shadows because when there's a sphere here there should be some sort of Shadow here so let's take a look at how to do that and so in order to calculate the Shadows we're actually going to perform the same remarking algorithm except this time the ray origin and the ray direction will be different the ray origin will be where the point is plus a very small amount on the normal and this is just to hide some artifacts in the right direction is actually going to be to the direction of the light so for example if we were at a point right here we want to go from this point to the light source which we know is somewhere over here so what the algorithm is going to do is do a ray March and if we hit something in our world that prevents us from going from this point directly to the light source then we know that we have a shadow there so that's what we're saying here so we're going to calculate the distance to the light source so basically from this point to the to the light source we want to be able to go directly there and if we can't go there right if the distance from this remark is less than the distance to the light source then we have a shadow if we have a shadow what we can do is set the color and multiply it by you know a very low a very dark gray and if I were to save that then you'll see that there's a small Shadow here because the light source is somewhere over here the sphere is here and it's a little bit above the plane so we would expect the shadow to be somewhere over here so the last thing that I want to go over is this idea of smooth uh Union so basically right now what we're doing is taking the minimum of the sphere and the plane which looks good because it gets us to have both of these on the scene but if I were to oscillate it you'll see here that you know there's nothing interesting happening we're just sort of taking the minimum but there's a method that which is basically the idea of smoothing this out so what we can do instead of taking them in is perform this smooth Union function which looks a little like this it's just a little bit of math that even I fully don't understand but you know you can just sort of take the function and understand its parameters and if you were to save this then you'll see that you get this sort of smooth mixing between the sphere and the plane as it goes up and down and that's essentially what the union operation does there's also like intersection and there's subtraction but you know you can just sort of find these functions elsewhere and and you should be good to go and yeah that's gonna be it for this video hopefully now you have a better understanding of the ray marching algorithm if you've made it this far then I'd really appreciate it if you could just hit the like button for the YouTube algorithm and consider subscribing for more videos just like this thanks for watching and I'll catch you guys next time

Channel: Suboptimal Engineer

Views: 14,522

Keywords: suboptimal engineer, suboptimal, glsl, glsl shader, glsl shaders, glsl shader tutorial, glsl shaders tutorial, shader tutorial, shaders tutorial, ray marching, ray marching tutorial, glsl ray marching, raymarching, raymarching unity, unity raymarching tutorial, unity ray marching, unity raymarching shader, ray marching shader, raymarching shader, ray marching explained, what is ray marching, ray marching shaders, shaders, coding shaders, shadertoy, inigo quilez, iq shadertoy

Id: TSAIR03FPfY

Length: 10min 56sec (656 seconds)

Published: Thu May 25 2023