Thread by @SaralieWagstrom

✨🌊WATER BREAKDOWN💦✨

A lot of people have been asking about how I've set up the water I showed in my last tweet, so here comes a breakdown of the materials in Unreal Engine 4, a 🧵

#indiegame #indiedev #gamedev #UnrealEngine #VFX

~WATER BASE~
First off the base water, for lakes and oceans etc, that the river and waterfall are based on.
Here’s an overview of the material. It’s an opaque material and I’ve turned on tessellation for displacement of the waves.

Here’s a closeup of the first foam part of the graph. This is for the animated small lines moving away from the shore, and uses techniques shown by Johannes Bjurström in this video:

And here’s the second part, for the main thick line following the shapes of the shores. I’m using Mesh Distance Fields to generate the foam around the geometry, so that needs to be turned on in the project for this to work.

Here’s a closeup of the color part of the graph. Nothing fancy happening here, really. The peak part uses the height of the waves to apply a slightly brighter color to simulate light shining through the thinner parts.

This is the sparkles on the water, plugged into the emissive of the material. I’m using Absolute World Position so that the UVs and scale of the water mesh won’t affect the look of the water.

Here’s the normal setup. Using panning normal textures, changing scale based on the distance to reduce tiling and noisiness when looking at a large water surface.

This is where the wave displacement happens, and how it also connects into the normals. The MF_Water_WaveDisplacement_01 node is based on this tutorial by @BenCloward:

Here everything connects at the end. The lerps control the values between water and foam. The parameter switches allow me to turn off/on effects in the material instances. I have not yet optimized the tessellation to decrease when you are further away (hence the red note)

~RIVER~
Based on the base water material above, a lot is similar. This one isn't tessellated and is masked as it uses opacity.
Here’s an overview:

The river mesh is 8m wide and 16 long, and is UV mapped to fill the square UV space perfectly so that it tiles when distributed on the spline. The mesh is a rectangle to add more detail on the length, and then I use a non-uniform texture on it to match this.

Here’s the foam. With the same shoreline setup as the base water. I'm using panning textures to add detail and movement, and vertex painting to add/remove foam for transitions etc. I pan the lines twice, in different scale and speed, to create more movement and variation.

Here’s the color part. Again, nothing very fancy going on. Using the mask in the red channel to darken the center, to give a sense of depth to the river.

The normals are also pretty straight forward: two versions of a panning normal map to create some movement.

Here’s the sparkles. Same as the base water so that they match next to each other.

The opacity on top allows me to dissolve the water through vertex painting to transition the river between other water masses. The lover part allows me to break up the sides of the river if I want to create small waterfalls etc where the edges would be visible.

Here’s a look at the MF_MaskFromGradient material function above.

And here’s where everything connects in the end. Again, the lerps are for the difference between water and foam.

~WATERFALL~
This one is based on the river material, but is an opaque material. This is the "watery" part of the waterfall, and I won't go into the foamy things around it here, but I'll link to my references for it at the end.
Here’s an overview:

The waterfall has 2 UV channels. 1 that is a regular unwrap for the textures, and the 2nd is mapped as a square, filling the UV space, to apply gradient masks etc. It also consists of multiple meshes, for the other effects, similar to the two breakdowns I’ll add at the end.

Here's the foam. Similar to the river, but 3 instead of 2 panning textures for more movement. I also create a mask for the top and bottom to increase the density of the foam lines there. Then I also use the Shoreline logic for where the waterfall intersects with things.

Here’s the color setup. Here I make it brighter lower down, to transition into the foaminess. I also use a fresnel to make it brighter on the sides where one could imagine more light being let through.

The normals are basically the same as the river. For the sparkles I switched from Absolute World Position to Texture Coordinates as the first is a vertical projection so it stretches on a vertical object, and it's not as important for the sparkles here to match the other waters'.

For the other effects around the waterfall I mainly referred to these two great breakdowns/tutorials:
realtimevfx.com/t/filo-sketch-…

And finally, a slight disclaimer: these are not the final versions of the materials, so don't expect them to be the most optimized or efficient~~

Thank you so much for reading through all of this!
I hope you've found it interesting😊