A ship in a bottle, with a sea that actually moves. This browser experiment combines water simulation, refracting glass, and a floating galleon into an interactive digital diorama.
Try the simulation · Source code
Playing with a miniature ocean
Tilt the bottle and the water sloshes toward the low end. Tap the surface to make ripples, send a wave through the bottle, or move the camera close to the glass. The ship responds to the water beneath it, while its hull disturbs the surface in return.
A sea-state control moves between the quieter behaviour of water at bottle scale and the rolling waves of a miniature fantasy ocean. The soundtrack is synthesized from the simulation: sloshing water, foam, wind, and muted contact with the glass. Moving closer opens up the sound, a little like leaning into a seashell.
Building it
The project uses Three.js and WebGL2, with a GPU water simulation and a smaller CPU version for buoyancy. Custom glass rendering makes it possible to see refracted water through the bottle, while procedural lighting and caustics help give the scene depth.
The water, glass, room, lighting, and sound are procedural. The ship is the “Nautical Galleon” model by rakshaan, used under CC BY 4.0; full attribution is in the repository.