Single-File WebGL2 Demo Delivers Photoreal Water Without Build Tools 🔗
Real-time caustics and FFT waves run in browsers using only HTML, shaders, and base64 textures
Aureliengmz/clearwater renders photorealistic shallow water simulation in a single HTML file, requiring no external libraries, build steps, or assets. Using WebGL2 with float render targets, it implements Jerry Tessendorf’s FFT-based ocean wave model, Evan Wallace’s refracted-grid caustics, and Inigo Quilez’s seabed tiling techniques—all within client-side JavaScript and GLSL shaders.
The seabed texture is embedded as a base64-encoded JPEG at the file’s end, regenerable via a Python tool using NumPy and SciPy. Resolution dynamically adapts to maintain frame rate, and users can interact by dragging to look around or tapping to disturb the water surface.
This approach eliminates toolchain friction for developers experimenting with real-time water rendering, offering an immediately runnable reference for caustics, FFT waves, and LEAN mapping-based highlights. It serves as both a learning resource and a deployment-ready snippet for prototypes or educational demos where zero-install access matters.
The catch: The simulation is limited to shallow water effects and lacks deep-water physics, foam, or spray, making it unsuitable for full ocean scenes without extension.
Why this leads today It enables instant, no-installation photorealistic water simulation in any browser, removing barriers to real-time graphics experimentation and education through a self-contained, library-free WebGL2 implementation.
- Learn real-time water rendering with FFT and caustics
- Embed interactive water in static educational sites
- Prototype fluid effects without build configuration
Source: Aureliengmz/clearwater — based on the project README.