Raymarching is a 3D rendering technique popular in the demoscene and in websites like Shadertoy.

What's impressive about demos is that there is **no 3D geometry whatsoever**. All the objects that make up the scene are generated in real time using mathematical functions.

In this interactive tutorial, we will see how the raymarching algorithm works from the ground up and make our own raymarcher with shaders.

The raymarching algorithm is based on the notion of distances, we will see how later.

You may be familiar with the formula for the distance between two points, it is known as the **Euclidean distance** and is calculated using the Pythagorean theorem:

EuclideanDistance(P1,P2) | = | (P1.x-P2.x)2+(P1.y-P2.y)2 |

= |

Now imagine we want to calculate the distance between a point and a circle. To do that we first calculate the euclidean distance between the point and the center of the circle, then substract the radius of the circle:

DistanceToCircle(P,C,R) | = | EuclideanDistance(P,C)-R |

= |

Notice that when the point is inside the circle, the distance is negativeâ€”hence "signed" distance function. This fact will become useful later on.

The **SDF of an object** is a function that, given a point in space as input, outputs the distance from that point to the closest point of the object.

The SDF of rectangle is a little bit more complicated

DistanceToRect(P,C,Size) | = | ||max(|P-C|-(Size/2),0)|| |

= |

If we have multiple shapes and we want to find the closets point to P, we calculate the **minimum** of all the SDFs of the shapes:

Why distances have anything to do with rendering 3D shapes?

Near plane:

Field of view:

Number of rays:

Iterations:

Until now we only saw how raymarching works in two dimensions, to do 3D rendering we are going to use a **fragment shader**

- Inigo Quilez is the best resource on raymarching.