/RayTracing-Projects

This repo was created on camera to demonstrate using VSCode-GitHub integration feature

Primary LanguageJavaScriptCreative Commons Zero v1.0 UniversalCC0-1.0

RayTracing-Projects

800px-BallsRender-1


This GitHub repo is for demonstrating how to set up and maintain your 1st repo on GitHub. Beginning with creating a GitHub account, installing Git on our local development machines, and using the awesome VSCode-GitHub integration feature, everything that you see here (folder structure, images, Readme, Live Demos hosted on GitHub Pages, etc.) was done on camera in this YouTube episode


That episode is part of my YouTube video series called The Joy Of Ray Tracing in which we start from scratch and make several types of Ray Tracers:

The Joy of Ray Tracing Video Series


The companion GitHub repository for this entire YouTube series is located at:

The Joy of Ray Tracing companion code repo


Live Demos

  • My Webpage Creates a Canvas element
  • Styled Canvas Uses CSS to make the Canvas full screen
  • Interactive Page Uses addEventListeners to make page interactive
  • Simple Button Input Adds a simple button to randomize width and height of rectangles
  • Randomized Colors Creates a unique random color (rgb) for each rectangle
  • Pixel Loop Loops over each and every pixel on the screen and sets that pixel to a unique rgb color
  • Ray Direction Visualizer Using our new Vector3 library, assigns a unique ray direction vector to each pixel. The rgb colors represent the ray direction vector components(red=x, green=y, blue=z) of each pixel
  • Ray-Plane Intersection Tests if each pixel's ray intersects with a plane. Our new dot product function aids in this ray-plane intersection, and our new 'mix' function allows smooth blending between 2 color vectors (the ground blends with horizon in the distance, and horizon blends with blue sky as height increases)
  • Ray-Sphere Intersection Tests if each pixel's ray intersects with a sphere. Our new solveQuadratic function handles the implicit equation of a sphere (x^2 + y^2 + z^2 - r^2 = 0), which is quadratic (degree 2) and must have both roots found (t0 and t1), in order to render the sphere
  • Diffuse Lighting Uses Lambert's Cosine Law to apply Diffuse lighting to the ground plane and the red sphere. Once we have the intersection data (intersection point, surface normal, object color, etc.) we take the dot product of the surface normal vector(N) with the light vector(L) to get the correct intensity of diffusely reflected light for that point on the object (a.k.a. "NdotL" diffuse lighting)