It's So Shiny! Building a Pure JavaScript Ray-Tracer

It’s hard to imagine a world without computer generated imagery. Films, television, games, art, advertising… CGI gives artists, designers, and film-makers the tools to bring fantastic fictional worlds to life. And while it wasn’t all that long ago that rendering photorealistic images required a supercomputer, today we can do it right in our browser.

In this session, Dylan Beattie will explain the principles behind ray-tracing, the technique behind most modern computer graphics. - and then, using modern JavaScript APIs like web workers, clamped arrays and ES modules, we’ll create a pure JavaScript ray tracer that runs directly in your browser. We’ll learn how to simulate lighting, shading, reflection, and visual effects to create photo-realistic scenes, we’ll dust off some gnarly mathematics that you probably haven’t seen since high school and find out that it’s actually pretty useful after all, and we’ll create a whole lot of pictures of shiny things.


Other talks by Dylan Beattie