ShaderBattle

What is ray marching? Distance fields explained simply

Updated 2026-10-08

Ray marching is a way to draw a 3D scene in a fragment shader without any 3D model, mesh or triangle. Instead of drawing shapes, you describe the world with a function, and for every pixel you walk a ray through that world until you find something.

Step 1: every pixel has a ray

Imagine a camera in front of the scene. For each pixel on the screen there is a line starting at the camera and passing through that pixel into the world. That line is a ray. In code it is two things: a starting point ro (ray origin) and a direction rd. Different pixels give different directions; that is what makes a picture.

Step 2: a distance function describes the world

Take any point in space. A signed distance function (SDF) tells you how far that point is from the nearest surface: positive outside, zero on the surface, negative inside. For a sphere of radius 1 at the origin it is just length(p) - 1.0. Boxes, tori, capsules and many other shapes have short formulas too. You can combine shapes with min (union), max (intersection) and a smooth minimum for blobby merges.

Step 3: walk along the ray

Start at the camera. Ask the function how far the nearest surface is, and then move forward exactly that far. You cannot have hit anything yet, because the nearest surface is at least that far away. Repeat. The steps get smaller as you approach a surface, and when the distance drops below a tiny number you have hit it. If you travel too far without hitting, the ray escaped and the pixel is background. This is also called sphere tracing.

float t = 0.0;                          // distance travelled along the ray
for (int i = 0; i < 64; i++)
{
    float d = map(ro + rd * t);         // how far to the nearest surface?
    if (d < 0.001 || t > 20.0) break;  // hit, or gone too far
    t += d;                             // safe to step this far
}

Step 4: light it

To shade the hit point you need its normal, the direction the surface faces. Measure it by nudging the point a tiny bit in x, y and z and seeing how the distance changes. Then diffuse light is max(dot(normal, lightDirection), 0.0).

Why people love it

  • A whole scene fits in a few dozen lines, so it is perfect for shader art.
  • Soft shadows, glow, reflections and ambient occlusion are small additions.
  • Shapes can melt into each other and repeat infinitely for free.
  • The same walk-along-a-ray idea draws clouds and smoke: instead of stopping at a surface, you add up density as you go (volume rendering).

Learn it step by step

ShaderBattle builds ray marching in five small lessons, starting with every pixel has a ray and reaching smart steps in sphere tracing, then puts it together in Raymarching: put it all together. After that you can go further: volumetric clouds and an ocean use the same idea.

Keep reading

Start the interactive lessons