Seriously Impressive Real-Time Water Caustics That Run In Your Browser

Not only is this beautiful refractive water, but the caustics are also actually cast by light, and the whole thing is very interactive. Also, it's all running directly in the browser.

ScottieFox has published two versions of this simulation: a "lite" version and a "sandbox of things" version. The first features a glass tank filled with water, a rubber duck bobbing on the surface, and either the sun or a hanging lamp casting light through the water. As the surface moves, the light focuses on the bottom of the tank, creating dynamic caustics. It's lightweight enough to run on older laptops and phones, while still letting you interact with the scene. You can click the water to create ripples, click near the duck to push it, and adjust the turbulence to see how it changes the simulation.

The second version is for those who really want to push a high-end GPU. It has everything from the Lite version, but takes the simulation much further: you can experiment with objects that float or sink, stir ink and sand into the water, play with lasers and multiple light sources, and use different quality presets.

Each version is a single HTML file built on Three.js, free and open-source.

Play with them here, and if you want to see what else Three.js is capable of, check out Dan Greenheck's ocean rendering solution, as well as Yong Su's port of Evan Wallace's WebGL demo: