Hello all! Welcome to the Exploration of Raymarching Workshop page!

Taught by: Char Stiles (contact@charstiles.com) @charstiles

Teaching Assistant: Max Bittker (maxbittker@gmail.com) @maxbittker

IRL portal TA: Sophie Stiles (sophiekstiles@gmail.com) @sophiakstiles

Brought to you by: CODAME (http://codame.com/) @codame

In this class we will learn about ray marching! Ray marching uses a very contained and mathematical way to describe a 3D scene in one fragment shader. 

You will create your own 3D scene or music visualizer with ray marching. I will go over some examples of raymarching, how to set up the scene, and provide more material/functions/techniques so you can customize your scene or visualizer to fit your style.

Ray marching is seriously my favorite technique for fun shader programming. One of the reasons I love it is that it is physically based, i.e. you follow a ray the same way photons bounce around in the real world. It has a lot of use in the future with all this drive towards physically based realtime rendering techniques.


11:30 – 12:00 PDT, 2:30 – 3:00 EDT (20 min) Introduction & inspiration

12:00 – 12:30 PDT, 3:00 – 3:30 EDT (30 min) review of last lesson

12:30 – 12:40 PDT, 3:30 – 3:40 EDT (10 min) walk through lookat function

12:40 – 1:10 PDT, 3:40 – 4:10 EDT (30 min) take questions & break off into groups for workshopping time.

1:10 – 1:3o PDT, 4:10 – 4:30 EDT (20 min) Those who wish can show their music visualizer or scene.

onwards  (??min) go over paper! (& leave if you need/want to go)


👋 The Force by Shawn Lawson the editor we are using: https://shawnlawson.github.io/The_Force/

🎞 Link to my presentation slideshttps://docs.google.com/presentation/d/1YnIsVWkG-2Xlv6ovceQZqfh-zhwWtYEYQOgbFn1SVUM/edit?usp=sharing

👀Here is the lookat function graphed out: https://www.math3d.org/ty5ewqqC

🥚Here is the 3D sticker sheet aka a small selections of functions you can copy paste into your code: https://gist.github.com/CharStiles/e6fec016967c6c8fd648aa4b6c0055cc

🐛 Here are more 3D functions and some operations aka more stickers from IQ!: https://www.iquilezles.org/www/articles/distfunctions/distfunctions.htm

🦋 Here are more 3D functions & operations aka more more stickers by the demogroup Mercury these have good space modification functions: http://mercury.sexy/hg_sdf/

🧮 Here is an online graphing calculator, very helpful when writing shaders: https://www.desmos.com/calculator


🌈 CODAME Slides for the exact code we wrote in one nice page that also has link to the form to upload your shader and the feedback form: https://docs.google.com/presentation/d/1BSxE8vugE8V2Y_MPry9Yon12TBawbLFPNxannDPz67s/edit#slide=id.g1fd4179d34_1_114

I know many people learn different, the following 4 checkpoints are for folks who want to look on and I will explain every line of code. I will tell you when we are at what checkpoint. I will follow these as closely as I can!

Review of 2D shaders checkpoint!:

Checkpoint 1https://gist.github.com/CharStiles/698d7eebd1c3739f9c566446dcd1c058

Checkpoint 2https://gist.github.com/CharStiles/2e5889a660b8c7cbf8d1e0b5ff4bf1e4

Checkpoint 3https://gist.github.com/CharStiles/e6d15533cfc955fa657cbe556d661c64

Next Steps

These are some specific suggestions from me if you want to continue learning but don’t know how to start.



Here I am copy pasting the suggestions from the last workshop that are not specific to 3D shaders, instead to get better at shader & math in general:

Learn the maths from Physically Based Rendering book
** If you haven’t looked at this already, look through it! Its wonderfully dense and has a lot of versatile useful information: http://www.pbr-book.org/

More online math

*** http://immersivemath.com/ila/index.html

Learn more about GLSL shader functions:


Learn more math that is relevant from an awesome youtube channel 3 blue 1 brown.

*** https://www.youtube.com/channel/UCYO_jab_esuFRV4b17AJtAw

Some easing functions if sin & cos get boring 🙂

*** https://easings.net/en