Ray Tracing Tutorial

For those who want to learn about ray tracing from scratch and would love to get a taste of computer graphics. Learn with me!

This tutorial is written by a student who had no former knowledge of computer graphics. Please feel free to make corrections, give feedback, or add resources!

Prerequisites

• Basic HTML
• Javascript (ES6)
  • import/export
  • class
• High school math

Table of Contents

Basics

• What is ray tracing?
• Working with HTML canvas
• Generating rays
• Ray-sphere intersection
• Shading
  • Diffuse (Lambertian)
  • Ambient
  • Specular (Phong)
  • Shadows
• Anti-aliasing

Textures

• Transformations
  • Translation
  • Rotation
  • Scaling
• Texture mapping
  • UV mapping
  • Normal mapping

Reflection & Refraction

• Reflection
• Refraction
• Fresnel effect
• Beer’s law

More

• Further topics
• Useful resources