Embedded above is something I’ve been working on over the past couple of months that I thought people might find pretty interesting to play with. This is a WebGL2 simulation of the topography of an ocean simulated via Gerstner waves, rendered entirely on the GPU. My project is called Sargasso and the source code can be found on Codeberg (and on GitHub if you prefer).
The initial idea that got me interested in building this was that I needed a way to play with the very complex parameters for Gertner wave simulations to try to create realistic and interesting ocean surfaces. I also wanted to understand how adjusting the parameters affects the resulting waves, as you’d do to simulate weather on the ocean, or different regions with different depths and conditions and so on.
If you’d like to play around with it yourself, click on the gear icon on the center of the right edge of the simulation, and a panel with all of the relevant parameters will show up. You can modify simulation-wide parameters, and add, remove, or modify any of the numerous individual Gerstner waves that make up the simulation as a whole.
There are a number of presets you can choose from at the top, and these will pull in sets of wave parameters that are designed to represent specific ocean conditions that they’re named after.
At the moment, the only available fragment shader renders the surface as a topographic map of sorts, showing elevation contours that you can configure extensively, including index contours.
Because I also just found the simulation beautiful and mesmerizing, I designed it to be usable as just a cool art feature that can be embedded arbitrarily in a website, and you can see that in action on the home page of this website, where I’ve placed a simulation as the background of the site header. You’re welcome to do the same if you want, the source code includes a WordPress plugin and the CI pipelines build the zip files that you can download and install easily. The WordPress plugin is built around the block editor and can be used in any context where that is available. It can also be used as a general purpose container to provide a dynamic background to any content you’d like it to highlight.
If WordPress isn’t your cup of tea, there are also two NPM libraries available: @sargasso/core and @sargasso/elements. The high-level option is the @sargasso/elements library, which provides simple WebComponents that you can embed anywhere you want. The @sargasso/core library gives you lower-level control to render into any canvas you want to render into.