ScottieFox / caustic-volume

# CAUSTIC//VOLUME
Real-time water caustics in the browser, built on three.js. Sunlight passes through a moving water surface, bends, and gathers into the bright, shifting lines you see on the bottom of a pool.
There are two versions. Each is a single HTML file with no install and no build step: open it and it runs. three.js (r186) loads from the jsDelivr CDN through an import map.
| | **CAUSTIC//LITE** | **CAUSTIC//VOLUME sandbox** |
|---|---|---|
| **Who it's for** | Anyone: old laptops, phones, school computers | People who want to push a high-end GPU |
| **Graphics** | three.js on WebGL 2, with a CPU fallback when there is no WebGL 2 (or no connection to load three.js) | three.js on WebGL 2 with float render targets |
| **Code** | `lite/index.html`, about 990 lines | `sandbox/`, about 7,500 lines built from 18 source files |
| **In it** | A random sea, a rubber duck that makes ripples, sun or lamp, turbulence, click ripples, caustics | Everything in Lite, plus objects, creatures, ink, sand, up to three lamps, a laser and much more (see below) |
| **Live demo** | Open Lite | Open the sandbox |
## Run it
1. Download this repository: use **Code → Download ZIP** on GitHub, or `git clone` it.
2. Open `lite/index.html` or `sandbox/index.html` in a browser.
You don't need a server or an install. The first load needs an internet connection for three.js; your browser caches it after that. Offline, the lite version switches to its CPU renderer. If you'd rather serve the folder over HTTP, run `python3 -m http.server` in the repository folder and open http://localhost:8000.
---
## CAUSTIC//LITE
| | |
|---|---|
| | |
The small version has a glass tank of water with a rubber duck bobbing on it, the sun or a hanging lamp, and the light that the moving surface focuses onto the tank floor. It is written to be read. The whole program is one file, about 990 lines including comments.
**Controls**
| Input | Action |
|---|---|
| Drag | Orbit the camera |
| Scroll, or pinch on a touch screen | Zoom |
| Click or tap the water | Make a ripple; near the duck, it also pushes the duck |
| **Sun / Lamp**, or L | Light the tank with the sun or with a lamp hanging over it at night |
| **Rubber duck**, or D | Put the duck in the water or take it out |
| R | Random ripple |
| Space | Pause |
| H | Hide the panel |
| Sliders | Sun height and direction (or lamp height and position), wave height, turbulence (short waves, gusts and how lively the duck is) |
Add `?cpu` to the URL to force the CPU renderer, for example `lite/index.html?cpu`.
### How it works
- **A random sea.** Twenty-four travelling waves, from 1.2 m down to 12 cm long, head in every direction (spread by the golden angle, so waves of similar length never run side by side). Together they make a short-crested, random surface, like a real pool in a breeze. Its caustics form a net of bright cells, not the parallel stripes that waves all heading one way would draw. The wave heights are chosen so each size bends the lig