Building a raytracing engine with JavaScript
summary
Builds a JavaScript ray tracer step by step, showing the sphere intersection test, a recursive trace function with depth limiting, and how reflection and refraction combine into pixel color. Compares results to rasterization, points out which effects come “for free” (soft shadows, reflections) and which require many samples. Demonstrates an A-Frame scene for fast WebVR/rasterized results, loading models from Google Poly, and light baking (precomputed ray‑traced lightmaps) for realistic browser renderings.
AI-written summary · about
chapters (10)
- 0:00Intro
- 0:40Hi, I'm Madlaina
- 7:36Materiality
- 12:11Capturing an image on camera
- 14:17Let's look at some code
- 22:46Complexity
- 23:07Rasterization
- 25:583D rendering techniques
- 28:39A-Frame components
- 30:183D Content
related talks
28mBuilding a ray tracing engine with JS
59mYou can't do that with JavaScript!
50mIt's So Shiny! A Pure JavaScript Ray-Tracer
49mTracing Rays in Real Time
31mWelcome to 3D
12mRay-tracing and special relativity: Rendering objects near the speed of light!
31mWebGL: Building Interactive 3D Worlds in the Browser
17mBuilding Immersive Experiences on the Web