Exploration in Raymarching

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

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

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

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

In this class we will explore raymarching! I will go over how to look around your scene using a lookat function, and how to create a light!


11:30 – 11:45 PDT, 2:30 – 2:45 EDT (15 min) Introduction & examples

11:45 – 12:15 PDT, 2:45 – 3:15 EDT (30 min) Review of raymarching.

12:15 – 12:40 PDT, 3:15 – 3:40 EDT (25 min) Go over lookAt & lighting function

12:40 – 1:10 PDT, 3:40 – 4:10 EDT (30 min) Go over resources & 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.

Onwards  (??min) Buckle up & go over Monte Carlo PDE Geometry paper (& leave if you need/want to go)


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

🎞 My presentation slides: https://docs.google.com/presentation/d/1YnIsVWkG-2Xlv6ovceQZqfh-zhwWtYEYQOgbFn1SVUM/edit?usp=sharing

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

🌈 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


🥚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 2D graphing calculator, very helpful when writing shaders: https://www.desmos.com/calculator

🧮 Here is online 3D graphing calculatorhttps://www.math3d.org/


I know many people learn different, the following 5 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 shaders checkpoint!:

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

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

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

Checkpoint 4: https://gist.github.com/CharStiles/6df8651a4262c197c7a81b019e65ddec

vec3 lookAt(vec2 uv, vec3 camOrigin, vec3 camTarget){
// we get the z Axis the same way we got the direction vector before
vec3 zAxis = normalize(camTarget - camOrigin);
vec3 up = vec3(0,1,0);
// cross product of two vectors produces a third vector that is
// orthogonal to the first two (if you were to make a plane
// with the first two vectors the third is perpendicular to that
// plane. Which direction is determined by the 'right hand rule'
// It is not communicative, so the order here matters.
vec3 xAxis = normalize(cross(up, zAxis));
vec3 yAxis = normalize(cross(zAxis, xAxis));
// normalizing makes the vector of length one by dividing the
// vector by the sum of squares (the norm).

float fov = 2.;
// scale each unit vector (aka vector of length one) by the ray origin
// one for x one for y, there is no z vector so we just add it
// then we finally scale by FOV
vec3 dir = (normalize((uv.x * xAxis) + (uv.y * yAxis) + (zAxis * fov)));

return dir;

Checkpoint 5: https://gist.github.com/CharStiles/663fff8a8346dff52a681c34b4d6d6b7

vec3 estimateNormal(vec3 p) {
vec3 n = vec3(
scene(vec3(p.x + smallNumber, p.yz)) -
scene(vec3(p.x - smallNumber, p.yz)),
scene(vec3(p.x, p.y + smallNumber, p.z)) -
scene(vec3(p.x, p.y - smallNumber, p.z)),
scene(vec3(p.xy, p.z + smallNumber)) -
scene(vec3(p.xy, p.z - smallNumber))
// poke around the point to get the line perpandicular
// to the surface at p, a point in space.
return normalize(n);

vec4 lighting(vec3 pos){
vec3 lightPos = vec3(cos(time),0,-1);
// light moves left to right

vec3 normal = estimateNormal(pos);
float mag = dot(normal,lightPos);
// dot is one vector projected onto another,
// when the vectors are similar the dot is stronger
// when the normal is facing the light the mag is
// stronger

return vec4(mag);

Here is an extra checkpoint for using the unionStairs function from hg_sdf: https://gist.github.com/CharStiles/4ba6b2574c8562d5862df02e41be8a9a

Next Steps

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

Explore the BACKBUFFER in TheForce! It saves the last frame rendered so you can use it for trails effects, or for cellular automata.

Here is an example: https://gist.github.com/CharStiles/aa187e08448252e002f8df2c378830a7 

Get into different lighting models 🙂 Here is a sketch with ambient and specular lighting properties: https://gist.github.com/CharStiles/40435f395147322b4567ae64c6a4b923

Here I am copy pasting the suggestions from the last workshop:

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/

 Get involved with the community online

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

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