minimin blog: (UDK) Water Material Tutorial

UDK Water Material Tutorial

This tutorial is going to show you to how to make a water material similar to this water material.
The textures necessary for this tutorial can be downloaded from HERE

---------------------------------------------------------------------------------

First, we'll open up UDK to start the tutorial.

I used July 2012 version of UDK to create this tutorial.

It is crucial that the UDK is in DX11 mode in order for the material to look like what it is in the video. The software will tell you that it will need to restart in order for the DX11 to work.

After you have changed the UDK from DX9 to DX11, we will quickly jump into Maya or 3dsMax to create a simple plane for where the material will be applied. In my case, I used Maya 2013 (it really doesn't matter).
For this tutorial, I created a plane 10 squares x 10 squares (I apologize for the image below).
They are 1024 units by 1024 units in width and height. And rotated 90degrees in x-axis so that it is perpendicular to the Z axis. I have set my maya settings so that Z is going up and down instead of Y axis.

Creating this plane is quite simple. Now we are ready to export it. But before exporting, I always like to do Edit > Freeze Transformation. Then export it to FBX file so that you can import it to UDK.

Now you may close Maya or 3dsMax, we won't be using it anymore for the rest of this tutorial.

Back in UDK, we'll now create a package. I named mine "waterTUT", you may name yours whatever you want. And then you will create a material. I named mine "WaterMat".

I strongly believe that naming assets specifically is a habit that everyone should get into. It may save precious time in the future.

After you've sucessfully created a material, import the plane as a static mesh and all the textures that are included in this tutorial. One normal map is from the UDK contents, it is T_UN_Liquid_BSP_SoftRiver_01_normal_b. It is included in the UDK itself.
And this will be a good place to SAVE your package.

Now, we will create a map that will be used for reflection.

In the Content Browser page, there is a tab named Actor Classes. Under the Actor classes tab, go under Uncategorized and drag SceneCaptureCubeMapActor into the map. In the image, I was using DX9 instead of DX11. As a result, the sphere will be colored. However, when you use DX11, it will remain black. I believe it is a bug of some sort that Epic has not yet addressed at the time of making this tutorial.

While the SceneCaptureCubeMapActor is selected, press F4 or go to its properties.

Under the properties, we will change several items.

1. change the view mode to SceneCapView_Lit.

2. make Far Plane a great number. (I found pressing 9 for several seconds is a good method since it will automatically change the number to the max numeric value if the artist exceeds it)

3. check Enable Post Process and Enable Fog

***Please note that changing these setting will require more performance power than when it is at its original value.***

as I mentioned before, the sphere will change its color when those setting are altered in DX9 mode.

Now, we will jump back into the content browser and create something called TextureRenderTargetCube by right-clicking on the empty space of content browser.

When this window pops up, we'll name it "reflection". You may name it anything you want.

And for the width, we'll change it to 1024. Also keep in mind that raising this value will have negative impact on the performance. However, higher value will give you higher resolution of the reflecting image. So you may need to tweak the value to fit your allowance and project.

When you press "Ok", you will now need to plug in the TextureRenderTargetCube to the SceneCaptureCubeMapActor. You may easily do that by just pressing the green button on the properties window that had been open the whole time.

Now you may want to SAVE your package and the map. The textureRenderTargetCube will NOT work when you use it in a different map; you will need to manually plug it into another CubeMapActor if you want it in other maps.

Now that the package is saved, I will continue this tutorial by right clicking TextureRenderTargetCube and selecting "Create New Static Texture..."

The software will compute the scene for couple of seconds. You might need to go into different package and return back for the static images to show, or refreshing the page could work.

***Please note that the different scene will give the water different colors***

When you've successfully created the static images, all the necessary components for the material has been collected. And all we have to do now is to create the material inside material editor.

With this material it is CRUCIAL to change the Blend Mode to Translucent

We'll return back to the material we've created before and start the creation. The image most likely will speak for itself. I've multiplied (.0806, .162, .243) constant color to .25 constant. I played around with different values but I personally liked this color the best.

Next, I grabbed CameraWorldPosition and Reflection Vector and multiplied it together. And they are plugged into texture sample (TextureCube was dragged into the editor from the content browser).

Now the TextueCube is multiplied by .1 to tone it down and not make it look like a mirror.

The Fresnel in the front will give the water a highlight.

The SpecularPower is set to 55 (It may be changed to fit your project).

And the opacity is simply DepthBiasedAlpha with alpha of 1 and Bias Scale of 256. The bias scale will determine where the material will become opaque. And the alpha will determine how opaque the water is. So in this case, plugging value of 1 is unnecessary.

Next step is creating the specular map. The panners will move the image in X and Y direction to create the illusion of moving waves. The TextureCordinator will tile the image.

And the time node is unnecessary for panner and rotator as I found out. It is necessary for sine and cosine nodes though.

I used an image with colors to create the specular map and just desaturated it 100% to get black and white image. I also noticed by using this particular spec map as a distortion map, the result I got was enjoyable.

After the Spec map has been created, Normal map is next. Just like the spec map, I created the normal by multiply the 2 different normal maps with different speeds together to create the illusion of the waves.

when you see the material inside a map, it should look something like this:

You will notice that there are no bubbles near the edge of the water. Now, we will create that in the editor.

You do not have to create all the nodes. However, it is recommended so that the bubbles will also look lively next the waves. It uses the similar technique as the spec map and the normal map in the sense that it is moving textures combined into one by multiply node. You probably have noticed the DepthBiasedAlpha here as well. It will determine at what depth the bubbles will appear and where the cut off will be.

You will need to combine the set of nodes in Diffuse bubble with the nodes for bubbles by ADDING these two sets of nodes. So in the end, it should look like this:

When you preview the bubbles in the editor, it should look more or less like the image below:

Now the bubbles will be created near the shallow parks of the water where the broken waves form bubbles. However, what bothers me is the sharp cutoff of the bubbles. It doesn't look organic to me. In order to fix that a little more work has to be done.

Addition of 7 more nodes will successfully get rid of the harsh edges of the bubbles. You will notice that the edges will become more broken and little more random than before. I personally prefer this look.

Now the final step.

Until now, DX11 was not doing anything to make the material look great. However, this is where DX11 will shine.

First we will create the nodes that will be used for World Displacement.

The only texture sample present in the image will act as the huge round waves that create the illusion so that the material behaves like a big body of water. You may experiment with different images for different effect.

You will notice that the WorldDisplacement is not available for use. It is because UDK doesn't know that the artist wants to use that. So what we need to do is to let the software know that we are going to use it. The settings can be adjusted under the D3D11 tab. What you need to do is change the D3D11 Tessellation Mode to PNTriangles and enable crack free displacement. That will allow you to plug in the nodes to the World Displacement.

I have not gone in depth with tessellation in this particular tutorial. But it is unwise to leave the tessellation as is. The artist should create series of nodes to tell the UDK to only tessellate the meshes near the camera or at designated distance. Otherwise, the performance requirement will be outrageous.

Now you have successfully created the water material.