Home

Awesome

The <em> Joy </em> of Ray Tracing

A video series in which we make several types of Ray Tracers, <strong> <em>from scratch!</em> </strong> <br> <br> JoyOfRayTracing_thumbnail7 JoyOfRayTracing_thumbnail JoyOfRayTracing_thumbnail4

My YouTube Channel intro

<br>

The Joy of Ray Tracing Video Series

<br>

This GitHub repository contains the complete source code and examples for everything we do in each video episode. <strong>The <em>Joy</em> Of Ray Tracing </strong> 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.

<h3> 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) </h3> <br> <strong> Note: </strong> 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. <br>

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. <br> <br>

I'm so excited to have you along for the ride! <br> So...

<h2> Let's get started on our journey to discover... The <em> Joy </em> of Ray Tracing! </h2> <br> <br> <h2> Live Examples from Each Episode </h2> <h3> Chapter 0 - Intro, Coding Environment Setup, HTML/CSS/JavaScript Basics, Drawing to Canvas in the Browser</h3> <h3> Chapter 1 - Coding our 1st CPU Ray Tracer, Looping over all screen pixels, Working with Vectors, Basic Ray Casting, Fundamentals of Ray Tracing</h3>