Saturday 11 October 2014

A simple sea shader

Today I was asked why not writing making a water material on UE4. Well, actually water is one of the most complicated to replicate in videogames. First off, the material is quite complicated by itself since it has to be translucent,reflective and dynamic.
Also you have to keep in mind there is not an universal water material for every situation or setting. That awesome sea material you made won't certainly suit in a river or a fountain.
Moreover, on the programming side, water has to react to interaction from players, NPC or even from the weather if you plan to do a stormy scene.

 Water in Assassin Creed 3
The water in Assassin's Creed 3, a very well done example of sea water.
Leaving that aside, the sea material I'm going do today doesn't have any translucency because, right now, translucent material in UE4 are quite crappy and have issues to keep both reflections and translucency. I would dare to say that even the translucent shader from UDK behaves more correctly that the one used in this version of Unreal (4.4 at time of the writing).

So, let's get started. To do this tutorial we will first need a tessellated plane. You can do one by yourself in your favourite 3D program. I usually work with Maya, and it's done in a few clicks
Don't bother about UVs, export it as a FBX and get it imported into your UE4 project. As you may see in the following pic, this is 2500*2500 plane with 40x40 divisions.

Water plane in Maya


Then we will need a normal texture to do our water waves.The textures I will be using are from a Skyrim Mod. One normal texture would be more than enough to achieve the material, but in this case I will be using 2 different.
Also we will need a difference clouds texture. You can make it right in Photoshop with the filter but make sure it's tileable.

Textures used for Water
The textures used in this example. You may find a download link at the end of this article.
Once we've got our assets imported in UE4, we can start creating out material. Our water will be mainly defined by a couple of normal maps with it UV's panned.

Water material network 1

As you may notice, for this example I'm using World coordinates instead of Texture Coordinates. I do this because I want my material to look exactly the same whether I apply it to a huge plane or a tiny one.
Regarding the panner nodes, those are to achieve the illusion that water waves are actually moving. Note that you have to put some speed on both panners. On the upper one, I have introduced 0,01 and -0,01 for Speed X and Speed Y respectively. while on the second one the values are 0.01 and 0.01.

Now we are going to add some color and specularity variation using a Fresnel. A Fresnel is an effect that was first documented by the French physicist Augustin-Jean Fresnel. Applied to materials, a Fresnel effect allows reflection, specularity, and other attributes to vary according to the viewing angle of a 3D surface
Back to our material, this is how it should be like right now.

Water material network 2

Our material looks pretty good right now, but we can still tweak it by adding some waves done through DX11 tessellation Before doing anything, we will have to enable the tessellation nodes by activating the following options in our material.
Notice in this example, I packed 3 kinds of difference clouds in the same texture (that's why it looks rainbowish). Aside that, we are panning our texture slightly faster than the normal maps (I'm using 0,05 and -0,05 for this panner node)

Water network 3

And now to finish, and since I decided to do opaque water, I can still improve it by adding an SSS effect to this material. Simply set the appropriate option in your material properties (see the screenshot) and add a color vector parameter to SS Color node.

Subsurface in the sea

Now you can apply you material to you tessellated plane. I did a little setup in UE and this is the result.

Sea material final result

Hope you like. And remember, there are several ways to achieve a good water material and whole solutions like the VaOcean Plugin which is quite impressive and is more than just a material.

And here, you may download the textures used for this material. And that's it!

4 comments:

  1. can you make a video tutorial? lol

    ReplyDelete
  2. i must be stupid, cause im copying the whole folder from the JAR/ZIP to my Content folder in my UE4 project, but it looks like a concrete plane instead of water when I apply your texture. :(

    ReplyDelete
  3. thx!much detailed than the wiki tutorial.

    ReplyDelete
  4. Thanks! Super helpful and quick.

    ReplyDelete