## 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!

### Schedule

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)

### Links

👋 **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

### Resources

🥚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 calculator**: https://www.math3d.org/

### Code

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 1**: https://gist.github.com/CharStiles/698d7eebd1c3739f9c566446dcd1c058

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

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

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

// 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 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:**

***https://www.shaderific.com/features

**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 🙂**