You can't do that with JavaScript!
summary
Builds three distinct JavaScript 3D engines: a rasterizer using Canvas ImageData with custom vector and matrix libraries, an on‑CPU ray-tracer (unit sphere, metal/glass materials, Schlick approximation) and a ray-marcher using signed distance functions. Uses OBJ loading, clipping, painter’s algorithm, per‑pixel shading and Web Workers for parallelism after cloud functions (Azure/Lambda/Cloudflare) throttle requests. Implements reflections, dielectrics and textures, gets interactive frame rates in browser, and moves next toward GPU via WebGPU.
AI-written summary · about
chapters (19)
- 0:00Introduction and speaker background
- 7:26Crazy projects at work
- 13:36Why JavaScript is interesting
- 16:10Can't do that in JavaScript?
- 17:562D graphics effects in JS
- 20:44Plasma effect demo
- 22:54Building a 3D rasterizer
- 27:31Matrix and vector struggles
- 30:06Debugging JavaScript scoping quirks
- 35:15Shading and lighting in 3D
- 38:10Building a ray tracer in a weekend
- 40:44Cloud-based ray tracing attempt
- 42:55Web workers for multi-threading
- 44:21Ray tracing fundamentals
- 46:30Global illumination and materials
- 49:26Ray marching introduction
- 51:13Ray marching in the browser
- 54:37Inspiring others with graphics
- 55:40Demo scene and son's achievements
related talks
59mYou can't do that with JavaScript!
34mBuilding a raytracing engine with JavaScript
31mBuilding a raytracing engine with JS
28mBuilding a ray tracing engine with JS
32mGPU.JS - GPU Accelerated JavaScript
29mJavaScript and Game Development
50mIt's So Shiny! A Pure JavaScript Ray-Tracer
17mBuilding Immersive Experiences on the Web