Hello all! Welcome to the Exploration of Raymarching Workshop page!
Taught by: Char Stiles (firstname.lastname@example.org) @charstiles
Teaching Assistant: Max Bittker (email@example.com) @maxbittker
IRL portal TA: Sophie Stiles (firstname.lastname@example.org) @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 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
🥚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!:
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
Learn more about GLSL shader functions:
Learn more math that is relevant from an awesome youtube channel 3 blue 1 brown.
Some easing functions if sin & cos get boring 🙂