A molecule with water — glass and GPU water simulation in three.js

We wanted to build such a scene entirely in real time: a water molecule of three glass lobes with thick walls: the letters H, O and H in the lobes, and actual water with floating balls inside. The molecule spins and turns further as the page scrolls, and the water lives along with it: it sloshes when the molecule turns, bounces off the walls and the letters, and ripples away from the cursor.

The model was made in Blender for this job: outer and inner shells of 7.5 thousand triangles each, the letters H·O·H in Moderustic with a bevel, five balls and a plane that sets the water level. The whole file is 383 KB.

The work

• The water is not particles but a height field on the GPU: the shallow-water wave equation on a grid of about 480×150 cells, 240 steps a second. The grid lives in the molecule's own space, so the water turns with the glass, and the equation includes the forces of a rotating vessel — centrifugal and those from angular acceleration. That is why the water sloshes not on a timer but because the molecule was turned;
• the water's boundaries are the actual cross-section of the inner shell at the water level. Letters that dip into the water are obstacles, and moving ones: the letters always face the viewer, so in the water they turn. The cross-section of each letter at the water level is computed once, in the letter's own coordinates, and every frame the GPU lays it onto the mask at the current angle. Waves bounce off the glass and the letters and wrap around them, a light edge appears along the walls, and foam where the water moves fast. Cells behind the wall carry on the height of the neighbouring water — otherwise stepped marks were left on the glass;
• besides height, the simulation stores the flow. Its velocity under each ball is read back asynchronously — eight pixels, without stalling the GPU — and the balls drift with the current, push off the walls, the letters and each other, and leave a small wake. They bob with the water height right in the shader;
• the glass is a three.js physical material with transmission, but the wall thickness is computed from the length of the ray's path: in the middle the wall is thin and barely distorts, at the silhouette the path through the glass is long — stronger refraction and denser colour, as with thick glass. The walls hold air bubbles, and the edge has a glow — otherwise at grazing angles the wall showed dark;
• everything inside the glass is seen only through its refraction: the water, the balls and the letters are flagged opaque but blend themselves and write colour only to the transmission buffer. The water itself is one more pass: everything behind it is drawn to a texture with depth, and the water samples it offset by the slope of the waves and absorbed by its real thickness. Letters under water waver, and sink into blue the deeper they are;
• the cursor over the molecule is projected onto the water beneath it: the simulation receives the speed of its movement, and a resting cursor leaves the water alone. A click shakes the water;
• the second mode is high water up to the bottom edge of the top letter. A large body of water without a surface reads as tinted glass, so it carries suspended particles — bubbles that rise, drift and lag behind the walls on a turn while the water spins up after the molecule;
• performance: three quality presets by device — a phone skips the water refraction pass, uses a coarser grid and half the steps; caps on pixel density and buffer area, a frame-rate limit on 120–360 Hz displays, and rendering paused off-screen.

The result

The scene runs on a transparent background and drops into a page like any of our widgets: the site sets the rotation speed and the scroll response, and the model is set in the case configuration. The panel under the molecule grew out of the one the scene was tuned with: 75 live parameters, from glass thickness and water colour to viscosity, ball bounciness and cursor strength. Layers can be switched off one by one to see what the picture is made of, and a single switch raises the water into the top lobe.