A video series in which we make several types of Ray Tracers, from scratch!
The Joy of Ray Tracing Video Series
This GitHub repository contains the complete source code and examples for everything we do in each video episode. The Joy Of Ray Tracing YouTube video series and this matching GitHub repo are organized in a 'book'-type fashion, with major Chapters (numbered from 0 to ..?) and several Episodes/Sections (similarly numbered from 0 to ..?), inside each Chapter. For example, the very first video in the very first chapter would be titled 'Chapter 0 Episode 0' on YouTube, and the corresponding folder path here on GitHub would be '/Chapter_0/Episode_0/' . The next video in the series would be 'Chapter 0 Episode 1' on YouTube, and so forth.
Feel free to skip over Chapter 0 if you are fairly experienced with web development and have a coding environment already set up (like VS Code)
Note: This series really does start 'from scratch', so Chapter 0 is all about installing and setting up a good productive coding environment (mainly VS Code and some of its plugins), then learning about making a basic HTML webpage shell that will eventually hold all of our fancy Ray Tracers. Along with a quick intro to HTML, I go over very basic styling with CSS stylesheets, as well as a basic intro to JavaScript and how it gives functionality to our simple webpage shell. Also in Chapter 0, I give an intro to the Canvas element with its Canvas '2d' context for drawing graphics in the browser.
Therefore, if you are an experienced web developer who already has a coding environment set up on your computer (like VS Code with Live Server preview plugin, etc.), and are familiar with basic HTML, basic CSS, and basic JavaScript, and how to draw filled rectangles to a Canvas element on your webpage, then you can safely skip Chapter 0. In this case, feel free to join me at Chapter 1, where we start introducing Ray Tracing-specific topics and techniques.
I'm so excited to have you along for the ride!
So...
Chapter 0 - Intro, Coding Environment Setup, HTML/CSS/JavaScript Basics, Drawing to Canvas in the Browser
- Episode 0: Most Simple Webpage Ever! - video
- Episode 1: Hello Canvas! - video
- Episode 2: Apply styles / fullscreen Canvas - video
- Episode 3: JS Intro / handling Window 'resize' & 'mousedown' Events - video
- Episode 4: Add Simple Button to randomize Rectangles - video
- Episode 5: Gives each Rectangle a Random Color - video
Chapter 1 - Coding our 1st CPU Ray Tracer, Looping over all screen pixels, Working with Vectors, Basic Ray Casting, Fundamentals of Ray Tracing
- Episode 0: Loop over all pixels and set their colors - video
- Episode 1: Visualize Ray Directions as rgb colors - video
- Episode 2: Ray Intersect Plane, Mix (blend) function - video
- Episode 3: Ray Intersect Sphere - video
- Episode 4: Diffuse Lighting, Directional Light Source - video