Raymarch Workshop

Hello all! Welcome to the Raymarching Workshop page!

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

Teaching Assistant: Sol Sarratea (contact@solquemal.com // solquemal@gmail.com) @solquemal

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 (30 min) Review of 2D shaders & introduction to raymarching

12:00 – 12:40 PDT, 3:00 – 3:40 EDT (40 min) We will write a raymarcher together.

12:40 – 1:10 PDT, 3:40 – 4:10 EDT (30 min) Go over sticker sheet & 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. I will take questions and present steps going forward to learn more about shader coding.


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

🥚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


🎞 Link to my presentation slideshttps://docs.google.com/presentation/d/1uxLZVnGRJp1sajsfIXXTS-tLkxc-C_h2xVbC7hm4XOg/edit?usp=sharing

🌈 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!: https://gist.github.com/CharStiles/e2c31bf39f441cea7fe277aaa109d2e5

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

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

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

final extra bonus checkpoint: https://gist.github.com/CharStiles/c77d466cec2bc5185d9744a7cac508fc

Next Steps

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

0. Take my next class on lighting equations and camera movements
** Max will be our TA again!! You can find tickets for it in the same link you got this workshop from: http://codame.com/events/workshop-shaders

1. 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/

2. Get into more tutorials!
** This tutorial here: https://github.com/ajweeks/RaymarchingWorkshop is super thorough and really useful!

3. Get involved with the community online

*** you can see some amazing raymarched scenes online at shadertoy.com

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 from The Book of Shaders
** If you haven’t looked at this already, look through it! Its wonderfully paced and has a lot of versatile useful information: https://thebookofshaders.com/

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