Stylized Water Material

Welcome to a walk through on how I made my stylised water Material inside UE4. Alongside UE4, I modeled the mesh in Maya, and painted the texture in Photoshop.

water1
Water Material

My material is made of three main parts; the base colour, the offset to make waves and the emissive water caustics. For base material properties I used:
Material Domain – Surface
Blend Mode – Translucent
Shading Model – Default Lit
Two Sided – Yes

Base Colour

water2
Base Colour Material Network

The base colour set-up is very simple. I have two shades of my water colour, one light and one dark. I lerp between them using a Fresnel (Exponent 5, Base Reflect Fraction 0.04), so my water is darker on the inside and lighter around the edges.

I then divide in a Depth Fade node (Opacity 1, Fade Distance 100). By dividing the depth fade, instead of multiplying, it means I get a white border instead of a black border around objects that intersect with the water.

water3
The difference between multiplying or dividing the Depth Fade

I then multiply a ‘Diffuse Multiply’ Parameter (set to 1), by the result of the Depth Fade, to control the brightness of the Base Colour; 0 = black, 10 = close to white.

Offset

water4
Offset for Material Network

The wobbling on top of the water is created through a Simple Grass Wind node, that is masked by the Meshes’ Vertex Colour through a Lerp. Vertex Colour works in a lerp so when the Vertex Colour = 0, A = 100%, B = 0% and when Vertex Colour = 1, A = 0%, B = 100%.

water5
Vertex Paint on Water Mesh

This translates into Maya, that Black means A = 100%, and white means B = 100%. In my case this means the black area will move, while the white area stays still.

water6
Vertex Paint Menu

Tip: To paint in Vertex Colours in Maya, select the mesh, right click, go to ‘Paint’, ‘mesh’, ‘shapeNameVertexColourRGB’.

Caustics

water7
Water Caustic Material Network

My caustics started off very simple, using papptimus’s water caustics tutorial. And the resulting node network (which plugged in to the ‘Emissive’ port) is as above.

Tip: To get the “Motion_4wayChaos” node, it’s found under “Engine Content/Functions/Engine_MaterialFunctions03/ComplexMotion”. You have to copy and paste it into your Material.

causticsMine
End Result Water Caustics Texture

However, after some time looking at the Stylized Rendering Content Example and at the sun’s material, I decided I wanted to paint shapes in to the RGB channel of a texture and then individually animate the brightness of each channel.

water8
Animated RGB Channel Network

So as can be seen above, the first part of my material stays the same. However after the Motion_4WayChaos node, I then mask out each channel, and animate separately.

In my example, I want the blue channel to appear all the time, so I only multiply by 0.3 to lower the opacity.

For the red and green channels, I want them to fade in and out. I use a sine wave to create a cycle, offset the green channel by 1, clamp them at different values to further offset, before multiplying by 0.5 or 0.3 to lower the opacity.
I then add all of the textures back together, and multiply them by the colour I want the caustics to be. This then plugs into the ‘Emissive’ port.

water9
Water Mesh UV Layout

To get the stretched lines down the side of the water, this is handled through the UV layout. I give the edges very little UV space which causes the texture to stretch down the sides.

Thanks For Reading

I hope from this you can expand upon and build your own water materials. I’d love to see what you make!