Playing with Pixels: Photorealistic 3D in JavaScript

By Hunter Loftis

Elevator Pitch

I’ve always loved everything Pixar creates, so when I learned just how simple their basic algorithm is, I was floored. “I could build something like this!” I thought - and I was right.

Description

Unlike video games, which use complicated and math-intensive tricks for realtime graphics, movie studios render 3D films like “Frozen” or “Big Hero 6” via an elegant and intuitive algorithm called “path tracing.” Path tracers simulate actual photons of light bouncing around a scene, reacting to the objects and materials they encounter. Such programs run slowly, but render beautiful images, and they’re surprisingly easy to write and understand. In this talk, we’ll explore this fascinating algorithm with examples in JavaScript.

Notes

This is the most recent excursion into various “Playful JavaScript” topics I’ve worked on, including those here:

I like to discuss things that have no surface-level similarity to “work topics,” but which end up making you a better and more capable programmer nevertheless, hopefully leaving with some new ideas. Here’s an example of a previous talk in the same vein:

Finally, I’ve got a couple of renders up on Twitter of part of this work (more in the presentation):

example

example

example