Shader Learn

13 Capstone

Raymarching: 3D with only a fragment shader

No triangles. Every pixel casts a ray that steps along the SDF and colours the surface it hits.

4128
0.0010.6
-0.61.2
-3.143.14

Runs once per pixelDrag numbers, or edit the code

JS sidegl.uniform2f(uResolution, …, …) gl.uniform1f(uTime, 0.00)

Every pixel casts a ray and uses the SDF to step forward safely until it hits a surface — 3D without a single triangle.

Try it

  • Lower the steps to 8: holes appear at the edges
  • Increase the smooth blend: the sphere and box melt together
  • Add another sphere in scene()