Shadertoy 3 Raymarching

Let’s draw a lit 3D scene without defining any 3D objects. Yeah no it confused me too.

I always thought the point of shaders was to make 3D models look fancy. You can either run code on each vertex, or do crazy things on each pixel. It’s how some of the fancy effects we see on modern desktop GUIs are done – the window is a flat 2D object textured with the image of the program.

And then graphics cards became fast enough that we could do a form of raytracing on each pixel to make an image. It’s really strange, but quite cool.

Useful Code

Some of these were taken from Art of Code YouTube videos

Smooth min

This is used to merge two shapes together in the shader

float smin(float a, float b, float k)
{
    float h = clamp(.5+.5*(b-a)/k, 0., 1.);
    return mix(b,a,h) - k*h*(1.0-h);
}Code language: JavaScript (javascript)