Aquarium, With Refraction Screensaver
The Aquarium, With Refraction screensaver puts fish in a real volume of water, with light caustics moving across the sand below them and bubbles rising past. It runs in the browser with nothing to install; press ESC to exit.
How the Aquarium, With Refraction screensaver works
The saver renders with three.js on your GPU. The library is vendored into this site rather than fetched from a CDN, and is loaded only when a 3D screensaver actually runs.
It reads nothing external — the fish, the tank and the caustic pattern are all generated in the browser.
The scene resizes with the window and releases its WebGL context when the saver stops, so shuffle mode and Multi-view can cycle 3D savers without exhausting the browser's context limit.
If WebGL is unavailable the saver says so on screen rather than showing an empty black box.
Caustics: the light patterns on an aquarium floor
The wobbling net of bright lines on the bottom of a swimming pool is called a caustic. It happens because a wavy water surface behaves like a collection of lenses. Light bends, or refracts, as it passes from air into water, and the amount of bending depends on the slope of the surface at that point. Where the surface focuses rays together, you see bright lines; where it spreads them, you see darker patches.
The bending is governed by Snell's law, and for water the refractive index is about 1.33. In offline rendering, caustics are computed by tracing photons or by following light backwards from the floor. Doing that in real time is expensive, so real-time graphics usually approximate them, for example with an animated texture or a pattern computed from the surface's slope, which looks right to the eye without being a physically exact simulation.
In this scene the bright shimmer lands on the sand rather than on the glass, since the effect needs a surface to fall on. Everything else, from the fish to the rising bubbles, is a decoration with no connection to a real aquarium's inhabitants. If you keep a tank, the lighting you see in a real one is shaped by the lamp's position, the water's movement and the glass.
A worked example
The sand is a single quad running a shader that layers three moving sine fields into a caustic pattern — the bright web of light that appears on the bottom of any sunlit pool. Twenty-two fish swim with independent speeds and headings, bobbing as they go, and turn back when they reach the glass. Depth fog thickens with distance, which is what makes the water feel like water.
Settings & tips
- Accent and Background recolour the scene; Speed changes the pace of both the motion and the camera.
- Add it to a Multi-view grid, though 3D savers are heavier than the 2D ones and a few per screen is plenty.
- Press ESC at any time to leave fullscreen.
Frequently asked questions
- What are caustics?
- The bright moving网 of light on the bottom of a pool. The surface acts as a lens: wherever it curves, it focuses sunlight into a line, and those lines drift as the surface moves. It is the single most recognisable thing about underwater light.
- Are the fish real species?
- No — they are simple modelled shapes in aquarium colours. This one is generative rather than data-driven.
- Does this need a special browser or plugin?
- No. It uses WebGL, which every current desktop and mobile browser supports. Nothing is installed and no plugin is required.
- Does it cost anything or need an account?
- No. Every screensaver here is free, runs in the browser and needs no sign-up.
- Why do the light patterns keep moving?
- Real caustics move because the water surface moves. Ripples constantly change which rays get focused, so the bright network shifts and flickers.
- Do caustics only happen in water?
- No. Any curved transparent surface can produce them, such as the bright curve inside a glass of wine or the focused spot from a glass sphere.
- What is refraction?
- It is the bending of light when it passes between materials in which light travels at different speeds, such as air and water. It is also why a straw seems bent at the surface.