Code Study: Raymarching
Raymarching is a rendering technique that creates 3D scenes with math functions instead of the vertices, polygons, and meshes of traditional Three.js, Blender, or other types of 3D scenes.

End Result

With a couple alternate materials:

Resources

  • I found this article to be the most helpful introduction - lots of concrete code with good examples and explanations.
  • Another excellent introduction, a bit more math-heavy.
  • Inigo Quilez’s site is a fantastic reference for functions - lots of the explanations are pretty technical, but the quick dictionary of SDF shape functions came in very handy.
  • A huge library of matcaps that can easily be swapped out on models. (Demo scenes are slightly NSFW)

Techniques

I used vite and the shader-doodle custom component for minimal setup; I also wrote shader code in separate .fs (fs = fragment shader) files to keep things modular.

I textured the shapes using matcaps (more info); in this process, I did some research on capturing matcap UV coordinates from surface normals. Most of the reusable code from this research is in src/shaders/utils.fs.

During the process, I also submitted a PR to the shader-doodle repo to allow using one shader as an input texture for another shader. From my understanding, this is very similar to the input tabs on Shadertoy, which allow postprocessing effects (like antialiasing, outlines, tilt shift, etc) without needing to recalculate an entire scene.

Next Steps

  • Create a boilerplate repo for writing fragment shaders in Vite. Pull from src/shaders/utils.fs for reusable code
  • Continue research on raymarching + antialiasing (FXAA) - the current solution is a little too blocky
  • Make sure shader-doodle PR is accepted (make changes as needed)
  • Play with lighting models (Phong, for example) on matcap materials
  • Experiment with Constructive Solid Geometry (CSG), a type of 3D modeling that uses boolean functions rather than standard vertex manipulation