Ray-Traced Bubbles in WebGL

As part of my Computer Graphics module at the University of Warwick, we were presented with several choices for projects. I chose to build a “screensaver”-like web application, which uses ray-tracing to show reflective bubbles that can cast shadows onto one another. Feel free to check it out in your web browser!

The only polygons in the scene are two triangles that form a screen; the ray-traced bubbles are drawn entirely through the fragment shader. The bubbles' positions are passed into the shader through input arrays of positions and of radii; as there are never more than a handful of bubbles on-screen, a more complex data structure built for position/collision queries is unnecessary.