ShaderBattle

Learning path · 16 lessons · about 5 hours

From zero to ray marching

You will: draw a lit 3d scene with nothing but a fragment shader. For: complete beginners who want the most impressive result.

This is the full road from "what is a fragment shader" to a shaded 3D scene made with ray marching. You start with colour and position, learn the few functions every shader uses, then add one idea at a time until a ray walks through a scene of distance functions. No 3D models, no engine: just a function that runs once per pixel.

Start lesson 1

What you will be able to do

  • Understand how a fragment shader thinks, one pixel at a time
  • Draw shapes with signed distance fields and soften their edges
  • Animate with time and rotate with sin and cos
  • Build a ray marcher with lighting from scratch

The lessons, in order

  1. 1
    Every pixel, one function

    Make the whole screen the same blue as the target.

    Play
  2. 2
    Colors are four numbers

    Match the green. The Colors panel shows its hex code — convert it to floats.

    Play
  3. 3
    UV: where am I?

    Make a gradient: black on the left, full red on the right.

    Play
  4. 4
    Two axes

    Red grows to the right, green grows upward, blue is a constant 0.5.

    Play
  5. 5
    step() and lerp()

    Split the screen down the middle: color A on the left, color B on the right.

    Play
  6. 6
    smoothstep(): soft edges

    Instead of a hard split, fade from the dark color to the orange between x = 0.3 and x = 0.7.

    Play
  7. 7
    Center, distance & aspect ratio

    Make the circle truly round by correcting for the aspect ratio.

    Play
  8. 8
    Distance fields & antialiasing

    Turn the solid disc into a glowing ring: radius 0.3, soft edge width 0.02.

    Play
  9. 9
    Time: make it move

    Make the ring pulse: radius = 0.25 + 0.08 × sin(time × 3).

    Play
  10. 10
    Rotation & matrices

    Spin the box: rotate p by an angle equal to time (in radians) before computing the distance.

    Play
  11. 11
    3D, step 1: every pixel has a ray

    Show every pixel's ray direction as a colour: float4(0.5 + 0.5 * rd, 1.0).

    Play
  12. 12
    3D, step 2: is a point inside the sphere?

    Colour pixels orange when the point 3 units along their ray is inside the sphere (radius 1 at the origin)…

    Play
  13. 13
    3D, step 3: walk along the ray

    Walk each ray in steps of 0.1 (up to 60 steps). Hit pixels show their depth as grey, misses stay dark.

    Play
  14. 14
    3D, step 4: smart steps (sphere tracing)

    Use smart steps and show the step count as grey: saturate(steps / 12.0).

    Play
  15. 15
    3D, step 5: which way does the surface face?

    Ray march the sphere (smart steps) and colour hit pixels by their normal; misses stay dark.

    Play
  16. 16
    Raymarching: put it all together

    Build the whole raymarcher: map() with a sphere, the ray loop, calcNormal from the Toolbox, and diffuse light.

    Play

Ideas you will meet

Short explainers with a live example for each:

See all learning paths