It's So Shiny! A Pure JavaScript Ray-Tracer
summary
Pure JavaScript ray tracer that is built from scratch and actually renders shiny spheres on a chessboard in the browser, implementing RGB colors, vectors, spheres/planes/boxes, surface normals, shadows, Phong-like highlights (shininess 0–1) and recursive reflections with a depth cap of 16. Performance gets usable by offloading work to Web Workers, batching pixels via Uint8ClampedArray/ImageData and partitioning into workers roughly equal to physical CPU cores; a 1280-wide scene renders in about 1.55 seconds in the demo and the approach works end-to-end.
AI-written summary · about
chapters (10)
- 0:00🚀 Build Stuff Conference – Get Your Tickets!
- 0:37Introduction to Ray Tracing
- 5:11Why Ray Tracing is Slow but So Shiny
- 10:43Understanding Ray Tracing with Light and Colors
- 15:07Building the Basic Ray Tracer in JavaScript
- 20:58Using Vectors for Positioning and Direction in 3D
- 25:24Handling Shapes, Intersections, and Rendering Logic
- 32:37Adding Lighting, Shadows, and Reflectivity
- 39:17Using Web Workers for Optimization in Ray Tracing
- 43:21Implementing a Chessboard Scene and Final Thoughts
related talks
28mBuilding a ray tracing engine with JS
31mBuilding a raytracing engine with JS
34mBuilding a raytracing engine with JavaScript
59mYou can't do that with JavaScript!
59mYou can't do that with JavaScript!
37mPixel Art and Complex Systems
26mCreative experiments with WebGL shaders in JavaScript
12mRay-tracing and special relativity: Rendering objects near the speed of light!