Liandri

The forum offers unofficial support for UnrealEd users and serves as a comfortable rest-room for a friendly community.
 
HomeFAQRegisterLog in

Share | 
 

 Water Textures

View previous topic View next topic Go down 
AuthorMessage
Murphy



Posts : 147
Join date : 2008-10-18
Age : 29

PostSubject: Water Textures   Tue Nov 10, 2009 4:06 pm

A good water texture is transparent, shows waves, is animated and possibly reflects the environment. So we are going to create a texture that has all of that.

Transparent textures
To make a texture transparent, make it transparent in your graphics program of choice (e.g. Photoshop, TheGimp, Paint.NET, etc.), save it as a 32-bit TGA and then read up here how to import it into UnrealEd.

Waves
Waves alone look horrible. They need to be animated. More on the animation below, but as a starting point we still need a static wave texture so on with that for the moment:

When a little wind is blowing the surface of a pool of water will be rippled. There are different ways of acquiring suitable wave textures.
1. from photos of actual water surfaces
2. from photos of sand
Fine sand near water has tiny dunes in it that look a bit like still water waves. If you take a photo (or an existing texture) showing this you can blur it a bit, recolor it and make a water texture from it
3. from scratch
If you have other good tips, let me know.

I used a sand texture from www.cgtextures.com. Here is a smaller, cut-up, low-quality version of this texture (for the original, go to cgtextures.com!) just to give you an idea:

Now imagine it with more contrast, transparent, and maybe desaturated and you have a usable wave texture.

Animating the waves
Of course waves aren't still but continously moving, reforming, ... We'll have to find a way to fake this behavior and reproduce something that looks vaguely similar with UnrealEd. First, lets get the wave texture from above moving.

The following works with opaque textures! We are going to use and combine various UnrealEd material operations to create an animated water texture. At the end we canl make the whole thing transparent if we want. The base water texture we are going to use has to be opaque though.

Open the Texture Browser and click File -> New. In the dropdown menu select TexPanner and give it a name and a package (more on that here), then click ok. You now have an empty TexPanner. Its properties should have opened automatically. If not, open them manually. The bottom line allows you to use a texture as its material. Select the wave texture and 'use' it here.

You may need to rotate the direction of the movement. This can be done in the Yaw field under PanDirection. UnrealEngine 2 does not work in degrees so the numbers may seem a little weird. 16384 is the same as 90°. 32678 is the same as 180° and so and so forth.
The PanRate field allows you to change the speed of the movement. A number that is twice as high means it's twice as fast.
Experiment with these values a bit until you like how it moves.

Tip: You can click on the little exclamation point in the Texture Browser to make the movement also show up in there. By default the dynamic preview is off, but it is easier to keep track of Panners and the like when it's turned on.

Of course real water doesn't look like a conveyorbelt with waves on it, so we need something else, to make it look more natural.

A good way to mix things up is to use a second TexPanner and blend it over the first. Create another TexPanner like you did with the first, but make it move in a slightly different direction. If you want the water to flow in a direction (e.g. upwards on the texture) make one of the TexPanners flow roughly into the direction of 75 degrees and the other roughly into the direction of 105 degrees. You can use different values, of course. Just to give you an idea.
To mix it up even further, I suggest giving them a slightly different PanRate. Make one a tiny bit faster than you want your water to flow and the other a tiny bit slower.

Now create a combiner by clicking File -> New again, but this time you select Combiner from the dropdown menu instead of TexPanner. A Combiner should be created now and its properties should be open. If they are not, open them manually. Now use one of the TexPanners as the Combiner's Material1 and the other as its Material2. Set AlphaOperation to UseMask. Now you need to blend the two TexPanners onto each-other. This is where the CombineOperation setting comes in.
Just try them all and take what you like. AlphaBlend_with_Mask requires you to use a transparent texture as the Mask of the Combiner.
Usually 'Multiply' looks quite alright.

The Combiner should now look like a fairly dynamic, wavy water surface.

Except it's not transparent, it doesn't move in 3d but only has 2d waves on it and it doesn't reflect the environment.

If you want to skip reflectivity, skip the next chapter and go to Adding Transparency directly. If you want your finished water to reflect, just read on.

Reflections
You may want your water to reflect the environment. First off, real reflections aren't possible or feasible for this purpose. What we are going to do is to create a static 'reflection' consisting of screenshots from your environment.
Here is a tutorial that explains how to get such 'reflections' set up.
Additional explanations for the tutorial above:
The CubeMap can be seen like a cube with your screenshots as walls. The TexEnvMap can be seen like a texture that shows the view from inside the box. The TexEnvMap is what we'll be working with next.

As suggested in the tutorial, the TexEnvMap alone is very shiny, as it is basically a pure "reflection". We are going to combine it with our water combiner to make it look less extreme.

For that we create a new Combiner and use our water wave combiner as its Material1 and the TexEnvMap as Material2. Combine Operation will be set to AlphaBlend_with_Mask and Alpha Operation is Use_Mask.

Now we need a texture that is as transparent as we want our waves to be on the reflection. You may need to experiment with the transparency of that texture for a while until you get it right. 127 of alpha value is a good starting point however, so create a 50% transparent texture in photoshop or something similar. Read at the top how to get such a texture imported into UnrealEd.

This new, transparent texture can now be 'used' as the 'Mask' of our new Combiner.
The new Combiner should now look like a wavy texture that reflects an environment.

Adding Transparency
The combiner cannot be made transparent directly, but we can take our finished combiner, put it into a Shader and make the Shader transparent.

For that we need a texture that has the transparency you want your Shader to have. Look at the top to find out how to make and import one.

Once you have it, again, in the Texture Browser, click File -> New and select Shader in the dropdown menu. It should be selected by default. Enter name and package and click ok. You should now have a Shader. Its properties should be open already. If they are not, open them manually.

Under Diffuse 'use' your finished Combiner. Under Opacity use your transparent texture.


Done. You should now have a great looking water texture.
Back to top Go down
View user profile
 
Water Textures
View previous topic View next topic Back to top 
Page 1 of 1
 Similar topics
-
» Water buffalo fighting in China
» Win Rachael Ray's #1 Flavored Water *usa only*
» jan's graphics
» HGTV Fantastic Front Door Contest *usa only*
» What are copy/pasted textures?

Permissions in this forum:You cannot reply to topics in this forum
Liandri :: = Tutorials :: UnrealEngine 2-
Jump to: