Raymarching: how a ray marching shader works, with code

<canvas id="rm" style="position:fixed;inset:0;width:100%;height:100%;background:#0d0f14"></canvas>
<script id="frag" type="x-shader/x-fragment">
// The whole scene lives here: one signed distance function, marched once per pixel
precision highp float;
uniform vec2 uRes; uniform float uTime;
float sdSphere(vec3 p, float r) { return length(p) - r; }
float sdTorus(vec3 p, vec2 t) { return length(vec2(length(p.xz) - t.x, p.y)) - t.y; }
float smin(float a, float b, float k) { // smooth union: the two shapes melt together
  float h = clamp(0.5 + 0.5 * (b - a) / k, 0.0, 1.0);
  return mix(b, a, h) - k * h * (1.0 - h);
}
float map(vec3 p) {
  float s = sdSphere(p - vec3(0.0, 0.35 * sin(uTime * 0.9), 0.0), 0.55);
  float c = cos(uTime * 0.5), n = sin(uTime * 0.5);
  vec3 q = vec3(p.x, c * p.y - n * p.z, n * p.y + c * p.z); // tilt the ring
  float t = sdTorus(q, vec2(0.9, 0.18));
  return min(smin(s, t, 0.3), p.y + 1.1); // and a floor below
}
vec3 normal(vec3 p) {
  vec2 e = vec2(0.001, 0.0);
  return normalize(vec3(map(p + e.xyy) - map(p - e.xyy),
                        map(p + e.yxy) - map(p - e.yxy),
                        map(p + e.yyx) - map(p - e.yyx)));
}
float shadow(vec3 ro, vec3 rd) { // march toward the light; near misses give a soft edge
  float res = 1.0, t = 0.02;
  for (int i = 0; i < 32; i++) {
    float h = map(ro + rd * t);
    res = min(res, 8.0 * h / t);
    t += clamp(h, 0.02, 0.2);
    if (res < 0.001 || t > 6.0) break;
  }
  return clamp(res, 0.0, 1.0);
}
void main() {
  vec2 uv = (gl_FragCoord.xy * 2.0 - uRes) / uRes.y;
  vec3 ro = vec3(0.0, 0.4, 3.2);               // camera
  vec3 rd = normalize(vec3(uv, -1.6));         // one ray per pixel
  float t = 0.0, d = 1.0;
  for (int i = 0; i < 96; i++) {               // sphere tracing
    d = map(ro + rd * t);
    if (d < 0.001 || t > 12.0) break;
    t += d;                                    // the distance is a safe step
  }
  vec3 sky = mix(vec3(0.05, 0.06, 0.09), vec3(0.16, 0.18, 0.26), uv.y * 0.5 + 0.5);
  vec3 col = sky;
  if (d < 0.001) {
    vec3 p = ro + rd * t, n = normal(p);
    vec3 l = normalize(vec3(0.6, 0.8, 0.4));
    float diff = max(dot(n, l), 0.0) * shadow(p + n * 0.01, l);
    float spec = pow(max(dot(reflect(-l, n), -rd), 0.0), 40.0);
    float rim = pow(1.0 - max(dot(n, -rd), 0.0), 3.0);
    vec3 base = p.y < -1.09 ? vec3(0.22, 0.23, 0.28) : vec3(1.0, 0.45, 0.25);
    col = base * (0.12 + diff) + spec * 0.8 + rim * vec3(0.3, 0.5, 1.0) * 0.6;
    col = mix(col, sky, 1.0 - exp(-0.02 * t * t)); // fog
  }
  gl_FragColor = vec4(pow(col, vec3(0.4545)), 1.0);
}
</script>
<script>
const canvas = document.getElementById('rm')
const gl = canvas.getContext('webgl')
const still = matchMedia('(prefers-reduced-motion: reduce)').matches

function size() {
  const dpr = Math.min(devicePixelRatio, 1.5) // every pixel runs the march: keep the count down
  canvas.width = innerWidth * dpr; canvas.height = innerHeight * dpr
}
size()

if (!gl) {
  const g = canvas.getContext('2d')
  g.fillStyle = '#0d0f14'; g.fillRect(0, 0, canvas.width, canvas.height)
  g.fillStyle = '#c9cdd8'; g.font = (16 * Math.min(devicePixelRatio, 1.5)) + 'px system-ui'
  g.textAlign = 'center'
  g.fillText('This browser has no WebGL, so the raymarched scene cannot run.', canvas.width / 2, canvas.height / 2)
} else {
  const shader = (type, src) => {
    const s = gl.createShader(type); gl.shaderSource(s, src); gl.compileShader(s)
    if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) throw new Error(gl.getShaderInfoLog(s))
    return s
  }
  const prog = gl.createProgram()
  gl.attachShader(prog, shader(gl.VERTEX_SHADER, 'attribute vec2 a; void main() { gl_Position = vec4(a, 0.0, 1.0); }'))
  gl.attachShader(prog, shader(gl.FRAGMENT_SHADER, document.getElementById('frag').textContent))
  gl.bindAttribLocation(prog, 0, 'a')
  gl.linkProgram(prog); gl.useProgram(prog)
  gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer()) // one triangle that covers the screen
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW)
  gl.enableVertexAttribArray(0); gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0)
  const uRes = gl.getUniformLocation(prog, 'uRes'), uTime = gl.getUniformLocation(prog, 'uTime')
  const draw = (seconds) => {
    gl.viewport(0, 0, canvas.width, canvas.height)
    gl.uniform2f(uRes, canvas.width, canvas.height)
    gl.uniform1f(uTime, seconds)
    gl.drawArrays(gl.TRIANGLES, 0, 3)
  }
  addEventListener('resize', () => { size(); if (still) draw(2) })
  if (still) draw(2) // one frame for reduced motion
  else requestAnimationFrame(function frame(now) { draw(now / 1000); requestAnimationFrame(frame) })
}
</script>