NuclearStrawberry

Water! Technical breakdown and cool gifs.

Added 2020-04-04 17:12:03 +0000 UTC

I spent the past few days making water! It came out way better than I expected and I'm not sure if I've seen the same graphic technique anywhere, so I thought it'd be fun to write about the technical stuff behind it.

---

The first trick is a shader that applies a gradient to every object, based on how far underneath the water's surface each point is. The gradient has a sharp white line at the top, and then soft blue-to-black under it. This means you can still see the shape of anything immediately under the water's surface, but there's no texturing or shading at all.

The second layer is the water itself, just rendered as mostly a flat plane (with a simple diagonal sine wave offset to add the waves). It's two copies of the same texture, at different opacities and moving in different directions. This is blended additively over the rest of the scene, which gives it the nice soft edges around underwater objects.

The water texture itself was grabbed from here (Berserkitty on Deviantart) with a few palette changes. I'll make a few other water textures later for different kinds, but this was a great one to start with!

The splashes are probably the most complicated part. The main component is a splash texture that gets applied to a partial cylinder, which "falls over" and spreads out. I spawn a bunch in different directions for a circular splash, or at limited angles for a directional one. These are all blended additively too.

Splashes also have a "foam" effect that's a bunch of particles that fade out, and the particle graphic itself is actually 3 dots per particle to save on a bit of processing. There's another set of particles that have only 1 dot as the graphic, follow gravity, and make a small animated splash when they hit the water.

The ripples are pretty simple: they're just a small crescent graphic that I spawn at a few random angles per ripple, so they're randomized/"broken" a bit. Characters make ripples a few times per second when they're in the water, and splashes make bigger ones.

I think that's basically everything. If you use some variant of this for your own game, make sure to tell me about it! Things are really rough in the world right now, but if you can afford it, you should consider subscribing to us here. It'd be a big help!