A simulated pool of water with light caustics rippling across the tiled floor, a floating sphere casting soft shadows, and reflections on the water surface.
If you were doing WebGL work in 2011, you probably remember Evan Wallace's water demo. A pool of water in a browser, with ripples you could draw, caustics dancing on the floor, and a sphere bobbing around obeying physics. It looked like something that belonged in a game engine, not a Chrome tab. WIRED called it one of the most impressive WebGL demos they'd ever seen. Dylan Field saw it and thought: if the browser can do this, maybe it can do Photoshop. The two went on to co-found Figma [1, 2]. That's the lineage here.
Now Yong Su has brought Wallace's legendary demo into the WebGPU era, and the port is more than a nostalgic exercise. The original relied on extension gymnastics (OES_texture_float, OES_standard_derivatives) that not every browser supported gracefully. WebGPU bakes all of that into the core spec. But the real work was translating the rendering philosophy: GLSL to WGSL, implicit state to explicit bind groups, a different coordinate system, and immutable pipeline objects instead of WebGL's mutable state machine. Su's README is a small textbook on what it actually takes to cross that bridge. The caustics alone are worth studying. Light rays refract through a 256×256 heightfield, project onto the pool floor, and the shader uses screen-space derivatives to compute intensity based on how much the light has been compressed or spread. It's elegant math made visible.
Go make some ripples. Drag the sphere. Hold L to move the light and watch the caustics chase it. Then dig into the source. Su works at Google, builds graphics experiments for fun. If you're porting your own WebGL projects forward, his notes on the transition are a gift.
- Live Demo: https://jeantimex.github.io/webgpu-water
- Source Code: https://github.com/jeantimex/webgpu-water
- Author: Yong Su (X, GitHub)