You can't do that with JavaScript!
summary
Builds three full engines in plain JavaScript: a rasterizer with custom vectors/matrices, projection matrix, triangulation, scanline filling, clipping and flat shading; a CPU ray-tracer implementing lambertian, metal and glass materials with recursive bounces (slow in-browser, sped up by using web workers); and a distance-estimator ray-marcher with signed distance functions, normal estimation, shadows, reflections and textures. Code runs (slow but usable), no external math libs, and a WebGL realtime demo and npm library (Dr circuits canvas Library) follow.
AI-written summary · about
chapters (13)
- 0:00Introduction
- 1:10Speaker background
- 6:45Demo scene to side projects
- 10:38JavaScript fascinates and frustrates
- 12:24JavaScript graphics demos
- 16:213D rasterizer from scratch
- 23:11Debugging JavaScript scoping
- 27:22Clipping in rasterizer
- 30:55Rasterizer to ray tracer
- 34:54Ray tracer with web workers
- 44:33Ray marching techniques
- 53:50Lessons learned
- 57:42Key takeaways
related talks
59mYou can't do that with JavaScript!
31mBuilding a raytracing engine with JS
29mJavaScript and Game Development
32mGPU.JS - GPU Accelerated JavaScript
50mIt's So Shiny! A Pure JavaScript Ray-Tracer
29mLet's make games with JavaScript
51mBuild Your Own Game Engine in the Browser
17mJavaScript and mathematical computing across servers and clients