WebGL Waves


WebGL Waves was developed as an experiment with Emscripten, which compiles C++ into Javascript for use in browser applications. I was interested in seeing what kind of performance I could get out of a browser based 3D application so I chose to implement Tessendorf’s FFT ocean simulation[1], which I’ve already used in my Python based WaterCaustics project.

The demo currently uses a 64×64 mesh grid to represent an ocean surface tile and every surface update requires the computation of 5 64×64 point 2DFFTs (heights, x/z displacements & normals). Performance wise, an Intel i5-2500K based machine with a Radeon HD6950 achieves 53FPS in Chrome and a Samsung Galaxy S3 running experimental WebGL in Chrome gets around 10FPS, which isn’t really fast enough to be considered interactive but I’m still impressed that it worked without any additional effort on my part. Performance could be improved considerably by moving parts of the ocean simulation (notably the FFT) onto the GPU.

The Demo

Access the demo here.

The sections on the right hand side of the page let you control the ocean surface parameters and adjust the inputs to the surface shader. Enable or disable the mouse based camera by pressing ‘M’ and move around the scene using the WSAD keys.


I’m quite impressed by Emscripten, compiling my code to Javascript was a relatively painless experience and now it will work on any platform with a WebGL capable browser without the user having to install anything. This will be a great way to distribute games or other 3D rich applications in the future, and you can reuse your existing code base without having to rewrite it all in Javascript.

[1] Tessendorf, Jerry. “Simulating ocean water.” Simulating Nature: Realistic and Interactive Techniques. SIGGRAPH (2001).